/* ToyTrace home page. Dark site; the app UI (cream, from the app's own tokens) is the one lit object.
   Legal pages use style.css and are not affected by this file. */

:root {
  /* Site (dark) */
  --ink: #0f1211;
  --ink-2: #161a18;
  --ink-3: #1d2220;
  --line: rgba(237, 233, 224, 0.12);
  --fg: #ede9e0;
  --fg-muted: #a9a59b;
  --teal: #86c6bb;
  --focus: #e0a458;

  /* App (light) — mirrors toyapp src/theme/tokens.ts */
  --app-bg: #f4f1ea;
  --app-surface: #ffffff;
  --app-muted-bg: #ede8de;
  --app-text: #1f1d1a;
  --app-muted: #6b665e;
  --app-primary: #2f6f6a;
  --app-accent: #e0a458;
  --app-danger: #b3423a;
  --app-border: #ddd6c8;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--teal);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--fg);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
}

/* Display: large, tight, dense. Clear jump from 16px body to 64px+ headings. */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  font-synthesis: none;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3.5rem, 15vw, 6.25rem);
}

h2 {
  font-size: clamp(2.6rem, 10vw, 4.75rem);
}

h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p {
  margin: 0 0 1em;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--fg);
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  z-index: 20;
}

.skip-link:focus {
  top: 1rem;
}

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 48rem) {
  .wrap {
    padding: 0 2rem;
  }
}

.kicker {
  display: inline-block;
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.lede {
  font-size: clamp(1.08rem, 2.6vw, 1.3rem);
  color: var(--fg-muted);
  max-width: 34rem;
}

.fine {
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Device + app screen ----------
   1em inside .screen = 16 app points, so app sizes translate as px / 16. */

.device {
  --w: min(19.5rem, 80vw);
  position: relative;
  width: var(--w);
  aspect-ratio: 9 / 19.2;
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.15);
  background: #090a09;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    0 0 140px 10px rgba(244, 241, 234, 0.09);
  margin: 0;
  flex: none;
}

.screen {
  font-family: var(--font-app);
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.12);
  background: var(--app-bg);
  color: var(--app-text);
  font-size: calc(var(--w) * 0.0385);
  line-height: 1.3;
  letter-spacing: 0;
}

.screen-img {
  display: block;
  width: 100%;
  height: auto;
}

.island {
  position: absolute;
  top: 0.55em;
  left: 50%;
  width: 6.2em;
  height: 1.75em;
  margin-left: -3.1em;
  border-radius: 1em;
  background: #090a09;
  z-index: 3;
}

.statusbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.9em;
  padding: 0.5em 1.7em 0;
  font-size: 0.85em;
  font-weight: 600;
  background: var(--app-bg);
}

.statusbar i {
  display: inline-block;
  width: 1.5em;
  height: 0.7em;
  border-radius: 0.2em;
  background: var(--app-text);
}

.home-ind {
  position: absolute;
  bottom: 0.5em;
  left: 50%;
  width: 8em;
  height: 0.3em;
  margin-left: -4em;
  border-radius: 1em;
  background: var(--app-text);
  opacity: 0.8;
  z-index: 3;
}

.app-title {
  font-size: 1.625em;
  font-weight: 700;
  margin: 0.25em 0 0.45em;
  padding: 0 0.62em;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 1.375em;
  padding: 1em;
  margin: 0 0.75em 0.75em;
}

.app-card h4,
.app-card h5 {
  margin: 0 0 0.35em;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.app-card h4 {
  font-size: 1.125em;
  font-weight: 650;
}

.app-card h5 {
  font-size: 1em;
  font-weight: 650;
}

.app-card p {
  margin: 0 0 0.5em;
}

.app-small {
  font-size: 0.8125em;
  color: var(--app-muted);
}

.app-rule {
  height: 1px;
  background: var(--app-border);
  margin: 0.7em 0;
}

.id-row {
  display: flex;
  gap: 0.8em;
  align-items: flex-start;
}

.thumb {
  flex: none;
  width: 5.2em;
  height: 5.2em;
  border-radius: 0.6em;
  overflow: hidden;
  display: block;
}

.thumb svg,
.l-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.badge {
  display: inline-block;
  font-size: 0.8125em;
  font-weight: 600;
  padding: 0.2em 0.7em;
  border-radius: 1em;
  background: var(--app-muted-bg);
  margin-bottom: 0.3em;
}

.id-name {
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.15em;
}

.id-sub {
  color: var(--app-muted);
  margin: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-top: 0.75em;
}

.chip {
  font-size: 0.8125em;
  font-weight: 600;
  padding: 0.3em 0.8em;
  border-radius: 1em;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}

.chip--muted {
  background: var(--app-muted-bg);
  color: var(--app-muted);
}

.ask-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15em 0.5em;
}

