:root {
  color-scheme: light;
  --page: 255 255 255;
  --paper: 255 255 255;
  --surface: 250 248 245;
  --ink: 26 21 18;
  --header: 229 225 224;
  --header-end: 234 229 228;
}
[data-theme='dark'] {
  color-scheme: dark;
  --page: 17 14 12;
  --paper: 31 26 23;
  --surface: 24 20 17;
  --ink: 245 239 233;
  --header: 26 21 18;
  --header-end: 21 17 15;
}
@keyframes market-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.marquee-track {
  /* Each track is ~3 chip sets long (about 3,100px) and loops by its full
     width, so the duration is scaled up to keep a calm ~30px/s scroll. */
  animation: market-marquee 105s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

/* Reveal-on-scroll only engages once JS has confirmed IntersectionObserver
   support (class added on <html>). Without it every element stays visible,
   so a no-JS visitor never sees permanently-hidden content. */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.has-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

details.faq summary::-webkit-details-marker {
  display: none;
}

/* How-it-works: a sticky phone (see the lg:sticky wrapper in the
   markup) shows four stacked .hiw-screen panels, and only the one
   matching the currently active .hiw-step crossfades to visible. The
   active step is set by its own IntersectionObserver watching the
   text column with a thin center-band rootMargin, so "active" means
   "closest to the middle of the viewport" rather than "just entered
   it". Inactive steps dim slightly so the active one reads as the one
   the sticky phone is currently illustrating. */
.hiw-screen {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hiw-screen.is-active {
  opacity: 1;
}
.hiw-step {
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
.hiw-step.is-active {
  opacity: 1;
}

/* Below lg there is no sticky phone: each step gets its own phone
   screen directly above its text. The phone column, its frame and the
   steps column stop generating boxes (display: contents), so the four
   screens and four steps become direct grid items of .hiw-grid and are
   interleaved with order: screen 1, step 1, screen 2, step 2, and so
   on. From lg up none of this applies and the sticky layout is
   untouched. */
@media (max-width: 1023.98px) {
  #how-it-works .hiw-phone-col,
  #how-it-works .hiw-phone-frame,
  #how-it-works .hiw-steps-col {
    display: contents;
  }
  #how-it-works .hiw-grid {
    row-gap: 0;
  }
  #how-it-works .hiw-screen {
    position: relative;
    inset: auto;
    opacity: 1;
    width: 220px;
    aspect-ratio: 9 / 18.5;
    justify-self: center;
    margin-top: 5rem;
  }
  #how-it-works .hiw-step {
    opacity: 1;
    min-height: 0;
    margin-top: 2rem;
  }
  #how-it-works .hiw-screen[data-hiw-screen='0'] { order: 1; margin-top: 0; }
  #how-it-works .hiw-step[data-hiw-step='0'] { order: 2; }
  #how-it-works .hiw-screen[data-hiw-screen='1'] { order: 3; }
  #how-it-works .hiw-step[data-hiw-step='1'] { order: 4; }
  #how-it-works .hiw-screen[data-hiw-screen='2'] { order: 5; }
  #how-it-works .hiw-step[data-hiw-step='2'] { order: 6; }
  #how-it-works .hiw-screen[data-hiw-screen='3'] { order: 7; }
  #how-it-works .hiw-step[data-hiw-step='3'] { order: 8; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  #how-it-works .hiw-screen {
    width: 240px;
  }
}

/* Removed height constraint as hero is now flex-1 in a container */

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
  .has-reveal [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hiw-screen,
  .hiw-step {
    transition: none;
  }
}

/* Native anchor jumps and focus() scroll (used when Lenis is skipped for
   reduced motion or fails to load) would otherwise land under the sticky
   header. */
html {
  scroll-padding-top: 6rem;
}

/* The terms and privacy pages: Tailwind's reset strips list styling, so the
   lists in the policy text get it back. */
