/* ==========================================================================
   TAZM design system — Website Mission 1 (foundation)
   Specification: WEBSITE_SPEC_V1.md §1 (design direction) + v1.1 §43–46.

   Palette tokens are taken from the EXISTING application shell
   (frontend/index.html) rather than invented, so the marketing site and the
   product do not drift into two different visual systems.

   No build step, no framework, no runtime dependency. The repository serves
   static HTML through FastAPI; v1.1 §44 requires avoiding unnecessary
   JavaScript and dependencies, so this is plain CSS.
   ========================================================================== */

:root {
  /* ---- ground: warm bone, the way cursor.com sits ------------------------
     Studied from cursor.com: #EBEAE5 / #F7F7F4 / #FFFFFF on the light side,
     #1D1B15–#26251E on the dark. The near-blacks are olive-warm rather than
     neutral, which is what stops a light page feeling clinical. */
  --bg:        #F7F7F4;
  --surface-1: #FFFFFF;
  --surface-2: #EBEAE5;
  --surface-3: #E2E0D8;
  --line:      rgba(29, 27, 21, 0.10);
  --line-2:    rgba(29, 27, 21, 0.16);

  /* ---- ink ---------------------------------------------------------------- */
  --text:   #1D1B15;
  --text-2: #5A574C;
  --text-3: #726D61;

  /* ---- dark inset: product surfaces stay dark on the light page ----------
     Cursor shows its product on near-black panels inset into the light
     ground. That also keeps the marketing console looking like the actual
     TAZM application, which is dark. */
  --ink-bg:    #1D1B15;
  --ink-bg-2:  #26251E;
  --ink-line:  rgba(255, 255, 255, 0.10);
  --ink-text:  #F4F2EC;
  --ink-text-2:#A8A395;
  --ink-text-3:#918B7D;

  /* ---- accent: the landing page's blue, which is the application's too ----
     CHANGED 2026-09-21 (owner). This was TAZM mint, #0C7D5C. The landing page
     and the signed-in application had both already moved to #047857 -- see
     `.landing`'s --l-accent below and --color-accent in ui/src/index.css --
     so the marketing pages were the only surface still green, and a visitor
     crossing from the landing page to /new-app watched the brand change
     colour.

     THREE VALUES, NOT ONE, and that is copied from the application rather
     than invented. #047857 is the brand: fills, borders, dots, marks, and
     white on it reaches 4.86:1. It is NOT safe as small text on this bone
     ground -- 4.53:1 on --bg and 4.04:1 on --surface-2, which is below AA.
     So text on a light ground uses --accent-text (6.47:1 on --bg, 5.77:1 on
     --surface-2), and anything sitting on an ink panel uses --accent-on-ink
     (9.97:1 on --ink-bg). The mint it replaced had the same flaw and shipped
     with it: 4.25:1 on --surface-2.

     --ok STAYS GREEN. It means "passed", "healthy", "available" -- a meaning,
     not a brand. Folding it into the accent would make a success state and a
     section eyebrow the same colour. */
  --accent:        #047857;
  --accent-hi:     #065F46;
  --accent-ink:    #FFFFFF;
  --accent-text:   #065F46;
  --accent-on-ink: #6EE7B7;
  --accent-dim:  rgba(4, 120, 87, 0.10);
  --accent-line: rgba(4, 120, 87, 0.28);

  /* ---- status: meaning only ----------------------------------------------- */
  --ok: #0C7D5C;   --ok-dim: rgba(12, 125, 92, 0.10);  --ok-line: rgba(12, 125, 92, 0.28);
  --warn: #A86A08; --warn-dim: rgba(168, 106, 8, 0.10); --warn-line: rgba(168, 106, 8, 0.28);
  --bad: #B5361F;  --bad-dim: rgba(181, 54, 31, 0.10);  --idle: #726D61;
  --idle-dim: rgba(29, 27, 21, 0.06);
  --info: #2C6E9B;

  /* ---- type --------------------------------------------------------------
     CursorGothic and Berkeley Mono are proprietary. Instrument Sans has a
     comparable warm geometric character; JetBrains Mono stands in for the
     mono. Neither is a lookalike of a licensed face. */
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.125rem;
  --step-2:  1.5rem;
  --step-3:  2.125rem;
  --step-4:  3rem;
  --step-5:  4rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px; --s-10: 160px;

  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --container: 1200px;
  --measure: 58ch;

  --header-h: 64px;
}

/* ==========================================================================
   reset
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* §44: the animated hero panel and status strip must not shift layout.
     G265: `clip`, NOT `hidden`. `overflow-x: hidden` makes the body a scroll
     container, and a scroll container breaks `position: sticky` for every
     descendant -- which the pinned control-plane section depends on. `clip`
     contains the overflow identically and creates no scroll container, so
     both properties hold at once. Where `clip` is unsupported the page falls
     back to no containment rather than to a broken pin, which is the safer
     of the two failures. */
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
p { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   accessibility foundation (§43)
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: var(--s-2); left: var(--s-2);
  transform: translateY(-200%);
  background: var(--accent); color: var(--accent-ink);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none; z-index: 100;
}
.skip-link:focus { transform: translateY(0); }

/* §43: respect prefers-reduced-motion for every animated surface.
   G265: THE TIMING RULES ARE NOT ENOUGH ONCE THERE IS A REVEAL SYSTEM.
   Shortening a duration does nothing for an element resting at `opacity: 0`
   waiting for an observer that will never fire -- there is no animation to
   shorten, the element is simply invisible. So the resting state is restored
   too. This is the difference between "the motion is off" and "the page is
   blank", and only the second one is a bug nobody notices until a reader with
   reduced motion enabled cannot read the site. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* SCOPED TO THE REVEAL CLASSES, never to `*`.
     The first version of this put `transform: none !important` on every
     element, which is wrong in a way that is worse than the bug it fixed:
     this stylesheet uses `transform` for LAYOUT in four places -- two
     centring translations, a rotated arrow at the mobile breakpoint, and
     `.skip-link`, which is parked off-screen with `translateY(-200%)`.
     Cancelling that pins the skip link visible at the top of every page, for
     precisely the readers most likely to be using assistive technology. An
     accessibility fix that breaks accessibility is the shape this codebase
     keeps recording; the restore only touches classes that exist to be
     revealed. */
  .fade-rise, .fade-left, .fade-right, .blur-sharpen,
  .stagger-children > *, .line-draw, .progress-fill {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-7); }

/* Marketing pages get large negative space; dashboards get density (§1). */
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cluster {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--s-3);
}

/* ==========================================================================
   typography
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.display, .h1, .h2 {
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}
.display { font-size: var(--step-5); }
.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.h4 { font-size: var(--step-1); }

.lede { font-size: var(--step-1); color: var(--text-2); max-width: var(--measure); }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); font-size: var(--step--1); }

/* Monospace for mission state, evidence, logs, status, cost, counters (§1). */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 10px var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: var(--step-0);
  line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hi); }

.btn--secondary { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn--secondary:hover:not(:disabled) { border-color: var(--accent-line); background: var(--surface-2); }

.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-1); }

.btn--lg { padding: 14px var(--s-5); font-size: var(--step-1); }

/* ==========================================================================
   cards — thin borders, dark raised panels (v1.1 design system)
   ========================================================================== */

.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card--raised { background: var(--surface-2); }

.card__title { font-size: var(--step-1); font-weight: 600; }
.card__body { color: var(--text-2); }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ==========================================================================
   status badges (§35)

   Status is NEVER conveyed by colour alone (§43): every badge carries a
   glyph and a text label. The glyph is decorative and hidden from assistive
   technology because the label already says it.
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 3px var(--s-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--surface-2);
}
.badge::before { content: "○"; font-size: 0.9em; line-height: 1; }

.badge--healthy   { color: var(--ok);   border-color: var(--ok-line);  background: var(--ok-dim); }
.badge--healthy::before   { content: "●"; }
.badge--working   { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-dim); }
.badge--working::before   { content: "◐"; }
.badge--waiting   { color: var(--warn); border-color: var(--warn-line); background: var(--warn-dim); }
.badge--waiting::before   { content: "◔"; }
.badge--paused    { color: var(--text-2); }
.badge--paused::before    { content: "⏸"; }
.badge--needs-you { color: var(--warn); border-color: var(--warn); background: var(--warn-dim); }
.badge--needs-you::before { content: "!"; font-weight: 700; }
.badge--unavailable { color: var(--idle); border-color: var(--idle-dim); }
.badge--unavailable::before { content: "○"; }
.badge--failed    { color: var(--bad);  border-color: var(--bad-dim);  background: var(--bad-dim); }
.badge--failed::before    { content: "×"; font-weight: 700; }

/* Product-truth labels (§34). Deliberately quieter than status badges: an
   availability label is a claim about the product, not a live signal. */
.label {
  display: inline-flex; align-items: center;
  padding: 2px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.label--available { color: var(--ok); border-color: var(--ok-line); }
.label--beta { color: var(--accent-text); border-color: var(--accent-dim); }
.label--in-development { color: var(--warn); border-color: var(--warn-line); }
.label--planned { color: var(--text-3); }
.label--unavailable { color: var(--text-3); opacity: 0.7; }

/* ==========================================================================
   header / navigation (§2, v1.1 §A2, §A3)

   Sign In and Create Account are visible on desktop, never behind a
   hamburger. On mobile they stay in the bar; the section links collapse.
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(247, 247, 244, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex; align-items: center; gap: var(--s-6);
  width: 100%;
}

.wordmark {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: var(--s-5); }
.site-nav a {
  color: var(--text-2); text-decoration: none;
  font-size: var(--step-0);
  transition: color 120ms ease;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); }

.site-header__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }

/* ==========================================================================
   footer (§27)
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-6);
  margin-top: var(--s-10);
  color: var(--text-3);
  font-size: var(--step--1);
}
.site-footer h2 {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--s-2); }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   placeholder — Mission 1 only

   Marks a region whose content is authorised for a LATER mission. It is
   deliberately unattractive so it cannot be mistaken for finished work or
   screenshotted as a shipping claim (§34).
   ========================================================================== */

.placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-align: center;
}

/* ==========================================================================
   responsive (§46)  — marketing fully responsive, desktop-first product
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --step-5: 3rem; --step-4: 2.25rem; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --step-5: 2.5rem; --step-4: 2rem; --step-3: 1.625rem; }
  .container { padding-inline: var(--s-4); }
  .section { padding-block: var(--s-8); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .site-nav { display: none; }          /* section links collapse … */
  .site-header__actions { margin-left: auto; }  /* … auth stays visible (§2) */
  .site-header__inner { gap: var(--s-4); }
}

@media (max-width: 420px) {
  .btn { padding: 9px var(--s-3); }
  .site-header__actions { gap: var(--s-2); }
}

/* ==========================================================================
   WEBSITE MISSION 2 — homepage hero and above-the-fold
   Specification: WEBSITE_SPEC_V1.md §3, §4 + v1.1 §A1, §30, §31.
   Still zero runtime JavaScript. Motion is CSS-only and every animated
   surface is disabled under prefers-reduced-motion by the global rule above.
   ========================================================================== */

.hero { padding-block: var(--s-9) var(--s-7); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-8);
  align-items: center;
}

.hero__headline {
  font-size: clamp(2.25rem, 4.6vw, var(--step-5));
  letter-spacing: -0.032em;
  line-height: 1.04;
  font-weight: 600;
  text-wrap: balance;
}
/* v1.1 §A1: the positioning line sits directly beneath the headline and is
   deliberately quieter — the workforce is the mechanism, not the claim. */
.hero__positioning {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--accent-text);
  letter-spacing: -0.01em;
}
.hero__ctas { margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); }

/* ---- mission panel: real product UI, not artwork (§4) ------------------- */

.mission {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 40px -30px rgba(29,27,21,0.35);
}

.mission__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mission__title { font-size: var(--step-0); font-weight: 600; }
.mission__id {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3);
}

/* The chain: MISSION -> LEAD -> SUPERVISOR -> BUILDERS -> EVIDENCE -> GATE */
.chain { padding: var(--s-4); border-bottom: 1px solid var(--line); }
.chain__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: 7px 0;
}
.chain__rail {
  position: relative;
  justify-self: center;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
/* the connecting line, drawn between dots rather than as an image */
.chain__row + .chain__row .chain__rail::before {
  content: ""; position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 100%; height: 15px; width: 1px;
  background: var(--line);
}
.chain__rail--done { border-color: var(--ok); background: var(--ok); }
.chain__rail--active {
  border-color: var(--accent-text); background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
  animation: pulse 2.4s ease-in-out infinite;
}
.chain__rail--blocked { border-color: var(--warn); background: var(--warn-dim); }

@keyframes pulse {
  /* Both stops are the accent wash. The 50% stop was a literal mint rgba, so
     the halo around a running dot stayed green while the dot itself followed
     --accent -- visible only mid-animation, which is why it survived. */
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-dim); }
  50%      { box-shadow: 0 0 0 6px rgba(4, 120, 87, 0.10); }
}

.chain__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.chain__value { font-size: var(--step--1); color: var(--text-2); }
.chain__row--active .chain__label { color: var(--text); }

/* ---- evidence / activity stream ---------------------------------------- */

.evidence { padding: var(--s-4); border-bottom: 1px solid var(--line); }
.evidence__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.evidence__time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.evidence__what { color: var(--text-2); }
.evidence__mark { font-weight: 700; }
.evidence__mark--ok { color: var(--ok); }
.evidence__mark--run { color: var(--accent-text); }
.evidence__mark--wait { color: var(--warn); }
.evidence__mark--idle { color: var(--text-3); }

/* ---- the gate: the point of the whole panel ---------------------------- */

.gate {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4);
  background: var(--warn-dim);
  border-top: 1px solid var(--warn-line);
}
.gate__text { font-size: var(--step--1); color: var(--text-2); max-width: 46ch; }
.gate__text strong { color: var(--text); font-weight: 600; }

/* Product-truth caption. The panel illustrates a workflow; it is not live
   telemetry from a real customer, and it says so (§7, v1.1 §34). */
.illustrative {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: right;
}

/* ==========================================================================
   micro status strip (§30)
   ========================================================================== */

