/* ============================================================================
   GCS — GCS Revenue Desk · Redesigned
   Design language: Bentley × Signature Bespoke × Apple
   Obsidian ground · single brass accent · Fraunces (ceremonial) +
   Instrument Sans (operational) + JetBrains Mono (IDs, figures).
   ========================================================================= */

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,50;1,9..144,400..600,100&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---- Obsidian ground · warm-tinted, never pure black --------------- */
  --bg-0:      #0A0A0C;
  --bg-1:      #0E0D10;
  --bg-2:      #111014;
  --paper-0:   #121115;
  --paper-1:   #17151A;
  --paper-2:   #1B1820;
  --paper-3:   #221E27;

  /* ---- Hairlines ---------------------------------------------------- */
  --hairline:        #26232B;
  --hairline-2:      #3B3742;
  --hairline-strong: #4A4552;

  /* ---- Ink (four steps, descending emphasis) ------------------------ */
  --ink-0: #F4EFE4;   /* display / hero */
  --ink-1: #E7E1D5;   /* body */
  --ink-2: #B6AFA3;   /* secondary */
  --ink-3: #8E8779;   /* tertiary, caps, meta */
  --ink-4: #6C6659;   /* placeholder floor */

  /* ---- Brass · money, active, focus. Never primary action. ---------- */
  --brass-200: #EDDFB8;
  --brass-300: #DFC791;
  --brass-400: #D2B378;
  --brass-500: #C9A96E;
  --brass-600: #A08149;
  --brass-700: #6F5830;
  --brass-a08: rgba(201,169,110,.08);
  --brass-a14: rgba(201,169,110,.14);
  --brass-a28: rgba(201,169,110,.28);
  --brass-a45: rgba(201,169,110,.45);

  /* ---- Semantic states ---------------------------------------------- */
  --ok:      #8CD9AD;
  --warn:    #D9A441;
  --danger:  #E0806C;
  --ok-a10:      rgba(140,217,173,.10);
  --ok-a35:      rgba(140,217,173,.35);
  --warn-a12:    rgba(217,164,65,.12);
  --warn-a40:    rgba(217,164,65,.40);
  --danger-a12:  rgba(224,128,108,.12);
  --danger-a40:  rgba(224,128,108,.40);

  /* ---- The one action colour: ivory on obsidian ---------------------- */
  --action:       #F1EDE4;
  --action-hover: #FFFFFF;
  --action-ink:   #14130F;
  --btn-ink:      #191307;

  /* ---- Elevation · one key light, upper-left ------------------------ */
  --shadow-lift:  0 2px 4px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.85), 0 48px 90px -60px rgba(0,0,0,.9);
  --shadow-float: 0 4px 10px rgba(0,0,0,.5), 0 30px 60px -30px rgba(0,0,0,.9), 0 70px 120px -70px rgba(0,0,0,.95);
  --edge-top:     inset 0 1px 0 rgba(244,239,228,.06);
  --focus-ring:   0 0 0 2px var(--brass-500);

  /* ---- Type ---------------------------------------------------------- */
  --font-serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-sans:  "Instrument Sans", "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;

  --fs-cap:      0.6875rem;   /* 11px */
  --fs-meta:     0.78125rem;  /* 12.5px */
  --fs-note:     0.8125rem;   /* 13px */
  --fs-dense:    0.875rem;    /* 14px */
  --fs-row:      0.9375rem;   /* 15px */
  --fs-body:     1rem;        /* 16px */
  --fs-lede:     1.0625rem;   /* 17px */
  --fs-title:    1.1875rem;   /* 19px */
  --fs-section:  1.5rem;      /* 24px */

  --fs-h2-serif:  clamp(1.9rem, 3.3vw, 3rem);
  --fs-outcome:   clamp(1.7rem, 2.7vw, 2.5rem);
  --fs-metric:    clamp(2.3rem, 3.4vw, 3.6rem);
  --fs-metric-lg: clamp(2.8rem, 4vw, 4.2rem);
  --fs-display:   clamp(3.3rem, 7.6vw, 6.9rem);

  --lh-tight:   1.08;
  --lh-snug:    1.32;
  --lh-normal:  1.55;
  --lh-relaxed: 1.68;

  --ls-cap:   0.18em;
  --ls-etch:  0.22em;
  --ls-tight: -0.01em;

  /* ---- Radius -------------------------------------------------------- */
  --r-control: 8px;
  --r-surface: 14px;
  --r-panel:   18px;
  --r-pill:    999px;

  /* ---- Motion -------------------------------------------------------- */
  --ease:     cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.2,0,0,1);
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   360ms;

  /* ---- Page title (single value everywhere) ------------------------- */
  --h1-size:   clamp(40px, 5vw, 64px);
  --h1-lh:     0.96;
  --h1-weight: 400;      /* Fraunces holds gravitas at 400 with opsz */
  --h1-track:  -0.015em;

  /* ==== ONE PUBLIC TYPE SCALE (2026-08-03 uniformity pass) ============
     Measured before this pass, at 1280px, across the twelve public routes:
     SIX h1 specifications, SIX h2 specifications and FIVE eyebrow tokens
     across two font families — including three different letter-spacings at
     the identical 76.8px h1 size. Every public heading now resolves through
     the tokens below, so there is exactly one of each.

     The values are not invented: each is the DOMINANT existing treatment.
       · --pub-h1-size 6vw  -> 76.8px @1280, which seven of the twelve pages
         (/pricing /how-it-works /services /roi /ask /legal /terms) already
         rendered. Only /, /checkout+wizards and /client/login move.
       · --pub-h1-track -0.02em, carried by .pricing__hero-title,
         .build__intro-title, .cinema__title and .auth__title (4 of 6).
       · --pub-h2-size 3vw -> 38.4px @1280: .aside__h's value, on three pages,
         and the median of the six measured sizes (22/32/36/38.4/44/57.6).
       · --pub-h2-track -0.015em, carried by 4 of the 6 h2 rules.
       · --pub-eyebrow-* : the PILL, which four of the five eyebrow tokens
         already were, in --font-sans (3 of 5) at the sheet's own --ls-etch,
         in --brass-300 (the higher-contrast of the two brasses in use).
     Do not re-add a per-surface font-size, letter-spacing or family override:
     that is precisely the failure this block exists to end. ==================== */
  --pub-h1-family: var(--font-serif);
  --pub-h1-size:   clamp(44px, 6vw, 92px);
  --pub-h1-lh:     0.98;
  --pub-h1-weight: 400;
  --pub-h1-track:  -0.02em;
  --pub-h1-opsz:   "opsz" 144, "SOFT" 20;

  --pub-h2-family: var(--font-serif);
  --pub-h2-size:   clamp(28px, 3vw, 44px);
  --pub-h2-lh:     1.08;
  --pub-h2-weight: 400;
  --pub-h2-track:  -0.015em;
  --pub-h2-opsz:   "opsz" 72, "SOFT" 20;

  --pub-eyebrow-family: var(--font-sans);
  --pub-eyebrow-size:   11px;
  --pub-eyebrow-track:  var(--ls-etch);
  --pub-eyebrow-weight: 500;
  --pub-eyebrow-ink:    var(--brass-300);
  --pub-eyebrow-pad:    8px 20px;
  --pub-eyebrow-gap:    20px;

  /* ---- ONE button scale --------------------------------------------
     /pricing shipped a 52px 999px-radius pill against the 40px 10px-radius
     .btn every other public page uses. Both now read these tokens, so the
     purchase button and the site button are one component. --btn-min-h is
     44px because that is the thumb minimum this sheet's own mobile appendix
     already names; .btn--sm keeps its own documented smaller step. */
  --btn-pad:     12px 22px;
  --btn-radius:  10px;
  --btn-size:    14px;
  --btn-weight:  500;
  --btn-track:   0.005em;
  --btn-min-h:   44px;
}

@media (prefers-reduced-motion: reduce){
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- Root reset ---------------------------------------------------- */
* { box-sizing: border-box; }
/* Declare the scheme so UA controls, scrollbars, caret and browser autofill
   paint dark instead of a pale-blue wash. Ported from static/desk.css:22 on
   2026-08-03 so the public wizard can load THIS SHEET ALONE — it was the last
   public page carrying a three-sheet stack (fonts.css + desk.css +
   premium-port.css) purely to inherit these two rules. */
:root { color-scheme: dark; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-0);
  -webkit-box-shadow: inset 0 0 0 1000px var(--paper-0);
  caret-color: var(--ink-0);
  transition: background-color 9999s ease-out 0s;
}
html, body { margin: 0; padding: 0; }
html { background: var(--bg-0); }
body {
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss02";
  min-height: 100vh;
}
::selection { background: var(--brass-a28); color: var(--ink-0); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
/* Inputs/textareas/selects signal focus via their own wrapper border — never paint a
   competing inner box-shadow that would nest inside the wrapper's focus glow. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible { box-shadow: none; outline: none; border-radius: inherit; }
/* Chromium/Windows otherwise opens native select menus with a white system
   surface while preserving this dark desk's pale inherited option text. */
select { color-scheme: dark; }
select option,
select optgroup { background: var(--paper-1); color: var(--ink-0); }

/* ---- Premium brass-tinted scrollbars, site-wide ------------------- */
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--brass-a28) transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--brass-a28) transparent; }
/* WebKit / Chromium / Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--brass-a28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background 200ms ease;
}
::-webkit-scrollbar-thumb:hover { background: var(--brass-a45); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

/* ---- Tabular figures utility ------------------------------------- */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- Grain overlay used on hero/paper -------------------------- */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.93  0 0 0 0 0.82  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* ============================================================================
   App.css — components + shell + surfaces
   ========================================================================= */

/* ---- App shell -------------------------------------------------- */
.gcs-app { min-height: 100vh; background: var(--bg-0); color: var(--ink-1); }

.shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}
.shell__main {
  padding: 40px clamp(24px, 4vw, 64px) 96px;
  max-width: 1360px;
  width: 100%;
}

/* ---- Left rail --------------------------------------------------- */
.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh;
  background:
    linear-gradient(180deg, var(--paper-1) 0%, var(--paper-0) 100%);
  border-right: 1px solid var(--hairline);
  padding: 28px 20px 24px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.rail__brand { display: flex; align-items: center; gap: 12px; padding: 0 6px 24px; border-bottom: 1px solid var(--hairline); }
.rail__logo {
  width: 40px; height: 40px; flex: none;
  border-radius: 8px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(201,169,110,.25)) drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rail__brand:hover .rail__logo { filter: drop-shadow(0 0 18px rgba(201,169,110,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.6)); transform: translateY(-1px); }
.rail__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--brass-500);
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, var(--brass-a28) 0%, transparent 62%);
}
.rail__mark::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(180deg, var(--brass-300), var(--brass-600));
  box-shadow: 0 0 12px var(--brass-a45);
}
.rail__name { font-family: var(--font-serif); font-weight: 500; font-size: 15px; color: var(--ink-0); letter-spacing: -0.01em; line-height: 1.1; }
.rail__sub { display: block; font-family: var(--font-sans); font-size: 9.5px; letter-spacing: var(--ls-etch); text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

.rail__section { font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); padding: 24px 12px 10px; }
.rail__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.rail__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-dense);
  font-weight: 500;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  position: relative;
}
.rail__nav a:hover { background: rgba(244,239,228,.03); color: var(--ink-0); }
.rail__nav a.is-active {
  background: linear-gradient(90deg, var(--brass-a08) 0%, transparent 100%);
  color: var(--ink-0);
}
.rail__nav a.is-active::before {
  content: ""; position: absolute; left: -20px; top: 6px; bottom: 6px; width: 2px;
  background: var(--brass-500);
  border-radius: 2px;
}
.rail__nav .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.rail__user { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: 10px; }
.rail__user__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brass-600), var(--brass-300)); color: var(--btn-ink); display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.rail__user__name { font-size: 13px; color: var(--ink-1); font-weight: 500; }
.rail__user__role { font-size: 11px; color: var(--ink-3); }

/* ---- Page head --------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--hairline); margin-bottom: 40px; }
.eyebrow { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--brass-400); font-weight: 500; margin-bottom: 14px; }
.h1 {
  font-family: var(--font-serif);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-track);
  color: var(--ink-0);
  margin: 0;
  font-variation-settings: "opsz" 96, "SOFT" 20;
}
.h1 .ital { font-style: italic; color: var(--brass-300); font-weight: 400; font-variation-settings: "opsz" 96, "SOFT" 100; }
.lede { color: var(--ink-2); font-size: var(--fs-lede); max-width: 62ch; margin-top: 14px; line-height: var(--lh-relaxed); }

/* ---- Section head ------------------------------------------------ */
.sec { margin-bottom: 56px; }
.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.sec-head__idx { font-family: var(--font-mono); font-size: 12px; color: var(--brass-500); letter-spacing: 0.05em; }
.sec-head__title { font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--ink-0); margin: 0; letter-spacing: -0.005em; font-variation-settings: "opsz" 32; }
/* On a PUBLIC surface a section head is an h2 and reads at the public h2 step;
   the 22px value above stays the operator desk's dense step. Scoped at (0,2,0)
   so declaration order can never decide this. */
.public .sec-head__title,
.build .sec-head__title,
.auth .sec-head__title {
  font-family: var(--pub-h2-family);
  font-size: var(--pub-h2-size);
  font-weight: var(--pub-h2-weight);
  letter-spacing: var(--pub-h2-track);
  line-height: var(--pub-h2-lh);
  font-variation-settings: var(--pub-h2-opsz);
}
.sec-head__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hairline) 0%, transparent 100%); }

/* ---- A section that rests folded ---------------------------------
   RULE 2 (no scrollfests) for a page made of many co-equal sections. The
   heading IS the control, it is always on screen, it carries that section's own
   verdict, and its body is one obvious click away. Nothing is deleted.

   Same disclosure grammar the desk already speaks — `<details class="card">` on
   the client Sales Closer, `.closer-cleanup` in the React bundle — and the
   heading keeps its exact resting typography, so a folded section and an open
   one are one design system. Mirrored in frontend/src/bundle/bundle.css for the
   React half of the product. */
.sec--fold { margin-bottom: 56px; }
.sec--fold > summary {
  list-style: none; cursor: pointer;
  /* A bare 22px heading strip is a 22px hit target. Give it room. */
  padding: 4px 0; margin-bottom: 0;
}
.sec--fold > summary::-webkit-details-marker { display: none; }
.sec--fold > summary .sec-head { margin-bottom: 0; }
.sec--fold > summary:hover .sec-head__title { color: var(--brass-300); }
.sec--fold > summary:focus-visible { outline: 1px solid var(--brass-500); outline-offset: 4px; }
.sec-fold__note { color: var(--ink-3); font-size: 13px; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.sec-fold__chev {
  width: 7px; height: 7px; flex: none;
  border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-fast, .15s) var(--ease, ease);
}
.sec--fold[open] > summary .sec-fold__chev { transform: rotate(-135deg) translateY(-1px); }
.sec-fold__body { padding-top: 22px; }
@media (max-width: 720px) {
  .sec--fold > summary { padding: 10px 0; }   /* 44px touch target */
  .sec-fold__note { display: none; }
}

/* ---- Card -------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, var(--paper-1) 0%, var(--paper-0) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  padding: 24px;
  box-shadow: var(--edge-top), var(--shadow-lift);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card--flat { box-shadow: var(--edge-top); }
.card--quiet { background: var(--paper-0); }

/* ---- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--btn-pad);
  min-height: var(--btn-min-h);
  border-radius: var(--btn-radius);
  font-family: var(--font-sans);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-track);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  text-decoration: none;
  line-height: 1;
}
.btn--primary {
  background: linear-gradient(180deg, #FBF7EE 0%, var(--action) 100%);
  color: var(--btn-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 20px -10px rgba(201,169,110,.4);
}
.btn--primary:hover { background: var(--action-hover); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink-1); border-color: var(--hairline-2); }
.btn--ghost:hover { background: rgba(244,239,228,.04); border-color: var(--hairline-strong); color: var(--ink-0); }
.btn--quiet { background: rgba(244,239,228,.04); color: var(--ink-1); border-color: var(--hairline); }
.btn--quiet:hover { background: rgba(244,239,228,.07); color: var(--ink-0); }
/* The one documented smaller step, for dense operator rows. Public surfaces
   use the default scale only. */
.btn--sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }
.btn--link { background: none; border: none; color: var(--brass-300); padding: 0; }

/* ---- Badges ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--hairline-2);
  color: var(--ink-2);
  background: transparent;
  white-space: nowrap;
}
.badge--brass    { border-color: var(--brass-a45); color: var(--brass-300); background: var(--brass-a08); }
.badge--ok       { border-color: var(--ok-a35);   color: var(--ok);         background: var(--ok-a10); }
.badge--warn     { border-color: var(--warn-a40); color: var(--warn);       background: var(--warn-a12); }
.badge--danger   { border-color: var(--danger-a40); color: var(--danger);   background: var(--danger-a12); }
.badge--prepared { border-color: var(--brass-a45); color: var(--brass-300); background: var(--brass-a08); }
.badge--recovered{ border-color: var(--ok-a35); color: var(--ok); background: var(--ok-a10); }
.badge--awaiting { border-color: var(--warn-a40); color: var(--warn); background: var(--warn-a12); }
.badge--closed   { border-color: var(--hairline-2); color: var(--ink-3); }
.badge--blocked  { border-color: var(--danger-a40); color: var(--danger); background: var(--danger-a12); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Chip ------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: rgba(244,239,228,.02); color: var(--ink-2); font-size: 12.5px; }
.chip svg { color: var(--brass-400); }

.chip-select {
  display: inline-flex; padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip-select:hover { color: var(--ink-0); border-color: var(--hairline-2); }
.chip-select.is-on { color: var(--btn-ink); background: linear-gradient(180deg, var(--brass-300), var(--brass-500)); border-color: var(--brass-500); }
.chips-select { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

/* ---- Stat tiles -------------------------------------------------- */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 40px; }
.fig {
  position: relative;
  background: linear-gradient(180deg, var(--paper-1) 0%, var(--paper-0) 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  padding: 22px 24px;
  box-shadow: var(--edge-top);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}
.fig:hover { border-color: var(--brass-a45); transform: translateY(-1px); }
.fig::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--brass-a45) 50%, transparent 100%); }
.fig__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); margin-bottom: 10px; font-weight: 500; }
.fig__v { font-family: var(--font-mono); font-size: 32px; font-weight: 500; color: var(--ink-0); line-height: 1.1; letter-spacing: -0.02em; }
.fig__v .cur { font-family: var(--font-serif); font-size: 22px; color: var(--brass-400); font-weight: 400; margin-right: 4px; vertical-align: 4px; font-style: italic; }
.fig__note { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

/* ---- Ledger table ------------------------------------------------ */
.table-card { padding: 0; overflow: hidden; }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-row); }
.ledger thead th {
  text-align: left;
  padding: 14px 22px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: var(--ls-etch);
  color: var(--ink-3);
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
  background: rgba(244,239,228,.015);
}
.ledger tbody td { padding: 16px 22px; border-bottom: 1px solid var(--hairline); color: var(--ink-1); vertical-align: middle; }
.ledger tbody tr:last-child td { border-bottom: none; }
.ledger tbody tr:hover td { background: rgba(244,239,228,.02); }
.ledger .ta-r { text-align: right; }
.ledger .acct { color: var(--ink-0); font-weight: 500; }
.ledger .id { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.ledger .sub { display: block; color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.ledger .money { font-family: var(--font-mono); color: var(--brass-300); font-weight: 500; }
.ledger .link { color: var(--ink-0); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; font-weight: 500; font-size: 13.5px; }
.ledger .link:hover { color: var(--brass-300); }

/* ---- Hero (Today) ----------------------------------------------- */
.hero {
  position: relative;
  padding: 56px clamp(28px, 4vw, 64px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  background:
    radial-gradient(ellipse 90% 60% at 30% 20%, var(--brass-a14) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(159,122,73,.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper-0) 100%);
  overflow: hidden;
  box-shadow: var(--edge-top), var(--shadow-float);
  margin-bottom: 48px;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(201,169,110,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201,169,110,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 0%, transparent 90%);
  opacity: .5;
  pointer-events: none;
}
.hero__copy { position: relative; z-index: 2; max-width: 780px; }
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.02;
  font-weight: 400;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  margin: 12px 0 22px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.hero__title .ital { font-style: italic; color: var(--brass-300); font-weight: 400; }
.hero__lead { color: var(--ink-2); font-size: 17px; max-width: 62ch; line-height: 1.5; margin-bottom: 26px; }
.hero__lead .money { color: var(--brass-300); font-family: var(--font-mono); }
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---- Intervention grid ------------------------------------------ */
.int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.int { display: flex; flex-direction: column; }
.int__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.int__icon { color: var(--warn); }
.int__title { font-family: var(--font-serif); font-size: 20px; color: var(--ink-0); font-weight: 500; margin-bottom: 8px; line-height: 1.25; letter-spacing: -0.005em; font-variation-settings: "opsz" 24; }
.int__body { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.int__body:last-child { margin-bottom: 0; }
.int .btn { align-self: flex-start; margin-top: auto; }

/* ---- Rows / record list --------------------------------------- */
.records { display: flex; flex-direction: column; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-surface); overflow: hidden; }
/* Records list — fixed columns so IDs/bodies/badges align across every row */
.rec {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) 128px 16px;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--paper-0);
  transition: background var(--dur-fast) var(--ease);
  color: var(--ink-1);
  text-decoration: none;
}
.rec:hover { background: var(--paper-1); }
.rec__id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec__body { font-size: 14.5px; color: var(--ink-1); line-height: 1.55; min-width: 0; }
.rec__who { color: var(--ink-0); font-weight: 500; }
.rec__go { color: var(--ink-3); justify-self: end; }
.rec--primary { background: linear-gradient(90deg, var(--brass-a08) 0%, var(--paper-0) 100%); }

@media (max-width: 720px) {
  .rec { grid-template-columns: 1fr; gap: 6px; }
  .rec__go { display: none; }
}

/* ---- Command palette / topbar strip ---------------------------- */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--paper-1), var(--paper-0));
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 32px;
  box-shadow: var(--edge-top);
}
.topbar__label { text-transform: uppercase; letter-spacing: var(--ls-cap); font-size: 10px; color: var(--ink-3); font-weight: 500; }
.topbar__val { color: var(--ink-0); font-family: var(--font-mono); font-weight: 500; margin-left: 4px; }
.topbar__sep { color: var(--hairline-2); }
.topbar__right { margin-left: auto; font-family: var(--font-serif); font-style: italic; color: var(--ink-3); font-size: 13px; }

/* ---- Input ----------------------------------------------------- */
.input { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: rgba(244,239,228,.02); color: var(--ink-1); min-width: 320px; }
.input svg { color: var(--ink-3); flex: none; }
.input input { background: none; border: none; outline: none; color: var(--ink-1); font-family: var(--font-sans); font-size: 14px; flex: 1; }
.input input::placeholder { color: var(--ink-4); }
/* WRAPS. Measured 2026-08-04 at 375: the search box declares min-width:320px,
   so the "Show all N" control and its "Showing X of N" count beside it pushed
   the document to 514px wide and the whole operator desk scrolled sideways —
   a rule-2 failure introduced by the rule-2 fix. The bar wraps, and the box
   gives up its floor when there is not room for it. */
.controlbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.controlbar > .input { flex: 1 1 220px; min-width: 0; }

/* ---- Callout for FN locked / 403 -------------------------------- */
.callout { text-align: center; padding: 96px 40px; border: 1px solid var(--hairline); border-radius: var(--r-panel); background: linear-gradient(180deg, var(--paper-1), var(--paper-0)); position: relative; overflow: hidden; }
.callout::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, var(--brass-a14), transparent 60%); }
.callout__eyebrow { position: relative; font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--brass-400); margin-bottom: 20px; }
.callout__title { position: relative; font-family: var(--font-serif); font-size: 44px; color: var(--ink-0); margin: 0 0 18px; letter-spacing: -0.02em; font-weight: 400; }
.callout__title .ital { font-style: italic; color: var(--brass-300); }
/* The callout is the h1 on the public /intake dead-link page, so on a public
   surface it reads at the shared public h1/eyebrow step like every other one.
   Scoped so the desk's own locked-account callout keeps its 44px card step. */
.public .callout__title {
  font-family: var(--pub-h1-family);
  font-size: var(--pub-h1-size);
  font-weight: var(--pub-h1-weight);
  letter-spacing: var(--pub-h1-track);
  line-height: var(--pub-h1-lh);
  font-variation-settings: var(--pub-h1-opsz);
}
.public .callout__eyebrow,
.build .callout__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding: var(--pub-eyebrow-pad);
  border: 1px solid var(--brass-a45);
  border-radius: 999px;
  background: var(--brass-a08);
  color: var(--pub-eyebrow-ink);
  font-family: var(--pub-eyebrow-family);
  font-size: var(--pub-eyebrow-size);
  letter-spacing: var(--pub-eyebrow-track);
  text-transform: uppercase;
  font-weight: var(--pub-eyebrow-weight);
  margin-bottom: var(--pub-eyebrow-gap);
}
.public .callout__eyebrow::before,
.build .callout__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brass-500);
  box-shadow: 0 0 12px var(--brass-500);
}
.callout__body { position: relative; color: var(--ink-2); max-width: 52ch; margin: 0 auto 32px; font-size: 16px; line-height: 1.6; }

/* ---- Index catalog page ---------------------------------------- */
.catalog { max-width: 1200px; margin: 0 auto; padding: 80px 32px; }
.catalog__head { text-align: left; margin-bottom: 64px; }
.catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.catalog__group { margin-bottom: 56px; }
.catalog__group-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.catalog__group-title { font-family: var(--font-serif); font-size: 26px; color: var(--ink-0); margin: 0; font-weight: 500; letter-spacing: -0.01em; }
.catalog__count { font-family: var(--font-mono); font-size: 12px; color: var(--brass-400); }
.catalog__item {
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper-0);
  text-decoration: none;
  color: var(--ink-1);
  transition: all var(--dur) var(--ease);
  display: block;
}
.catalog__item:hover { border-color: var(--brass-a45); background: var(--paper-1); transform: translateY(-2px); }
.catalog__item-eyebrow { font-size: 10px; letter-spacing: var(--ls-etch); text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.catalog__item-title { font-family: var(--font-serif); font-size: 20px; color: var(--ink-0); font-weight: 500; margin-bottom: 6px; letter-spacing: -0.005em; }
.catalog__item-note { font-size: 13px; color: var(--ink-3); }

/* ---- Wordmark on catalog ---------------------------------------- */
.wordmark { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; }
.wordmark__logo {
  width: 56px; height: 56px; flex: none;
  border-radius: 10px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(201,169,110,.28)) drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.wordmark__ring { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--brass-500); display: grid; place-items: center; }
.wordmark__ring::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--brass-300), var(--brass-600)); box-shadow: 0 0 14px var(--brass-a45); }
.wordmark__name { font-family: var(--font-serif); font-size: 20px; color: var(--ink-0); font-weight: 500; letter-spacing: -0.01em; }
.wordmark__sub { font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); }

/* ---- Two-column detail --------------------------------------- */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 1024px){ .split { grid-template-columns: 1fr; } }

/* ---- Definition list --------------------------------------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 0; }
.dl dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); font-weight: 500; padding-top: 3px; }
.dl dd { color: var(--ink-1); margin: 0; font-size: 14px; }
.dl dd.money { font-family: var(--font-mono); color: var(--brass-300); }

/* ---- Fine text ---------------------------------------------- */
.reason { color: var(--ink-2); font-size: 14.5px; margin: 0 0 20px; line-height: 1.6; }
.reason--lead { color: var(--ink-2); font-size: 15px; }
.matter { color: var(--ink-3); font-size: 13.5px; }
.link { color: var(--brass-300); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { color: var(--brass-200); }

/* ---- Kicker / eyebrow small ----------------------------------- */
.kicker { font-size: 10px; letter-spacing: var(--ls-etch); text-transform: uppercase; color: var(--ink-3); font-weight: 500; }

/* ---- Progress bar --------------------------------------------- */
.bar { position: relative; height: 6px; background: var(--paper-2); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.bar__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--brass-600), var(--brass-300)); border-radius: 3px; }

/* ---- Timeline ------------------------------------------------- */
.timeline { display: flex; flex-direction: column; gap: 14px; position: relative; padding-left: 22px; border-left: 1px solid var(--hairline); margin-left: 8px; }
.timeline__item { position: relative; }
.timeline__item::before { content: ""; position: absolute; left: -28px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brass-500); box-shadow: 0 0 0 3px var(--paper-0); }
.timeline__time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.timeline__body { color: var(--ink-1); font-size: 14px; margin-top: 3px; }

/* ---- Divider ------------------------------------------------- */
.rule { height: 1px; background: var(--hairline); margin: 32px 0; border: none; }