.ask-row .ask-cond {
  font-size: 0.8125em;
  color: var(--app-muted);
  margin-right: auto;
}

.ask {
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ask-n {
  font-size: 0.8125em;
  color: var(--app-muted);
}

/* The band: same construction as the app's BandBar — muted track, p25–p75 highlight, median tick. */
.band {
  position: relative;
  height: 0.875em;
  margin: 0.45em 0;
  border-radius: 1em;
  background: var(--app-muted-bg);
}

.band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7%;
  width: 63%;
  border-radius: 1em;
  background: var(--app-primary);
  opacity: 0.35;
}

.band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25%;
  width: 2px;
  background: var(--app-muted);
}

.app-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--app-primary);
  font-weight: 650;
}

.app-btn {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 650;
  text-align: center;
  padding: 0.65em 0.8em;
  margin: 0.4em 0 0.2em;
  border-radius: 1.5em;
  border: 1px solid var(--app-primary);
  color: var(--app-primary);
  background: var(--app-surface);
}

.app-btn.is-on {
  background: var(--app-primary);
  color: #fff;
}

.l-list {
  list-style: none;
  margin: 0.4em 0 0;
  padding: 0;
}

.l-item {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  padding: 0.45em 0;
}

.l-thumb {
  flex: none;
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.45em;
  overflow: hidden;
}

.l-title {
  display: block;
  font-size: 0.9em;
  line-height: 1.25;
}

.l-price {
  display: block;
  font-weight: 700;
  color: var(--app-primary);
  margin-top: 0.15em;
}

.l-item--out .l-price {
  color: var(--app-muted);
  text-decoration: line-through;
}

.l-item--out .l-thumb {
  opacity: 0.55;
}

.l-reason {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 650;
  color: var(--app-danger);
  margin-top: 0.2em;
}

.l-head {
  font-size: 0.8125em;
  font-weight: 700;
  margin: 0.7em 0 0;
  color: var(--app-text);
}

.caption {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--fg-muted);
  text-align: center;
}

/* ---------- Hero ---------- */

.hero {
  padding: 1.25rem 0 3.5rem;
}

.hero .wrap {
  display: grid;
  gap: 2.25rem;
  align-items: center;
}

.hero h1 {
  /* Longer slogan than the original 4-word headline: its own scale keeps it at two lines. */
  font-size: clamp(2.15rem, 7.8vw, 4.3rem);
  max-width: 11em;
  margin-bottom: 0.45em;
}

/* The French slogan's longest line runs 1.18x the English one in Satoshi 800, so the same scale
   divided by that ratio keeps it at the same two lines and the same measure. */
html[lang="fr"] .hero h1 {
  font-size: clamp(1.8rem, 6.6vw, 3.6rem);
}

.hero-device {
  justify-self: center;
}

@media (min-width: 56rem) {
  .hero {
    padding: 3rem 0 6rem;
  }

  .hero .wrap {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
  }

  .hero-device {
    --w: 21rem;
  }
}

/* ---------- Evidence (the moment) ---------- */

.evidence {
  border-top: 1px solid var(--line);
  padding: 4.5rem 0 2rem;
}

.ev-intro {
  max-width: 44rem;
}