.strip {
  border-block: 1px solid var(--line);
  background: var(--surface-1);
}
.strip__inner {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
}
.strip__stage { display: inline-flex; align-items: center; gap: var(--s-2); }
.strip__stage b { color: var(--text-2); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.strip__arrow { color: var(--line); }
.strip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex: none;
}
.strip__dot--run { background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
.strip__dot--idle { background: var(--idle); }

/* ==========================================================================
   drift control diagram (§31) — IN DEVELOPMENT, and it must look it
   ========================================================================== */

.drift {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
  counter-reset: step;
}
.drift__step {
  position: relative;
  padding: var(--s-4) var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.drift__step h3 {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 600;
}
.drift__step p { margin-top: var(--s-2); font-size: var(--step--1); color: var(--text-3); }
.drift__step--decision { border-color: var(--warn-line); background: var(--warn-dim); }
.drift__step--decision h3 { color: var(--warn); }

.drift__n {
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--text-3); letter-spacing: 0.1em;
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .drift { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .hero { padding-block: var(--s-7) var(--s-6); }
  /* Mobile is composed, not a stacked desktop: the panel leads with the gate
     result, and the chain stays legible rather than shrinking to fit. */
  .drift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__inner { gap: var(--s-2) var(--s-4); }
  .strip__arrow { display: none; }
  .chain__row { grid-template-columns: 18px minmax(0, 1fr); }
  .chain__value { grid-column: 2; color: var(--text-3); }
  .gate { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .drift { grid-template-columns: minmax(0, 1fr); }
  .hero__ctas .btn { width: 100%; }
}

/* ==========================================================================
   MISSION 2 REVISION — the middleman comparison
   Owner correction: the visitor must understand the painkiller before the
   differentiator. Hierarchy is (1) remove the human middleman, (2) run many
   workers as one controlled mission, (3) make completion provable, (4)
   escalate only what needs owner authority.
   ========================================================================== */

.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

.vs__col {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  min-width: 0;
}
/* The "without" side is deliberately flatter and greyer than the "with" side.
   Manual, repetitive, unrewarding — conveyed by restraint, not by cartooning. */
.vs__col--without { background: transparent; border-style: dashed; }
.vs__col--with { border-color: var(--accent-line); }

.vs__head {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.vs__col--with .vs__head { color: var(--accent-text); border-color: var(--accent-line); }

.vs__step {
  position: relative;
  padding: 5px 0 5px var(--s-5);
  font-size: var(--step--1);
  color: var(--text-3);
  line-height: 1.35;
}
.vs__step::before {
  content: "↓";
  position: absolute; left: 4px; top: 5px;
  font-family: var(--font-mono);
  color: var(--line);
  font-size: 0.75rem;
}
.vs__step:first-of-type::before { content: ""; }

/* The repetition IS the argument: the relay steps carry a quiet marker so the
   loop reads as a loop at a glance. */
.vs__step--relay { color: var(--text-2); }
.vs__step--relay::after {
  content: "manual";
  float: right;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  opacity: 0.55;
}
.vs__step--you {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-left: var(--s-5);
}
.vs__step--orch {
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vs__step--stage { color: var(--text-2); }

.vs__workers {
  margin: var(--s-2) 0 var(--s-2) var(--s-5);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
}
.vs__worker {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.vs__worker b { color: var(--text); font-weight: 600; }

.vs__verdict {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.vs__col--without .vs__verdict { color: var(--warn); }

/* ---- what TAZM does with each kind of event -------------------- */

.outcomes { margin-top: var(--s-4); }
.outcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.outcome__event { color: var(--text-2); }
.outcome__result {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.outcome__result--auto { color: var(--ok); }
.outcome__result--refused { color: var(--bad); }
.outcome__result--owner { color: var(--warn); }

/* ---- the line that does the most work per character -------------------- */

.zinger {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--step-1);
  color: var(--text);
  max-width: 52ch;
  text-wrap: balance;
}

/* ---- demoted differentiator ------------------------------------------- */

.secondary-claim {
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}

@media (max-width: 1024px) {
  .vs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* Stacking these two is fine — the comparison still reads top-to-bottom,
     and cramming two chains into 320px would make neither legible. */
  .vs { grid-template-columns: minmax(0, 1fr); }
  .vs__step--relay::after { display: none; }
}

/* ==========================================================================
   SURGE-ALIGNED LAYOUT COMPONENTS
   Studied from the reference design: pure black ground, gold accent, uppercase tight
   display type, tinted hairline borders, a three-pillar row beneath the hero,
   and a full-width all-caps statement band between sections.
   Content is unchanged — this is visual language only.
   ========================================================================== */

/* ---- three pillars, the row Surge runs under its hero ------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pillar {
  padding: var(--s-7) var(--s-5);
  border-left: 1px solid var(--line);
}
.pillar:first-child { border-left: 0; }
.pillar__n {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--accent-text);
}
.pillar h3 {
  margin-top: var(--s-3);
  font-size: var(--step-1);
  letter-spacing: -0.015em;
}
.pillar p { margin-top: var(--s-3); color: var(--text-2); font-size: var(--step--1); }

/* ---- full-width statement band ---------------------------------------- */

.statement {
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(4, 120, 87, 0.05), transparent 62%);
}
.statement__text {
  font-size: var(--step-4);
  letter-spacing: -0.028em;
  line-height: 1.02;
  font-weight: 600;
  text-wrap: balance;
  max-width: 22ch;
}
.statement__text em { font-style: normal; color: var(--accent-text); }

/* ---- hero ground glow, restrained ------------------------------------- */

.hero {
  position: relative;
  background:
    none;
}

/* Surge's eyebrow: mono, wide tracking, accent-coloured. */
.eyebrow--accent { color: var(--accent-text); }

/* Footer section headings in the reference design carry a trailing slash. */
.site-footer h2::after { content: ""; }

@media (max-width: 900px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar { border-left: 0; border-top: 1px solid var(--line); }
  .pillar:first-child { border-top: 0; }
  .statement__text { font-size: var(--step-3); max-width: none; }
}

/* ==========================================================================
   PRODUCT PAGE COMPONENTS
   /product answers "what exactly does this do?" — the homepage answers
   "why should I care?". These components exist to show the product, not to
   re-sell it.
   ========================================================================== */

.placeholder {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); text-align: left;
}

/* ---- key/value spec panel --------------------------------------------- */

.spec { padding: var(--s-4); }
.spec__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4); align-items: baseline;
  padding: 6px 0;
  font-family: var(--font-mono); font-size: var(--step--1);
}
.spec__row + .spec__row { border-top: 1px solid var(--line); }
.spec__k { color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase; }
.spec__v { color: var(--text); font-variant-numeric: tabular-nums; }
.spec__v--accent { color: var(--accent-text); }
.spec__v--warn { color: var(--warn); }
.spec__v--ok { color: var(--ok); }
.spec__group {
  padding: var(--s-2) var(--s-4) var(--s-1);
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
  border-top: 1px solid var(--line);
}

/* ---- architecture diagram: grid + connectors, no images ---------------- */

.arch { display: grid; justify-items: center; gap: 0; text-align: center; }
.arch__node {
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
  min-width: 190px;
}
.arch__node small { display: block; text-transform: none; letter-spacing: 0; color: var(--text-3); margin-top: 3px; }
.arch__node--hub { border-color: var(--accent-line); background: var(--accent-dim); color: var(--accent-text); }
.arch__node--gate { border-color: var(--warn-line); background: var(--warn-dim); color: var(--warn); }
.arch__node--pass { border-color: var(--ok-line); color: var(--ok); min-width: 150px; }
.arch__node--needs { border-color: var(--warn-line); color: var(--warn); min-width: 150px; }

.arch__link { width: 1px; height: 26px; background: var(--line); }
.arch__link--labelled { position: relative; height: 40px; }
.arch__link--labelled span {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: var(--step--1); color: var(--text-3);
}

.arch__fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); width: 100%; }
.arch__fan .arch__node { min-width: 0; width: 100%; }
.arch__bar { width: 66%; height: 1px; background: var(--line); }
.arch__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }

/* ---- phone containment (2026-09-12) -----------------------------------
   Measured at 390px and 320px once site_browser_probe.js compared against the
   viewport it set rather than an innerWidth that mobile emulation widens to
   fit the overflow: diagram nodes, the providers/pricing matrix, a connector
   label and the product ledger ran past the right edge. body's
   `overflow-x: clip` then CUT them off -- a phone could not even scroll to
   the Status column. Everything below keeps the desktop layout and only
   lets these pieces shrink, wrap, or scroll inside themselves. */
.arch__node { min-width: min(190px, 100%); max-width: 100%; }
.arch__node--pass, .arch__node--needs { min-width: min(150px, 100%); }
.arch__split { max-width: 100%; }
.arch__split > * { min-width: 0; }
.arch__split .arch__node { min-width: 0; width: 100%; }
@media (max-width: 640px) {
  .arch__split { width: 100%; gap: var(--s-3); }
  .arch__node { padding-inline: var(--s-3); letter-spacing: 0.04em; overflow-wrap: anywhere; }
  .arch__link--labelled { height: 64px; }
  .arch__link--labelled span {
    white-space: normal; width: max-content; max-width: calc(50vw - var(--s-6));
  }
  .matrix { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- requirements ledger ---------------------------------------------- */

.ledger { }
.ledger__row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: var(--s-3); align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.ledger__mark { font-family: var(--font-mono); font-weight: 700; text-align: center; }
.ledger__mark--ok { color: var(--ok); }
.ledger__mark--run { color: var(--accent-text); }
.ledger__mark--wait { color: var(--text-3); }
.ledger__mark--never { color: var(--bad); }
.ledger__what { color: var(--text-2); }
.ledger__state {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-3);
}
/* After the rule it overrides, not in the containment block above: same
   specificity, so the later rule wins, and "SUPERVISOR · REVIEWER · GATEWAY"
   kept the product page 334px wide at 320px (2026-09-12). */
@media (max-width: 640px) { .ledger__state { white-space: normal; } }
.ledger__state--ok { color: var(--ok); }
.ledger__state--run { color: var(--accent-text); }
.ledger__state--locked { color: var(--bad); }

/* ---- worker cards ------------------------------------------------------ */

.workers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.worker {
  padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1);
}
.worker__name {
  font-family: var(--font-mono); font-size: var(--step-0);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.worker__role { margin-top: 2px; color: var(--text-3); font-size: var(--step--1); }
.worker__foot { margin-top: var(--s-4); display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }

/* ---- refusal: claim vs verdict ---------------------------------------- */

.refusal { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.refusal__arrow { color: var(--line); font-family: var(--font-mono); font-size: var(--step-2); }
.refusal__claim { border-style: dashed; }
.refusal__verdict { border-color: var(--bad-dim); }
.refusal__stamp {
  margin-top: var(--s-4); padding: var(--s-3);
  border: 1px solid var(--bad); border-radius: var(--radius-sm);
  color: var(--bad); text-align: center;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}

/* ---- three-column authority model ------------------------------------- */

.authority { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.authority__col { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); }
.authority__col h3 {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.authority__col--auto h3 { color: var(--ok); }
.authority__col--block h3 { color: var(--bad); }
.authority__col--owner { border-color: var(--warn-line); background: var(--warn-dim); }
.authority__col--owner h3 { color: var(--warn); }
.authority__col p { margin-top: var(--s-3); color: var(--text-2); font-size: var(--step--1); }

/* ---- roadmap rail ------------------------------------------------------ */

.roadmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.roadmap__stage {
  padding: var(--s-4) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-1);
}
.roadmap__stage--now { border-color: var(--accent-line); background: var(--accent-dim); }
.roadmap__stage h3 {
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.roadmap__stage--now h3 { color: var(--accent-text); }
.roadmap__stage p { margin-top: var(--s-2); font-size: 0.6875rem; color: var(--text-3); line-height: 1.5; }

@media (max-width: 900px) {
  .workers, .authority { grid-template-columns: minmax(0, 1fr); }
  .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch__fan { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .arch__bar { display: none; }
  .refusal { grid-template-columns: minmax(0, 1fr); }
  .refusal__arrow { transform: rotate(90deg); justify-self: center; }
  .placeholder { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   HOW IT WORKS — one mission unfolding down the page
   This page must NOT read as Product #2. Every step hangs off a single
   continuous spine so the visitor is watching one job happen, in order,
   rather than browsing a grid of features.
   ========================================================================== */

.flow { position: relative; }

/* the spine. One line, drawn once, running the length of the page. */
.flow::before {
  content: ""; position: absolute;
  left: 15px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg,
    transparent, var(--line) 3%, var(--line) 97%, transparent);
}

.step { position: relative; padding: var(--s-8) 0 var(--s-8) 72px; }

.step__n {
  position: absolute; left: 0; top: var(--s-8);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent-text);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.step__n--terminal { border-color: var(--ok-line); color: var(--ok); }

.step__head { max-width: var(--measure); }
.step__title {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.step__body { margin-top: var(--s-5); }

/* ---- the mission prompt, shown as a demonstration not a live form ------ */

.prompt {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  overflow: hidden;
}
.prompt__label {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
}
.prompt__text {
  padding: var(--s-5) var(--s-4);
  font-size: var(--step-1); color: var(--text); line-height: 1.5;
}
.prompt__foot {
  display: flex; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
/* Looks like the control it represents, but is not focusable and not a form:
   nothing here should imply a working input. */
.prompt__cta {
  padding: 9px var(--s-4);
  border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.6875rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}

/* ---- the payoff panel: "what did you do? nothing." --------------------- */

.payoff {
  display: grid; place-content: center; text-align: center;
  padding: var(--s-7) var(--s-5);
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-dim);
  height: 100%;
}
.payoff__q { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-2); letter-spacing: 0.08em; text-transform: uppercase; }
.payoff__a { margin-top: var(--s-3); font-size: var(--step-4); text-transform: uppercase; color: var(--accent-text); letter-spacing: -0.02em; }
.payoff__note { margin-top: var(--s-4); font-size: var(--step--1); color: var(--text-2); }

/* ---- decision branch --------------------------------------------------- */

.branch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.branch__arm { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); }
.branch__arm--go { border-color: var(--ok-line); }
.branch__arm--stop { border-color: var(--warn-line); background: var(--warn-dim); }
.branch__verdict {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.branch__arm--go .branch__verdict { color: var(--ok); }
.branch__arm--stop .branch__verdict { color: var(--warn); }
.branch__arm p { margin-top: var(--s-2); font-size: var(--step--1); color: var(--text-2); }

/* ---- a notification, as the owner would actually receive it ------------ */

.notify {
  max-width: 380px;
  border: 1px solid var(--warn-line); border-radius: var(--radius);
  background: var(--surface-1); overflow: hidden;
}
.notify__head {
  padding: var(--s-2) var(--s-4);
  background: var(--warn-dim); color: var(--warn);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.notify__body { padding: var(--s-4); }
.notify__body p { font-size: var(--step--1); color: var(--text-2); }
.notify__body p + p { margin-top: var(--s-2); }

/* ---- lifecycle summary: eight beats, one line -------------------------- */

.lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.beat { padding: var(--s-5) var(--s-4); background: var(--bg); }
.beat__n { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.16em; color: var(--accent-text); }
.beat__t { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.beat__d { margin-top: var(--s-2); font-size: 0.6875rem; color: var(--text-3); line-height: 1.5; }

/* ---- without / with, as paired rows rather than a wall of table -------- */

.swap { border-top: 1px solid var(--line); }
.swap__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-4); align-items: center;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.swap__was { color: var(--text-3); text-align: right; }
.swap__arrow { color: var(--line); font-family: var(--font-mono); }
.swap__now { color: var(--text); }
.swap__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-4); padding-bottom: var(--s-3);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.swap__head span:first-child { text-align: right; color: var(--text-3); }
.swap__head span:last-child { color: var(--accent-text); }

@media (max-width: 900px) {
  .flow::before { left: 11px; }
  .step { padding-left: 52px; }
  .step__n { width: 24px; height: 24px; font-size: 0.625rem; }
  .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .branch { grid-template-columns: minmax(0, 1fr); }
  .swap__row, .swap__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .swap__was { text-align: left; }
  .swap__arrow { display: none; }
  .swap__head span:first-child { text-align: left; }
  .payoff__a { font-size: var(--step-3); }
}

/* ==========================================================================
   SECURITY — a dossier, not a marketing page
   Product = what you get. How It Works = watch a mission. Security = assume a
   worker goes wrong; what stops it? Denser, more diagrammatic, colder.
   ========================================================================== */

/* Additional product-truth labels this page needs. Worker containment is
   proven against fixtures, but production provisioning is recorded as an open
   blocker, so it may NOT be labelled Available. */
.label--proven-in-test { color: var(--info); border-color: rgba(0, 183, 215, 0.32); }
.label--production-pending { color: var(--warn); border-color: var(--warn-line); }
.label--verified { color: var(--ok); border-color: var(--ok-line); }

/* ---- four principles ---------------------------------------------------- */

.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.principle { padding: var(--s-5) var(--s-4); background: var(--bg); }
.principle h3 { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.principle p { margin-top: var(--s-3); font-size: 0.6875rem; color: var(--text-3); line-height: 1.55; }

/* ---- trust boundary ----------------------------------------------------- */

.boundary {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: var(--s-5);
}
.boundary__label {
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
  margin-bottom: var(--s-4);
}

/* can / cannot lists — the shape that carries the argument */
.reach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.reach__col { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); }
.reach__col--can { border-color: var(--ok-line); }
.reach__col--cannot { border-color: var(--bad-dim); }
.reach__head { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.reach__col--can .reach__head { color: var(--ok); }
.reach__col--cannot .reach__head { color: var(--bad); }
.reach__item { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-3); padding: 6px 0; font-size: var(--step--1); color: var(--text-2); }
.reach__item span:first-child { font-family: var(--font-mono); font-weight: 700; }
.reach__col--can .reach__item span:first-child { color: var(--ok); }
.reach__col--cannot .reach__item span:first-child { color: var(--bad); }

/* ---- adversarial scenarios --------------------------------------------- */

.scenario {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-4); align-items: center;
  padding: var(--s-4) 0; border-top: 1px solid var(--line);
}
.scenario__attempt { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-2); }
.scenario__attempt::before { content: "\201C"; }
.scenario__attempt::after { content: "\201D"; }
.scenario__x { color: var(--bad); font-family: var(--font-mono); font-size: var(--step-1); font-weight: 700; text-align: center; }
.scenario__stop { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.scenario__control { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }

/* ---- capability card: what the worker holds and does not ---------------- */

.caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-5); }
.cap { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-3); padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.cap__y { color: var(--ok); font-family: var(--font-mono); font-weight: 700; }

/* A .caps list INSIDE a card gets a third column on a wide screen. The
   page-wide default is two, which is right for a full-width rail; in the
   /new-app "Start with four things" grid the nine-item build-plan list then
   ran five rows deep and towered over the card beside it. Three columns is
   three rows. Scoped to min-width so the max-width collapse below still wins
   on a phone -- an inline style could not have done that. */
@media (min-width: 900px) {
  .card .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
}
.cap__n { color: var(--bad); font-family: var(--font-mono); font-weight: 700; }
.cap__n + span { color: var(--text-3); }

/* ---- status matrix ------------------------------------------------------ */

.matrix { width: 100%; border-collapse: collapse; }
.matrix caption { text-align: left; padding-bottom: var(--s-3); color: var(--text-3); font-size: var(--step--1); }
.matrix th, .matrix td { text-align: left; padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.matrix th {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  border-bottom-color: var(--line);
}
.matrix td:first-child { color: var(--text-2); }
.matrix td:last-child { text-align: right; white-space: nowrap; }

/* ---- disclosure -------------------------------------------------------- */

.disclosure {
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: var(--radius); padding: var(--s-5);
}

@media (max-width: 900px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reach, .caps { grid-template-columns: minmax(0, 1fr); }
  .scenario { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .scenario__x { text-align: left; }
  .matrix th:nth-child(2), .matrix td:nth-child(2) { display: none; }
}

/* ==========================================================================
   PROVIDERS — a workforce, not a logo wall
   Every status on this page is derived from providers.REGISTRY at build time.
   There is no hand-written availability anywhere in the markup (v1.1 §32.1).
   ========================================================================== */

/* ---- role cards --------------------------------------------------------- */

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.role {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1);
}
.role--live { border-color: var(--accent-line); }
.role__job {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
}
.role--future .role__job { color: var(--text-3); }
.role__who { margin-top: var(--s-3); font-size: var(--step-1); font-weight: 600; }
.role__who small { display: block; font-size: var(--step--1); font-weight: 400; color: var(--text-3); margin-top: 2px; }
.role__does { margin-top: var(--s-4); }
.role__does li { list-style: none; padding: 4px 0; font-size: var(--step--1); color: var(--text-2); }
.role__foot { margin-top: auto; padding-top: var(--s-4); }

/* ---- marketplace rows --------------------------------------------------- */

.market { border-top: 1px solid var(--line); }
.market__group {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) 0 var(--s-3);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
}
.market__group span:last-child { color: var(--text-3); letter-spacing: 0.08em; }

.prov {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  gap: var(--s-4); align-items: center;
  padding: var(--s-3) 0; border-top: 1px solid var(--line);
}
.prov__name { font-size: var(--step-0); color: var(--text); }
.prov__kinds { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.prov__caps { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.chip {
  padding: 2px var(--s-2);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.06em; color: var(--text-3);
}
.prov__act { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; }

/* ---- capability matrix -------------------------------------------------- */

.matrix td.cell { text-align: center; font-family: var(--font-mono); }
.matrix td.cell--y { color: var(--ok); }
.matrix td.cell--n { color: var(--text-3); }

/* ---- permission cards (job description per worker) --------------------- */

.jobdesc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

/* ---- the killer comparison --------------------------------------------- */

.tangle { display: grid; gap: var(--s-2); }
.tangle__row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--s-3); align-items: center;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-3);
}
.tangle__you { color: var(--text-2); }
.tangle__arrow { color: var(--line); }
.tangle__note { margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--step--1); color: var(--warn); }