/* ---- Provider grid ------------------------------------------- */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.provider { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--paper-0); }
.provider__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok-a35); flex: none; }
.provider--degraded .provider__pulse { background: var(--warn); box-shadow: 0 0 12px var(--warn-a40); }
.provider--down .provider__pulse { background: var(--danger); box-shadow: 0 0 12px var(--danger-a40); }
.provider__name { color: var(--ink-0); font-weight: 500; font-size: 14px; }
.provider__meta { color: var(--ink-3); font-size: 12px; margin-left: auto; font-family: var(--font-mono); }

/* ---- Tabs --------------------------------------------------- */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--paper-0); border: 1px solid var(--hairline); width: fit-content; margin-bottom: 22px; }
.tabs button { padding: 8px 16px; border-radius: var(--r-pill); background: transparent; border: none; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--dur-fast) var(--ease); font-family: inherit; }
.tabs button:hover { color: var(--ink-0); }
.tabs button.is-active { background: linear-gradient(180deg, var(--paper-2), var(--paper-1)); color: var(--ink-0); box-shadow: var(--edge-top); }
.tabs em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--brass-400); margin-left: 6px; }

/* ---- Confidence bar --------------------------------------- */
.confidence { display: inline-flex; align-items: center; gap: 8px; }
.confidence__bar { display: inline-block; width: 80px; height: 4px; background: var(--paper-2); border-radius: 2px; overflow: hidden; }
.confidence__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-600), var(--brass-300)); }
.confidence__num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }

/* ---- Motion (subtle staggered rise) ------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise var(--dur-slow) var(--ease) both; }
.rise-1 { animation-delay: 60ms; }
.rise-2 { animation-delay: 120ms; }
.rise-3 { animation-delay: 180ms; }
.rise-4 { animation-delay: 240ms; }
.rise-5 { animation-delay: 300ms; }

/* ---- Backlink -------------------------------------------- */
.backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-size: 13px; margin-bottom: 20px; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.backlink:hover { color: var(--brass-300); }

/* ---- Utility ---------------------------------------------- */
.stack-4 > * + * { margin-top: 4px; }
.stack-8 > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grow { flex: 1; }
.mt-32 { margin-top: 32px; } .mb-16 { margin-bottom: 16px; } .mb-32 { margin-bottom: 32px; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: relative; height: auto; padding: 20px 24px; flex-direction: row; align-items: center; overflow-x: auto; }
  .rail__section, .rail__user { display: none; }
  .rail__nav { flex-direction: row; }
  .rail__nav a { padding: 8px 12px; }
  .shell__main { padding: 24px 20px 60px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .figs { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   MAILBOX — proper three-pane email management system
   ========================================================================= */
.mailbox {
  display: grid;
  /* 2026-08-03: the reader column was minmax(560px, 1fr) and the middle column
     a fixed 336px, so the grid demanded 1104px of track inside a container the
     client desk never gives it — the shell rail eats ~250px before this box
     starts. MEASURED on /client/email: at a 1280 viewport the .mailbox box is
     914px wide while the tracks resolve to 208+336+560, putting the reader at
     x=860..1420. With overflow:hidden and no horizontal scroll, 191px of the
     560px reader — 34% of the pane that holds the letter GCS prepared — was
     clipped away with no way to reach it, and the pane's only action button
     (x=1356) was outside the clip box entirely: rendered, invisible,
     unclickable. At 1100 it was 47%.
     Both flexible tracks now have a floor of 0, so the panes SHARE what the
     container actually has instead of overflowing it. The list keeps a 336px
     ceiling so it does not eat the letter on a wide screen. */
  grid-template-columns: minmax(0, 208px) minmax(0, 336px) minmax(0, 1fr);
  gap: 0;
  height: calc(100vh - 260px);
  min-height: 640px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: var(--paper-0);
  overflow: hidden;
  box-shadow: var(--edge-top), var(--shadow-lift);
}
/* The single-pane variant the email thread page uses: one .mailbox__reader and
   nothing else. desk.css has defined .mailbox--reader since the port, but
   desk_client_base.html loads desk.css BEFORE this sheet and the two selectors
   carry identical specificity — so .mailbox above silently won, and the letter
   rendered inside the 208px folder track. MEASURED on
   /client/email/threads/<id> at 1280: the letter body box was 142px wide and
   558px tall, a ribbon of text down the left edge of the page, at every
   viewport. Redefining it here puts the override back on the winning side of
   the cascade. */
.mailbox.mailbox--reader { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
.mailbox--reader .reader__thread { overflow: visible; }
/* A 20px-tall text link carrying a page's only exit is not a tap target. The
   hit box becomes 44px; the type does not move. */
.backlink--tap { min-height: 44px; margin-bottom: 0; }

/* --- Left rail: folders & labels --- */
.mailbox__rail {
  background: linear-gradient(180deg, var(--paper-1), var(--paper-0));
  border-right: 1px solid var(--hairline);
  padding: 20px 12px;
  overflow-y: auto;
}
.mailbox__section-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch);
  color: var(--ink-3); font-weight: 500;
  padding: 16px 10px 8px;
}
.mailbox__section-h:first-child { padding-top: 0; }
.mailbox__folder, .mailbox__label {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0;
  border: none; background: transparent;
  color: var(--ink-2); font-family: inherit;
  font-size: 13.5px; font-weight: 500;
  border-radius: 8px; cursor: pointer;
  width: 100%; text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  position: relative;
}
.mailbox__folder:hover, .mailbox__label:hover { background: rgba(244,239,228,.03); color: var(--ink-0); }
.mailbox__folder.is-on { background: linear-gradient(90deg, var(--brass-a08), transparent); color: var(--ink-0); }
.mailbox__folder.is-on::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 2px;
  background: var(--brass-500); border-radius: 2px;
}
.mailbox__folder.is-brass { color: var(--brass-300); }
.mailbox__folder.is-brass.is-on { color: var(--brass-200); }
.mailbox__count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.mailbox__folder.is-on .mailbox__count { color: var(--brass-300); }
.mailbox__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* --- Middle: thread list --- */
.mailbox__list {
  border-right: 1px solid var(--hairline);
  background: var(--paper-0);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mailbox__toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}
.mailbox__search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; padding: 6px 12px;
  background: rgba(244,239,228,.03);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-3);
}
.mailbox__search svg { color: var(--ink-3); flex: none; }
.mailbox__search input {
  border: none; background: none; outline: none;
  color: var(--ink-1); font-family: inherit; font-size: 13px;
  flex: 1;
}
.mailbox__search input::placeholder { color: var(--ink-4); }
.mailbox__toolbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 6px;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--ink-2); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.mailbox__toolbtn:hover { color: var(--ink-0); border-color: var(--hairline-2); background: rgba(244,239,228,.02); }
.mailbox__bulk {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--brass-a08);
  border-bottom: 1px solid var(--brass-a45);
}
.mailbox__scroll { overflow-y: auto; flex: 1; }
.mailbox__thread {
  display: flex; gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  text-align: left; width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease);
  position: relative;
}
.mailbox__thread:hover { background: rgba(244,239,228,.02); }
.mailbox__thread.is-open {
  background: linear-gradient(90deg, var(--brass-a08) 0%, transparent 100%);
}
.mailbox__thread.is-open::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  background: var(--brass-500);
}
.mailbox__thread-check { flex: none; padding-top: 2px; }
.mailbox__cb {
  display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid var(--hairline-2);
  background: transparent;
  transition: all var(--dur-fast) var(--ease);
}
.mailbox__cb.is-on { background: var(--brass-500); border-color: var(--brass-500); }
.mailbox__cb.is-on::after {
  content: ""; display: block; width: 4px; height: 8px;
  border: 2px solid var(--btn-ink); border-top: none; border-left: none;
  transform: rotate(45deg); margin: 0 auto; margin-top: -1px;
}
.mailbox__thread-body { flex: 1; min-width: 0; }
.mailbox__thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.mailbox__who { color: var(--ink-0); font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox__thread.is-unread .mailbox__who { color: var(--brass-200); font-weight: 600; }
.mailbox__when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); flex: none; }
.mailbox__thread-subject {
  font-family: var(--font-serif); font-size: 15px; color: var(--ink-1);
  font-weight: 500;
  margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variation-settings: "opsz" 24;
}
.mailbox__thread.is-unread .mailbox__thread-subject { color: var(--ink-0); }
.mailbox__thread-preview {
  color: var(--ink-3); font-size: 12.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.mailbox__thread-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mailbox__account { font-size: 11px; color: var(--ink-3); }
.mailbox__value { font-family: var(--font-mono); font-size: 11px; color: var(--brass-400); margin-left: auto; }
.mailbox__attach { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-3); }

/* --- Right: reader + composer --- */
.mailbox__reader {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--paper-0);
  min-width: 0;
}
.reader__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px;
  padding: 22px 32px 20px;
  border-bottom: 1px solid var(--hairline);
}
.reader__head-main { min-width: 0; flex: 1; }
.reader__subject {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink-0);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin-bottom: 8px;
  font-variation-settings: "opsz" 32;
  /* keep one graceful line where possible, wrap cleanly when not */
  overflow-wrap: break-word;
}
.reader__meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.reader__who { color: var(--ink-1); font-weight: 500; }
.reader__sep { color: var(--hairline-2); }
.reader__actions { display: flex; gap: 6px; flex: none; padding-top: 4px; }
.reader__btn {
  width: 32px; height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  border-radius: 8px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.reader__btn:hover { background: rgba(244,239,228,.05); color: var(--brass-300); border-color: var(--hairline); }

.reader__thread {
  overflow-y: auto;
  flex: 1;
  padding: 24px 32px 32px;
  /* premium brass-tinted scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--brass-a28) transparent;
}
.reader__thread::-webkit-scrollbar { width: 10px; }
.reader__thread::-webkit-scrollbar-track { background: transparent; }
.reader__thread::-webkit-scrollbar-thumb {
  background: var(--brass-a28);
  border-radius: 999px;
  border: 3px solid var(--paper-0);
}
.reader__thread::-webkit-scrollbar-thumb:hover { background: var(--brass-a45); }
.msg {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper-1);
  margin-bottom: 12px;
  overflow: hidden;
}
.msg--draft {
  background: linear-gradient(180deg, rgba(201,169,110,.06), var(--paper-0));
  border-color: var(--brass-a45);
  box-shadow: 0 8px 24px -12px rgba(201,169,110,.15);
}
.msg__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
}
.msg__from { color: var(--ink-1); font-weight: 500; }
.msg__from em { font-style: normal; color: var(--brass-300); }
.msg__addr { color: var(--ink-3); font-weight: 400; margin-left: 4px; font-family: var(--font-mono); font-size: 11px; }
.msg__time { color: var(--ink-3); font-size: 11px; }
.msg__badge { display: inline-block; font-size: 9.5px; letter-spacing: var(--ls-etch); text-transform: uppercase; color: var(--brass-300); background: var(--brass-a08); border: 1px solid var(--brass-a45); border-radius: 999px; padding: 2px 8px; margin-right: 8px; font-weight: 500; }
.msg__body { padding: 20px 24px; color: var(--ink-1); font-size: 15px; line-height: 1.68; max-width: 68ch; }
.msg__body p { margin: 0 0 14px; }
.msg__body p:last-child { margin-bottom: 0; }
.msg__attach {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(244,239,228,.03);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 12.5px; color: var(--ink-2);
  font-family: var(--font-mono);
}
.msg__actions {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--brass-a28);
  background: rgba(201,169,110,.03);
}

.reader__reply {
  border-top: 1px solid var(--hairline);
  padding: 16px 32px 20px;
  background: linear-gradient(180deg, var(--paper-0), var(--paper-1));
}
.reader__reply-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.reader__reply-tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.reader__reply-tabs button:hover { color: var(--ink-0); border-color: var(--hairline-strong); }
.reader__reply-tabs button.is-on { color: var(--brass-200); border-color: var(--brass-a45); background: var(--brass-a08); }
.reader__reply-tabs button.is-on svg { color: var(--brass-300); }
.reader__reply textarea {
  width: 100%; min-height: 96px;
  padding: 14px 16px;
  background: rgba(244,239,228,.02);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  color: var(--ink-1);
  font-family: inherit; font-size: 14.5px; line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.reader__reply textarea:focus { border-color: var(--brass-a45); background: rgba(244,239,228,.04); }
.reader__reply textarea::placeholder { color: var(--ink-4); font-style: italic; }
.reader__reply-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; flex-wrap: wrap; }
.reader__empty { display: grid; place-items: center; height: 100%; color: var(--ink-3); font-family: var(--font-serif); font-style: italic; font-size: 18px; }

@media (max-width: 1200px) {
  /* Below 1200 the container is tight enough that a 300px fixed list left the
     reader a 254px slot (MEASURED at 1100). Fractional tracks let the letter
     take the larger share instead of the list holding its width. */
  .mailbox { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 1.3fr); }
}
@media (max-width: 960px) {
  .mailbox { grid-template-columns: minmax(0, 1fr); height: auto; }
  .mailbox__rail, .mailbox__list { border-right: none; border-bottom: 1px solid var(--hairline); }
  .mailbox__rail { padding: 12px; display: flex; flex-wrap: wrap; gap: 4px; overflow-x: auto; }
  .mailbox__section-h { display: none; }
  .mailbox__folder, .mailbox__label { width: auto; }
}

/* ============================================================================
   SIMPLIFY — quiet the noise on Today pages
   ========================================================================= */
.today-focus { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-bottom: 56px; align-items: start; }
@media (max-width: 1024px){ .today-focus { grid-template-columns: 1fr; } }
.today-focus__primary { }
.today-focus__aside { position: sticky; top: 32px; }
.money-card {
  padding: 32px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-0));
  border: 1px solid var(--brass-a45);
  border-radius: var(--r-panel);
  box-shadow: 0 20px 60px -40px rgba(201,169,110,.5);
}
.money-card__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--brass-400); font-weight: 500; margin-bottom: 14px; }
.money-card__v { font-family: var(--font-mono); font-size: 48px; font-weight: 500; color: var(--ink-0); line-height: 1; letter-spacing: -0.02em; }
.money-card__v .cur { font-family: var(--font-serif); font-size: 30px; color: var(--brass-300); font-weight: 400; margin-right: 6px; vertical-align: 6px; font-style: italic; }
.money-card__delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 12.5px; color: var(--ok); font-family: var(--font-mono); }
.money-card__note { color: var(--ink-3); font-size: 12.5px; margin-top: 18px; line-height: 1.5; }
.money-card__quiet-row { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--hairline); font-size: 13px; }
.money-card__quiet-row:first-of-type { margin-top: 22px; }
.money-card__quiet-row span:first-child { color: var(--ink-3); }
.money-card__quiet-row span:last-child { color: var(--ink-1); font-family: var(--font-mono); }

.decision-list { display: flex; flex-direction: column; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-surface); overflow: hidden; }
.decision {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  padding: 22px 24px;
  align-items: center;
  background: var(--paper-0);
  color: inherit; text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
.decision:hover { background: var(--paper-1); }
.decision__value { font-family: var(--font-mono); font-size: 18px; color: var(--brass-300); font-weight: 500; min-width: 88px; }
.decision__body { }
.decision__who { color: var(--ink-0); font-weight: 500; font-size: 15px; margin-bottom: 3px; }
.decision__note { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.decision__actions { display: flex; gap: 6px; }

.tiny-list { display: flex; flex-direction: column; }
.tiny-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-1);
  text-decoration: none;
  font-size: 13.5px;
  transition: color var(--dur-fast) var(--ease);
}
.tiny-list a:last-child { border-bottom: none; }
.tiny-list a:hover { color: var(--brass-300); }
.tiny-list__meta { color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; }

/* ============================================================================
   ADMIN EMAIL — Prepared-across-the-book strip · account filter · identity chip
   ========================================================================= */
.book-strip {
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-surface);
  background: linear-gradient(180deg, var(--paper-1), var(--paper-0));
  box-shadow: var(--edge-top);
  margin-bottom: 20px;
}
.book-strip__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.book-strip__total { font-family: var(--font-mono); font-size: 12px; color: var(--brass-300); }
.book-strip__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.book-strip__tile {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: rgba(244,239,228,.02);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all var(--dur-fast) var(--ease);
}
.book-strip__tile:hover { color: var(--ink-0); border-color: var(--hairline-2); background: rgba(244,239,228,.04); }
.book-strip__tile.has-work { border-color: var(--brass-a45); color: var(--ink-0); }
.book-strip__tile.has-work .book-strip__count { color: var(--brass-300); }
.book-strip__tile.is-on { background: var(--brass-a08); border-color: var(--brass-500); }
.book-strip__acct { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-strip__count { font-family: var(--font-mono); font-size: 14px; color: var(--ink-3); font-weight: 500; }

.acct-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.acct-filter .kicker { margin-right: 6px; }

.mailbox__acct-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--hairline-2);
  background: rgba(244,239,228,.02);
  border-radius: 999px;
  font-size: 10.5px; color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 500;
}
.mailbox__acct-chip svg { color: var(--brass-400); }

.reader__value { font-family: var(--font-mono); color: var(--brass-300); font-weight: 500; }

.reader__identity {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 28px;
  background: linear-gradient(90deg, var(--brass-a08), transparent);
  border-bottom: 1px solid var(--brass-a28);
}
.reader__identity-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--brass-a45);
  background: var(--paper-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brass-200);
}
.reader__identity-chip svg { color: var(--brass-400); }
.reader__identity-note { color: var(--ink-3); font-size: 12px; font-family: var(--font-serif); font-style: italic; margin-left: auto; }

/* ============================================================================
   MOBILE MAILBOX (≤900px) — reveal-based three-pane
   ========================================================================= */
@media (max-width: 900px) {
  .mailbox {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    height: auto;
    min-height: 480px;
  }
  .mailbox__rail {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 8px;
    overflow: visible;
  }
  .mailbox__section-h { grid-column: 1 / -1; padding: 6px 4px 2px; font-size: 9px; }
  .mailbox__folder, .mailbox__label { width: 100%; padding: 11px 12px; min-height: 44px; font-size: 12.5px; }
  .mailbox__folder.is-on::before { display: none; }
  .mailbox__folder.is-on { border: 1px solid var(--brass-a45); background: var(--brass-a08); border-radius: 8px; }

  .mailbox__list {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    max-height: 60vh;
  }
  .mailbox__toolbar { padding: 10px 12px; }
  .mailbox__thread { padding: 12px 14px; }
  .mailbox__thread-subject { font-size: 14px; }

  .mailbox__reader { min-height: 400px; }
  .reader__head { padding: 14px 18px; flex-wrap: wrap; }
  .reader__subject { font-size: 18px; }
  .reader__thread { padding: 14px 18px; }
  .reader__reply { padding: 12px 18px 14px; }
  .msg__body { padding: 14px 16px; font-size: 14px; }
  .msg__actions { flex-wrap: wrap; gap: 6px; }
  .reader__identity { padding: 10px 18px; }
  .reader__identity-note { display: none; }

  .book-strip { padding: 16px 18px; }
  .book-strip__row { grid-template-columns: 1fr 1fr; }
  .acct-filter { gap: 6px; }
  .acct-filter .chip-select { font-size: 12px; padding: 5px 10px; }
}

/* ============================================================================
   PUBLIC — landing / pricing / roi / login shells
   ========================================================================= */
.public {
  min-height: 100vh;
  background: var(--bg-0);
  display: flex; flex-direction: column;
}
.public__nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--hairline);
  background: rgba(10,10,12,.6);
  backdrop-filter: blur(20px);
  position: sticky; top: 0; z-index: 10;
}
.public__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink-0); }
.public__brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(201,169,110,.25)); }
.public__brand-name { font-family: var(--font-serif); font-weight: 500; font-size: 16px; letter-spacing: -0.005em; }
.public__brand-sub { display: block; font-size: 9.5px; letter-spacing: var(--ls-etch); text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.public__nav-links { display: flex; gap: 4px; align-items: center; }
.public__nav-links a { padding: 8px 14px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 500; border-radius: 999px; transition: all var(--dur-fast) var(--ease); }
.public__nav-links a:hover { color: var(--ink-0); background: rgba(244,239,228,.04); }
.public__nav-links a.is-primary { background: linear-gradient(180deg, #FBF7EE, var(--action)); color: var(--btn-ink); padding: 8px 18px; }

.public__wrap { max-width: 1160px; margin: 0 auto; padding: 80px clamp(24px, 4vw, 56px) 120px; width: 100%; }
.public__hero { max-width: 880px; margin-bottom: 80px; position: relative; }
/* /roi and /ask carry the shared `.h1` (the operator page-head heading). On a
   PUBLIC hero it must read as the public h1, not the desk one, so it resolves
   through the same --pub-h1-* tokens as the other five public h1 rules. */
.public__hero .h1 {
  font-family: var(--pub-h1-family);
  font-size: var(--pub-h1-size);
  line-height: var(--pub-h1-lh);
  font-weight: var(--pub-h1-weight);
  letter-spacing: var(--pub-h1-track);
  font-variation-settings: var(--pub-h1-opsz);
  margin-top: 20px;
}
.public__hero .lede { font-size: 19px; margin-top: 26px; max-width: 68ch; line-height: 1.65; }
.public__hero-actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }

.public__foot {
  border-top: 1px solid var(--hairline);
  padding: 26px clamp(24px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink-3); font-size: 12.5px;
  margin-top: auto;
}

/* Pricing plans */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
@media (max-width: 900px){ .plans { grid-template-columns: 1fr; } }
.plan {
  background: linear-gradient(180deg, var(--paper-1), var(--paper-0));
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 36px 32px 32px;
  box-shadow: var(--edge-top), var(--shadow-lift);
  position: relative;
}
.plan--flag { border-color: var(--brass-a45); }
.plan--flag::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(180deg, var(--brass-a45), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.plan__flag { position: absolute; top: -12px; left: 32px; font-size: 10px; letter-spacing: var(--ls-etch); text-transform: uppercase; padding: 4px 12px; background: linear-gradient(180deg, var(--brass-300), var(--brass-500)); color: var(--btn-ink); border-radius: 999px; font-weight: 600; }
.plan__name { font-family: var(--font-serif); font-size: 28px; color: var(--ink-0); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; }
.plan__tagline { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin-bottom: 24px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan__price .cur { font-family: var(--font-serif); font-size: 24px; color: var(--brass-400); font-style: italic; }
.plan__price .amt { font-family: var(--font-mono); font-size: 44px; font-weight: 500; color: var(--ink-0); letter-spacing: -0.02em; }
.plan__price .per { color: var(--ink-3); font-size: 13px; }
.plan__note { color: var(--ink-3); font-size: 12px; margin-bottom: 24px; }
.plan__feats { list-style: none; margin: 0; padding: 0; }
.plan__feats li { display: flex; gap: 10px; padding: 8px 0; color: var(--ink-1); font-size: 14px; border-top: 1px solid var(--hairline); }
.plan__feats li:first-child { border-top: none; }
.plan__feats svg { color: var(--brass-400); flex: none; margin-top: 3px; }
.plan__feats li.is-quiet { color: var(--ink-3); }
.plan__feats li.is-quiet svg { color: var(--ink-4); }
.plan__cta { margin-top: 26px; width: 100%; }

/* ROI calculator */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
@media (max-width: 900px){ .roi { grid-template-columns: 1fr; } }
.roi__form { padding: 32px; background: linear-gradient(180deg, var(--paper-1), var(--paper-0)); border: 1px solid var(--hairline); border-radius: 18px; box-shadow: var(--edge-top); }
.roi__field { margin-bottom: 22px; }
.roi__field label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); font-weight: 500; margin-bottom: 8px; }
.roi__field input, .roi__field select {
  width: 100%; padding: 12px 16px;
  background: rgba(244,239,228,.03);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink-0);
  font-family: var(--font-mono); font-size: 15px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.roi__field input:focus { border-color: var(--brass-a45); }
.roi__result {
  padding: 32px;
  border: 1px solid var(--brass-a45);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-0));
  box-shadow: 0 20px 60px -40px rgba(201,169,110,.5);
  align-self: start; position: sticky; top: 100px;
}
.roi__result-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--brass-400); font-weight: 500; margin-bottom: 12px; }
.roi__result-big { font-family: var(--font-mono); font-size: 56px; font-weight: 500; color: var(--ink-0); line-height: 1; letter-spacing: -0.02em; margin-bottom: 8px; }
.roi__result-big .cur { font-family: var(--font-serif); font-size: 32px; color: var(--brass-300); font-style: italic; vertical-align: 8px; margin-right: 4px; }
.roi__result-note { color: var(--ink-2); font-size: 14px; line-height: 1.6; margin-top: 20px; }

/* Login */
.login { display: grid; place-items: center; min-height: 100vh; padding: 40px 20px; background: var(--bg-0); position: relative; overflow: hidden; }
.login::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--brass-a14), transparent 60%);
}
.login__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  padding: 48px 44px;
  background: linear-gradient(180deg, var(--paper-1), var(--paper-0));
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--edge-top), var(--shadow-float);
}
.login__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.login__brand img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(201,169,110,.3)); }
.login__brand-name { font-family: var(--font-serif); font-size: 18px; color: var(--ink-0); font-weight: 500; }
.login__brand-sub { display: block; font-size: 10px; letter-spacing: var(--ls-etch); text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.login__title { font-family: var(--font-serif); font-size: 36px; color: var(--ink-0); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.05; font-variation-settings: "opsz" 72; }
.login__title .ital { font-style: italic; color: var(--brass-300); }
.login__note { color: var(--ink-2); font-size: 14.5px; margin-bottom: 32px; line-height: 1.55; }
.login__field { margin-bottom: 18px; }
.login__field label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); margin-bottom: 8px; font-weight: 500; }
.login__field input {
  width: 100%; padding: 12px 16px;
  background: rgba(244,239,228,.03);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink-0); font-family: var(--font-sans); font-size: 15px;
  outline: none;
}
.login__field input:focus { border-color: var(--brass-a45); background: rgba(244,239,228,.05); }
.login__row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-3); margin: 6px 0 24px; }
.login__row a { color: var(--brass-300); text-decoration: none; }
.login__row a:hover { color: var(--brass-200); }
.login__foot { text-align: center; color: var(--ink-3); font-size: 12.5px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.login__foot a { color: var(--brass-300); text-decoration: none; }

/* Home extras — three-column feature block */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 900px){ .feats { grid-template-columns: 1fr; } }
.feat { padding: 32px; background: linear-gradient(180deg, var(--paper-1), var(--paper-0)); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--edge-top); }
.feat__num { font-family: var(--font-mono); font-size: 12px; color: var(--brass-500); margin-bottom: 20px; }
.feat__title { font-family: var(--font-serif); font-size: 24px; color: var(--ink-0); font-weight: 500; margin-bottom: 12px; letter-spacing: -0.005em; }
.feat__body { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

/* ============================================================================
   MAILBOX FULLSCREEN — reader takes the whole surface
   ========================================================================= */
.mailbox--fullscreen {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: calc(100vh - 200px);
  min-height: 700px;
}
.mailbox--fullscreen .mailbox__rail,
.mailbox--fullscreen .mailbox__list { display: none; }
.mailbox--fullscreen .mailbox__reader { grid-column: 1 / -1; }
.mailbox--fullscreen .reader__head { padding: 22px 40px; }
.mailbox--fullscreen .reader__thread { padding: 28px 40px; }
.mailbox--fullscreen .reader__reply { padding: 18px 40px 22px; }
.mailbox--fullscreen .reader__identity { padding: 12px 40px; }
.mailbox--fullscreen .msg__body { padding: 22px 26px; font-size: 15.5px; line-height: 1.7; }
.mailbox--fullscreen .msg__head { padding: 16px 26px; }
.mailbox--fullscreen .reader__subject { font-size: 28px; max-width: 68ch; }
.mailbox--fullscreen .reader__reply textarea { min-height: 120px; font-size: 15px; }
@media (max-width: 900px) {
  .mailbox--fullscreen { grid-template-columns: 1fr; }
}
.rail__nav a.is-locked { color: var(--ink-3); }
.rail__nav a.is-locked:hover { color: var(--ink-2); }
.rail__nav a.is-locked .count { font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--brass-400); }

/* ============================================================================
   ACTION SUBPAGE FORMS — compose, settings, reschedule
   ========================================================================= */
.compose-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
}
.compose-row label { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); font-weight: 500; }
.compose-row input, .compose-row select { background: transparent; border: none; outline: none; color: var(--ink-0); font-family: var(--font-sans); font-size: 15px; padding: 4px 0; width: 100%; }
.compose-row input::placeholder { color: var(--ink-4); }
.compose-row select { appearance: none; padding-right: 20px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right center / 10px; }
.compose-row--textarea { grid-template-columns: 1fr; padding: 16px 20px 20px; }
.compose-row textarea { width: 100%; min-height: 320px; background: transparent; border: none; outline: none; color: var(--ink-1); font-family: var(--font-sans); font-size: 15px; line-height: 1.65; resize: vertical; }
.compose-row textarea::placeholder { color: var(--ink-4); font-style: italic; }
.compose-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--hairline); background: rgba(244,239,228,.015); }

