/* ============================================================================
   crowsnest.app — landing page

   Colour, radius, motion and the mark are lifted from the app
   (crowsnest/static/styles.css) so the site and the product read as one system.

   The TYPE scale deliberately is not. DESIGN_SYSTEM.md fixes body at 14px
   because the app is a data-dense instrument — density is an app affordance,
   earned by an operator who is already inside. A landing page is read once, by
   a stranger, at a glance. It gets its own `--l-*` scale so there is a real
   ladder (display → lede → body → meta) instead of a 65px headline sitting
   directly on top of 12px card copy.
   ========================================================================== */

:root {
  /* colour — light default (from the app's :root), unchanged */
  --bg: #f7f7f8; --panel: #ffffff; --border: #e3e3e6; --text: #1d1d1f;
  --brand-ground: #f5efe4;
  --muted: #6b6b70; --accent: #2563eb; --accent-fg: #fff; --green: #1f9d57; --red: #d64545;
  --user: #2b8a3e; --assistant: #5a4bd6; --ro-bg: #f0f0f2; --ro-fg: #4a4a4f;
  --warn-bg: #fff4e5; --warn-border: #ffb84d; --edited: #b06a00;
  --agent-claude: #d97757; --agent-codex: #1d1d1f;
  --syn-com: #6b6b74; --syn-str: #1f7a4d; --syn-num: #9a5600; --syn-kw: #6a4bd6; --syn-fn: #1d5fd0;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px -4px rgba(0,0,0,.1), 0 2px 6px -2px rgba(0,0,0,.06);
  --shadow-pop: 0 24px 60px -28px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.2);
  --shadow-hero: 0 40px 90px -40px rgba(0,0,0,.42), 0 16px 40px -24px rgba(0,0,0,.22);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Display serif. The reference loads a licensed serif over the network; this page
     makes no outbound calls, so the stack is entirely local — Iowan and Palatino ship
     on macOS/iOS, Book Antiqua and Georgia on Windows, and a generic `ui-serif` catches
     the rest. Every one of them is an old-style serif with a high-contrast italic axis,
     so the voice survives the substitution even though the exact face does not. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, ui-serif, serif;

  /* app scale — still used for chrome-like details (chips, tags, captions) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 56px;
  --radius-xs: 5px; --radius-sm: 7px; --radius-md: 8px; --radius-lg: 10px;
  --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 20px; --radius-pill: 999px;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* motion — 150-300ms band, slower and softer than the app's 120-140ms
     instrument feel, because here motion is presentation rather than response */
  --dur-fast: .15s; --dur: .22s; --dur-slow: .38s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ring: 2px solid var(--accent);

  /* landing type scale */
  --l-xs: .8125rem;    /* 13px — fine print, legal */
  --l-sm: .9063rem;    /* 14.5px — meta, captions, chips */
  --l-base: 1rem;      /* 16px — dense secondary copy */
  --l-body: 1.0625rem; /* 17px — body */
  --l-lg: 1.1875rem;   /* 19px — card lead, plan names */
  --lede: clamp(1.15rem, 1.55vw, 1.4rem);
  /* Two display sizes for the whole page, which is the reference's actual discipline:
     it has no h3/h4/h5 ladder at all — everything below the section heading is body
     text. The previous build had four display rungs, and a page with four heading
     sizes spends its hierarchy on distinctions a stranger never decodes. `--display-3`
     survives only as the plan price, which is a number rather than a heading. */
  --display-1: clamp(2.4rem, 4.6vw, 3.6rem);   /* ~59px at 1280 */
  --display-2: clamp(1.75rem, 3vw, 2.4rem);    /* ~38px at 1280 */
  --display-3: clamp(1.5rem, 2.4vw, 1.95rem);  /* plan price only */
  /* Tracking. The reference runs -2.97px on 54px (-5.5%) and -2.11px on 38.4px
     (-5.5%) — far tighter than a sans would tolerate, and the single biggest reason
     its serif reads as contemporary rather than editorial. Old-style serifs have the
     wide sidebearings that make this survivable. */
  --track-1: -.055em;
  --track-2: -.05em;

  /* Header geometry. The pill sits in normal flow, so its height and its floating
     gap are its own business again: it occupies the band it draws, nothing below it
     has to be pushed clear of it, and no anchor has to scroll past it. */
  --header-h: 68px;
  --header-gap: 12px;

  --w-page: 1160px;
  --w-prose: 720px;   /* centred section headings */
  --w-faq: 860px;     /* the reference deliberately narrows its FAQ */
  --w-copy: 620px;    /* copy cap inside a wide panel */

  /* Status "ink" variants. The raw status colours are calibrated for the app's
     chunkier controls; used as small uppercase labels on a white panel, --green
     lands at 3.5:1 and --edited at 4.3:1 — both under AA. Mixing toward --text
     darkens them enough to clear it. Fills and icons keep the raw colour; only
     text uses the ink. */
  --green-ink: color-mix(in srgb, var(--green) 76%, var(--text));
  --edited-ink: color-mix(in srgb, var(--edited) 76%, var(--text));
  --red-ink: color-mix(in srgb, var(--red) 76%, var(--text));

  /* The one tinted band on the page. The reference uses #EDF4FF — its page white
     pushed ~7% toward its accent blue — for exactly one section, the closing CTA.
     Derived from --accent so retuning the accent carries the band with it. */
  --wash: color-mix(in srgb, var(--accent) 8%, var(--bg));

  /* Button ring. The reference separates its primary CTA from a busy background with
     a 5px white spread ring plus a 2px white border rather than a drop shadow. White
     is not the point — the *page* colour is, so the ring is read from --bg and stays
     correct if the page ground is ever retuned. */
  --ring-fill: color-mix(in srgb, var(--bg) 58%, transparent);
  --ring-edge: color-mix(in srgb, var(--bg) 88%, transparent);
  --radius-btn: 18px;

  /* This page is light only, deliberately. The dark palette lived in two blocks —
     a `prefers-color-scheme` media query and a `[data-theme="dark"]` override —
     which had already drifted apart once: explicit-dark readers got white on
     light-blue at ~2.3:1 while OS-dark readers got the corrected ~6:1 on the same
     control. Declaring `light` here also stops the browser painting form controls,
     scrollbars and the canvas dark underneath a light page. */
  color-scheme: light;
}


* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 34%, transparent) transparent; }
/* Author display rules otherwise outrank the browser's hidden-state stylesheet. Interactive
   demo states depend on `hidden` being semantic as well as visual, so keep it absolute. */
[hidden] { display: none !important; }

/* Nothing overlays the top of the viewport any more, so an anchored section needs
   breathing room above it and nothing else. */
html { scroll-behavior: smooth; scroll-padding-top: 28px; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--l-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: `hidden` would make body a scroll container, which the
     overview rail sticks inside. This is only a backstop — nothing is meant to spill. */
  overflow-x: clip;
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* The display voice: an old-style serif at a *low* weight with very tight tracking.
   Weight matters — the previous build set headings at 700, and a bold serif reads as
   a newspaper masthead. The reference runs 400–500, which is where a serif stops
   shouting and starts sounding considered. Georgia has no 500, so it resolves to its
   regular; the faces that do have one get it. `font-synthesis-weight: none` stops a
   browser from faking the missing weight into a smeared faux-bold. */
h1, h2, .plan-price {
  font-family: var(--serif);
  font-weight: 500;
  font-synthesis-weight: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

:focus-visible { outline: var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); }

.wrap { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--space-6); }
.mono { font-family: var(--mono); font-size: .94em; }

.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .09em;
  font-size: var(--l-xs); font-weight: var(--weight-bold); color: var(--muted);
}

/* Shared icon sizing. Every icon on this page is an inline SVG rather than a
   text glyph, so it inherits currentColor, scales with the box, and never
   falls back to a platform emoji face. */
.i { width: 1em; height: 1em; flex: none; display: block; }

/* ---------- entrance motion ----------
   Initial hidden state is declared ONLY inside `no-preference`. If it lived in
   the base rules, a reduced-motion visitor — who gets `animation: none` — would
   be left staring at permanently invisible content. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; animation: rise .7s var(--ease-out) both; }
  .reveal[data-d="1"] { animation-delay: .06s; }
  .reveal[data-d="2"] { animation-delay: .12s; }
  .reveal[data-d="3"] { animation-delay: .19s; }
  .reveal[data-d="4"] { animation-delay: .26s; }
  .reveal[data-d="5"] { animation-delay: .34s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- header ----------
   A floating pill rather than a full-bleed bar. The bar treatment draws a hard line
   across the top of the page and permanently divides it in two; the pill sits *on*
   the page, so the hero reads as one uninterrupted surface with a control floating
   over it.

   In flow, not `fixed`. Owner's call: the header travels with the page and scrolls
   away with it. That also removes the three things a fixed pill imposed on everything
   else — a reserved band under it, an anchor offset the width of that band, and a
   scroll listener to restyle it once it started overlapping content.

   `relative` only so the z-index applies: the hero below is a stacking context of its
   own, and a static header would let the hero's glow paint over the pill's shadow. */
header {
  position: relative; z-index: 20;
  padding: var(--header-gap) var(--space-5) 0;
  transition: none;
}
/* Three tracks, not a flex row: the links are centred on the *pill*, not on whatever
   space the brand and the Install button happen to leave. With `1fr auto 1fr` the two
   outer tracks are equal by construction, so the centre stays put when the brand grows,
   when Install gains a word, or when the links themselves shed at narrow widths. A flex
   row with `margin: auto` centres on the residue instead, which drifts with both ends. */
header .nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--space-4); height: var(--header-h);
  max-width: var(--w-page); margin: 0 auto;
  /* Symmetric, because the centre track is centred on the *content* box: the old
     20px/10px split put the middle of the pill 5px right of the middle of the links.
     Measured, not guessed. */
  padding: 0 var(--space-4);
  border-radius: var(--radius-3xl);
  border: 1px solid color-mix(in srgb, var(--panel) 76%, var(--border));
  /* White, not --brand-ground. The cream reads as a warm surface the whole page is
     sitting on, which fights the pill's job of floating *over* an untinted page —
     and at pill width it is a large enough field to shift the perceived colour of
     everything inside it. The brand colour now appears once, behind the mark, where
     it identifies rather than tints. */
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 10px 36px -10px color-mix(in srgb, var(--text) 16%, transparent);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text);
         font-weight: 680; font-size: var(--l-lg); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
/* The mark sits on a cream chip — the one place --brand-ground appears now. Sized as
   a box with the glyph inset rather than a background on the glyph's own 26px box, so
   the cream reads as a deliberate tile and not as a colour that leaked behind an icon. */
.brand-mark { width: 34px; height: 34px; color: var(--text); flex: none;
              display: grid; place-items: center;
              background: var(--brand-ground); border-radius: var(--radius-lg); }
.brand-mark svg { display: block; width: 21px; height: 21px; }
.nav-links { display: flex; gap: var(--space-2); align-items: center; justify-content: center; }
/* Install closes the bar. `justify-self: end` rather than a margin, so it is pinned to
   its own track and cannot be pushed around by the centre one. */
.nav-dl { justify-self: end; }
/* Not yet a place you can go. It keeps its slot in the layout so the header does not
   reflow the day it becomes a link, and it is a `span` rather than a dead `<a>`, so no
   keyboard user tabs to something that does nothing. */
.nav-soon { color: color-mix(in srgb, var(--muted) 55%, transparent); font-size: var(--l-sm);
            font-weight: var(--weight-medium); padding: 7px 12px; cursor: default;
            -webkit-user-select: none; user-select: none; }
.nav-links a { color: var(--muted); font-size: var(--l-sm); font-weight: var(--weight-medium);
               padding: 7px 12px; border-radius: var(--radius-md); transition: color var(--dur) var(--ease),
               background var(--dur) var(--ease); }
.nav-links a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); text-decoration: none; }
/* "You are here" — Krug's trunk test. Set by the scroll-spy observer. */
.nav-links a.current { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-dl { display: inline-flex; align-items: center; gap: 7px; color: var(--text);
          font-size: var(--l-sm); font-weight: var(--weight-medium); padding: 7px 12px;
          border-radius: var(--radius-md);
          border: 1px solid var(--border); background: var(--panel);
          transition: border-color var(--dur) var(--ease); }
.nav-dl:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--border)); text-decoration: none; }
/* On /download/ this button *is* the page. It keeps the same shape and shows state
   through the accent rather than by going missing, so the header's third slot never
   empties and the two pages stay the same header. */