@media (max-width: 900px) {
  .roles, .jobdesc { grid-template-columns: minmax(0, 1fr); }
  .prov { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .prov__act { justify-content: flex-start; }
}

/* ==========================================================================
   PRICING
   Billing is recorded as "Not finished" and there is no billing module, so no
   paid tier is purchasable today. Nothing here may imply otherwise: paid tiers
   carry a launch note instead of a price, and no CTA leads to a checkout that
   does not exist.
   ========================================================================== */

.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }

.tier {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-1);
  position: relative;
}
.tier--feature { border-color: var(--accent-line); }
.tier__flag {
  position: absolute; top: -1px; right: var(--s-4);
  transform: translateY(-50%);
  padding: 3px var(--s-3);
  border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.625rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.tier__name {
  font-family: var(--font-mono); font-size: var(--step-0);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.tier__for { margin-top: var(--s-2); font-size: var(--step--1); color: var(--text-3); }

.tier__price {
  margin-top: var(--s-5); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  min-height: 76px;
}
.tier__amount { font-size: var(--step-3); letter-spacing: -0.02em; font-weight: 600; }
/* Paid tiers show this instead of a number until real mission-cost data
   exists (v1.1 §A4). It is styled to read as information, not as a price. */
.tier__pending {
  font-family: var(--font-mono); font-size: 0.6875rem;
  line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--warn);
}
.tier__note { margin-top: var(--s-2); font-size: 0.6875rem; color: var(--text-3); }

.tier__list { margin-top: var(--s-4); flex: 1; }
.tier__list li {
  list-style: none;
  display: grid; grid-template-columns: 14px minmax(0, 1fr);
  gap: var(--s-2);
  padding: 5px 0;
  font-size: var(--step--1); color: var(--text-2);
}
.tier__list li::before { content: "\2713"; color: var(--ok); font-family: var(--font-mono); font-size: 0.75rem; }
.tier__list li.soon::before { content: "\25CB"; color: var(--text-3); }
.tier__list li.soon { color: var(--text-3); }
.tier__foot { margin-top: var(--s-5); }
.tier__foot .btn { width: 100%; }

/* ---- the three-layer economics diagram --------------------------------- */

.layers { display: grid; gap: var(--s-2); }
.layer {
  padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-1);
}
.layer--mid { border-color: var(--accent-line); background: var(--accent-dim); }
.layer--out { border-color: var(--ok-line); }
.layer__k {
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
.layer--mid .layer__k { color: var(--accent-text); }
.layer--out .layer__k { color: var(--ok); }
.layer__v { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.layer__pay { margin-top: var(--s-3); font-size: var(--step--1); color: var(--text-2); }
.layers__join { justify-self: center; width: 1px; height: 18px; background: var(--line); }

/* ---- FAQ, no JavaScript ------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: var(--s-4) 0; cursor: pointer;
  font-size: var(--step-0); color: var(--text);
  list-style: none; display: flex; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font-family: var(--font-mono); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 0 var(--s-4); color: var(--text-2); font-size: var(--step--1); max-width: var(--measure); }

/* ---- enterprise org tree ------------------------------------------------ */

.org { display: grid; gap: var(--s-3); }
.org__unit {
  padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.org__unit small { text-transform: none; letter-spacing: 0; color: var(--text-3); }

@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tiers { grid-template-columns: minmax(0, 1fr); } }

/* ---- hero headline decode ------------------------------------------------
   The scrambling span flickers while it resolves. Length and spaces are
   preserved by the script, so the line keeps its shape; only the glyphs
   change. Under prefers-reduced-motion the script never runs and these rules
   never apply, so the headline is simply the headline. */
.hero__headline .scramble { display: inline-block; }
.hero__headline .is-scrambling {
  color: var(--accent-hi);
  animation: flicker 0.16s steps(2, end) infinite;
}
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ==========================================================================
   SEAMLESS PROVIDER TICKER  (the Build & run rail)
   An infinite horizontal marquee, right to left, full viewport width.

   THE SEAM: the track holds the chip sequence TWICE and travels exactly -50%
   of its own width, so the frame it wraps to is identical to the one it left.
   Any other distance shows a gap or a jump.

   Constant linear motion only — no float, no bounce, no vertical drift, no
   speed change. A provider rail that wobbles reads as decoration; this one is
   meant to read as an inventory.
   ========================================================================== */

.tier--rail { margin-bottom: var(--s-3); }

.rail {
  /* Horizontal swipe still works on touch; the scrollbar is hidden because the
     rail is decorative chrome, not a scroll region a mouse user must find. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: var(--s-2);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.rail::-webkit-scrollbar { display: none; }

.rail__track {
  display: flex;
  width: max-content;
  animation: rail-scroll 40s linear infinite;
}
.rail__set {
  display: flex; align-items: center; gap: var(--s-3);
  padding-right: var(--s-3);
}

/* Pause for anyone reading it — pointer or keyboard. */
.rail:hover .rail__track,
.rail:focus-within .rail__track { animation-play-state: paused; }

@keyframes rail-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* The global reduced-motion rule sets animation-duration to 0.01ms, which
   would SNAP the track to its end frame and strand it at -50%. Remove the
   animation outright and leave a static row the reader scrolls themselves. */
@media (prefers-reduced-motion: reduce) {
  .rail { -webkit-mask-image: none; mask-image: none; }
  .rail__track { animation: none !important; transform: none !important; }
}

/* On a narrow screen the same distance at the same speed feels slower because
   less of the row is visible at once. Scale the derived duration rather than
   replacing it, so the speed relationship between the three rails survives. */
@media (max-width: 640px) {
  .rail__track { animation-duration: calc(var(--rail-seconds, 40s) * 0.9); }
}

/* ==========================================================================
   TWO VARIANTS OF THE RAIL, and why they are variants rather than new blocks.

   Both inherit `.rail__track`'s seam arithmetic (the -50% travel), its
   hover/focus pause, AND -- the part that actually matters -- the
   reduced-motion rule above that removes the animation outright. A second
   @keyframes here would have needed its own restore, and a motion system grows
   its holes exactly there: in the effect somebody added after the contract was
   written.
   ========================================================================== */

/* The counter-rail. Planned providers travel the other way, more slowly, so
   the two rows read as two different registry states without a chip having to
   claim anything. Opacity is deliberately NOT reduced: these chips carry a
   "Planned" label that has to stay legible, and dimming it to imply status
   would trade contrast for a hint the label already gives outright. */
/* Duration comes from the markup as `--rail-seconds`, computed from the row's
   own chip count and a chosen PIXELS-PER-SECOND speed. A row's travel is -50%
   of its own width, so a fixed duration means a longer row moves faster -- the
   planned tier, which should read as the calmer of the two, was moving at
   76 px/s against connectable's 43. Speed is the thing a reader perceives, so
   speed is the thing that is chosen; the fallback keeps a hand-written row
   working if the property is ever absent. */
.rail__track { animation-duration: var(--rail-seconds, 40s); }
.rail--reverse .rail__track { animation-direction: reverse; }

/* The evidence ticker. A dark full-bleed band carrying the engine's REAL event
   vocabulary -- the same strings `mission_events` stores. Not invented status
   words: G265 rule 3 applies to a ticker exactly as it applies to a gate. */
.rail--events {
  background: var(--ink-bg);
  border-block: 1px solid var(--ink-line);
  padding-block: var(--s-3);
}
.rail--events .rail__set { gap: var(--s-6); padding-right: var(--s-6); }

.evt {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  color: var(--ink-text-2); white-space: nowrap;
}
.evt__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.evt__dot--ok   { background: var(--ok); }
.evt__dot--bad  { background: var(--bad); }
.evt__dot--warn { background: var(--warn); }
.evt__dot--info { background: var(--info); }

.evt-caption {
  color: var(--text-3); font-size: var(--step--1);
  text-align: center; margin-top: var(--s-3);
}

/* ==========================================================================
   CONTROL-PLANE DIAGRAM (hero)
   Replaces the dark mission console, which read as an internal monitoring
   dashboard: dense, operational, and implying a running status, a completion
   percentage and a test count that a marketing page cannot evidence.

   The product's actual distinction is a picture, not a paragraph: the
   customer's choice of AI workers on top, one control plane underneath, and
   the decisions that stay theirs. It asserts no mission number, completion
   percentage, test count or running status, and makes no claim about work
   continuing after the customer disconnects.
   ========================================================================== */

.cplane {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  box-shadow: 0 24px 60px -44px rgba(29, 27, 21, 0.50);
}

.cplane__workers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
.cplane__worker {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: var(--s-4);
  text-align: center;
}
.cplane__worker-name { font-weight: 600; letter-spacing: -0.01em; }
.cplane__worker-role {
  margin-top: var(--s-1);
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}

/* The join is decorative and aria-hidden: it repeats a relationship the
   markup already states, so a screen reader is told it twice otherwise. */
.cplane__join { height: 44px; margin-block: var(--s-2); }
.cplane__join svg { display: block; width: 100%; height: 100%; }
.cplane__join path { fill: none; stroke: var(--line-2); stroke-width: 1.5; }

.cplane__core {
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
  text-align: center;
}
.cplane__core-name {
  font-size: var(--step-1); font-weight: 600; letter-spacing: -0.015em;
}
.cplane__core-kicker {
  margin-top: var(--s-1);
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
}
.cplane__rules {
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: grid; gap: var(--s-2);
}
.cplane__rules li {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2);
}
.cplane__owner {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--accent-line);
  font-weight: 500;
}

@media (max-width: 640px) {
  .cplane__workers { grid-template-columns: minmax(0, 1fr); }
  .cplane__join { height: 28px; }
}

/* ==========================================================================
   MISSION CONSOLE
   The hero's right side was a two-column wall of text that rendered as an
   unformatted dump. This replaces it: one product surface, real TAZM
   concepts, rows that read as a console rather than paragraphs.
   ========================================================================== */

.console {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 24px 60px -40px rgba(0,0,0,0.95);
}

.console__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.console__id {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; color: var(--text-3);
}
.console__state {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text);
}
.console__state i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: pulse 2.6s ease-in-out infinite;
}

