/* ── Tokens ────────────────────────────────────────────────────────────
   Pulled from the app's own AppTheme.swift so the site and the product read
   as one thing: Focus Blue #0071E3 / #0A84FF, soft #4DA3F0 / #5AC8FA.
   White is the ground — roughly two thirds of any viewport — and the blue
   only ever arrives as glass, accent or a single saturated CTA. */
:root {
  --blue: #0071E3;
  --blue-2: #2C7CF5;
  --blue-deep: #0057D8;
  --blue-soft: #4DA3F0;
  --violet: #5B21B6;

  --ink: #0B0B0F;
  --ink-2: #52586A;
  /* Darkened from #858B9C — that failed 4.5:1 on white and this token is used
     for real body-size text (footer, capture notes, "Solves:" lines). */
  --ink-3: #6B7180;

  --ok: #1a7f4b;
  --err: #c0353a;

  --bg: #FFFFFF;
  --bg-tint: #F7F9FE;
  /* Raised from .09 alpha — standalone dividers (FAQ rows, footer, feature
     "Solves" rule) were near-invisible on white at that weight. */
  --line: rgba(11, 24, 56, 0.14);

  /* Glass. Three parts: a translucent fill, a light top edge that fakes the
     refraction, and a soft shadow so the pane sits above the page. */
  --glass: color-mix(in srgb, var(--bg) 80%, transparent);
  --glass-strong: color-mix(in srgb, var(--bg) 86%, transparent);
  --glass-line: rgba(255, 255, 255, 0.85);
  --glass-edge: rgba(11, 40, 90, 0.08);
  --glass-shadow: 0 1px 2px rgba(11, 40, 90, .04), 0 12px 34px rgba(11, 40, 90, .07);
  --glass-blur: blur(22px) saturate(180%);

  --radius: 22px;
  --radius-sm: 14px;
  --maxw: 1160px;
  --gutter: clamp(18px, 4vw, 28px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          system-ui, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue: #0A84FF;
    --blue-2: #4DA3F0;
    --blue-deep: #0A84FF;
    --blue-soft: #5AC8FA;
    --violet: #7C3AED;

    --ink: #F4F7FB;
    --ink-2: #AEB6C6;
    --ink-3: #868D9D;

    --ok: #5cd79d;
    --err: #ff8085;

    --bg: #070B14;
    --bg-tint: #0C121F;
    --line: rgba(244, 247, 251, 0.14);

    /* --glass / --glass-strong are derived from --bg above and need no
       dark override; only the edge highlights change. */
    --glass-line: rgba(255, 255, 255, 0.14);
    --glass-edge: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain. A single tiled fractal-noise tile over the whole page at ~4%
   — enough to break the flat-white / flat-blur look and give the glass a
   surface, not enough to read as dirt. Fixed so it doesn't swim on scroll,
   pointer-transparent, and sits above content the way real grain does.
   Suppressed for reduced-transparency / more-contrast (below). */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .042; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
@media (prefers-color-scheme: dark) {
  body::before { mix-blend-mode: screen; opacity: .05; }
}

/* ── Transparency & contrast preferences ─────────────────────────────
   "Reduced motion" is not the only accessibility signal. A visitor who
   asked for less transparency or more contrast gets solid surfaces and a
   real border instead of frosted glass — the glass tokens are redefined
   once here and every .glass / pill / input / chip inherits it. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--bg); --glass-strong: var(--bg); }
  .aurora, body::before { display: none; }
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  header.site { background: var(--bg); }
  section.tint { background: var(--bg-tint); }
}

@media (prefers-contrast: more) {
  :root {
    --glass: var(--bg); --glass-strong: var(--bg);
    --glass-edge: var(--ink-3); --line: var(--ink-3);
  }
  .aurora, body::before { display: none; }
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  header.site { background: var(--bg); }
  section.tint { background: var(--bg-tint); }
  /* Gradient-clipped text drops to a solid, high-contrast colour. */
  .hero h1 .accent { -webkit-text-fill-color: var(--blue-deep); color: var(--blue-deep); }
}

/* ── Aurora ───────────────────────────────────────────────────────────
   Three low-opacity blooms fixed behind the whole page. They exist for two
   reasons: they keep the white from reading as empty, and they give the
   glass panes something to actually refract — backdrop-filter over flat
   white is invisible. Kept faint on purpose; the page still measures out
   at roughly 60% plain white. */
.aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5;
}
.aurora .a1 { width: 46vw; height: 46vw; top: -12vw; right: -6vw;  background: radial-gradient(closest-side, rgba(0,113,227,.34), transparent); }
.aurora .a2 { width: 40vw; height: 40vw; top: 44vh;  left: -14vw;  background: radial-gradient(closest-side, rgba(90,200,250,.30), transparent); }
.aurora .a3 { width: 34vw; height: 34vw; bottom: -10vw; right: 8vw; background: radial-gradient(closest-side, rgba(91,33,182,.16), transparent); }
@media (prefers-color-scheme: dark) { .aurora span { opacity: .42; } }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