.nav-dl[aria-current] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
                        background: color-mix(in srgb, var(--accent) 10%, var(--panel));
                        color: var(--accent); }
.nav-dl .i { width: 15px; height: 15px; }
/* Five links needed 760px. Three short ones need far less, and dropping the whole nav
   at a width where it still fits leaves the header with nothing but a wordmark and a
   button — on a page whose only other navigation is scrolling. Measured: brand, links,
   Install and the pill's padding come to ~545px, so this fires below that with margin. */
@media (max-width: 600px) {
  header { padding-inline: var(--space-3); }
  header .nav { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2);
                padding-inline: var(--space-3); }
  .nav-links { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  cursor: pointer; font: inherit; font-weight: var(--weight-semibold); font-size: var(--l-base);
  padding: 13px 22px; border-radius: var(--radius-btn); border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { border-color: color-mix(in srgb, var(--text) 28%, var(--border));
             text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn .i { width: 17px; height: 17px; }

/* The primary CTA — the download. Accent-filled so its rank is unmistakable next
   to the outlined secondary beside it.

   Written as `.btn.btn-primary` rather than `.btn-primary` on purpose: `.btn:hover`
   and `.btn-primary:hover` carry identical specificity, so a single-class override
   would win or lose on source order alone. Two classes settle it outright — the same
   trap `lessons.md` records in "A component override must outrank the base rule it is
   overriding". */
.btn.btn-primary {
  border: 2px solid var(--ring-edge); background: var(--accent); color: var(--accent-fg);
  /* Ring, not drop shadow. A drop shadow separates a button from the page by
     darkening what is underneath it; a spread ring in the page's own colour separates
     it by clearing a margin around it. On a busy surface — a gradient wash, a
     photograph — the ring stays crisp where a shadow turns to mud. */
  box-shadow: 0 0 0 5px var(--ring-fill);
}
.btn.btn-primary:hover { border-color: var(--ring-edge); transform: translateY(-2px);
                         box-shadow: 0 0 0 7px var(--ring-fill); }
.btn.btn-primary:active { transform: translateY(0); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; text-align: center;
        padding: clamp(56px, 8vw, 108px) 0 clamp(48px, 6vw, 80px); }

/* Two-tone aurora + dot grid. The previous build put this on z-index:-1, which
   pushed it behind the body background and rendered it invisible — the hero was
   flat grey at the exact moment the impression is formed. `isolation: isolate`
   on the section plus z-index 0 here keeps it above the page background and
   below the content. */
.hero::before {
  /* Horizontal insets stay at 0 so the blur can never widen the document and
     introduce a sideways scrollbar; the gradients' own positions do the spread.
     The vertical placement matters more than it looks: with the box pulled far
     above the hero, both gradient centres landed off-screen and all that
     reached the viewer was the transparent tail — an aurora nobody could see. */
  content: ""; position: absolute; inset: -80px 0 auto 0; height: 900px; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 44% at 28% 34%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%),
    radial-gradient(48% 40% at 72% 26%, color-mix(in srgb, var(--assistant) 28%, transparent), transparent 70%);
  filter: blur(26px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 17%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(62% 55% at 50% 26%, #000, transparent 74%);
  mask-image: radial-gradient(62% 55% at 50% 26%, #000, transparent 74%);
  opacity: .5;
}
.hero .wrap { position: relative; z-index: 1; }

/* The hero eyebrow pill now belongs to /download/ alone — the home page dropped its
   own (it restated what the title already carries, and it delayed the headline by a
   full line for it). The platform list it and the sub-line used to repeat is stated
   once now, on the page that acts on it: /download/. The status-dot variant went with
   it; nothing on either page sets `.dot` any more. */
.hero .eyebrow { display: inline-flex; gap: var(--space-2); align-items: center;
  margin-bottom: var(--space-5); padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 76%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--muted); letter-spacing: .06em; }

.hero h1 {
  font-size: var(--display-1); line-height: 1.05; letter-spacing: var(--track-1);
  margin: 0 auto var(--space-5); max-width: 17ch;
}
/* Unscoped from `.hero h1` because the closing section now restates the same
   headline, and the accent half of it has to travel with the words. */
.grad {
  background: linear-gradient(104deg, var(--accent), var(--assistant) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { font-size: var(--lede); line-height: 1.55; color: var(--muted);
              max-width: 58ch; margin: 0 auto var(--space-8); }
.hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; align-items: center; }

/* ---------- provider dot ----------
   Which provider owns a thing is asked in four places — the hero's title bar and quota
   strip, the Crew nodes and the quota card — and every one of them had been restating
   `background: var(--agent-claude)` for itself. Shape and palette live here once; each
   context overrides only the size it needs.

   Deliberately *outside* the mock block. It lived inside it once, and rewriting that
   block to build the full window deleted it — taking the dots in the Crew graph and the
   quota card with it, two sections away from anything being edited. A primitive shared
   by four sections does not belong inside the one that happens to use it most. */
.agdot { display: inline-block; width: 8px; height: 8px; flex: none;
         border-radius: var(--radius-pill); background: var(--muted); }
.agdot.claude { background: var(--agent-claude); }
.agdot.codex { background: var(--agent-codex); }
.agdot.lead { background: var(--accent); }
/* A turn actually in flight. The one dot on the page that is not a provider. */
.agdot.live { background: var(--green); }

/* ---------- product mock (hero visual) ----------
   The strongest asset on the page: it *shows* the workspace instead of asserting it.
   Every part below exists in the application and is rebuilt here in markup, so it
   stays sharp at any density, follows the page's theme, and costs no request.

   It is light while the app ships both themes. That is not an oversight: this page
   declares `color-scheme: light` unconditionally (see the note in :root), and a dark
   island here would mean a second palette maintained against a page that has none —
   the same drift that got the dark theme deleted in the first place. */

/* The frame carries a full window: sidebar, launcher, transcript and composer. 1160px is
   the page width and the mock takes all of it minus the wrap padding, so it reads as a
   full-size application rather than a thumbnail. Its width pairs with `--ms` below — both
   describe the window's size — while the text rides its own `--mt` scale (see there). */
.mock-frame { position: relative; margin: clamp(44px, 6vw, 76px) auto 0; max-width: 1112px; }
.mock {
  /* --- two scales: one for the window, one for its text ---
     `--ms` scales every structural dimension inside `.mock` — padding, sidebar width, row
     heights, icon sizes, the window's own height — so the mock is a full-size picture of
     the application. `--mt` scales the type independently, so the reduced reproduction can
     stay readable without enlarging the window or its chrome. Resize the window with `--ms`;
     make the text lighter or heavier with `--mt`. The caption below sits outside `.mock` and
     keeps the page's own scale. */
  --ms: .66;
  --mt: .864;
  /* Type rides `--mt`. The two smallest steps keep a floor so the uppercase labels stay
     legible text rather than decoration, set just under the body copy so they can never
     outgrow it. */
  --mf-lg: calc(var(--l-base) * var(--mt));
  --mf-md: calc(var(--l-sm) * var(--mt));
  --mf-sm: calc(var(--l-xs) * var(--mt));
  --mf-xs: max(10.368px, calc(11px * var(--mt)));
  --mf-2xs: max(9.6768px, calc(10px * var(--mt)));
  /* Structure rides `--ms`. Space scales with the window, not the text, so a smaller type
     scale leaves the chrome intact rather than collapsing the boxes around it. */
  --mp-1: calc(var(--space-1) * var(--ms));
  --mp-2: calc(var(--space-2) * var(--ms));
  --mp-3: calc(var(--space-3) * var(--ms));
  --mp-4: calc(var(--space-4) * var(--ms));
  --mp-5: calc(var(--space-5) * var(--ms));
  --mp-6: calc(var(--space-6) * var(--ms));
  --mi: calc(15px * var(--ms));
  text-align: left; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-3xl); box-shadow: var(--shadow-hero); overflow: hidden;
}

/* --- main-column conversation bar ---
   The launcher has no toolbar over its empty canvas. This bar exists only after Start and
   belongs to the conversation column; macOS traffic lights stay in the sidebar beside it. */
.mock-bar { display: flex; align-items: center; gap: var(--mp-2);
            min-height: calc(56px * var(--ms)); padding: var(--mp-3) var(--mp-4);
            border-bottom: 1px solid var(--border);
            background: color-mix(in srgb, var(--ro-bg) 66%, var(--panel)); }
.mock .agdot { width: calc(8px * var(--ms)); height: calc(8px * var(--ms)); }
.mock-dot { width: calc(11px * var(--ms)); height: calc(11px * var(--ms)); border-radius: var(--radius-pill); flex: none;
            background: color-mix(in srgb, var(--muted) 34%, transparent); }
/* The real traffic lights, because this is a window and a macOS reader knows the
   colours before reading anything else in the bar. */
.mock-dot.red { background: #ff5f57; } .mock-dot.amber { background: #febc2e; }
.mock-dot.green { background: #28c840; }
.mock-title { font-size: var(--mf-md); color: var(--text);
              font-weight: var(--weight-semibold); white-space: nowrap; }
.bar-acts { margin-left: auto; display: inline-flex; align-items: center; gap: calc(6px * var(--ms)); flex: none; }
.bar-btn { display: inline-flex; align-items: center; gap: calc(6px * var(--ms)); padding: calc(5px * var(--ms)) calc(11px * var(--ms));
           border: 1px solid var(--border); border-radius: var(--radius-md);
           background: var(--panel); font-size: var(--mf-sm); font-weight: var(--weight-semibold);
           color: var(--text); white-space: nowrap; }
.bar-btn .i, .bar-ic .i { width: var(--mi); height: var(--mi); color: var(--muted); }
.bar-ic { display: inline-flex; padding: calc(6px * var(--ms)); border-radius: var(--radius-md); color: var(--muted); }

/* --- usage meters, shared by the title bar and the sidebar quota strip --- */
.umeter { display: inline-flex; align-items: center; gap: var(--mp-2); flex: none; white-space: nowrap; }
.umeter-l { font-size: var(--mf-sm); color: var(--muted); font-weight: var(--weight-semibold); }
.umeter-bar { width: calc(74px * var(--ms)); height: calc(6px * var(--ms)); border-radius: var(--radius-pill); overflow: hidden;
              background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* `--w` rather than an inline width: the reveal animates this one custom property, so the
   value a reader ends on is written once in the markup and the resting state cannot drift
   from the animated one. */
.umeter-fill { display: block; height: 100%; width: var(--w); border-radius: var(--radius-pill);
               background: var(--accent); }
.umeter-fill.warn { background: var(--edited); }
.umeter-pct { font-size: var(--mf-sm); font-weight: var(--weight-bold); color: var(--text);
              font-variant-numeric: tabular-nums; }
.umeter-pct.warn { color: var(--edited-ink); }

/* --- shell --- */
/* A window has a viewport, so this gets the video's fixed two-column proportions rather
   than growing to fit. The tree takes the space the quota strip leaves; the conversation
   owns every remaining pixel, with no landing-only media rail narrowing it. */
.app { display: grid;
       grid-template-columns: calc(280px * var(--ms)) minmax(0, 1fr);
       height: calc(1040px * var(--ms)); }
.app-main { min-width: 0; min-height: 0; display: flex; flex-direction: column;
            justify-content: center; }
.app-main.is-started { justify-content: stretch; }

.app-side { border-right: 1px solid var(--border); display: flex; flex-direction: column;
            min-height: 0; background: color-mix(in srgb, var(--ro-bg) 55%, var(--panel)); }
.app-side .i { width: var(--mi); height: var(--mi); flex: none; color: var(--muted); }
.side-window { min-height: calc(56px * var(--ms)); display: flex; align-items: center;
               gap: var(--mp-2); padding: 0 var(--mp-4); flex: none; }
.side-brand { display: flex; align-items: center; gap: var(--mp-2);
              padding: var(--mp-3) var(--mp-3) var(--mp-2);
              font-size: var(--mf-lg); font-weight: var(--weight-bold); }
.brand-mark.sm { width: calc(22px * var(--ms)); height: calc(22px * var(--ms)); padding: calc(3px * var(--ms)); }
.brand-mark.sm svg { width: 100%; height: 100%; display: block; }
.side-collapse { margin-left: auto; }
.side-new { display: flex; align-items: center; gap: var(--mp-2); margin: 0 var(--mp-3);
            padding: calc(7px * var(--ms)) var(--mp-2); border-radius: var(--radius-md);
            font-size: var(--mf-md); font-weight: var(--weight-medium); color: var(--text); }
.side-new.on { background: color-mix(in srgb, var(--accent) 10%, transparent);
               color: var(--accent); font-weight: var(--weight-semibold); }
.side-new.on .i { color: currentColor; }
.side-label { display: flex; align-items: center; margin: var(--mp-4) 0 var(--mp-1);
              padding: 0 var(--mp-3); font-size: var(--mf-2xs); font-weight: var(--weight-bold);
              text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.side-views { margin-left: auto; display: inline-flex; gap: 2px; }
.side-views .i { width: calc(13px * var(--ms)); height: calc(13px * var(--ms)); }
.side-item { display: flex; align-items: center; gap: var(--mp-2); margin: 0 var(--mp-3);
             padding: calc(6px * var(--ms)) var(--mp-2); border-radius: var(--radius-md);
             font-size: var(--mf-md); color: var(--ro-fg); }
.side-item.on { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
                font-weight: var(--weight-semibold); }
.side-item.on .i { color: currentColor; }

/* --- project tree ---
   One row component for folders and files alike: only the mark's glyph and the label's
   weight say which it is, so indentation, the selected state and truncation all stay a
   single implementation. Depth is a custom property rather than nested markup, because
   the tree is flat scenery here and nesting would buy structure nothing reads. */
.tree { padding: 0 var(--mp-3); display: flex; flex-direction: column; gap: 1px;
        flex: 1; min-height: 0; overflow: hidden; }
.tree-row { display: flex; align-items: center; gap: var(--mp-1);
            padding: calc(4px * var(--ms)) calc(6px * var(--ms)); padding-left: calc((6px + var(--lvl, 0) * 13px) * var(--ms));
            border-radius: var(--radius-sm); font-size: var(--mf-md); color: var(--text); }
.tree-row.on { background: color-mix(in srgb, var(--accent) 12%, transparent);
               color: var(--accent); font-weight: var(--weight-semibold); }
.tree-row.on .i, .tree-row.on .tree-n { color: currentColor; }
.tree-caret { width: calc(13px * var(--ms)); height: calc(13px * var(--ms)); flex: none; color: var(--muted);
              transition: transform var(--dur) var(--ease); }
.tree-caret.open { transform: rotate(90deg); }
.tree-caret.leaf { width: calc(13px * var(--ms)); display: inline-block; }
.tree-dir { flex: none; }
.tree-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
/* A file and the `skills` group both recede to normal weight — they are context, not
   destinations. The selected row restates its colour because this rule would otherwise
   out-specify the inherited accent. */
.tree-file .tree-text, .tree-group .tree-text { font-weight: var(--weight-normal); color: var(--ro-fg); }
.tree-row.on .tree-text { color: currentColor; }
.tree-n { color: var(--muted); font-size: var(--mf-xs); font-variant-numeric: tabular-nums; flex: none; }

/* --- quota strip ---
   One grid for the whole block rather than one per provider. With a grid per group the
   label track is measured per provider, so Codex's lone `Week` would start its bar a few
   pixels left of Claude's; sharing the tracks is what makes this read as a table of
   quotas instead of loose parts. This is also the footer earlier drafts had to crop —
   signed out it says `limits unavailable`, and only a signed-in instance has numbers. */
.sb-quota-label { flex: none; display: flex; align-items: center; gap: var(--mp-2);
                  padding: var(--mp-3) var(--mp-3) var(--mp-1); border-top: 1px solid var(--border);
                  color: var(--muted); font-size: var(--mf-2xs); font-weight: var(--weight-bold);
                  text-transform: uppercase; letter-spacing: .09em; }
.sb-quota-label .i { margin-left: auto; width: calc(12px * var(--ms)); height: calc(12px * var(--ms));
                     transform: rotate(90deg); }
.sb-plan { flex: none; padding: var(--mp-2) var(--mp-3) var(--mp-2);
           display: grid; grid-template-columns: auto minmax(40px, 1fr) auto;
           align-items: center; column-gap: var(--mp-2); row-gap: calc(4px * var(--ms)); }
.ubar-head { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--mp-2);
             font-size: var(--mf-2xs); font-weight: var(--weight-bold); text-transform: uppercase;
             letter-spacing: .09em; color: var(--muted); }
.ubar-head.sep { margin-top: var(--mp-2); }
.ubar-acct { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--mp-2);
             margin-top: var(--mp-1); font-size: var(--mf-md); font-weight: var(--weight-semibold);
             color: var(--text); }
/* The plan sits at the end of its provider's own line, so it reads as a property of that
   provider rather than as a control someone left below the bars. */
.ubar-plan { margin-left: auto; text-transform: lowercase; letter-spacing: 0; font-size: var(--mf-2xs);
             padding: calc(1px * var(--ms)) calc(7px * var(--ms)); border-radius: var(--radius-pill); color: var(--accent);
             background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* `display: contents` is what puts a meter's three parts into the strip's grid instead of
   a track of their own — without it the alignment is per-meter, which is the defect. */
.umeter-row { display: contents; }
.sb-plan .umeter-bar { width: auto; height: calc(5px * var(--ms)); }
.sb-plan .umeter-pct { min-width: 4ch; text-align: right; }
.ubar-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--mp-2);
             margin-top: calc(2px * var(--ms)); padding-top: calc(6px * var(--ms));
             border-top: 1px solid var(--border); }
.ubar-age { flex: 1; font-size: var(--mf-xs); color: var(--muted); }
.ubar-foot .i { width: calc(13px * var(--ms)); height: calc(13px * var(--ms)); }

.side-acct { display: flex; align-items: center; gap: var(--mp-2); flex: none;
             padding: var(--mp-2) var(--mp-3); border-top: 1px solid var(--border); }
.acct-av { display: inline-flex; align-items: center; justify-content: center;
           width: calc(26px * var(--ms)); height: calc(26px * var(--ms)); border-radius: var(--radius-pill);
           background: var(--ro-bg); flex: none; }
.acct-n { display: flex; flex-direction: column; line-height: 1.25;
          font-size: var(--mf-md); font-weight: var(--weight-semibold); }
.acct-n span { font-size: var(--mf-xs); font-weight: var(--weight-normal); color: var(--muted); }

/* --- launcher and transcript ---
   The first state is a centred page, not an empty transcript. Once Start is pressed,
   JavaScript adds `.is-started`: the same composer docks below a top-aligned transcript,
   reproducing the real launcher's change of context without replacing the focused input. */
.mock-body { width: min(calc(850px * var(--ms)), calc(100% - var(--mp-6) - var(--mp-6)));
             margin-inline: auto; padding: var(--mp-6) 0; display: flex; flex-direction: column;
             gap: calc(34px * var(--ms)); flex: 0 1 auto; min-height: 0; overflow: hidden; }
.app-main.is-started .mock-body { flex: 1; overflow-y: auto; }
.demo-intro { display: flex; flex-direction: column; align-items: center;
              gap: var(--mp-2); text-align: center; }
.demo-intro-mark { width: calc(58px * var(--ms)); height: calc(58px * var(--ms));
                   color: var(--text); margin-bottom: var(--mp-1); }
.demo-intro h2 { margin: 0; font-family: var(--sans); font-weight: var(--weight-semibold);
                 font-size: max(14px, calc(31px * var(--mt)));
                 line-height: 1.15; letter-spacing: -.015em; }
.demo-intro p { margin: 0 auto; max-width: 52ch; color: var(--muted);
                font-size: var(--mf-lg); line-height: 1.5; text-wrap: balance; }
.demo-messages { width: 100%; display: flex; flex-direction: column;
                 gap: calc(34px * var(--ms)); }
.demo-messages:empty { display: none; }
.mock-cap { margin: var(--space-4) auto 0; max-width: 66ch; font-size: var(--l-sm);
            color: var(--muted); text-align: center; }

.m { display: flex; flex-direction: column; gap: calc(7px * var(--ms)); max-width: 88%; }
.m .meta { display: flex; align-items: center; gap: var(--mp-2); flex-wrap: wrap; }
.m .who { font-size: var(--mf-sm); font-weight: var(--weight-bold); text-transform: uppercase;
          letter-spacing: .07em; color: var(--muted); }
/* Provider metadata travels with a reply in the app. The same badge position discloses that
   this landing-page answer is prepared, so the mock keeps the product's grammar without
   implying a model actually ran for this preview. */
.m .model { font-size: var(--mf-xs); font-family: var(--mono); padding: calc(2px * var(--ms)) calc(7px * var(--ms)); border-radius: var(--radius-pill);
            background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); }
.m .usage { font-size: var(--mf-xs); font-family: var(--mono); padding: calc(2px * var(--ms)) calc(7px * var(--ms)); border-radius: var(--radius-pill);
            background: var(--ro-bg); color: var(--muted); }
.m .bubble { padding: calc(13px * var(--ms)) calc(17px * var(--ms)); border-radius: var(--radius-xl); font-size: var(--mf-lg); line-height: 1.6; }
.m.user { align-self: flex-end; align-items: flex-end; max-width: 76%; }
/* Raw --user is tuned for the app's larger body text; at this label's 13px it
   sits at 4.37:1 on the mock's white panel. Pulling it toward --text clears AA. */
.m.user .who { color: color-mix(in srgb, var(--user) 82%, var(--text)); }
.m.user .bubble { background: var(--accent); color: var(--accent-fg);
                  border-bottom-right-radius: var(--radius-xs); white-space: pre-wrap;
                  overflow-wrap: anywhere; }
.m.assistant .who { color: var(--assistant); }
.m.assistant .bubble { background: var(--ro-bg); color: var(--text); border: 1px solid var(--border);
                       border-bottom-left-radius: var(--radius-xs); }
.agent-progress { display: inline-flex; align-items: center; gap: var(--mp-2); color: var(--muted); }
.agent-progress-dots { display: inline-flex; gap: calc(3px * var(--ms)); }
.agent-progress-dots span { width: calc(5px * var(--ms)); height: calc(5px * var(--ms));
                            border-radius: var(--radius-pill); background: var(--assistant); }

/* --- interactive composer ---
   This is a real form while its settings are read-only scenery. Focus belongs to the
   unified pill, as it does in the application, and the textarea grows only until it would
   steal the transcript's viewport. */
.demo-compose-wrap { width: min(calc(850px * var(--ms)), calc(100% - var(--mp-6) - var(--mp-6)));
                     flex: none; margin: var(--mp-4) auto var(--mp-6); }
.composer { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-xl);
            background: var(--panel); overflow: hidden; box-shadow: var(--shadow);
            transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.composer:focus-within { border-color: var(--accent);
                         box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), var(--shadow); }
.cmp-input { display: block; width: 100%; min-height: calc(58px * var(--ms));
             max-height: calc(210px * var(--ms)); resize: none; overflow-y: auto;
             padding: var(--mp-4) var(--mp-4) var(--mp-2); border: 0; outline: 0;
             background: transparent; color: var(--text); font: inherit;
             font-size: var(--mf-lg); line-height: 1.5; }
.cmp-input::placeholder { color: var(--muted); opacity: .82; }
.cmp-row { display: flex; align-items: center; gap: calc(6px * var(--ms)); flex-wrap: wrap;
           padding: 0 var(--mp-3) var(--mp-3); }
.cmp-context { display: inline-flex; align-items: center; gap: calc(5px * var(--ms));
               min-width: 0; max-width: 14ch; padding: calc(5px * var(--ms)) calc(7px * var(--ms));
               color: var(--muted); font-size: var(--mf-sm); font-weight: var(--weight-semibold);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-context .i, .cmp-mode .i, .cmp-send .i { width: var(--mi); height: var(--mi); flex: none; }
/* bypassPermissions keeps its red. It is the one control on this bar that names a risk,
   and flattening it to a neutral chip would describe a safer product than the one shipped. */
.cmp-mode { display: inline-flex; align-items: center; gap: calc(6px * var(--ms)); margin-left: auto;
            padding: calc(5px * var(--ms)) calc(11px * var(--ms)); border-radius: calc(9px * var(--ms)); font-size: var(--mf-sm);
            font-weight: var(--weight-semibold); color: var(--red-ink);
            border: 1px solid color-mix(in srgb, var(--red) 55%, var(--border));
            background: color-mix(in srgb, var(--red) 10%, var(--panel)); white-space: nowrap; }
.cmp-sel { padding: calc(5px * var(--ms)) calc(9px * var(--ms)); font-size: var(--mf-sm); font-weight: var(--weight-medium);
           color: var(--muted); white-space: nowrap; }
button.cmp-send { display: inline-flex; align-items: center; gap: calc(6px * var(--ms));
            padding: calc(6px * var(--ms)) calc(14px * var(--ms)); border: 0;
            border-radius: var(--radius-md); background: var(--accent); color: var(--accent-fg);
            font: inherit; font-size: var(--mf-sm); font-weight: var(--weight-bold); cursor: pointer; }
.cmp-send .i { color: currentColor; }
button.cmp-send:disabled { opacity: .46; cursor: default; }
button.cmp-send:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.composer.is-busy button.cmp-send { background: var(--red); }
.cmp-note { min-height: 1.4em; margin: var(--mp-2) var(--mp-1) 0;
            color: var(--muted); font-size: var(--mf-sm); }
.app-main.is-started .cmp-note { display: none; }

/* Progressive shedding rather than one breakpoint. The title bar is the densest strip in
   the mock and the first thing to overflow, so its meters go before anything structural;
   the sidebar is worth more than they are and goes last.

   These thresholds are read off the *mock*, not the viewport. The frame is
   `min(1112px, viewport - 48px)`, so a breakpoint set where the content stops fitting the
   frame has to fire ~48px earlier than the frame width suggests — measured at 1024px,
   where a 1000px breakpoint still let the meters push the buttons out under the mock's own
   `overflow: hidden`. The chrome rides `--ms`, so these track the structure, not the type;
   a lighter `--mt` only buys the bar slack. Clipped is not the same as absent. */
@media (max-width: 1176px) {
  .bar-hide { display: none; }
}
@media (max-width: 900px) {
  .bar-btn span, .mock-title { display: none; }
}
/* Below this the sidebar stops informing and starts stealing: it would leave the live
   transcript and composer only a few characters wide. */
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); height: calc(760px * var(--ms)); }
  .app-side { display: none; }
  .mock-body { width: calc(100% - var(--mp-4) - var(--mp-4)); padding: var(--mp-4) 0; }
  .demo-compose-wrap { width: calc(100% - var(--mp-4) - var(--mp-4)); margin: var(--mp-3) auto var(--mp-4); }
  .m, .m.user { max-width: 100%; }
}
@media (max-width: 460px) {
  /* The header's compact overflow control drops before the conversation action; the latter
     survives as a glyph because parallel execution is the capability being shown. */
  .bar-ic { display: none; }
  .cmp-sel { display: none; }
  .cmp-context:nth-of-type(2) { display: none; }
  .cmp-mode { margin-left: 0; }
  .cmp-send { margin-left: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The hidden start state is gated on `.armed`, which only JavaScript adds — and it adds
     it in the same synchronous pass that guarantees a play. The resting state of this
     markup is therefore the *filled* meter at the width its own `--w` declares. Without
     JS, with reduced motion, or if the observer never fires, a visitor reads real
     numbers rather than five empty tracks. */
  .demo.armed .umeter-fill { width: 0; }
  .demo.armed.play .umeter-fill { animation: fill .9s var(--ease-out) both; }
  .demo-enter { animation: rise .35s var(--ease-out) both; }
  .agent-progress-dots span { animation: demo-pulse .9s ease-in-out infinite alternate; }
  .agent-progress-dots span:nth-child(2) { animation-delay: .15s; }
  .agent-progress-dots span:nth-child(3) { animation-delay: .3s; }

  @keyframes fill { from { width: 0; } to { width: var(--w); } }
  @keyframes demo-pulse { from { opacity: .28; transform: translateY(0); }
                          to { opacity: 1; transform: translateY(calc(-2px * var(--ms))); } }
}

/* ---------- section rhythm ----------
   One number, applied everywhere. The reference runs 140–150px between every section
   and does almost nothing else to separate them: no alternating fills, no rules, no
   bands. That was worth stealing outright, because it solves the problem the previous
   build solved with `.band` — "nothing outranks anything, the eye has no idea where to
   land" — without cutting the page into stripes. Space is the separator; the cards do
   the contrast. The single exception is the closing CTA, which really is tinted. */
section { padding: clamp(72px, 9vw, 140px) 0; }

/* The hero already closes with its own bottom padding beneath the workspace caption.
   Repeating the full section gap above the first proof block creates two separators
   between one continuous story, so Product lets the hero own that transition. */
#product { padding-top: 0; }

/* `.band` is kept as a hook because the markup and the scroll-spy reference it, but it
   no longer paints. Its two dependent rules inverted card fills *against* the band fill
   (`.band .panel { background: var(--bg) }`), so with the fill gone they have to be
   neutralised in the same change or every card in a former band inverts against a
   background that is no longer there. */
.band { background: transparent; border-block: 0; }

.section-head { text-align: center; max-width: var(--w-prose); margin: 0 auto clamp(40px, 5vw, 64px); }
.section-head h2 { font-size: var(--display-2); letter-spacing: var(--track-2); line-height: 1.12;
                   margin: var(--space-3) 0 var(--space-4); }
.section-head p { color: var(--muted); font-size: var(--lede); line-height: 1.55; margin: 0; }

/* ---------- overview: sticky contents rail + stacked panels ----------
   Replaces the alternating two-column "chess" layout. Two reasons, both taken from
   the reference. First, chess makes every block structurally identical while pretending
   to be varied — the reader learns nothing from the alternation and the eye ping-pongs.
   Stacking puts each block's copy and its evidence in reading order instead. Second,
   the rail answers "where am I and what else is here" for the one section of the page
   long enough to need it, which is the only real interactivity the reference has. */
.overview-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr);
                   gap: clamp(32px, 4vw, 56px); align-items: start; }