.console__title {
  padding: var(--s-4) var(--s-4) var(--s-3);
  font-size: var(--step-1); font-weight: 500; letter-spacing: -0.015em;
}

.console__group {
  padding: var(--s-2) var(--s-4) 0;
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}

.crow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4); align-items: baseline;
  padding: var(--s-2) var(--s-4);
}
.crow + .crow { border-top: 1px solid var(--line); }
.crow__k { font-size: var(--step--1); color: var(--text-2); }
.crow__k b { color: var(--text); font-weight: 500; }
.crow__v {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.crow__v--ok    { color: var(--ok); }
.crow__v--run   { color: var(--accent-text); }
.crow__v--warn  { color: var(--warn); }

.console__meter { padding: var(--s-3) var(--s-4) var(--s-4); }
.console__meter .bar {
  height: 3px; border-radius: 2px; background: var(--idle-dim); overflow: hidden;
}
.console__meter .bar i { display: block; height: 100%; background: var(--accent); }
.console__meter p {
  display: flex; justify-content: space-between;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}

/* the decision row is the point of the console: it is the only place the
   customer is asked for anything */
.console__decision {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--warn-line);
  background: var(--warn-dim);
}
.console__decision p { font-size: var(--step--1); color: var(--text-2); }
.console__decision p b { color: var(--text); font-weight: 500; }
.console__decision span {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn);
  white-space: nowrap;
}

/* ==========================================================================
   NUMBERED STORY SECTIONS
   ========================================================================== */