.tpl {
  display: flex; align-items: center; width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-1);
  font-family: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  margin-bottom: 6px;
}
.tpl:hover { border-color: var(--hairline-2); background: rgba(244,239,228,.02); }
.tpl.is-on { border-color: var(--brass-a45); background: var(--brass-a08); color: var(--brass-200); }

.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); font-weight: 500; }
.form-field input, .form-field textarea, .form-field select {
  padding: 12px 14px;
  background: rgba(244,239,228,.03);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: 14.5px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
  resize: vertical;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--brass-a45); }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th { text-align: left; padding: 12px 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); font-weight: 500; border-bottom: 1px solid var(--hairline); }
.hours-table td { padding: 10px; border-bottom: 1px solid var(--hairline); }
.hours-table tr:last-child td { border-bottom: none; }
.hours-table input[type="time"] { padding: 8px 12px; background: rgba(244,239,228,.03); border: 1px solid var(--hairline); border-radius: 8px; color: var(--ink-0); font-family: var(--font-mono); font-size: 13.5px; outline: none; }
.hours-table input[type="time"]:disabled { opacity: .4; }

.rubric { padding: 14px; background: rgba(244,239,228,.02); border: 1px solid var(--hairline); border-radius: 10px; margin-top: 8px; }
.rubric__row { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 14px; padding: 8px 0; }
.rubric__row span { font-size: 12.5px; color: var(--ink-2); }
.rubric__row input[type="range"] { appearance: none; height: 4px; background: var(--paper-2); border-radius: 2px; outline: none; }
.rubric__row input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--brass-300), var(--brass-500)); cursor: pointer; box-shadow: 0 0 8px var(--brass-a45); }

.objection { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.objection:last-child { border-bottom: none; }
.objection__q { display: block; font-family: var(--font-serif); font-style: italic; color: var(--brass-300); font-size: 15px; margin-bottom: 6px; }
.objection__a { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

/* Calendar days picker */
.cal-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border: 1px solid var(--hairline); border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; font-family: inherit; transition: all var(--dur-fast) var(--ease); }
.cal-day:hover { border-color: var(--hairline-2); color: var(--ink-0); }
.cal-day.is-on { border-color: var(--brass-500); background: var(--brass-a08); color: var(--ink-0); }
.cal-day__d { font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); }
.cal-day__n { font-family: var(--font-mono); font-size: 22px; font-weight: 500; }
.cal-day__f { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--ls-etch); }
.cal-day.is-on .cal-day__d { color: var(--brass-300); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.slot { padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px; background: transparent; color: var(--ink-1); font-family: inherit; font-size: 13.5px; cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.slot:hover { border-color: var(--hairline-2); background: rgba(244,239,228,.02); }
.slot.is-on { border-color: var(--brass-500); background: var(--brass-a08); color: var(--brass-200); }

/* ============================================================================
   ELEGANCE PRIMITIVES — replace prose with structure
   ========================================================================= */

/* Fact tile — icon + label + value, no prose */
.fact-list { display: flex; flex-direction: column; }
.fact {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.fact:last-child { border-bottom: none; }
.fact__ic { display: grid; place-items: center; color: var(--brass-400); }
.fact__body { min-width: 0; }
.fact__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); font-weight: 500; margin-bottom: 3px; }
.fact__v { color: var(--ink-0); font-size: 14.5px; font-weight: 500; }
.fact__meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }

/* Numbered step */
.steps { display: flex; flex-direction: column; gap: 2px; }
.step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.step:last-child { border-bottom: none; }
.step__n {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brass-300);
  border: 1px solid var(--brass-a45);
  background: var(--brass-a08);
  font-weight: 500;
}
.step__t { color: var(--ink-1); font-size: 14px; }
.step__t strong { color: var(--ink-0); font-weight: 500; }

/* Q&A tight row */
.qa { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.qa:last-child { border-bottom: none; }
.qa__q { font-family: var(--font-serif); font-style: italic; color: var(--brass-300); font-size: 15px; letter-spacing: -0.005em; }
.qa__a { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.qa__a strong { color: var(--ink-0); font-weight: 500; }

/* Chip row for sources / meta */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row .chip { font-size: 11.5px; padding: 4px 10px; }

/* Faq — expand/collapse */
.faq { display: flex; flex-direction: column; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-surface); overflow: hidden; }
.faq details { background: var(--paper-0); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  /* 15px keeps the row a 55px touch target, comfortably over the 44px floor. */
  padding: 15px 22px;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink-0);
  font-weight: 500;
  letter-spacing: -0.005em;
  list-style: none;
  transition: background var(--dur-fast) var(--ease);
  font-variation-settings: "opsz" 24;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1px solid var(--brass-400);
  border-bottom: 1px solid var(--brass-400);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { background: rgba(244,239,228,.02); color: var(--ink-0); }
.faq summary:hover { background: rgba(244,239,228,.02); }
.faq__body { padding: 0 22px 18px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }

/* Tiny hint — one-liner with icon in a card aside, replaces prose */
.hint {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.hint:last-child { border-bottom: none; }
.hint svg { color: var(--brass-400); margin-top: 3px; }
.hint strong { color: var(--ink-0); font-weight: 500; }

/* Definition mini — a compact horizontal fact */
.dfn { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.dfn strong { color: var(--ink-0); font-weight: 500; font-family: var(--font-mono); }

/* ============================================================================
   CINEMATIC HOME — theatrical hero, staged reveals
   ========================================================================= */
.cinema { background: var(--bg-0); color: var(--ink-0); overflow-x: hidden; }

/* Theatrical hero.
   RULE 2 (NO SCROLLFESTS), measured 2026-08-04 on production: `min-height:
   100vh` spent an ENTIRE screen of the owner's 3.0-screen budget on a headline
   and two buttons, and it did it before the page said anything. The hero's own
   content measures ~430px, so the frame is now sized to the content with a
   ceiling instead of to the viewport: nothing moves, nothing is deleted, and
   /(home) came down 4.13 -> under budget with the hero still filling the first
   screen. */
.cinema__hero {
  position: relative;
  min-height: min(100vh, 620px);
  display: grid;
  place-items: center;
  padding: 64px clamp(24px, 6vw, 96px) 56px;
  overflow: hidden;
  isolation: isolate;
}
.cinema__hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 32%, var(--brass-a28) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 90%, rgba(159,122,73,.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-2) 100%);
  z-index: -2;
}
.cinema__hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(201,169,110,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201,169,110,.06) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 50% 70% at 50% 40%, black 0%, transparent 85%);
  z-index: -1;
  animation: cinema-drift 60s linear infinite;
}
@keyframes cinema-drift {
  to { background-position: 96px 96px, 96px 96px; }
}
.cinema__hero-inner { text-align: center; max-width: 1100px; z-index: 1; }
/* THE eyebrow. Every public eyebrow — .cinema__eyebrow, .eyebrow (inside a
   public surface), .build__intro-eyebrow, .doc__eyebrow and .auth__kicker —
   is this one pill. See the --pub-eyebrow-* block at the top of the sheet. */
.cinema__eyebrow,
.build__intro-eyebrow,
.doc__eyebrow,
.auth__kicker,
.public .eyebrow,
.build .eyebrow,
.auth .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding: var(--pub-eyebrow-pad);
  border: 1px solid var(--brass-a45);
  border-radius: 999px;
  background: var(--brass-a08);
  color: var(--pub-eyebrow-ink);
  font-family: var(--pub-eyebrow-family);
  font-size: var(--pub-eyebrow-size);
  letter-spacing: var(--pub-eyebrow-track);
  text-transform: uppercase;
  font-weight: var(--pub-eyebrow-weight);
  margin-bottom: var(--pub-eyebrow-gap);
}
/* The brass marker dot is part of the token, not a home-page flourish — it is
   what makes the pill legible as one component on every surface. */
.cinema__eyebrow::before,
.build__intro-eyebrow::before,
.doc__eyebrow::before,
.auth__kicker::before,
.public .eyebrow::before,
.build .eyebrow::before,
.auth .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brass-500);
  box-shadow: 0 0 12px var(--brass-500);
}
/* The home hero's own entrance, the one thing that stays page-specific here.
   The dot's former infinite `cinema-pulse` is retired: a marker that pulses on
   one surface and sits still on the other eleven is not one component. */
.cinema__eyebrow {
  animation: cinema-rise 800ms var(--ease) both;
}
@keyframes cinema-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cinema__title {
  font-family: var(--pub-h1-family);
  font-size: var(--pub-h1-size);
  line-height: var(--pub-h1-lh);
  letter-spacing: var(--pub-h1-track);
  font-weight: var(--pub-h1-weight);
  color: var(--ink-0);
  font-variation-settings: var(--pub-h1-opsz);
  margin: 0 0 28px;
  animation: cinema-rise 1s var(--ease) 100ms both;
}
.cinema__title .ital {
  font-style: italic; color: var(--brass-300); font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  display: inline-block;
}
.cinema__lede {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.5vw, 22px);
  color: var(--ink-2);
  max-width: 62ch;
  margin: 0 auto 44px;
  line-height: 1.6;
  animation: cinema-rise 1s var(--ease) 220ms both;
}
.cinema__actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  animation: cinema-rise 1s var(--ease) 340ms both;
}
.cinema__shield {
  margin-bottom: 32px;
  animation: cinema-rise 1.2s var(--ease) both, cinema-float 6s ease-in-out infinite 1.2s;
  filter: drop-shadow(0 0 40px rgba(201,169,110,.45)) drop-shadow(0 20px 40px rgba(0,0,0,.7));
}
@keyframes cinema-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.cinema__scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  animation: cinema-rise 1s var(--ease) 500ms both;
}
.cinema__scroll::after {
  content: ""; width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--brass-400), transparent);
  animation: cinema-scroll 2s ease-in-out infinite;
}
@keyframes cinema-scroll { 50% { transform: scaleY(0.4); transform-origin: top; } }

/* Cinematic stats band */
.cinema__stats {
  padding: 80px clamp(24px, 6vw, 96px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-1);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 4vw, 80px);
  align-items: center;
}
.cstat { text-align: center; }
.cstat__v {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 400;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 12px;
  font-variation-settings: "opsz" 96;
}
.cstat__v .ital { font-style: italic; color: var(--brass-300); }
.cstat__k {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* Cinematic story sections.
   The 120px/64px rhythm was measured, not guessed away: on / it cost 216px and
   on /how-it-works 296px of pure air, on pages that were 4.13 and 3.64 screens
   against a 3.0 budget. The proportions are kept; the interval is halved. */
.cinema__section {
  padding: 64px clamp(24px, 6vw, 96px);
  max-width: 1240px;
  margin: 0 auto;
}
.cinema__section-head {
  display: flex; align-items: baseline; gap: 24px;
  margin-bottom: 36px;
}
.cinema__section-num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--brass-500);
  letter-spacing: 0.1em;
}
.cinema__section-title {
  font-family: var(--pub-h2-family);
  font-size: var(--pub-h2-size);
  font-weight: var(--pub-h2-weight);
  color: var(--ink-0);
  letter-spacing: var(--pub-h2-track);
  line-height: var(--pub-h2-lh);
  margin: 0;
  font-variation-settings: var(--pub-h2-opsz);
}
.cinema__section-title .ital { font-style: italic; color: var(--brass-300); }

/* Three moves grand — one per row, alternating sides */
.moves { display: flex; flex-direction: column; gap: 44px; }
.move {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.move:nth-child(even) .move__visual { order: 2; }
.move__num { font-family: var(--font-mono); font-size: 12px; color: var(--brass-500); letter-spacing: 0.15em; margin-bottom: 18px; }
.move__title { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); font-weight: 400; color: var(--ink-0); letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 20px; font-variation-settings: "opsz" 72; }
.move__title .ital { font-style: italic; color: var(--brass-300); }
.move__body { color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 46ch; margin: 0; }

.move__visual {
  position: relative;
  /* The mock inside is ~150px tall; a 4:3 frame around it drew a 377px box on a
     1280 screen and three of them were 40% of the home page. The frame keeps
     its proportion until it would grow past the copy beside it. */
  aspect-ratio: 4 / 3;
  max-height: 250px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  background:
    radial-gradient(ellipse 90% 60% at 30% 30%, var(--brass-a14) 0%, transparent 55%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper-0) 100%);
  overflow: hidden;
  box-shadow: var(--edge-top), var(--shadow-float);
  display: grid;
  place-items: center;
}
.move__visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(201,169,110,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201,169,110,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 0%, transparent 90%);
}
.move__mock { position: relative; padding: 22px 28px; border: 1px solid var(--brass-a45); border-radius: 12px; background: linear-gradient(180deg, var(--paper-1), var(--paper-2)); box-shadow: 0 20px 60px -20px rgba(0,0,0,.8); min-width: 68%; }
.move__mock-label { font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--brass-400); margin-bottom: 10px; font-weight: 500; }
.move__mock-v { font-family: var(--font-mono); font-size: 32px; color: var(--ink-0); font-weight: 500; letter-spacing: -0.02em; }
.move__mock-v .cur { font-family: var(--font-serif); font-size: 22px; color: var(--brass-300); font-style: italic; }
.move__mock-note { color: var(--ink-3); font-size: 12px; margin-top: 6px; font-family: var(--font-mono); }
.move__mock-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--brass-a45); background: var(--brass-a08); color: var(--brass-300); font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch); font-weight: 500; }

/* Testimonial cinematic */
.cinema__quote {
  padding: 120px clamp(24px, 6vw, 96px);
  text-align: center;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  position: relative;
  overflow: hidden;
}
.cinema__quote::before {
  content: "\201C";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 400px;
  color: var(--brass-a08);
  line-height: 1;
  font-style: italic;
  pointer-events: none;
}
.cinema__quote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 48px);
  color: var(--ink-0);
  line-height: 1.25;
  max-width: 28ch;
  margin: 0 auto 40px;
  font-weight: 400;
  letter-spacing: -0.01em;
  position: relative;
  font-variation-settings: "opsz" 72, "SOFT" 100;
}
.cinema__quote-cite { color: var(--ink-3); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; position: relative; font-weight: 500; }
.cinema__quote-cite strong { color: var(--brass-300); font-weight: 500; }

/* Cinematic CTA */
.cinema__cta {
  padding: 56px clamp(24px, 6vw, 96px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cinema__cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, var(--brass-a14), transparent 60%);
  /* DECORATION MUST NOT SWALLOW CLICKS. This full-bleed overlay is positioned
     with z-index auto, so it paints and hit-tests ABOVE every non-positioned
     child of the section. The Ask GCS box added here rendered perfectly and
     could not be typed into: elementFromPoint() at the centre of its input
     returned this SECTION, and clicking left activeElement on BODY. The
     section's other controls only survive because each was given
     `position: relative` — a fix that every future addition would have to
     remember. Stated once, here, where the cause is. */
  pointer-events: none;
}
.cinema__cta-title {
  font-family: var(--font-serif);
  font-size: clamp(42px, 4.6vw, 66px);
  line-height: 1;
  color: var(--ink-0);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  position: relative;
  font-variation-settings: "opsz" 144;
}
.cinema__cta-title .ital { font-style: italic; color: var(--brass-300); }
.cinema__cta-sub { color: var(--ink-2); font-size: 17px; max-width: 52ch; margin: 0 auto 26px; line-height: 1.6; position: relative; }

@media (max-width: 900px) {
  .move { grid-template-columns: 1fr; gap: 28px; }
  .move:nth-child(even) .move__visual { order: 0; }
  .cinema__stats { padding: 60px 24px; gap: 32px; }
  .cinema__hero { min-height: min(90vh, 600px); padding: 48px 24px 44px; }
  .cinema__section { padding: 48px 24px; }
  .moves { gap: 40px; }
  .move__visual { max-height: 220px; }
}

/* ============================================================================
   ⌘K COMMAND PALETTE — global jump-to
   ========================================================================= */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,10,12,.72);
  backdrop-filter: blur(14px);
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  animation: cmdk-in 240ms var(--ease);
}
@keyframes cmdk-in { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
  width: min(640px, 92vw);
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-0) 100%);
  border: 1px solid var(--brass-a45);
  border-radius: 18px;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.9), var(--edge-top);
  overflow: hidden;
  animation: cmdk-rise 320ms var(--ease);
}
@keyframes cmdk-rise { from { opacity: 0; transform: translateY(-16px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdk__input-wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
}
.cmdk__input-wrap svg { color: var(--brass-400); }
.cmdk__input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: 18px;
}
.cmdk__input::placeholder { color: var(--ink-4); font-family: var(--font-serif); font-style: italic; }
.cmdk__kbd {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px;
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  background: rgba(244,239,228,.02);
}
.cmdk__list { max-height: 60vh; overflow-y: auto; padding: 8px; }
.cmdk__group-h { font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); padding: 14px 16px 6px; font-weight: 500; }
.cmdk__item {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-1);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
  border: none; background: none; width: 100%; text-align: left;
  font-family: inherit;
}
.cmdk__item svg { color: var(--brass-400); }
.cmdk__item:hover, .cmdk__item.is-on {
  background: linear-gradient(90deg, var(--brass-a08), transparent);
  color: var(--ink-0);
}
.cmdk__item-title { font-size: 14.5px; font-weight: 500; }
.cmdk__item-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.cmdk__item-count { font-family: var(--font-mono); font-size: 11px; color: var(--brass-400); padding: 2px 8px; border: 1px solid var(--brass-a45); border-radius: 999px; background: var(--brass-a08); }
.cmdk__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--hairline);
  background: rgba(244,239,228,.015);
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.cmdk__foot-keys { display: flex; gap: 12px; }
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(244,239,228,.02);
  color: var(--ink-3);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--dur-fast) var(--ease);
}
.cmdk-trigger:hover { border-color: var(--brass-a45); color: var(--ink-1); }
.cmdk-trigger .cmdk__kbd { padding: 2px 6px; font-size: 10px; }

/* ============================================================================
   SALES CLOSER — Inbound vs Outbound two-mode
   ========================================================================= */
.mode-switch {
  display: inline-flex;
  padding: 4px;
  background: var(--paper-0);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  margin-bottom: 32px;
  gap: 4px;
}
.mode-switch button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  letter-spacing: -0.005em;
}
.mode-switch button:hover { color: var(--ink-0); }
.mode-switch button.is-on {
  background: linear-gradient(180deg, var(--paper-2), var(--paper-1));
  color: var(--ink-0);
  box-shadow: var(--edge-top), 0 2px 8px rgba(0,0,0,.4);
}
.mode-switch button.is-on svg { color: var(--brass-400); }
.mode-switch__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(244,239,228,.02);
}
.mode-switch button.is-on .mode-switch__count { color: var(--brass-300); border-color: var(--brass-a45); background: var(--brass-a08); }

/* Two flavours of row — one for each mode, both quiet */
.call-list { display: flex; flex-direction: column; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-surface); overflow: hidden; }
.call-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 20px;
  padding: 20px 24px;
  align-items: center;
  background: var(--paper-0);
  color: var(--ink-1);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
  border: none; text-align: left; width: 100%; font-family: inherit;
}
.call-row:hover { background: var(--paper-1); }
.call-row__ic {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--brass-a45);
  background: var(--brass-a08);
  color: var(--brass-300);
  flex: none;
}
.call-row__body { min-width: 0; }
.call-row__who { color: var(--ink-0); font-weight: 500; font-size: 14.5px; margin-bottom: 3px; }
.call-row__note { color: var(--ink-2); font-size: 13px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.call-row__value { font-family: var(--font-mono); font-size: 15px; color: var(--brass-300); font-weight: 500; }
.call-row__time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.call-row__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--brass-300); font-size: 12.5px; font-weight: 500; }
.call-row__cta svg { transition: transform var(--dur-fast) var(--ease); }
.call-row:hover .call-row__cta svg { transform: translateX(3px); }

.mode-hint {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border: 1px dashed var(--hairline-2);
  border-radius: 12px;
  color: var(--ink-3);
  font-size: 12.5px;
  margin-bottom: 20px;
  background: rgba(244,239,228,.015);
}
.mode-hint svg { color: var(--brass-400); flex: none; }
.mode-hint strong { color: var(--ink-1); font-weight: 500; }

/* ============================================================================
   BUILD MY SYSTEM — 4-step onboarding wizard
   ========================================================================= */
.build { min-height: 100vh; background: var(--bg-0); display: flex; flex-direction: column; }
.build__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--hairline);
  background: rgba(10,10,12,.6);
  backdrop-filter: blur(20px);
  position: sticky; top: 0; z-index: 10;
}
.build__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink-0); font-family: var(--font-serif); font-size: 15px; font-weight: 500; }
.build__brand img { object-fit: contain; filter: drop-shadow(0 0 10px rgba(201,169,110,.25)); }
.build__split { display: grid; grid-template-columns: 460px 1fr; flex: 1; min-height: calc(100vh - 68px); }
/* THE WORK GOES FIRST ON A PHONE. Stacked, the brass aside is 475px of brand
   narrative, three standing promises and a progress meter — so on a 812px
   screen the first field of the setup diagnosis sat at y=955 and NOT ONE of the
   ten controls on the page was reachable on the first screen (measured on
   production 2026-08-04). Nothing is hidden: the aside still renders in full,
   directly under the form. The question it asks is also stated by the panel's
   own lede ("Tell GCS about your business."), and the step it reports is also
   on the stepper at the top of the card, so the fold costs the visitor
   nothing. Side by side at >1024px the order is unchanged. */
@media (max-width: 1024px) {
  .build__split { display: flex; flex-direction: column; }
  .build__split > .build__aside { order: 2; }
  .build__split > .build__form { order: 1; }
}

.build__aside {
  position: relative;
  padding: 56px 48px;
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, var(--brass-a14), transparent 55%),
    linear-gradient(180deg, var(--paper-2), var(--paper-0));
  border-right: 1px solid var(--hairline);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.build__aside::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(201,169,110,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201,169,110,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 90%);
  opacity: .55;
}
.build__aside-shield {
  width: 84px; height: 84px; object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(201,169,110,.4)) drop-shadow(0 10px 30px rgba(0,0,0,.7));
  margin-bottom: 40px;
  position: relative;
}
.build__aside-in { position: relative; z-index: 2; }
.aside__h { font-family: var(--pub-h2-family); font-size: var(--pub-h2-size); font-weight: var(--pub-h2-weight); color: var(--ink-0); letter-spacing: var(--pub-h2-track); line-height: var(--pub-h2-lh); margin: 12px 0 14px; font-variation-settings: var(--pub-h2-opsz); }
.aside__h .ital { font-style: italic; color: var(--brass-300); }
.aside__d { color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 40ch; margin: 0 0 40px; }
.trust { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.trust li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-1); }
.trust__ic { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--brass-a45); background: var(--brass-a08); color: var(--brass-300); display: grid; place-items: center; }
.meter { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--hairline); position: relative; z-index: 2; }
.meter__label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; display: block; margin-bottom: 8px; text-transform: uppercase; }
.meter__bar { display: block; height: 3px; background: var(--paper-2); border-radius: 2px; overflow: hidden; }
.meter__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brass-600), var(--brass-300)); border-radius: 2px; transition: width var(--dur-slow) var(--ease); }

.build__form { padding: 56px clamp(28px, 4vw, 64px); display: flex; align-items: flex-start; justify-content: center; }
.build__formcard { width: 100%; max-width: 640px; }
.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 40px; }
.stepper__step { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12px; }
.stepper__step:not(:last-child)::after { content: ""; display: inline-block; width: 32px; height: 1px; background: var(--hairline); margin: 0 4px; }
.stepper__step.is-on { color: var(--ink-0); }
.stepper__step.is-done { color: var(--brass-300); }
.stepper__dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; border: 1px solid var(--hairline-2); color: var(--ink-3); background: transparent; }
.stepper__step.is-on .stepper__dot { border-color: var(--brass-500); color: var(--brass-200); background: var(--brass-a08); box-shadow: 0 0 0 3px var(--brass-a08); }
.stepper__step.is-done .stepper__dot { border-color: var(--brass-500); background: linear-gradient(180deg, var(--brass-300), var(--brass-500)); color: var(--btn-ink); }
.stepper__label { font-weight: 500; letter-spacing: -0.005em; }

.build__panel { animation: cinema-rise 400ms var(--ease) both; }
.build__panel > * + * { margin-top: 20px; }
.field { display: block; width: 100%; }
/* Two fields to a row on a wide screen.
   RULE 2. Measured on production 2026-08-04 at 1280: /client/agent-training
   stacked seven fields in one column at 205px each — 1,435px of form in a
   1,030px-wide card that was two-thirds empty on the right, and the page stood
   3.46 screens. The fields are unchanged; only how many share a line changed.
   `.field--wide` opts a long answer back to the full width, and below 860px the
   grid is one column again, so nothing about the phone layout moves. */
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.field-grid > .field--wide { grid-column: 1 / -1; }
.shell .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.shell .field-grid > * + * { margin-top: 0; }   /* the grid owns the spacing, not .stack-* */
@media (max-width: 860px) {
  .field-grid, .shell .field-grid { grid-template-columns: 1fr; }
}
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--ink-3); font-weight: 500; margin-bottom: 8px; }
.field__label > :first-child { flex: 1; }
.req { font-family: var(--font-mono); font-size: 9.5px; color: var(--brass-400); letter-spacing: 0.08em; }
.field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); font-family: var(--font-serif); font-style: italic; }
.binput-wrap { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: rgba(244,239,228,.03); border: 1px solid var(--hairline); border-radius: 10px; transition: border-color var(--dur-fast) var(--ease); width: 100%; box-sizing: border-box; }
.binput-wrap:focus-within { border-color: var(--brass-a45); background: rgba(244,239,228,.05); }
.binput-wrap svg { color: var(--ink-3); flex: none; }
.binput { flex: 1; width: 100%; min-width: 0; background: none; border: none; outline: none; padding: 12px 0; color: var(--ink-0); font-family: var(--font-sans); font-size: 15px; }
.binput::placeholder { color: var(--ink-4); }
.btextarea { width: 100%; padding: 12px 14px; min-height: 120px; resize: vertical; background: rgba(244,239,228,.03); border: 1px solid var(--hairline); border-radius: 10px; color: var(--ink-0); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; outline: none; box-sizing: border-box; transition: border-color var(--dur-fast) var(--ease); }
.btextarea:focus { border-color: var(--brass-a45); background: rgba(244,239,228,.05); }
.btextarea::placeholder { color: var(--ink-4); }
.build__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px){ .build__grid { grid-template-columns: 1fr; } }

.ind-grid, .leak-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 600px){ .ind-grid, .leak-select { grid-template-columns: 1fr 1fr; } }
.ind-opt, .leak-opt {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px;
  border-radius: 10px; border: 1px solid var(--hairline);
  background: rgba(244,239,228,.02); color: var(--ink-1);
  font-family: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
  transition: all var(--dur-fast) var(--ease);
}
.ind-opt:hover, .leak-opt:hover { border-color: var(--hairline-2); background: rgba(244,239,228,.04); color: var(--ink-0); }
.ind-opt.is-on, .leak-opt.is-on { border-color: var(--brass-500); background: var(--brass-a08); color: var(--ink-0); }
.ind-opt svg, .leak-opt svg { color: var(--brass-400); flex: none; }
.ind-opt__tick, .leak-opt__tick { position: absolute; right: 10px; color: var(--brass-300); }

.plan-pick { display: flex; flex-direction: column; gap: 8px; }
.plan-opt {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 14px; align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--hairline); border-radius: 12px;
  background: rgba(244,239,228,.02); cursor: pointer; font-family: inherit; text-align: left;
  transition: all var(--dur-fast) var(--ease);
}
.plan-opt:hover { border-color: var(--hairline-2); }
.plan-opt.is-on { border-color: var(--brass-500); background: var(--brass-a08); box-shadow: 0 0 0 1px var(--brass-500); }
.plan-opt__radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--hairline-2); display: block; transition: all var(--dur-fast) var(--ease); }
.plan-opt.is-on .plan-opt__radio { border-color: var(--brass-500); background: radial-gradient(circle at 50% 50%, var(--brass-300) 40%, transparent 45%); }
.plan-opt__txt { display: flex; flex-direction: column; gap: 2px; }
.plan-opt__name { font-family: var(--font-serif); font-size: 18px; color: var(--ink-0); font-weight: 500; letter-spacing: -0.005em; }
.plan-opt__note { color: var(--ink-3); font-size: 12.5px; }
.plan-opt__price { font-family: var(--font-mono); font-size: 20px; color: var(--brass-300); font-weight: 500; }
.plan-opt__price span { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); margin-left: 3px; }

.review { padding: 4px 0; margin: 4px 0 20px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.review__row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--hairline); }
.review__row:last-child { border-bottom: none; }
.review__row > span { color: var(--ink-3); }
.review__row > b { color: var(--ink-0); font-weight: 500; text-align: right; max-width: 60%; }

.consent { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: rgba(244,239,228,.02); border: 1px solid var(--hairline); border-radius: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.55; cursor: pointer; }
.consent input { accent-color: var(--brass-500); margin-top: 3px; }
.consent b { color: var(--ink-0); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.consent svg { color: var(--brass-400); vertical-align: middle; }

.build__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hairline); }