a { color: var(--blue); }
img { max-width: 100%; height: auto; display: block; }

/* Tracking + leading are size-specific, not one value for every heading:
   large display type reads too loose and too airy, so it wants tighter
   leading and more negative tracking as it grows. */
h1, h2, h3 { margin: 0 0 .5em; }
h1 { font-size: clamp(1.95rem, 5.6vw, 3.55rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.024em; }
h3 { font-size: clamp(1.02rem, 2vw, 1.16rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.016em; }
p  { margin: 0 0 1em; color: var(--ink-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 16px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
}

/* The one reusable glass surface. Everything raised on this page uses it. */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform .24s cubic-bezier(.2, .7, .3, 1),
              box-shadow .24s ease, border-color .24s ease;
}

/* Hover is a hint, not a performance: 3px of lift and a blue edge. Gated on
   a real pointer so a tap on iOS does not leave a card stuck in :hover. */
@media (hover: hover) and (pointer: fine) {
  .step:hover, .feature:hover, .shot:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--blue) 30%, var(--glass-edge));
    box-shadow: 0 2px 6px rgba(11, 40, 90, .05), 0 18px 44px rgba(11, 40, 90, .11);
  }
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--blue); color: #fff;
  padding: 12px 18px; border-radius: 0 0 10px 0; z-index: 100; font-weight: 700;
}
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px;
}

/* ── Header ───────────────────────────────────────────────────────────
   Translucent chrome the content scrolls under. No hard 1px divider — a
   short gradient scroll-edge where the page meets the bar reads as a real
   floating layer, and the bright inset top edge is light catching the
   material (same trick as every .glass surface). */
header.site {
  position: sticky; top: 0; z-index: 50;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-line);
}
header.site::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 20px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent), transparent);
}
header.site .wrap { display: flex; align-items: center; gap: 16px; height: 66px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.02rem; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
}
.brand img { width: 30px; height: 30px; flex: none; }
header.site nav { margin-left: auto; display: flex; gap: 8px; align-items: center; }
header.site nav a {
  color: var(--ink-2); text-decoration: none; font-size: .92rem; font-weight: 600;
  padding: 8px 12px; border-radius: 999px; transition: color .18s ease, background .18s ease;
}
header.site nav .btn-sm {
  color: #fff; background: var(--blue); padding: 9px 18px; font-weight: 700;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 34%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  header.site nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--blue) 8%, transparent); }
  header.site nav .btn-sm:hover { color: #fff; background: var(--blue-deep); }
}
@media (max-width: 900px) { header.site nav a.hide-md { display: none; } }
@media (max-width: 760px) { header.site nav a.hide-sm { display: none; } }
@media (max-width: 380px) {
  header.site .wrap { height: 60px; }
  header.site nav a.hide-xs { display: none; }
  header.site nav .btn-sm { padding: 9px 14px; font-size: .88rem; }
  .brand { font-size: .96rem; }
  .brand img { width: 26px; height: 26px; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px clamp(20px, 4vw, 28px); border-radius: 999px; font-weight: 700;
  font-size: clamp(.92rem, 2.4vw, 1rem);
  text-decoration: none; border: 1px solid transparent; min-height: 50px;
  transition: transform .18s ease, scale .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Press-in is near-instant (~100ms), release settles at the slower base
   duration — feedback lands on pointer-down, not after it. */
.btn:active { scale: .96; transition-duration: .1s; }
.btn-primary {
  background: linear-gradient(140deg, var(--blue-2), var(--blue-deep));
  color: #fff; box-shadow: 0 10px 28px color-mix(in srgb, var(--blue) 34%, transparent);
}
.btn-ghost {
  color: var(--ink); background: var(--glass-strong); border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--blue) 42%, transparent); }
  .btn-ghost:hover { transform: translateY(-2px); }
}
.btn .apple { flex: none; margin-top: -2px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding: clamp(44px, 7vw, 88px) 0 clamp(44px, 6vw, 76px); }
.hero .wrap {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(28px, 5vw, 56px); align-items: center;
}

