/*
 * Collab marketing site — shared stylesheet.
 *
 * Built against Projects/Collab/design/DESIGN-SYSTEM.md and the approved social creative.
 *
 * THE STAGING RULE, which is the whole look: the page ground is PURE BLACK, while the product's own
 * ground is #0b0d10. That eleven-point difference is what makes a screenshot read as a lit surface
 * sitting in a dark room rather than a rectangle pasted on a background. Apple and Samsung both do
 * exactly this — verified off their live pages — and neither uses a gradient wash to do it.
 *
 * Sections are separated by DARKNESS, not rules. Light comes from radial pools, never from a
 * linear gradient across the viewport.
 *
 * No webfont. The product ships none (it has to render in an Android WebView) and its personality
 * lives in weight and tracking instead: display type is 200–250, tightly tracked, leading near 1.0.
 * Linking a font CDN would also fail the CSP on a published artifact and fall back silently.
 */

:root{
  --void:#000;
  --bg:#0b0d10; --panel:#14181d; --panel-2:#1a1f26; --line:#232a32;
  --ink:#e6e9ee; --muted:#8b95a3; --accent:#5ecfd6;
  --ok:#9ece6a; --bad:#f7768e; --warn:#e0af68;
  --sweep:linear-gradient(135deg,#4ccefc 0%,#024fe3 55%,#a04cfb 100%);
  /* Lightness-floored for knockout type. The identity sweep dips to 44% and loses letters on black. */
  --sweep-text:linear-gradient(100deg,#7ee0ff 0%,#8ab6ff 48%,#c79bff 100%);
  --sans:ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:62ch;
  color-scheme:dark;
}

*{box-sizing:border-box}
/* `hidden` must win over any component display rule: .form is display:grid, which outranks the
   UA stylesheet's [hidden]{display:none}, so a submitted form stayed on screen saying "Sending…". */
[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; background:var(--void); color:var(--ink);
  font:17px/1.6 var(--sans); overflow-x:hidden}

/* ── the persistent bar (Samsung's pattern) ───────────────────────────────── */
.bar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:.9rem;
  padding:.7rem clamp(1rem,4vw,2.5rem); background:rgba(0,0,0,.8);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line); flex-wrap:wrap}
.bar a.home{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink)}
.bar img{width:26px; height:26px; border-radius:24%; display:block}
.bar .wm{font-weight:600; letter-spacing:-.015em}
.bar nav{display:flex; gap:1.1rem; margin-left:.8rem; flex-wrap:wrap}
.bar nav a{font-size:.88rem; color:var(--muted); text-decoration:none}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--ink)}
.bar .sp{flex:1; min-width:0}
.bar .cta{font:600 .85rem/1 var(--sans); background:var(--accent); color:#06212a;
  border-radius:999px; padding:.65rem 1.1rem; text-decoration:none; white-space:nowrap}
.bar .cta:hover{filter:brightness(1.08)}

/* ── (8) MOBILE NAV ───────────────────────────────────────────────────────────
 *
 * At 390px the bar wrapped onto three rows — wordmark, then four links, then a full-width button —
 * putting roughly 270px of chrome above any content, with the bar's CTA duplicating the hero's
 * directly beneath it.
 *
 * `<details>` rather than a script: it opens and closes with no JS, is a disclosure widget to a
 * screen reader without any ARIA, and cannot get stuck open if something else on the page throws.
 */
.menu{display:none}
.menu > summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:.45rem; font:600 .85rem/1 var(--sans); color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:.6rem .9rem}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary .bars{display:inline-flex; flex-direction:column; gap:3px}
.menu > summary .bars i{display:block; width:14px; height:1.5px; background:currentColor;
  border-radius:2px}