.overview-toc { position: sticky; top: var(--space-10); display: flex; flex-direction: column;
                border-left: 1px solid var(--border); }
.overview-toc a { color: var(--muted); font-size: var(--l-sm); font-weight: var(--weight-medium);
                  padding: 11px 0 11px var(--space-4); margin-left: -1px;
                  border-left: 2px solid transparent;
                  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.overview-toc a:hover { color: var(--text); text-decoration: none; }
/* Same `current` class the primary nav uses, set by the same observer. */
.overview-toc a.current { color: var(--text); border-left-color: var(--accent);
                          font-weight: var(--weight-semibold); }

.overview-panels { display: flex; flex-direction: column; gap: clamp(56px, 6vw, 84px); }
/* No scroll-margin of its own: with nothing pinned to the top of the viewport, the
   28px on `html { scroll-padding-top }` is the whole offset, and one rule keeps every
   anchor on the page landing the same distance from the edge. */
.proof { display: block; }
/* Copy is capped well short of the panel it sits above. The reference holds its copy
   to 420px inside an 852px column; ours carries a full paragraph plus a four-item
   list, so it gets 620px (~62ch) — the same discipline at an honest measure. */
.proof-text { max-width: var(--w-copy); margin-bottom: var(--space-8); }
.proof-text .kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--accent);
                      font-weight: var(--weight-bold); font-size: var(--l-xs);
                      text-transform: uppercase; letter-spacing: .09em; }