/* ── Reveal choreography ─────────────────────────────────────────────
   Two triggers, one look: a long expo ease-out (last 20% glides), a lift
   with a touch of scale and blur so things *arrive* rather than fade.

   HERO — @starting-style. The resting state is fully visible; this styles
   only the first rendered frame, so the hero can never end up blank. Runs
   on every fresh load, no JS.

   BELOW THE FOLD — [data-reveal] tagged by the script in index.html and
   flipped to .in as it scrolls into view. Hidden state is gated on
   html.reveal-ready, which an inline <head> script sets *only* when motion
   is wanted and IntersectionObserver exists — so JS-off, old browsers,
   reduced-motion and any thrown error all fall back to plain visible. A
   2.5s watchdog in the script is the last line of defence. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lede, .hero .capture,
  .hero .hero-quiz-link, .hero .trust, .hero .stage {
    transition:
      opacity .9s cubic-bezier(.16, 1, .3, 1) var(--rise-d, 0s),
      transform .9s cubic-bezier(.16, 1, .3, 1) var(--rise-d, 0s),
      filter .9s cubic-bezier(.16, 1, .3, 1) var(--rise-d, 0s);
  }
  @starting-style {
    .hero .eyebrow, .hero h1, .hero .lede, .hero .capture,
    .hero .hero-quiz-link, .hero .trust, .hero .stage {
      opacity: 0; transform: translateY(34px) scale(.955); filter: blur(10px);
    }
  }
  .hero .eyebrow        { --rise-d: .05s; }
  .hero h1              { --rise-d: .14s; }
  .hero .lede           { --rise-d: .26s; }
  .hero .stage          { --rise-d: .32s; }
  .hero .capture        { --rise-d: .40s; }
  .hero .hero-quiz-link { --rise-d: .52s; }
  .hero .trust          { --rise-d: .60s; }

  html.reveal-ready [data-reveal] {
    transition:
      opacity .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-d, 0s),
      transform .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-d, 0s),
      filter .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-d, 0s);
  }
  html.reveal-ready [data-reveal]:not(.in) {
    opacity: 0;
    transform: translateY(32px) scale(.985);
    filter: blur(8px);
  }
}
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; justify-items: start; }
  .hero .stage { justify-self: center; }
}
/* Landscape phones: the hero is otherwise taller than the whole viewport. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding: 28px 0 32px; }
  .hero .wrap { grid-template-columns: 1.1fr .9fr; align-items: center; }
  .phone { --w: min(200px, 34vw); }
}

.hero h1 .accent {
  background: linear-gradient(120deg, var(--blue-2), var(--blue-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 { max-width: 20ch; text-wrap: balance; }
/* Keyword line kept inside the <h1> for topical weight, but set as a quiet
   kicker so the emotional line stays the visible headline. */
.hero h1 .h1-kw {
  display: block; max-width: 34ch; margin-top: .62em;
  font-size: clamp(.98rem, 1.5vw, 1.1rem); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.4; color: var(--ink-2);
  text-wrap: pretty;
}
.hero p.lede { font-size: clamp(1.04rem, 1.8vw, 1.18rem); max-width: 33em; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
@media (max-width: 420px) {
  .hero .cta-row { display: grid; }
  .hero .cta-row .btn { width: 100%; }
}

/* The one text link out of the hero — to the /quiz funnel. Sits between the
   buttons and the trust row as a quieter, lower-commitment third option. */
.hero-quiz-link { margin: 16px 0 0; font-size: .92rem; }
.hero-quiz-link a {
  color: var(--blue); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 34%, transparent);
  transition: border-color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-quiz-link a:hover { border-bottom-color: var(--blue); }
}
.hero-quiz-link .sep { color: var(--ink-3); margin: 0 10px; }

.trust {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0;
  list-style: none; font-size: .86rem; color: var(--ink-2);
}
.trust li {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
}
.trust li::before { content: "✓"; color: var(--blue); font-weight: 900; font-size: .82rem; }