.menu[open] > summary{border-color:var(--muted)}
.menu .sheet{position:absolute; left:0; right:0; top:100%;
  background:rgba(0,0,0,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding:.6rem clamp(1rem,4vw,2.5rem) 1.1rem;
  display:flex; flex-direction:column}
.menu .sheet a{padding:.85rem 0; color:#c3ccd8; text-decoration:none; font-size:1rem;
  border-bottom:1px solid var(--line)}
.menu .sheet a:last-child{border-bottom:0}

@media(max-width:830px){
  .bar{position:relative}
  .bar nav{display:none}
  .bar .cta{display:none}      /* the hero's CTA is directly below; two is noise */
  .menu{display:block; margin-left:auto}
}

.wrap{max-width:1120px; margin-inline:auto; padding-inline:clamp(1.25rem,5vw,3rem)}
section{padding-block:clamp(4.5rem,12vw,9rem)}
.narrow{max-width:760px}

/* ── (1) ALTERNATING GROUND ───────────────────────────────────────────────────
 *
 * The single biggest structural difference between this page and the reference. Apple's product
 * pages alternate near-black with #f5f5f7, and that alternation IS the rhythm — it is what lets ten
 * thousand pixels of scroll read as a sequence of moments rather than one enormous section. v1 was
 * monotone black end to end.
 *
 * Which sections flip is not arbitrary: PRODUCT MOMENTS STAY BLACK, because a lit screenshot needs
 * a dark room, and EXPLANATORY sections go light. That is the same logic the reference uses, and it
 * means the light bands always carry type rather than imagery.
 *
 * Implemented by REDEFINING TOKENS on the section rather than restyling components. Every component
 * already draws from --bg/--panel/--line/--ink/--muted, so they invert correctly without a single
 * component-level override — and anything added later inherits the behaviour for free.
 */
.light{
  --bg:#f5f5f7; --panel:#ffffff; --panel-2:#ebebef; --line:#d6d6dc;
  --ink:#1d1d1f; --muted:#6e6e73;
  /* The cyan that carries on black is 2.1:1 on #f5f5f7 — unreadable. This is the same hue pushed
     down in lightness until it clears AA against the light ground. */
  --accent:#0a7d87;
  background:#f5f5f7; color:#1d1d1f;
}
/* A light band on a section that also carries `.wrap` — the sub-pages put the width constraint on
   the section itself, so a plain background would stop at 1120px and read as a floating card. The
   pseudo-element breaks out to full viewport width without restructuring the markup. */
section.wrap.light{position:relative; background:none; isolation:isolate}
section.wrap.light::before{
  content:""; position:absolute; inset:0; z-index:-1;
  left:50%; transform:translateX(-50%); width:100vw; background:#f5f5f7;
}
.light p,.light ul.ticks li{color:#3a3a3e}
.light .cell p,.light .note,.light .cap{color:#5c5c62}
.light .btn.ghost{color:#1d1d1f}
.light .btn.ghost:hover{border-color:#8a8a90}
/* The knockout gradient is tuned for a dark ground and turns to pale mush on a light one. */
.light .grad{background:none; -webkit-background-clip:border-box; background-clip:border-box;
  color:var(--accent)}

/* ── type ─────────────────────────────────────────────────────────────────── */
.eyebrow{font:500 .72rem/1 var(--mono); text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent); margin:0 0 1.4rem}
.eyebrow .n{color:var(--muted)}
h1{font-size:clamp(2.6rem,7.5vw,5.2rem); font-weight:200; letter-spacing:-.035em;
  line-height:1.02; margin:0; text-wrap:balance}
h2{font-size:clamp(2rem,5.2vw,3.5rem); font-weight:200; letter-spacing:-.03em;
  line-height:1.06; margin:0 0 1.4rem; text-wrap:balance}
h3{font-size:1.15rem; font-weight:600; letter-spacing:-.01em; margin:0 0 .5rem}
p{margin:0 0 1.1rem; max-width:var(--measure); color:#c3ccd8}
p.lead{font-size:1.22rem; font-weight:300; color:var(--ink)}
p:last-child{margin-bottom:0}
strong{font-weight:600; color:var(--ink)}
em{font-style:normal; color:var(--accent)}
code{font-family:var(--mono); font-size:.86em; color:var(--accent)}
a{color:var(--accent)}
.grad{background:var(--sweep-text); -webkit-background-clip:text; background-clip:text;
  color:transparent}
.center{text-align:center; margin-inline:auto}
.center p{margin-inline:auto}
.note{font-size:.93rem; color:var(--muted); max-width:var(--measure)}
.stack{display:flex; flex-direction:column; gap:1.1rem}

/* ── pills & buttons ──────────────────────────────────────────────────────── */
.pill{display:inline-block; font:500 .68rem/1 var(--mono); text-transform:uppercase;
  letter-spacing:.11em; color:var(--accent); border:1px solid var(--line);
  border-radius:999px; padding:.5rem .8rem}
.pill.dim{color:var(--muted)}
.pills{display:flex; flex-wrap:wrap; gap:.5rem}
.btn{display:inline-block; font:600 .95rem/1 var(--sans); border-radius:999px;
  padding:.9rem 1.5rem; text-decoration:none; background:var(--accent); color:#06212a;
  border:1px solid transparent}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn.ghost:hover{border-color:var(--muted); filter:none}
.btns{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:2rem}

/* ── (2) THE HERO CARRIES THE PRODUCT ────────────────────────────────────────
 *
 * v1's first viewport was a headline, two buttons and four pills — the most persuasive asset on the
 * page sat below the fold. The reference always opens on the thing itself.
 *
 * The shot BLEEDS OFF the right edge rather than sitting in a box. A product page shows you a
 * fragment of something larger; a press kit shows you the whole rectangle with a margin around it.
 * Below 980px it stacks and stops bleeding, because a cropped screenshot on a phone is just a
 * cropped screenshot.
 */
.hero-sec{position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,8vw,6rem)}
.hero-grid{display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center;
  grid-template-columns:minmax(0,1fr)}
.hero-vis{position:relative}
.hero-vis img{position:relative; z-index:1; display:block; width:100%; height:auto;
  border-radius:14px; border:1px solid rgba(230,233,238,.10);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95), 0 8px 24px -8px rgba(0,0,0,.8)}
.hero-vis .spill{position:absolute; inset:4% 4% -8% 4%; z-index:0; pointer-events:none;
  background-image:var(--img); background-size:cover; background-position:center;
  filter:blur(64px) saturate(1.5); opacity:.6; border-radius:40px}
@media(min-width:980px){
  .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:clamp(2rem,4vw,3.5rem)}
  /* the bleed: wider than its column, running past the viewport edge */
  .hero-vis{margin-right:calc(50% - 52vw); min-width:0}
  .hero-vis img{width:calc(100% + 0px)}
}

/* ── the lit stage ────────────────────────────────────────────────────────── */
.stage{position:relative; padding-block:clamp(2.5rem,6vw,4.5rem)}

/* (4) MOTIVATED LIGHT — the glow comes FROM the screen, not from a lamp behind the picture.
 *
 * v1 put an identical radial blob behind every shot and changed only its hue. That is a backdrop,
 * not a light source, and it is why the "spotlight" read as flat: real light has a direction, a
 * falloff and a colour taken from whatever is emitting it.
 *
 * `.spill` is a blurred, over-scaled copy of the screenshot itself sitting behind the screenshot —
 * the ambilight technique. The colour of the glow is therefore literally the colour of the pixels
 * above it, so a shot with a warm photograph in its header throws warm light and a dark reader
 * throws almost none. Nothing to tune per section and impossible to get wrong.
 *
 * The image is passed in as --img on the element, because a stylesheet cannot know which shot it is.
 */
.stage::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 50% at 50% 38%,rgba(94,207,214,.10),transparent 72%)}
.stage.b::before{background:radial-gradient(70% 50% at 50% 38%,rgba(2,79,227,.15),transparent 72%)}
.stage.v::before{background:radial-gradient(70% 50% at 50% 38%,rgba(160,76,251,.12),transparent 72%)}