.legal ul {
  list-style: disc;
  padding-left: 1.5rem;
}
.legal ul ul {
  list-style: circle;
  margin-top: 0.5rem;
}
.legal li + li {
  margin-top: 0.5rem;
}

/* A phone drawn in CSS for the closing banner: a brushed-steel band, a black
   bezel, the screen, a glass sheen and the side buttons. */
.phone {
  position: relative;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.35))
    drop-shadow(0 6px 10px rgb(0 0 0 / 0.25));
}
.phone-steel {
  padding: 3px;
  border-radius: 3.1rem;
  background: linear-gradient(
    145deg,
    #d8dade 0%,
    #7b7e85 18%,
    #2a2b2f 40%,
    #5d6067 62%,
    #cfd1d6 82%,
    #6a6d74 100%
  );
}
.phone-bezel {
  padding: 8px;
  border-radius: 2.9rem;
  background: #050506;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.08);
}
.phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 2.3rem;
}
.phone-island {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 33%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.05),
    0 0 0 1px rgb(0 0 0 / 0.5);
}
/* The camera: a dark ring, a glass lens with a blue-violet cast and a
   pin-point highlight. */
.phone-island i {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background:
    radial-gradient(circle at 32% 30%, rgb(255 255 255 / 0.55) 0 8%, transparent 9%),
    radial-gradient(circle at 50% 50%, #1b2440 0%, #0a0d18 38%, #02030a 62%, #0b0c12 100%);
  box-shadow:
    0 0 0 2px #0d0e13,
    inset 0 0 3px rgb(90 110 255 / 0.35);
}
/* The face-sensor dot beside it. */
.phone-island::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 28px;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: radial-gradient(circle, #14151c 0%, #050508 70%);
}
.phone-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    rgb(255 255 255 / 0.2) 0%,
    rgb(255 255 255 / 0.05) 28%,
    transparent 45%
  );
}
.phone-btn {
  position: absolute;
  width: 4px;
  background: linear-gradient(90deg, #4a4d54, #1c1d20 60%, #3a3c42);
}
.phone-btn-r {
  right: -3px;
  border-radius: 0 3px 3px 0;
}
.phone-btn-l {
  left: -3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(270deg, #4a4d54, #1c1d20 60%, #3a3c42);
}

/* The closing banner's two phones both come in from the left edge once the
   banner scrolls into view (the shared reveal observer adds .is-visible to
   the wrapper): the front one first, the back one following a beat behind and
   settling last. Once settled they drift gently, out of step with each other.
   Rotation and offset use the individual transform properties so the idle
   drift can own `transform`. */
.phone-front {
  rotate: -17deg;
}
.phone-back {
  rotate: 15deg;
}
.has-reveal .cta-emerge[data-reveal] {
  transform: none;
  transition: opacity 0.6s ease;
}
.has-reveal .cta-emerge .phone-front {
  translate: -135% 0;
  rotate: -28deg;
  transition:
    translate 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.has-reveal .cta-emerge .phone-back {
  translate: -150% 4%;
  rotate: 2deg;
  transition:
    translate 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
    rotate 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.has-reveal .cta-emerge.is-visible .phone-front {
  translate: 0 0;
  rotate: -17deg;
  animation: phone-drift-front 9s ease-in-out 1.4s infinite alternate;
}
.has-reveal .cta-emerge.is-visible .phone-back {
  translate: 0 0;
  rotate: 15deg;
  animation: phone-drift-back 7s ease-in-out 1.9s infinite alternate;
}
@keyframes phone-drift-front {
  to {
    transform: translateY(7px);
  }
}
@keyframes phone-drift-back {
  to {
    transform: translateY(-9px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-reveal .cta-emerge .phone-front,
  .has-reveal .cta-emerge .phone-back {
    translate: 0 0;
    transition: none;
    animation: none !important;
  }
  .has-reveal .cta-emerge .phone-front {
    rotate: -17deg;
  }
  .has-reveal .cta-emerge .phone-back {
    rotate: 15deg;
  }
}