/* Device. The frame is drawn in CSS so nothing above the fold waits on an
   image except the screenshot itself. */
.stage {
  position: relative; display: grid; place-items: center;
  width: 100%; max-width: 420px; margin-inline: auto; padding: 18px 0;
}
.stage .plate {
  position: absolute; inset: 8% 6% 12%; border-radius: 34px; z-index: 0;
  background: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.phone {
  --w: min(286px, 74vw);
  position: relative; z-index: 1;
  width: var(--w); aspect-ratio: 900 / 1955;
  border-radius: calc(var(--w) * 0.14); padding: calc(var(--w) * 0.028);
  background: linear-gradient(150deg, #3a4354, #0d1119);
  box-shadow: 0 30px 60px rgba(11, 30, 70, .22), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.phone > .screen {
  width: 100%; height: 100%; border-radius: calc(var(--w) * 0.113); overflow: hidden;
  background: linear-gradient(160deg, var(--blue-soft), #eaf4ff);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }

/* Two glass chips floating off the device — the only ornament on the page,
   and both of them state a real fact about the product. */
.chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 16px; font-size: .84rem; font-weight: 700;
  color: var(--ink); white-space: nowrap;
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.chip b { display: block; font-size: 1.02rem; line-height: 1.2; }
.chip small { display: block; font-weight: 600; color: var(--ink-3); font-size: .74rem; letter-spacing: .02em; }
.chip .dot {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue);
}
.chip .dot .i { width: 16px; height: 16px; }

/* Lucide icons: one 24×24 sprite, recoloured per surface via currentColor. */
.i {
  display: block; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.chip-a { top: 14%; left: -2%; }
/* Sits above the Start Focus button rather than across it — capping the
   stage width pulled the chips closer to the device than they were. */
.chip-b { bottom: 24%; right: -6%; }

/* Three more facts. Focus Shield sits alone on the right, above chip-b.
   Calendar sync and Your patterns stack under "27 days" on the left — all
   three now use the full two-line "27 days" card treatment. */
/* Fixed px, not %: above the 680px breakpoint the phone locks to a constant
   286px width (min(286px, 74vw)), so the stage's pixel height is the same at
   every screen size these chips ever show at — px stays exact instead of
   drifting the way a % of a screen-dependent height would.
   140px above Focus Shield (from the stage top), nudged 20px further right
   so its left edge clears the phone · 345px = Calendar sync · Your patterns
   trails Calendar sync's bottom edge by ~43px (both are now the taller
   two-line card). */
.chip-c { top: 140px; right: calc(-4% - 20px); z-index: 3; }
.chip-d, .chip-e { left: -9%; z-index: 3; }
.chip-d { top: 345px; }
.chip-e { top: 451px; }

/* Below this the device is nearly full-bleed, so the chips stop being an
   overlay and start covering the screen underneath them. Drop them. */
@media (max-width: 680px) {
  .chip { display: none; }
  .stage .plate { inset: 4% 0 6%; }
}

/* ── Sections ───────────────────────────────────────────────────────── */
section { padding: clamp(52px, 6.5vw, 88px) 0; position: relative; }
section.tint { background: color-mix(in srgb, var(--bg-tint) 72%, transparent); }
.section-head { max-width: 40em; margin-bottom: clamp(26px, 3.5vw, 44px); }
.section-head p:last-child { margin-bottom: 0; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 20px); }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 28px 26px; }
.step .num {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--blue-2), var(--blue-deep));
  color: #fff; font-weight: 800; margin-bottom: 16px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 30%, transparent);
}
.step p:last-child { margin-bottom: 0; }

/* ── Screens gallery ──────────────────────────────────────────────────
   Each capture sits in the same drawn bezel as the hero device, so the two
   sections read as one system rather than two different treatments. */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px); align-items: stretch;
}
@media (max-width: 900px) {
  .gallery {
    grid-auto-flow: column; grid-auto-columns: min(300px, 76vw); grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px var(--gutter) 16px;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery > * { scroll-snap-align: center; }
}

.shot {
  display: flex; flex-direction: column; margin: 0;
  padding: clamp(14px, 1.6vw, 18px);
}
.shot-device {
  --w: 100%;
  padding: 7px; border-radius: 26px;
  background: linear-gradient(150deg, #3a4354, #0d1119);
  box-shadow: 0 14px 30px rgba(11, 30, 70, .18), 0 0 0 1px rgba(255,255,255,.10) inset;
  transition: transform .24s cubic-bezier(.2, .7, .3, 1);
}
.shot img {
  /* The three captures are different heights; a fixed ratio cropped from the
     top keeps the row aligned without re-exporting them to match. */
  display: block; width: 100%; aspect-ratio: 33 / 62;
  object-fit: cover; object-position: top;
  border-radius: 20px; background: var(--bg-tint);
}
.shot figcaption { padding: 18px 6px 4px; }
.shot h3 { margin: 0 0 6px; }
.shot p { margin: 0; font-size: .92rem; }

/* ── Features ───────────────────────────────────────────────────────── */
.features {
  display: grid; gap: clamp(14px, 1.8vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(266px, 100%), 1fr));
}
.feature { padding: 26px 24px; }
.feature .ico {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  margin-bottom: 15px; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 11%, transparent);
  border: 1px solid var(--glass-edge);
}
.feature .ico .i { width: 22px; height: 22px; }
.feature h3 a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .feature h3 a:hover { color: var(--blue); }
}
.feature p:last-of-type { margin-bottom: 0; font-size: .95rem; }
.feature .solves {
  display: block; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .87rem; color: var(--ink-3);
}
.feature .solves b { color: var(--blue); font-weight: 700; }