.shot{position:relative; z-index:1; margin-inline:auto; max-width:1020px}
.shot .spill{
  position:absolute; inset:6% 2% -6% 2%; z-index:0; pointer-events:none;
  background-image:var(--img); background-size:cover; background-position:center;
  filter:blur(58px) saturate(1.5); opacity:.55; transform:scale(1.06);
  border-radius:40px;
}
@media(prefers-reduced-motion:no-preference){.shot .spill{will-change:transform}}
.shot img{position:relative; z-index:1; display:block; width:100%; height:auto;
  border-radius:14px; border:1px solid rgba(230,233,238,.10);
  /* Two shadows: a long soft drop that sits the object in the room, and a tight dark one right
     under the edge that keeps it from floating. One shadow always looks like a sticker. */
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95), 0 8px 24px -8px rgba(0,0,0,.8)}

/* (3) DETAIL CROPS — magnify the moment instead of showing the whole window.
 *
 * The reference almost never shows a full application window; it crops hard into the one thing the
 * section is about. Our most important moment — a highlight resolving EXACT — was rendering about
 * eleven pixels tall inside a 1020px screenshot, which is an illustration of a screenshot rather
 * than evidence.
 *
 * Done in CSS rather than by cutting new files so the crop stays tied to the source image: when the
 * screenshot is re-shot, the crop follows it instead of silently going stale.
 */