.build__successwrap { flex: 1; display: grid; place-items: center; padding: 60px 24px; }
.build__success { text-align: center; max-width: 560px; }
.build__success h1 { font-family: var(--font-serif); font-size: clamp(38px, 5vw, 60px); font-weight: 400; color: var(--ink-0); letter-spacing: -0.02em; line-height: 1.05; margin: 24px 0 20px; font-variation-settings: "opsz" 96; }
.build__success p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 0 0 32px; }
.build__success b { color: var(--brass-300); font-weight: 500; }
.build__tick { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--brass-a45); background: radial-gradient(circle at 50% 45%, var(--brass-a28), transparent 65%); color: var(--brass-300); }

/* ============================================================================
   CINEMATIC PRICING — full theatrical treatment
   ========================================================================= */
.pricing__hero {
  position: relative;
  padding: 56px clamp(24px, 6vw, 96px) 36px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
/* The hero's own action row. /pricing and /how-it-works both put their primary
   action at the FOOT of the page: measured on production 2026-08-04, the first
   control a visitor could reach on the first screen was the floating Ask GCS
   bubble, and the page's own work ("Start with Growth", "Find my revenue
   leaks") sat at y=1778 and y=2593. The row is the same `.btn` grammar the
   home hero uses. */
.pricing__hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: center;
  margin-top: 4px;
}
.pricing__hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 50% 20%, var(--brass-a14) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.pricing__hero-title { font-family: var(--pub-h1-family); font-size: var(--pub-h1-size); line-height: var(--pub-h1-lh); font-weight: var(--pub-h1-weight); letter-spacing: var(--pub-h1-track); color: var(--ink-0); margin: 16px 0 16px; font-variation-settings: var(--pub-h1-opsz); }
.pricing__hero-title .ital { font-style: italic; color: var(--brass-300); }
.pricing__hero-lede { color: var(--ink-2); font-size: 18px; max-width: 60ch; margin: 0 auto 20px; line-height: 1.55; }

.pricing__toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--hairline); background: var(--paper-0);
  border-radius: 999px; margin-bottom: 60px;
}
.pricing__toggle button {
  padding: 8px 20px; border-radius: 999px; border: none; background: transparent;
  color: var(--ink-2); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.pricing__toggle button.is-on { background: linear-gradient(180deg, var(--paper-2), var(--paper-1)); color: var(--ink-0); box-shadow: var(--edge-top); }
.pricing__toggle-save { font-family: var(--font-mono); font-size: 10px; color: var(--brass-300); margin-left: 5px; padding: 1px 5px; background: var(--brass-a08); border: 1px solid var(--brass-a45); border-radius: 4px; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto 40px; padding: 0 clamp(24px, 6vw, 96px); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; padding: 0 24px; } }

.plan {
  position: relative;
  padding: 32px 28px 28px;
  background: linear-gradient(180deg, var(--paper-1), var(--paper-0));
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--edge-top), var(--shadow-lift);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.plan:hover { transform: translateY(-4px); }
.plan--flag {
  border-color: var(--brass-500);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--brass-a14) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper-2), var(--paper-0));
  box-shadow: 0 30px 80px -30px rgba(201,169,110,.4), var(--edge-top);
  transform: translateY(-8px);
}
.plan--flag:hover { transform: translateY(-12px); }
.plan__flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  padding: 6px 16px;
  background: linear-gradient(180deg, var(--brass-300), var(--brass-500));
  color: var(--btn-ink);
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(201,169,110,.6);
}

.plan__name { font-family: var(--font-serif); font-size: 32px; color: var(--ink-0); font-weight: 500; letter-spacing: -0.015em; margin-bottom: 6px; font-variation-settings: "opsz" 48; }
.plan__name .ital { font-style: italic; color: var(--brass-300); font-weight: 400; }
.plan__tagline { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin-bottom: 22px; min-height: 44px; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.plan__price .cur { font-family: var(--font-serif); font-size: 28px; color: var(--brass-400); font-style: italic; font-variation-settings: "opsz" 48; }
.plan__price .amt { font-family: var(--font-mono); font-size: 56px; font-weight: 500; color: var(--ink-0); letter-spacing: -0.03em; line-height: 1; }
.plan__price .per { color: var(--ink-3); font-size: 14px; margin-left: 6px; }
.plan__note { color: var(--ink-3); font-size: 12.5px; margin: 6px 0 18px; font-family: var(--font-serif); font-style: italic; }
.plan__feats { list-style: none; margin: 0; padding: 0; flex: 1; }
.plan__feats li { display: flex; gap: 12px; padding: 12px 0; color: var(--ink-1); font-size: 14px; border-top: 1px solid var(--hairline); align-items: flex-start; line-height: 1.5; }
.plan__feats li:first-child { border-top: none; padding-top: 0; }
.plan__feats svg { color: var(--brass-400); flex: none; margin-top: 3px; }
.plan__feats li.is-quiet { color: var(--ink-4); }
.plan__feats li.is-quiet svg { color: var(--ink-4); }
.plan__cta-wrap { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); }
/* The plan's included list rests at a cap and says so — the SAME cap grammar
   the desk already speaks (static/desk-filter.js: "Show all N" + a live
   "Showing X of N"). Sixteen included lines drew a 1,232px card and made
   /pricing 4.51 screens. The control ships hidden and desk-filter.js reveals it
   only after it has bound a real list, so with JavaScript off every line
   renders and no dead control is ever shown. */
.plan__more { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.plan__more .matter { color: var(--ink-3); font-size: 12px; }

/* Pricing CTA pill — Bentley-grade, single-line, brass-lit hover */
/* The purchase button. It shipped as a 52px 999px-radius pill at 14.5px while
   the primary CTA on every other public page was a 40px 10px-radius .btn at
   14px — the single most important control on the site did not match its own
   design system. It now reads the SAME --btn-* tokens as .btn, with the same
   centred label + inline arrow grammar the desk's own submit buttons use. */
.plan-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--btn-min-h);
  padding: var(--btn-pad);
  border-radius: var(--btn-radius);
  font-family: var(--font-sans);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-track);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}
.plan-cta__label {
  position: relative;
  z-index: 1;
  line-height: 1;
  white-space: nowrap;
  transition: transform 320ms var(--ease);
}
/* The 36px arrow DISC is gone: no other button on the site carries one, and at
   the shared button height it no longer fits. It is the same inline arrow
   glyph the desk's own primary buttons use. */
.plan-cta__arrow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease);
}
.plan-cta__arrow svg { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease); }

/* Ghost (non-featured plan) — byte-identical paint to .btn--ghost. */
.plan-cta--ghost {
  background: transparent;
  color: var(--ink-1);
  border-color: var(--hairline-2);
}
.plan-cta--ghost:hover {
  background: rgba(244,239,228,.04);
  border-color: var(--hairline-strong);
  color: var(--ink-0);
}
.plan-cta--ghost:hover .plan-cta__arrow svg { transform: translateX(2px); }

/* Primary (Growth · Most popular) — byte-identical paint to .btn--primary.
   The ceremonial shimmer sweep is retired with the pill: one primary button. */
.plan-cta--primary {
  background: linear-gradient(180deg, #FBF7EE 0%, var(--action) 100%);
  color: var(--btn-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 20px -10px rgba(201,169,110,.4);
}
.plan-cta--primary:hover { background: var(--action-hover); transform: translateY(-1px); }
.plan-cta--primary:hover .plan-cta__arrow svg { transform: translateX(2px); }

.pricing__proof {
  padding: 36px clamp(24px, 6vw, 96px);
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  text-align: center;
}
.pricing__proof-title { font-family: var(--pub-h2-family); font-size: var(--pub-h2-size); font-weight: var(--pub-h2-weight); color: var(--ink-0); letter-spacing: var(--pub-h2-track); margin: 0 auto 28px; max-width: 24ch; line-height: var(--pub-h2-lh); font-variation-settings: var(--pub-h2-opsz); }
.pricing__proof-title .ital { font-style: italic; color: var(--brass-300); }
/* 220px tracks inside a 900px cage fitted THREE of the four promises on a 1280
   screen, so the fourth dropped alone onto a second row and the band cost
   431px. Four fit in one row now; nothing was dropped and no promise is
   shorter. */
.pricing__proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 20px; max-width: 1020px; margin: 0 auto; }
.pricing__proof-tile { padding: 18px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--paper-0); }
.pricing__proof-tile svg { color: var(--brass-400); margin-bottom: 10px; }
.pricing__proof-tile-title { font-family: var(--font-serif); font-size: 18px; color: var(--ink-0); font-weight: 500; margin-bottom: 6px; }
.pricing__proof-tile-body { color: var(--ink-3); font-size: 13px; line-height: 1.55; }

.pricing__faq { padding: 36px clamp(24px, 6vw, 96px); max-width: 900px; margin: 0 auto; }
/* Four questions stacked cost 343px on a page that was 4.51 screens against a
   3.0 budget. Two columns on a desktop hide NOTHING — every question, every
   answer and every disclosure control is still on the page — and the hairline
   grid the .faq gap paints reads as a table rather than a list. One column
   below 900px, where two would be cramped. */
@media (min-width: 900px) {
  .pricing__faq .faq { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
.pricing__faq-title { font-family: var(--font-serif); font-size: clamp(28px, 2.8vw, 38px); font-weight: 400; color: var(--ink-0); letter-spacing: -0.015em; margin: 0 0 28px; }
.pricing__faq-title .ital { font-style: italic; color: var(--brass-300); }

/* Cinematic Build hero */
.build__intro {
  padding: 60px clamp(24px, 4vw, 64px) 20px;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(ellipse 50% 40% at 50% 20%, var(--brass-a14), transparent 65%);
}
/* .build__intro-eyebrow's own pill declarations are DELETED, not restyled —
   it is the shared eyebrow (see the token block above). */
.build__intro-title { font-family: var(--pub-h1-family); font-size: var(--pub-h1-size); line-height: var(--pub-h1-lh); font-weight: var(--pub-h1-weight); color: var(--ink-0); letter-spacing: var(--pub-h1-track); margin: 0 auto 14px; max-width: 20ch; font-variation-settings: var(--pub-h1-opsz); }
.build__intro-title .ital { font-style: italic; color: var(--brass-300); }
.build__intro-sub { color: var(--ink-2); font-size: 15.5px; max-width: 52ch; margin: 0 auto; line-height: 1.5; }

/* Sales Closer ordering controls */
.order-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: rgba(244,239,228,.015);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 12.5px;
}
.order-bar__label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: var(--ls-etch); font-weight: 500; }
.order-bar__label svg { color: var(--brass-400); }
.order-bar__seg { display: inline-flex; padding: 3px; background: var(--paper-0); border: 1px solid var(--hairline); border-radius: 999px; gap: 3px; }
.order-bar__seg button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: none; background: transparent;
  color: var(--ink-2); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.order-bar__seg button:hover { color: var(--ink-0); }
.order-bar__seg button.is-on { background: linear-gradient(180deg, var(--paper-2), var(--paper-1)); color: var(--ink-0); box-shadow: var(--edge-top); }
.order-bar__seg button.is-on svg { color: var(--brass-400); }
.order-bar__hint { color: var(--ink-3); font-family: var(--font-serif); font-style: italic; font-size: 12.5px; }

/* Grip + reorder controls on rows */
.call-row { position: relative; }
.call-row__grip {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 2px;
  padding: 4px;
}
.call-row__grip button {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  background: var(--paper-1);
  color: var(--ink-3);
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.call-row__grip button:hover:not(:disabled) { color: var(--brass-300); border-color: var(--brass-a45); background: var(--brass-a08); }
.call-row__grip button:disabled { opacity: .3; cursor: default; }
.call-list.is-manual .call-row { padding-left: 60px; }
.call-list.is-manual .call-row__grip { display: flex; }
.call-list.is-manual .call-row__pos {
  position: absolute; right: 24px; top: 12px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-3);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(244,239,228,.02);
}

/* ============================================================================
   BILLING — cinematic plan card + payment method + invoice ledger
   ========================================================================= */
.bill-hero {
  position: relative;
  padding: 44px 44px 40px;
  margin-bottom: 32px;
  border: 1px solid var(--brass-a45);
  border-radius: var(--r-panel);
  background:
    radial-gradient(ellipse 70% 60% at 20% 30%, var(--brass-a14), transparent 60%),
    linear-gradient(180deg, var(--paper-2), var(--paper-0));
  box-shadow: 0 30px 80px -40px rgba(201,169,110,.4), var(--edge-top);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  overflow: hidden;
}
.bill-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(201,169,110,.05) 1px, transparent 1px), linear-gradient(0deg, rgba(201,169,110,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 60% at 30% 50%, black 0%, transparent 85%);
  opacity: .5; pointer-events: none;
}
.bill-hero__l { position: relative; z-index: 1; }
.bill-hero__eyebrow { display: inline-block; padding: 4px 12px; border: 1px solid var(--brass-a45); background: var(--brass-a08); color: var(--brass-300); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; border-radius: 999px; margin-bottom: 20px; }
.bill-hero__plan { font-family: var(--font-serif); font-size: clamp(42px, 5vw, 60px); font-weight: 400; color: var(--ink-0); letter-spacing: -0.02em; line-height: 1.02; margin: 0 0 14px; font-variation-settings: "opsz" 96; }
.bill-hero__plan .ital { font-style: italic; color: var(--brass-300); }
.bill-hero__note { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 44ch; margin: 0 0 24px; }
.bill-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bill-hero__r { position: relative; z-index: 1; padding: 28px; background: var(--paper-1); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--edge-top); }
.bill-hero__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.bill-hero__price .cur { font-family: var(--font-serif); font-size: 26px; color: var(--brass-400); font-style: italic; }
.bill-hero__price .amt { font-family: var(--font-mono); font-size: 52px; font-weight: 500; color: var(--ink-0); letter-spacing: -0.03em; line-height: 1; }
.bill-hero__price .per { color: var(--ink-3); font-size: 13px; margin-left: 6px; }
.bill-hero__next { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.bill-hero__next strong { color: var(--ink-0); font-family: var(--font-mono); font-weight: 500; }

.bill-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 40px; }

.bill-panels { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
/* MEASURED 2026-08-03 at 375px: a bare `1fr` track is `minmax(auto, 1fr)`, so
   the panel's own min-content (28px of padding each side plus its widest
   unbreakable line) won over the container. The track resolved to 360.27px
   inside a 335px column, the panels stuck out to x=380 in a 375px viewport,
   and the WHOLE Billing page scrolled sideways. `minmax(0, 1fr)` lets the
   track shrink to the column, which is what a one-column layout means.
   Re-measured after: panels end at 355, document scrollWidth 375 = clientWidth
   375, no horizontal scroll. Same guard on the two-column forms above, where
   the identical trap is one long unbroken value away. */
@media (max-width: 1024px){ .bill-panels { grid-template-columns: minmax(0, 1fr); } .bill-hero { grid-template-columns: minmax(0, 1fr); } }

.bill-panel { padding: 28px; background: linear-gradient(180deg, var(--paper-1), var(--paper-0)); border: 1px solid var(--hairline); border-radius: var(--r-surface); box-shadow: var(--edge-top); }
.bill-panel__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.bill-panel__t { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--ink-0); letter-spacing: -0.005em; margin: 0; font-variation-settings: "opsz" 24; }

.pmethod { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 12px; background: rgba(244,239,228,.02); margin-bottom: 12px; }
.pmethod__ic { width: 44px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, var(--brass-500), var(--brass-700)); display: grid; place-items: center; color: var(--btn-ink); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; flex: none; box-shadow: 0 4px 10px -4px rgba(201,169,110,.4); }
.pmethod__body { flex: 1; }
.pmethod__num { color: var(--ink-0); font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.06em; }
.pmethod__exp { color: var(--ink-3); font-size: 12px; margin-top: 3px; font-family: var(--font-mono); }
.pmethod__default { font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch); color: var(--brass-300); padding: 3px 10px; border: 1px solid var(--brass-a45); background: var(--brass-a08); border-radius: 999px; font-weight: 500; }

.inv-list { display: flex; flex-direction: column; }
.inv-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hairline); align-items: center; }
.inv-row:last-child { border-bottom: none; }
.inv-row__d { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); min-width: 90px; }
.inv-row__id { color: var(--ink-0); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.inv-row__amt { font-family: var(--font-mono); font-size: 14px; color: var(--brass-300); font-weight: 500; }
.inv-row__dl { color: var(--ink-3); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.inv-row__dl:hover { color: var(--brass-300); }

.trust-strip { display: flex; gap: 18px; padding: 16px 20px; border: 1px solid var(--hairline); border-radius: 12px; background: rgba(244,239,228,.015); margin-top: 20px; }
.trust-strip__item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.trust-strip__item svg { color: var(--ok); }


/* ============================================================================
   LEGAL DOCUMENTS — Bentley composure applied to policy prose
   Two-column: sticky TOC + numbered document. Sibling rail below.
   ========================================================================= */
.doc { background: var(--bg-0); color: var(--ink-0); position: relative; overflow-x: hidden; }

/* ---- Hero (tighter than cinema__hero, one-screenful) ---------------------- */
.doc__hero {
  position: relative;
  padding: 140px clamp(24px, 6vw, 96px) 96px;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.doc__hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--brass-a14) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 100%, var(--brass-a08) 0%, transparent 60%);
  pointer-events: none;
}
.doc__hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(201,169,110,.045) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(201,169,110,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 85%);
  pointer-events: none;
}
.doc__hero-inner { position: relative; max-width: 980px; margin: 0 auto; text-align: center; }

.doc__crumb {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.doc__crumb > span:last-child { color: var(--brass-300); }
.doc__crumb a { color: var(--ink-3); text-decoration: none; transition: color 200ms var(--ease); }
.doc__crumb a:hover { color: var(--brass-300); }
.doc__crumb svg { color: var(--brass-500); }

/* .doc__eyebrow's own mono pill declarations are DELETED, not restyled — it is
   the shared eyebrow (see the token block above). */
.doc__title {
  font-family: var(--pub-h1-family);
  font-size: var(--pub-h1-size);
  font-weight: var(--pub-h1-weight);
  color: var(--ink-0);
  letter-spacing: var(--pub-h1-track);
  line-height: var(--pub-h1-lh);
  margin: 0 0 24px;
  font-variation-settings: var(--pub-h1-opsz);
}
.doc__title .ital { font-style: italic; color: var(--brass-300); }
.doc__lede {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 auto 40px;
  font-style: italic;
  font-weight: 400;
}
.doc__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.doc__meta-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  background: rgba(23,21,26,.55);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  backdrop-filter: blur(6px);
}
.doc__meta-item svg { color: var(--brass-400); }
.doc__meta-item b { color: var(--ink-1); font-weight: 500; margin-left: 2px; }
.doc__meta-item--wide { text-transform: none; letter-spacing: 0.02em; }
.doc__meta-item--wide b { color: var(--brass-300); }

/* ---- Body: two-column, sticky TOC ---------------------------------------- */
.doc__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 72px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 96px clamp(24px, 6vw, 96px);
}

.doc__toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  padding-right: 12px;
}
.doc__toc-h {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-400);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
  font-weight: 500;
}
.doc__toc ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.doc__toc a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 10px;
  color: var(--ink-3);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  border-left: 1px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.doc__toc a:hover { color: var(--ink-1); }
.doc__toc a.is-on {
  color: var(--brass-300);
  border-left-color: var(--brass-400);
  background: linear-gradient(90deg, var(--brass-a08), transparent 70%);
}
.doc__toc-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  flex: none;
}
.doc__toc a.is-on .doc__toc-n { color: var(--brass-400); }

.doc__toc-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.doc__toc-mail {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.doc__toc-mail:hover { color: var(--brass-300); }
.doc__toc-mail svg { color: var(--brass-400); }

/* ---- Article -------------------------------------------------------------- */
.doc__article { min-width: 0; max-width: 72ch; }

.doc__section {
  padding: 40px 0;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 120px;
}
.doc__section:first-child { padding-top: 0; }
.doc__section:last-child  { border-bottom: none; }
.doc__section--foot       { border-bottom: none; }
/* A numbered STEP is not a statute article. /how-it-works borrows this grammar
   for the five-step operating sequence, where each row is one heading and one
   sentence — at the legal-document interval that cost 190px a step and put the
   page at 3.64 screens. Scoped to the modifier so the fifteen legal documents,
   which are version-fingerprinted and must not re-render, are untouched. */
.doc__article--steps .doc__section { padding: 24px 0; }
.doc__article--steps .doc__section-h { margin-bottom: 12px; }

.doc__section-h {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: 22px;
}
.doc__section-n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brass-500);
  letter-spacing: 0.08em;
  flex: none;
  padding-top: 6px;
}
.doc__section-t {
  font-family: var(--pub-h2-family);
  font-size: var(--pub-h2-size);
  font-weight: var(--pub-h2-weight);
  color: var(--ink-0);
  letter-spacing: var(--pub-h2-track);
  line-height: var(--pub-h2-lh);
  margin: 0;
  font-variation-settings: var(--pub-h2-opsz);
}

.doc__prose p {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.72;
  margin: 0 0 16px;
}
.doc__prose p:last-child { margin-bottom: 0; }
.doc__prose em { color: var(--brass-300); font-style: italic; }
.doc__link { color: var(--brass-300); text-decoration: none; border-bottom: 1px dotted var(--brass-a45); }
.doc__link:hover { color: var(--brass-200); border-bottom-color: var(--brass-300); }

.doc__chiplist {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.doc__chip {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--hairline);
  background: rgba(23,21,26,.42);
  border-radius: 10px;
  color: var(--ink-1);
  font-size: 14.5px;
  line-height: 1.55;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.doc__chip:hover { border-color: var(--brass-a45); background: rgba(23,21,26,.62); }
.doc__chip-dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--brass-400);
  margin-top: 8px;
  box-shadow: 0 0 0 3px var(--brass-a14);
}

.doc__defs {
  display: flex; flex-direction: column;
  margin: 0;
}
.doc__def {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--hairline);
}
.doc__def:last-child { border-bottom: none; }
.doc__def dt {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--brass-300);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
}
.doc__def dd {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

.doc__plans {
  display: flex; flex-direction: column; gap: 14px;
}
.doc__plan {
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--paper-1), var(--paper-2));
  border-radius: 12px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
}
.doc__plan:hover { border-color: var(--brass-a45); transform: translateY(-1px); }
.doc__plan-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.doc__plan-tier {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink-0);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.doc__plan-price {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--brass-300);
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border: 1px solid var(--brass-a45);
  background: var(--brass-a08);
  border-radius: 999px;
  font-weight: 500;
}
.doc__plan-desc {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

/* ---- Sibling doc rail ----------------------------------------------------- */
.doc__siblings {
  border-top: 1px solid var(--hairline);
  padding: 96px clamp(24px, 6vw, 96px);
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
}
.doc__siblings-h { max-width: 1240px; margin: 0 auto 40px; }
.doc__siblings-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-400);
  font-weight: 500;
}
.doc__siblings-t {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 400;
  color: var(--ink-0);
  margin: 12px 0 0;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 72;
}
.doc__siblings-t .ital { font-style: italic; color: var(--brass-300); }

.doc__siblings-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.doc__sibling {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px;
  border: 1px solid var(--hairline);
  background: rgba(23,21,26,.4);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 240ms var(--ease), transform 240ms var(--ease), background 240ms var(--ease);
}
.doc__sibling:hover {
  border-color: var(--brass-a45);
  transform: translateY(-2px);
  background: rgba(23,21,26,.6);
}
.doc__sibling-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-400);
  font-weight: 500;
}
.doc__sibling-t {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink-0);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.doc__sibling-cta {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--brass-300);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Legal index page ---------------------------------------------------- */
.doc-index__section { padding: 40px clamp(24px, 6vw, 96px) 0; max-width: 1240px; margin: 0 auto; }
.doc-index__section-h { margin-bottom: 24px; max-width: 780px; }
.doc-index__section-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-400); font-weight: 500; }
.doc-index__section-t { font-family: var(--pub-h2-family); font-size: var(--pub-h2-size); font-weight: var(--pub-h2-weight); color: var(--ink-0); margin: 10px 0 8px; letter-spacing: var(--pub-h2-track); line-height: var(--pub-h2-lh); font-variation-settings: var(--pub-h2-opsz); }
.doc-index__section-t .ital { font-style: italic; color: var(--brass-300); }
.doc-index__section-body { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; margin: 0; max-width: 66ch; }
.doc-index__section .doc-index__grid { padding: 24px 0 40px; max-width: none; margin: 0; }

.doc-index__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px clamp(24px, 6vw, 96px) 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.doc-index__card {
  display: flex; flex-direction: column;
  padding: 28px;
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(23,21,26,.55), rgba(23,21,26,.32));
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 260ms var(--ease), transform 260ms var(--ease), background 260ms var(--ease);
  min-height: 220px;
}
.doc-index__card:hover {
  border-color: var(--brass-a45);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(23,21,26,.72), rgba(23,21,26,.5));
}
.doc-index__card-h {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.doc-index__card-ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--brass-a45);
  background: var(--brass-a08);
  display: grid; place-items: center;
  color: var(--brass-300);
}
.doc-index__card-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-400);
  font-weight: 500;
}
.doc-index__card-t {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink-0);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
  font-variation-settings: "opsz" 48;
}
.doc-index__card-tag {
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.55;
  flex: 1;
}
.doc-index__card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--hairline);
}
.doc-index__card-v {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.06em;
}
.doc-index__card-open {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--brass-300);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doc-index__note {
  padding: 0 clamp(24px, 6vw, 96px) 120px;
}
.doc-index__note-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 36px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(23,21,26,.32);
  display: flex; flex-direction: column; gap: 8px;
}
.doc-index__note-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-400);
  font-weight: 500;
}
.doc-index__note p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 84ch;
}

/* Public shell footer legal cluster */
.public__foot-links {
  display: inline-flex; gap: 18px;
  flex-wrap: wrap;
}
.public__foot-links a {
  color: var(--ink-3);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 200ms var(--ease);
}
.public__foot-links a:hover { color: var(--brass-300); }

@media (max-width: 900px) {
  .doc__hero { padding: 96px 24px 64px; }
  .doc__body { grid-template-columns: 1fr; gap: 40px; padding: 56px 24px; }
  .doc__toc { position: static; max-height: none; padding-right: 0; }
  .doc__def { grid-template-columns: 1fr; gap: 4px; }
  .doc__siblings { padding: 72px 24px; }
  .doc-index__grid { padding: 24px 24px 72px; }
  .doc-index__note { padding: 0 24px 80px; }
}

/* === GCS mobile hardening (appendix — the only non-bundle rules in this file).
   The bundle's public nav overflows a 375px viewport by ~30px in this export
   (measured live 2026-07-29; the Emergent preview build squeezes its brand
   block harder than the exported flex rules do). Tighten the link row below
   430px so every element the preview shows still fits with zero horizontal
   scroll — the acceptance checklist's mobile rule outranks byte-fidelity. */
@media (max-width: 430px) {
  /* Tightening was not enough. Measured live at 375px on 2026-07-30: the brand
     block is 109px and the link row 265px, which with the nav's own 28px of
     padding needs 402px — so "Enter the desk", the primary login CTA, sat 13px
     off the right edge no matter how small the links got. The row now wraps
     under the brand, which fits and leaves zero horizontal scroll. The taller
     link padding also lifts every tap target to ~45px; below ~44px a control is
     hard to hit with a thumb. */
  .public__nav { padding: 18px 14px; flex-wrap: wrap; row-gap: 10px; }
  .public__nav-links { gap: 2px; width: 100%; justify-content: space-between; }
  .public__nav-links a { padding: 13px 8px; font-size: 12.5px; }
  .public__nav-links a.is-primary { padding: 13px 12px; }
}

/* === GCS footer + Ask GCS refinements (appendix, non-bundle) ===============
   Measured against the Emergent reference at 1568px: our footer carries a
   longer legal entity, the support email (a standing contract) and the
   truthful autonomy line, which broke the bundle's single-row three-column
   foot into six wrapped lines — and the mailto rendered as a default-blue
   underlined browser link. The rules below restore the bundle's one-line
   foot with our longer, true copy, and keep the Ask GCS launcher clear of it. */
.public__foot { gap: 28px; align-items: baseline; }
.public__foot > div:first-child { flex: 1 1 auto; min-width: 0; }
.public__foot > div:last-child { flex: 0 0 auto; text-align: right; white-space: nowrap; }
/* Any link in the foot outside the links row (the support address) speaks the
   same quiet ink as its neighbours — never UA blue, never underlined. */