.story { display: grid; gap: var(--s-8); }
.chapter { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.chapter--flip > *:first-child { order: 2; }
.chapter__n {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.18em; color: var(--accent-text);
}
.chapter h2 { margin-top: var(--s-3); font-size: var(--step-3); letter-spacing: -0.028em; }
.chapter p { margin-top: var(--s-4); color: var(--text-2); max-width: 46ch; }

/* the transition line gets a section of its own */
.transition {
  padding-block: var(--s-9);
  border-block: 1px solid var(--line);
  text-align: center;
}
.transition p {
  margin-inline: auto;
  max-width: 24ch;
  font-size: clamp(1.5rem, 3.4vw, var(--step-4));
  letter-spacing: -0.028em;
  line-height: 1.18;
  text-wrap: balance;
}
.transition p em { font-style: normal; color: var(--accent-on-ink); }

/* ==========================================================================
   RESPONSIVE — deliberate, not shrink-to-fit
   ========================================================================== */

@media (max-width: 1024px) {
  .chapter, .chapter--flip { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .chapter--flip > *:first-child { order: 0; }
  .chapter p { max-width: none; }
}

@media (max-width: 768px) {
  :root { --s-9: 80px; --s-8: 56px; }
  .console__bar { flex-wrap: wrap; }
  .crow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .crow__v { text-align: left; }
  .console__decision { flex-direction: column; align-items: flex-start; }
  /* touch targets stay comfortable rather than scaling with the type */
  .btn { min-height: 44px; }
  .site-header__actions .btn { min-height: 40px; }
}

@media (max-width: 480px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .console__title { font-size: var(--step-0); }
  .wordmark { font-size: 0.8125rem; letter-spacing: 0.1em; }
}

/* ==========================================================================
   LIGHT-GROUND OVERRIDES
   cursor.com puts its product on near-black panels inset into a warm bone
   page, and runs full-bleed dark bands for statements. Two benefits here:
   it is the strongest contrast move available, and it keeps the marketing
   console looking like the actual TAZM application, which is dark.
   ========================================================================== */

/* ==========================================================================
   DEPTH. The five inner pages were flat, and the cause was specific: the
   system's own strongest contrast move -- the dark product inset described at
   the top of this file and built as `.console` -- was defined and used ZERO
   times on every page. Product data rendered as white cards on a bone ground,
   which is the flattest combination the palette can produce.

   `.card--ink` is that inset, expressed as a modifier on the panels that
   already exist rather than as a second component. Every child class that can
   appear inside one is restated here, because a dark surface with one
   unconverted child is dark text on a dark ground -- worse than the flat page
   it replaced. The list is taken from the markup, not guessed:
   panel-head / spec / ledger / evidence / gate / badge.
   ========================================================================== */

.card--ink {
  background: var(--ink-bg);
  border-color: rgba(29, 27, 21, 0.18);
  box-shadow: 0 30px 60px -34px rgba(29, 27, 21, 0.45);
}
.card--ink .panel-head {
  background: var(--ink-bg-2);
  border-bottom-color: var(--ink-line);
  color: var(--ink-text-2);
}
.card--ink .spec__row + .spec__row,
.card--ink .ledger__row + .ledger__row,
.card--ink .evidence__row + .evidence__row { border-top-color: var(--ink-line); }

.card--ink .spec__k,
.card--ink .ledger__what,
.card--ink .evidence__what { color: var(--ink-text-2); }

.card--ink .spec__v,
.card--ink .ledger__state,
.card--ink .evidence__time { color: var(--ink-text-3); }

.card--ink .spec__group {
  color: var(--ink-text-3);
  border-bottom-color: var(--ink-line);
}
.card--ink .spec__v--ok     { color: #35C295; }
.card--ink .spec__v--warn   { color: #D69A38; }
.card--ink .spec__v--accent { color: var(--accent-on-ink); }
.card--ink .ledger__state--ok     { color: #35C295; }
.card--ink .ledger__state--locked { color: var(--ink-text-3); }
.card--ink .ledger__state--run    { color: #63A6D1; }
.card--ink .ledger__mark--ok    { color: #35C295; }
.card--ink .ledger__mark--never { color: #E0715A; }
.card--ink .ledger__mark--run   { color: #63A6D1; }
.card--ink .ledger__mark--wait  { color: var(--ink-text-3); }
.card--ink .evidence__mark--ok   { color: #35C295; }
.card--ink .evidence__mark--run  { color: #63A6D1; }
.card--ink .evidence__mark--wait { color: #D69A38; }
.card--ink .evidence__mark--idle { color: var(--ink-text-3); }

.card--ink .gate {
  background: rgba(224, 113, 90, 0.10);
  border-top-color: rgba(224, 113, 90, 0.30);
}
.card--ink .gate__text        { color: var(--ink-text-2); }
.card--ink .gate__text strong { color: var(--ink-text); }
.card--ink .badge {
  background: rgba(244, 242, 236, 0.08);
  border-color: var(--ink-line);
  color: var(--ink-text-2);
}
.card--ink .illustrative { color: var(--ink-text-3); }

/* `.mission` is the same inset with its own head markup. */
/* 2026-09-21. The head kept `--surface-2` while the title moved to
   `--ink-text`: rgb(244,242,236) on rgb(235,234,229), contrast 1.05,
   so every inked mission card had an invisible title. `.console__bar`
   already took `--ink-bg-2` for exactly this reason; the mission head
   was missed when it was given the same treatment. */
.mission.card--ink .mission__head {
  background: var(--ink-bg-2);
  border-bottom-color: var(--ink-line);
}
.mission.card--ink .mission__title { color: var(--ink-text); }
.mission.card--ink .mission__id { color: var(--ink-text-3); }

/* The remaining children that legitimately appear inside a product panel and
   carry their own colour. Each was found by measuring contrast against the ink
   ground in a browser, not by reading the markup. */
.card--ink .refusal__stamp { color: #E0715A; }
.card--ink .mono.subtle    { color: var(--ink-text-2); }
.card--ink .label--available { color: #35C295; border-color: rgba(53,194,149,.32); }
.card--ink .label--planned   { color: var(--ink-text-2); border-color: var(--ink-line); }

/* The catch-all, added LAST and deliberately broad. Enumerating children one
   at a time found three invisible elements across six pages and would have
   missed the fourth somebody adds next month. Anything textual inside an ink
   panel that has not been given a colour above inherits an ink colour rather
   than the page's near-black. */
.card--ink :is(h3, h4, h5, h6, strong, b, dt) { color: var(--ink-text); }
.card--ink :is(p, li, dd, span, td, th)       { color: var(--ink-text-2); }
.card--ink .subtle                            { color: var(--ink-text-2); }

/* ---- banding: the page stops being one continuous field ------------------
   A run of nine sections on one ground reads as a single scroll with no
   structure. Alternate sections take the second surface so the page has a
   rhythm; `--surface-2` is already the palette's step between the page ground
   and a card, so this introduces no new colour. */
.section--band {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}

/* ---- the mission console becomes a dark inset ---------------------------- */

.console {
  background: var(--ink-bg);
  border-color: rgba(29, 27, 21, 0.18);
  box-shadow: 0 30px 60px -34px rgba(29, 27, 21, 0.45);
}
.console__bar { background: var(--ink-bg-2); border-bottom-color: var(--ink-line); }
.console__id { color: var(--ink-text-3); }
.console__title { color: var(--ink-text); }
.console__group { color: var(--ink-text-3); }
.crow + .crow { border-top-color: var(--ink-line); }
.crow__k { color: var(--ink-text-2); }
.crow__k b { color: var(--ink-text); }
.crow__v { color: var(--ink-text-3); }
/* SPLIT 2026-09-21. These three shared one mint because the brand colour and
   the "passed" colour used to be the same hue. They are not any more: --ok
   still means passed, the running state is the accent. Keeping them together
   would have made a finished step and a working step identical again. */
.crow__v--ok  { color: #35C295; }                    /* passed, on ink */
.crow__v--run { color: var(--accent-on-ink); }       /* working, on ink */
.console__state { color: var(--accent-on-ink); }
.console__state i { background: var(--accent-on-ink); }
.console__meter p { color: var(--ink-text-3); }
.console__meter .bar { background: rgba(255, 255, 255, 0.08); }
.console__meter .bar i { background: var(--accent-on-ink); }
.console__decision {
  background: rgba(232, 176, 75, 0.10);
  border-top-color: rgba(232, 176, 75, 0.28);
}
.console__decision p { color: var(--ink-text-2); }
.console__decision p b { color: var(--ink-text); }
.console__decision span { color: #E8B04B; }

/* ---- statements run full-bleed dark, the way Cursor bands its page ------- */

.statement {
  background: var(--ink-bg);
  border-bottom: 0;
  color: var(--ink-text);
}
/* SCOPED, 2026-09-18. These two rules were unscoped, so every `.statement__text`
   OUTSIDE a dark band -- "You can watch. You don't have to." on the home page,
   "You manage the outcome." on How It Works -- was painted #F4F2EC on #F7F7F4:
   contrast 1.01, invisible. In a dark band the colour is still this one; in a
   light section the element now inherits --text as the base rule intended. */
.statement .statement__text { color: var(--ink-text); }
.statement .statement__text em { color: var(--accent-on-ink); }
.statement .lede { color: var(--ink-text-2); }
.statement .subtle, .statement .mono { color: var(--ink-text-3); }
.statement .btn--secondary {
  background: transparent; color: var(--ink-text);
  border-color: rgba(255, 255, 255, 0.22);
}
.statement .btn--secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.34);
}

/* ---- the transition line: the biggest type on the page ------------------ */

.transition {
  background: var(--ink-bg);
  border-block: 0;
  padding-block: var(--s-10);
}
.transition p {
  color: var(--ink-text);
  max-width: 20ch;
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  letter-spacing: -0.035em;
  line-height: 1.06;
}
.transition p em { color: var(--accent-on-ink); }

/* ---- hero: the message dominates ---------------------------------------- */

.hero { padding-block: var(--s-9) var(--s-8); }
.hero__headline { font-size: clamp(2.5rem, 5.6vw, var(--step-5)); letter-spacing: -0.038em; line-height: 1.02; }
.hero .lede { font-size: var(--step-1); max-width: 46ch; }

/* ---- chapters: heading large, copy short, product surface dominant ------ */

.chapter { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: var(--s-9); }
.chapter h2 { font-size: clamp(1.75rem, 3.2vw, var(--step-3)); letter-spacing: -0.032em; }
.chapter p { max-width: 38ch; font-size: var(--step-0); }

/* ---- buttons on a light page -------------------------------------------- */

.btn--primary { background: var(--text); color: #FFFFFF; }
.btn--primary:hover:not(:disabled) { background: #2E2B22; }
.btn--secondary { background: var(--surface-1); color: var(--text); border-color: var(--line-2); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-3); }
.btn--ghost { color: var(--text-2); }
.btn--ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }

/* ---- footer sits on the light ground ------------------------------------ */

.site-footer { border-top-color: var(--line); }

@media (max-width: 1024px) {
  .chapter { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .chapter p { max-width: none; }
  .transition { padding-block: var(--s-9); }
}

/* ==========================================================================
   POSITIONING — 2026-08-31
   "Build your agents anywhere. Control them with TAZM." The category
   has to land in about five seconds, so the page opens with the claim and then
   draws the stack: where agents are built, the control plane, what it controls.
   Additive only — no existing component is redefined here.
   ========================================================================== */

/* ---- hero type: product, not editorial ---------------------------------- */
/* The headline was set at display scale (up to --step-5 / 4rem), which reads as
   a magazine cover. This is a control plane; the type should read like the
   instrument it fronts. Two lines at this scale still dominate the fold. */
.hero__headline {
  font-size: clamp(2rem, 3.9vw, 3rem);
  letter-spacing: -0.028em;
  line-height: 1.1;
  max-width: 18ch;
}
.hero .lede { max-width: 52ch; }

/* ---- the stack band ------------------------------------------------------ */
.stack {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
  padding-block: var(--s-7);
}
.stack .container { display: flex; flex-direction: column; align-items: center; }
.tier { width: 100%; text-align: center; }
.tier__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--s-4);
}
.tier__items {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-3);
}
.tier__item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface-1);
  padding: 7px 12px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.tier__item--more { font-weight: 400; color: var(--text-2); }

/* The control plane itself: the one dark object in the band, because it is the
   one thing on the page that is TAZM rather than something it talks to. */
.tier--core {
  background: var(--ink-bg);
  color: var(--ink-text);
  border-radius: 12px;
  padding: var(--s-5) var(--s-4);
  margin-block: var(--s-2);
}
.tier--core .tier__label { color: var(--accent-on-ink); margin-bottom: var(--s-2); }
.tier__core {
  margin: 0;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-text);
}
.stack__arrow {
  margin: 0; padding-block: var(--s-3);
  color: var(--text-3); font-size: var(--step-1); line-height: 1;
}
.stack__note {
  margin: var(--s-6) 0 0;
  font-size: var(--step--1);
  color: var(--text-3);
  text-align: center;
  max-width: 62ch;
}
.stack__note a { color: var(--text-2); }

/* ---- the five questions -------------------------------------------------- */
.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  margin-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.question {
  margin: 0;
  padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.middleman { max-width: 62ch; }

@media (max-width: 640px) {
  .tier__items { gap: var(--s-2); }
  .tier__item { font-size: 0.75rem; padding: 6px 9px; }
  .question { font-size: var(--step-0); padding-block: var(--s-4); }
}

/* ---- market evidence ------------------------------------------------------
   Someone else's numbers, carrying someone else's name. The restraint is
   deliberate: four figures, one line each, sources beside them rather than
   footnoted away, and no chart — four unrelated forecasts on one axis would be
   decoration pretending to be analysis. */
.evidence { border-top: 1px solid var(--line); }
.evidence__hd {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: var(--s-3) 0 var(--s-4);
  text-wrap: balance;
}
.evidence__lede { color: var(--text-2); margin: 0 0 var(--s-8); max-width: 44ch; }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-7) var(--s-6);
  padding-block: var(--s-3) var(--s-8);
}
.stat { display: flex; flex-direction: column; gap: var(--s-3); }
.stat__n {
  margin: 0;
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat__d { margin: 0; font-size: var(--step-0); color: var(--text-2); max-width: 34ch; }
/* The attribution is not fine print: a number without its source is the thing
   this section exists to avoid. */
.stat__src {
  margin: auto 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: baseline;
}
.stat__src a { color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.stat__src a:hover { text-decoration-color: var(--text-3); }
.stat__on { color: var(--text-3); }
.stat__caveat { margin: 0; font-size: var(--step--1); color: var(--text-3);
  max-width: 34ch; }
.evidence__body { max-width: var(--measure); }
.evidence__body p { font-size: var(--step-0); color: var(--text-2); }
.evidence__line {
  margin: var(--s-6) 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text);
}
.evidence__note {
  margin: var(--s-8) 0 0; padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--step--1); color: var(--text-2); max-width: 68ch;
}
.evidence__note a { color: var(--text); }
.evidence__disclaimer {
  margin: var(--s-4) 0 0; font-size: var(--step--1); color: var(--text-3);
  max-width: 68ch;
}

@media (max-width: 640px) {
  .stats { gap: var(--s-6); padding-block: var(--s-2) var(--s-6); }
}

/* ---- the durable half -----------------------------------------------------
   The payoff of the stack band above it: the tier of providers is swappable,
   and this says what is not. Two columns so the claim sits beside its evidence
   rather than on top of a wall of prose. */
.durable__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-7) var(--s-9);
  align-items: start;
}
.durable__line {
  font-size: clamp(1.5rem, 2.9vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.durable p { font-size: var(--step-0); color: var(--text-2); max-width: 54ch; }
.durable__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.durable__list li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--text-3);
}
.durable__list b { color: var(--text); font-weight: 600; }
@media (max-width: 860px) {
  .durable__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* Phase 19.1. `hidden` must mean hidden. Any author rule that sets
   `display` on an element outranks the user-agent `[hidden]` rule, so
   a correctly-marked-up hidden element still renders. Proven in a
   browser on signup.html; guarded here for every marketing page too. */
[hidden] { display: none !important; }

/* ==========================================================================
   MOTION. G265.

   Every rule here obeys three constraints, and they are the reason the system
   is this shape rather than a shorter one:

   1. NOTHING IS HIDDEN UNLESS JAVASCRIPT IS RUNNING. Each resting state is
      scoped under `.js-motion`, a class the observer script sets on <html> as
      its FIRST act. If the script is blocked, throws, or never parses, the
      class is absent and every element is simply visible. A stylesheet that
      hides content and waits for a script is a blank page for anyone the
      script fails.
   2. TRANSFORM AND OPACITY ONLY. Nothing here animates width, height, top,
      left, margin or padding -- those are laid out on the main thread and
      janking a scroll is worse than not animating at all. `filter` is the one
      exception, used once, on a small number of elements.
   3. A STATE IS A FACT, NOT A DECORATION. The step colours below are bound to
      real mission-event outcomes: green is a gate that passed, blue is
      pending, amber is an owner decision required, red is a refusal. Nothing
      may render green that the event record did not earn.
   ========================================================================== */

/* ---- 1. the seven reveals ------------------------------------------------ */

.js-motion .fade-rise,
.js-motion .fade-left,
.js-motion .fade-right,
.js-motion .blur-sharpen,
.js-motion .stagger-children > * {
  opacity: 0;
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js-motion .fade-rise            { transform: translate3d(0, 26px, 0); }
.js-motion .stagger-children > * { transform: translate3d(0, 18px, 0); }
/* The horizontal pair moves less than the vertical one and only ever inside a
   `.reveal-clip`, because a resting offset on the X axis is page width on a
   phone if nothing clips it. */
.js-motion .fade-left  { transform: translate3d(-28px, 0, 0); }
.js-motion .fade-right { transform: translate3d(28px, 0, 0); }
.js-motion .blur-sharpen { filter: blur(7px); transform: translate3d(0, 10px, 0); }

.reveal-clip { overflow-x: clip; }

.js-motion .is-revealed,
.js-motion .stagger-children.is-revealed > * {
  opacity: 1;
  transform: none;
  filter: none;
}
/* The stagger. A delay per child, capped so a long list does not take four
   seconds to finish -- after the eighth child everything lands together. */
.js-motion .stagger-children.is-revealed > *  { transition-delay: 0ms; }
.js-motion .stagger-children.is-revealed > :nth-child(2) { transition-delay: 70ms; }
.js-motion .stagger-children.is-revealed > :nth-child(3) { transition-delay: 140ms; }
.js-motion .stagger-children.is-revealed > :nth-child(4) { transition-delay: 210ms; }
.js-motion .stagger-children.is-revealed > :nth-child(5) { transition-delay: 280ms; }
.js-motion .stagger-children.is-revealed > :nth-child(6) { transition-delay: 350ms; }
.js-motion .stagger-children.is-revealed > :nth-child(7) { transition-delay: 420ms; }
.js-motion .stagger-children.is-revealed > :nth-child(n+8) { transition-delay: 480ms; }

/* Drawing. `stroke-dashoffset` is animatable on the compositor and, unlike a
   width transition, cannot reflow anything around it. */
.js-motion .line-draw {
  stroke-dasharray: var(--draw-len, 200);
  stroke-dashoffset: var(--draw-len, 200);
  transition: stroke-dashoffset 900ms cubic-bezier(0.4, 0, 0.2, 1);
}
.js-motion .line-draw.is-revealed { stroke-dashoffset: 0; }

.js-motion .progress-fill {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js-motion .progress-fill.is-revealed { transform: scaleX(var(--fill, 1)); }

/* ---- 2. the pinned control-plane story ----------------------------------- */

.story { position: relative; }
.story__pin {
  position: sticky;
  /* Clear of the sticky header, not under it. */
  top: clamp(84px, 20vh, 160px);
}
/* Anything scrolled to must clear the header too, or its first line lands
   behind the nav -- which is what the first screenshot of this section showed
   happening to its own heading. */
.story h2, .story__step { scroll-margin-top: 96px; }
.story__stage {
  /* Five columns: agent, wire, CONTROL PLANE, wire, agent. TAZM is
     literally in the middle, and every line runs through it. Laying the core
     out below the two agents read as a footer, which is the opposite of the
     claim. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16px, 40px) minmax(0, 1.15fr)
                         minmax(16px, 40px) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.story__side { min-width: 0; }
.story__core {
  border: 1px solid var(--accent-line);
  background: var(--accent-dim);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
  text-align: center;
}
/* The two agents NEVER touch. Every path runs side -> core -> side, which is
   the product's actual topology: a builder and a supervisor that cannot reach
   each other, only the control plane between them. A diagram that drew them
   connected would be a picture of a different product. */
.story__wire { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
.story__wire--live { stroke: var(--info); }
.story__wire--ok   { stroke: var(--ok); }
.story__wire--warn { stroke: var(--warn); }
.story__wire--bad  { stroke: var(--bad); }

.story__steps { display: grid; gap: var(--s-3); }
.story__step {
  border-left: 2px solid var(--line);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  transition: opacity 320ms ease, border-color 320ms ease;
}
/* The dim resting state is a MOTION affordance and belongs under `.js-motion`
   with the rest of them. Written unscoped, it left every step permanently at
   45% opacity for a reader whose JavaScript never ran -- not a style, a
   legibility defect, and one that would have looked deliberate. */
.js-motion .story__step           { opacity: 0.45; }
.js-motion .story__step.is-active { opacity: 1; }
/* Outcome colours, bound to the event record. `--info` while a step is the
   current one, `--ok` once it passed, `--warn` when it stops for the owner,
   `--bad` on a refusal. There is no fifth state and no default green. */
.story__step[data-state="pending"].is-active { border-color: var(--info); }
.story__step[data-state="passed"]            { border-color: var(--ok); opacity: 1; }
.story__step[data-state="owner"]             { border-color: var(--warn); opacity: 1; }
.story__step[data-state="refused"]           { border-color: var(--bad); opacity: 1; }
.story__event {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
  margin-top: var(--s-1);
}

/* ---- 3. parallax, kept cheap --------------------------------------------- */
/* One translate on one element, driven by the observer's rAF loop and only
   while the section is on screen. No scroll listener runs when it is not. */
.js-motion .parallax { will-change: transform; }

/* ---- 4. depth on hover and focus ----------------------------------------- */
/* `transform` and `box-shadow` only, so a lifted card never moves a neighbour.
   Focus gets the same treatment as hover -- a keyboard user sees what a mouse
   user sees. */
.lift {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease, border-color 220ms ease;
}
.lift:hover, .lift:focus-within {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 10px 28px rgba(29, 27, 21, 0.10);
  border-color: var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .lift:hover, .lift:focus-within { transform: none; }
  .story__pin { position: static; }
}

/* ---- 5. the story's own layout ------------------------------------------- */
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-8);
  align-items: start;
  margin-top: var(--s-7);
}
.story__role {
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0;
}
.story__who { font-weight: 600; margin: var(--s-1) 0 0; }
.story__side {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); background: var(--surface-1); text-align: center;
}
.story__link {
  width: 100%; height: 12px; display: block; overflow: visible;
}
.story__wire--mirror { stroke: var(--line-2); }
.story__steps { list-style: none; margin: 0; padding: 0; counter-reset: beat; }
.story__what { font-weight: 600; margin: 0; }
.story__detail { color: var(--text-2); margin: var(--s-2) 0 0; }

@media (max-width: 900px) {
  /* Pinning inside a single narrow column just makes the diagram sit on top of
     the text it is meant to accompany, so on a phone it simply scrolls. */
  .story__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .story__pin { position: static; }
  /* And the row becomes a column: three boxes stacked, the control plane still
     in the middle, the wires turned on their side. Squeezing five columns into
     360px produces three unreadable slivers. */
  .story__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
    justify-items: stretch;
  }
  .story__link { height: 20px; }
  .story__link path { transform: rotate(90deg); transform-origin: center; }
}

/* ---------------------------------------------------------------------------
   Supervision-cost scenario. The only form controls on the public site, so the
   input styling lives here rather than on a bare `input` selector: nothing else
   on these pages takes typed input, and a global rule would be waiting to
   surprise whatever gets added next.
   --------------------------------------------------------------------------- */
.calc { display: grid; gap: var(--s-5); }
.calc__fields {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.calc__field { display: grid; gap: var(--s-2); }
.calc__field label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
  line-height: 1.4;
}
.calc__field input {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s-3);
  width: 100%;
  -moz-appearance: textfield;
}
.calc__field input:hover { border-color: var(--line-2); }
.calc__field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent-line);
}
.calc__out {
  border-top: 1px solid var(--line);
  padding-top: var(--s-5);
  display: grid;
  gap: var(--s-3);
}
.calc__big {
  font-family: var(--font-mono);
  font-size: var(--step-3);
  color: var(--accent-text);
  line-height: 1.2;
}
.calc__big span { color: var(--text-3); font-size: var(--step-0); }

/* ==========================================================================
   WHAT DO YOU WANT TO BUILD — the showcase, its drawn screens, and the relay
   strips that replaced three sections of prose. 2026-09-18.

   Everything here is built from the existing tokens: warm bone ground, dark
   ink insets for anything that represents software, mint for the one thing
   that matters in a row. No new colour, no new face, no new radius.

   The screens are DRAWN, not photographed. A screenshot of real software on
   this page would claim we built it; a wireframe in our own palette reads as
   what it is, an example of a shape of product.
   ========================================================================== */

.build { display: grid; gap: var(--s-4); }

/* Wide: a board of eight. Narrow: one swipeable rail. Same markup, and no
   JavaScript in either state -- a carousel that needs a script is a carousel
   that is empty when the script fails. */
.build__rail { border-radius: var(--radius); }
.build__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.build__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.build__card {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.build__name {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.build__desc { font-size: var(--step--1); color: var(--text-3); line-height: 1.5; }

@media (max-width: 1024px) {
  /* The rail contains its own overflow; the document never widens. */
  .build__rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--s-5) * -1);
    padding-inline: var(--s-5);
    /* Mandatory snap aligns the first card to the SCROLLPORT edge, which
       cancelled the padding and put card one hard against the screen. The
       scroll padding is what the snap respects. */
    scroll-padding-inline: var(--s-5);
  }
  .build__rail::-webkit-scrollbar { display: none; }
  .build__track {
    grid-auto-flow: column;
    grid-auto-columns: clamp(220px, 72vw, 300px);
    grid-template-columns: none;
    padding-bottom: var(--s-2);
  }
  .build__card { scroll-snap-align: start; }
}

/* ---- the drawn screen --------------------------------------------------- */

.shot {
  aspect-ratio: 4 / 3;
  background: var(--ink-bg);
  border: 1px solid rgba(29, 27, 21, 0.18);
  border-radius: var(--radius);
  box-shadow: 0 22px 44px -30px rgba(29, 27, 21, 0.45);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.shot__chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--s-2) var(--s-3);
  background: var(--ink-bg-2);
  border-bottom: 1px solid var(--ink-line);
}
.shot__chrome i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.shot__tab {
  margin-left: var(--s-2);
  height: 6px; width: 38%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
}
.shot__body { display: flex; min-height: 0; padding: var(--s-3); gap: var(--s-3); }
.shot__side { display: grid; gap: 7px; align-content: start; width: 26%; }
.shot__side--filters { gap: 6px; }
.shot__navln {
  height: 5px; width: var(--w, 60%); border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
}
.shot__main { flex: 1; min-width: 0; display: grid; gap: var(--s-3); align-content: start; }
.shot__main--centre { place-items: center; align-content: center; }
.shot__main--code { gap: var(--s-2); }

.shot__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shot__tile {
  height: 26px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ink-line);
  display: grid;
  align-content: center;
  padding-inline: 5px;
}
.shot__kpi { height: 5px; width: 62%; border-radius: 3px; background: var(--accent-on-ink); opacity: 0.75; }

.shot__chart { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.shot__chart--flat { height: 26px; }
.shot__chart i {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, 0.14);
}
.shot__chart i:nth-child(even) { background: rgba(110, 231, 183, 0.55); }

.shot__rows { display: grid; gap: 6px; }
.shot__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink-line);
}
.shot__cell { height: 5px; width: var(--w, 50%); border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.shot__chip {
  height: 8px; width: 22px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.10);
  flex: none;
}
.shot__chip--ok { background: rgba(77, 212, 172, 0.5); }
.shot__chip--warn { background: rgba(232, 176, 75, 0.5); }

.shot__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shot__thumb {
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--ink-line);
}
.shot__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--ink-line);
}
.shot__cta { height: 10px; width: 34px; border-radius: 5px; background: var(--accent-on-ink); opacity: 0.8; }
.shot__cta--wide { width: 70%; }

