/* Hallmark · macrostructure: bespoke scroll-film (the scroll IS the structure)
 * genre: atmospheric · theme: custom brand-anchored (HeyGro Grove palette)
 * nav: edge-aligned rail + progress · footer: statement
 * enrichment: real captured footage, frame-scrubbed (no re-drawn chrome)
 * motion: scroll-scrub · act crossfade · rail sprout — 3 primitives
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 */

/* ─────────────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────────────── */

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;            /* never `hidden` — it breaks position:sticky */
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--color-paper);
  color: var(--color-tx-3);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  color: var(--color-tx);
  font-weight: 800;
  font-style: normal;          /* headings are always roman */
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }
img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--color-accent); color: var(--color-tx); }

:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  /* never animated — the ring must appear instantly */
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-sm);
  z-index: 100;
  background: var(--color-cream);
  color: var(--color-ink);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--text-sm);
  white-space: nowrap;
}
.skip:focus { left: var(--space-sm); }

.u-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

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

/* ─────────────────────────────────────────────────────────────────────
   Nav — edge-aligned, thin, with an integrated scroll meter
   ───────────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--gutter);
  background: color-mix(in srgb, var(--color-paper) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-rule);
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-tx);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__sprout { width: 14px; height: 14px; flex: none; }

.nav__right { display: flex; align-items: center; gap: var(--space-sm); }

.nav__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-tx-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--color-tx); }
.nav__link:active { color: var(--color-green); }

/* The scroll meter doubles as the nav's bottom rule. */
.nav__meter {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: var(--film-progress, 0%);
  background: linear-gradient(90deg, var(--color-accent), var(--color-green));
  transition: width 90ms linear;
}

/* ─────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;         /* clickable text never wraps to two lines */
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn--solid { background: var(--color-cream); color: var(--color-ink); }
.btn--solid:hover, .btn--solid.is-hover { background: var(--color-tx); }
.btn--solid:active, .btn--solid.is-active { transform: translateY(1px); }

.btn--line { color: var(--color-tx); border-color: var(--color-rule-2); }
.btn--line:hover, .btn--line.is-line-hover { border-color: var(--color-tx); }
.btn--line:active { transform: translateY(1px); }

.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn__ar { font-family: var(--font-mono); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────
   The film — sticky stage, scroll-scrubbed canvas
   ───────────────────────────────────────────────────────────────────── */

.film {
  position: relative;
  /* Scroll runway. Each act gets roughly one viewport of travel. */
  height: 560vh;
}

.film__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: grid;
  place-items: center;
}

/* Twin glows, same grammar as the app's widget backdrop. */
.film__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 44% at 28% 26%, var(--glow-grape), transparent 70%),
    radial-gradient(52% 40% at 76% 74%, var(--glow-green),  transparent 72%);
  pointer-events: none;
}

/* The phone. `screen` blend drops the footage's pure-black ground so Gro's
   device floats in the page instead of sitting in a video box. */
.film__canvas {
  position: relative;
  height: min(86vh, 82svh);
  max-height: 840px;
  width: auto;
  aspect-ratio: 1080 / 1920;
  mix-blend-mode: screen;
  will-change: transform;
  transform: translateZ(0);
  /* The footage carries its own glow to the frame edge; unmasked, that hard
     cut reads as a lit rectangle sitting on the page. Feather the box so the
     glow dissolves instead — the device stays well inside the opaque core. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Loader */
.film__loader {
  position: absolute;
  inset: auto 0 var(--space-xl) 0;
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-tx-4);
  transition: opacity var(--dur-mid) var(--ease-out);
}
.film__loader[hidden] { display: none; }
.film__loaderbar {
  width: 120px;
  height: 2px;
  background: var(--color-rule);
  overflow: hidden;
}
.film__loaderfill {
  height: 100%;
  width: 0%;
  background: var(--color-green);
  transition: width 160ms linear;
}

/* ── Act copy ─────────────────────────────────────────────────────── */

.acts {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding: calc(var(--space-3xl) + var(--space-sm)) var(--gutter) var(--space-2xl);
  /* Mirrors .film__canvas's height rule, so the copy columns can reserve the
     device's footprint and never run under it. */
  --phone-w: calc(min(86vh, 82svh, 840px) * 0.5625);
}

.act {
  grid-area: 1 / 1;
  /* Positioned so it paints above the mobile scrim, which is itself an
     absolutely-positioned pseudo-element and would otherwise cover the copy. */
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.act.is-live { opacity: 1; transform: none; }
/* Never wider than the clear space beside the device. */
.act__inner {
  max-width: min(34rem, calc(50% - var(--phone-w) / 2 - var(--space-lg)));
  pointer-events: auto;
}

/* Acts alternate sides so the phone never sits on top of the words. */
.act--left  .act__inner { margin-right: auto; }
.act--right .act__inner { margin-left: auto; text-align: right; }
.act--right .act__rule { margin-left: auto; }

.act__no {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-tx-4);
  display: block;
  margin-bottom: var(--space-2xs);
}
.act__no b { color: var(--color-green); font-weight: 600; }

