/* ==========================================================================
   Stocked — by Instawork
   --------------------------------------------------------------------------
   The palette is Instawork's, not a generic one: cream ground, navy ink,
   periwinkle accent. The previous build was white / near-black / product-blue,
   which is the default any tool reaches for and reads as machine-made.

   The typographic signature is Georgia ITALIC on an accent word inside a sans
   headline -- Instawork's own move. It appears three times on the whole page.
   Used on a whole line it becomes a serif display face, which is a different
   and much more common look; one or two words is the entire point.

   Everything is on a scale. Type sizes were literal clamp() values written at
   each use site, spacing had two tokens, and eight different border-radii were
   in play. Sizes that never repeat are what makes a page look assembled rather
   than designed.

   Contrast is computed, not judged by eye -- see the ratios noted per colour.
   ========================================================================== */

:root {
  /* ── ground and ink ─────────────────────────────────────────────────── */
  --paper:  #f7f6f2;   /* Instawork cream. Not white. */
  --surface:#ffffff;   /* raised panels only */
  --wash:   #efede5;   /* the one alternate ground, a step deeper than paper */
  --ink:    #1e2138;   /* navy. 14.60:1 on paper */
  --line:   #e6e4dd;
  --line-2: #d9d6cd;

  --body:  #454b63;   /* 7.96:1 on paper */
  --mut:   #63697f;   /* 5.03:1 on paper, 4.64:1 on wash -- safe for body copy */
  --faint: #a7aabb;   /* rules and disabled marks only, never text */

  /* ── accent ─────────────────────────────────────────────────────────── */
  --accent:  #4350b8;  /* 6.31:1 on paper; white on it 6.82:1 */
  --peri:    #5566cf;  /* the brand periwinkle. 4.64:1 on paper -- large text and marks */
  --peri-2:  #8794e4;  /* gradient partner, and ink on dark. 5.22:1 on dark */
  --accent-soft: #ecedf9;

  /* status. Deliberately separate from the accent: these mean good/bad,
     they are never "another series colour". Soft tints re-mixed on cream so
     they read as a tint of the ground rather than a sticker on top of it. */
  --ok: #14671f;   --ok-soft: #e4eee2;
  --warn: #7d5800; --warn-soft: #f4ead2;
  --bad: #a92218;  --bad-soft: #f6e4e1;

  --dark:   #21263f;  /* the Instawork hero navy */
  --dark-2: #2a3050;
  --on-dark:     #dcdfec;  /* 11.18:1 on dark */
  --on-dark-mut: #a3a9c4;  /* 6.39:1 on dark */

  /* ── type scale ─────────────────────────────────────────────────────── */
  --t-xs:      12.5px;
  --t-sm:      14px;
  --t-base:    17px;
  --t-md:      clamp(17px, 1.4vw, 20px);
  --t-lg:      clamp(19px, 1.9vw, 25px);
  --t-xl:      clamp(24px, 2.6vw, 34px);
  --t-h2:      clamp(32px, 4.4vw, 54px);
  --t-display: clamp(46px, 8.4vw, 104px);

  /* ── spacing scale ──────────────────────────────────────────────────── */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 36px;
  --s-6: 56px;
  --s-7: clamp(40px, 4.4vw, 64px);
  --s-8: clamp(56px, 6vw, 88px);

  /* ── radii — four, not eight ────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 980px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(20px, 5vw, 48px);
  --rhythm: var(--s-8);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Georgia is on effectively every machine, so the accent never silently
     falls back to the sans and quietly loses the signature. */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
}

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

/* [hidden] is a UA rule at element specificity, so any class that sets display --
   .ws { display: grid } -- silently beats it and the element stays on screen. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px; line-height: 1.6;
  color: var(--body); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
/* No single word left alone on a last line. Cheaper and more reliable than tuning a
   max-width per paragraph, which only holds at the width it was tuned at. */
p, figcaption, dt { text-wrap: pretty; }
::selection { background: rgba(85, 102, 207, .18); }

.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;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: var(--r-sm); text-decoration: none; font-size: 15px;
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

/* ── layout ──────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--rhythm); }

/* ── type ────────────────────────────────────────────────────────────── */