.detail{position:relative; z-index:1; margin-inline:auto; max-width:900px;
  border-radius:14px; overflow:hidden; border:1px solid rgba(230,233,238,.10);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95), 0 8px 24px -8px rgba(0,0,0,.8)}
.detail img{display:block; width:var(--zoom,230%); max-width:none; height:auto;
  margin-left:var(--x,-10%); margin-top:var(--y,-26%); margin-bottom:var(--b,-34%)}
.light .detail,.light .shot img{border-color:rgba(29,31,33,.12)}
.light .shot img,.light .detail{box-shadow:0 40px 90px -40px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.18)}
.light .shot .spill{opacity:.28}

/* (5) SPACING DYNAMICS — sections are not all the same height.
 *
 * v1 used one padding value everywhere, which is metronomic: every beat the same length. The
 * reference varies section height hard — a tight run of related points, then a large pause before
 * something that needs room. These are the two ends plus the default.
 */
section.tight{padding-block:clamp(2.5rem,6vw,4rem)}
section.tall{padding-block:clamp(7rem,18vw,14rem)}
.cap{margin:1.4rem auto 0; max-width:60ch; text-align:center; font-size:.92rem; color:var(--muted)}
.cap b{color:var(--ink); font-weight:600}

/* ── (9) MOBILE ART DIRECTION ─────────────────────────────────────────────────
 *
 * A 1464px-wide application window scaled to 350px is decorative noise: its type renders around
 * three pixels tall. The reference does not shrink the desktop image on a phone, it ships a
 * different crop.
 *
 * `.only-wide` / `.only-narrow` swap the asset at the breakpoint — a phone shot or a detail crop
 * takes over from the full window. This is the honest version of "responsive images": the two are
 * different pictures of the same thing, not one picture at two sizes.
 */
/* `!important` deliberately, and it is the right tool here.
 *
 * These two classes exist ONLY to override whatever display a component set — and components do set
 * it: `.hero-vis img{display:block}` is specificity (0,0,1,1) and beats a bare `.only-wide`
 * (0,0,1,0), so the first version of this rendered BOTH images at every width. Climbing the
 * specificity ladder to win that race would mean re-winning it against every component added later.
 * A utility whose entire job is to override says so.
 */
.only-narrow{display:none !important}
/* A phone screenshot standing in for a desktop one needs a phone's proportions, not the column's. */
.phone-art{max-width:270px; margin-inline:auto; border-radius:26px !important}
@media(max-width:700px){
  .only-wide{display:none !important}
  .only-narrow{display:block !important}
  /* Where no narrow alternative exists, crop into the image instead of shrinking it. */
  .shot.crop-narrow img{aspect-ratio:3/4; object-fit:cover; object-position:left top}
}

/* phone frame */
.phones{position:relative; z-index:1; display:flex; gap:clamp(1rem,4vw,2.5rem);
  justify-content:center; align-items:flex-start; flex-wrap:wrap}
.phone{width:min(268px,72vw); border-radius:30px; overflow:hidden;
  border:1px solid rgba(230,233,238,.14); background:#000;
  box-shadow:0 50px 100px -35px rgba(0,0,0,.95), 0 0 80px -28px rgba(94,207,214,.22)}
.phone img{display:block; width:100%; height:auto}

/* ── cards / bento ───────────────────────────────────────────────────────── */
.grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; margin-top:2.5rem}
.grid.two{grid-template-columns:1fr}
.grid.three{grid-template-columns:1fr}
@media(min-width:760px){
  .grid.two{grid-template-columns:1fr 1fr}
  .grid.three{grid-template-columns:repeat(3,1fr)}
}
.cell{background:var(--bg); padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.6rem}
.cell .lab{font:500 .68rem/1 var(--mono); text-transform:uppercase; letter-spacing:.11em;
  color:var(--accent)}