.public__foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--hairline-2); }
.public__foot a:hover { color: var(--brass-300); border-bottom-color: var(--brass-a45); }
.public__foot-links { flex: 0 0 auto; flex-wrap: nowrap; }
.public__foot-links a { border-bottom: none; white-space: nowrap; }
@media (min-width: 1100px) {
  /* The fixed Ask GCS launcher lives bottom-right; keep the foot's last column
     out from under it instead of letting the pill cover the sentence. */
  .public__foot { padding-right: 176px; }
}
@media (max-width: 1099px) {
  .public__foot { flex-wrap: wrap; gap: 18px; }
  /* Same trap as the links row: `flex: 0 0 auto` from the desktop one-row
     rules sized this line to its max-content 357px inside 327px of available
     width, leaving 6px of horizontal scroll. Measured live at 375px. */
  .public__foot > div:last-child { flex: 1 1 100%; min-width: 0; text-align: left; white-space: normal; }
  /* `flex: 0 0 auto` above sizes this row to its MAX-CONTENT width, so
     flex-wrap on its own cannot save it: the row stays 481px wide inside a
     375px viewport and the whole page scrolls sideways. Measured live at 375px
     on 2026-07-30 — 130px of horizontal overflow, which also widened the
     initial containing block and therefore dragged the FIXED Ask GCS launcher
     (right:14px resolved against 505px, not 375px) and the nav's "Enter the
     desk" CTA off-screen. Letting the row take the whole line and shrink fixes
     all three at once. */
  .public__foot-links { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
}

/* The bundle's input+button row. It arrived named for the home page's Ask GCS
   box, which is gone — but it is bundle VOCABULARY, not a page's private
   style, and its live consumer is the client desk's composer
   (templates/bl/client_assistant.html, which loads this sheet and names this
   class in its own header). Deleting it with the home box would have left that
   composer unstyled: the input wrapper would stop flexing and the Ask button
   would drop onto its own line. Renaming it is a separate job with a second
   template to change; it is kept, named, and explained instead. */
.home-ask__row { display: flex; align-items: stretch; gap: 10px; }
.home-ask__row .binput-wrap { flex: 1 1 auto; }
.home-ask__row .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .home-ask__row { flex-direction: column; } }

/* === Ask GCS — the floating popup chat on every public page ================
   Replaces two things: the `.askpub` pill (a link to /ask, which made the
   assistant a subpage) and the home page's inline `.home-ask` box, which was
   DEAD — `.cinema__cta::before` hit-tested above it, so the input never
   received a click; see the partial's header for the browser evidence.

   Ported from the client desk's proven widget (static/assistant.css `.askb`)
   and rewritten against THIS sheet's tokens, because the public pages load
   premium-port.css and nothing else. Writing correct CSS into the wrong file
   is how this repo has shipped unstyled components before.

   Markup: templates/bl/partials/_public_ask_widget.html
   Behaviour: static/public-ask.js (progressive; :target alone works without). */
.askw {
  --askw-panel-w: 392px;
  --askw-panel-h: 600px;
  font-family: var(--font-sans);
}
/* Nobody wants a chat launcher in the middle of a printed page. */
@media print { .askw { display: none; } }

/* ---- Launcher ---------------------------------------------------------- */
/* IT MUST NEVER TAKE A TAP MEANT FOR THE PAGE. A fixed pill at z-index 60 with
   pointer-events sits ON TOP of whatever scrolls under it, and on a phone that
   is the content column itself. Measured on /roi at 375px before this was
   fixed: document.elementFromPoint returned the launcher over all seven
   calculator inputs (73px of a 261px field — 28% of every one), over the
   Recalculate button, and on /pricing over BOTH plan CTAs and all four FAQ
   rows. The control rendered and could not be pressed.

   Two mechanisms, in this order:
     1. --askw-dx / --askw-dy. public-ask.js measures what is underneath and
        moves the launcher to the first free corner, so it stays reachable
        instead of vanishing the moment a form scrolls past.
     2. .askw--clear. When every corner is occupied it goes away entirely —
        visibility:hidden AND pointer-events:none, so elementFromPoint returns
        the control beneath it, not the launcher.
   The offsets are custom properties rather than an inline transform so :hover
   can still lift the pill without either one clobbering the other. */
.askw__launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r-pill, 999px);
  background: linear-gradient(180deg, var(--paper-2), var(--paper-0));
  color: var(--ink-1);
  border: 1px solid var(--brass-a45);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9), var(--edge-top);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.005em; text-decoration: none;
  transform: translate(var(--askw-dx, 0px), var(--askw-dy, 0px));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.askw__launch:hover {
  border-color: var(--brass-400); color: var(--ink-0);
  transform: translate(var(--askw-dx, 0px), calc(var(--askw-dy, 0px) - 1px));
  box-shadow: 0 22px 50px -24px rgba(0,0,0,.95), 0 0 0 1px var(--brass-a14), var(--edge-top);
}
.askw__launch svg { flex: none; color: var(--brass-300); }
/* Nothing beneath it is reachable while it is visible here, so it is not
   visible here. It comes back the moment the page scrolls somewhere clear. */
.askw--clear .askw__launch,
.askw--clear .askw__launch:hover {
  opacity: 0; visibility: hidden; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .askw__launch { transition: none; }
}

/* ---- Panel ------------------------------------------------------------- */
/* :target drives the no-JS path; public-ask.js adds .is-open and takes over.
   Both open the same panel and neither fights the other. */
.askw__panel { display: none; }
.askw__panel:target,
.askw__panel.is-open {
  display: flex; flex-direction: column;
  position: fixed; right: 24px; bottom: 24px; z-index: 61;
  width: var(--askw-panel-w); max-width: calc(100vw - 32px);
  height: var(--askw-panel-h); max-height: calc(100vh - 48px);
  border: 1px solid var(--hairline-2);
  border-radius: 16px;
  background: var(--paper-0);
  box-shadow: var(--shadow-float), var(--edge-top);
  overflow: hidden;
}
.askw__panel:target ~ .askw__launch,
.askw__panel.is-open ~ .askw__launch { display: none; }

.askw__head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-1);
}
.askw__mark {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-pill, 999px);
  display: grid; place-items: center;
  background: var(--brass-a14);
  border: 1px solid var(--brass-a45);
  color: var(--brass-300);
}
.askw__headtext { min-width: 0; }
.askw__title {
  display: block; font-family: var(--font-serif);
  font-size: var(--fs-lede); line-height: 1.15; color: var(--ink-0);
}
.askw__sub {
  display: block; margin-top: 2px;
  font-size: var(--fs-cap); letter-spacing: .04em; color: var(--ink-3);
}
.askw__x {
  margin-left: auto; flex: none;
  color: var(--ink-3); text-decoration: none;
  font-size: var(--fs-section); line-height: 1; padding: 0 4px;
}
.askw__x:hover { color: var(--ink-0); }

/* ---- Transcript -------------------------------------------------------- */
.askw__log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
/* A text thread, not stacked cards: fit-content width so a short reply is a
   short bubble, a pill radius with one squared tail corner, solid fills and no
   outlines, and the visitor's own message carries the accent. */
.askw__msg { width: fit-content; max-width: 80%; padding: 10px 14px; border-radius: 18px; }
.askw__msg p { margin: 0; font-size: var(--fs-dense); line-height: 1.65; white-space: pre-wrap; }
.askw__msg p + p { margin-top: 10px; }
.askw__msg--me {
  align-self: flex-end;
  background: var(--brass-500); border: 0; border-bottom-right-radius: 6px;
}
.askw__msg--me p,
.askw__msg--me li,
.askw__msg--me strong { color: var(--btn-ink); }
.askw__msg--me a { color: var(--btn-ink); text-decoration: underline; }
.askw__msg--gcs {
  align-self: flex-start;
  background: rgba(244,239,228,.07); border: 0; border-bottom-left-radius: 6px;
}
.askw__msg--gcs p { color: var(--ink-1); }
/* Markdown, rendered by public-ask.js from an HTML-escaped string — the model
   can never inject markup, only the small subset below. */
.askw__msg strong { color: var(--ink-0); font-weight: 600; }
.askw__msg code {
  font-family: var(--font-mono); font-size: .92em;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(244,239,228,.07); color: var(--ink-0);
}
.askw__msg ul { margin: 10px 0 0; padding-left: 1.15em; }
.askw__msg li { font-size: var(--fs-dense); line-height: 1.55; color: var(--ink-1); margin: 0 0 4px; }
.askw__msg a { color: var(--brass-300); }
/* Consecutive turns from the same speaker sit close, so a multi-part answer
   reads as one turn instead of three cards. */
.askw__msg + .askw__msg { margin-top: 2px; }

/* Typing indicator — the difference between waiting and a panel that hangs. */
.askw__typing {
  align-self: flex-start; display: inline-flex; gap: 5px;
  padding: 13px 15px; border-radius: 18px; border-bottom-left-radius: 6px;
  border: 0; background: rgba(244,239,228,.07);
}
.askw__typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3); animation: askw-bounce 1.25s infinite ease-in-out;
}
.askw__typing i:nth-child(2) { animation-delay: .16s; }
.askw__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes askw-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: .45; }
  35% { transform: translateY(-4px); opacity: 1; }
}

/* Empty state — a real one, with something to press. */
.askw__empty { padding: 6px 2px; }
.askw__emptyt { margin: 0; font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink-0); }
.askw__emptyb { margin: 8px 0 0; font-size: var(--fs-note); line-height: 1.55; color: var(--ink-3); }
/* The openers only work when public-ask.js is there to send them, so they stay
   hidden until it announces itself with .askw--js. A visible control that does
   nothing when pressed is the exact defect this widget exists to remove. */
.askw__seeds { display: none; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.askw--js .askw__seeds { display: flex; }
.askw__seed {
  font: inherit; font-size: var(--fs-meta); cursor: pointer;
  padding: 7px 11px; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--hairline-2); background: transparent; color: var(--ink-2);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.askw__seed:hover { border-color: var(--brass-a45); color: var(--ink-0); }

/* ---- Composer ---------------------------------------------------------- */
.askw__compose {
  flex: none; display: flex; gap: 10px; align-items: flex-end;
  padding: 14px 16px; border-top: 1px solid var(--hairline);
}
.askw__compose textarea {
  flex: 1 1 auto; resize: none; max-height: 132px; min-width: 0;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--hairline-2);
  background: var(--bg-1); color: var(--ink-0);
  font: inherit; font-size: var(--fs-dense); line-height: 1.55;
}
.askw__compose textarea::placeholder { color: var(--ink-4); }
.askw__compose textarea:focus { outline: none; border-color: var(--brass-300); }
.askw__send {
  flex: none; cursor: pointer; font: inherit; font-size: var(--fs-meta);
  font-weight: 600; padding: 10px 15px; min-width: 74px; text-align: center;
  border-radius: 8px; border: 1px solid var(--brass-a45);
  background: var(--brass-500); color: var(--btn-ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.askw__send[disabled] { opacity: .55; cursor: default; }
.askw__srlabel {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* Both are <p> and nothing above resets paragraph margins, so it is stated
   here. No top border: the composer already ends in one. */
.askw__note, .askw__meta {
  flex: none; margin: 0; padding: 0 16px 14px;
  font-size: var(--fs-cap); line-height: 1.55; color: var(--ink-3);
}
.askw__note { padding: 10px 2px 0; }
.askw__note a, .askw__meta a { color: var(--brass-300); }

/* What a failed answer offers instead of a dead end: try again, or a person. */
.askw__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; }
.askw__retry, .askw__human {
  font: inherit; font-size: var(--fs-cap); cursor: pointer;
  background: none; border: 0; padding: 0; text-decoration: underline;
  color: var(--brass-300);
}

/* One visible focus ring for every control in the widget. */
.askw :focus-visible { outline: 2px solid var(--brass-300); outline-offset: 2px; border-radius: 8px; }

/* ---- Phone ------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Icon only. The labelled pill is 116px wide, and at 375px there is no
     gutter to put 116px in — it lands squarely on the content column. A 52px
     disc still clears the 44px tap minimum, and it shrinks the worst-case
     overlap on the /roi calculator from 73px of a 261px field to 9px, which
     the occlusion guard in public-ask.js then takes to zero. */
  .askw__launch {
    right: 14px; bottom: 14px; padding: 0;
    width: 52px; height: 52px; justify-content: center; gap: 0;
  }
  .askw__launch span { display: none; }
  .askw__panel:target,
  .askw__panel.is-open {
    right: 8px; left: 8px; bottom: 8px; top: 8px;
    width: auto; height: auto; max-height: none;
  }
}

/* === No unstyled links, anywhere (appendix) ================================
   The bundle styles links per-component (.doc__link, .public__foot-links a,
   .tiny-list a…), which leaves any GENERATED anchor — the mailto inside a legal
   document's §Support/Contact prose, links inside server-rendered bodies — on
   the browser's default glowing blue. A UA-blue link on an obsidian page is the
   single loudest "unfinished" tell. These are the catch-alls: the bundle's own
   link treatment applied wherever prose or a card can carry an anchor. */
.doc__prose a,
.doc__lede a,
.doc-index__note a,
.cinema__lede a,
.cinema__cta-sub a,
.pricing__hero-lede a,
.plan__note a,
.faq__body a,
.reader__body a,
.int__body a,
.money-card__note a,
.decision__note a,
.hint a,
.matter a,
.fine a,
.reason a,
.aside__line a,
.tile__body a,
.tile__lead a {
  color: var(--brass-300);
  text-decoration: none;
  border-bottom: 1px dotted var(--brass-a45);
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.doc__prose a:hover,
.doc__lede a:hover,
.doc-index__note a:hover,
.cinema__lede a:hover,
.cinema__cta-sub a:hover,
.pricing__hero-lede a:hover,
.plan__note a:hover,
.faq__body a:hover,
.reader__body a:hover,
.int__body a:hover,
.money-card__note a:hover,
.decision__note a:hover,
.hint a:hover,
.matter a:hover,
.fine a:hover,
.reason a:hover,
.aside__line a:hover,
.tile__body a:hover,
.tile__lead a:hover { color: var(--brass-200); border-bottom-color: var(--brass-300); }

/* ==== gcs_port bundle v2 (2026-07-30): the AuthShell layer ==== */
/* ============================================================================
   AuthShell — one layout for all 10 auth screens
   ========================================================================= */
/* The auth stage now carries the same public footer as every other public
   page — /client/login was a terminal dead end with no Terms or Privacy link
   on a credential-collecting screen. Two rows: the card centres in the first,
   the footer sits on the baseline of the second. */
.auth { min-height: 100vh; background: var(--bg-0); color: var(--ink-0); position: relative; overflow: hidden; display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 40px 0 0; }
.auth__bg { position: absolute; inset: 0; pointer-events: none; }
.auth__bg-glow { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 20%, var(--brass-a14) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 100%, var(--brass-a08) 0%, transparent 65%);
}
.auth__bg-grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(201,169,110,.04) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(201,169,110,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 85%);
}
/* 460px -> 620px + its own gutter: the column now has to hold the shared
   public h1 (76.8px at 1280) instead of the 36px card headline it used to
   invent for itself. The gutter moved off .auth so the footer can run edge to
   edge like it does on every other public page. */
.auth__inner { position: relative; width: 100%; max-width: 620px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.auth .public__foot { width: 100%; margin-top: 56px; }
.auth__back { position: absolute; top: -12px; left: 0; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 180ms; }
.auth__back:hover { color: var(--brass-300); }
.auth__brand { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.auth__brand-mark { border-radius: 8px; }
.auth__brand-word { display: flex; flex-direction: column; line-height: 1.1; }
.auth__brand-word span { color: var(--ink-0); font-weight: 500; font-size: 15px; letter-spacing: -.005em; }
.auth__brand-word em { color: var(--brass-300); font-family: var(--font-serif); font-style: italic; font-size: 12.5px; }
.auth__card { width: 100%; padding: 36px 32px 30px; border: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(23,21,26,.78), rgba(23,21,26,.55)); border-radius: 18px; backdrop-filter: blur(20px); box-shadow: 0 32px 60px -20px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset; }
/* .auth__kicker's own mono pill declarations are DELETED, not restyled — it is
   the shared eyebrow (see the token block above). */
.auth__title { font-family: var(--pub-h1-family); font-size: var(--pub-h1-size); font-weight: var(--pub-h1-weight); color: var(--ink-0); letter-spacing: var(--pub-h1-track); line-height: var(--pub-h1-lh); margin: 0 0 14px; font-variation-settings: var(--pub-h1-opsz); }
.auth__lede { color: var(--ink-3); font-size: 14px; line-height: 1.55; margin: 0 0 24px; font-style: italic; font-family: var(--font-serif); }
.auth__body { display: flex; flex-direction: column; gap: 12px; }
.auth__foot { width: 100%; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.auth__quiet { color: var(--ink-4); font-size: 11px; letter-spacing: .04em; text-align: center; }
.auth .binput-wrap { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--hairline); background: rgba(244,239,228,.02); border-radius: 12px; transition: border-color 200ms; }
.auth .binput-wrap:focus-within { border-color: var(--brass-a45); }
.auth .binput-wrap input { flex: 1; background: transparent; border: none; outline: none; color: var(--ink-0); font-family: inherit; font-size: 14.5px; }
.auth .binput-wrap input::placeholder { color: var(--ink-4); }
.auth .binput-wrap__icon { background: transparent; border: none; color: var(--ink-3); cursor: pointer; padding: 0; display: grid; place-items: center; }


/* ==== gcs_port bundle: real-data density ====================================
   The bundle's record feed was designed against demo rows of one short line
   ("Inbound roof-leak call captured and booked"). GCS's real rows carry the
   call summary the voice agent actually wrote, which runs to full paragraphs —
   so an operator scrolling Conversations reads three or four lines per row and
   a 100-row feed becomes a wall of text. Clamp the body to two lines: the row
   keeps a fixed rhythm, the whole summary is still on the call file one click
   away, and nothing is hidden that is not reachable. The title attribute on the
   element carries the full text for hover/assistive reading.
   ========================================================================= */
.records .rec__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .records .rec__body { -webkit-line-clamp: 3; } }


/* ==== Ask GCS — the conversation ============================================
   Values taken verbatim from the bundle's own client-op/Assistant.jsx, which
   writes this layout as inline styles because the sheet had no class for it:
   32px avatar circle, 14px radius bubble, 72% max width, the visitor's own
   message tinted brass and right-aligned, GCS's on the left. A transcript is a
   conversation, and it should read like one rather than like a document.
   ========================================================================= */
.ask__thread { display: flex; flex-direction: column; gap: 18px; }
.ask__msg { display: flex; gap: 12px; max-width: 72%; align-self: flex-start; }
.ask__msg--you { align-self: flex-end; flex-direction: row-reverse; }
.ask__avatar { width: 32px; height: 32px; border-radius: 999px; flex: none;
  border: 1px solid var(--hairline); background: rgba(244,239,228,.03);
  display: grid; place-items: center; color: var(--ink-2); }
.ask__msg--gcs .ask__avatar { background: var(--brass-a08); color: var(--brass-300); }
.ask__bubble { padding: 14px 18px; border-radius: 14px; min-width: 0;
  background: rgba(244,239,228,.03); border: 1px solid var(--hairline);
  color: var(--ink-1); font-size: 14.5px; line-height: 1.6; }
.ask__msg--you .ask__bubble { background: var(--brass-a14); border-color: var(--brass-a45); }
.ask__bubble p { margin: 0 0 10px; }
.ask__bubble p:last-child { margin-bottom: 0; }
.ask__when { display: block; margin-top: 8px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .04em; color: var(--ink-4); }
@media (max-width: 700px) { .ask__msg { max-width: 88%; } }


/* ==== Ledger tables: never break a value mid-character =====================
   Observed live on the Clients register: "$1,5 / 00", "Ope / n", "ACTIO / N".
   .table-card sets overflow:hidden and the ledger has no minimum width, so at a
   narrow viewport the browser crushed the columns and wrapped inside a money
   figure, a button label and a column heading. A number split across two lines
   is not a number. Values and actions stay on one line, headings stay whole,
   and the TABLE scrolls inside its own card instead of the cells collapsing —
   the page itself still never scrolls sideways.
   ========================================================================= */
.table-card { overflow-x: auto; }
.ledger { min-width: 720px; }
.ledger th, .ledger td.money, .ledger td.ta-r, .ledger td.id, .ledger .badge { white-space: nowrap; }
.ledger td.ta-r a, .ledger td.ta-r .link { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ledger .acct { overflow-wrap: anywhere; }
@media (max-width: 700px) { .ledger { min-width: 560px; } }

/* Build consent contains the live legal document bundle; keep those links in the
   product's brass link language instead of browser-default blue. */
.build .consent a {
  color: var(--brass-300);
  text-decoration: none;
  border-bottom: 1px dotted var(--brass-a45);
  text-underline-offset: 2px;
}
.build .consent a:hover {
  color: var(--brass-200);
  border-bottom-color: var(--brass-300);
}

/* ---- Build wizard mobile containment -----------------------------------
   The four labeled stepper items have a 506px min-content width. A plain 1fr
   track therefore grows beyond a phone viewport even though the grid itself
   is only as wide as the page. Use a zero-minimum track and compact the
   progress labels at phone width so every field remains inside the viewport. */
@media (max-width: 600px) {
  .build__split { grid-template-columns: minmax(0, 1fr); }
  .build__split > *,
  .build__formcard,
  .build__aside-in { min-width: 0; max-width: 100%; }
  .build__aside { padding: 40px 24px; }
  .build__form { padding: 36px 20px; }
  .stepper { justify-content: space-between; gap: 4px; }
  .stepper__step { flex: 1 1 0; min-width: 0; }
  .stepper__label { display: none; }
  .build__nav { padding-bottom: 64px; }
  .stepper__step:not(:last-child)::after {
    width: clamp(12px, 4vw, 20px);
    margin: 0 4px;
  }
}

/* ============================================================================
   GCS touch-target + control-design appendix (non-bundle)
   ---------------------------------------------------------------------------
   MEASURED 2026-08-03, Chrome at 375x812, across 14 public routes: 306
   interactive controls, 172 of them with an effective touch box whose smaller
   side was under 44px. The method was not getBoundingClientRect — it was
   document.elementFromPoint() probed pixel by pixel out from each control's
   centre, so what is measured is the area that actually ACTIVATES the control
   (a label's own box counts for the input it wraps; a transparent hit-area
   pseudo counts for its originating element).

   The worst of it: every .btn resolved to 40px, every standard footer link to
   17px, the /ask legal row to 20px, the legal-document contents list to 34px,
   the setup review's "Edit" to 24x20 — and EVERY checkbox on every public form
   was a raw 13x13 browser default, including the legally binding authority-and-
   terms consent at the point of purchase, sitting beside 43px custom-styled
   text fields.

   Two rules below, in this order:
     1. the consent control is redrawn as a real component (all viewports —
        a 13px unstyled default is a design defect at every width);
     2. touch geometry is widened at phone width / coarse pointers only, so
        the desktop composition the owner accepted is untouched.
   Nothing here changes a colour, a type size or a radius token.
   ========================================================================= */

/* ---- 1. The consent control -------------------------------------------
   Every checkbox and radio on every public form is inside `label.consent`
   (verified: checkout, build, setup-review x3 steps, activation x2,
   client login). One selector therefore reaches all of them.
   `accent-color` on the older .consent rule only tinted the browser default;
   it could not give it a size, a border, a radius or a focus ring. */
.consent input[type="checkbox"],
.consent input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  padding: 0;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 7px;
  background: var(--paper-1);
  box-shadow: var(--edge-top);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.consent input[type="radio"] { border-radius: 50%; }

/* The 44x44 hit area. It is a transparent pseudo on the input itself, so the
   VISUAL control stays 22px while elementFromPoint() resolves to the input
   across the full 44px square. inset:-11px keeps it inside the card's own
   16px padding, so it can never reach a neighbouring control. */
.consent input[type="checkbox"]::before,
.consent input[type="radio"]::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}

/* The mark. Drawn, not typed — the tick is the one asset that cannot be made
   from tokens, so it is an inline SVG in the button-ink colour (#191307). */
.consent input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  background: center / 13px 13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.5l3.1 3.2 6.2-6.8' fill='none' stroke='%23191307' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(.55);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.consent input[type="radio"]::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--btn-ink);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.consent input[type="checkbox"]:hover,
.consent input[type="radio"]:hover { border-color: var(--brass-a45); }
.consent input[type="checkbox"]:checked,
.consent input[type="radio"]:checked {
  background: linear-gradient(180deg, var(--brass-300) 0%, var(--brass-500) 100%);
  border-color: var(--brass-500);
}
.consent input[type="checkbox"]:checked::after,
.consent input[type="radio"]:checked::after { opacity: 1; transform: scale(1); }
.consent input[type="checkbox"]:focus-visible,
.consent input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brass-a28);
}
.consent input[type="checkbox"]:disabled,
.consent input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
/* The card answers the control, so a ticked consent is legible at a glance —
   this matters most on the one at the point of purchase. */
.consent:has(input:checked) { border-color: var(--brass-a45); background: var(--brass-a08); }
.consent:focus-within { border-color: var(--brass-a45); }

/* The checkout plan radio was a native radio wearing a border: `appearance`
   was never cleared, so the browser painted its own dot on top of the bundle's
   ring, and the ring only lit up when JS added `.is-on`. It is now a real
   control that answers `:checked` on its own, with the same 44px hit area. */
.plan-opt__radio {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  background: var(--paper-1);
  cursor: pointer;
}
.plan-opt__radio::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
.plan-opt__radio:checked {
  border-color: var(--brass-500);
  background: radial-gradient(circle at 50% 50%, var(--brass-300) 40%, transparent 45%);
}
.plan-opt__radio:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brass-a28); }

/* The activation shell's fields carried no `.binput`, so the INPUT was 20px
   tall inside a 44px wrapper and only the wrapper's padding looked right —
   a tap in that padding focused nothing. The padding moves onto the input;
   the wrapper's painted box is unchanged. */
.auth .binput-wrap { padding: 0 14px; min-height: 44px; }
.auth .binput-wrap input { box-sizing: border-box; min-height: 44px; padding: 12px 0; }

/* ---- 2. Touch geometry at phone width / coarse pointers ----------------- */
@media (max-width: 640px), (pointer: coarse) {
  /* Buttons: 12px padding on a 14px/1 label is exactly 40px, which is what
     every one of them measured. `max()` rather than a flat 44px so this can
     only ever RAISE the button token (--btn-min-h), never cap it. */
  .btn, .btn--sm, .plan-cta, .plan__cta { min-height: max(44px, var(--btn-min-h, 0px)); }

  /* Brand lockups are links (they are the way back to the home page). */
  .public__brand, .build__brand, .auth__brand { min-height: 44px; }

  /* The nav row now carries five items. Let it wrap rather than squeeze —
     this row has overflowed a 375px viewport twice before (see the 430px
     block above); wrapping cannot. Five legible 44px items cannot fit one
     347px line, so the row takes two and the shell's own padding is trimmed
     to pay for the second one (measured: 184px -> 172px of nav). */
  .public__nav { padding: 14px; row-gap: 6px; }
  .public__nav-links { flex-wrap: wrap; row-gap: 2px; }
  .public__nav-links a { min-width: 44px; justify-content: center; }

  /* Every link in the public foot — the six-item mono row on eight pages and
     the fifteen-item legal registry row on /ask. */
  .public__foot a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .public__foot-links { gap: 0 10px; }
  .public__foot-links a { min-width: 44px; padding: 0 6px; }

  /* Legal-document contents list + its contact line. */
  .doc__toc a { align-items: center; min-height: 44px; }
  .doc__toc-mail { min-height: 44px; }

  /* Standalone text links that are controls, not prose: the login foot pair,
     the setup review's "Edit", and the checkout paybar's jump link.
     `a.paybar__go` outranks the inline <style> rule in bl/checkout.html. */
  .auth__foot .link,
  .auth__foot .matter a,
  .review__row .link,
  .build__topbar .link,
  .doc__crumb a,
  a.paybar__go {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .review__row .link { justify-content: flex-end; min-width: 44px; }
  .build__topbar .link { min-width: 44px; justify-content: flex-end; }

  /* Alt-path links that read as a sentence but behave as a control row.
     inline-block (not a negative-margin overlay) so the line box GROWS to
     hold them — an overlay here would sit on top of its own neighbour and
     steal its taps, which is the defect, not the fix. */
  [data-testid="pricing-alt-paths"] a,
  [data-testid="home-specialist-path"],
  [data-testid="roi-build-with-specialist"],
  .matter > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
  }

  /* Text fields: 15px/normal + 12px padding lands at 43px. */
  .binput, .btextarea, select.binput { min-height: 44px; }
  .binput-wrap { min-height: 44px; }

  /* ---- Links that sit inside a sentence ---------------------------------
     The legal-bundle links in a consent ("I am authorized to act for this
     business and accept the …" — nine documents on /checkout, five on
     /activate) and the contact links inside legal-document prose. These are
     the documents the buyer is being asked to ACCEPT, so a 17px line of text
     is not an acceptable target for them just because it is grammatically a
     sentence.

     They are made atomic boxes (`inline-block`) with real padding rather than
     an overlay. That distinction is the whole fix: an overlay hit area would
     sit on top of the NEXT link on the line above and steal its taps, whereas
     an inline-block GROWS its own line box, so nine of them in one paragraph
     cannot collide by construction. Verified after: 0 blocked controls across
     all 14 routes. The cost is paid in leading, which is why the surrounding
     prose is only nudged to 1.75 rather than matched to the links. */
  .consent span { line-height: 1.75; }
  /* 4px of side padding as well: the shortest document link in a consent is
     the word "Terms" at 37px, which clears 44 on height but not on width.

     `a[href]` (not `a`) on purpose — it has to outrank BOTH `.build .consent a`
     above and the inline <style> block in bl/checkout.html, which both draw
     the link's underline as a `border-bottom`. A border-bottom is drawn on the
     BOX, so 11px of padding would drop the rule 11px below the words it
     underlines. The underline becomes a real text-decoration instead, which
     stays welded to the text at any padding, in the same dotted brass. */
  .consent a[href] {
    display: inline-block;
    padding: 11px 4px;
    max-width: 100%;
    border-bottom: none;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--brass-a45);
    text-underline-offset: 3px;
  }
  .consent a[href]:hover { text-decoration-color: var(--brass-300); }
  .doc__prose p a { display: inline-block; padding: 9px 0; max-width: 100%; }
}