.proof-text .kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.proof-text h2 { font-size: var(--display-2); letter-spacing: var(--track-2); line-height: 1.14;
                 margin: var(--space-4) 0 var(--space-4); }
.proof-text p { color: var(--muted); font-size: var(--l-body); margin: 0 0 var(--space-5); }
.proof-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.proof-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--l-base); }
.proof-list li .i { width: 19px; height: 19px; margin-top: 4px; color: var(--accent); }

/* The rail needs a viewport tall enough for `sticky` to be worth anything, and a
   column narrow enough that 260px of it is not a third of the page. Below that it
   becomes an ordinary horizontal strip above the panels — still a table of contents,
   just not a persistent one. */
@media (max-width: 900px) {
  .overview-layout { grid-template-columns: 1fr; gap: var(--space-8); }
  .overview-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-2);
                  border-left: 0; border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); }
  .overview-toc a { padding: 7px 12px; margin-left: 0; border-left: 0;
                    border-radius: var(--radius-pill); }
  .overview-toc a.current { border-left: 0;
                            background: color-mix(in srgb, var(--accent) 12%, transparent); }
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: var(--l-sm);
        font-weight: var(--weight-medium); padding: 7px 13px; border-radius: var(--radius-pill);
        border: 1px solid var(--border); background: var(--bg); }
.chip.handoff { border-color: color-mix(in srgb, var(--assistant) 50%, var(--border));
                color: var(--assistant); font-weight: var(--weight-semibold); }
.chip.handoff .i { width: 14px; height: 14px; }

/* diff rows */
.manifest { font-family: var(--mono); font-size: var(--l-sm); display: flex; flex-direction: column; gap: 11px; }
.manifest .row { display: flex; align-items: center; gap: var(--space-3); }
.manifest .sign { width: 20px; flex: none; text-align: center; font-weight: var(--weight-bold);
                  border-radius: var(--radius-xs); }
.manifest .sign.del { color: var(--red-ink); background: color-mix(in srgb, var(--red) 12%, transparent); }
/* The add sign is the one place ink sits on a tinted fill rather than the plain
   panel, which costs it ~0.6 of a contrast point — so it needs a darker mix. */
.manifest .sign.add { color: color-mix(in srgb, var(--green) 66%, var(--text));
                      background: color-mix(in srgb, var(--green) 12%, transparent); }
.manifest .ok { color: var(--green); flex: none; display: inline-flex; }
.manifest .ok .i { width: 17px; height: 17px; }
.manifest .addr { color: var(--accent); }
.tally { display: flex; gap: var(--space-4); margin-top: var(--space-2); padding-top: var(--space-4);
         border-top: 1px dashed var(--border); font-size: var(--l-sm); }
.tally b { font-weight: var(--weight-bold); }
.tally .kept-n { color: var(--green-ink); }
.tally .edit-n { color: var(--edited-ink); }
.tally .lost-n { color: var(--muted); }

/* ---------- proof-point grid ---------- */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
/* Was `--bg`, which inverted against the old `.band` fill. With the band transparent
   that would be a card the exact colour of the page it sits on. */
.point { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-2xl);
         padding: var(--space-6); transition: transform var(--dur) var(--ease),
         border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.point:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
               box-shadow: var(--shadow-md); }
.point .i { width: 22px; height: 22px; color: var(--accent); margin-bottom: var(--space-3); }
.point h3 { margin: 0 0 var(--space-2); font-size: var(--l-lg); letter-spacing: -.012em; }
.point p { margin: 0; color: var(--muted); font-size: var(--l-base); line-height: 1.55; }
@media (max-width: 900px) { .points { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .points { grid-template-columns: 1fr; } }

/* ---------- plans ---------- */
/* The three live plans share one comparison row on wide screens. The trial
   is still the shared entry and belongs in the introduction rather than another card. */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
         align-items: stretch; max-width: var(--w-page); margin: 0 auto; }
.plan { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius-3xl); padding: var(--space-6); }
.plan.featured { border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
                 box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--accent) 70%, transparent); }
.plan .tag { display: inline-block; font-size: var(--l-xs); text-transform: uppercase; letter-spacing: .08em;
             font-weight: var(--weight-bold); color: var(--accent-fg); background: var(--accent);
             padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
.plan .plan-name { display: block; font-weight: var(--weight-bold); font-size: var(--l-lg); letter-spacing: -.012em; }
/* The old build padded this with `min-height: 2.8em`, which guessed at two
   lines and left ragged gaps. A grid row does the alignment honestly. */
.plan .plan-for { color: var(--muted); font-size: var(--l-sm); line-height: 1.5;
                  margin: 6px 0 var(--space-5); }
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex;
           flex-direction: column; gap: var(--space-2); }
