/* What every option of the public site shares: a small reset, the skip link, the
   fade-in, the phone menu's mechanics. Each option's own style.css does the look. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: #000; color: #fff; }
.skip:focus { top: 12px; }

/* Fades in when scrolled to; only when JavaScript runs, so nothing is ever hidden for good. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* The menu button on phones: two bars that become a cross. */
.burger { display: none; width: 42px; height: 42px; border: 0; background: none; padding: 10px; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, top .2s ease; }
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 24px; }
.nav-open .burger span:first-child { top: 20px; transform: rotate(45deg); }
.nav-open .burger span:last-child { top: 20px; transform: rotate(-45deg); }

/* The demo form swaps to its thank-you line once sent (no backend yet). */
.cta__sent { display: none; }
.is-sent > :not(.cta__sent) { display: none !important; }
.is-sent .cta__sent { display: block; }

details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}