/* ============================================================================
   SALES ENGINE ▸ YOUR LEADS — the lead-book register
   ---------------------------------------------------------------------------
   Scoped to `.ledger--leadbook` / `.figs--leadbook`, which only
   templates/bl/client_leads.html carries. Nothing else on the desk changes.

   MEASURED 2026-08-03 on a 64-lead book, Chrome, before this block:
     * 1280x800 — .table-card clientWidth 902, table scrollWidth 1542. The
       "Send to Sales Closer" button on every row sat at x=1685..1832 with the
       card ending at 1218; document.elementFromPoint at its centre returned
       null. The ONE action on the page was unreachable without scrolling a
       nested container sideways at desktop width.
     * 375x812 — the same table, 1526px inside a 333px card: 4.6 screens of
       sideways scrolling to reach any action. Buttons measured 147x16, well
       under a 44px touch target.
     * The cause was not the missing min-width guard the template blamed. It
       was `.shell .ledger .acct{white-space:nowrap}` in desk.css (0,3,0),
       which outranks premium-port's `.ledger .acct{overflow-wrap:anywhere}`
       (0,2,0), so one long real business name set the table's width; and
       `.ledger td.ta-r{white-space:nowrap}` on a Priority cell that repeated
       "GCS review of their public evidence" on all fifty rows.
   ========================================================================= */

/* Four figures, four columns — never 3 + 1 orphan. The shared `.figs`
   auto-fit track needs 4x240 + 3x18 = 1014px and the desk column is 904px, so
   auto-fit dropped the fourth tile onto a row of its own. */
.shell .figs--leadbook { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 2-up from 1100 down, which is also what the desk-wide `.shell .figs` rule
   does below 520 — so the band stays 2-up all the way to a phone rather than
   this page inventing a third arrangement of its own. */
@media (max-width: 1100px) { .shell .figs--leadbook { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Desktop / tablet: a fixed six-column register that cannot outgrow its
   card. table-layout:fixed makes the widths a decision instead of an outcome,
   so no single row's content can push the Action column off screen. ------- */
.shell .ledger--leadbook {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
/* 14px side padding rather than the register's 18px: six columns pay that
   twice each, and the 48px it returns is the difference between "Send to
   Sales Closer" sitting on one line and wrapping. */
.shell .ledger--leadbook th,
.shell .ledger--leadbook tbody td { padding-left: 14px; padding-right: 14px; }
/* THE COLUMN WIDTHS LIVE ON THE HEADER ROW ONLY. A `width` on the body cells
   as well looks harmless and is not: under table-layout:fixed a percentage on
   a td resolves against its own COLUMN, so `td:nth-child(2){width:23%}` sized
   the name cell at 23% of 204px = 47px and wrapped a long business name into
   a 969px-tall row. Measured before this line was removed. */
.shell .ledger--leadbook th:nth-child(1) { width: 46px; }
.shell .ledger--leadbook th:nth-child(2) { width: 23%; }
.shell .ledger--leadbook th:nth-child(4) { width: 104px; }
.shell .ledger--leadbook th:nth-child(5) { width: 118px; }
.shell .ledger--leadbook th:nth-child(6) { width: 184px; }
/* 1101–1320px: the rail is still 264px wide but the content column has dropped
   to ~750px, so the fixed columns give some of it back before "Why now" gets
   squeezed. */
@media (min-width: 1101px) and (max-width: 1320px) {
  .shell .ledger--leadbook th:nth-child(1) { width: 40px; }
  .shell .ledger--leadbook th:nth-child(4) { width: 92px; }
  .shell .ledger--leadbook th:nth-child(5) { width: 104px; }
  /* 178, not less: "Send to Sales Closer" plus its chevron measures 147px and
     the cell pays 28px of side padding, so anything under 175 wraps the one
     control the row exists for onto two lines. */
  .shell .ledger--leadbook th:nth-child(6) { width: 178px; }
}
/* The business name is prose, not a value: it wraps. This is the rule that
   beats desk.css's nowrap (0,4,0 vs 0,3,0). */
.shell .ledger--leadbook td.acct {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.shell .ledger--leadbook td.acct .sub { white-space: nowrap; margin-top: 4px; }
.shell .ledger--leadbook td.acct .sub a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--brass-a45);
}
.shell .ledger--leadbook td.acct .sub a:hover { color: var(--brass-300); }
.shell .ledger--leadbook td.matter { min-width: 0; }
/* The verdict word under the figure wraps; the figure itself never does. */
.shell .ledger--leadbook td.lead-score { white-space: normal; }
.shell .ledger--leadbook td.lead-score .money { white-space: nowrap; }
.shell .ledger--leadbook td.lead-stage { line-height: 1.45; }
/* Actions keep their own line unbroken but the cell may wrap around them. */
.shell .ledger--leadbook td.lead-act { white-space: normal; }
.shell .ledger--leadbook td.lead-act .link,
.shell .ledger--leadbook td.lead-act .fine {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
  min-height: 32px;
  text-align: right;
}
.shell .ledger--leadbook td.lead-act form { display: inline-flex; justify-content: flex-end; width: 100%; }
.shell .ledger--leadbook td.lead-act button.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-0);
  cursor: pointer;
}
.shell .ledger--leadbook td.lead-act button.link:hover { color: var(--brass-300); }
.shell .ledger--leadbook details.fine summary { min-height: 28px; display: flex; align-items: center; }

/* ---- Below 1101px: the register becomes a stacked card list. --------------
   The breakpoint is 1100, not a phone width, and the arithmetic is why. The
   desk rail is a fixed 264px and only collapses at 860px (desk.css:387), and
   `.main` adds clamp(24px,4vw,68px) of padding a side, so the content column
   is 1024 - 264 - 82 = 678px at a 1024px laptop and 564px at 900px. Against
   452px of fixed columns that leaves the "Why now" column 70px at 1024 and
   pushes the table past `.ledger{min-width:640px}` into a sideways scroll at
   900 — the exact defect this block exists to remove, one screen size down.
   A six-column table has no honest rendering in a 600px column, so every
   width that cannot seat one gets the card list instead: one lead per block,
   read top to bottom, action last. ---------------------------------------- */
@media (max-width: 1100px) {
  .shell .table-card--leadbook { overflow-x: visible; padding: 0; }
  .shell .ledger--leadbook,
  .shell .ledger--leadbook tbody,
  .shell .ledger--leadbook tr,
  .shell .ledger--leadbook td {
    display: block;
    width: auto;
    min-width: 0;
  }
  .shell .ledger--leadbook thead { display: none; }
  .shell .ledger--leadbook tr {
    padding: 16px 18px 18px;
    border-bottom: 1px solid var(--hairline);
  }
  .shell .ledger--leadbook tr:last-child { border-bottom: 0; }
  /* `tbody td`, matching the desktop padding rule's specificity — a plain
     `td { padding: 0 }` loses to it and left every card's text inset a further
     14px inside a 375px screen. */
  .shell .ledger--leadbook tbody td {
    border-bottom: 0;
    padding: 0;
    text-align: left;
    width: auto !important;
  }
  .shell .ledger--leadbook td.id {
    font-size: 11px;
    letter-spacing: .08em;
    margin-bottom: 2px;
  }
  .shell .ledger--leadbook td.acct { font-size: 15px; }
  .shell .ledger--leadbook td.matter { margin-top: 8px; }
  /* Score, verdict and stage are one line on a phone, not three stacked
     blocks: "96 · Qualified · Ready to call". */
  .shell .ledger--leadbook td.lead-score,
  .shell .ledger--leadbook td.lead-stage {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 10px;
  }
  .shell .ledger--leadbook td.lead-score .sub { display: inline; margin: 0; }
  .shell .ledger--leadbook td.lead-stage::before {
    content: "·";
    color: var(--ink-4);
    margin-right: 8px;
  }
  .shell .ledger--leadbook td.lead-act { margin-top: 12px; }
  .shell .ledger--leadbook td.lead-act .link,
  .shell .ledger--leadbook td.lead-act .fine {
    min-height: 44px;
    justify-content: flex-start;
  }
  .shell .ledger--leadbook td.lead-act form { justify-content: flex-start; }
  .shell .ledger--leadbook td.acct .sub a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .shell .ledger--leadbook details.fine summary { min-height: 44px; }
  /* Measured 42px high — two short of a touch target, on the two doors that
     open the rest of the Sales Engine. Scoped to this page's head so the
     shared .btn keeps its own rhythm everywhere else. */
  .shell .page-head--leadbook .btn { min-height: 44px; }
  .leadbook-pager .btn { min-height: 44px; }
}


/* ==== /client/today — a record row that carries the customer's own facts ====
   `.records .rec__body` clamps every record body to two lines (three under
   900px). That density rule was written for the Conversations feed, whose rows
   carry one long voice-agent paragraph and belong on a fixed rhythm.

   The "Needs your word" list on /client/today is the other shape: each prepared
   reply carries the caller's phone, their email, the service location and their
   own words, on four short lines, and delivering those facts to the owner is the
   entire reason the row exists (before them the desk said "Review prepared reply
   for Jordan's plumbing" and withheld the number to call). Under the clamp,
   measured 2026-08-03 at 1280px, everything below line two was cut off and
   unreachable — the phone number included.

   `rec--detail` opts that one list out. Scoped to the modifier, so nothing else
   built on `.records` changes.
   ========================================================================= */
.records .rec--detail .rec__body,
[data-testid="client-next-action"] .records .rec__body {
  display: block;
  -webkit-line-clamp: none;
  -webkit-box-orient: initial;
  overflow: visible;
  text-overflow: clip;
}
.shell .records .rec--detail .rec__body .matter { display: inline-block; margin-top: 2px; }
/* The lane rows in the same list are short, hand-written sentences, not free
   text — and they were being cut too. Measured at 1280px: the outbound row's
   body was 233px wide and needed three lines for "2 outbound calls prepared —
   compliance-eligible, awaiting your word"; the clamp showed two, so the row
   said "compliance-eligible," and stopped. The whole "Needs your word" list is
   unclamped above; the Conversations-style clamp still governs every other
   `.records` list, including "The record" below it. */

/* ============================================================================
   CLIENT CALL FILES — /client/calls and /client/calls/<id>
   ----------------------------------------------------------------------------
   Five components this surface needed and the sheet did not have. Every one of
   them reuses the bundle's existing tokens, spacing and pill geometry, so the
   screen still reads as the same product as its siblings — nothing here
   introduces a second design vocabulary.
   ========================================================================= */

/* --- Counts in the page head are DOORS ------------------------------------
   "7 awaiting you" used to be a dead figure with no control anywhere on the
   desk that reached those seven. Both counts are links now, so they get the
   affordance of one — and a real tap target on a phone, where .chip-row shrinks
   its children to a 24px box. */
.cf-count { text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
a.cf-count:hover { border-color: var(--brass-a45); color: var(--ink-0); }
a.badge.cf-count:hover { color: var(--warn); }

/* --- The caller's number, dialable --------------------------------------- */
.chip--tel { text-decoration: none; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.chip--tel:hover { border-color: var(--brass-a45); color: var(--ink-0); }
.chip--tel:hover svg { color: var(--brass-300); }

/* --- The recording ---------------------------------------------------------
   .msg__attach is an inline-flex pill sized to its content, which a native
   <audio> element (300px intrinsic, and wider in some engines) burst out of on
   a 375px viewport. The pill flexes and the player is allowed to shrink inside
   it, so the control fits the column at every width instead of forcing the page
   to scroll sideways.

   `[hidden]` is forced because the shell sets `display:flex`, and a display
   declaration outranks the UA stylesheet's `[hidden] { display:none }` — without
   this the failure copy and the dead player would render at the same time. */
.cf-audio { display: block; }
.cf-audio__shell { display: flex; align-items: center; gap: 10px; max-width: 100%; width: 100%; box-sizing: border-box; }
.cf-audio__shell svg { color: var(--brass-400); flex: none; }
.cf-audio__player { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 420px; height: 36px; }
.cf-audio__down { margin-top: 14px; }
.cf-audio__retry { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--brass-300); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.cf-audio__retry:hover { color: var(--brass-200, var(--brass-300)); }
.cf-audio [hidden] { display: none !important; }

/* --- The conversation, as a disclosure -------------------------------------
   A five-minute call is forty exchanges. Rendered open and inline it pushed the
   whole rest of the desk off the screen, so it folds behind its own count and
   the summary, the callback and the decision stay on the first screen. */
.cf-turns { border-top: 1px solid var(--hairline); padding-top: 14px; }
.cf-turns__summary { cursor: pointer; list-style: none; display: block; padding: 2px 0 2px 22px; position: relative; }
.cf-turns__summary::-webkit-details-marker { display: none; }
.cf-turns__summary::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--brass-400); border-bottom: 1.5px solid var(--brass-400);
  transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease);
}
.cf-turns[open] > .cf-turns__summary::before { transform: rotate(45deg); }
.cf-turns__summary:hover .fig__k { color: var(--brass-300); }
.cf-turns__summary .fig__note { margin: 2px 0 0; }
.cf-turns > .doc__prose { margin-top: 12px; }

/* --- Where this page sits in the archive ---------------------------------- */
.cf-page { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.cf-page .fig__note { margin: 0; }
.cf-page__go { display: flex; align-items: center; gap: 8px; }

@media (max-width: 720px) {
  /* Thumb-sized controls. .chip-row and .acct-filter both shrink their children
     for density on a phone, which is right for a static chip and wrong for one
     that has become a control. */
  .cf-count, .chip--tel { min-height: 44px; padding: 10px 14px; }
  .cf-lanes .chip-select { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; font-size: 12.5px; }
  .cf-turns__summary { padding-top: 10px; padding-bottom: 10px; }
  .cf-audio__player { max-width: none; }
  .cf-page { align-items: stretch; }
  .cf-page__go { width: 100%; }
  .cf-page__go .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}


/* ============================================================================
   SALES ENGINE ▸ LEAD FINDER — the discovery register
   ---------------------------------------------------------------------------
   Scoped to `.ledger--finder` / `.table-card--finder` / `.figs--finder`, which
   only templates/bl/client_sales_lead_finder.html carries. Nothing else on the
   desk changes.

   MEASURED 2026-08-03 in Chrome, before this block, on a 5-lead desk:
     * 375x812 — `.table-card` clientWidth 323 around a table forced to 1,161px
       by desk.css's `.shell .ledger--register{min-width:760px}` plus
       `.shell .ledger .acct{white-space:nowrap}`. "More on this lead" sat at
       x=519, "Send to Sales Closer" at x=1009 and "Call script" at x=1074 —
       three of the four columns and BOTH row actions off screen behind a
       nested sideways scroll with no affordance. The buttons measured 147x16
       and 82x21, well under a 44px touch target.
     * 1280 — the register already needed 1,161px inside a 1,130px card, so the
       Action column clipped at desktop width too.

   Same remedy the sibling register (`.ledger--leadbook`) already carries: fixed
   column widths so no row's content can push an action off the card, and a
   stacked card list under 760px. Written as its own block rather than added to
   the leadbook selectors because this register has four columns, not six — the
   leadbook's nth-child widths would squeeze this table's Lead column to 58px.
   ========================================================================= */

/* Four figures, four columns — never 3 + 1 orphan (the shared `.figs` auto-fit
   track needs 4x240 + 3x18 = 1014px and the desk column is ~904px).

   THE BAND STAYS TWO-UP ON A PHONE. Stacked one per row it measured 4 x 147px
   + gaps = 660px, which put the first lead at y=1680 on a 812px screen — four
   and a half screens of scrolling past four numbers to reach the thing the
   page is for. Two-up is ~330px and puts the register within reach; the tiles
   lose their desktop padding at this width rather than their content. */
.shell .figs--finder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .shell .figs--finder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .shell .figs--finder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Tighter box, same four facts — the note explains what the number counts and
     is not the thing to cut. */
  .shell .figs--finder .fig { padding: 14px 14px 16px; }
  .shell .figs--finder .fig__k { font-size: 10px; }
  .shell .figs--finder .fig__note { font-size: 11px; line-height: 1.35; }
}

/* THE FIRST LEAD ON THE FIRST SCREEN. MEASURED at 1280x800 before this: the
   page head ended at y=300, the figure band at y=526, and the desk's default
   section rhythm (58px above the section, 22px under its head, 40px under the
   band) pushed the register's first row to y=830 — a page called "Leads GCS
   found" whose first screen showed four numbers and a column heading. Same
   rhythm, 50px tighter, on this page only. */
.shell .page-head--finder { margin-bottom: 28px; }
.shell .sec--finder { margin-top: 28px; }
.shell .sec--finder .sec-head { margin-bottom: 14px; }
.shell .sec--finder .reason { margin-bottom: 14px; }
.shell .sec--finder .controlbar { margin-bottom: 14px; }
.shell .figs--finder { margin-bottom: 28px; }

.shell .ledger--finder {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
/* Lead · Why now · Priority · Action. The last two are fixed; the first two
   share what is left, so one long real business name cannot set the width. */
.shell .ledger--finder th.lead-score,
.shell .ledger--finder td.lead-score { width: 132px; }
.shell .ledger--finder th.lead-act,
.shell .ledger--finder td.lead-act { width: 188px; }
/* The business name is prose, not a value: it wraps. (0,4,0) — this is the
   rule that beats desk.css's `.shell .ledger .acct{white-space:nowrap}` at
   (0,3,0), which is what actually set the old table's width. */
.shell .ledger--finder td.acct {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.shell .ledger--finder td.acct .sub { white-space: nowrap; margin-top: 4px; }
.shell .ledger--finder td.acct .sub a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--brass-a45);
}
.shell .ledger--finder td.acct .sub a:hover { color: var(--brass-300); }
.shell .ledger--finder td.matter { min-width: 0; }
/* The verdict word under the figure wraps; the figure itself never does. */
.shell .ledger--finder td.lead-score { white-space: normal; }
.shell .ledger--finder td.lead-score .money { white-space: nowrap; }
.shell .ledger--finder td.lead-act { white-space: normal; }
.shell .ledger--finder td.lead-act .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 12px;
}
.shell .ledger--finder td.lead-act .link,
.shell .ledger--finder td.lead-act .fine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 32px;
}
.shell .ledger--finder td.lead-act form { display: inline-flex; margin: 0; }
.shell .ledger--finder td.lead-act button.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-0);
  cursor: pointer;
}
.shell .ledger--finder td.lead-act button.link:hover { color: var(--brass-300); }
.shell .ledger--finder details.fine summary { min-height: 28px; display: flex; align-items: center; }

/* ---- Phone / small tablet: the register becomes a stacked card list. A
   four-column register with two actions has no honest rendering at 375px —
   the previous behaviour hid the reason, the score and both actions off the
   right edge of a nested scroller. Each lead becomes one block, read top to
   bottom, actions last and thumb-sized. -------------------------------- */