.display {
  margin: 0; font-weight: 600; color: #fff;
  font-size: var(--t-display); line-height: .96; letter-spacing: -.036em;
}
.h2 {
  margin: 0; font-weight: 600; color: var(--ink);
  font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.021em;
  text-wrap: balance;
}
.h2--on-dark { color: #fff; }
.dim { color: var(--peri); }

/* ── the signature ───────────────────────────────────────────────────────
   Georgia italic on one word inside a sans headline. This is Instawork's own
   typographic move and it is the single most identifying thing on the page.

   Three rules keep it from becoming a serif-display cliché:
   one or two words, never a full line; only in headlines, never in body copy;
   and the optical size is pulled back 4% because Georgia runs large against
   this sans at the same nominal size, which otherwise reads as a mistake
   rather than a choice. Tracking returns to normal -- the tight display
   tracking is wrong for a serif italic and makes the letters collide. */
.display em, .h2 em {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: .96em; letter-spacing: -.005em;
}

.eyebrow {
  margin: 0 0 var(--s-3); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent; --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 15px; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:active { transform: scale(.975); }
.btn--primary { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: #38449e; }
.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--on-dark:hover { --btn-bg: var(--on-dark); }
.btn--lg { padding: 16px 32px; font-size: 16px; }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--full { width: 100%; }

/* ── nav ─────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 90;
  background: rgba(33, 38, 63, .55);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav { -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); }
}
/* over the hero photograph the bar is dark; past it, it inverts to paper */
.nav.is-stuck { background: rgba(247, 246, 242, .9); border-bottom-color: var(--line); }
.nav__in {
  max-width: 1180px; margin-inline: auto; padding-inline: var(--gut);
  height: 62px; display: flex; align-items: center; gap: 28px;
}
.nav__logo { display: flex; }

/* ── the wordmark ────────────────────────────────────────────────────────
   Inline SVG taking currentColor, so the nav switches it by setting a colour
   rather than by inverting pixels. The bar keeps the brand periwinkle on both
   grounds -- it is the one mark that should not change. */
.logo { height: 21px; width: auto; color: #fff; --logo-tag: #b4bacd; }
.logo__bar { fill: var(--peri); }
.logo__w {
  fill: currentColor; font-family: var(--font);
  font-size: 17px; font-weight: 700; letter-spacing: -.26px;
}
/* An explicit colour, not opacity on white. At .66 the attribution resolved to a
   mid grey that failed contrast at 11px, and opacity makes the actual rendered
   colour depend on whatever is behind it -- which on a translucent nav over a
   photograph is unknowable. Both values are measured against their own ground. */
.logo__t {
  fill: var(--logo-tag); font-family: var(--font);
  font-size: 11px; font-weight: 600; letter-spacing: .4px;
}
.nav.is-stuck .logo { color: var(--ink); --logo-tag: var(--mut); }
.foot .logo { height: 20px; color: #fff; --logo-tag: #b4bacd; }
.nav__links { margin-left: auto; display: flex; gap: 26px; }
.nav__links a {
  font-size: 14px; color: var(--on-dark); text-decoration: none;
  transition: color .2s var(--ease);
}
.nav.is-stuck .nav__links a { color: var(--body); }
.nav__links a:hover { color: #fff; }
.nav.is-stuck .nav__links a:hover { color: var(--ink); }
@media (max-width: 860px) { .nav__links { display: none; } .nav__in { gap: 16px; } .btn--sm { margin-left: auto; } }

/* ── 1 · hero — full bleed, no container ─────────────────────────────── */

.hero {
  /* Was min(92vh, 880px) with 110px of body padding, which left a band of empty shelf
     under the scroll link and another above the eyebrow -- the type sat in the middle of
     a much taller box. The photograph still gets room to read as a photograph; it just
     stops running past the point where it is saying anything. */
  position: relative; min-height: min(82vh, 720px);
  display: flex; align-items: flex-end; overflow: hidden;
  background: var(--dark); margin-top: -62px; padding-top: 62px;
}
.hero__media { position: absolute; inset: -6% 0; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero .det { position: absolute; }

/* Anchored to the bottom, not the left. A left scrim darkened exactly the part of the
   photograph the section exists to show -- the empty facings sit centre-left. Bottom-up
   keeps the shelf legible and still puts a measured ground under the type: at .93 over a
   worst-case white pixel the effective colour is ~#1B1F26, so white reads about 13.5:1. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(14,22,38,.72) 0%, rgba(14,22,38,.52) 30%,
                            rgba(14,22,38,.70) 68%, rgba(14,22,38,.88) 100%),
    linear-gradient(90deg, rgba(14,22,38,.78) 0%, rgba(14,22,38,.30) 62%, rgba(14,22,38,.10) 100%);
}
.hero__body { position: relative; width: 100%; padding-block: var(--s-7); }
.hero__eyebrow {
  /* It carries a sentence now, not a two-word label, so the tracking comes down from .22em
     and there is no max-width. At 30ch it broke into three stacked lines of tracked uppercase,
     which reads as a block of label sitting on top of the headline rather than a line
     introducing it -- and a ch measure is wrong here anyway, since 1ch ignores letter-spacing
     and under-counts a tracked line by about 20%. It sits on one line on a desktop and wraps
     naturally on a phone. */
  margin: 0 0 var(--s-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(12px, 1vw, 14px); font-weight: 600; line-height: 1.5;
  letter-spacing: .12em; text-transform: uppercase; color: #a9c3ef;
  text-wrap: balance;
}
.hero__sub {
  /* 34ch was measured for the old two-sentence line; the short one broke after "fix"
     and orphaned "it." on a line of its own. Wide enough to set on one line, with
     balance so it splits evenly rather than raggedly when it cannot. */
  margin: var(--s-5) 0 var(--s-6); max-width: 46ch; text-wrap: balance;
  font-size: var(--t-lg); line-height: 1.5; color: #e6ebf3; font-weight: 400;
}
.hero__scroll {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; color: #fff;
  text-decoration: none;
}
.hero__arrow {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.hero__arrow svg { width: 20px; height: 20px; }
.hero__scroll:hover .hero__arrow { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) { .hero__scroll:hover .hero__arrow { transform: none; } }
@media (max-width: 700px) {
  .hero { min-height: min(78vh, 580px); }  /* capped: a bare vh balloons in short-and-tall contexts */
  .hero__scrim { background: linear-gradient(180deg, rgba(33,38,63,.5) 0%, rgba(33,38,63,.86) 48%, rgba(33,38,63,.96) 100%); }
}

/* ── 2 · problem — asymmetric split, figures set as type ─────────────── */

.split__in {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--s-7); align-items: end;
}
.split__say { margin: 0 0 var(--s-1); font-size: var(--t-md); color: var(--body); max-width: 34ch; }
/* With the figures gone this section is a claim and one line, and the evidence beneath it
   is that claim's proof. A full section break between them read as two unrelated beats. */
.split { padding-bottom: var(--s-5); }
@media (max-width: 820px) { .split__in { grid-template-columns: 1fr; gap: var(--s-4); } }


/* ── the evidence frame — one of three surviving containers ──────────── */

.frame { border-radius: var(--r-md); overflow: hidden; background: #000; }
.frame__stage { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.frame__stage--wide { aspect-ratio: 16 / 10; }
.frame__stage--sq { aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; }
.frame__stage img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.frame:hover .frame__stage img { transform: scale(1.03); }

.det { position: absolute; border-radius: 2px; pointer-events: none; }
/* Start hidden only when scripting is on -- with JS off there is nothing to reveal them,
   and a permanently invisible measurement is worse than an unanimated one. */
.js .det { opacity: 0; transform: scale(.965); transform-origin: 50% 50%;
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .det.is-found { opacity: 1; transform: none; }
/* the toggle wins over the reveal, whatever order they happen in */
.frame__stage.is-bare .det { opacity: 0 !important; transition-delay: 0ms !important; }

.evi__cap { margin-top: var(--s-3); }
.evi__bare {
  font: inherit; font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  color: var(--body); background: none; padding: 7px 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.evi__bare:hover { color: var(--ink); border-color: var(--mut); background: var(--surface); }
.evi__bare[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* the nav marks where you are */
.nav__links a[aria-current="true"] { color: #fff; }
.nav.is-stuck .nav__links a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.det__tag {
  position: absolute; left: -1.5px; top: -17px;
  padding: 2px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  border-radius: 2px 2px 0 0; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.det__tag--below { top: auto; bottom: -17px; border-radius: 0 0 2px 2px; }
.det__tag--right { left: auto; right: -1.5px; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.dot--bad { background: var(--bad); }
.dot--warn { background: var(--warn); }
.dot--ok { background: var(--ok); }

/* ── 3 · evidence — claim hard against proof ─────────────────────────── */

.evi__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); align-items: center; }
.evi__read .h2 { margin-bottom: var(--s-5); }
.read { list-style: none; margin: 0; padding: 0; }
.read li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-top: 1px solid var(--line);
  font-size: var(--t-base); color: var(--ink);
}
.read li:last-child { border-bottom: 1px solid var(--line); }
.read b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--mut); font-weight: 600; font-size: var(--t-sm); }
@media (max-width: 900px) { .evi__in { grid-template-columns: 1fr; } }

/* Two, not three, and deliberately unequal -- the third tile showed the same
   photograph as the verified result further down the page. An even three-across
   here would also have been the third identical grid on one page. */
/* Unequal columns need inverse aspect ratios or the two images come out at
   different heights and the captions land on different lines -- which reads as a
   bug, not as a composition. height = width / aspect, so at 1.3fr : 1fr the wide
   tile takes aspect 1.3 and the narrow one 1, and both resolve to the same
   height. The two numbers must stay in step; changing one alone breaks it. */
.trio {
  margin-top: var(--s-5);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-4);
  align-items: start;
}
.trio__i { margin: 0; }
/* 1.3 here must match the 1.3fr above. fr is not permitted inside calc(), so this
   cannot be derived from a shared custom property -- the pair is kept by hand. */
.trio__i:first-child .frame__stage { aspect-ratio: 1.3 / 1; }
.trio__i figcaption { margin-top: var(--s-3); font-size: 15px; font-weight: 500; color: var(--ink); }
@media (max-width: 820px) {
  .trio { grid-template-columns: 1fr; gap: var(--s-5); }
  .trio__i:first-child .frame__stage { aspect-ratio: 1 / 1; }
}

/* ── 4 · the product — a step deeper than the page ground ─────────────── */

.eyes { background: var(--wash); padding-block: var(--rhythm); }
/* One column. It was a two-part head, headline beside a sentence describing the demo
   directly below it; with the sentence gone the second column has nothing to hold. */
.eyes__head { margin-bottom: var(--s-5); }

/* ── status pills ────────────────────────────────────────────────────
   The measurement badges inside the evidence list. Everything else that used
   to live here -- the workspace grid, its chart, its table, its action rows --
   styled a block that was `hidden`, and is gone with it. */

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pill--ok   { background: var(--ok-soft);   color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--bad  { background: var(--bad-soft);  color: var(--bad); }

.read li { flex-wrap: wrap; }
.read .pill { margin-left: auto; }

/* ── 5 · query — the widest, quietest section ────────────────────────── */

.ask .h2 { margin-bottom: var(--s-5); }
.ask__form { position: relative; display: flex; align-items: center; max-width: 720px; }
.ask__form input {
  width: 100%; padding: 18px 60px 18px 0;
  border: 0; border-bottom: 2px solid var(--ink); background: transparent;
  font: inherit; font-size: clamp(18px, 2vw, 24px); color: var(--ink);
}
.ask__form input::placeholder { color: var(--faint); }
.ask__form input:focus { outline: none; border-bottom-color: var(--accent); }
.ask__go {
  position: absolute; right: 0; width: 40px; height: 40px;
  border: 0; background: none; color: var(--mut); cursor: pointer; font-size: 18px;
  transition: color .2s var(--ease);
}
.ask__go:hover { color: var(--accent); }
.ask__chips { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); }
.ask__chips button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 15px; color: var(--mut); text-align: left;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ask__chips button:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.ask__chips button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.ask__out:not(:empty) { margin-top: var(--s-5); max-width: 780px; }
.ask__ans { margin: 0 0 20px; font-size: clamp(18px, 1.8vw, 22px); color: var(--ink); line-height: 1.45; }
.ask__out table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ask__out th {
  /* was 10.5px. Functional text under 11px fails on small viewports no matter how
     quiet it is meant to look; a letterspaced micro-label is still text. */
  padding: 9px 0; text-align: left; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mut);
  border-bottom: 1px solid var(--line-2);
}
.ask__out td { padding: 11px 0; border-bottom: 1px solid var(--line); }
.ask__out th + th, .ask__out td + td { text-align: right; }
.ask__src { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: var(--mut); }

/* ── 6 · hands — the payoff, on dark ─────────────────────────────────── */

.hands { background: var(--dark); padding-block: var(--rhythm); }
.hands__head { margin-bottom: var(--s-5); }

.brief { border-radius: 16px; overflow: hidden; background: var(--dark-2); }
.brief__rail { display: grid; grid-template-columns: repeat(3, 1fr); }
.brief__rail button {
  padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 14.5px; color: var(--on-dark-mut);
  border-bottom: 2px solid rgba(255,255,255,.08);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.brief__rail button:hover { color: var(--on-dark); }
.brief__rail button[aria-selected="true"] { color: #fff; border-bottom-color: var(--peri-2); }
.brief__n {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--on-dark-mut); margin-bottom: 6px;
}
.brief__rail button[aria-selected="true"] .brief__n { color: var(--peri-2); }

.brief__panel { padding: var(--s-5); animation: fade .34s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.brief__t { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600;
            letter-spacing: -.018em; color: #fff; }
.brief__d { margin: var(--s-2) 0 0; color: var(--on-dark-mut); font-size: var(--t-base); max-width: 46ch; }
.brief__s { margin: var(--s-4) 0 0; display: flex; align-items: center; gap: 10px;
            font-size: 13px; color: var(--on-dark); }
@media (max-width: 640px) {
  .brief__rail { grid-template-columns: 1fr; }
  .brief__rail button { border-bottom-width: 1px; }
}

/* ── 7 · verified result ─────────────────────────────────────────────── */

.res__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-7); align-items: center; }
.res__say { margin: var(--s-4) 0 0; font-size: var(--t-base); color: var(--body); max-width: 36ch; }
.res__bar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); background: #16341d; color: #c6dccb; font-size: var(--t-sm);
}
.res__bar-r { margin-left: auto; color: #9dbca5; }
@media (max-width: 900px) { .res__in { grid-template-columns: 1fr; } }

/* ── 8 · index setup — typographic, no cards, no chips ───────────────── */

.setup .h2 { margin-bottom: var(--s-5); }
.picker { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); }
.picker button {
  border: 0; background: none; padding: 0 0 8px; cursor: pointer;
  font-size: clamp(19px, 2.2vw, 26px); font-weight: 500; letter-spacing: -.01em;
  color: var(--mut); border-bottom: 2px solid transparent;
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.picker button:hover { color: var(--body); }
.picker button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.picker__note { margin: var(--s-4) 0 0; font-size: 15px; color: var(--mut); }

.setup__rows { margin-top: var(--s-5); border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.row__k { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.row__opts { display: flex; flex-wrap: wrap; gap: 22px; }
.row__opts button {
  border: 0; background: none; padding: 0 0 4px; cursor: pointer;
  font-size: 16px; color: var(--mut); border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.row__opts button:hover { color: var(--ink); }
.row__opts button[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.setup__out { margin: var(--s-4) 0 0; font-size: 16px; color: var(--mut); }
.setup__out b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; gap: 10px; } }

/* ── pricing + closing — quiet ───────────────────────────────────────── */

/* Centred against each other, not top-aligned. Top-aligned, the list's rule floated
   above the headline's cap height and the two blocks -- one tall, one short -- drifted
   apart down the column, leaving the whole section bottom-heavy with empty space. */
.price__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-7); align-items: center; }
.price__say { margin: var(--s-4) 0 0; font-size: var(--t-base); color: var(--body); max-width: 32ch; }

/* Compact. These were four rows on 15px of padding each with a rule between
   every one, which reads as a feature-comparison table the page never makes.
   One tick per line, tight, on a single hairline. */
.price__list { list-style: none; margin: 0; padding: 0; }
.price__list li {
  position: relative; padding: var(--s-2) 0 var(--s-2) var(--s-4);
  font-size: var(--t-base); color: var(--ink); line-height: 1.45;
}
.price__list li::before {
  content: "✓"; position: absolute; left: 0; top: var(--s-2);
  color: var(--peri); font-weight: 700; font-size: var(--t-sm);
}
@media (max-width: 820px) { .price__in { grid-template-columns: 1fr; gap: var(--s-5); } }

.closing { background: var(--dark); padding-block: var(--rhythm); text-align: center; }
.closing .btn { margin-top: var(--s-4); }

.foot {
  background: var(--dark); border-top: 1px solid rgba(255,255,255,.09);
  padding-block: var(--s-5);
}
.foot__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.foot p { margin: 0; font-size: var(--t-sm); color: var(--on-dark-mut); }

/* ── modal ───────────────────────────────────────────────────────────── */

.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(9, 12, 17, .58); }
@supports (backdrop-filter: blur(1px)) { .modal__scrim { backdrop-filter: blur(6px); } }
.modal__box {
  position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  background: var(--paper); border-radius: 18px; padding: clamp(26px, 4vw, 38px);
  box-shadow: 0 40px 90px -30px rgba(9, 12, 17, .5);
  animation: pop .34s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modal__x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--mut); cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.modal__x:hover { background: var(--wash); color: var(--ink); }
.modal__x svg { width: 19px; height: 19px; }
.modal__t { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.modal__s { margin: 0 0 26px; font-size: 15px; color: var(--mut); }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .modal__grid { grid-template-columns: 1fr; } }
.field { display: block; margin-bottom: 12px; }
.field input {
  width: 100%; padding: 13px 15px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 8px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder { color: var(--mut); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input:user-invalid { border-color: var(--bad); }
.modal__err {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
  background: var(--bad-soft); color: var(--bad); font-size: 14px; font-weight: 500;
}
#modalDone { text-align: center; padding-block: 28px; }
#modalDone .modal__s { margin-bottom: 28px; }

/* ── reveal ──────────────────────────────────────────────────────────── */

.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js .det { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .frame:hover .frame__stage img { transform: none; }
  .btn:active { transform: none; }
  .hero__media { transform: none !important; }
}

/* ── the product demo, embedded ──────────────────────────────────────────
   The mockup is a fixed desktop layout, so it is shown at its natural width and
   scaled down to fit rather than reflowed -- reflowing someone else's fixed
   layout is how you get a broken version of a working thing.

   The mockup is a LIGHT app, which is why the section around it is the cream
   wash rather than the dark ground: a dark frame around a light product misreads
   as a product that does not exist. Hands is the page's one dark moment, so it
   lands on the payoff rather than on the dashboard. */
.demo {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); box-shadow: 0 1px 3px rgba(30,33,56,.06);
}
/* Tall enough for the whole first tab, and no taller. At 760px it cut through the middle
   of the availability chart, which reads as a broken embed rather than a panel you can
   scroll -- and the demo is the thing being sold. Re-measured at 1180px wide after the
   mockup's own padding was tightened: content ends at 1971px, so 1995 clears it without
   leaving a band of empty panel underneath. Re-measure if the mockup changes; a guess
   here shows either a cut chart or a strip of blank card. */
/* A starting height only. The demo measures itself and posts its height on every render,
   and script.js sizes the frame to match -- so the overview screen (~1,000px) and a store
   with its photograph (~2,000px) each fit exactly, with no clipping and no empty card.
   A single fixed height cannot do both. */
.demo iframe { width: 100%; height: 1000px; border: 0; display: block; }

/* ── vertical rhythm ─────────────────────────────────────────────────────
   --rhythm was padding on BOTH sides of every section, so two neighbours on the
   same cream ground contributed two full gaps -- up to ~296px of empty page
   between pricing and the closing panel, with no edge anywhere in it to justify
   the space. That is the "spacing needs to be fixed" complaint.

   So: sections that sit on the page ground get one step less (--s-7), and the
   full --s-8 is spent only where the ground actually changes -- into the product
   wash, into the dark panels. There the space is separating two surfaces and is
   doing visible work.

   Declared after .section so it wins on order at equal specificity; both are
   single class selectors. */
.section { padding-block: var(--s-7); }
.eyes, .hands, .closing { padding-block: var(--s-8); }