.shot__phone {
  width: 44%;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  padding: var(--s-2);
  display: grid;
  gap: 6px;
  align-content: start;
}
.shot__notch {
  height: 4px; width: 32%; border-radius: 2px; justify-self: center;
  background: rgba(255, 255, 255, 0.18);
  margin-bottom: 4px;
}
.shot__ln { height: 5px; width: var(--w, 70%); border-radius: 3px; background: rgba(255, 255, 255, 0.14); }

.shot__code { display: grid; gap: 6px; }
.shot__codeln { display: flex; align-items: center; gap: 6px; }
.shot__codeln--add { background: rgba(77, 212, 172, 0.10); }
.shot__codeln--del { background: rgba(181, 54, 31, 0.14); }
.shot__meth {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--ink-text-2);
  background: rgba(255, 255, 255, 0.10);
  flex: none;
}
.shot__meth--get { color: var(--accent-on-ink); background: rgba(110, 231, 183, 0.14); }
.shot__meth--post { color: #E8B04B; background: rgba(232, 176, 75, 0.14); }
.shot__meth--del { color: #E58C74; background: rgba(181, 54, 31, 0.18); }
.shot__gut {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  width: 8px;
  color: var(--ink-text-3);
  flex: none;
}

.shot__chat { display: grid; gap: 7px; }
.shot__bubble { height: 12px; width: var(--w, 60%); border-radius: 6px; }
.shot__bubble--them { background: rgba(255, 255, 255, 0.10); }
.shot__bubble--me { background: rgba(110, 231, 183, 0.35); justify-self: end; }

/* ---- the relay: a hand-off drawn as a line of steps --------------------- */

.relay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.relay__step {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-2);
  white-space: nowrap;
}
/* The visitor is the defect in the first row, so the visitor is the colour. */
.relay__step--you {
  border-color: var(--warn-line);
  background: var(--warn-dim);
  color: var(--warn);
  font-weight: 600;
}
.relay__step--core {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent-text);
  font-weight: 600;
}
.relay__step--loop { border-style: dashed; }
.relay__arrow { color: var(--text-3); font-family: var(--font-mono); }
.relay__pair { display: grid; gap: var(--s-2); }
.relay--fixed .relay__step { background: var(--surface-2); }
.relay--wrap { gap: var(--s-1) var(--s-2); }
.relay--wrap .relay__step { padding: var(--s-1) var(--s-2); }

/* ---- four steps, on the six-step grid ----------------------------------- */

.drift--steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.drift--steps .drift__step { padding: var(--s-5) var(--s-4); }
.drift--steps h3 { font-family: var(--font-sans); font-size: var(--step-1); letter-spacing: -0.01em; }
.drift--steps p { font-size: var(--step-0); color: var(--text-2); }

/* ---- five concepts, and the providers that are connectable today -------- */

.pillars { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

@media (max-width: 900px) {
  .drift--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  /* The bleed has to be exactly the container's gutter, and the gutter changes
     here. An 8px mismatch is 8px of sideways scroll on a phone -- which is how
     seven pages were clipped in September. */
  .build__rail {
    margin-inline: calc(var(--s-4) * -1);
    padding-inline: var(--s-4);
    scroll-padding-inline: var(--s-4);
  }
}
@media (max-width: 640px) {
  .drift--steps { grid-template-columns: minmax(0, 1fr); }
  .shot__side { width: 30%; }
}

/* ==========================================================================
   THE LANDING PAGE — owner, 2026-09-19.

   EVERY rule here is scoped under `.landing`. That is not tidiness: the two
   contrast defects live on this site right now (`.statement__text` at 1.01,
   and a primary button that renders #1D1B15 on #1D1B15) both came from a
   rule written for one band and left unscoped, so it applied on pages nobody
   was looking at. A page with its own palette must not be able to reach the
   eight pages that do not share it.

   The accent here is CYAN, not the site's mint. It is declared as landing-
   scoped custom properties rather than by overriding --accent, so /product,
   /security and the rest keep the mint they were designed and measured in.

   Contrast, measured against the palette's own contract:
     --l-ink      #0B1B2B on the sky (#EAF4F7 .. #FFF)   >= 13:1
     --l-text-2   #44606F on the same                     >= 6.2:1
     --l-accent   #047857 on white                        >= 4.9:1
     white on --l-accent-solid #047857                    >= 4.8:1
   ========================================================================== */
.landing {
  --l-accent:       #047857;
  /* CORRECTED 2026-09-19: this was #047857 and the comment below claimed white
     on it reached 4.6:1. Measured, it is 3.81:1 -- below AA for the arrow
     buttons' glyph. #047857 gives 4.86:1 and is visually indistinguishable. */
  --l-accent-solid: #047857;
  --l-accent-deep:  #065F46;
  --l-ink:          #0B1B2B;
  --l-text-2:       #44606F;
  --l-card:         rgba(255, 255, 255, 0.82);
  --l-card-line:    rgba(11, 27, 43, 0.10);
  --l-shadow:       0 1px 2px rgba(11, 27, 43, 0.04),
                    0 12px 32px rgba(11, 27, 43, 0.07);

  position: relative;
  isolation: isolate;
  padding-block: var(--s-8) var(--s-7);
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
}

/* The backdrop. `background-attachment` is deliberately NOT fixed: on iOS it
   is ignored and on Android it jitters, which is worse than a still image. */
.landing__sky {
  position: absolute;
  /* UP AND BEHIND THE HEADER. The header is sticky and therefore in flow, so
     a sky that starts at the section's top edge leaves a pale band across the
     first 72px of the page -- the one thing a full-bleed hero must not do. */
  inset: calc(-1 * var(--header-h)) 0 0 0;
  z-index: -1;
  /* WebP, 1920w: the source art was a 1544 KB PNG and this is the page's LCP
     element. 85 KB desktop / 34 KB phone, encoded from the same original, so
     the appearance is unchanged and the first paint is not held hostage to it.
     background-color below holds the ground if the image never arrives. */
  background-image: url("/assets/landing-sky.webp?v=em1790848782");
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
  background-color: #EAF4F7;          /* holds the ground if the image 404s */
}

/* The copy sits on the sky's pale top-left, but "pale" is a property of one
   image at one crop. This veil makes the contrast a property of the PAGE, so
   the text stays legible if the art is ever swapped. */
.landing__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* the lower band carries the "Same Platform" line and the five chips, and
       it lands on the busiest part of the art -- the lit planet. Legibility
       there must be a property of the PAGE, not of one crop of one image. */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 52%,
      rgba(255, 255, 255, 0.42) 74%,
      rgba(255, 255, 255, 0.62) 100%),
    linear-gradient(105deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.78) 38%,
      rgba(255, 255, 255, 0.28) 62%,
      rgba(255, 255, 255, 0.05) 100%);
}

.landing__inner { position: relative; width: 100%; }

.landing__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--l-text-2);
  margin: 0 0 var(--s-5);
}

.landing__headline {
  font-size: clamp(40px, 7.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--l-ink);
  margin: 0;
  max-width: 16ch;
}
.landing__headline-accent { color: var(--l-accent); }

.landing__lede {
  margin: var(--s-5) 0 0;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--l-text-2);
  max-width: 48ch;
}

/* ---- the one decision: an idea, or a codebase ---------------------------- */
.landing__choices {
  display: grid;
  /* 2026-09-21. `minmax(320px, 1fr)` is a FLOOR, not a preference: below a
     352px viewport the container is narrower than 320px and the column keeps
     its 320px anyway, so the cards ran 16px past the right edge and a 320px
     phone could scroll the home page sideways. `min(320px, 100%)` lets the
     column fall back to the container when there is less room than that, and
     is identical at every width where there is more -- measured unchanged at
     360, 390, 768 and 1440. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
  max-width: 1040px;
}

.lcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border-radius: 16px;
  border: 1px solid var(--l-card-line);
  background: var(--l-card);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--l-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lcard:hover,
.lcard:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(4, 120, 87, 0.34);
  box-shadow: 0 2px 4px rgba(11, 27, 43, 0.05),
              0 18px 44px rgba(11, 27, 43, 0.11);
}
.lcard--idea { background: rgba(236, 252, 252, 0.84); }

.lcard__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 13px;
  background: rgba(4, 120, 87, 0.10);
  color: var(--l-accent-deep);
}
.lcard--existing .lcard__icon {
  background: rgba(37, 99, 235, 0.10);
  color: #1D4ED8;
}
.lcard__icon svg { width: 26px; height: 26px; }

.lcard__text { display: block; }
.lcard__title {
  display: block;
  font-size: var(--step-1);
  font-weight: 650;
  color: var(--l-ink);
  letter-spacing: -0.012em;
}
.lcard__body {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--l-text-2);
}

.lcard__go {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--l-accent-solid);
  color: #FFFFFF;
  flex: none;
}
.lcard--existing .lcard__go { background: #2563EB; }
.lcard__go svg { width: 19px; height: 19px; }

/* The caption belongs to ITS card, in the markup, not to a parallel row that
   happens to line up at one width. At 390px the parallel row put "For
   founders..." under the Existing Project card, captioning the wrong choice. */
.landing__choice { display: flex; flex-direction: column; }
.landing__choice .lcard { flex: 1; }
.lcard__caption {
  margin: var(--s-3) 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--l-text-2);
}

/* ---- the reassurance band ------------------------------------------------ */
.landing__same { margin-top: var(--s-7); text-align: center; }
.landing__same-title {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--l-ink);
}
.landing__same-sub {
  margin: var(--s-2) 0 0;
  font-size: 16px;
  color: var(--l-accent-deep);
}

/* ---- the five proofs ----------------------------------------------------- */
.landing__chips {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: var(--s-3);
  align-items: stretch;
}
.lchip {
  display: flex;
  align-items: center;
  min-height: 62px;
  gap: var(--s-3);
  padding: 14px var(--s-4);
  border-radius: 13px;
  border: 1px solid var(--l-card-line);
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(11, 27, 43, 0.04);
}
.lchip__icon { color: var(--l-accent); flex: none; display: grid; place-items: center; }
.lchip__icon svg { width: 21px; height: 21px; }
.lchip > span:last-child { display: block; line-height: 1.3; }
.lchip strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
  color: var(--l-ink);
}
.lchip strong + span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--l-text-2);
}

/* ---- the sign-off -------------------------------------------------------- */
.landing__flourish {
  margin: var(--s-8) 0 0;
  text-align: center;
  font-size: clamp(19px, 2.2vw, 25px);
  font-style: italic;
  line-height: 1.35;
  color: var(--l-ink);
}

/* The landing page supplies its own ground, so the shell must not paint a
   warm bone band above it. Scoped to the body class the page sets. */
body.is-landing { background: #EAF4F7; }
body.is-landing .site-header {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 720px) {
  .landing { min-height: 0; padding-block: var(--s-7) var(--s-6); }
  /* a phone never needs the 1920px plate */
  .landing__sky { background-image: url("/assets/landing-sky-960.webp?v=em1790848782"); }
  .landing__sky::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(255, 255, 255, 0.80) 55%,
      rgba(255, 255, 255, 0.55) 100%);
  }
  .landing__headline { max-width: none; }
  .lcard { grid-template-columns: auto 1fr; }
  .lcard__go { grid-column: 2; justify-self: end; }
  .lcard__caption { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .lcard { transition: none; }
  .lcard:hover, .lcard:focus-visible { transform: none; }
}

/* ==========================================================================
   application showcase  (2026-09-21)
   A horizontal rail of example applications under the /new-app hero. It
   REUSES .rail wholesale -- auto-scroll, pause on pointer and on keyboard,
   native touch swipe from overflow-x, and the reduced-motion carve-out that
   removes the animation outright rather than letting the global 0.01ms rule
   snap the track to -50%. Nothing about that behaviour is reimplemented here;
   this file only sizes the cards.

   SIZED BY HEIGHT, NOT WIDTH. The supplied screenshots are six portrait
   phone captures at roughly 5:9 and one landscape desktop capture at 16:9.
   A single card width would have cropped the desktop one to a vertical slice
   of its middle, which is the least informative part of a dashboard. One
   shared height and an automatic width instead: the phone cards come out
   ~236px, the desktop card is allowed to be wider, and the row reads as a
   set because the tops and bottoms line up.
   ========================================================================== */

.showcase { padding-top: var(--s-5); }
.showcase__head { text-align: center; }
.showcase__head .lede { margin-inline: auto; margin-top: var(--s-4); }

.showcase__rail { margin-top: var(--s-7); }
.showcase__rail .rail__track { animation-duration: 96s; }
/* one set in the HTML; the loop starts only once the script has cloned the second (no JS = a static, swipeable set) */
.rail__track[data-rail-clone]:not(.is-cloned) { animation: none; }
.showcase__rail .rail__set { align-items: flex-start; gap: var(--s-4); padding-right: var(--s-4); }

.showcase__card {
  flex: 0 0 auto;
  margin: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}

.showcase__card img {
  height: clamp(300px, 34vw, 486px);
  width: auto;
  /* Beats the global `img { max-width: 100% }`, which would otherwise cap a
     landscape capture at the card's own width and squash it. */
  max-width: none;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -34px rgba(29, 27, 21, 0.45);
  background: var(--surface-2);
}

/* A PHONE NEEDS TALLER CARDS, NOT SHORTER ONES. The height drives the width
   here, so the desktop clamp's 300px floor produced ~169px-wide cards and put
   2.1 of them on a 390px screen -- the brief asks for 1 to 1.5. Taller cards
   are wider cards, and one and a half of them is what a swipeable rail should
   show: enough of the next card to say "this moves". */
@media (max-width: 700px) {
  .showcase__card img { height: min(58vh, 470px); }
}

/* The one landscape capture. Left-top rather than centre: a dashboard keeps
   its navigation, its title and its headline figures there, and centring the
   crop throws all three away. */
.showcase__card--wide img {
  width: clamp(300px, 32vw, 400px);
  object-fit: cover;
  object-position: left top;
}