.ev-stage {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.ev-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.ev-steps li {
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

.ev-steps h3 {
  margin-bottom: 0.3em;
}

.ev-steps p {
  margin: 0;
  color: var(--fg-muted);
}

.ev-device {
  justify-self: center;
}

.ev-device .scroller {
  position: relative;
  will-change: transform;
}

@media (min-width: 56rem) {
  .ev-stage {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4rem;
    align-items: start;
  }
}

/* Scroll-driven version: only when JS is running and the user has not asked for reduced motion.
   Without it, the stage above shows every listing and every step at once. */

.motion .ev-track {
  height: 420vh;
  height: 420svh;
  margin-top: 1rem;
}

.motion .ev-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  margin-top: 0;
  align-content: center;
  gap: 1rem;
}

.motion .ev-device {
  --h: min(44rem, calc(100svh - var(--header-h) - 13.5rem));
  --w: calc(var(--h) * 9 / 19.2);
  height: var(--h);
}

.motion .ev-device .scroller {
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(0.8em);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.motion .ev-steps {
  position: relative;
  min-height: 7.6rem;
  display: block;
}

.motion .ev-steps li {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  border-left-color: var(--teal);
}

.motion .ev-steps li.is-active {
  opacity: 1;
  transform: none;
}

.ev-progress {
  display: none;
}

.motion .ev-progress {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
}

.ev-progress span {
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.3s ease;
}

.ev-progress span.is-done {
  background: var(--teal);
}

@media (min-width: 56rem) {
  .motion .ev-stage {
    gap: 4rem;
  }

  .motion .ev-steps {
    min-height: 10rem;
  }

  .motion .ev-device {
    --h: min(46rem, calc(100svh - var(--header-h) - 4.5rem));
  }
}

/* ---------- Compare ---------- */

.section {
  border-top: 1px solid var(--line);
  padding: 4.5rem 0;
}

.compare {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

@media (min-width: 48rem) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.cmp {
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  padding: 1.25rem;
  background: var(--ink-2);
}

.cmp-label {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.cmp--us .cmp-label {
  color: var(--teal);
}

.cmp-verdict {
  margin: 1rem 0 0;
  color: var(--fg-muted);
}

.cmp-verdict strong {
  color: var(--fg);
}

/* Generic "one number" card: deliberately flat and grey, no app styling of ours. */
.onenum {
  font-family: var(--font-app);
  border-radius: 1rem;
  background: #2a2e2c;
  padding: 1.4rem 1.25rem;
  color: #d9d6cf;
}

.onenum small {
  display: block;
  font-size: 0.85rem;
  color: #9d9a93;
  margin-bottom: 0.2rem;
}

.onenum strong {
  display: block;
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.onenum dl {
  margin: 1.2rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
}

.onenum dt {
  color: #9d9a93;
}

.onenum dd {
  margin: 0;
  color: #77746d;
}

/* Our card: the app, lit. Same em scale as .screen. */
.lit {
  --w: 22rem;
  font-family: var(--font-app);
  font-size: min(1rem, 4.1vw);
  line-height: 1.3;
  color: var(--app-text);
  background: var(--app-bg);
  border-radius: 1rem;
  padding: 0.75em 0 0.05em;
  box-shadow: 0 0 90px rgba(244, 241, 234, 0.1);
}

.lit dl {
  margin: 0.6em 0 0.2em;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25em 0.8em;
  font-size: 0.8125em;
}

.lit dt {
  color: var(--app-muted);
}

.lit dd {
  margin: 0;
  font-weight: 600;
}

/* ---------- Why "asked" ---------- */

.why {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .why {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

.why p {
  color: var(--fg-muted);
}

.why p strong {
  color: var(--fg);
}

.pledge {
  margin-top: 1.5rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--app-accent);
  background: var(--ink-2);
  border-radius: 0 0.8rem 0.8rem 0;
  color: var(--fg);
}

.pledge p {
  margin: 0;
  color: var(--fg);
}

.skew {
  margin: 0;
}

.skew svg {
  display: block;
  width: 100%;
  height: auto;
}

.skew figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--fg-muted);
}

/* ---------- Categories ---------- */

.cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 1.5rem;
}

@media (min-width: 56rem) {
  .cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}

.cats li {
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--ink-2);
  padding: 1rem;
}

.cats svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.75rem;
}

.cats h3 {
  font-size: 1.1rem;
  margin: 0 0 0.2rem;
}

.cats p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--fg-muted);
  line-height: 1.45;
}

.not-here {
  color: var(--fg-muted);
  max-width: 44rem;
}

/* ---------- The app: real screenshots ----------
   Same .device frame as the drawn screens, but the screen wraps a real image, so the frame
   takes its height from the screenshot instead of the fixed 9/19.2 ratio. On small screens
   the three phones scroll horizontally; from 56rem they sit in one row. */

