/* ============================================================================
   goodngrowth — landing
   Built on the tokens in site.css. Nothing here re-declares a colour, a face
   or a spacing step; it composes them.

   Light source: top, slightly left. One declared direction for every shadow
   and every specular edge on the page.

   Rounded framing follows the approved plan. Real app-icon geometry is protected.
   ========================================================================= */

/* ── shared section furniture ─────────────────────────────────────────── */
.sec            { padding: var(--space-8) 0; position: relative; }
.sec-sm         { padding: var(--space-7) 0; position: relative; }
/* The grounds keep their exact BRAND.md values and carry the column guides as a
   background IMAGE over that colour. background-attachment: fixed anchors the
   image to the viewport rather than the section, so the twelve guides run
   unbroken from the hero to the footer instead of restarting at every seam --
   which is what stopped the page reading as a stack of pasted blocks.
   Drawing them here rather than in the page backdrop means they sit behind the
   text, never over it, and no ground has to go translucent to reveal them.
   iOS Safari ignores fixed attachment and falls back to per-section
   positioning: at 4.4% alpha that degradation is invisible. */
.on-paper,
.on-band {
  background-image: var(--col-guides);
  background-attachment: fixed;
  background-size: var(--wrap-w) 100%;
  background-repeat: no-repeat;
  background-position: center top;
}
.on-paper       { background-color: var(--canvas); }
.on-band        { background-color: var(--gray-dark); }
/* Obsidian takes no guides: ink on ink is nothing, and these sections are meant
   to land flat and hard. */
.on-deep        { background: var(--obsidian); color: #E8E8E6; }
.ruled-top      { border-top: 1px solid var(--border); }
.ruled-btm      { border-bottom: 1px solid var(--border); }
.on-deep.ruled-top,
.on-deep.ruled-btm { border-color: rgba(255,255,255,.10); }

.wrap { width: min(1160px, calc(100% - var(--space-6))); margin-inline: auto; }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--space-4); }
.c1-6  { grid-column: 1 / 7; }
.c1-7  { grid-column: 1 / 8; }
.c1-8  { grid-column: 1 / 9; }
.c1-12 { grid-column: 1 / 13; }
.c7-12 { grid-column: 7 / 13; }
@media (max-width: 900px) { .c1-6,.c1-7,.c1-8,.c7-12 { grid-column: 1 / 13; } }

/* The eyebrow numbers a real sequence — stack, signal, intake, workbench —
   and is absent from the sections that are not steps in one. */