.act__h {
  font-size: var(--text-xl);
  color: var(--color-tx);
  text-wrap: balance;
}
.act--hero .act__h { font-size: var(--text-display); font-weight: 900; }

.act__rule {
  width: 34px;
  height: 2px;
  background: var(--color-accent);
  margin: var(--space-sm) 0;
}

.act__p {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-tx-3);
  max-width: 26rem;
}
.act__p b { color: var(--color-tx-2); font-weight: 600; }

.act__cta { margin-top: var(--space-md); display: flex; gap: var(--space-2xs); flex-wrap: wrap; }

/* Scroll cue, act 1 only */
.cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-tx-4);
  transition: opacity var(--dur-mid) var(--ease-out);
}
.cue__line { width: 1px; height: 26px; background: linear-gradient(var(--color-rule-2), transparent); }

/* ── Act rail (desktop) ───────────────────────────────────────────── */

.rail {
  position: fixed;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: var(--space-xs);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.rail.is-live { opacity: 1; }

.rail__item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2xs);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-tx-4);
  transition: color var(--dur-fast) var(--ease-out);
}
.rail__item:hover { color: var(--color-tx-2); }
.rail__tick {
  width: 18px;
  height: 2px;
  background: var(--color-rule-2);
  transition: width var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out);
}
.rail__item[aria-current="true"] { color: var(--color-tx); }
.rail__item[aria-current="true"] .rail__tick { width: 34px; background: var(--color-green); }

@media (max-width: 900px) { .rail { display: none; } }

/* ─────────────────────────────────────────────────────────────────────
   After the film
   ───────────────────────────────────────────────────────────────────── */

.section { padding-block: var(--space-3xl); border-top: 1px solid var(--color-rule); }

.statement {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-tx);
  letter-spacing: -0.035em;
  line-height: 1.1;
  max-width: 20ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--color-green); }

.statement__note {
  margin-top: var(--space-md);
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.card {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  padding: var(--space-md);
  min-width: 0;
}
.card__k {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-green);
}
.card__h {
  margin-top: var(--space-2xs);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-tx);
  letter-spacing: -0.02em;
}
.card__p { margin-top: var(--space-2xs); font-size: 0.9375rem; line-height: 1.6; }

/* Facts strip — plain claims, each one verifiable in the app */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
  padding: 0;
  list-style: none;
}
.facts li {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-tx-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.75rem;
}

.close { text-align: center; }
.close__h { font-size: var(--text-display); font-weight: 900; text-wrap: balance; }
.close__p { margin: var(--space-md) auto 0; max-width: 34rem; font-size: var(--text-lg); }
.close__cta { margin-top: var(--space-lg); display: flex; gap: var(--space-2xs); justify-content: center; flex-wrap: wrap; }

.foot {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-tx-4);
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.foot a { text-decoration: none; white-space: nowrap; }
.foot a:hover { color: var(--color-tx-2); }

/* ─────────────────────────────────────────────────────────────────────
   Static fallback — reduced motion, reduced data, or no-JS.
   The film becomes an ordinary illustrated document. No pinning, no scrub.
   ───────────────────────────────────────────────────────────────────── */

.static { display: none; }
.static__act {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-rule);
}
.static__fig { margin: 0; justify-self: center; }
.static__fig img {
  width: min(300px, 72vw);
  mix-blend-mode: screen;
}

html.is-static .film   { display: none; }
html.is-static .rail   { display: none; }
html.is-static .static { display: block; }

@media (prefers-reduced-motion: reduce) {
  .act { transition: opacity 140ms linear; transform: none; }
  .act.is-live { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile — the film still plays, the copy moves off the phone
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .film { height: 480vh; }

  /* The device occupies only 55–78% of the frame's width — the rest is empty
     ground. Fitting the whole frame inside a phone screen left the device
     ~140px wide and unreadable. Scale to the viewport height instead and let
     the empty side margins bleed past the edges (the stage clips them), so
     the device itself gets roughly twice as large. */
  .film__canvas {
    height: 84svh;
    max-height: none;
    max-width: none;
    width: auto;
    /* Sit the device high so the copy below lands on quieter ground. */
    transform: translateY(-7%);
  }

  .acts {
    place-items: end center;
    padding-bottom: var(--space-xl);
  }
  .act__inner,
  .act--right .act__inner {
    max-width: none;
    margin: 0;
    text-align: left;
  }
  .act--right .act__rule { margin-left: 0; }
  .act__h { font-size: clamp(1.375rem, 5.6vw, 1.75rem); }
  .act--hero .act__h { font-size: clamp(1.875rem, 8.4vw, 2.5rem); }
  .act__p { font-size: 1rem; max-width: none; }

  /* Keep the words legible over the device. */
  .acts::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 70%;
    z-index: 0;
    background: linear-gradient(to top, var(--color-paper) 52%, transparent);
    pointer-events: none;
  }
  .cue { display: none; }
  .nav__link--hide { display: none; }
}

@media (max-width: 380px) {
  .btn { padding: 0.65rem 0.9rem; font-size: 0.875rem; }
}