.plan li { font-size: var(--l-sm); line-height: 1.5; color: var(--text); display: flex;
           gap: var(--space-2); align-items: flex-start; }
.plan li .i { width: 16px; height: 16px; margin-top: 3px; color: var(--green); }
/* The price is the one display-rank element inside a card; --display-3 is the
   existing rung above the 19px plan name, so no new type token is invented. */
/* Weight 500, not 700: this is the page's serif voice, and a bold serif numeral reads
   as a masthead. The element-qualified selector would otherwise outrank the shared
   `h1, h2, .plan-price` rule and quietly restore the old weight. */
.plan .plan-price { display: block; margin-top: var(--space-2); font-size: var(--display-3);
                    font-weight: 500; letter-spacing: var(--track-2); line-height: 1.1;
                    overflow-wrap: anywhere; }
.plan .plan-price-note { font-size: var(--l-sm); font-weight: var(--weight-normal); color: var(--muted);
                         letter-spacing: 0; }
.plan .plan-price-sale { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.plan .plan-price-was { color: var(--muted); font-size: .62em; text-decoration: line-through;
                        text-decoration-thickness: 1.5px; }
.plan .plan-discount { align-self: center; padding: 4px 8px; color: var(--green-ink);
                       border-radius: var(--radius-pill);
                       background: color-mix(in srgb, var(--green) 12%, transparent);
                       font-family: var(--sans); font-size: var(--l-xs); font-weight: var(--weight-bold);
                       letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
/* Subgrid already puts both CTAs in the same row; `margin-top:auto` on top of
   that pushed each one to the bottom of its own area instead, so the card with
   no fine print sat 55px lower and the two buttons visibly disagreed. Let the
   row do the alignment and start both CTAs at its top edge. */
.plan-cta { display: flex; flex-direction: column; gap: var(--space-2);
            align-items: flex-start; }
@media (max-width: 700px) { .plan-cta { margin-top: auto; } }
.plan-cta .btn { width: 100%; }
.plan .plan-fine { font-size: var(--l-xs); color: var(--muted); line-height: 1.5; margin: 0; }
/* A reservation is not a purchase, so the paid card is deliberately quieter than
   Community: the accent stays on the button, never on the card border. */
.plan.plan-offer { border-style: dashed; }
.plan .tag.tag-quiet { color: var(--muted); background: transparent;
                       border: 1px dashed var(--border); }
/* The reservation is outlined, not filled, so exactly one filled accent button exists on the
   page: the free install. Two solid CTAs of equal weight read as two primary actions, and a
   visitor resolves that by choosing neither — and here the free core is deliberately the
   funnel, so it is the one that must win the eye. The accent stays in the border and label,
   which is enough rank for the only paid control on the page. */
.btn.btn-offer { border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
                 color: var(--accent); background: var(--panel); }
.btn.btn-offer:hover { border-color: var(--accent);
                       background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.offer-terms { max-width: 860px; margin: var(--space-6) auto 0; background: var(--panel);
               border: 1px solid var(--border); border-radius: var(--radius-3xl);
               padding: var(--space-6); }
.offer-terms h3 { font-size: var(--l-base); font-weight: var(--weight-bold); margin: 0 0 var(--space-4); }
.offer-terms ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column;
                  gap: var(--space-3); }
.offer-terms li { font-size: var(--l-sm); line-height: 1.6; color: var(--muted); }
.offer-terms strong { color: var(--text); font-weight: var(--weight-semibold); }
.plans-note { text-align: center; color: var(--muted); font-size: var(--l-sm); max-width: 66ch;
              margin: var(--space-8) auto 0; }
@media (min-width: 701px) {
  /* keep name / blurb / features / CTA on the same baselines across both cards */
  .plans { grid-template-rows: auto auto auto auto; }
  .plan { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
}
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 620px; } }

/* ---------- FAQ ---------- */
/* Wider than the prose column but still deliberately narrower than the page — the
   reference drops from 1180 to 860 here, which is what keeps a seven-item accordion
   from reading as a wall. */
.faq { max-width: var(--w-faq); margin: 0 auto; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--panel);
               padding: var(--space-5) var(--space-6); margin-bottom: var(--space-3);
               transition: border-color var(--dur) var(--ease); }
.faq details:hover { border-color: color-mix(in srgb, var(--text) 22%, var(--border)); }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
/* No `justify-content: space-between` here. A flex container makes every inline child
   its own item, including bare text nodes — so a question containing markup, like the
   one with a <span class="mono"> in it, was split into three items and strung across
   the full row with gaps in the middle of the sentence. Questions that are a single
   text node looked fine, which is what kept it hidden. Letting the text flow and
   pushing only the icon over with `margin-left: auto` fixes every question, including
   ones nobody has written yet. */
.faq summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--l-base);
               list-style: none; display: flex;
               align-items: center; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 20px; height: 20px; color: var(--muted); flex: none; margin-left: auto;
                  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.faq details[open] summary .i { transform: rotate(45deg); color: var(--accent); }
.faq details[open] summary { margin-bottom: var(--space-3); }
.faq p { margin: 0; color: var(--muted); font-size: var(--l-base); }

/* ---------- closing CTA + footer ---------- */
/* The home page now ends on a decision rather than the last FAQ answer. The wash is the
   page's one full-width tint; centring a single action here preserves the quiet section
   hierarchy above it while making the next step unmistakable. */
.closing-cta { background: var(--wash); text-align: center; }
.closing-cta-inner { display: grid; justify-items: center; }
.closing-cta h2 { max-width: 16ch; margin: var(--space-3) auto var(--space-5);
                  font-size: var(--display-1); line-height: 1.04; letter-spacing: var(--track-1); }
.closing-cta p { max-width: 600px; margin: 0 auto; color: var(--muted); font-size: var(--lede); }
.closing-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
                       margin-top: var(--space-8); }

/* Four intentional regions replace the old one-line link run. Product discovery stays
   separate from editorial resources and help, while the brand column has enough room to
   explain what Crowsnest is without repeating the legal/privacy page. */
.site-footer { border-top: 1px solid var(--border); padding: clamp(56px, 6vw, 88px) 0 32px;
               color: var(--muted); }
.site-footer .footer-grid { display: grid; grid-template-columns: minmax(230px, 2fr) repeat(3, minmax(0, 1fr));
                            align-items: start; gap: clamp(32px, 5vw, 64px); padding-bottom: 44px;
                            border-bottom: 1px solid var(--border); }
.site-footer .brand { color: var(--text); font-size: var(--l-base); }
/* Same chip, one step down. Both dimensions move together so the inset stays intact. */
.site-footer .brand-mark { color: var(--text); width: 28px; height: 28px; }
.site-footer .brand-mark svg { width: 17px; height: 17px; }
.footer-brand-block p { max-width: 30ch; margin: var(--space-4) 0 0; font-size: var(--l-sm); line-height: 1.65; }
.site-footer .footer-col { display: grid; align-content: start; gap: 10px; margin: 0; }
.footer-col strong { margin-bottom: var(--space-1); color: var(--muted); font-size: var(--l-xs);
                     letter-spacing: .09em; text-transform: uppercase; }
.site-footer a { color: var(--muted); font-size: var(--l-sm); }
.site-footer .footer-col a { color: var(--text); }
.site-footer a:hover { color: var(--accent); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6);
               padding-top: var(--space-7); font-size: var(--l-xs); }

@media (max-width: 760px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand-block { grid-column: 1 / -1; }
}

/* ---------- product demos ----------
   Recordings stand directly on the page: a matte or ambient halo competes with the
   product frame already captured in each video. */
.demo-video { display: block; width: 100%; height: auto; cursor: pointer;
              border-radius: calc(var(--radius-2xl) - 5px); }
/* The drawn stand-in for a recording. It shares the video's box and radius so a panel with a
   diagram and a panel with a screen capture line up, and so swapping one for the other later
   is a markup change with no layout consequence. Not a button: there is nothing to play. */
.proof-diagram { display: block; width: 100%; height: auto;
                 border-radius: calc(var(--radius-2xl) - 5px); }

/* ---------- agent UI guide ----------
   Long-form search content needs a reading measure and a persistent local outline, not
   landing-page card rhythm. These rules are namespaced so the guide shares the system
   without changing the two conversion pages around it. */
.guide-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center;
              padding: clamp(76px, 9vw, 128px) 0 clamp(64px, 8vw, 104px); }
.guide-hero::before { content: ""; position: absolute; z-index: -1; width: min(760px, 80vw);
                      aspect-ratio: 1; left: 50%; top: -68%; transform: translateX(-50%);
                      border-radius: 50%; filter: blur(2px);
                      background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%); }
.guide-prose { max-width: 880px; }
.breadcrumbs { display: flex; gap: var(--space-2); justify-content: flex-start; margin-bottom: var(--space-10);
               color: var(--muted); font-size: var(--l-sm); text-align: left; }
.breadcrumbs a { color: var(--muted); }
.guide-hero h1 { max-width: 15ch; margin: var(--space-3) auto var(--space-5);
                 font-size: var(--display-1); line-height: 1.05; letter-spacing: var(--track-1); }
.guide-hero .lede { max-width: 62ch; margin: 0 auto var(--space-8); color: var(--muted);
                    font-size: var(--lede); line-height: 1.55; }
.guide-answer { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-6);
                text-align: left; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
                border-radius: var(--radius-2xl); background: var(--panel); box-shadow: var(--shadow-md); }
.guide-answer strong { display: block; margin-bottom: var(--space-2); color: var(--accent);
                       font-size: var(--l-xs); letter-spacing: .09em; text-transform: uppercase; }
.guide-answer p { margin: 0; color: var(--text); font-size: var(--l-base); }

.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: center;
                align-items: start; gap: clamp(40px, 6vw, 80px); padding-bottom: clamp(80px, 10vw, 140px); }
.guide-toc { position: sticky; top: var(--space-10); display: flex; flex-direction: column;
             gap: var(--space-1); border-left: 1px solid var(--border); }
.guide-toc strong { padding: 0 0 var(--space-2) var(--space-4); font-size: var(--l-xs);
                    letter-spacing: .08em; text-transform: uppercase; }
.guide-toc a { margin-left: -1px; padding: 8px 0 8px var(--space-4); color: var(--muted);
               border-left: 2px solid transparent; font-size: var(--l-sm); line-height: 1.4; }
.guide-toc a:hover { color: var(--text); border-left-color: var(--accent); text-decoration: none; }
.guide-body { min-width: 0; }
.guide-body > section { padding: clamp(56px, 7vw, 88px) 0; border-top: 1px solid var(--border); }
.guide-body > section:first-child { padding-top: 0; border-top: 0; }
.guide-body h2 { margin: var(--space-3) 0 var(--space-5); font-size: var(--display-2);
                 line-height: 1.12; letter-spacing: var(--track-2); }
.guide-body h3 { margin: 0 0 var(--space-2); font-size: var(--l-lg); letter-spacing: -.012em; }
.guide-body section > p { margin: 0 0 var(--space-5); color: var(--muted); }
.guide-body section > p:last-child { margin-bottom: 0; }
.guide-note { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent);
              background: color-mix(in srgb, var(--accent) 6%, var(--panel));
              font-size: var(--l-sm); line-height: 1.6; }

.guide-table-wrap { max-width: 100%; margin: var(--space-8) 0 var(--space-5); overflow-x: auto;
                    border: 1px solid var(--border); border-radius: var(--radius-2xl);
                    background: var(--panel); box-shadow: var(--shadow); }
.guide-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--l-sm); line-height: 1.55; }
.guide-table th, .guide-table td { padding: var(--space-4); text-align: left; vertical-align: top;
                                  border-bottom: 1px solid var(--border); }
.guide-table thead th { color: var(--muted); background: color-mix(in srgb, var(--bg) 72%, var(--panel));
                        font-size: var(--l-xs); letter-spacing: .07em; text-transform: uppercase; }
.guide-table tbody th { width: 25%; color: var(--text); font-weight: var(--weight-semibold); }
.guide-table tbody td { color: var(--muted); }
.guide-table tr:last-child th, .guide-table tr:last-child td { border-bottom: 0; }

.guide-checklist { list-style: none; counter-reset: guide-check; padding: 0; margin: var(--space-8) 0 0;
                   display: flex; flex-direction: column; gap: var(--space-3); }