/* ── FAQ ──────────────────────────────────────────────────────────────
   Ten rows in one glass panel rather than ten separate panes: same material
   as every other card, a tenth of the blur work. */
.faq {
  max-width: 840px; margin-inline: auto;
  padding: clamp(6px, 1.4vw, 18px) clamp(14px, 2.4vw, 30px);
}
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 4px; position: relative;
  font-weight: 700; font-size: clamp(.98rem, 1.8vw, 1.08rem); color: var(--ink);
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--blue); } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 26px; height: 26px;
  transform: translateY(-50%); border-radius: 9px;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 11px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 11px no-repeat,
    color-mix(in srgb, var(--blue) 11%, transparent);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq .answer { padding: 0 44px 22px 4px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* The open/close animation. <details> only became animatable once
   ::details-content and interpolate-size shipped; where they have not, the
   panel still opens, just instantly. Nothing here is load-bearing. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size .34s cubic-bezier(.2, .7, .3, 1),
    opacity .26s ease,
    content-visibility .34s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq .answer { transform: translateY(-6px); transition: transform .34s cubic-bezier(.2, .7, .3, 1); }
.faq details[open] .answer { transform: none; }

/* ── Final CTA ──────────────────────────────────────────────────────
   A contained card rather than a full-bleed band, so the one saturated
   surface on the page still sits on white. */
.final-card {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 30px; padding: clamp(40px, 6vw, 66px) 26px;
  background: linear-gradient(140deg, var(--blue-2), var(--blue-deep) 62%, var(--violet));
  color: #fff; box-shadow: 0 24px 60px color-mix(in srgb, var(--blue) 30%, transparent);
}
.final-card::after {
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 90%;
  background: radial-gradient(closest-side, rgba(255,255,255,.30), transparent);
  pointer-events: none;
}
.final-card > * { position: relative; z-index: 1; }
.final-card h2 { color: #fff; }
.final-card p { color: rgba(255,255,255,.9); max-width: 32em; margin-inline: auto; }
.final-card .btn-primary {
  background: #fff; color: var(--blue-deep); box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
@media (hover: hover) and (pointer: fine) {
  .final-card .btn-primary:hover { background: #fff; }
}
.final-card .cta-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 480px) {
  .final-card { border-radius: 24px; }
  .final-card .btn { width: 100%; }
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer.site { padding: 40px 0 48px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-3); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
footer.site .brand { font-size: .95rem; }
footer.site .brand img { width: 24px; height: 24px; }
footer.site a { color: var(--ink-3); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  footer.site a:hover { color: var(--blue); }
}
footer.site .btn-footer {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px; min-height: 44px;
  font-weight: 700; font-size: .88rem; color: var(--ink);
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
footer.site .btn-footer .apple { flex: none; margin-top: -1px; }
@media (hover: hover) and (pointer: fine) {
  footer.site .btn-footer:hover {
    color: var(--blue); transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--blue) 34%, var(--glass-edge));
  }
}
footer.site .spacer { margin-left: auto; }
@media (max-width: 640px) {
  footer.site .wrap { gap: 10px 18px; }
  footer.site .spacer { display: none; }
  footer.site .brand { flex-basis: 100%; }
}


/* ══ Subpages: support, privacy, terms ══════════════════════════════════
   Same shell as the home page, a narrower measure, and a table of contents
   that only exists once there is room for it beside the text. */
.page-head { padding: clamp(38px, 6vw, 64px) 0 clamp(18px, 3vw, 30px); }
.page-head h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); max-width: 18ch; }
.page-head p { font-size: clamp(1rem, 1.7vw, 1.1rem); max-width: 40em; margin-bottom: 0; }
.page-head .meta {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 20px;
  font-size: .84rem; color: var(--ink-3);
}
.page-head .meta span {
  padding: 7px 13px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
}

.doc { padding-top: 0; padding-bottom: clamp(52px, 7vw, 92px); }
.doc .wrap { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
@media (max-width: 940px) { .doc .wrap { grid-template-columns: 1fr; } }

.toc { position: sticky; top: 86px; padding: 20px 18px; font-size: .9rem; }
/* Off the sidebar it becomes a preamble the reader has to scroll past, so it
   goes two-up and tightens as soon as there is width for it. */
@media (max-width: 940px) {
  .toc { position: static; top: auto; padding: 16px 16px 10px; }
  .toc a { padding: 6px 8px; }
}
@media (max-width: 940px) and (min-width: 520px) {
  .toc ol { columns: 2; column-gap: 14px; }
  .toc li { break-inside: avoid; }
}
.toc h2 {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: block; padding: 7px 10px; border-radius: 10px;
  color: var(--ink-2); text-decoration: none; line-height: 1.4;
  transition: background .18s ease, color .18s ease;
}
.toc a::before { content: counter(toc) ". "; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .toc a:hover { background: color-mix(in srgb, var(--blue) 9%, transparent); color: var(--blue); }
}

.prose { padding: clamp(24px, 3.4vw, 42px) clamp(20px, 3.4vw, 44px); }
.prose > section { scroll-margin-top: 86px; }
.prose > section + section { margin-top: clamp(30px, 4vw, 46px); padding-top: clamp(28px, 4vw, 42px); border-top: 1px solid var(--line); }
.prose h2 { font-size: clamp(1.24rem, 2.4vw, 1.55rem); margin-bottom: .55em; }
.prose h3 { margin: 1.6em 0 .5em; }
.prose p { max-width: 62ch; }
.prose ul, .prose ol { max-width: 62ch; margin: 0 0 1em; padding-left: 1.25em; color: var(--ink-2); }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--blue); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { font-weight: 600; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88em; padding: 2px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue);
}