.shots {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0 1rem;
  margin: 2.5rem 0 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.shots li {
  flex: none;
  scroll-snap-align: center;
}

.shots .shot {
  margin: 0;
}

.shots .device {
  --w: min(16.5rem, 72vw);
  aspect-ratio: auto;
  margin-inline: auto;
}

.shots .screen {
  height: auto;
}

.shots .caption {
  max-width: var(--w);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .shots {
    overflow: visible;
    justify-content: center;
    gap: 2rem;
  }
}

/* ---------- Closing ---------- */

.closing {
  border-top: 1px solid var(--line);
  padding: 5rem 0 3rem;
}

.closing h2 {
  max-width: 16ch;
}

.facts {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

@media (min-width: 48rem) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.facts li {
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.facts strong {
  display: block;
  color: var(--fg);
}

.facts span {
  color: var(--fg-muted);
  font-size: 0.95rem;
}

.contact {
  font-size: 1.15rem;
}

.contact a {
  font-weight: 650;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.site-footer a {
  color: var(--fg);
}

.site-footer p {
  max-width: 48rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
}

.hero-device-wrap,
.ev-device-wrap {
  margin: 0;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chip--on {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #fff;
}

.cmp + .cmp ~ .fine,
.compare + .fine {
  margin-top: 1rem;
}

/* Desktop: all four steps visible as a list, the active one lit. */
@media (min-width: 56rem) {
  .motion .ev-progress {
    display: none;
  }

  .motion .ev-copy {
    align-self: center;
  }

  .motion .ev-steps {
    display: grid;
    gap: 2rem;
    min-height: 0;
  }

  .motion .ev-steps li {
    position: static;
    opacity: 0.32;
    transform: none;
    border-left-color: var(--line);
  }

  .motion .ev-steps li.is-active {
    opacity: 1;
    border-left-color: var(--teal);
  }

  .ev-steps h3 {
    font-size: 1.5rem;
  }

  .ev-steps p {
    font-size: 1.1rem;
    max-width: 30rem;
  }
}

/* ---------- How it works ---------- */

.how {
  padding: 0 0 4rem;
}

.how-steps {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

@media (min-width: 48rem) {
  .how-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

.how-steps li {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.how-n {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--teal);
  margin-bottom: 0.5rem;
  font-synthesis: none;
}

.how-steps h3 {
  margin-bottom: 0.3em;
}

.how-steps p {
  margin: 0;
  color: var(--fg-muted);
}

/* =====================================================================
   Polish layer: depth, light, material, motion, type rhythm.
   Kept deliberately quiet: one material, one light colour, short moves.
   ===================================================================== */

/* ---------- Type rhythm: 16px body → 8rem hero ---------- */

h1 {
  font-size: clamp(4rem, 18vw, 8rem);
  line-height: 0.9;
}

h2 {
  font-size: clamp(2.4rem, 9vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.lede {
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.55;
}

.hero h1 {
  max-width: none;
  margin-bottom: 0.4em;
  color: var(--fg);
}

/* A little brightness on the hero headline only: near-white at the top, cream at the base. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background: linear-gradient(180deg, #fffdf8 0%, #f1ece2 55%, #cfc8ba 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (min-width: 56rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  }
}

.kicker {
  text-shadow: 0 0 18px rgba(134, 198, 187, 0.28);
}

/* ---------- Depth ---------- */

.hero,
.section,
.evidence,
.closing {
  position: relative;
  isolation: isolate;
}

/* Faint light behind the hero phone and a cool wash top-left. Low opacity on purpose. */
.hero::before {
  content: "";
  position: absolute;
  inset: calc(var(--header-h) * -1) 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 55% at 74% 45%, rgba(244, 241, 234, 0.075), transparent 70%),
    radial-gradient(45% 40% at 12% 0%, rgba(134, 198, 187, 0.07), transparent 70%);
}

/* Each section starts a shade lighter than it ends: layers, not stripes. */
.section,
.evidence,
.closing {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, transparent 38%);
}

/* One material for raised things on dark: glass + hairline + soft lift. */
.cmp,
.cats li,
.pledge {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
    var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-hi), var(--lift);
}

.cmp {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.pledge {
  border-left: 3px solid var(--app-accent);
}

.onenum {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lit {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 60px -30px rgba(0, 0, 0, 0.8),
    0 0 90px rgba(244, 241, 234, 0.1);
}

.how-steps li,
.facts li {
  border-top-color: var(--glass-line);
}

/* ---------- Light ---------- */

.band::before {
  opacity: 0.5;
  box-shadow: 0 0 0.7em 0.05em rgba(47, 111, 106, 0.45);
}

.ask {
  text-shadow: 0 0 0.7em rgba(47, 111, 106, 0.22);
}

.how-n {
  text-shadow: 0 0 26px rgba(134, 198, 187, 0.35);
}

.onenum strong {
  text-shadow: none;
}

/* A soft band of light passes left to right across each listing as it appears. */
.l-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5em;
}

.l-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent 25%,
    rgba(47, 111, 106, 0.1) 44%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(47, 111, 106, 0.1) 56%,
    transparent 75%
  );
  transform: translateX(-100%);
}

.motion .l-item.is-in::after {
  animation: sweep 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

@keyframes sweep {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ---------- Material: the device ---------- */

.device {
  background: linear-gradient(145deg, #3b3e3d 0%, #151716 16%, #0a0b0a 48%, #121413 84%, #2d302f 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.13),
    inset 0 0 0 calc(var(--w) * 0.012) #0b0c0b,
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 50px 100px -30px rgba(0, 0, 0, 0.9),
    0 0 140px 10px rgba(244, 241, 234, 0.08);
}

/* Volume buttons on the left edge. */
.device::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 20%;
  width: 3px;
  height: 7%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, #3a3d3c, #1a1c1b);
  box-shadow: 0 calc(var(--w) * 0.19) 0 #242726;
}

/* Glass: a faint diagonal reflection over the whole face. */
.device::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 26%, transparent 38%);
}

/* Screen sits slightly into the frame. */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 14px rgba(0, 0, 0, 0.12);
}

/* ---------- Motion ---------- */

/* Hero: CSS-only load-in, so there is no flash before scripts run. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1,
  .hero .lede,
  .hero .stores,
  .hero-device-wrap {
    animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero .lede {
    animation-delay: 0.08s;
  }

  .hero .stores {
    animation-delay: 0.14s;
  }

  .hero-device-wrap {
    animation-duration: 0.8s;
    animation-delay: 0.12s;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Section entrances: added by home.js only when motion is allowed. Without it, all visible. */
.enter-ready [data-enter] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

.enter-ready [data-enter].is-visible {
  opacity: 1;
  transform: none;
}

/* Evidence: softer, overlapping transitions between steps. */
.motion .ev-device .scroller {
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion [data-reveal] {
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.motion .ev-steps li {
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.55s ease;
}

@media (max-width: 55.99rem) {
  .motion .ev-steps li {
    transform: translateY(0.6rem);
  }

  .motion .ev-steps li.is-active {
    transform: none;
  }
}

/* Progress bars fill continuously with scroll instead of jumping per step. */
.ev-progress span {
  position: relative;
  overflow: hidden;
}

.ev-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(134, 198, 187, 0.6);
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
}

.app-btn {
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

[data-d="1"] {
  --d: 70ms;
}

[data-d="2"] {
  --d: 140ms;
}

/* ---------- Store badges ----------
   Official artwork, unmodified. Apple: black badge, first in the row, min 40px, clear space
   1/4 of the height. Google Play: same height or larger than the App Store badge, min 28px.
   Both 48px here (44px on small screens); gaps are well over the 12px clear space. */

.stores {
  margin-top: 0.5rem;
}

.store-badges {
  --badge-h: 54px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.store-badges li {
  margin: 0;
}

.store-badge {
  display: block;
  line-height: 0;
  border-radius: 8px;
}

.store-badge img {
  display: block;
  height: var(--badge-h);
  width: auto;
}

/* Google's badge-generator PNGs ship their clear space inside the 646x250 file, and the amount
   differs by language: English is a 168px-tall badge with 41px of padding on every side, French
   a 192px-tall badge with 29px above and below and none at the sides. Scale each so the visible
   badge matches the Apple badge height, and pull the baked-in padding back out of the layout. */
.store-badge img.badge-padded {
  --vis-h: 168;
  --pad-y: 41;
  --pad-x: 41;
  height: calc(var(--badge-h) * 250 / var(--vis-h));
  margin: calc(var(--badge-h) * var(--pad-y) / var(--vis-h) * -1)
    calc(var(--badge-h) * var(--pad-x) / var(--vis-h) * -1);
}

.store-badge img.badge-padded.badge-fr {
  --vis-h: 192;
  --pad-y: 29;
  --pad-x: 0;
}

/* No link yet: full strength, just not clickable. */
.store-badge:not([href]) {
  cursor: default;
}

.store-note {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

@media (max-width: 30rem) {
  .store-badges {
    --badge-h: 48px;
  }
}

.closing .stores {
  margin: 2rem 0 0.5rem;
}