.guide-checklist li { counter-increment: guide-check; display: grid; grid-template-columns: 32px 1fr;
                      column-gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border);
                      border-radius: var(--radius-xl); background: var(--panel); }
.guide-checklist li::before { content: counter(guide-check); grid-row: span 2; display: grid; place-items: center;
                              width: 32px; height: 32px; border-radius: 50%; color: var(--accent);
                              background: color-mix(in srgb, var(--accent) 10%, transparent);
                              font-size: var(--l-sm); font-weight: var(--weight-bold); }
.guide-checklist strong { align-self: end; font-size: var(--l-base); }
.guide-checklist span { color: var(--muted); font-size: var(--l-sm); }

.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
               margin: var(--space-8) 0; }
.guide-cards article { padding: var(--space-5); border: 1px solid var(--border);
                       border-radius: var(--radius-2xl); background: var(--panel); }
.guide-cards p { margin: 0; color: var(--muted); font-size: var(--l-sm); line-height: 1.6; }
.guide-cta { justify-content: flex-start; margin-top: var(--space-8); }
.guide-body .faq { max-width: none; margin-top: var(--space-8); }
.guide-reviewed { margin: 0; padding-top: var(--space-6); border-top: 1px solid var(--border);
                  color: var(--muted); font-size: var(--l-xs); line-height: 1.6; }

/* ---------- Crowsnest field notes ----------
   A four-story archive has no need to impersonate a CMS. The index uses one strong lead,
   a scan-first ledger, and product-derived editorial art; articles carry that same art into
   a quiet reading template. This is visual identity with meaning, not decoration. */
.journal { padding-bottom: clamp(88px, 11vw, 156px); }
.journal-masthead { padding-top: clamp(64px, 8vw, 104px); }
.journal-masthead .breadcrumbs { margin-bottom: clamp(52px, 7vw, 84px); }
.journal-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
                   align-items: end; gap: clamp(40px, 7vw, 96px); }
.journal-heading h1 { margin: var(--space-2) 0 0; font-size: clamp(64px, 9vw, 108px);
                      line-height: .9; letter-spacing: -.065em; }
.journal-heading p { max-width: 510px; margin: 0; color: var(--muted); font-size: var(--lede); line-height: 1.55; }
.journal-topics { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
                  margin-top: clamp(44px, 6vw, 72px); padding: var(--space-4) 0;
                  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.journal-topics strong { margin-right: var(--space-3); color: var(--text); font-size: var(--l-xs);
                         letter-spacing: .08em; text-transform: uppercase; }
.journal-topics a { padding: 7px 12px; color: var(--muted); border-radius: var(--radius-pill);
                    font-size: var(--l-sm); font-weight: var(--weight-medium); }
.journal-topics a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
.journal-topics .journal-rss { margin-left: auto; color: var(--accent); }

.journal-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
                   gap: clamp(36px, 6vw, 76px); align-items: center; padding-top: clamp(56px, 8vw, 96px);
                   padding-bottom: clamp(64px, 9vw, 112px); }
.journal-feature-visual { display: block; color: inherit; border-radius: 26px; }
.journal-feature-visual:hover { text-decoration: none; }
.journal-feature-visual:hover .editorial-art,
.journal-feature-visual:hover .journal-artifact { transform: translateY(-4px); box-shadow: var(--shadow-hero); }
.journal-artifact { position: relative; overflow: hidden; min-height: 500px; border: 1px solid var(--border);
                    border-radius: 26px; background: #eef0f5; box-shadow: 0 30px 70px -42px rgba(12,18,34,.65);
                    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.journal-artifact img { display: block; width: 100%; height: 100%; min-height: 500px; object-fit: cover;
                        object-position: 51% center; }
.journal-artifact span { position: absolute; right: var(--space-4); bottom: var(--space-4); padding: 7px 10px;
                         color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-pill);
                         background: rgba(14,18,29,.78); backdrop-filter: blur(8px); font-size: 10px;
                         font-weight: var(--weight-semibold); letter-spacing: .05em; text-transform: uppercase; }
.journal-feature-copy h2 { max-width: 13ch; margin: var(--space-5) 0; font-size: clamp(38px, 4.7vw, 60px);
                           line-height: 1.02; letter-spacing: -.055em; }
.journal-feature-copy > p { margin: 0 0 var(--space-7); color: var(--muted); line-height: 1.7; }
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
              color: var(--muted); font-size: var(--l-xs); letter-spacing: .04em; text-transform: uppercase; }
.story-meta strong { color: var(--accent); }
.story-meta > * + *::before { content: "·"; margin-right: var(--space-2); color: color-mix(in srgb, var(--muted) 55%, transparent); }
.story-read { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text);
              font-size: var(--l-sm); font-weight: var(--weight-semibold); }
.story-read .i { width: 17px; height: 17px; transition: transform var(--dur) var(--ease); }
.story-read:hover { color: var(--accent); text-decoration: none; }
.story-read:hover .i { transform: translateX(4px); }

/* The dark technical canvas gives the light publication one recurring piece of identity.
   Its three variants are diagrams of real product concepts: repair, orchestration, evidence. */
.editorial-art { position: relative; overflow: hidden; min-height: 500px; color: #eef2ff;
                 border: 1px solid rgba(255,255,255,.09); border-radius: 26px;
                 background:
                   linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
                   radial-gradient(circle at 80% 10%, rgba(67,118,255,.24), transparent 34%), #121620;
                 background-size: 30px 30px, 30px 30px, auto, auto;
                 box-shadow: 0 30px 70px -42px rgba(12,18,34,.65);
                 transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.art-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 58px;
               padding: 0 var(--space-5); border-bottom: 1px solid rgba(255,255,255,.09);
               color: rgba(238,242,255,.58); font-family: var(--mono); font-size: 11px; }