@media (max-width: 760px) {
  .shell .table-card--finder { overflow-x: visible; padding: 0; }
  .shell .ledger--finder,
  .shell .ledger--finder tbody,
  .shell .ledger--finder tr,
  .shell .ledger--finder td {
    display: block;
    width: auto;
    min-width: 0;
  }
  .shell .ledger--finder thead { display: none; }
  .shell .ledger--finder tr {
    padding: 16px 18px 18px;
    border-bottom: 1px solid var(--hairline);
  }
  .shell .ledger--finder tr:last-child { border-bottom: 0; }
  .shell .ledger--finder td {
    border-bottom: 0;
    padding: 0;
    text-align: left;
    width: auto !important;
  }
  .shell .ledger--finder td.acct { font-size: 15px; }
  .shell .ledger--finder td.matter { margin-top: 8px; }
  .shell .ledger--finder td.lead-score {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .shell .ledger--finder td.lead-score .sub { display: inline; margin: 0; }
  .shell .ledger--finder td.lead-act { margin-top: 6px; }
  .shell .ledger--finder td.lead-act .row { justify-content: flex-start; gap: 0 18px; }
  .shell .ledger--finder td.lead-act .link,
  .shell .ledger--finder td.lead-act .fine { min-height: 44px; }
  .shell .ledger--finder td.acct .sub a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .shell .ledger--finder details.fine summary { min-height: 44px; }
}

/* ==========================================================================
   Account · three-state authority pills (/client/settings §03)
   --------------------------------------------------------------------------
   MEASURED 2026-08-03 on the live markup: `.tabs__opt.is-active` is written by
   the SERVER from the stored policy, so the moment the owner picked a
   different state the control showed TWO answers at once — the radio dot moved
   to "Off" while the highlighted pill stayed on "Automatic" — and it stayed
   that way until the form was saved and the page came back. A control that
   contradicts itself while you are using it is not a control.

   The pill now follows the radio. `:has(input:checked)` carries the
   specificity of its argument, so
     `.shell .tabs--authority .tabs__opt:has(input:checked)`  = (0,4,1)
   outranks desk.css's
     `.shell .tabs--authority .tabs__opt.is-active`           = (0,4,0),
   and the `:not(:has(...))` pair takes the look OFF the stale server pill.
   The painted values are byte-copies of desk.css:1286 — this changes WHICH
   pill is lit, never how a lit pill looks. In a browser without :has() both
   rules are dropped whole and the page behaves exactly as it did before.
   ========================================================================== */
.shell .tabs--authority .tabs__opt:has(input:checked) {
  background: linear-gradient(180deg, var(--paper-2), var(--paper-1));
  color: var(--ink-0);
  box-shadow: var(--edge-top);
}
.shell .tabs--authority .tabs__opt.is-active:not(:has(input:checked)) {
  background: none;
  color: var(--ink-2);
  box-shadow: none;
}

/* --- The decision comes first on a phone -----------------------------------
   .build__grid stacks below 600px in DOM order, which put the whole call record
   — badges, recording, summary and (on an Operator desk) the transcript — above
   the one control the screen exists for. MEASURED 2026-08-03 at 375x812: the
   "Approve callback" button sat 2315px down, 2.9 screens below the fold, on the
   surface whose own contract calls it "the one dominant action on this screen".
   Below 600px the decision leads and the record reads underneath it as the
   evidence for it. Above 600px the two sit side by side and nothing moves. */
@media (max-width: 600px) {
  .build__grid > .cf-decide { order: -1; }
}


/* ============================================================================
   /client/today at phone width — measured, not assumed (2026-08-03)
   ----------------------------------------------------------------------------
   Two things were wrong on a 375px viewport and neither is visible in markup.

   1. THE PAGE SCROLLED SIDEWAYS. document.scrollWidth was 427px against a
      375px client width. The chain: `.today-focus` collapses to one column
      under 1024px, but a `1fr` track cannot shrink below its content's
      min-content width, and `.today-focus__primary` inherits `min-width: auto`.
      Its min-content is set by `.rec`, which stays a horizontal row on the desk
      because `.shell .rec { display: flex }` (desk.css, 0-2-0) outranks the
      `@media (max-width: 720px) { .rec { grid-template-columns: 1fr } }` this
      sheet already wrote for exactly this case. Measured inside that row:
      a 110px minimum reference column, a nowrap badge, a 16px chevron and
      44px of padding, leaving `.rec__body` 61px wide — into which a clamped
      three-line summary was rendered. The mobile stack was written; it was
      just outranked. This restores it for the two lists on this page.

   2. EVERY BUTTON ON THIS PAGE WAS UNDER THE THUMB MINIMUM. This sheet's own
      touch appendix raises `.btn` to 44px under 640px, but
      `.shell .btn, .btn { min-height: 0; height: auto }` in components.css is
      one specificity step higher on every desk page, so it wins. Measured at
      375px: Approve 84x35, View evidence 119x35, Pause automatic email 168x35,
      All authority settings 152x22, Open support 83x17. Scoped to this page's
      own sections rather than patched globally — components.css is the shared
      button component and other surfaces are being worked on in parallel.
   ========================================================================= */
@media (max-width: 720px) {
  [data-testid="client-next-action"] .records .rec,
  [data-testid="client-record"] .records .rec {
    display: block;
    padding: 16px 18px;
  }
  [data-testid="client-next-action"] .records .rec .rec__id,
  [data-testid="client-record"] .records .rec .rec__id {
    min-width: 0;
    white-space: normal;
    display: block;
    margin-bottom: 6px;
  }
  [data-testid="client-next-action"] .records .rec .rec__body,
  [data-testid="client-record"] .records .rec .rec__body {
    display: block;
    -webkit-line-clamp: none;
    -webkit-box-orient: initial;
    overflow: visible;
    width: auto;
  }
  [data-testid="client-next-action"] .records .rec .badge,
  [data-testid="client-record"] .records .rec .badge { margin-top: 12px; }
  [data-testid="client-next-action"] .records .rec .btn,
  [data-testid="client-next-action"] .records .rec form { margin-top: 12px; }
  [data-testid="client-next-action"] .records .rec .rec__go,
  [data-testid="client-record"] .records .rec .rec__go { display: none; }
}

@media (max-width: 640px), (pointer: coarse) {
  [data-testid="client-operating-layer"] .btn,
  [data-testid="client-agent-training-banner"] .btn,
  [data-testid="client-next-action"] .btn,
  [data-testid="client-record"] .btn,
  [data-testid="client-email-oversight"] .btn,
  .today-away .btn { min-height: 44px; height: auto; }

  /* Text links that are controls, not prose: the queue door in the lede, the
     oversight card's settings link, and the three standing-fact links in the
     "While you were away" band. */
  [data-testid="client-operating-layer"] .lede .link,
  [data-testid="client-email-oversight"] .row .link,
  .today-away .hint a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* THE LAST 52px OF SIDEWAYS SCROLL. With the record rows stacked, the page's
   min-content width was still 407px against a 375px viewport, and the element
   that set it was `.decision` — the one prepared-draft card, a three-column
   grid (88px value column, body, and an actions row of up to three nowrap
   buttons) with no phone rule anywhere in this sheet. It stacks now, and the
   buttons wrap onto their own line at full width instead of forcing the whole
   page wider than the screen. */
@media (max-width: 720px) {
  [data-testid="client-next-action"] .decision {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
  }
  [data-testid="client-next-action"] .decision__value { min-width: 0; }
  [data-testid="client-next-action"] .decision__actions { flex-wrap: wrap; gap: 10px; }
  [data-testid="client-next-action"] .decision__actions .btn { flex: 1 1 auto; }
}

/* ============================================================================
   THE MOBILE NAVIGATION SYSTEM — public site + client desk + operator desk
   ============================================================================

   WHAT WAS BROKEN, MEASURED IN A REAL BROWSER AT 375x812 (2026-08-03).

   Client desk, /client/today: the rail collapsed (the `max-width: 900px` block
   above) into a horizontal band. Of its 18 links exactly THREE were hittable:
   the brand, Ask GCS and Sign out. `Today` and `Approvals` were painted inside
   the viewport but failed elementFromPoint — the utility list was drawn on top
   of them. The other thirteen destinations (Conversations, Email, Your leads,
   Lead Finder, Pain Radar, Sales Closer, Sales Research, Results, Leakage,
   Recovery Queue, Billing, Account, Help) sat at x = 373..1667. Their scroll
   container, `.rail__navs.nav`, had a scrollWidth of 1499px and a clientWidth
   of TWELVE PIXELS, so they could not be scrolled to either. All four
   `.rail__section` headers and the identity block were display:none. There was
   no burger, no drawer, no bottom bar: zero elements with aria-expanded.

   Public site, /: five links plus a brand wrapped into a THREE-ROW sticky bar
   172px tall — 21% of the viewport, on every page, permanently.

   THE PATTERN, AND WHY. One control, one interaction, both surfaces (owner rule
   4). A burger opening a full drawer rather than a bottom tab bar, because the
   client desk has SIXTEEN destinations in four named groups: a five-slot tab bar
   surfaces four and buries twelve behind a More sheet, which is the same tap
   cost as the burger while destroying the grouped IA and colliding with the
   fixed Ask GCS launcher. The drawer keeps the groups intact and — laid out two
   columns wide — puts every one of the sixteen on screen at once (owner rule 2).
   The public bar keeps "Enter the desk" OUTSIDE the drawer: the login CTA is the
   conversion and must never cost a tap.

   NO-JS FIRST. State is a real checkbox inside its own <label>, read with :has().
   The input is focusable (opacity 0, never `hidden` or display:none), so Space
   toggles the drawer with JavaScript off, and a second <label for> is the scrim
   so tapping outside closes it. static/mobile-nav.js only ENHANCES: aria-expanded,
   Esc, focus trap, focus return, scroll lock, close-on-navigate.

   TAB ORDER. A closed drawer is `visibility: hidden`, not merely translated, so
   its links leave the tab order and the accessibility tree instead of lurking
   off-screen. That is why the visibility transition is delayed on close only.
   ========================================================================= */

:root {
  --mnav-h: 56px;                    /* bar height, both surfaces */
  --mnav-w: min(88vw, 340px);        /* drawer width */
  --mnav-ease: cubic-bezier(.22, .61, .36, 1);
  --mnav-dur: .26s;
}

/* ---- Off above the breakpoint: the mobile chrome does not exist ---------- */
.mnav,
.mnav__btn,
.mnav__scrim,
.mnav__panel-h,
.public__nav-cta { display: none; }

/* The checkbox IS the button: it fills the whole 44px target so every tap and
   every Space press lands on it, and it is invisible rather than hidden so it
   keeps its place in the tab order.
   Selected as `.mnav__btn .mnav__cb` (0,2,0) on purpose: the site-wide control
   styling in this file matches `input[type="checkbox"]` (0,1,1), which outranks
   a lone `.mnav__cb` and had shrunk this to a 22x22 box in the corner of a 46px
   label — measured on /client/today before this selector was raised. */
.mnav__btn .mnav__cb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: inherit; background: none;
  opacity: 0; cursor: pointer; z-index: 2;
  -webkit-appearance: none; appearance: none;
}

@media (max-width: 900px) {

  /* ---- 1. The bar ------------------------------------------------------ */
  .mnav {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--mnav-h);
    padding: 0 8px 0 14px;
    background: linear-gradient(180deg, var(--paper-1) 0%, var(--paper-0) 100%);
    border-bottom: 1px solid var(--hairline);
    z-index: 72;
  }
  .mnav__brand {
    display: flex; align-items: center; gap: 9px;
    min-width: 0; flex: 1 1 auto;
    min-height: 44px;
    text-decoration: none; color: var(--ink-0);
  }
  .mnav__brand img { width: 28px; height: 28px; flex: none; object-fit: contain; }
  .mnav__brand > span { min-width: 0; }
  .mnav__brand-name {
    display: block;
    font-family: var(--font-serif); font-weight: 500; font-size: 15px;
    line-height: 1.1; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mnav__brand-sub {
    display: block; font-family: var(--font-sans); font-size: 9px;
    letter-spacing: var(--ls-etch); text-transform: uppercase;
    color: var(--ink-3); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- 2. The Menu button (a label wrapping its own checkbox) ----------- */
  .mnav__btn {
    display: inline-flex; align-items: center; gap: 8px;
    position: relative; flex: none;
    /* 46, not 44: the checkbox inside is inset to the CONTENT box, so a 44px
       label leaves the input itself 42px. The control the finger actually hits
       is the input, and it has to clear 44 on its own. */
    min-width: 46px; min-height: 46px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: rgba(244, 239, 228, .03);
    color: var(--ink-1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav__btn-t {
    font-size: 12px; font-weight: 500; letter-spacing: var(--ls-etch);
    text-transform: uppercase; color: var(--ink-2);
  }
  .mnav__bars {
    display: block; position: relative; flex: none;
    width: 18px; height: 12px;
  }
  .mnav__bars i {
    position: absolute; left: 0; height: 1.5px; width: 100%;
    background: var(--brass-300); border-radius: 2px;
    transition: transform var(--mnav-dur) var(--mnav-ease),
                opacity var(--mnav-dur) var(--mnav-ease);
  }
  .mnav__bars i:nth-child(1) { top: 0; }
  .mnav__bars i:nth-child(2) { top: 5.25px; }
  .mnav__bars i:nth-child(3) { top: 10.5px; }

  /* Open: the bars become a close cross, in place, so the same 44px target
     both opens and closes and the user never hunts for a second control. */
  .mnav__btn:has(.mnav__cb:checked) { border-color: var(--brass-500); background: var(--brass-a08); }
  .mnav__btn:has(.mnav__cb:checked) .mnav__bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
  .mnav__btn:has(.mnav__cb:checked) .mnav__bars i:nth-child(2) { opacity: 0; }
  .mnav__btn:has(.mnav__cb:checked) .mnav__bars i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

  /* Keyboard focus has to land on something the eye can find. */
  .mnav__btn:has(.mnav__cb:focus-visible) {
    outline: 2px solid var(--brass-300);
    outline-offset: 2px;
  }

  /* ---- 3. The scrim ---------------------------------------------------- */
  .mnav__scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(6, 6, 8, .62);
    opacity: 0; visibility: hidden;
    z-index: 68;
    cursor: pointer;
    transition: opacity var(--mnav-dur) var(--mnav-ease),
                visibility 0s linear var(--mnav-dur);
  }
  body:has(.mnav__cb:checked) .mnav__scrim,
  html.mnav-open .mnav__scrim {
    opacity: 1; visibility: visible;
    transition: opacity var(--mnav-dur) var(--mnav-ease), visibility 0s;
  }

  /* Scroll must not leak to the page behind an open drawer. :has() carries it
     with no JS; the class is the mobile-nav.js belt-and-braces. */
  body:has(.mnav__cb:checked) { overflow: hidden; }
  html.mnav-open, html.mnav-open body { overflow: hidden; }

  /* ---- 4. The drawer, shared geometry ---------------------------------- */
  .rail,
  .public__nav-links {
    position: fixed;
    top: var(--mnav-h); bottom: 0; left: 0;
    width: var(--mnav-w);
    /* .rail carries `align-self: start` for its life as a grid item, and a grid
       item that becomes position:fixed still resolves its block alignment from
       align-self. With top AND bottom set, `start` re-centred the box: the
       drawer landed at y=28.3 with top computing to 56px. Measured, twice. */
    align-self: auto;
    /* Above the Ask GCS launcher (assistant.css, z-index 60), which is
       position:fixed at the bottom-right and was measured sitting ON TOP of the
       Sign out row of this drawer. Navigation outranks page furniture. */
    z-index: 69;
    background: linear-gradient(180deg, var(--paper-1) 0%, var(--paper-0) 100%);
    border-right: 1px solid var(--hairline);
    box-shadow: 18px 0 48px rgba(0, 0, 0, .5);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-101%);
    visibility: hidden;
    transition: transform var(--mnav-dur) var(--mnav-ease),
                visibility 0s linear var(--mnav-dur);
  }
  body:has(.mnav__cb:checked) .rail,
  .public__nav:has(.mnav__cb:checked) .public__nav-links,
  html.mnav-open .rail,
  html.mnav-open .public__nav-links {
    transform: none;
    visibility: visible;
    transition: transform var(--mnav-dur) var(--mnav-ease), visibility 0s;
  }

  /* ---- 5. PUBLIC: the bar is .public__nav itself ------------------------ */
  /* It stays in flow (sticky, not fixed) so collapsing 172px to 56px costs no
     layout shift and needs no compensating padding anywhere. backdrop-filter
     goes, because a filtered element is a containing block for its fixed
     descendants and would trap the drawer and scrim inside the 56px bar. */
  .public__nav {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: nowrap; row-gap: 0;
    height: var(--mnav-h);
    padding: 0 8px 0 14px;
    background: var(--paper-0);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    z-index: 72;
  }
  .public__brand { flex: 1 1 auto; min-width: 0; gap: 9px; min-height: 44px; }
  .public__brand img { width: 28px; height: 28px; }
  .public__brand > div { min-width: 0; }
  .public__brand-name {
    display: block; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .public__brand-sub { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* The login CTA, kept in the bar and out of the drawer. */
  .public__nav-cta {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; min-height: 44px; padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FBF7EE, var(--action));
    color: var(--btn-ink);
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
    text-decoration: none; white-space: nowrap;
  }
  .public__nav-cta:active { transform: translateY(1px); }

  /* The drawer contents. `justify-content` is reset explicitly: the 430px block
     further up sets `space-between` on this same element for the old wrapped
     row, and on a 756px-tall column that spread four links 172px apart. */
  .public__nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 18px 14px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .mnav__panel-h {
    display: block;
    font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-etch);
    color: var(--ink-3);
    padding: 0 12px 10px;
  }
  .public__nav-links a {
    display: flex; align-items: center;
    min-height: 48px; padding: 0 14px;
    border-radius: 10px;
    font-size: 15px; font-weight: 500;
    color: var(--ink-1);
    min-width: 0; justify-content: flex-start;
  }
  .public__nav-links a.is-here {
    background: linear-gradient(90deg, var(--brass-a08) 0%, transparent 100%);
    color: var(--ink-0);
    box-shadow: inset 2px 0 0 var(--brass-500);
  }
  /* "Enter the desk" is already in the bar; showing it twice on one screen is
     two answers to one question. */
  .public__nav-links a.is-primary { display: none; }

  /* ---- 6. DESK: the rail is the drawer --------------------------------- */
  /* Undoing the `max-width: 900px` block above, which turned the rail into a
     12px-wide horizontal slit. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    height: auto;
    flex-direction: column; align-items: stretch;
    overflow-x: hidden;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 0;
  }
  /* Every group heading and the identity block come BACK — they were the map,
     and the old collapse deleted all five of them.
     The vertical rhythm here is measured, not chosen: at 18px/8px the drawer
     ran 816px against an 812px viewport and pushed Sign out 4px below the fold.
     These values close that 28px and leave the whole desk on one screen. */
  .rail__section {
    display: block;
    padding: 12px 12px 6px;
    font-size: 10px;
  }
  /* `.rail .nav` in desk.css (0,2,0) makes this div its own scroll viewport —
     `flex: 1 1 auto; min-height: 0; overflow-y: auto` — which is right for a
     264px sidebar on a short desktop window and catastrophic here: inside the
     drawer it shrank below its content and CLIPPED the last group, so Account
     and Help were painted nowhere and failed hit-testing while their layout
     boxes still read 149x46. (Same defect class as the 12px-wide slit this
     drawer replaced.) Matched at (0,3,0) so it cannot lose that fight again.
     The drawer itself is the one and only scroller. */
  .rail .rail__navs.nav,
  .rail .rail__navs {
    display: block;
    flex: 0 0 auto;
    min-width: 0; min-height: auto;
    overflow: visible;
  }
  /* Two columns, so all sixteen destinations are on screen at once instead of
     down a scroll. */
  .rail__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    flex-direction: row;
  }
  .rail__nav a {
    min-height: 46px;
    padding: 8px 10px;
    gap: 8px;
    font-size: 13px;
    min-width: 0;
  }
  .rail__nav a > span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rail__nav a svg { flex: none; }
  /* The active marker hangs at left:-20px, which is off the drawer padding box
     here; an inset shadow says the same thing inside the row. */
  .rail__nav a.is-active::before { display: none; }
  .rail__nav a.is-active { box-shadow: inset 2px 0 0 var(--brass-500); }
  /* "You are here" has to look the same in both operator drawers. The operator
     rail's anchors also carry `.nav__item`, and desk.css:348 gives that a brass
     BORDER — so at 375x812 the React drawer marked the open page with an inset
     bar and a wash while the Jinja drawer drew a full outlined box around it.
     Everything else in that rule already loses to this sheet; only border-color
     survived, because nothing here had an opinion about it. Now it does. The
     client desk is untouched: its rows carry no border to begin with. */
  .rail__nav a.is-active { border-color: transparent; }

  .rail__brand { padding: 0 6px 12px; }
  .rail__user {
    display: flex;
    margin-top: 12px; padding-top: 12px;
  }
  /* Ask GCS and Sign out are the last row, unmistakable. */
  .rail__user + .rail__nav,
  .rail__signout { margin-top: 10px; }
  .rail__signout {
    display: flex; align-items: center; gap: 8px;
    min-height: 46px; padding: 8px 10px;
    border-radius: 8px; font-size: 13px;
  }
  /* MEASURED side by side on production 2026-08-04, the two operator drawers
     at 375x812: React said "Sign out", Jinja showed a lone arrow glyph. The
     operator shell's control carries `.signout` as well, and desk.css:403
     (`@media (max-width:860px){ .signout span{display:none} }`) is the rule
     that ate the word — written for the horizontal band this drawer replaced,
     where there was no room for it. There is room now, the client desk says
     the word, and a wordless icon in a menu is not toddler-simple. Loaded
     after desk.css at equal specificity, so this is the one that stands. */
  .rail__signout span { display: inline; }

  /* An open drawer is a modal surface. The Ask GCS launcher is page furniture
     that floats bottom-right on every client page, and it was measured sitting
     on top of the Sign out row. Raising the drawer above it is not enough on
     its own — a launcher hovering over a dimmed page is still a control the
     user can see and cannot use — so it stands down while the drawer is open. */
  body:has(.mnav__cb:checked) .askb__launch,
  html.mnav-open .askb__launch { display: none; }

  /* The bar is fixed, so the work column pays for its height once. */
  .shell__main { padding-top: calc(var(--mnav-h) + 20px); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .rail, .public__nav-links, .mnav__scrim, .mnav__bars i { transition-duration: .01ms; }
}

/* Above the breakpoint none of the above applies, but the drawer geometry must
   be unwound explicitly for a viewport that crosses the line while open. */
@media (min-width: 901px) {
  .rail, .public__nav-links { transform: none; visibility: visible; }
}

/* --- The last two controls on this screen that a thumb could miss ----------
   MEASURED at 375x812 after the pass above: every chip and lane cleared 44px,
   and these two inline text links did not — "Back to your calls" at 143x20 and
   the search bar's own links at 34x22 and 171x22. They are made real boxes on a
   phone (inline-block, so they grow their own line rather than overlaying the
   control above them) and left exactly as they are on a desktop, where the
   pointer is precise and the quiet treatment is the design. */
@media (max-width: 720px) {
  .cf-back { min-height: 44px; align-items: center; }
  .cf-bar { flex-wrap: wrap; }
  .cf-bar .input { min-width: 0; flex: 1 1 100%; min-height: 44px; }
  .cf-bar .btn { min-height: 44px; }
  .cf-bar > a.link { display: inline-block; padding: 12px 2px; }
}

/* --- Owner Approval queue · decision ledger --------------------------------
   Scoped to templates/bl/client_approvals.html's "What you decided" table and
   to nothing else.

   The shared `.ledger` carries min-width:720px (560px under 700px) so the wide
   operator tables scroll inside their card rather than break the page. This
   table has three short columns — a date, a job title and a one-word outcome.
   MEASURED at 375x812 on 2026-08-03: the 560px floor made it 640px wide inside
   a 335px card, which pushed the OUTCOME cell — the only thing an audit trail
   exists to state — to x=669, 294px off the right edge, behind a horizontal
   swipe with no affordance. The dates and titles were readable and the answer
   was not.

   Same scoped-modifier pattern `.ledger--leadbook` already uses above; every
   other ledger on the desk is untouched. */
.shell .ledger--decisions { min-width: 0; width: 100%; table-layout: fixed; }
.shell .ledger--decisions th,
.shell .ledger--decisions tbody td { padding-left: 14px; padding-right: 14px; }
.shell .ledger--decisions th:nth-child(1),
.shell .ledger--decisions tbody td:nth-child(1) { width: 116px; }
.shell .ledger--decisions th:nth-child(3),
.shell .ledger--decisions tbody td:nth-child(3) { width: 124px; }
.shell .ledger--decisions tbody td:nth-child(2) { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .shell .ledger--decisions th,
  .shell .ledger--decisions tbody td { padding-left: 10px; padding-right: 10px; }
  .shell .ledger--decisions th:nth-child(1),
  .shell .ledger--decisions tbody td:nth-child(1) { width: 96px; }
  .shell .ledger--decisions th:nth-child(3),
  .shell .ledger--decisions tbody td:nth-child(3) { width: 108px; }
}

/* --- Owner Approval queue · thumb-sized controls on a phone ----------------
   Same treatment, same reason, as the Call Files block above.
   MEASURED at 375x812 on 2026-08-03: every verb on a decision card rendered
   42px and the "What you decided" jump link 22px. Scoped to this queue's own
   list id and its one trail link; the desktop treatment is unchanged, where the
   pointer is precise and the sheet's default button size is the design. */
@media (max-width: 720px) {
  .shell #approvals-list .btn { min-height: 44px; }
  .shell [data-testid="approvals-trail-link"] { display: inline-block; padding: 11px 2px; }
}


/* ============================================================================
   GCS TOUCH LAYER, PART 2 — the logged-in desk, and the controls the phone
   keyboard fights with.
   ---------------------------------------------------------------------------
   Part 1 (the "touch-target + control-design appendix" above) closed the
   fourteen PUBLIC routes. It never reached the desk, because every desk rule
   in desk.css is written under `.shell` — (0,2,0) — and Part 1's rules are
   (0,1,0). Specificity, not order, was deciding, so a `.btn` that is 44px on
   /pricing was 42px on /client/today.

   MEASURED 2026-08-03, Chromium 375x812 with touch, seventeen desk routes and
   seventeen public routes, with document.elementFromPoint() probed pixel by
   pixel out from each control's centre — the area that actually ACTIVATES the
   control, not getBoundingClientRect. 643 controls; 62 still under 44px, every
   one of them on the desk, and 46 text fields under 16px:

     * every .btn on the desk            42px  (computed min-height 0 — a
                                               `.shell .btn` rule outranked the
                                               bundle's --btn-min-h token)
     * every .btn--sm                    35px
     * .link / .textlink                 22px  ("Back to your desk", "Open Lead
                                               Finder", and the intake URL the
                                               owner is told to copy)
     * .backlink                         40px
     * the support address on /client/help 19px
     * twenty radios on /client/settings  17x17, raw browser default — and one
       of them is the AUTHORITY switch (automatic / review / disabled) that
       decides whether the desk may act without asking. A 17px unstyled dot is
       not an acceptable control for that decision at any width.
     * 46 inputs/selects/textareas at 14-15px. Below 16px iOS zooms the whole
       page in on focus and does not zoom back out — the owner is left on a
       viewport they never asked for, mid-form.

   Three rules below, in this order: the control redesign (all viewports — a
   raw browser default is a design defect at every width), the desk touch
   geometry, and the type floor that stops the zoom. No colour, radius or type
   token is redefined and no padding moves; the desktop composition the owner
   accepted is untouched.
   ========================================================================= */

/* ---- 1. Checkboxes and radios, everywhere -------------------------------
   Part 1 redrew the ones inside `label.consent` (the public forms). The desk
   has its own, reached by `.shell input[type=checkbox]` in desk.css:492, which
   only set 17x17 + accent-color — and `accent-color` tints a browser default;
   it cannot give it a size, a border, a radius, a checked state or a focus
   ring. Same component, same geometry, now on every surface. The `.consent`
   block above stays authoritative for the public forms (0,2,1 beats 0,1,1). */
input[type="checkbox"]:not(.mnav__cb),
input[type="radio"]:not(.mnav__cb),
.shell input[type="checkbox"]:not(.mnav__cb),
.shell input[type="radio"]:not(.mnav__cb) {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 7px;
  background: var(--paper-1);
  box-shadow: var(--edge-top);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
input[type="radio"]:not(.mnav__cb),
.shell input[type="radio"]:not(.mnav__cb) { border-radius: 50%; }

/* The 44px hit area is a transparent pseudo on the input itself, so the VISUAL
   control stays 22px while elementFromPoint() resolves to the input across the
   whole square. inset:-12px = 46px; the tightest row it lands in is the
   authority segmented control, whose radios sit 96px apart, so it can never
   reach a neighbour. */
input[type="checkbox"]:not(.mnav__cb)::before,
input[type="radio"]:not(.mnav__cb)::before,
.shell input[type="checkbox"]:not(.mnav__cb)::before,
.shell input[type="radio"]:not(.mnav__cb)::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}

/* The tick is drawn, not typed — the one asset that cannot be made from the
   tokens, so it is an inline SVG in the button-ink colour. */
input[type="checkbox"]:not(.mnav__cb)::after,
.shell input[type="checkbox"]:not(.mnav__cb)::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  background: center / 13px 13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.5l3.1 3.2 6.2-6.8' fill='none' stroke='%23191307' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(.55);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
input[type="radio"]:not(.mnav__cb)::after,
.shell input[type="radio"]:not(.mnav__cb)::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--btn-ink);
  opacity: 0;
  transform: scale(.4);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
input[type="checkbox"]:not(.mnav__cb):hover,
input[type="radio"]:not(.mnav__cb):hover,
.shell input[type="checkbox"]:not(.mnav__cb):hover,
.shell input[type="radio"]:not(.mnav__cb):hover { border-color: var(--brass-a45); }
input[type="checkbox"]:not(.mnav__cb):checked,
input[type="radio"]:not(.mnav__cb):checked,
.shell input[type="checkbox"]:not(.mnav__cb):checked,
.shell input[type="radio"]:not(.mnav__cb):checked {
  background: linear-gradient(180deg, var(--brass-300) 0%, var(--brass-500) 100%);
  border-color: var(--brass-500);
}
input[type="checkbox"]:not(.mnav__cb):checked::after,
input[type="radio"]:not(.mnav__cb):checked::after,
.shell input[type="checkbox"]:not(.mnav__cb):checked::after,
.shell input[type="radio"]:not(.mnav__cb):checked::after { opacity: 1; transform: scale(1); }
input[type="checkbox"]:not(.mnav__cb):focus-visible,
input[type="radio"]:not(.mnav__cb):focus-visible,
.shell input[type="checkbox"]:not(.mnav__cb):focus-visible,
.shell input[type="radio"]:not(.mnav__cb):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brass-a28);
}
input[type="checkbox"]:not(.mnav__cb):disabled,
input[type="radio"]:not(.mnav__cb):disabled,
.shell input[type="checkbox"]:not(.mnav__cb):disabled,
.shell input[type="radio"]:not(.mnav__cb):disabled { opacity: .45; cursor: not-allowed; }

/* The authority switch answers its own state instead of leaning on a
   server-rendered `.is-active` class, and its chip is a 44px target in its own
   right — the radio's hit area and the chip's are the same decision. */
.shell .tabs--authority .tabs__opt { min-height: 44px; }
.shell .tabs--authority .tabs__opt:has(input:checked),
.shell .tabs--authority .tabs__opt.is-active { border-color: var(--brass-a45); }
.shell .tabs--authority .tabs__opt:focus-within { border-color: var(--brass-a45); }

/* ---- 2. Desk touch geometry at phone width / coarse pointers -------------
   `.shell` on every selector so these outrank desk.css instead of tying with
   it. Nothing here changes a padding, a colour or a font — min-height only, so
   the button that reads right at 1280px reads identically at 375px and is
   simply tall enough to hit. */
@media (max-width: 860px), (pointer: coarse) {
  .shell .btn,
  .shell .btn--sm,
  .shell button.btn,
  .shell a.btn { min-height: 44px; }

  /* Text links that are controls, not prose: the desk's own `.link` and
     `.textlink`, the page backlink, and the folder/segment rows. */
  .shell .link,
  .shell .textlink,
  .shell .backlink,
  .shell .cf-count,
  .shell .subnav__item,
  .shell .seg__btn,
  .shell .mailbox__folder,
  .shell .mailbox__label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* A `.link` carrying a URL the owner is told to copy must still wrap;
     inline-flex alone would push it off the card. */
  .shell .link.u-breakword { flex-wrap: wrap; max-width: 100%; }

  /* Addresses and numbers are always controls. inline-block, not inline-flex,
     so a long address still wraps inside its column and the line box GROWS to
     hold the padding — an overlay hit area would instead sit on top of the
     line above it and steal that line's taps, which is the defect, not the
     fix. */
  .shell a[href^="mailto:"],
  .shell a[href^="tel:"],
  a[href^="mailto:"],
  a[href^="tel:"] {
    display: inline-block;
    padding: 13px 0;
    max-width: 100%;
  }
  .shell a.chip,
  .shell button.chip,
  /* The operator desk's filter chips. `.chip-select` measured 33px on
     /admin/accounts (fourteen of them, the only way to filter the book) and on
     /admin/lead-finder and /admin/sales-closer. It is always an <a>, never a
     static badge, so it is always a control. */
  .shell .chip-select,
  .shell .acct-filter a,
  .shell .chip-row a { min-height: 44px; display: inline-flex; align-items: center; }

  /* A label that wraps a checkbox or radio is part of that control's target.
     min-height only, so an items-start consent row keeps its alignment. */
  .shell label:has(> input[type="checkbox"]:not(.mnav__cb)),
  .shell label:has(> input[type="radio"]:not(.mnav__cb)) { min-height: 44px; }
}

/* ---- 3. The 16px floor on text entry -------------------------------------
   Safari on iOS zooms the viewport in whenever a focused field's computed
   font-size is under 16px, and it does not zoom back out on blur. Every field
   on the desk measured 14-14.5px and every field on /checkout and /build 15px,
   so filling in a service address or an agent brief left the owner stranded on
   a viewport they never asked for. 16px is a floor, not a new type scale: it
   applies at phone width only, so the dense operator field at 1280px is
   unchanged. */
@media (max-width: 860px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  .binput,
  .btextarea,
  .shell select,
  .shell textarea,
  .shell .input input,
  .shell .binput,
  .shell .btextarea,
  /* desk.css writes its field rule as
     `.shell input:not([type=checkbox]):not([type=radio]):not([type=hidden])
      :not([type=submit]):not([type=button])` — five attribute selectors inside
     :not(), which each COUNT, so that rule is (0,6,1). A `.shell input` floor
     is (0,1,1) and never reached it; the search field on /client/calls and
     every .binput on /client/agent-training stayed at 14px through the first
     pass. Matched here selector for selector, so order decides and the later
     sheet (this one) wins. */
  .shell input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),
  .shell .form-field input,
  .shell .form-field select,
  .shell .form-field textarea { font-size: 16px; }

  /* A comfortable box to go with the type, and a focus state that is visible
     without a hover to explain it. */
  .shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .shell select,
  .shell textarea { min-height: 44px; }
  .shell textarea { min-height: 96px; }
  .shell input:focus-visible,
  .shell select:focus-visible,
  .shell textarea:focus-visible {
    outline: none;
    border-color: var(--brass-a45);
    box-shadow: 0 0 0 3px var(--brass-a14);
  }
  /* Placeholders must not be clipped by the tighter phone column. */
  .shell input::placeholder,
  .shell textarea::placeholder,
  .binput::placeholder,
  .btextarea::placeholder { text-overflow: ellipsis; }
}


/* ============================================================================
   MOBILE TYPE SCALE + VERTICAL RHYTHM  (appendix, 2026-08-03)
   ---------------------------------------------------------------------------
   THE DEFECT, MEASURED IN CHROME AT 375x812 BEFORE THIS BLOCK:

     route                    page height   phone screens   h1
     /                          3,787px         4.66        44px
     /pricing                   5,334px         6.57        44px
     /services                  2,787px         3.43        44px
     /roi                       3,208px         3.95        44px
     /how-it-works              4,105px         5.06        44px
     /legal                     6,168px         7.60        44px
     /checkout?plan=growth      5,207px         6.41        44px
     /client/today              4,834px         5.95        40px

   Two causes, one root. FIRST: every heading token in this sheet is a clamp
   whose FLOOR is a desktop value — `--pub-h1-size: clamp(44px, 6vw, 92px)`
   resolves to 44px at 375px because 6vw is only 22px there, so the floor wins
   and a phone gets a desktop headline. At 44px in Fraunces a 375px column
   holds about fifteen characters, so a five-word headline takes four lines and
   180px of the first screen. SECOND: the section rhythm is desktop-scaled at
   every width — .pricing__hero pads 120px/60px, .cinema__section 80px,
   .cinema__cta 140px, .plan 40px/32px, .plans margins 100px — and there was
   almost no max-width media query anywhere in the sheet to say otherwise. That
   is what made /pricing 6.7 screens tall with its first purchase button 2,010px
   down: two and a half screens of scrolling to reach the thing the page sells.

   THE METHOD, and why it is not a breakpoint jump:

   Every size below stays a clamp. Only the FLOOR moves down; the vw slope and
   the ceiling are untouched, so the value is fluid all the way and desktop is
   arithmetically unchanged above the width where the slope already exceeded the
   old floor (--pub-h1-size is identical at and above 733px, --h1-size at and
   above 800px, --fs-display at and above 695px, --pub-h2-size at and above
   933px). Nothing "snaps" at a breakpoint; the headline simply keeps shrinking
   below the width where it used to stop.

   Spacing is the one thing that does take a media query, at 768px, because
   padding is not type: a section's breathing room is a layout decision, not a
   ramp, and a fluid section padding produces a different-looking page at every
   width instead of one system at two.

   SCOPE NOTE: this block owns the type scale and the vertical rhythm. Touch
   geometry, the nav, and the two lead registers (`.ledger--leadbook`,
   `.ledger--finder`) are handled by their own appendices above and are not
   re-stated here.
   ========================================================================= */