.showcase__kind {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

/* A dragged rail must not also be selecting its own text, or dragging the
   images themselves -- a native image drag cancels the pointer stream and
   leaves the rail stuck mid-gesture. */
.rail.is-dragging { cursor: grabbing; user-select: none; }
.rail.is-dragging .rail__track { animation-play-state: paused; }
.showcase__card img { -webkit-user-drag: none; user-select: none; }

/* ==========================================================================
   WEBSITE REDESIGN 2026-09-25 (owner) — TAZM = AI SOFTWARE ASSEMBLY LINE
   Platform mega-menu (every page) + the new landing sections (al-*).
   Light, airy, investor-ready: deep navy text, aqua/cyan accents, glass
   cards. Motion is CSS-only, small, and off under prefers-reduced-motion.
   STATE COLOURS MEAN STATES: pass / run / not-connected / idle are the
   product's real vocabulary, never decoration.
   ========================================================================== */

/* ---- Platform mega-menu ------------------------------------------------ */
.mega { position: static; }
.mega__trigger {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); font-size: var(--step-0); padding: 6px 2px; border-radius: 6px;
}
.mega__trigger::-webkit-details-marker { display: none; }
.mega__trigger:hover, .mega[open] .mega__trigger { color: var(--text); }
.mega__caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 160ms ease; }
.mega[open] .mega__caret { transform: rotate(-135deg) translateY(-1px); }
.mega__panel {
  position: absolute; left: 50%; top: calc(var(--header-h) - 6px); transform: translateX(-50%);
  width: min(1120px, calc(100vw - 32px)); z-index: 60;
  display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 28px;
  padding: 28px 30px; border-radius: 18px;
  background: linear-gradient(160deg, #102230 0%, #0A1620 100%);
  border: 1px solid rgba(110, 231, 183, .22);
  box-shadow: 0 30px 80px rgba(6, 18, 28, .45), 0 2px 6px rgba(6, 18, 28, .25);
  animation: mega-in 160ms ease-out;
}
@keyframes mega-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mega__kicker, .mega__heading { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6EE7B7; margin: 0 0 10px; }
.mega__title { color: #FFFFFF; font-size: 19px; line-height: 1.35; font-weight: 600; margin: 0 0 16px; }
.mega__cta { color: #6EE7B7; font-weight: 650; text-decoration: none; }
.mega__cta:hover { text-decoration: underline; }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mega__item { display: grid; gap: 2px; padding: 8px 10px; margin-inline: -10px; border-radius: 10px; text-decoration: none; }
.mega__item:hover, .mega__item:focus-visible { background: rgba(110, 231, 183, .09); }
.mega__name { display: flex; align-items: center; gap: 8px; color: #FFFFFF; font-weight: 600; font-size: 14.5px; }
.mega__line { color: #A9BBC9; font-size: 13px; line-height: 1.4; }
.mega__status { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; }
.mega__status--live { color: #7BE3C4; background: rgba(46, 204, 150, .12); }
.mega__status--dev  { color: #FFD97A; background: rgba(255, 214, 102, .12); }

/* the landing tokens, for the sections below the hero (declared on .landing only) */
.al-line, .al-punch, .al-products, .al-close, .al-portfolio, .al-week, .al-infra {
  --l-accent:       #047857;
  --l-accent-solid: #047857;
  --l-accent-deep:  #065F46;
  --l-ink:          #0B1B2B;
  --l-card:         rgba(255, 255, 255, 0.82);
  --l-card-line:    rgba(11, 27, 43, 0.10);
  --l-shadow:       0 1px 2px rgba(11, 27, 43, 0.04),
                    0 12px 32px rgba(11, 27, 43, 0.07);
}
/* ---- shared -------------------------------------------------------------- */
.al-kicker { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--l-accent-deep); margin: 0 0 10px; }
.al-title { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--l-ink); margin: 0 0 14px; font-weight: 700; }
.al-sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: #3A4E60; max-width: 720px; margin: 0; }
.al-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.al-ctas--center { justify-content: center; }
.al-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 12px;
  font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; }
.al-btn--primary { background: var(--l-ink); color: #FFFFFF; box-shadow: 0 10px 30px rgba(11, 27, 43, .22); }
.al-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(4, 120, 87, .28); background: #0E2A3F; }
.al-btn--ghost { background: rgba(255, 255, 255, .72); color: var(--l-ink); border: 1px solid rgba(11, 27, 43, .16); backdrop-filter: blur(8px); }
.al-btn--ghost:hover { border-color: var(--l-accent); color: var(--l-accent-deep); }

/* ---- hero ---------------------------------------------------------------- */
.al-hero .landing__inner { padding-bottom: 96px; }
.al-squiggle { position: relative; display: inline-block; white-space: nowrap; }
.al-squiggle__line { position: absolute; left: -2%; right: -2%; bottom: -0.08em; width: 104%; height: 0.28em; overflow: visible; }
.al-squiggle__line path { fill: none; stroke: #10B981; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420; animation: al-draw 1.1s 300ms cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes al-draw { to { stroke-dashoffset: 0; } }
.al-hero__note { margin-top: 18px; font-size: 14.5px; color: #4A5E70; letter-spacing: .02em; }
/* STEP AWAY hero (owner 2026-09-25): the pain line is readable but clearly
   smaller; "STEP AWAY." is the dominant statement on the page. */
.al-pain { margin: 0 0 18px; max-width: 34ch; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.35;
  font-weight: 550; letter-spacing: -0.01em; color: #2E4658; }
.al-stepaway { font-size: clamp(64px, 13.5vw, 168px); line-height: .92; letter-spacing: -0.045em; font-weight: 800;
  max-width: none; white-space: nowrap; }
.al-stepaway .al-squiggle__line { height: 0.16em; bottom: -0.1em; }
.al-promise { margin: 30px 0 0; max-width: 30ch; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25;
  font-weight: 700; letter-spacing: -0.015em; color: var(--l-ink); }
.al-welcome { max-width: 58ch; margin-top: 14px; }
.al-stages { margin: 22px 0 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; font-weight: 700; color: var(--l-ink); letter-spacing: .01em; }
.al-stages span { font-weight: 550; color: var(--l-accent-deep); }

/* ---- assembly line --------------------------------------------------------- */
.al-line { padding: 96px 0 88px; background: linear-gradient(180deg, #FFFFFF 0%, #F2FAFC 100%); }
.al-flow { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; position: relative; }
.al-flow::before { content: ""; position: absolute; left: 7%; right: 7%; top: 30px; height: 2px;
  background: repeating-linear-gradient(90deg, #10B981 0 10px, transparent 10px 18px); background-size: 18px 2px;
  animation: al-flow 1.2s linear infinite; opacity: .55; }
@keyframes al-flow { to { background-position: 18px 0; } }
.al-flow__node { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; }
.al-flow__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  background: #FFFFFF; border: 1px solid rgba(4, 120, 87, .22); color: var(--l-accent-deep);
  box-shadow: 0 6px 20px rgba(4, 120, 87, .10); }
.al-flow__icon svg { width: 26px; height: 26px; }
.al-flow__node--final .al-flow__icon { background: var(--l-ink); color: #7BE3C4; border-color: var(--l-ink); }
.al-flow__name { font-weight: 700; font-size: 14px; color: var(--l-ink); }
.al-flow__cap { font-size: 12.5px; color: #5A6C7C; line-height: 1.35; }

/* ---- assembly line motion (owner 2026-09-25) ---------------------------------
   Work moving through a production line: one shared cycle, each stage offset by
   its place in the line. A light pulse travels the connector and reaches each
   stage exactly as that stage lights; Verified Complete holds a completion
   pulse, then the line restarts from Plan. CSS only; transform/opacity/shadow
   on seven small boxes; hover pauses the line and lifts the hovered stage;
   prefers-reduced-motion shows the static line. Nothing changes layout. */
.al-flow { --al-step: 1.1s; --al-cycle: 9.1s; }        /* 7 stages x 1.1s + 1.4s hold on Verified Complete */
.al-flow__icon { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; will-change: transform; }
.al-flow__node .al-flow__icon { animation: al-stage var(--al-cycle) ease-in-out infinite both; }
.al-flow__node:nth-child(1) .al-flow__icon { animation-delay: calc(var(--al-step) * 0); }
.al-flow__node:nth-child(2) .al-flow__icon { animation-delay: calc(var(--al-step) * 1); }
.al-flow__node:nth-child(3) .al-flow__icon { animation-delay: calc(var(--al-step) * 2); }
.al-flow__node:nth-child(4) .al-flow__icon { animation-delay: calc(var(--al-step) * 3); }
.al-flow__node:nth-child(5) .al-flow__icon { animation-delay: calc(var(--al-step) * 4); }
.al-flow__node:nth-child(6) .al-flow__icon { animation-delay: calc(var(--al-step) * 5); }
.al-flow__node--final .al-flow__icon { animation-name: al-stage-final; animation-delay: calc(var(--al-step) * 6); }
@keyframes al-stage {                                   /* active for one step (1.1 / 9.1 = 12%) */
  0%, 16%, 100% { transform: none; border-color: rgba(4, 120, 87, .22); box-shadow: 0 6px 20px rgba(4, 120, 87, .10); }
  4%, 11%       { transform: translateY(-4px) scale(1.06); border-color: #10B981;
                  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14), 0 12px 28px rgba(4, 120, 87, .22); }
}
@keyframes al-stage-final {                             /* step + hold (2.5 / 9.1 = 27%), green/aqua completion */
  0%, 31%, 100% { transform: none; color: #7BE3C4; box-shadow: 0 6px 20px rgba(4, 120, 87, .10); }
  4%            { transform: translateY(-4px) scale(1.08); color: #A8F5DC;
                  box-shadow: 0 0 0 6px rgba(46, 204, 150, .22), 0 14px 32px rgba(4, 120, 87, .28); }
  14%, 26%      { transform: translateY(-3px) scale(1.05); color: #A8F5DC;
                  box-shadow: 0 0 0 10px rgba(46, 204, 150, .08), 0 12px 28px rgba(4, 120, 87, .22); }
}
.al-flow__name { transition: color 200ms ease; }
/* the traveling light: 7.1% -> 92.9% (stage centres) over 6 steps, then fades during the hold */
.al-flow::after { content: ""; position: absolute; top: 25px; left: 7.14%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 25%, #10B981 45%, rgba(16, 185, 129, 0) 72%);
  box-shadow: 0 0 12px 3px rgba(16, 185, 129, .45); pointer-events: none; animation: al-travel var(--al-cycle) linear infinite; }
@keyframes al-travel {
  0%    { left: 7.14%;  opacity: 0; }
  2%    { opacity: 1; }
  72.5% { left: 92.86%; opacity: 1; }
  80%   { left: 92.86%; opacity: 0; }
  100%  { left: 92.86%; opacity: 0; }
}
/* hover: the line pauses where it is and the hovered stage comes forward */
.al-flow:hover .al-flow__icon, .al-flow:hover::after, .al-flow:hover::before { animation-play-state: paused; }
.al-flow__node:hover .al-flow__icon { animation: none; transform: translateY(-4px); border-color: #10B981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .16), 0 12px 28px rgba(4, 120, 87, .22); }
.al-flow__node--final:hover .al-flow__icon { box-shadow: 0 0 0 6px rgba(46, 204, 150, .2), 0 12px 28px rgba(4, 120, 87, .22); }
.al-flow__node:hover .al-flow__name { color: var(--l-accent-deep); }

.al-line__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; margin-top: 52px; align-items: start; }
.al-job { background: rgba(255, 255, 255, .9); border: 1px solid rgba(11, 27, 43, .10); border-radius: 20px; padding: 22px 22px 16px;
  box-shadow: 0 1px 2px rgba(11, 27, 43, .04), 0 24px 60px rgba(4, 120, 87, .12); backdrop-filter: blur(10px); }
.al-job__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.al-job__app { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--l-ink); font-size: 14px; }
.al-job__tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5A6C7C;
  border: 1px solid rgba(11, 27, 43, .14); border-radius: 999px; padding: 3px 9px; }
.al-job__rows { list-style: none; margin: 0; padding: 0; }
.al-job__row { display: grid; grid-template-columns: 150px 130px 1fr; align-items: center; gap: 12px; padding: 10px 4px;
  border-top: 1px solid rgba(11, 27, 43, .07); font-size: 14px; }
.al-job__stage { font-weight: 650; color: var(--l-ink); }
.al-job__note { color: #62758A; font-size: 12.5px; }
.al-job__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 4px 2px;
  border-top: 1px solid rgba(11, 27, 43, .07); font-size: 13px; color: #4A5E70; }
.al-state { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .07em; padding: 4px 9px; border-radius: 7px; white-space: nowrap; }
.al-state--pass { color: #0E7A55; background: #E3F7EF; }
.al-state--run  { color: #065F46; background: #DDF4F9; position: relative; padding-left: 20px; }
.al-state--run::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #0AA5C2; animation: al-pulse 1.4s ease-in-out infinite; }
@keyframes al-pulse { 50% { opacity: .25; } }
.al-state--nc   { color: #6B7785; background: repeating-linear-gradient(135deg, #F1F3F5 0 6px, #E8EBEE 6px 12px); border: 1px dashed #B9C2CB; }
.al-state--idle { color: #6B7785; background: #F1F3F5; }
.al-explain { display: grid; gap: 14px; }
.al-explain__card { background: #FFFFFF; border: 1px solid rgba(11, 27, 43, .08); border-radius: 16px; padding: 18px 20px; }
.al-explain__card p { margin: 0; color: #3A4E60; line-height: 1.55; font-size: 15px; }
.al-explain__k { font-weight: 750; color: var(--l-ink) !important; margin-bottom: 6px !important; font-size: 16px !important; }
.al-legend { margin: 22px 0 0; font-size: 13px; color: #62758A; }

/* ---- punch band ------------------------------------------------------------ */
.al-punch { background: var(--l-ink); padding: 56px 0; }
.al-punch__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.al-punch p { margin: 0; color: #A9BBC9; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.al-punch b { color: #FFFFFF; font-weight: 750; background: linear-gradient(90deg, #6EE7B7, #10B981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- get your week back (owner 2026-09-25) -------------------------------------- */
.al-week { padding: 88px 0 72px; background: linear-gradient(180deg, #F2FAFC 0%, #FFFFFF 100%); }
.al-week__title { max-width: 22ch; }
.al-week__steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: none; }
.al-week__step { position: relative; background: #FFFFFF; border: 1px solid rgba(11, 27, 43, .09); border-radius: 18px; padding: 22px 22px 24px;
  box-shadow: 0 1px 2px rgba(11, 27, 43, .04), 0 12px 32px rgba(11, 27, 43, .05); }
.al-week__n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--l-ink); color: #7BE3C4;
  font-weight: 800; font-size: 14px; margin-bottom: 12px; }
.al-week__step h3 { margin: 0 0 6px; font-size: 18px; color: var(--l-ink); }
.al-week__step p { margin: 0; color: #4A5E70; line-height: 1.55; font-size: 15px; }

/* ---- product surfaces -------------------------------------------------------- */
.al-products { padding: 96px 0 72px; }
.al-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.al-card { background: #FFFFFF; border: 1px solid rgba(11, 27, 43, .09); border-radius: 18px; padding: 18px 20px 22px;
  box-shadow: 0 1px 2px rgba(11, 27, 43, .04), 0 12px 32px rgba(11, 27, 43, .05); scroll-margin-top: calc(var(--header-h) + 16px);
  transition: transform 160ms ease, box-shadow 160ms ease; }
.al-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11, 27, 43, .05), 0 18px 44px rgba(4, 120, 87, .14); }
.al-card h3 { margin: 8px 0 6px; font-size: 19px; color: var(--l-ink); }
.al-card p { margin: 0; color: #4A5E70; line-height: 1.55; font-size: 14.5px; }
.al-card__status { display: inline-block; font-size: 10.5px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #0E7A55 !important; background: #E3F7EF; border-radius: 999px; padding: 2px 8px; margin-top: 14px !important; }
.al-card__status--dev { color: #8A6100 !important; background: #FFF3D1; }
.al-card__link { display: inline-block; margin-top: 12px; font-weight: 650; color: var(--l-accent-deep); text-decoration: none; }
.al-card__link:hover { text-decoration: underline; }
.al-card--dark { background: linear-gradient(160deg, #13222C 0%, #0B141B 100%); border-color: rgba(110, 231, 183, .3); }
.al-card--dark h3 { color: #FFFFFF; } .al-card--dark p { color: #C3D1DC; } .al-card--dark .al-card__link { color: #6EE7B7; }
.al-card--dark .al-card__status--dev { color: #FFD97A !important; background: rgba(255, 214, 102, .14); }

/* core grid (owner 2026-09-25): App Builder leads as a 2x2 feature; the other five follow the workflow */
.al-grid--core { grid-auto-flow: row dense; }
.al-card--feature { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; padding: 24px 28px 28px;
  border-color: rgba(4, 120, 87, .28); background: linear-gradient(160deg, #FFFFFF 0%, #F1FAFC 100%);
  box-shadow: 0 1px 2px rgba(11, 27, 43, .04), 0 22px 54px rgba(4, 120, 87, .16); }
.al-card--feature .al-mock { height: auto; min-height: 210px; flex: 1; }
.al-card--feature h3 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 12px; }
.al-card--feature p { font-size: 16px; max-width: 46ch; }
.al-card--feature .al-mock--builder { gap: 10px; }
.al-card--feature .al-mock__step { font-size: 13.5px; padding: 9px 14px; }
.al-card__cta { align-self: flex-start; margin-top: 18px; }
.al-card--feature .al-card__status { align-self: flex-start; }

/* supporting infrastructure: smaller, quieter, secondary to the product cards */
.al-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.al-support__panel { border: 1px solid rgba(11, 27, 43, .08); border-radius: 14px; padding: 16px 18px; background: #F7FBFC; }
.al-support__k { margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5A6C7C; }
.al-support__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.al-support__chips li { font-size: 12.5px; font-weight: 600; color: var(--l-ink); background: #FFFFFF; border: 1px solid rgba(4, 120, 87, .18);
  border-radius: 999px; padding: 4px 10px; }
.al-support__line { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #4A5E70; }
.al-support__links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.al-support__links a { font-weight: 650; color: var(--l-accent-deep); text-decoration: none; }
.al-support__links a:hover { text-decoration: underline; }
.al-support__dev { margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #8A6100; background: #FFF3D1; border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }

/* placeholders: drawn, intentional, never grey boxes */
.al-mock { height: 150px; border-radius: 12px; padding: 14px; background: linear-gradient(160deg, #F4FBFD 0%, #EAF6F9 100%);
  border: 1px solid rgba(4, 120, 87, .12); display: flex; gap: 10px; overflow: hidden; }
.al-mock i { display: block; height: 8px; border-radius: 4px; background: #CFE6EC; margin-bottom: 8px; width: 90%; }
.al-mock i.w4 { width: 40%; } .al-mock i.w5 { width: 50%; } .al-mock i.w6 { width: 60%; } .al-mock i.w7 { width: 70%; } .al-mock i.w8 { width: 80%; }
.al-mock__tree { width: 34%; border-right: 1px solid rgba(4, 120, 87, .14); padding-right: 10px; }
.al-mock__tree i.on { background: #7FD6E6; }
.al-mock__diff { flex: 1; } .al-mock__diff i.add { background: #BDEBD6; } .al-mock__diff i.del { background: #F6C9C9; }
.al-mock--editor { background: #FFFFFF; }
.al-mock__canvas { flex: 1; display: grid; gap: 8px; align-content: start; }
.al-mock__block { display: block; height: 30px; border-radius: 6px; background: #E8F3F6; }
.al-mock__block--sel { outline: 2px solid #10B981; outline-offset: 2px; background: #D6EFF5; }
.al-mock__block--half { width: 60%; }
.al-mock__panel { width: 30%; border-left: 1px solid rgba(4, 120, 87, .14); padding-left: 10px; }
.al-mock--builder { flex-direction: column; justify-content: center; gap: 8px; }
.al-mock__step { font-size: 12px; font-weight: 700; color: #62758A; background: #FFFFFF; border: 1px solid rgba(11, 27, 43, .08); border-radius: 8px; padding: 6px 10px; }
.al-mock__step.done { color: #0E7A55; } .al-mock__step.done::before { content: "✓  "; }
.al-mock__step.run { color: #065F46; border-color: #10B981; } .al-mock__step.run::before { content: "●  "; animation: al-pulse 1.4s ease-in-out infinite; }
.al-mock--evidence, .al-mock--gate, .al-mock--providers { flex-direction: column; justify-content: center; gap: 8px; }
.al-mock__check { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--l-ink); background: #FFFFFF; border-radius: 8px; padding: 7px 10px; border: 1px solid rgba(11, 27, 43, .07); }
.al-mock__check::before { content: "✓"; color: #0E7A55; margin-right: 8px; font-weight: 800; }
.al-mock__check b { font-family: var(--font-mono); font-weight: 500; color: #62758A; margin-left: auto; }
.al-mock__check--open::before { content: "○"; color: #9AA6B2; }
.al-mock--gate { background: rgba(110, 231, 183, .06); border-color: rgba(110, 231, 183, .2); }
.al-mock__rule { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: #C3D1DC; border: 1px solid rgba(110, 231, 183, .18); border-radius: 8px; padding: 7px 10px; }
.al-mock__rule b { color: #7BE3C4; font-weight: 500; } .al-mock__rule--deny b { color: #FF9C9C; }
.al-mock--providers { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; }
.al-mock__chip { font-size: 13px; font-weight: 650; color: var(--l-ink); background: #FFFFFF; border: 1px solid rgba(4, 120, 87, .22); border-radius: 999px; padding: 7px 13px; }
.al-mock__chip--dim { color: #62758A; border-style: dashed; }

.al-bot { display: grid; gap: 4px; margin-top: 20px; padding: 22px 24px; border-radius: 18px; text-decoration: none;
  background: linear-gradient(120deg, #E9FAFC 0%, #F6FDFE 100%); border: 1px solid rgba(4, 120, 87, .2); }
.al-bot__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--l-accent-deep); }
.al-bot__new { background: var(--l-accent-solid); color: #FFFFFF; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; margin-left: 6px; }
.al-bot__title { font-size: 20px; font-weight: 700; color: var(--l-ink); }
.al-bot__body { color: #4A5E70; }
.al-bot__cta { font-weight: 650; color: var(--l-accent-deep); margin-top: 4px; }

/* ---- close ----------------------------------------------------------------- */
.al-close { padding: 88px 0 96px; background: radial-gradient(1200px 400px at 50% 0%, #E6F7FA 0%, #FFFFFF 70%); }
.al-close__inner { text-align: center; }
.al-close__title { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.02em; color: var(--l-ink); margin: 0; }
.al-close__title span { color: var(--l-accent); }

/* ---- portfolio (owner 2026-09-25) -------------------------------------------
   A drawn panel of many projects at different stages. Every figure is a
   placeholder and the panel says so; state colours keep their meaning
   (run = in progress, pass = verified). */
.al-portfolio { padding: 88px 0 80px; background: radial-gradient(900px 420px at 88% 8%, #E6F7FA 0%, rgba(255, 255, 255, 0) 70%), #FFFFFF; }
.al-portfolio__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.al-portfolio__copy .al-sub + .al-sub, .al-portfolio__launch + .al-sub { margin-top: 14px; }
.al-portfolio__launch { margin: 18px 0 0; font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; color: var(--l-accent-deep); letter-spacing: -0.01em; }
.al-portfolio__design { margin: 16px 0 0; font-size: 13.5px; color: #5A6C7C; }
.al-portfolio__punch { margin: 28px 0 0; padding-left: 16px; border-left: 3px solid #10B981;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.3; font-weight: 600; color: #3A4E60; letter-spacing: -0.01em; }
.al-portfolio__punch span { color: var(--l-ink); font-weight: 750; }

.al-pf { margin: 0; background: rgba(255, 255, 255, .92); border: 1px solid rgba(11, 27, 43, .10); border-radius: 20px; padding: 20px 20px 16px;
  box-shadow: 0 1px 2px rgba(11, 27, 43, .04), 0 24px 60px rgba(4, 120, 87, .12); min-width: 0; }
.al-pf__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.al-pf__title { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--l-ink); font-size: 14px; }
.al-pf__stats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.al-pf__stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #F4FBFD; border: 1px solid rgba(4, 120, 87, .12); }
.al-pf__stat b { font-size: 22px; line-height: 1.1; color: var(--l-ink); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.al-pf__stat span { font-size: 12px; color: #5A6C7C; }
.al-pf__stat--total { background: var(--l-ink); border-color: var(--l-ink); }
.al-pf__stat--total b { color: #FFFFFF; } .al-pf__stat--total span { color: #A9BBC9; }
.al-pf__stat--done b { color: #0E7A55; }
.al-pf__rows { list-style: none; margin: 0; padding: 0; }
.al-pf__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 146px; align-items: center; gap: 12px; padding: 9px 2px;
  border-top: 1px solid rgba(11, 27, 43, .07); font-size: 14px; }
.al-pf__name { font-weight: 650; color: var(--l-ink); font-variant-numeric: tabular-nums; }
.al-pf__bar { position: relative; height: 6px; border-radius: 3px; background: #E6F1F4; overflow: hidden; }
.al-pf__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 3px;
  background: linear-gradient(90deg, #6EE7B7, #0AA5C2); }
.al-pf__bar--done::after { background: linear-gradient(90deg, #7BE3C4, #2ECC96); }
.al-pf__bar--p30 { --p: 30%; } .al-pf__bar--p44 { --p: 44%; } .al-pf__bar--p52 { --p: 52%; }
.al-pf__bar--p70 { --p: 70%; } .al-pf__bar--p86 { --p: 86%; } .al-pf__bar--p100 { --p: 100%; }
.al-pf__row .al-state { justify-self: end; }
.al-pf__row--gap { display: block; padding: 4px 2px; text-align: center; }
.al-pf__more { color: #9AA6B2; letter-spacing: .3em; font-weight: 700; }
.al-pf__caption { margin: 12px 2px 0; font-size: 12.5px; color: #62758A; }

.al-who { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.al-who__card { background: #FFFFFF; border: 1px solid rgba(11, 27, 43, .09); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(11, 27, 43, .04), 0 12px 32px rgba(11, 27, 43, .05); }
.al-who__k { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--l-accent-deep); }
.al-who__card p { margin: 0; font-size: 17px; font-weight: 650; color: var(--l-ink); line-height: 1.35; }
.al-who__card--ent { background: linear-gradient(160deg, #13222C 0%, #0B141B 100%); border-color: rgba(110, 231, 183, .3); }
.al-who__card--ent .al-who__k { color: #6EE7B7; } .al-who__card--ent p { color: #FFFFFF; }

/* ---- cleanup pass 1 (owner 2026-09-26) -------------------------------------- */
/* mobile menu: the Platform <details> is "Menu" on phones and leads with the site links */
.mega__label-mob { display: none; }
.mega__col--site { display: none; }
.al-hero__alt { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-size: 15px; }
.al-hero__alt a, .al-close__alt a { font-weight: 650; color: var(--l-accent-deep); text-decoration: none; }
.al-hero__alt a:hover, .al-close__alt a:hover { text-decoration: underline; }
.al-close__alt { margin: 16px 0 0; font-size: 15px; }
.al-week__punch { margin: 28px 0 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: #4A5E70; }
.al-week__punch b { color: var(--l-ink); font-weight: 750; }
.al-infra { padding: 64px 0 72px; background: #FFFFFF; }
.al-infra__title { margin: 0; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; color: var(--l-ink); font-weight: 700; letter-spacing: -0.01em; }
.al-infra .al-support { margin-top: 18px; }
.al-also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.al-also .al-bot { margin-top: 0; padding: 16px 18px; border-radius: 14px; background: #F7FBFC; border-color: rgba(11, 27, 43, .08); }
.al-also .al-bot__title { font-size: 17px; }
.al-also .al-bot__body { font-size: 14px; }
.al-also .al-bot__eyebrow { font-size: 11px; color: #5A6C7C; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .mega__panel { grid-template-columns: repeat(2, 1fr); }
  .al-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; }
  .al-flow::before, .al-flow::after { display: none; }
  .al-line__grid { grid-template-columns: 1fr; }
  .al-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-card--feature { grid-row: auto; }
  .al-portfolio__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .al-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .mega__panel { grid-template-columns: 1fr; max-height: calc(100vh - var(--header-h) - 12px); overflow-y: auto; padding: 22px; }
  .mega__label { display: none; }
  .mega__label-mob { display: inline; }
  .mega__col--site { display: block; }
  .mega__col--site ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__item--site .mega__name { font-size: 15.5px; }
  .al-infra { padding-block: 48px 56px; }
  .al-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-job__row { grid-template-columns: 1fr auto; }
  .al-job__note { grid-column: 1 / -1; margin-top: -4px; }
  .al-punch__inner { grid-template-columns: 1fr; gap: 18px; }
  .al-grid { grid-template-columns: 1fr; }
  .al-card--feature { grid-column: auto; }
  .al-support, .al-also { grid-template-columns: minmax(0, 1fr); }
  .al-btn { width: 100%; justify-content: center; }
  .al-line, .al-products, .al-portfolio, .al-week, .al-close { padding-block: 64px 56px; }
  .al-week__steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
  .mega__trigger { font-size: 14px; }
  .al-squiggle { white-space: normal; }
  .al-stepaway { font-size: clamp(52px, 17vw, 72px); }
  .al-stepaway .al-squiggle { white-space: nowrap; }
  .al-pf { padding: 16px 14px 12px; }
  .al-grid--core .al-card:not(.al-card--feature) .al-mock { display: none; }
  .al-pf__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-pf__row { grid-template-columns: minmax(0, 1fr) auto; }
  .al-pf__bar { grid-column: 1 / -1; grid-row: 2; }
  .al-who { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .al-squiggle__line path { animation: none; stroke-dashoffset: 0; }
  .al-flow::before, .al-state--run::before, .al-mock__step.run::before { animation: none; }
  .al-flow::after { display: none; }
  .al-flow__node .al-flow__icon { animation: none; transition: none; }
  .al-flow__node:hover .al-flow__icon { transform: none; }
  .mega__panel { animation: none; }
  .al-btn, .al-card, .mega__caret { transition: none; }
}
/* the header on a phone: Platform + both auth buttons on ONE line (v1.1 §A2
   keeps auth visible; the Platform trigger joined them 2026-09-25) */
@media (max-width: 480px) {
  .site-header__inner { gap: 10px; }
  .site-header__actions .btn { white-space: nowrap; padding: 7px 10px; font-size: 13px; }
  .wordmark { letter-spacing: 0.08em; }
}

/* ---- second website pass (owner 2026-09-26) -------------------------------------
   /product: the seven stages of the line. /use-cases: concrete outcomes. Site
   tokens only; statuses keep their meaning (live / being connected). */
.pline { list-style: none; margin-bottom: 0; margin-inline: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.pline__step { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: var(--s-5); background: var(--surface); }
.pline__n { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.pline__name { margin: var(--s-2) 0 var(--s-2); font-size: 1.125rem; color: var(--text); }
.pline__step p { margin: 0; color: var(--text-2); line-height: 1.55; font-size: 0.95rem; }
.pline__step .pline__status { margin-top: var(--s-3); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pline__status--live { color: var(--ok); }
.pline__status--dev { color: var(--warn); }
.pline__step:last-child { border-color: var(--accent-line); }
.ucases { gap: var(--s-5); }
.ucase { display: flex; flex-direction: column; gap: var(--s-3); }
.ucase > p { margin: 0; }
.ucase__title { margin: 0; }
.ucase__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: 0.9rem; color: var(--text-2); }
.ucase__tool { font-weight: 600; color: var(--text); }
.ucase__meta .badge { white-space: normal; max-width: 100%; }