/* Comparison tables inside guide articles. */
.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.2em;
  font-size: .92rem; display: block; overflow-x: auto;
}
.prose thead th {
  text-align: left; font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--line); padding: 10px 14px 10px 0; white-space: nowrap;
}
.prose tbody td {
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line);
  color: var(--ink-2); vertical-align: top;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { color: var(--ink); font-weight: 600; }

/* A pulled-out statement of what actually matters in the section above it. */
.callout {
  margin: 20px 0 0; padding: 18px 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-edge); border-left: 3px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}
.callout p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.callout p + p { margin-top: .6em; }

/* The short "what leaves your phone" table at the top of the policy. */
.facts { display: grid; gap: 12px; margin: 20px 0 0; }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.fact { padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid var(--glass-edge); background: var(--glass); }
.fact b { display: block; font-size: .95rem; margin-bottom: 3px; }
.fact span { font-size: .89rem; color: var(--ink-3); }

/* Support: the answer cards and the contact block. */
.help { display: grid; gap: clamp(14px, 1.8vw, 18px); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.help article { padding: 24px 22px; }
.help h3 { margin-bottom: .45em; }
.help p:last-child { margin-bottom: 0; font-size: .94rem; }
.help .where {
  display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 600;
  color: var(--blue); padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}

.contact { padding: clamp(26px, 3.6vw, 40px); text-align: center; }
.contact h2 { margin-bottom: .4em; }
.contact p { margin-inline: auto; max-width: 46ch; }
.contact .cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
@media (max-width: 460px) { .contact .btn { width: 100%; } }


/* ══ Email capture ═════════════════════════════════════════════════════
   The site has no App Store link anywhere; the download arrives by email, so
   this form is the entire conversion path. It reuses the glass input surface
   and the existing .btn so it reads as part of the page rather than as a
   bolted-on signup widget. */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Honeypot. Off-screen and tab-skipped, so a person never reaches it; a bot
   filling in every field gives itself away. Not display:none — some bots skip
   hidden fields, which would defeat the point. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.capture { margin: 28px 0 0; max-width: 32em; }
.capture-row { display: flex; gap: 10px; flex-wrap: wrap; }
.capture-input {
  flex: 1 1 14em; min-width: 0; min-height: 50px;
  padding: 14px 20px; border-radius: 999px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.capture-input::placeholder { color: var(--ink-3); }
.capture-input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: inset 0 1px 0 var(--glass-line),
              0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
.capture-row .btn { flex: 0 0 auto; }
@media (max-width: 460px) { .capture-row .btn { width: 100%; } }

.capture-note { margin: 12px 0 0; font-size: .82rem; color: var(--ink-3); }
.capture-msg { margin: 10px 0 0; font-size: .92rem; font-weight: 600; }
.capture-msg:empty { margin: 0; }
.capture-msg.ok { color: var(--ok); }
.capture-msg.err { color: var(--err); }

/* In flight: the row stops accepting input without the layout shifting. */
.capture[data-busy="1"] .capture-input,
.capture[data-busy="1"] .btn { opacity: .55; pointer-events: none; }

/* Done: the row is replaced by the confirmation, so there is nothing left to
   submit twice. */
.capture[data-done="1"] .capture-row,
.capture[data-done="1"] .capture-note { display: none; }

/* The TestFlight reveal. Shown once the signup succeeds — the link is the
   real delivery mechanism, the email is the backup, so this has to read as
   the primary outcome rather than as a receipt. */
.tf {
  margin-top: 18px; padding: 18px 20px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--glass-edge));
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  opacity: 1; transform: none;
  transition: opacity .32s cubic-bezier(.2, .7, .3, 1),
              transform .32s cubic-bezier(.2, .7, .3, 1);
}
.tf[hidden] { display: none; }
/* Reveal on success. Transition + @starting-style instead of a keyframe, so a
   re-fire interrupts cleanly rather than restarting the animation. */