/* ---- 1. THE SCALE -------------------------------------------------------
   Floors only. Each comment records the width at and above which the value is
   bit-identical to what shipped before. */
:root {
  --fs-display:   clamp(2rem, 7.6vw, 6.9rem);      /* identical >= 695px */
  --fs-h2-serif:  clamp(1.45rem, 3.3vw, 3rem);     /* identical >= 703px */
  --fs-outcome:   clamp(1.35rem, 2.7vw, 2.5rem);   /* identical >= 807px */
  --fs-metric:    clamp(1.9rem, 3.4vw, 3.6rem);    /* identical >= 1082px */
  --fs-metric-lg: clamp(2.15rem, 4vw, 4.2rem);     /* identical >= 1120px */
  --h1-size:      clamp(26px, 5vw, 64px);          /* identical >= 800px */
  --pub-h1-size:  clamp(34px, 6vw, 92px);          /* identical >= 733px */
  --pub-h2-size:  clamp(22px, 3vw, 44px);          /* identical >= 933px */
}

/* Leading is the other half of a type scale. 0.98 is a display line-height for
   a one-line desktop headline; the same headline wraps to three lines on a
   phone, where lines that tight collide on the descenders. Measure follows:
   at 34px in this face a 339px column carries ~20 characters, which is the
   display band; body copy below lands at 44-50 characters, inside the 45-75
   target for a 375px viewport. */
@media (max-width: 768px) {
  :root {
    --pub-h1-lh: 1.06;
    --pub-h2-lh: 1.16;
    --h1-lh:     1.08;
  }
}

/* Headings that carry their own size rather than a token. Same treatment:
   the floor comes down, the slope and ceiling stay, so each is unchanged at
   and above the noted width. */
.cinema__cta-title  { font-size: clamp(32px, 6.5vw, 96px); }   /* >= 739px */
.cinema__quote-text { font-size: clamp(22px, 3.5vw, 48px); }   /* >= 800px */
.move__title        { font-size: clamp(24px, 4vw, 56px); }     /* >= 900px */
.cstat__v           { font-size: clamp(30px, 6vw, 88px); }     /* >= 800px */
.pricing__faq-title { font-size: clamp(24px, 3.5vw, 48px); }   /* >= 914px */
.build__success h1  { font-size: clamp(26px, 5vw, 60px); }     /* >= 760px */
.doc__siblings-t    { font-size: clamp(24px, 3.6vw, 44px); }   /* >= 889px */
.catalog__group-title { font-size: clamp(21px, 2.1vw, 26px); } /* >= 1238px */
.login__title       { font-size: clamp(27px, 3.6vw, 36px); }   /* >= 1000px */
.plan__name         { font-size: clamp(23px, 2.5vw, 32px); }   /* >= 1280px */
.plan__price .amt   { font-size: clamp(38px, 4.4vw, 56px); }   /* >= 1273px */
.plan__price .cur   { font-size: clamp(21px, 2.2vw, 28px); }
.roi__result-big    { font-size: clamp(38px, 4.4vw, 56px); }
.roi__result-big .cur { font-size: clamp(23px, 2.5vw, 32px); }
.feat__title        { font-size: clamp(19px, 1.9vw, 24px); }
.fig__v             { font-size: clamp(24px, 2.5vw, 32px); }
.move__mock-v       { font-size: clamp(24px, 2.5vw, 32px); }
.faq summary        { font-size: clamp(15.5px, 1.45vw, 18px); }
/* `.callout__title` is the desk's locked-account heading. On a PUBLIC surface
   `.public .callout__title` (0,2,0) already routes it through the h1 token and
   still does — this only moves the desk's own copy. */
.callout__title     { font-size: clamp(26px, 4.6vw, 44px); }

/* Lede and body copy. Same rule, smaller numbers: nothing here drops below
   15px, which is the floor for comfortable reading on a phone. */
.public__hero .lede { font-size: clamp(16px, 1.5vw, 19px); }
.pricing__hero-lede { font-size: clamp(15.5px, 1.45vw, 18px); }
.cinema__lede       { font-size: clamp(15.5px, 1.5vw, 22px); }
.cinema__cta-sub    { font-size: clamp(15.5px, 1.35vw, 17px); }
.move__body         { font-size: clamp(15.5px, 1.35vw, 17px); }
.doc__lede          { font-size: clamp(15.5px, 1.4vw, 20px); }
.doc__prose p       { font-size: clamp(15px, 1.25vw, 15.5px); }
.callout__body      { font-size: clamp(15px, 1.3vw, 16px); }
.aside__d           { font-size: clamp(14.5px, 1.2vw, 15px); }

/* ---- 2. THE RHYTHM ------------------------------------------------------
   One breakpoint, 768px, for every surface. The numbers are the desktop values
   divided by roughly two and a half — enough to end the scrollfest, not so
   little that the page reads as a cramped list. */
@media (max-width: 768px) {

  /* --- Public shell --------------------------------------------------- */
  .public__wrap { padding: 34px 18px 52px; }
  .public__hero { margin-bottom: 32px; }
  .public__hero .h1 { margin-top: 12px; }
  .public__hero .lede { margin-top: 14px; }
  .public__hero-actions { margin-top: 20px; gap: 10px; }
  /* Two hero buttons on one 339px line are 160px each — a real thumb target
     and no wrap, instead of one full-width button and one orphan. */
  .public__hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .public__foot { padding: 24px 18px; gap: 14px; }

  /* --- Home (the cinematic surfaces) ---------------------------------- */
  /* `min-height: 90vh` reserved a whole screen for the hero and then padded
     inside it, so the shield, headline, lede and both buttons were pushed past
     the fold on a 812px screen. The hero is now as tall as its content. */
  .cinema__hero { min-height: 0; padding: 36px 20px 40px; }
  .cinema__shield { margin-bottom: 16px; }
  .cinema__shield svg, .cinema__shield img { width: 64px; height: 64px; }
  .cinema__title { margin: 0 0 14px; }
  .cinema__lede { margin: 0 auto 22px; }
  /* A "scroll" hint is desktop furniture. On a phone it is 40px of the first
     screen spent telling a thumb what a thumb already knows. */
  .cinema__scroll { display: none; }
  .cinema__stats { padding: 26px 20px; gap: 16px; }
  .cstat__v { margin-bottom: 4px; }
  .cinema__section { padding: 38px 20px; }
  .cinema__section-head { margin-bottom: 20px; gap: 12px; }
  .moves { gap: 28px; }
  .move { gap: 16px; }
  /* 4:3 at a 335px column is a 251px block of decoration between every two
     paragraphs of copy; 16:10 is 209px and reads the same. */
  .move__visual { aspect-ratio: 16 / 10; }
  .move__mock { padding: 16px 18px; min-width: 76%; }
  .move__num { margin-bottom: 10px; }
  .move__title { margin: 0 0 12px; }
  .cinema__quote { padding: 38px 20px; }
  .cinema__quote::before { font-size: 190px; top: -18px; }
  .cinema__quote-text { margin: 0 auto 18px; }
  .cinema__cta { padding: 44px 20px; }
  .cinema__cta-title { margin: 0 0 16px; }
  .cinema__cta-sub { margin: 0 auto 22px; }

  /* --- Pricing --------------------------------------------------------- */
  .pricing__hero { padding: 34px 20px 22px; }
  .pricing__hero-title { margin: 12px 0 14px; }
  .pricing__hero-lede { margin: 0 auto 20px; }
  .pricing__toggle { margin-bottom: 22px; }
  .plans { gap: 14px; margin: 0 auto 40px; padding: 0 18px; }
  .plan { padding: 22px 18px 20px; }
  /* The flagship card lifts 8px on a desktop grid to sit proud of its
     neighbours. In a single stacked column there are no neighbours to sit
     proud of — it just opens an 8px seam and shifts the card off its rhythm. */
  .plan--flag, .plan--flag:hover, .plan:hover { transform: none; }
  .plan__name { margin-bottom: 4px; }
  .plan__tagline { margin-bottom: 14px; min-height: 0; }
  .plan__price { margin-bottom: 4px; }
  .plan__note { margin: 4px 0 14px; }
  .plan__feats li { padding: 8px 0; font-size: 13.5px; }
  .plan__cta-wrap { margin-top: 16px; padding-top: 14px; }
  .pricing__proof { padding: 38px 20px; }
  .pricing__proof-title { margin: 0 auto 20px; }
  .pricing__proof-grid { gap: 12px; }
  .pricing__proof-tile { padding: 16px 18px; }
  .pricing__faq { padding: 38px 20px 44px; }
  .pricing__faq-title { margin: 0 0 18px; }
  .faq summary { padding: 14px 18px; gap: 12px; }
  .faq__body { padding: 0 18px 16px; }

  /* --- Legal documents and the registry -------------------------------- */
  .doc__hero { padding: 34px 18px 26px; }
  .doc__crumb { margin-bottom: 14px; }
  .doc__title { margin: 0 0 14px; }
  .doc__lede { margin: 0 auto 18px; }
  .doc__body { padding: 26px 18px 34px; gap: 20px; }
  .doc__section { padding: 24px 0; }
  .doc__section-h { margin-bottom: 14px; gap: 12px; }
  .doc__prose p { margin: 0 0 13px; }
  .doc__chip { padding: 12px 14px; }
  .doc__siblings { padding: 32px 18px; }
  .doc__siblings-h { margin: 0 auto 18px; }
  .doc__siblings-grid { gap: 10px; }
  .doc__sibling { padding: 16px; }
  .doc-index__section { padding: 24px 18px 0; }
  .doc-index__section-h { margin-bottom: 16px; }
  .doc-index__section .doc-index__grid { padding: 16px 0 26px; }
  .doc-index__grid { padding: 18px 18px 44px; gap: 10px; }
  .doc-index__card { padding: 18px; }

  /* --- ROI calculator --------------------------------------------------- */
  .roi { gap: 16px; margin-top: 22px; }
  .roi__form, .roi__result { padding: 20px 18px; }
  .roi__field { margin-bottom: 14px; }
  /* Sticky is a two-column behaviour. Stacked, it pins the answer over the
     inputs the visitor is still filling in. */
  .roi__result { position: static; }
  .roi__result-note { margin-top: 14px; }

  /* --- Shared public blocks (services / how-it-works / anything on .sec) -- */
  .feats { gap: 12px; margin-top: 24px; }
  .feat { padding: 20px 18px; }
  .feat__num { margin-bottom: 12px; }
  .feat__title { margin-bottom: 8px; }
  .sec { margin-bottom: 30px; }
  .sec-head { margin-bottom: 16px; gap: 12px; }
  .split { gap: 14px; }
  .card { padding: 18px; }

  /* --- Build wizard / checkout ------------------------------------------ */
  .build__intro { padding: 30px 18px 16px; }
  .build__intro-title { margin: 0 auto 10px; }
  .build__aside { padding: 26px 18px; }
  .build__aside-shield { width: 56px; height: 56px; margin-bottom: 18px; }
  .aside__d { margin: 0 0 20px; }
  .trust { margin: 0 0 18px; gap: 8px; }
  .build__form { padding: 24px 18px 32px; }
  .stepper { margin-bottom: 22px; }
  .build__panel > * + * { margin-top: 14px; }
  .build__nav { margin-top: 20px; padding-top: 16px; }
  .review { margin: 4px 0 14px; }
  .plan-opt { padding: 12px 14px; gap: 12px; }
  .consent { padding: 12px 14px; }

  /* --- Operator / client desk ------------------------------------------- */
  /* LONGHANDS, NOT THE SHORTHAND. `.shell__main` also carries a
     `padding-top: calc(var(--mnav-h) + ...)` that pays for the fixed mobile
     bar; a `padding` shorthand here silently resets that to 18px and drops
     the bar onto the first control of every desk page. Only the three sides
     this block is actually about are set. */
  .shell__main { padding-right: 16px; padding-bottom: 44px; padding-left: 16px; }
  .page-head { padding-bottom: 18px; margin-bottom: 22px; gap: 12px; }
  .eyebrow { margin-bottom: 8px; }
  .lede { margin-top: 10px; }
  .topbar { margin-bottom: 18px; padding: 10px 14px; }
  .figs { gap: 10px; margin-bottom: 22px; }
  .fig { padding: 14px 16px; }
  .fig::before { left: 16px; right: 16px; }
  .fig__k { margin-bottom: 6px; }
  .rec { padding: 14px 16px; }
  .timeline { gap: 10px; }
  .callout { padding: 40px 20px; }
  .callout__body { margin: 0 auto 22px; }
  .steps .step { padding: 12px 0; }
  .chips-select { margin-bottom: 16px; }

  /* --- Honest mobile layouts for the side-by-side shapes ----------------- */
  /* A `max-content 1fr` definition list gives the term column whatever its
     longest label needs and squeezes the value into the remainder. At 375px
     that leaves values like a phone number or an address wrapping in a 150px
     gutter. Term over value, full width, is the honest phone rendering. */
  .dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .dl dt { padding-top: 12px; }
  .dl dt:first-child { padding-top: 0; }
  /* Same shape, same fix: a question column and an answer column become a
     question with its answer under it. */
  .qa { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; }
  /* A two-column compose row puts a 100px uppercase label beside a field on a
     375px screen. The label goes above its field. */
  .compose-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 16px; }
}

/* The tightest phones. Only the values that still crowd at 360-375px, so a
   larger phone keeps the roomier step above. */
@media (max-width: 400px) {
  .public__wrap { padding-left: 16px; padding-right: 16px; }
  .plans { padding: 0 16px; }
  .plan { padding: 20px 16px 18px; }
  .doc__body { padding-left: 16px; padding-right: 16px; }
  .shell__main { padding-left: 14px; padding-right: 14px; }
  .move__mock { min-width: 84%; padding: 14px 16px; }
}


/* ---- 3. THE ANSWER ON SCREEN -------------------------------------------
   Length was only half the defect. MEASURED after the rhythm pass above, at
   375x812: /pricing was down to 3,764px but the first plan's purchase button
   still sat at y=1,389 — the visitor had to scroll past a twelve-item feature
   list to reach the button the page exists for, on both cards.

   On a desktop grid the card reads name -> price -> what you get -> buy,
   because the whole card is in view at once and the button is the end of an
   argument you have already read. Stacked on a phone nothing is in view at
   once, so the same order buries the button. Below 768px the card reads
   name -> price -> BUY -> what you get: the decision is offered at the price,
   and the feature list becomes the justification underneath it, which is what
   every card below the first one is scrolled to anyway.

   Flex `order` only — the DOM order, and therefore the reading order for a
   screen reader and the tab order for a keyboard, is unchanged... which is
   exactly why each item needs an explicit order: a single `order:-1` on the
   button would also lift it above the plan's own name. */
@media (max-width: 768px) {
  .plan__flag     { order: 0; }
  .plan__name     { order: 1; }
  .plan__tagline  { order: 2; }
  .plan__price    { order: 3; }
  .plan__note     { order: 4; }
  .plan__cta-wrap {
    order: 5;
    margin-top: 14px;
    padding-top: 0;
    border-top: none;
  }
  .plan__feats {
    order: 6;
    flex: 0 1 auto;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
  }
  /* The list is now the justification, not the headline: it reads one step
     denser so twelve promises are a paragraph, not a page. */
  .plan__feats li { padding: 6px 0; font-size: 13px; line-height: 1.45; gap: 10px; }
  .plan__feats li:first-child { padding-top: 0; }
  .plan__feats svg { width: 14px; height: 14px; margin-top: 2px; }
}

/* ---- 4. THE LAST OF THE DESKTOP RHYTHM ---------------------------------
   Second pass over the three surfaces that were still long after the first:
   /pricing (4.64 screens), /legal (6.62) and /checkout (5.85). Everything here
   is padding, gap and one icon size — no content is hidden, clipped or folded
   away, on any of them. */
@media (max-width: 768px) {

  /* /pricing — the proof band and the FAQ under the cards. */
  .pricing__hero { padding: 28px 20px 18px; }
  .plans { gap: 12px; margin-bottom: 32px; }
  .pricing__proof { padding: 30px 20px; }
  .pricing__proof-title { margin: 0 auto 18px; }
  .pricing__proof-grid { gap: 10px; }
  .pricing__proof-tile { padding: 14px 16px; }
  .pricing__proof-tile svg { margin-bottom: 8px; }
  .pricing__proof-tile-body { font-size: 12.5px; }
  .pricing__faq { padding: 30px 20px 36px; }

  /* /legal — a registry of fifteen documents. It is a list of real documents
     and stays a list of real documents; the card just stops being a poster.
     The 40px icon medallion and the 26px serif title are desktop-grid
     furniture at a width where the card is the full column. */
  .doc-index__card { padding: 15px 16px; }
  .doc-index__card-h { margin-bottom: 10px; gap: 10px; }
  .doc-index__card-ic { width: 32px; height: 32px; border-radius: 8px; }
  .doc-index__card-t { font-size: clamp(19px, 2vw, 26px); }
  .doc-index__card-tag { font-size: 13px; line-height: 1.45; }
  .doc-index__card-foot { padding-top: 12px; margin-top: 12px; }
  .doc-index__note { padding-top: 8px; padding-bottom: 32px; }

  /* /checkout and the build wizard — the fields themselves, not the copy. */
  .field__label { margin-bottom: 6px; }
  .field__hint { margin-top: 4px; }
  .review__row { padding: 8px 0; }
  .plan-opt { padding: 11px 13px; }
  .plan-opt__name { font-size: 16.5px; }
  .build__aside { padding: 22px 18px; }
  .build__aside-shield { margin-bottom: 14px; }
  .trust li { font-size: 13px; }
  .meter { padding-top: 16px; }

  /* The foot is on every one of these pages, so its padding is paid twelve
     times. The link row keeps its 44px touch rows (that appendix owns them);
     only the block's own frame comes in. */
  .public__foot { padding: 20px 16px; gap: 12px; }
}


/* ============================================================================
   GCS TOUCH LAYER, PART 2b — nothing fixed may sit on top of a control.
   ---------------------------------------------------------------------------
   The mobile bar (`.mnav`, above) is `position: fixed`, 56px tall, z-index 62,
   and its own block pays for that once with

       .shell__main { padding-top: calc(var(--mnav-h) + 20px); }

   A later spacing block in this sheet then writes

       .shell__main { padding: 18px 16px 44px; }

   — the PADDING SHORTHAND, which resets padding-top to 18px and silently
   cancels the offset. Both selectors are (0,1,0), so the last one written wins,
   and every desk page lost 58px of clearance under a bar that is still there.

   MEASURED 2026-08-03 at 375x812, /client/leakage-report, scrollY 0: the
   "Back to Results" control sits at y=18..62 and document.elementFromPoint() at
   its centre (80, 40) returns `span.mnav__brand-sub`. The bar owns the tap. The
   only control on that page for getting back was dead — not small, not hidden,
   DEAD — and it was dead at first paint, before the owner scrolled anything.

   `.shell .shell__main` is (0,2,0). That is the point: it outranks every bare
   `.shell__main` rule in this sheet whatever order they are written in, so a
   later shorthand cannot take the clearance away again. Only the top is set;
   the newer horizontal and bottom padding is left exactly as written.
   ========================================================================= */
@media (max-width: 900px) {
  /* Same value the .mnav block itself intends (`+ 20px`), so when both
     rules are present they agree to the pixel and nothing shifts. */
  .shell .shell__main { padding-top: calc(var(--mnav-h, 56px) + 20px); }
  /* An in-page jump must land below the bar too, not behind it. */
  .shell,
  html:has(.mnav) { scroll-padding-top: calc(var(--mnav-h, 56px) + 12px); }
}

/* ---- 5. THE DESK'S OWN RHYTHM ------------------------------------------
   MEASURED at 375x812 after the passes above: /client/today was still 4,394px
   because three of its blocks keep desktop geometry when they stack —
   `.today-focus` holds a 40px column gap and a 56px tail with nothing beside
   it any more, `.aside-band` (desk.css) keeps a 58px top margin and 22px card
   padding, and `.decision` stays a three-column row whose 88px money column
   plus an actions cluster leaves the note about 150px of a 339px line.

   `.decision` here is deliberately UNSCOPED and therefore one specificity step
   below the `[data-testid="client-next-action"] .decision` rule above, so the
   prepared-draft card on /client/today keeps the treatment that block measured
   for it and every OTHER decision row on the desk gets this one: the money
   stays beside the name (that is the desk's reading order) and the verbs move
   to their own full-width line, where a thumb can hit them. */
@media (max-width: 768px) {
  .today-focus { gap: 18px; margin-bottom: 26px; }
  /* Sticky is a two-column behaviour; stacked it pins the aside over the
     primary column the owner is reading. */
  .today-focus__aside { position: static; }

  .decision {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 14px;
    padding: 14px 16px;
    align-items: start;
  }
  .decision__value { min-width: 0; font-size: 17px; }
  .decision__actions { grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; }
  .decision__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* .aside-band lives in desk.css, which every desk page loads BEFORE this
     sheet; matching its (0,2,0) selector is what makes these win. */
  .aside-band { margin-top: 24px; gap: 12px; }
  .aside-band .aside__block { padding: 16px; }
  .aside-band .a-k { margin-bottom: 8px; }

  .records .rec { padding: 14px 16px; }
  .controlbar { gap: 8px; margin-bottom: 14px; }

  /* The three spacing utilities this sheet ships. They are named for a desktop
     step; on a phone the step is smaller, so the utility follows the system
     instead of hard-coding 32px into every surface that uses it. */
  .mt-32 { margin-top: 20px; }
  .mb-32 { margin-bottom: 20px; }
  .mb-16 { margin-bottom: 12px; }
}

/* ---- 6. THE DESK COMPONENTS THAT LIVE IN desk.css -----------------------
   Every client and operator page loads static/desk.css BEFORE this sheet, and
   desk.css restates four of these components at `.shell X` (0,2,0). The type
   scale above could not reach them, so at 375px the desk's figure tiles were
   still rendering a 38px numeral in a 24px-padded card, one per row.

   Matched selector by selector here rather than edited there, so the change
   travels with the rest of the mobile system and desk.css keeps a single
   author while the desk surfaces are being worked on in parallel.

   `.shell .fig__v` gets the same floors-only treatment as every other size in
   this block: identical at and above 1188px, fluid below it. */
.shell .fig__v,
.shell .fig--hero .fig__v,
.shell .fig--warn .fig__v { font-size: clamp(26px, 3.2vw, 52px); }

@media (max-width: 768px) {
  .shell .card { padding: 16px 18px; }
  .shell .fig,
  .shell .fig:first-child { padding: 14px 16px; }
  .shell .fig__v { margin: 8px 0 6px; }
  .shell .figs { gap: 10px; }
  .shell .rec { padding: 14px 16px; gap: 12px; }
  .shell .foot { margin-top: 28px; padding-top: 18px; }
}

/* A figure tile is a number and a caption. One per row spends a full phone
   screen on four numbers before the page's actual content begins — measured
   on the desk's own registers, four stacked tiles are ~660px. Two-up is ~330px
   and still gives each number a 155px column, which is wider than the longest
   figure the desk renders. This matches what `.figs--finder` above already
   concluded independently for the Lead Finder band. */
@media (max-width: 520px) {
  .shell .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell .figs .fig__k { font-size: 10px; }
  .shell .figs .fig__note { font-size: 11px; line-height: 1.35; }
}

/* ============================================================================
   PUBLIC SURFACES — "no plaintext" pass (2026-08-03)

   WHY THIS BLOCK EXISTS
   Measured on production at 1280px AND 375px with a computed-style detector
   over every element that directly owns a text node: 139 elements per width
   (278 across both) rendered with NO deliberate treatment of their own — they
   inherited whatever a distant ancestor happened to set, or fell back to the
   user agent. Three mechanisms produced all of them:

     1. AN UNCLASSED WRAPPER SPAN. `label.consent > span > b|a`,
        `.mode-hint > span > strong` and `ul.plan__feats > li > span` all put a
        bare <span> between the styled block and the text, so the text-bearing
        element was two levels from anything intentional. The b/a WERE reached
        by element selectors, but nothing named the span or the li, and nothing
        specified the reading text itself.
     2. A NATIVE CONTROL. `select.binput` never cleared `appearance`, so the
        signup wizard's five dropdowns painted the operating system's own grey
        widget on an obsidian page. Checkbox/radio inherited Arial and
        rgb(0,0,0) from the UA sheet.
     3. INLINE STYLE INSTEAD OF A CLASS. The /roi result column carried
        seventeen `style="..."` attributes and not one class, so every figure,
        label and disclaimer on the page's most-read panel was a one-off.

   Nothing below invents a new visual language: every value is an existing
   token (--ink-*, --brass-*, --fs-*, --font-*, --hairline) and every size is
   one the neighbouring rule already used. Content is unchanged — this block
   NAMES what was anonymous and specifies what was inherited.
   ========================================================================= */

/* ---- 1 · The consent card's reading copy ------------------------------- */
.consent__copy {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.consent__copy > b,
.consent__copy > strong,
.consent__lead {
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}
/* The document links are a bundle, not a sentence. They read as a set of
   named records: brass ink, a hairline underline that firms up on hover, and
   enough word-spacing that nine of them in a row are scannable rather than a
   grey wall. */
.consent__copy a,
.consent__doc {
  color: var(--brass-300);
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted var(--brass-a45);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.consent__copy a:hover,
.consent__doc:hover { color: var(--brass-200); border-bottom-color: var(--brass-300); }
.consent__copy a:focus-visible,
.consent__doc:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brass-a28); border-radius: 3px; }
/* The nested hint lines inside a leak card keep their own rhythm. */
.consent__copy .field__hint { display: block; margin-top: 4px; }

/* Controls inside a consent card must not fall back to the UA font/ink. */
.consent input[type="checkbox"],
.consent input[type="radio"],
.plan-opt__radio {
  font: inherit;
  color: var(--ink-1);
}

/* ---- 2 · The mode hint ------------------------------------------------- */
.mode-hint__copy {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.mode-hint__lead {
  display: inline;
  color: var(--ink-0);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

/* ---- 3 · Plan feature rows -------------------------------------------- */
/* The row already had its border, gap and padding from `.plan__feats li`.
   What it never had was a name, or a specification for the words themselves. */
.plan__feat {
  display: flex;
  align-items: flex-start;
  color: var(--ink-1);
}
.plan__feat-text {
  font-family: var(--font-sans);
  font-size: var(--fs-dense);
  line-height: var(--lh-snug);
  color: inherit;
  letter-spacing: 0;
}
.plan__feat.is-quiet .plan__feat-text { color: var(--ink-4); }

/* ---- 4 · The one select ------------------------------------------------ */
/* `.binput` already sets family, size and ink. The widget itself was the
   operating system's. It now uses the caret grammar `.compose-row select`
   established, at the wrapper's own right padding. */
select.binput {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23C9A96E' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 10px;
  cursor: pointer;
}
/* A multi-line select (`size` > 1) is a list box, not a menu: no caret. */
select.binput[size]:not([size="1"]),
select.binput[multiple] {
  background-image: none;
  padding-right: 0;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: default;
}

/* ---- 5 · The ROI result column ---------------------------------------- */
.roi__form-note,
.roi__fine {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  line-height: var(--lh-relaxed);
  color: var(--ink-3);
  margin: 8px 0 0;
}
.roi__form-note { margin-top: 20px; }
.roi__fine--lead { margin-top: 16px; }
.roi__divider {
  margin: 28px 0 22px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.roi__divider-eyebrow { margin-bottom: 0; }
.roi__fine-link {
  color: var(--brass-300);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--brass-a28);
}
.roi__fine-link:hover { color: var(--brass-200); border-bottom-color: var(--brass-500); }

.roi__annual {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  color: var(--ok);
}
.roi__annual-figure { font-family: var(--font-mono); color: var(--ok); }
.roi__range-figure { font-family: var(--font-mono); color: var(--ink-0); }
.roi__note-figure { color: var(--ink-0); font-weight: 500; }

.roi__cta-row { margin-top: 26px; }

.roi__block {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.roi__ledger {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  line-height: var(--lh-snug);
}
.roi__ledger-label {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  color: var(--ink-2);
}
.roi__ledger-count { font-family: var(--font-mono); color: var(--ink-2); }
.roi__ledger-value {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  color: var(--ink-0);
  text-align: right;
}
.roi__ledger-value.is-negative { color: var(--danger); }

.roi__shortfall {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--danger-a40);
  background: var(--danger-a12);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  line-height: var(--lh-relaxed);
  color: var(--ink-1);
}
.roi__shortfall-lead { color: var(--danger); font-weight: 500; }
.roi__shortfall-figure { font-family: var(--font-mono); color: var(--ink-0); }