.cell .big{font:200 2.6rem/1 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.cell p{font-size:.95rem; color:var(--muted); margin:0; max-width:none}

/* ── the round trip diagram ──────────────────────────────────────────────── */
.trip{display:grid; gap:1rem; margin-top:2.5rem; align-items:stretch;
  grid-template-columns:1fr}
@media(min-width:860px){.trip{grid-template-columns:1fr auto 1fr}}
.trip .side{border:1px solid var(--line); border-radius:14px; background:var(--bg);
  padding:1.6rem 1.5rem}
.trip .side h3{margin-bottom:.8rem}
.trip .side p{font-size:.95rem; color:var(--muted); margin:0}
.trip .mid{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:1rem; min-width:150px}
.trip .mid .arrow{font:1.4rem/1 var(--mono); color:var(--accent)}
.trip .mid .lab{font:500 .64rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); text-align:center}

/* ── table ───────────────────────────────────────────────────────────────── */
.tw{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--bg);
  margin-top:2.5rem}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:.94rem}
th,td{text-align:left; padding:.9rem 1.1rem; border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{font:600 .7rem/1 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); background:var(--panel-2); white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.y{color:var(--ok); font-weight:600}
td.n{color:var(--muted)}

/* ── forms ───────────────────────────────────────────────────────────────── */
.form{display:grid; gap:1.3rem; max-width:620px; margin-top:2.5rem}
.field{display:grid; gap:.5rem}
.field label{font:600 .82rem/1.4 var(--sans)}
.field .hint{font:.8rem/1.45 var(--sans); color:var(--muted)}
.field input,.field textarea,.field select{
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:.85rem .9rem; font:16px/1.5 var(--sans); width:100%}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
fieldset{border:1px solid var(--line); border-radius:12px; padding:1.2rem 1.3rem; margin:0}
legend{font:600 .82rem/1 var(--sans); padding:0 .4rem}
.choices{display:grid; gap:.7rem; margin-top:.9rem}
.choice{display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:#c3ccd8}
.choice input{width:auto; margin-top:.25rem; accent-color:var(--accent)}

/* ── callouts ────────────────────────────────────────────────────────────── */
.callout{border:1px solid var(--line); border-radius:14px; background:var(--bg);
  padding:1.5rem 1.5rem; margin-top:2rem}
.callout.warn{border-color:rgba(224,175,104,.35); background:rgba(224,175,104,.05)}
.callout .t{font:600 .68rem/1 var(--mono); text-transform:uppercase; letter-spacing:.11em;
  color:var(--accent); margin-bottom:.9rem}
.callout.warn .t{color:var(--warn)}
.callout p{font-size:.96rem}

ul.ticks{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.8rem}
/* Hanging dash by position, NOT by grid. A grid li makes a cell out of every child — the
   <strong>, the text node after it and any inline link each land in their own column, which
   shatters the sentence across rows. Only the marker needs placing, so only the marker is placed. */
ul.ticks li{position:relative; padding-left:1.6rem;
  font-size:.98rem; color:#c3ccd8}
ul.ticks li::before{content:"—"; position:absolute; left:0; top:0;
  color:var(--accent); font-family:var(--mono)}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); padding-block:3.5rem 5rem; margin-top:3rem}
footer .cols{display:grid; gap:2rem; grid-template-columns:1fr}
@media(min-width:760px){footer .cols{grid-template-columns:2fr 1fr 1fr}}
footer h4{font:600 .7rem/1 var(--mono); text-transform:uppercase; letter-spacing:.11em;
  color:var(--muted); margin:0 0 1rem}
footer a{display:block; color:#c3ccd8; text-decoration:none; font-size:.93rem;
  margin-bottom:.6rem}
footer a:hover{color:var(--ink)}
footer .fine{font:.8rem/1.7 var(--mono); color:var(--muted); margin-top:2.5rem;
  max-width:80ch}

/* ── reveal ──────────────────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s ease}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

/*
 * A SCROLL REVEAL MUST NOT BE ABLE TO HIDE THE PAGE.
 *
 * `.rv` starts at opacity 0 and is only revealed by script. Three situations have no script, or no
 * scrolling, and in every one of them the default would leave a blank page:
 *
 *   print / PDF export — the capture happens before or without the observer, and an 800ms fade is
 *                        long enough that a render can catch the page mid-transition. That is not
 *                        hypothetical; it happened on the first screenshot of this build.
 *   no JS             — the whole page would be invisible for the sake of an animation.
 *
 * Content visible is the correct default; the animation is the enhancement.
 */
@media print{
  /* Without this the PDF prints white — browsers drop background colour and images by default, and
     a dark-designed page exported that way is unreadable rather than merely different. */
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  .rv{opacity:1 !important; transform:none !important; transition:none !important}
  .bar{position:static; background:none; backdrop-filter:none}
  .stage::before{display:none}
  /* `body{background}` paints the FIRST printed page and nothing after it — Chrome takes the page
     canvas from the root element. Set both, or a multi-page export comes out dark on page one and
     white behind every page that follows, which is exactly what the first run produced. */
  html,body{background:#000 !important}
  @page{margin:12mm; size:A4}
}
@media (scripting: none){ .rv{opacity:1; transform:none} }
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* ── STRUCTURED INTENT (home v2, 2026-10-11) ─────────────────────────────────
 *
 * Components for the two-kinds-of-intent problem section and the intent-bus diagram. All colour
 * comes from the section tokens, so each one inverts correctly on a .light band without overrides.
 * The gap and the drift highlight use --bad, the product's own disagreement colour; on a light
 * band they get a darker label so the text clears AA.
 */
.intents{display:grid; gap:1rem; margin-top:2.8rem; grid-template-columns:1fr}
@media(min-width:900px){.intents{grid-template-columns:1fr minmax(200px,.8fr) 1fr; align-items:stretch}}
.stack-card{border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.9rem; min-width:0}
.stack-card .lab{font:500 .68rem/1 var(--mono); text-transform:uppercase; letter-spacing:.11em; color:var(--accent)}
.stack-card h3{font-size:1.5rem; font-weight:300; letter-spacing:-.02em; margin:0}
.stack-card p{font-size:.95rem; color:var(--muted); margin:0}
.chips{display:flex; flex-wrap:wrap; gap:.35rem}
.chips span{font:500 .72rem/1 var(--mono); border:1px solid var(--line); border-radius:6px;
  padding:.4rem .5rem; color:var(--ink); background:var(--bg)}
.gap{display:flex; flex-direction:column; justify-content:center; gap:.8rem; text-align:center;
  padding:1.4rem 1rem; border-radius:14px; border:1px dashed var(--bad); background:rgba(247,118,142,.06)}
.gap .lab{font:600 .68rem/1 var(--mono); text-transform:uppercase; letter-spacing:.11em; color:var(--bad)}
.light .gap .lab{color:#b3304b}
.gap p{font-size:.93rem; margin:0 auto; max-width:30ch}

.drift{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.5rem}
@media(min-width:760px){.drift{grid-template-columns:1fr 1fr}}
.docsnip{border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; min-width:0}
.docsnip .path{font:500 .7rem/1 var(--mono); color:var(--muted); padding:.7rem .9rem;
  border-bottom:1px solid var(--line); background:var(--panel-2); overflow-x:auto; white-space:nowrap}
.docsnip pre{margin:0; padding:.9rem; font:400 .8rem/1.6 var(--mono); color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere}
.docsnip mark{background:rgba(247,118,142,.18); color:inherit; border-bottom:2px solid var(--bad); padding:0 .1em}
.drift-cap{text-align:center; font-size:.9rem; margin:1rem auto 0}
.light p.drift-cap{color:#5c5c62}

.bus{margin-top:3rem; display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:900px){.bus{grid-template-columns:1fr 1.15fr 1fr; align-items:center}}
.bus .lane{display:flex; flex-direction:column; gap:.5rem; min-width:0}
.bus .lane h4{margin:0 0 .3rem; font:500 .68rem/1 var(--mono); text-transform:uppercase; letter-spacing:.11em; color:var(--muted)}
.bus .item{border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:.7rem .85rem;
  font-size:.9rem; display:flex; justify-content:space-between; gap:.6rem}
.bus .item small{font:500 .66rem/1.5 var(--mono); color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.bus .core{position:relative; border-radius:18px; padding:1.6rem 1.4rem; text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(2,79,227,.28),transparent 70%), var(--panel);
  border:1px solid #2b3a52}
.bus .core .name{font:200 2rem/1.1 var(--sans); letter-spacing:-.03em}
.bus .core .sub{font:500 .7rem/1.5 var(--mono); color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-top:.5rem}
.bus .core .rows{margin-top:1.2rem; display:grid; gap:.4rem; text-align:left}
.bus .core .rows div{font:400 .8rem/1.4 var(--mono); color:#c3ccd8; border-top:1px solid var(--line); padding-top:.45rem}
.bus .core .rows b{color:var(--accent); font-weight:500}
.bus .you{grid-column:1/-1; justify-self:center; text-align:center; border:1px solid var(--accent);
  border-radius:999px; padding:.7rem 1.3rem; font-size:.92rem; max-width:100%}
.bus .you b{color:var(--accent)}

.steps{display:grid; gap:1px; margin-top:3rem; background:var(--line); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; grid-template-columns:1fr}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps > div{background:var(--bg); padding:1.6rem 1.5rem; min-width:0}
.steps .n{font:200 2.4rem/1 var(--sans); color:var(--accent); letter-spacing:-.03em}
.steps h3{margin:.8rem 0 .5rem}
.steps p{font-size:.95rem; color:var(--muted); margin:0}
/* The v2 headline is three sentences, not one phrase; at the v1 size it ran seven lines deep. */
h1.long{font-size:clamp(2.4rem,5.4vw,4rem); line-height:1.04}

/* ── HERO, WIDE (2026-10-11) ───────────────────────────────────────────────────
 *
 * Paul: the hero was squeezed into the 1120px column, so the three-sentence headline broke on nearly
 * every word. On a wide screen it now leaves only a 10% left margin and runs to the edge, with the
 * screenshot still bleeding off the right. The text column gets the larger share. Below 980px the
 * stacked layout is unchanged.
 */
.hero-lead{margin-top:1.8rem; max-width:46ch}
@media(min-width:980px){
  .hero-sec .hero-grid{max-width:none; margin:0; padding-left:10vw; padding-right:0;
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .hero-sec .hero-vis{margin-right:-4vw}
  .hero-lead{max-width:60ch}
  h1.long{font-size:clamp(2.6rem,4.6vw,4.6rem)}
}
/* The bar is the wordmark alone now; the logo stays in the footer. */
.bar .wm{font-size:1.05rem}
@media(min-width:980px){
  /* The pill row belongs to the hero, so it shares the hero's 10% left edge. */
  .hero-pills{max-width:none; margin:0; padding-left:10vw}
}

/* ── RHYTHM (2026-10-11) ───────────────────────────────────────────────────────
 *
 * A text section followed by its screenshot stacked two paddings, the section's bottom and the
 * stage's top, which left ~300px of empty black between a heading and the image it introduces. The
 * pair now reads as one unit. `.tall` also came down; at 14rem it was a pause, not a breath.
 */
section:has(+ .stage){padding-bottom:clamp(1rem,2.5vw,2rem)}
section.tall{padding-block:clamp(5rem,11vw,8.5rem)}
section:has(+ .stage).tall{padding-bottom:clamp(1rem,2.5vw,2rem)}

.mid-cta{margin-top:3rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem; border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:1.4rem 1.6rem}
.mid-cta p{margin:0; font-size:1.05rem; color:var(--ink); max-width:46ch}
.mid-cta .btns{margin-top:0}
.stack-card h3{text-wrap:balance}

/* ── TOUR (how-it-works v2, 2026-10-11) ───────────────────────────────────────
 * Text beside its screenshot, alternating sides. Stacks below 980px, text first.
 */
.tour{display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; grid-template-columns:minmax(0,1fr)}
.tour-text{min-width:0}
.tour-text .ticks{margin-top:1.4rem}
.tour-vis{min-width:0; position:relative}
.tour-vis > img{display:block; width:100%; height:auto; border-radius:14px; border:1px solid rgba(230,233,238,.10);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.tour-vis .detail{max-width:none}
.phones-pair{display:flex; gap:1rem; justify-content:center}
.phones-pair .phone{max-width:240px}
@media(min-width:980px){
  .tour{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .tour.flip .tour-text{order:2}
  .tour.flip .tour-vis{order:1}
}