@starting-style {
  .tf:not([hidden]) { opacity: 0; transform: translateY(8px); }
}
.tf-btn { flex: 0 0 auto; }

.tf-qr { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The QR is drawn with `currentColor`, so it inverts with the theme instead
   of staying black on a dark background where it would not scan. */
.tf-qr img {
  width: 76px; height: 76px; flex: none; border-radius: 8px;
  padding: 6px; background: #fff; color: #000;
}
.tf-qr p { margin: 0; font-size: .82rem; color: var(--ink-2); max-width: 22ch; }

/* Phones already have the link a tap away; the "scan this" line is only
   meaningful on something that is not the phone. */
@media (max-width: 560px) { .tf-qr { display: none; } }

@media (prefers-reduced-motion: reduce) { .tf { transition: none; } }

.final-card .tf {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .16);
}
.final-card .tf-qr p { color: rgba(255, 255, 255, .88); }

/* On the saturated final card the glass input all but vanishes, so it goes
   solid. .final-card .btn-primary is already white-on-blue. */
.final-card .capture { margin-inline: auto; }
.final-card .capture-row { justify-content: center; }
.final-card .capture-input {
  background: rgba(255, 255, 255, .95); color: #0B0B0F;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: none;
}
.final-card .capture-input::placeholder { color: #6b7180; }
.final-card .capture-input:focus {
  border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}
.final-card .capture-note { color: rgba(255, 255, 255, .82); }
.final-card .capture-msg.ok { color: #dcffee; }
.final-card .capture-msg.err { color: #ffdcdd; }


/* ══ Procrastination Test (/quiz) ══════════════════════════════════════
   A four-question funnel page. Same shell, same glass, same tokens as the
   rest of the site. The four questions are the app's own onboarding
   questions verbatim, and the result card borrows the in-app onboarding's
   blue→violet gradient, so the web test and the app read as one flow. */

.quiz { padding-top: clamp(8px, 2vw, 20px); }
.quiz .wrap { max-width: 760px; }
.quiz-card { padding: clamp(20px, 3.6vw, 42px); }

/* Progress: the same capsule run as the app's onboarding top bar. */
.quiz-steps { display: flex; gap: 6px; margin-bottom: clamp(20px, 3vw, 30px); }
.quiz-steps i {
  flex: 1; height: 6px; border-radius: 999px; display: block;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  transition: background .3s ease;
}
.quiz-steps i.done { background: var(--blue); }

.q-panel { display: none; }
.q-panel.active { display: block; animation: qfade .32s cubic-bezier(.2, .7, .3, 1); }
@keyframes qfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.q-count {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 10px;
}
.q-title { font-size: clamp(1.28rem, 3.2vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
/* Focused only to move a screen reader onto the new question — not a tab stop. */
.q-title:focus { outline: none; }
.q-desc { color: var(--ink-2); margin: 0 0 22px; font-size: .96rem; max-width: 46em; }

.opts { display: grid; gap: 10px; }
.opt {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-line);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt .em {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.15rem; background: color-mix(in srgb, var(--blue) 11%, transparent);
  border: 1px solid var(--glass-edge);
}
.opt .lbl { font-weight: 600; font-size: .97rem; color: var(--ink); line-height: 1.4; }
@media (hover: hover) and (pointer: fine) {
  .opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--blue) 32%, var(--glass-edge)); }
}
.opt:active { transform: scale(.98); }
.opt:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }

.quiz-back {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink-3);
  transition: color .18s ease, scale .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .quiz-back:hover { color: var(--blue); }
}
.quiz-back:active { scale: .96; transition-duration: .1s; }
.quiz-back[hidden] { display: none; }