.eyebrow {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-mono); font-size: .6875rem; line-height: 1rem;
  letter-spacing: var(--track-data); text-transform: uppercase;
  color: var(--muted-dim); margin-bottom: var(--space-4);
}
.eyebrow b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.on-deep .eyebrow   { color: rgba(255,255,255,.52); }
.on-deep .eyebrow b { color: #F4F4F2; }

/* ── type ─────────────────────────────────────────────────────────────────
   Inter's thin end is only structurally sound at size: the stems vanish
   below about 48px. Weight is therefore a function of size, not taste. */
.display, .sec h2, .sec-sm h2 {
  font-family: var(--font-display);
  font-weight: var(--w-heading);            /* 200 — h2 bottoms out at ~34px */
  font-size: var(--h2-size);
  line-height: 1.06;
  letter-spacing: var(--track-lg);
  color: var(--text);
  text-wrap: balance;
  margin: 0;
  font-optical-sizing: auto;
}
.on-deep h2 { color: #F7F7F5; }
.sec h3, .sec-sm h3 {
  font-family: var(--font-display); font-weight: var(--w-sub);
  font-size: 1.1875rem; line-height: 1.4; letter-spacing: var(--track-md);
  color: var(--text); margin: 0;
}
.on-deep h3 { color: #F2F2F0; }

.lede {
  font-family: var(--font-body); font-size: var(--lede-size); line-height: 1.6;
  color: var(--muted); max-width: 60ch; margin: var(--space-4) 0 0;
  text-wrap: pretty;
}
.on-deep .lede { color: rgba(255,255,255,.66); }
/* No blanket font-family on p. It was (0,1,1) and beat every (0,1,0) class
   that wanted the display face — .stop-gap, .leak-n and .amount all silently
   rendered as serif. Body copy inherits Newsreader from body anyway. */
.sec p, .sec-sm p { text-wrap: pretty; }

/* Data, timestamps, counts and status lines. Never prose. */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.micro {
  font-family: var(--font-mono); font-size: .625rem; line-height: 1rem;
  letter-spacing: var(--track-data); text-transform: uppercase;
  color: var(--muted-dim);
}

/* ══ THE SHOT ═════════════════════════════════════════════════════════════
   A desktop full of icons collapses into one icon. 260vh of runway, a sticky
   stage, one scroll-driven variable --p (0 -> 1) and its eased twin --e.
   --p:1 by default so the quiet screen renders with no JS at all.
   ======================================================================== */
.shot  { height: 260vh; position: relative; }
.stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  --p: 1; --e: 1; --fs: 1;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF, transparent 60%),
    linear-gradient(180deg, #FBFBFA, #EFEEEA);
}
.js .stage { --p: 0; --e: 0; }

/* the frame stays put: same computer, different morning */
.menubar {
  position: absolute; inset: 0 0 auto; height: 28px; z-index: 40;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-3);
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(17,17,17,.07);
  font-family: var(--font-mono); font-size: .625rem; line-height: 1rem;
  letter-spacing: var(--track-data); color: var(--muted-dim);
}
.menubar b { color: var(--muted); font-weight: 500; }
.menubar .right { margin-left: auto; }

/* State A is polychrome — seven other companies' brands, loud and scattered.
   State B is one system. The colour leaves as the screen centralises. */
.field { position: absolute; inset: 0; filter: saturate(calc(1 - var(--p))); }

.ico {
  position: absolute; top: 50%; left: 50%;
  --sz: 64px; --dim: 1; --bl: 0; --sc: 1; --rot: 0; --fo: .40; --gs: 54%;
  --tx: var(--x); --ty: var(--y);
  width: var(--sz); display: flex; flex-direction: column; align-items: center;
  filter: blur(calc(var(--bl) * 1px));
  opacity: clamp(0, calc((1 - (var(--p) - var(--fo)) * 7) * var(--dim)), 1);
  transform:
    translate3d(
      calc(-50% + var(--tx) * var(--fs) * 1px * (1 - var(--e))),
      calc(-50% + var(--ty) * var(--fs) * 1px * (1 - var(--e)) - 42px * var(--e)), 0)
    rotate(calc(var(--rot) * 1deg * (1 - var(--e))))
    scale(calc(var(--sc) + (.30 - var(--sc)) * var(--e)));
}
.ico.back { --sz: 46px; --fo: .30; }

/* An app icon is a picture of a real object, so it keeps a real corner. */
.tile {
  position: relative; width: var(--sz); height: var(--sz);
  border-radius: calc(var(--sz) * .226);
  background: var(--c); display: grid; place-items: center;
  box-shadow:
    0 1px 1px rgba(17,17,17,.16),
    0 6px 12px -4px rgba(17,17,17,.18),
    0 20px 32px -14px rgba(17,17,17,.24),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 44%, rgba(0,0,0,.12));
}
.tile svg { width: var(--gs); height: var(--gs); color: #fff; position: relative; z-index: 1; }
.ico.back .tile {
  box-shadow: 0 1px 1px rgba(17,17,17,.10), 0 4px 10px -4px rgba(17,17,17,.16),
              inset 0 1px 0 rgba(255,255,255,.28);
}
.ico.light .tile     { background: #FFFFFF; border: 1px solid var(--border); }
.ico.light .tile svg { color: #1D1B18; }
.ico.onw .tile       { background: #FFFFFF; border: 1px solid var(--border); }
.ico.onw .tile svg   { color: var(--c); }
.ico.onw .tile::before {
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 44%, rgba(0,0,0,.05));
}
.wm {
  position: relative; z-index: 1; font-family: var(--font-mono);
  font-size: 1.375rem; line-height: 1; font-weight: 600; color: #fff;
  letter-spacing: -.06em;
}

/* The unread counts. These sit on OTHER companies' apps, in the state before
   you — which is why they are allowed to shout here and nowhere else in the
   system. goodngrowth's own icon carries none, and that absence is the
   argument the whole section is making. */
.badge {
  position: absolute; top: -7px; right: -9px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--alert); color: #fff;
  font-family: var(--font-mono); font-size: .625rem; line-height: 20px;
  font-weight: 500; font-variant-numeric: tabular-nums; text-align: center;
  border: 2px solid var(--canvas);
  box-shadow: 0 1px 3px rgba(17,17,17,.28);
  opacity: clamp(0, calc(1 - var(--p) * 4.5), 1);
  transform: scale(calc(1 - .28 * var(--p)));
}
.lbl {
  margin-top: var(--space-1); font-family: var(--font-mono);
  font-size: .625rem; line-height: 1rem; letter-spacing: .03em;
  color: var(--muted-dim); white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.cursor {
  position: absolute; z-index: 35; width: 15px; height: 15px; top: 50%; left: 50%;
  color: #2E2B27;
  transform: translate3d(calc(var(--cx) * 1px), calc(var(--cy) * 1px), 0);
  opacity: clamp(0, calc(1 - (var(--p) - .18) * 4), 1);
  filter: drop-shadow(0 1px 2px rgba(17,17,17,.3));
}

/* the quiet screen: one icon, and nothing asking */
.quiet {
  position: absolute; top: 52%; left: 50%; z-index: 30; text-align: center;
  width: min(430px, 84vw); display: flex; flex-direction: column; align-items: center;
  transform: translate3d(-50%, -50%, 0) scale(calc(.92 + .08 * var(--e)));
  opacity: clamp(0, calc((var(--p) - .44) * 6), 1);
}
.q-tile {
  width: 96px; height: 96px; border-radius: 22px; position: relative;
  background: linear-gradient(180deg, #232220, #0C0C0C); display: grid; place-items: center;
  box-shadow:
    0 1px 1px rgba(17,17,17,.18),
    0 8px 16px -6px rgba(17,17,17,.22),
    0 28px 44px -20px rgba(17,17,17,.30),
    inset 0 1px 0 rgba(255,255,255,.16);
}
.q-tile svg { width: 46px; height: auto; color: #F9F9F8; fill: #F9F9F8; }
.q-lbl {
  margin-top: var(--space-2); font-family: var(--font-mono); font-size: .625rem;
  line-height: 1rem; letter-spacing: .08em; color: var(--muted-dim);
}
.quiet h2 {
  margin-top: var(--space-4); font-family: var(--font-display);
  font-weight: var(--w-sub); font-size: 1.4375rem; line-height: 1.35;
  letter-spacing: var(--track-md); color: var(--text);
}
.quiet p {
  margin-top: var(--space-2); font-family: var(--font-body);
  font-size: .9375rem; line-height: 1.6; color: var(--muted-dim); max-width: 36ch;
}

/* the headline: hero scale, then it gets out of the way */
.title {
  position: absolute; left: 0; right: 0; z-index: 36; text-align: center;
  top: calc(34% - 18% * var(--e)); padding-inline: var(--space-5);
  pointer-events: none;
}
.title span {
  display: block; font-family: var(--font-display);
  letter-spacing: var(--track-xl); text-wrap: balance; margin-inline: auto;
  color: var(--text); font-optical-sizing: auto;
}
.t-a {
  font-weight: var(--w-display);                       /* 100 — only at this size */
  font-size: clamp(2.25rem, 5.6vw, 4.25rem); line-height: 1.04; max-width: 16ch;
  opacity: clamp(0, calc(1 - (var(--p) - .10) * 6.25), 1);
}
.t-b {
  position: absolute; left: 0; right: 0; top: 0; padding-inline: var(--space-5);
  font-weight: var(--w-heading); font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.1; max-width: 22ch;
  opacity: clamp(0, calc((var(--p) - .27) * 6), 1);
}
.scroll-cue {
  position: absolute; bottom: var(--space-5); left: 50%; z-index: 36;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .625rem; line-height: 1rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dim);
  opacity: clamp(0, calc(1 - var(--p) * 3), 1);
}

/* ══ 01 · STACK ═══════════════════════════════════════════════════════════
   Two pieces: a headline that changes voice as you scroll past it, and the
   twelve tools set as an index rather than as twelve boxes.
   ========================================================================= */

/* The masked headline.
   First attempt set the line twice, Inter under Newsreader, and wiped a mask
   across the serif. It failed for the reason it was always going to: the two
   faces do not share metrics, so mid-wipe both settings are visible at once and
   the glyphs sit on top of each other. It read as a rendering fault, not as a
   transition.

   This is the same effect done with one text node. The gradient is painted onto
   the glyphs with background-clip:text and slid across by --sp, so the line
   arrives in ink from the left while the untouched part waits in ghost. One
   element, one set of metrics, nothing to collide, and no duplicated text for a
   screen reader to read twice.

   Every stop is positive: the earlier version computed a negative percentage
   into the gradient, which is invalid at computed-value time, so the whole
   mask-image declaration was being dropped and neither copy was ever masked. */
/* Selector carries h2 as well as the class: `.sec h2` in the heading block is
   (0,1,1) and beat a bare `.maskhead` on `color`, so the text stayed #111,
   background-clip:text had nothing transparent to clip through, and the whole
   wipe was invisible while every other property resolved correctly. */
.sec h2.maskhead {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--w-heading);
  font-size: var(--h2-size);
  line-height: 1.06;
  letter-spacing: var(--track-lg);
  text-wrap: balance;
  font-optical-sizing: auto;

  background-image: linear-gradient(90deg,
    var(--text) 0 42%,
    rgba(17, 17, 17, 0.18) 58% 100%);
  background-size: 240% 100%;
  background-repeat: no-repeat;
  /* 100% parks the ghost end over the line, 0% brings the ink end across. */
  background-position: calc(100% - var(--sp, 0) * 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* No scrub, no JS, no support for background-clip: the line is simply ink. */
@supports not (background-clip: text) {
  .sec h2.maskhead { color: var(--text); background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sec h2.maskhead { color: var(--text); background-image: none; }
}

/* The tool index.
   Twelve rows, numbered, each on a hairline: a colophon, not a chip rack. The
   chips this replaces were the only border-radius on the page and carried no
   hover, focus or active state at all. These carry no state either -- and that
   is correct, because they are not interactive. Recognition is already paid for
   in the hero, where the same twelve run in full brand colour. */
.toollist {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-5);
  border-top: 1px solid var(--border);
}
.toollist li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.toollist i {
  font-style: normal;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--micro);
}
/* --cast-y is deliberately small. The point of this section is that the tools
   settle, so they travel a short distance slowly rather than a long distance
   fast. */
.toollist[data-cast] {
  --cast-y: 10px;
  --cast-step: 45ms;
  --cast-lead: 120ms;
}

@media (max-width: 860px) {
  .toollist { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-4); }
}
@media (max-width: 560px) {
  .toollist { grid-template-columns: 1fr; }
  .mh-serif { --wipe: calc(var(--sp, 0) * 150% - 25%); }
}

/* ══ 02 · SIGNAL ══════════════════════════════════════════════════════════
   The unified feed. Everything the system noticed, in one column, in the
   order it happened — which is the whole point of centralising. */
.points { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.point h3 { margin-bottom: var(--space-2); }
.point p  { font-size: .9375rem; line-height: 1.65; color: var(--muted); max-width: 46ch; margin: 0; }
.on-deep .point p { color: rgba(255,255,255,.62); }

.feed {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md), var(--specular);
}
.on-deep .feed { background: var(--charcoal); border-color: rgba(255,255,255,.10); box-shadow: none; }
.feed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: var(--track-data);
  text-transform: uppercase; color: var(--muted-dim);
}
.on-deep .feed-head { border-color: rgba(255,255,255,.10); }
.notif {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
}
.on-deep .notif { border-color: rgba(255,255,255,.07); }
.notif:last-child { border-bottom: 0; }
.notif .src  { font-family: var(--font-mono); font-size: .625rem; letter-spacing: var(--track-data);
  text-transform: uppercase; color: var(--muted-dim); }
.notif .at   { font-family: var(--font-mono); font-size: .625rem; color: var(--muted-dim);
  font-variant-numeric: tabular-nums; text-align: right; }
.notif .line { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 500;
  font-size: .9375rem; line-height: 1.45; letter-spacing: var(--track-md); color: var(--text); }
.on-deep .notif .line { color: #F2F2F0; }
.notif .why  { grid-column: 1 / -1; font-family: var(--font-body); font-size: .8125rem;
  line-height: 1.55; color: var(--muted-dim); margin: 0; }
.on-deep .notif .why { color: rgba(255,255,255,.55); }
.notif.needs .line::before {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--alert); margin-right: var(--space-2); transform: translateY(-3px);
}

/* ══ 03 · INTAKE ══════════════════════════════════════════════════════════
   The thread. A real conversation, set like one — not a UI mock of one. */
.thread {
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md), var(--specular); overflow: hidden;
}
.th-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FFF, #FAFAF9);
}
.th-head .dot { width: 20px; height: 20px; border-radius: 5px; background: var(--c); flex: none;
  display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.th-head .dot svg { width: 12px; height: 12px; color: #fff; }
.th-who { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.th-tag { margin-left: auto; }
.th-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.bubble {
  max-width: 82%; padding: var(--space-3) var(--space-4);
  background: var(--canvas-deep); border: 1px solid var(--border);
  font-family: var(--font-body); font-size: .9375rem; line-height: 1.6; color: var(--text);
  align-self: flex-start;
}
.bubble.me { align-self: flex-end; background: var(--obsidian); border-color: var(--obsidian); color: #F2F2F0; }
.pulled {
  border-top: 1px solid var(--border); padding: var(--space-4);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  background: var(--canvas);
}
.pulled dt { font-family: var(--font-mono); font-size: .625rem; letter-spacing: var(--track-data);
  text-transform: uppercase; color: var(--muted-dim); margin-bottom: var(--space-1); }
.pulled dd { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: .875rem;
  letter-spacing: var(--track-md); color: var(--text); }
@media (max-width: 640px) { .pulled { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ══ 04 · WORKBENCH ═══════════════════════════════════════════════════════ */
.stops { display: grid; gap: 0; margin-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.10); }
.stop {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--space-4);
  padding: var(--space-5) 0; border-bottom: 1px solid rgba(255,255,255,.10);
  align-items: start;
}
.stop-tool { font-family: var(--font-mono); font-size: .8125rem; color: rgba(255,255,255,.52);
  letter-spacing: var(--track-data); text-transform: uppercase; }
.stop-gap  { font-family: var(--font-display); font-weight: var(--w-sub); font-size: 1.1875rem;
  line-height: 1.45; letter-spacing: var(--track-md); color: #F4F4F2; margin: 0; }
.stop-fix  { font-family: var(--font-body); font-size: .9375rem; line-height: 1.65;
  color: rgba(255,255,255,.62); margin: var(--space-2) 0 0; max-width: 52ch; }
@media (max-width: 760px) { .stop { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ══ INSTALL ══════════════════════════════════════════════════════════════ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
  margin-top: var(--space-6); counter-reset: s; }
.step { border-top: 2px solid var(--text); padding-top: var(--space-3); }
.step .n { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--track-data);
  color: var(--muted-dim); font-variant-numeric: tabular-nums; }
.step h3 { margin: var(--space-2) 0 var(--space-2); font-size: 1.0625rem; }
.step p  { font-family: var(--font-body); font-size: .875rem; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ══ COMPARISON ═══════════════════════════════════════════════════════════ */
.cmp-wrap { margin-top: var(--space-6); overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 660px; }
.cmp th, .cmp td { padding: var(--space-3) var(--space-4); text-align: left;
  border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp thead th {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--track-data);
  text-transform: uppercase; color: var(--muted-dim); font-weight: 400;
  border-bottom-color: var(--text);
}
.cmp thead th.us { color: var(--text); }
.cmp tbody th {
  font-family: var(--font-body); font-weight: 400; font-size: .9375rem;
  color: var(--muted); width: 34%;
}
.cmp td { font-family: var(--font-display); font-weight: 500; font-size: .9375rem;
  letter-spacing: var(--track-md); color: var(--muted-dim); }
.cmp td.us { color: var(--text); background: var(--canvas-deep); }

/* ══ LEAK ═════════════════════════════════════════════════════════════════ */
.leak { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-5); }
.leak-n { font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(3rem, 7vw, 5rem); line-height: 1; letter-spacing: var(--track-xl);
  color: var(--text); font-variant-numeric: tabular-nums; }
.leak dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: var(--track-data);
  text-transform: uppercase; color: var(--muted-dim); margin-bottom: var(--space-2); }
.leak dd { margin: var(--space-2) 0 0; font-family: var(--font-body); font-size: .875rem; color: var(--muted-dim); }
@media (max-width: 640px) { .leak { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ══ PRICING ══════════════════════════════════════════════════════════════ */
.price { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 860px) { .price { grid-template-columns: 1fr; } }
.amount { color: #F7F7F5; }
.card.lead p, .card.lead dd { color: rgba(255,255,255,.62); }
.card.lead dt { color: rgba(255,255,255,.52); }
.card.lead .was { color: rgba(255,255,255,.40); }
.amount { font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(2.75rem, 6vw, 4rem); line-height: 1; letter-spacing: var(--track-xl);
  color: var(--text); font-variant-numeric: tabular-nums; margin-top: var(--space-4); }
.was { font-family: var(--font-mono); font-size: 1rem; color: var(--muted-dim);
  text-decoration: line-through; margin-right: var(--space-2); }
.per { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted-dim); letter-spacing: var(--track-data); }
.card dl { margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.card dt { font-family: var(--font-mono); font-size: .625rem; letter-spacing: var(--track-data);
  text-transform: uppercase; color: var(--muted-dim); }
.card dd { margin: 2px 0 0; font-family: var(--font-body); font-size: .9375rem; color: var(--muted); }
.card .btn { margin-top: var(--space-5); align-self: flex-start; }
.terms { margin-top: var(--space-6); display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
.terms div { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.terms h4 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-weight: 500;
  font-size: .9375rem; letter-spacing: var(--track-md); color: var(--text); }
.terms p { margin: 0; font-family: var(--font-body); font-size: .875rem; line-height: 1.6; color: var(--muted-dim); }
@media (max-width: 640px) { .terms { grid-template-columns: 1fr; } }

/* ══ FAQ ══════════════════════════════════════════════════════════════════ */
.faq { margin-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.10); }
.qa { border-bottom: 1px solid rgba(255,255,255,.10); padding: var(--space-5) 0;
  display: grid; grid-template-columns: 320px 1fr; gap: var(--space-5); align-items: start; }
.qa h3 { font-size: 1.0625rem; color: #F4F4F2; }
.qa p  { margin: 0; font-family: var(--font-body); font-size: .9375rem; line-height: 1.7;
  color: rgba(255,255,255,.62); max-width: 62ch; }
@media (max-width: 820px) { .qa { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ══ CTA ══════════════════════════════════════════════════════════════════ */
.cta-acts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.cta-mail { margin-top: var(--space-4); font-family: var(--font-mono); font-size: .8125rem; color: var(--muted-dim); }
.cta-mail a { color: var(--text); }

/* ══ MOTION ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .stage { --p: 1; --e: 1; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (max-width: 1180px) { .stage { --fs: .84; } }
@media (max-width: 980px)  { .stage { --fs: .68; } }
@media (max-width: 860px) {
  .shot  { height: 220vh; }
  .stage { --fs: 1; }
  .ico   { --sz: 52px; --tx: var(--mx); --ty: var(--my); }
  .ico.back { --sz: 38px; }
  .t-a   { max-width: 12ch; }
}


/* ── on obsidian ───────────────────────────────────────────────────────────
   Every colour above is chosen against paper. Anything that also appears
   inside an .on-deep section has to be restated, or it arrives as ink on
   near-black. These are the ones that actually do. */
.on-deep .micro,
.on-deep .feed-head,
.on-deep .notif .src,
.on-deep .notif .at,
.on-deep .card dt,
.on-deep .per,
.on-deep .was          { color: rgba(255, 255, 255, .52); }
.card.lead .per,
.card.lead dt          { color: rgba(255, 255, 255, .52); }
.on-deep .cta-mail     { color: rgba(255, 255, 255, .62); }
.on-deep .cta-mail a   { color: #F4F4F2; }
.on-deep .btn-ghost {
  color: #F4F4F2;
  border-color: rgba(255, 255, 255, .28);
  background: transparent;
}
.on-deep .btn-ghost:hover {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
}
.on-deep .btn-primary {
  background: #F7F7F5;
  color: var(--obsidian);
  border-color: #F7F7F5;
}
.on-deep .btn-primary:hover { background: #FFFFFF; }

/* Hero frame only. Never inset, resize or transform the sticky stage or field.
   The outside paper ring paints over the original background; the transparent
   centre preserves the exact compositing beneath the protected icon field. */
.hero-frame { position: absolute; inset: 16px 20px; border-radius: var(--r-xl);
  box-shadow: 0 0 0 40px var(--canvas); border: 1px solid var(--card-border); pointer-events: none; }
.hero-signature { position: absolute; top: 92px; left: 52px; right: 52px; z-index: 35;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); pointer-events: none; }
.hero-wordmark { font: 500 1rem/1 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.hero-signature .hero-badge { position: static; width: auto; height: auto; transform: none; box-shadow: none; }
.hero-actions { position: absolute; bottom: 74px; left: 32px; right: 32px; z-index: 37;
  display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.hero-strip { padding: var(--space-5) var(--space-4); background: var(--canvas); }
.hero-strip-items { display: flex; justify-content: center; gap: var(--space-6); width: max-content; min-width: 100%;
  font: .625rem/1.5 var(--font-mono); color: var(--muted); letter-spacing: var(--track-data); text-transform: uppercase; }
@media (max-width: 860px) {
  .hero-frame { inset: 12px; }
  .hero-signature { top: 86px; left: 30px; right: 30px; }
  .hero-wordmark { font-size: .875rem; }
  .hero-signature .hero-badge { font-size: .5rem; padding: .4rem .6rem; }
  .hero-actions { bottom: 68px; left: 24px; right: 24px; gap: var(--space-1); }
  .hero-actions .btn { padding: .85rem 1rem; font-size: .65rem; }
}

/* Product evidence sits inside a well, with a separate surface around it. */
.feed.card, .thread.card { border-color: var(--card-border); padding: var(--space-4); box-shadow: var(--shadow-md); }
.feed .card-well, .thread .card-well { aspect-ratio: auto; display: block; padding: var(--space-3); }
.notif { background: var(--surface); border: 0; border-radius: var(--r-sm); margin-top: var(--space-2); }
.feed-head { padding: var(--space-2); border: 0; }
.th-head { border: 0; }
.bubble { border-radius: var(--r-md); }
#signal .grid12, #intake .grid12 { align-items: center; gap: var(--space-6) var(--space-5); }
.price { grid-template-columns: minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr); gap: var(--space-5); align-items: center; margin-top: var(--space-7); }
.price > .card { display: flex; flex-direction: column; padding: var(--space-5); }
.running-card { grid-column: 1; grid-row: 1; }
.install-card { grid-column: 2; grid-row: 1; padding-block: var(--space-6) !important; }
.partnership { grid-column: 3; grid-row: 1; }
.price .card--dark h3, .price .card--dark h4, .price .card--dark .amount { color: var(--canvas); }
.price .card--dark p, .price .card--dark dd, .price .card--dark dt, .price .card--dark .per { color: #BDBDB9; }
.partnership .terms { grid-template-columns: 1fr; margin: 0; gap: var(--space-5); }
.partnership .terms div { border-color: #333330; }
.partnership .terms div:first-child { border: 0; padding-top: 0; }
.cta-panel { padding: var(--space-7) var(--space-5); background: var(--canvas-deep); border-radius: var(--r-xl); text-align: center; }
.cta-panel .lede { margin-inline: auto; max-width: 52ch; }
.cta-panel h2 { max-width: 20ch; margin-inline: auto; }
.cta-panel .cta-acts { justify-content: center; }
@media (max-width: 860px) {
 .price { grid-template-columns: 1fr; }
 .price > .card { grid-column: auto; grid-row: auto; }
 .install-card { order: -1; }
 .feed.card, .thread.card { padding: var(--space-3); }
}

/* A registered two-plate light wipe. CSS fallback resolves to morning. */
#breathing-room { --dawn: clamp(0, calc((var(--sp, 1) - .25) / .5), 1); }
.dawn-panel { background: var(--canvas-deep); border-radius: var(--r-xl); overflow: hidden; }
.dawn-copy { padding: var(--space-6) var(--space-5); text-align: center; }
.dawn-copy h2 { margin-top: var(--space-4); }
.dawn-copy .lede { max-width: 48ch; margin-inline: auto; }
.dawn-visual { margin: 0; background: var(--obsidian); }
.dawn-images { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
 mask-image: linear-gradient(#000 85%, transparent), radial-gradient(ellipse 85% 100% at 50% 42%, #000 60%, transparent 100%);
 mask-composite: intersect; }
.dawn-images picture { display: block; position: absolute; inset: 0; }
.dawn-images img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.dawn-images picture::after { content: ''; position: absolute; inset: 0; background: #EDEEF0; mix-blend-mode: multiply; pointer-events: none; }
.dawn-images .desk-morning::after { background: var(--canvas-deep); }
.desk-morning { mask-image: linear-gradient(90deg, #000 calc(var(--dawn) * 124% - 24%), transparent calc(var(--dawn) * 124%)); }
.phone-dim { position: absolute; left: 67.5%; top: 55.2%; width: 11%; height: 6.8%;
 background: #151513; clip-path: polygon(8% 10%, 63% 0, 97% 69%, 85% 88%, 0 27%);
 opacity: clamp(0, calc((var(--sp, 1) - .15) * 10), 1); }
.dawn-visual figcaption { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5);
 color: #BDBDB9; font: .625rem/1.5 var(--font-mono); letter-spacing: var(--track-data); }
@media (prefers-reduced-motion: reduce) { #breathing-room { --dawn: 1; } }
@media (max-width: 560px) { .dawn-copy { padding: var(--space-5) var(--space-4); }
 .dawn-visual figcaption { font-size: .5rem; padding: var(--space-3); gap: var(--space-2); } }

/* Review round two: scoped badges, cleaner inset conversation, readable labels. */
.dawn-copy .badge { position: static; width: auto; height: auto; min-width: 0; transform: none; box-shadow: none; border: 0; }
.thread .bubble:not(.me) { background: var(--surface); border: 0; }
.price .install-card { min-height: 570px; }
.price .install-card .btn { margin-top: auto; }
.toollist i { color: var(--muted); }
.phone-dim { left: 68.6%; top: 55.9%; width: 8.8%; height: 4.6%; clip-path: polygon(0 9%, 44% 0, 100% 73%, 62% 100%); }
.dawn-images { mask-image: linear-gradient(transparent, #000 7%, #000 85%, transparent), radial-gradient(ellipse 85% 100% at 50% 42%, #000 60%, transparent 100%); }
.dawn-images .desk-night img { filter: url(#desk-night-tone); }
.dawn-images .desk-morning img { filter: url(#desk-morning-tone); }
.dawn-images picture::after { display: none; }
@media (max-width: 860px) { .price .install-card { min-height: 0; } .price .install-card .btn { margin-top: var(--space-5); } }

html:not(.js) #breathing-room { --dawn: 1; }

@media (max-width: 560px) {
 .hero-signature { top: 150px; }
 .hero-actions { flex-wrap: nowrap; }
 .hero-actions .btn { width: auto; min-width: 0; flex: 1; padding: .85rem .55rem; font-size: .58rem; }
}

@media (max-width: 560px) {
 .hero-signature { top: 145px; opacity: clamp(0, calc(1 - var(--p) * 4), 1); }
 .hero-signature .badge.hero-badge { font-size: .45rem; padding: .35rem .5rem; }
}

@media (max-width: 560px) {
 .hero-signature { top: calc(50% - 200px); opacity: clamp(0, calc(1 - var(--p) * 4), 1); }
 .hero-signature .badge.hero-badge { font-size: .45rem; padding: .35rem .5rem; }
}