.art-toolbar b { justify-self: end; color: #83a7ff; font-weight: var(--weight-semibold); text-transform: uppercase; }
.art-dots { display: flex; gap: 6px; }
.art-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff675f; }
.art-dots i:nth-child(2) { background: #ffc04a; }
.art-dots i:nth-child(3) { background: #2bcf66; }
.art-transcript { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(28px, 5vw, 58px); }
.art-turn { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-4);
            padding: var(--space-4) var(--space-5); border: 1px solid rgba(255,255,255,.1);
            border-radius: var(--radius-xl); background: rgba(255,255,255,.035); }
.art-turn span, .art-turn b { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.art-turn span { color: #8fa4d6; }
.art-turn p { margin: 0; color: rgba(238,242,255,.76); font-size: var(--l-sm); }
.art-turn b { color: rgba(238,242,255,.4); font-weight: var(--weight-medium); }
.art-turn-edit { border-color: rgba(73,121,255,.7); background: rgba(37,99,235,.17);
                 box-shadow: 0 0 0 1px rgba(37,99,235,.18), 0 20px 50px -32px #2563eb; }
.art-turn-edit span, .art-turn-edit b { color: #8db0ff; }
.art-status { position: absolute; right: var(--space-5); bottom: var(--space-5); left: var(--space-5);
              display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4);
              border-top: 1px solid rgba(255,255,255,.09); color: rgba(238,242,255,.45);
              font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.art-status strong { margin-left: auto; color: #7ee2a8; font-weight: var(--weight-semibold); }

.journal-latest { padding-top: clamp(64px, 8vw, 104px); border-top: 1px solid var(--border); }
.journal-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8);
                        padding-bottom: var(--space-8); }
.journal-section-head h2 { margin: var(--space-2) 0 0; font-size: var(--display-2); letter-spacing: var(--track-2); }
.journal-section-head > span { max-width: 34ch; color: var(--muted); font-size: var(--l-sm); }
.story-ledger { border-top: 1px solid var(--border); }
.story-entry { display: grid; grid-template-columns: 48px minmax(0, 1fr) 210px 36px; gap: clamp(20px, 4vw, 52px);
               align-items: center; min-height: 250px; padding: var(--space-8) 0; border-bottom: 1px solid var(--border); }
.story-index { align-self: start; color: color-mix(in srgb, var(--muted) 72%, transparent);
               font-family: var(--mono); font-size: var(--l-xs); }
.story-entry-copy h3 { max-width: 22ch; margin: var(--space-4) 0 var(--space-3); font-family: var(--serif);
                       font-size: clamp(28px, 3.5vw, 42px); font-weight: 500; line-height: 1.08;
                       letter-spacing: -.045em; }
.story-entry-copy h3 a { color: var(--text); }
.story-entry-copy h3 a:hover { color: var(--accent); text-decoration: none; }
.story-entry-copy p { max-width: 58ch; margin: 0; color: var(--muted); }
.story-arrow { display: grid; place-items: center; width: 36px; height: 36px; color: var(--text);
               border: 1px solid var(--border); border-radius: 50%; background: var(--panel); }
.story-arrow:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); text-decoration: none; }
.story-arrow .i { width: 16px; height: 16px; }
.story-mini { position: relative; overflow: hidden; height: 142px; border-radius: var(--radius-2xl);
              border: 1px solid #242a38; background: #121620; }
.art-mini-crew { background-image: radial-gradient(circle at 30% 25%, rgba(37,99,235,.24), transparent 38%); }
.mini-node { position: absolute; z-index: 2; padding: 6px 9px; color: #cdd8f5; border: 1px solid #39445d;
             border-radius: 7px; background: #1b2230; font-family: var(--mono); font-size: 9px; }
.mini-node.lead { left: 14px; top: 55px; }
.mini-node.build { left: 78px; top: 24px; border-color: #376be3; }
.mini-node.review { right: 12px; bottom: 20px; border-color: #347558; }
.art-mini-crew i, .art-mini-crew b { position: absolute; z-index: 1; height: 1px; background: #46516b;
                                    transform-origin: left center; }
.art-mini-crew i { left: 50px; top: 66px; width: 55px; transform: rotate(-28deg); }
.art-mini-crew b { left: 111px; top: 47px; width: 70px; transform: rotate(40deg); }
.art-mini-usage { display: flex; flex-direction: column; justify-content: center; gap: 17px; padding: var(--space-5); }
.art-mini-usage span { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: var(--space-3);
                       color: #aeb9d2; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.art-mini-usage i { position: relative; height: 5px; overflow: hidden; border-radius: 4px; background: #293047; }
.art-mini-usage i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); border-radius: inherit;
                           background: #4f7cff; }
.art-mini-usage b { color: #7ee2a8; font-family: var(--mono); font-size: 9px; font-weight: 500; text-transform: uppercase; }
.art-mini-account { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
                    gap: 9px; padding: var(--space-4); }
.art-mini-account span { display: grid; place-items: center; min-width: 0; height: 62px;
                         color: #cdd8f5; border: 1px solid #39445d; border-radius: 8px;
                         background: #1b2230; font-family: var(--mono); font-size: 9px; }
.art-mini-account span:first-child { border-left: 3px solid #4f7cff; }
.art-mini-account span:last-child { border-left: 3px solid #e56b35; }
.art-mini-account i { color: #7ee2a8; font-style: normal; font-size: 18px; }
.art-mini-account b { grid-column: 1 / -1; color: #8292b8; font-family: var(--mono);
                      font-size: 8px; font-weight: 500; text-align: center; text-transform: uppercase; }
/* The remote card shows the one thing the post is about: two machines, one link. The dashes
   are the SSH stream; the label stays mono because it is a destination, not prose. */
.art-mini-remote { background-image: radial-gradient(circle at 72% 30%, rgba(37,99,235,.2), transparent 42%); }
.mini-node.here { left: 14px; top: 58px; }
.mini-node.there { right: 14px; top: 58px; border-color: #376be3; }
.art-mini-remote i { position: absolute; left: 66px; top: 71px; z-index: 1; width: 62px; height: 0;
                     border-top: 1px dashed #4f7cff; }
.art-mini-remote b { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2; color: #8f9ab4;
                     font-family: var(--mono); font-size: 9px; font-weight: 500; text-align: center;
                     text-transform: uppercase; letter-spacing: .08em; }

/* The storage card is the record chain the post is about: four linked lines, one of them the
   turn you came back for. Mono throughout because every label is a literal from the file. */
.art-mini-history { display: flex; flex-direction: column; justify-content: center; gap: 9px;
                    padding: var(--space-5); }
.art-mini-history span { display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 10px;
                         color: #aeb9d2; font-family: var(--mono); font-size: 9px; }
.art-mini-history span::before { content: ""; width: 8px; height: 8px; border: 1px solid #46516b;
                                 border-radius: 50%; background: #1b2230; }
.art-mini-history span.found { color: #cdd8f5; }
.art-mini-history span.found::before { border-color: #4f7cff; background: #4f7cff; }
.art-mini-history b { margin-top: 4px; color: #8292b8; font-family: var(--mono); font-size: 8px;
                      font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }

/* Four panes, one of them holding an approval. The point of the card is that the isolated
   panes are not the same colour as the one sharing a checkout. */
.art-mini-parallel { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr auto;
                     gap: 7px; padding: var(--space-4); }
.art-mini-parallel span { display: grid; place-items: center; min-width: 0; color: #aeb9d2;
                          border: 1px solid #39445d; border-radius: 7px; background: #1b2230;
                          font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.art-mini-parallel span.shared { color: #f0b8ab; border-color: #8d4535; border-style: dashed; }
.art-mini-parallel b { grid-column: 1 / -1; color: #8292b8; font-family: var(--mono); font-size: 8px;
                       font-weight: 500; text-align: center; text-transform: uppercase; letter-spacing: .08em; }

/* Handoff: the source stays put and a branch leaves it. Drawn as a corner rather than a straight
   arrow so it reads as a fork and not as a transfer. */
.art-mini-handoff { background-image: radial-gradient(circle at 78% 62%, rgba(37,99,235,.2), transparent 44%); }
.mini-node.source { left: 14px; top: 34px; }
.mini-node.forked { right: 14px; bottom: 30px; border-color: #376be3; }
.art-mini-handoff i, .art-mini-handoff u { position: absolute; z-index: 1; border-color: #4f7cff; }
.art-mini-handoff i { left: 41px; top: 64px; width: 0; height: 33px; border-left: 1px dashed #4f7cff; }
.art-mini-handoff u { left: 41px; top: 96px; width: 107px; height: 0; border-top: 1px dashed #4f7cff; }
.art-mini-handoff b { position: absolute; left: 0; right: 0; top: 12px; z-index: 2; color: #8f9ab4;
                      font-family: var(--mono); font-size: 8px; font-weight: 500; text-align: center;
                      text-transform: uppercase; letter-spacing: .08em; }

.journal-guide { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center;
                 gap: clamp(20px, 4vw, 52px); margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(36px, 5vw, 56px);
                 padding-bottom: clamp(36px, 5vw, 56px); border-top: 1px solid var(--accent);
                 border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
                 background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 68%); }
.journal-guide .story-index { align-self: center; }
.journal-guide h2 { max-width: 22ch; margin: var(--space-2) 0 var(--space-3); font-size: var(--display-2);
                     line-height: 1.08; letter-spacing: var(--track-2); }
.journal-guide p { max-width: 66ch; margin: 0; color: var(--muted); }
.journal-promise { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
                   gap: clamp(40px, 8vw, 110px); padding-top: clamp(80px, 10vw, 132px); }
.journal-promise h2 { max-width: 16ch; margin: var(--space-3) 0 0; font-size: var(--display-2);
                      line-height: 1.08; letter-spacing: var(--track-2); }
.journal-promise p { max-width: 58ch; margin: 0 0 var(--space-5); color: var(--muted); }
.journal-promise a { font-size: var(--l-sm); font-weight: var(--weight-semibold); }

/* Article pages use the publication cover above the reading column. The guide route keeps
   its comparison-oriented hero; only BlogPosting pages opt into this calmer template. */
.article-page .article-hero { padding: clamp(64px, 8vw, 104px) 0 clamp(56px, 8vw, 96px); text-align: left; }
.article-page .article-head { max-width: 1000px; }
.article-page .breadcrumbs { margin-bottom: clamp(52px, 7vw, 84px); }
.article-page .article-topic { color: var(--accent); }
.article-page .article-hero h1 { max-width: 17ch; margin: var(--space-4) 0 var(--space-5);
                                font-size: clamp(48px, 6.7vw, 82px); line-height: .98;
                                letter-spacing: -.06em; }
.article-page .article-dek { max-width: 760px; margin: 0; color: var(--muted);
                             font-size: clamp(19px, 2vw, 24px); line-height: 1.55; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
                gap: var(--space-2); margin: var(--space-6) 0 0; color: var(--muted);
                font-size: var(--l-xs); letter-spacing: .05em; text-transform: uppercase; }
.article-meta time { color: var(--text); font-weight: var(--weight-semibold); }
.article-meta > * + *::before { content: "·"; margin-right: var(--space-2); color: color-mix(in srgb, var(--muted) 55%, transparent); }
.article-page .editorial-art { min-height: 520px; margin-top: clamp(44px, 6vw, 72px); }
.article-artifact { margin: clamp(44px, 6vw, 72px) 0 0; }
.artifact-frame { position: relative; display: block; overflow: hidden; color: inherit; border: 1px solid var(--border); border-radius: 26px;
                  background: #eef0f5; box-shadow: 0 32px 72px -46px rgba(12,18,34,.7); }
.artifact-frame:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); text-decoration: none; }
.artifact-frame img, .artifact-frame video { display: block; width: 100%; height: auto; }
/* A drawn artifact instead of a screenshot. `.artifact-frame` keeps its light surface in both
   themes, so the diagram's own dark strokes stay legible without a second palette. */
.artifact-diagram { background: #f4f5f8; }
.artifact-diagram svg { display: block; width: 100%; height: auto; }
.artifact-video { background: #10131a; }
.artifact-video video { aspect-ratio: 1668 / 1080; object-fit: cover; cursor: pointer; }
.article-artifact figcaption, .artifact-compare figcaption { margin-top: var(--space-3); color: var(--muted);
                                                            font-size: var(--l-xs); line-height: 1.55; }
.article-artifact figcaption span { margin-right: var(--space-2); color: var(--accent); font-weight: var(--weight-semibold);
                                    letter-spacing: .06em; text-transform: uppercase; }
.artifact-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
                    margin: var(--space-8) 0 var(--space-10); }
.artifact-compare > a { position: relative; display: block; overflow: hidden; color: inherit; border: 1px solid var(--border);
                          border-radius: var(--radius-xl); background: #eef0f5; box-shadow: var(--shadow-sm); }
.artifact-compare > a:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); text-decoration: none; }
.artifact-compare img { display: block; width: 100%; height: 100%; min-height: 245px; object-fit: cover;
                        object-position: 51% center; }
.artifact-compare > a > span { position: absolute; z-index: 1; top: var(--space-3); left: var(--space-3);
                                padding: 6px 9px; color: #fff; border-radius: var(--radius-pill);
                                background: rgba(14,18,29,.78); backdrop-filter: blur(8px); font-size: 9px;
                                font-weight: var(--weight-semibold); letter-spacing: .05em; text-transform: uppercase; }
.artifact-compare figcaption { grid-column: 1 / -1; margin-top: 0; }
.article-page .guide-answer { max-width: none; margin: 0 0 clamp(52px, 7vw, 80px); padding: var(--space-6) 0 var(--space-6) var(--space-6);
                              border-width: 0 0 0 2px; border-radius: 0; background: transparent; box-shadow: none; }
.article-page .guide-answer strong { color: var(--muted); }
.article-page .guide-answer p { max-width: 690px; font-size: var(--l-lg); line-height: 1.65; }
.article-page .guide-layout { grid-template-columns: 190px minmax(0, 740px); gap: clamp(44px, 7vw, 88px); }
.article-page .guide-body > section { padding: clamp(64px, 7vw, 92px) 0; }
.article-page .guide-body > section:first-of-type { padding-top: 0; border-top: 0; }
.article-page .guide-body section > p { color: color-mix(in srgb, var(--text) 84%, var(--muted));
                                      font-size: 1.1rem; line-height: 1.78; }
.article-page .article-list { color: color-mix(in srgb, var(--text) 82%, var(--muted));
                              font-size: 1.05rem; line-height: 1.72; }

/* Crew cover: the SVG connectors remain presentation-only while the labels show the reviewed
   dependency sequence at a glance. */
.crew-art-board { position: relative; min-height: 385px; margin: 0 clamp(20px, 5vw, 64px); }
.crew-art-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.crew-art-board path { fill: none; stroke: #3d4a68; stroke-width: 1.5; }
.crew-art-board path.ready { stroke: #4e7fff; }
.crew-art-node { position: absolute; min-width: 124px; padding: var(--space-3) var(--space-4);
                 border: 1px solid #39445d; border-radius: var(--radius-lg); background: #1a202d;
                 box-shadow: 0 14px 34px -24px #000; }
.crew-art-node span { display: block; margin-bottom: 3px; color: #8292b8; font-family: var(--mono);
                      font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.crew-art-node strong { color: #eef2ff; font-size: var(--l-sm); }
.crew-art-node.lead { left: 2%; top: 42%; border-color: #4e7fff; }
.crew-art-node.research { left: 29%; top: 13%; }
.crew-art-node.build { left: 29%; bottom: 12%; }
.crew-art-node.integrate { right: 24%; top: 41%; border-color: #4e7fff; }
.crew-art-node.review { right: 1%; top: 41%; border-color: #347558; }

.usage-art-board { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px);
                   padding: clamp(32px, 5vw, 62px); }
.usage-art-bars { display: flex; flex-direction: column; gap: var(--space-6); }
.usage-art-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; }
.usage-art-row span { color: #9eabc9; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.usage-art-row strong { color: #eef2ff; font-family: var(--mono); font-size: var(--l-sm); }
.usage-art-row i { grid-column: 1 / -1; position: relative; overflow: hidden; height: 8px;
                   border-radius: 8px; background: #293047; }
.usage-art-row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value);
                          border-radius: inherit; background: linear-gradient(90deg, #386ef2, #7ea2ff); }
.usage-art-evidence { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5);
                      padding: var(--space-5); border: 1px solid #30394e; border-radius: var(--radius-xl);
                      background: rgba(255,255,255,.035); }
.usage-art-evidence > span { color: #8190b2; font-family: var(--mono); font-size: 9px;
                             letter-spacing: .08em; text-transform: uppercase; }
.usage-art-evidence strong { color: #eef2ff; font-size: clamp(24px, 3vw, 38px); line-height: 1.05; }
.usage-art-evidence p { margin: 0; color: #a7b2ca; font-size: var(--l-sm); }
.usage-art-evidence b { color: #7ee2a8; font-family: var(--mono); font-size: 9px;
                        font-weight: 500; text-transform: uppercase; }

/* Multiple-account diagrams carry the released routing rules as ordinary HTML rather than a
   raster screenshot: the words remain searchable, the values resize, and narrow readers do not
   have to zoom a desktop SVG to discover what the arrows mean. */
.account-artifact { background: #10141d; }
.account-art-board { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
                     align-items: center; gap: clamp(18px, 4vw, 42px);
                     min-height: 410px; padding: clamp(28px, 6vw, 72px); }
.account-art-card { display: flex; min-width: 0; min-height: 190px; flex-direction: column;
                    justify-content: center; gap: 10px; padding: clamp(20px, 3vw, 30px);
                    border: 1px solid #343e55; border-radius: var(--radius-xl);
                    background: #1a202d; box-shadow: 0 22px 42px -30px #000; }
.account-art-card::before { content: ""; width: 34px; height: 4px; margin-bottom: var(--space-2);
                            border-radius: var(--radius-pill); background: #4f7cff; }
.account-art-card.is-work::before { background: #e56b35; }
.account-art-card span { color: #8fa0c3; font-family: var(--mono); font-size: 10px;
                         letter-spacing: .08em; text-transform: uppercase; }
.account-art-card strong { color: #f5f7ff; font-size: clamp(18px, 2vw, 23px); }
.account-art-card code { overflow: hidden; color: #b5c1dc; font-family: var(--mono);
                         font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-art-card small { color: #8492ae; font-size: var(--l-xs); }
.account-art-fork { display: flex; min-width: 0; flex-direction: column; align-items: center;
                    gap: 7px; color: #8292b8; font-family: var(--mono); text-align: center; }
.account-art-fork span { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.account-art-fork b { color: #7ee2a8; font-size: 36px; font-weight: 400; line-height: 1; }
.account-art-fork small { max-width: 16ch; font-size: 9px; line-height: 1.45; }
.account-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3);
                 margin: var(--space-8) 0; }
.account-facts > div { min-width: 0; padding: var(--space-4); border: 1px solid var(--border);
                       border-radius: var(--radius-lg); background: var(--panel); }
.account-facts span, .account-facts small { display: block; color: var(--muted);
                                            font-size: var(--l-xs); line-height: 1.45; }
.account-facts strong { display: block; margin: var(--space-2) 0 3px; color: var(--text);
                        font-size: clamp(25px, 3vw, 34px); letter-spacing: -.035em; }
.account-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
                list-style: none; margin: var(--space-8) 0 var(--space-5); padding: 0; }
.account-flow li { position: relative; min-width: 0; padding: var(--space-5);
                   border: 1px solid var(--border); border-radius: var(--radius-xl);
                   background: var(--panel); }
.account-flow li::before { content: counter(list-item, decimal-leading-zero); display: block;
                           margin-bottom: var(--space-8); color: var(--accent);
                           font-family: var(--mono); font-size: var(--l-xs); }
.account-flow span { display: block; margin-bottom: var(--space-2); color: var(--muted);
                     font-size: var(--l-xs); letter-spacing: .06em; text-transform: uppercase; }
.account-flow strong { display: block; margin-bottom: var(--space-3); color: var(--text);
                       font-size: var(--l-lg); line-height: 1.25; }
.account-flow p { margin: 0; color: var(--muted); font-size: var(--l-sm); line-height: 1.65; }
.account-route { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
                 margin: var(--space-8) 0 var(--space-5); }
.account-route-case { min-width: 0; padding: var(--space-5); border: 1px solid var(--border);
                      border-radius: var(--radius-xl); background: var(--panel); }
.account-route-case > strong { display: block; margin-bottom: var(--space-6); font-size: var(--l-base); }
.account-route-case > div { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                            gap: 7px var(--space-3); margin-top: var(--space-5); }
.account-route-case span { font-size: var(--l-sm); font-weight: var(--weight-semibold); }
.account-route-case small { color: var(--muted); font-size: var(--l-xs); }
.account-route-case i { grid-column: 1 / -1; position: relative; overflow: hidden; height: 7px;
                        border-radius: var(--radius-pill); background: color-mix(in srgb, var(--muted) 18%, transparent); }
.account-route-case i b { position: absolute; inset: 0 auto 0 0; width: var(--value);
                          border-radius: inherit; background: #718096; }
.account-route-case .picked { padding: var(--space-3); border-radius: var(--radius-md);
                              background: color-mix(in srgb, var(--accent) 8%, transparent); }
.account-route-case .picked i b { background: var(--accent); }
.account-route-case .picked small { color: var(--accent); }
.article-list { margin: 0 0 var(--space-5); padding-left: 1.25em; color: var(--muted); }
.article-list li { margin: 0 0 var(--space-3); padding-left: var(--space-2); }
.article-list strong { color: var(--text); }
.article-steps { list-style: none; padding: 0; margin: var(--space-8) 0 0; counter-reset: article-step; }
.article-steps li { counter-increment: article-step; position: relative; padding: 0 0 var(--space-7) 52px; }
.article-steps li:last-child { padding-bottom: 0; }
.article-steps li::before { content: counter(article-step); position: absolute; left: 0; top: -3px; display: grid;
                            place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff;
                            background: var(--accent); font-size: var(--l-sm); font-weight: var(--weight-bold); }
.article-steps li::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px;
                           width: 1px; background: var(--border); }
.article-steps li:last-child::after { display: none; }
.article-steps h3 { margin-bottom: var(--space-2); }
.article-steps p { margin: 0; color: var(--muted); }
.article-code { padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-xs);
                background: color-mix(in srgb, var(--bg) 70%, var(--panel)); font-family: var(--mono);
                font-size: .9em; }
.article-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
                   margin-top: var(--space-8); }
.article-related a { display: block; padding: var(--space-5); color: var(--text); border: 1px solid var(--border);
                     border-radius: var(--radius-xl); background: var(--panel); font-weight: var(--weight-semibold); }
.article-related a:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); text-decoration: none; }
.article-related small { display: block; margin-bottom: var(--space-2); color: var(--accent);
                         font-size: var(--l-xs); letter-spacing: .06em; text-transform: uppercase; }
.article-source { font-size: var(--l-sm); }

/* ---------- website analytics consent ----------
   Consent stays a compact, non-modal choice: the page remains fully usable, focus is
   never trapped, and the controls use the same quiet panel/accent grammar as the site. */
.analytics-consent { position: fixed; z-index: 1000; right: var(--space-5); bottom: var(--space-5);
                     display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
                     gap: var(--space-5); width: min(680px, calc(100vw - 40px)); padding: var(--space-5);
                     border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
                     border-radius: var(--radius-2xl); background: var(--panel); box-shadow: var(--shadow-pop); }
.analytics-consent-copy strong { display: block; margin-bottom: var(--space-1); color: var(--text);
                                 font-size: var(--l-base); }
.analytics-consent-copy p { margin: 0; color: var(--muted); font-size: var(--l-sm); line-height: 1.55; }
.analytics-consent-actions, .analytics-settings-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.analytics-consent button, .analytics-settings button { min-height: 42px; padding: 9px 15px; cursor: pointer;
                                                        border: 1px solid var(--border); border-radius: var(--radius-btn);
                                                        background: var(--bg); color: var(--text); font: inherit;
                                                        font-size: var(--l-sm); font-weight: var(--weight-semibold); }
.analytics-consent button:hover, .analytics-settings button:hover { border-color: var(--accent); }
.analytics-consent .analytics-consent-allow,
.analytics-settings button[data-analytics-choice="allow"] { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.analytics-settings { margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--border);
                      border-radius: var(--radius-xl); background: var(--panel); }
.analytics-settings [data-analytics-status] { margin: 0 0 var(--space-4); color: var(--text); }
.analytics-settings button[aria-pressed="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

@media (max-width: 600px) {
  .analytics-consent { right: var(--space-3); bottom: var(--space-3); grid-template-columns: 1fr;
                       width: calc(100vw - 24px); gap: var(--space-4); padding: var(--space-4); }
  .analytics-consent-actions { justify-content: stretch; }
  .analytics-consent-actions button { flex: 1; }
}

@media (max-width: 900px) {
  .guide-layout { grid-template-columns: minmax(0, 760px); }
  .guide-toc { position: static; flex-direction: row; flex-wrap: wrap; align-items: center;
               gap: var(--space-2); padding-bottom: var(--space-4); border-left: 0;
               border-bottom: 1px solid var(--border); }
  .guide-toc strong { width: 100%; padding: 0; }
  .guide-toc a { margin: 0; padding: 6px 10px; border: 0; border-radius: var(--radius-pill);
                 background: var(--panel); }
  .journal-heading, .journal-feature, .journal-promise { grid-template-columns: 1fr; }
  .journal-heading { align-items: start; }
  .journal-feature { gap: var(--space-8); }
  .journal-feature-copy { max-width: 680px; }
  .journal-feature-copy h2 { max-width: 16ch; }
  .story-entry { grid-template-columns: 38px minmax(0, 1fr) 170px 36px; gap: var(--space-5); }
  .article-page .guide-layout { grid-template-columns: minmax(0, 740px); }
}
@media (max-width: 600px) {
  .guide-hero { padding-top: 56px; }
  .breadcrumbs { margin-bottom: var(--space-8); }
  .guide-answer { padding: var(--space-5); }
  .guide-cards { grid-template-columns: 1fr; }
  .guide-checklist li { grid-template-columns: 28px 1fr; column-gap: var(--space-3); padding: var(--space-4); }
  .guide-checklist li::before { width: 28px; height: 28px; }
  .article-related { grid-template-columns: 1fr; }
  .journal-masthead { padding-top: 48px; }
  .journal-masthead .breadcrumbs { margin-bottom: var(--space-10); }
  .journal-heading { gap: var(--space-6); }
  .journal-heading h1 { font-size: clamp(58px, 22vw, 82px); }
  .journal-heading p { font-size: var(--l-body); }
  .journal-topics { align-items: flex-start; gap: var(--space-1); }
  .journal-topics strong { width: 100%; margin: 0 0 var(--space-2); }
  .journal-topics a { padding-inline: 8px; }
  .journal-topics .journal-rss { margin-left: 0; }
  .journal-feature { padding-top: var(--space-10); }
  .journal-artifact, .journal-artifact img { min-height: 360px; }
  .journal-artifact { border-radius: var(--radius-2xl); }
  .journal-artifact span { right: var(--space-3); bottom: var(--space-3); max-width: calc(100% - 24px);
                           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .editorial-art, .article-page .editorial-art { min-height: 360px; border-radius: var(--radius-2xl); }
  .art-toolbar { grid-template-columns: auto 1fr; gap: var(--space-3); min-height: 48px; }
  .art-toolbar > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .art-toolbar b { display: none; }
  .art-transcript { gap: 10px; padding: var(--space-5) var(--space-4); }
  .art-turn { grid-template-columns: 44px 1fr; gap: var(--space-2); padding: var(--space-3); }
  .art-turn b { display: none; }
  .art-turn p { font-size: 12px; line-height: 1.45; }
  .art-status { right: var(--space-4); bottom: var(--space-4); left: var(--space-4); gap: var(--space-2);
                white-space: nowrap; }
  .art-status span:nth-child(2) { display: none; }
  .story-meta > * + *::before, .article-meta > * + *::before { display: none; }
  .story-meta, .article-meta { column-gap: var(--space-3); row-gap: var(--space-2); }
  .journal-feature-copy h2 { font-size: clamp(34px, 11vw, 46px); }
  .journal-section-head { align-items: start; flex-direction: column; gap: var(--space-3); }
  .story-entry { grid-template-columns: 32px minmax(0, 1fr) 32px; min-height: 0; gap: var(--space-3);
                 padding: var(--space-8) 0; }
  .story-mini { display: none; }
  .story-entry-copy h3 { font-size: clamp(27px, 8vw, 36px); }
  .story-arrow { width: 32px; height: 32px; }
  .journal-guide { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); }
  .journal-guide .story-read { grid-column: 2; }
  .journal-promise { gap: var(--space-8); }
  .article-page .article-hero { padding-top: 48px; }
  .article-page .breadcrumbs { margin-bottom: var(--space-10); }
  .article-page .article-hero h1 { font-size: clamp(42px, 13.4vw, 58px); }
  /* A three-subject field-note headline can contain a single word wider than the mobile
     measure at the default article scale. Keep the house face and hierarchy, but give those
     explicitly marked titles enough characters per line to remain inside the viewport. */
  .article-page .article-hero h1.article-title-compact { max-width: 100%;
                                                         font-size: clamp(38px, 11vw, 48px); }
  .article-page .article-dek { font-size: var(--l-body); }
  .artifact-frame { border-radius: var(--radius-xl); }
  .artifact-compare { grid-template-columns: 1fr; }
  .artifact-compare figcaption { grid-column: 1; }
  .artifact-compare img { min-height: 220px; }
  .article-page .guide-answer { padding-left: var(--space-5); }
  .article-page .guide-answer p { font-size: var(--l-body); }
  .crew-art-board { min-height: 300px; margin-inline: var(--space-3); }
  .crew-art-node { min-width: 0; padding: 8px 9px; }
  .crew-art-node strong { font-size: 11px; }
  .crew-art-node span { display: none; }
  .crew-art-node.lead { left: 1%; }
  .crew-art-node.research, .crew-art-node.build { left: 25%; }
  .crew-art-node.integrate { right: auto; left: 42%; }
  .crew-art-node.review { right: 1%; }
  .usage-art-board { grid-template-columns: 1fr; padding: var(--space-5); }
  .usage-art-evidence { min-height: 150px; }
  .account-art-board { grid-template-columns: 1fr; min-height: 0; gap: var(--space-4);
                       padding: var(--space-5); }
  .account-art-card { min-height: 145px; }
  .account-art-fork b { transform: rotate(90deg); }
  .account-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-flow, .account-route { grid-template-columns: 1fr; }
}