.quiz noscript p {
  margin: 0; padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--glass-edge); border-left: 3px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, transparent); color: var(--ink-2);
}

/* ── Result ─────────────────────────────────────────────────────────── */
.result { display: none; }
.result.show { display: block; animation: qfade .4s ease; }
/* Focused programmatically only, to move a screen reader to the score — it is
   not a keyboard tab stop, so it needs no visible ring. */
.result:focus { outline: none; }

.score-card {
  position: relative; overflow: hidden; text-align: center;
  border-radius: 28px; padding: clamp(30px, 5vw, 48px) 24px;
  background: linear-gradient(140deg, var(--blue-2), var(--blue-deep) 62%, var(--violet));
  color: #fff; box-shadow: 0 24px 60px color-mix(in srgb, var(--blue) 30%, transparent);
}
.score-card::after {
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 90%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .28), transparent);
  pointer-events: none;
}
.score-card > * { position: relative; z-index: 1; }
.score-eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.score-ring { width: 168px; height: 168px; margin: 14px auto 8px; display: block; }
.score-ring circle { fill: none; stroke-width: 12; stroke-linecap: round; }
.score-ring .track { stroke: rgba(255, 255, 255, .22); }
.score-ring .val { stroke: #fff; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .3, 1); }
.score-ring text { fill: #fff; }
.score-band { font-size: clamp(1.4rem, 3.6vw, 1.95rem); font-weight: 800; letter-spacing: -.02em; margin: 6px 0 6px; color: #fff; }
.score-tag { color: rgba(255, 255, 255, .92); max-width: 40ch; margin: 0 auto; font-size: 1rem; }

.result .diag { margin-top: 18px; padding: clamp(20px, 3vw, 30px); }
.result .diag h3 {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px;
}
.result .diag h3 + h3 { margin-top: 24px; }
.diag ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.diag li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; color: var(--ink); line-height: 1.5; }
.diag li .mk { flex: none; font-weight: 900; line-height: 1.5; }
.diag li.bad .mk { color: #e5484d; }
.diag li.good .mk { color: #30a46c; }
.diag li.bad span { color: var(--ink-2); }

.fix-card { margin-top: 14px; padding: clamp(20px, 3vw, 30px); border-left: 3px solid var(--blue); }
.fix-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.fix-card p { margin: 0 0 .8em; }
.fix-card p:last-child { margin-bottom: 0; }

.result .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 460px) { .result .cta-row .btn { width: 100%; } }

.redirect-note {
  margin-top: 16px; font-size: .85rem; color: var(--ink-3);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.redirect-note button {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--blue); cursor: pointer; text-decoration: underline;
}
.redirect-note[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .q-panel.active, .result.show { animation: none; }
  .score-ring .val { transition: none; }
}