/* Southern AI Systems — "Graphite" design system.
   Ported from the claude.ai/design project (162049ac) to static CSS so the
   Netlify site can use it without the React/Babel prototype runtime.

   Tokens are verbatim from tokens/*.css. Component rules are verbatim from each
   component's embedded CSS block (components/<group>/<Name>.jsx), keeping the
   original .sais-* class names so the two stay diffable.

   White paper, near-black ink, NO brand accent hue. Structure is carried by 1px
   rules and 1px seams — not shadows, gradients, or rounded blobs. The only
   colours in the system are three machine-state signals. */

/* ============================================================ tokens/fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300..800&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap");

/* =========================================================== tokens/colors */
:root {
  --paper-0: #ffffff;
  --paper-1: #ffffff;
  --paper-2: #f2f4f6;
  --paper-3: #e7eaee;

  --ink-0: #0b0d10;
  --ink-1: #15181d;
  --ink-2: #1f2329;

  --text-1: #0b0d10;
  --text-2: #4a525c;
  --text-3: #7c8590;

  --text-on-ink-1: #f3f5f7;
  --text-on-ink-2: #a8b0ba;
  --text-on-ink-3: #858e99;

  /* "Accent" is ink. There is no brand hue. */
  --accent: #0b0d10;
  --accent-hover: #000000;
  --accent-lift: #ffffff;
  --on-accent: #ffffff;
  --accent-wash: rgba(11, 13, 16, 0.05);
  --accent-edge: rgba(11, 13, 16, 0.14);
  --focus-ring: rgba(11, 13, 16, 0.55);

  /* Signals — status only. */
  --moss: #15803d;
  --moss-wash: rgba(22, 163, 74, 0.10);
  --clay: #b45309;
  --clay-wash: rgba(180, 83, 9, 0.10);
  --rust: #b91c1c;
  --rust-wash: rgba(185, 28, 28, 0.10);

  --surface-page: var(--paper-0);
  --surface-card: var(--paper-1);
  --surface-sunken: var(--paper-2);
  --surface-invert: var(--ink-0);
  --text-body: var(--text-2);
  --text-heading: var(--text-1);
  --text-muted: var(--text-3);
  --link: var(--accent);
  --link-hover: var(--accent-hover);

  /* ====================================================== tokens/typography */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-quote: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --size-display: clamp(2.75rem, 1.34rem + 5.79vw, 5.25rem);
  --size-h1: clamp(2.25rem, 1.40rem + 3.47vw, 3.75rem);
  --size-h2: clamp(1.75rem, 1.32rem + 1.74vw, 2.50rem);
  --size-h3: clamp(1.25rem, 1.11rem + 0.58vw, 1.50rem);
  --size-h4: 1.0625rem;
  --size-lead: clamp(1.125rem, 1.05rem + 0.29vw, 1.25rem);
  --size-body: 1rem;
  --size-sm: 0.875rem;
  --size-label: 0.75rem;
  --size-micro: 0.6875rem;

  --leading-display: 1.03;
  --leading-heading: 1.12;
  --leading-lead: 1.45;
  --leading-body: 1.6;
  --leading-dense: 1.35;

  --track-display: -0.038em;
  --track-heading: -0.026em;
  --track-body: -0.008em;
  --track-mono: 0.09em;
  --track-mono-wide: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --measure-display: 17ch;
  --measure-lead: 62ch;
  --measure-prose: 72ch;

  /* ========================================================= tokens/spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --space-section: clamp(4rem, 2.4rem + 6.5vw, 7.5rem);
  --space-section-tight: clamp(2.5rem, 1.8rem + 3vw, 4rem);

  --container: min(1180px, 100% - 2.5rem);
  --container-wide: min(1400px, 100% - 2.5rem);
  --container-prose: min(720px, 100% - 2.5rem);
  --container-narrow: min(880px, 100% - 2.5rem);

  --gap-tight: var(--space-2);
  --gap: var(--space-4);
  --gap-loose: var(--space-6);
  --gap-seam: 1px;

  /* ========================================================= tokens/borders */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  --rule: #e4e7eb;
  --rule-strong: #c9ced5;
  --rule-faint: #eef0f3;
  --rule-on-ink: rgba(255, 255, 255, 0.11);
  --rule-on-ink-strong: rgba(255, 255, 255, 0.22);

  --border: var(--border-width) solid var(--rule);
  --border-strong: var(--border-width) solid var(--rule-strong);
  --border-faint: var(--border-width) solid var(--rule-faint);
  --border-on-ink: var(--border-width) solid var(--rule-on-ink);

  --focus: 2px solid var(--focus-ring);
  --focus-offset: 2px;

  /* ======================================================= tokens/elevation */
  --shadow-none: none;
  --shadow-seat: 0 1px 0 rgba(11, 13, 16, 0.05);
  --shadow-raise: 0 2px 6px -2px rgba(11, 13, 16, 0.10);
  --shadow-overlay: 0 18px 44px -20px rgba(11, 13, 16, 0.34), 0 2px 8px -3px rgba(11, 13, 16, 0.12);
  --elevate-on-ink: var(--ink-1);
  --shadow-inset: inset 0 1px 0 rgba(11, 13, 16, 0.05);

  /* ========================================================== tokens/motion */
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --duration-slow: 320ms;

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --ease-linear: linear;

  --shift: 6px;
  --shift-sm: 2px;

  --transition-color: color var(--duration-instant) var(--ease),
                      background-color var(--duration-instant) var(--ease),
                      border-color var(--duration-instant) var(--ease);
  --transition-ui: color var(--duration-fast) var(--ease),
                   background-color var(--duration-fast) var(--ease),
                   border-color var(--duration-fast) var(--ease),
                   box-shadow var(--duration-fast) var(--ease),
                   transform var(--duration-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-normal: 1ms;
    --duration-slow: 1ms;
    --shift: 0px;
    --shift-sm: 0px;
  }
}

/* ================================================================== base */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 90px }
body {
  margin: 0;
  background: var(--paper-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100% }
h1, h2, h3, h4, p { margin: 0 }
a { color: var(--accent); text-decoration: none }
a:hover { color: var(--accent-hover) }
::selection { background: rgba(11, 13, 16, .14); color: var(--text-1) }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset) }

.wrap { width: var(--container); margin-inline: auto }
.wrap-wide { width: var(--container-wide); margin-inline: auto }
.sec { padding: var(--space-section) 0 }
.sec-tight { padding: var(--space-section-tight) 0 }
.ink { background: var(--ink-0); color: var(--text-on-ink-2) }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-sm); font-weight: var(--weight-semibold);
}
.skip:focus { left: 16px }
.i svg, .i-sm svg { stroke-width: 1.75; fill: none; stroke: currentColor;
  stroke-linecap: round; stroke-linejoin: round }
.i svg { width: 20px; height: 20px }
.i-sm svg { width: 18px; height: 18px }
.mono-note {
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--text-2);
}
.mono-note--on-ink { color: var(--text-on-ink-3) }

/* ================================================== components/core/Button */
.sais-btn { display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);font-weight:var(--weight-semibold);letter-spacing:-0.01em;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-ui) }
.sais-btn:focus-visible { outline:var(--focus);outline-offset:var(--focus-offset) }
.sais-btn[disabled],.sais-btn[aria-disabled=true] { opacity:.42;cursor:not-allowed;pointer-events:none }
.sais-btn--lg { min-height:48px;padding:0 1.375rem;font-size:1rem }
.sais-btn--md { min-height:40px;padding:0 1.125rem;font-size:.9375rem }
.sais-btn--sm { min-height:32px;padding:0 .75rem;font-size:.8125rem }
.sais-btn--primary { background:var(--accent);color:var(--on-accent);border-color:var(--accent) }
.sais-btn--primary:hover { background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent) }
.sais-btn--primary:active { transform:translateY(1px) }
.sais-btn--secondary { background:var(--paper-1);color:var(--text-1);border-color:var(--rule-strong) }
.sais-btn--secondary:hover { background:var(--paper-0);border-color:var(--text-3);color:var(--text-1) }
.sais-btn--secondary:active { background:var(--paper-3);transform:translateY(1px) }
.sais-btn--ghost { background:transparent;color:var(--text-1);border-color:transparent }
.sais-btn--ghost:hover { background:var(--accent-wash);color:var(--accent) }
.sais-btn--ghost:active { transform:translateY(1px) }
.sais-btn--inverse { background:var(--paper-0);color:var(--ink-0);border-color:var(--paper-0) }
.sais-btn--inverse:hover { background:#fff;border-color:#fff;color:var(--ink-0) }
.sais-btn--block { width:100% }
.sais-btn svg { width:1.05em;height:1.05em;flex:none }
/* Ghost on ink — the closing panel's secondary action. Border alpha is set
   above --rule-on-ink-strong (.22) so it clears the 3:1 non-text contrast
   floor against --ink-1; the shared token stays untouched for its other uses. */
.sais-btn--ghost.on-ink { color:var(--text-on-ink-1);border-color:rgba(255,255,255,.4) }
.sais-btn--ghost.on-ink:hover { background:var(--ink-1);color:var(--text-on-ink-1);border-color:rgba(255,255,255,.4) }

/* ============================================== components/core/IconButton */
.sais-ibtn { display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper-1);color:var(--text-2);cursor:pointer;transition:var(--transition-ui) }
.sais-ibtn:hover { color:var(--accent);border-color:var(--accent-edge);background:var(--accent-wash) }
.sais-ibtn:active { transform:translateY(1px) }
.sais-ibtn:focus-visible { outline:var(--focus);outline-offset:var(--focus-offset) }
.sais-ibtn[disabled] { opacity:.42;cursor:not-allowed }
.sais-ibtn--sm { width:28px;height:28px }
.sais-ibtn--md { width:34px;height:34px }
.sais-ibtn--lg { width:40px;height:40px }
.sais-ibtn--bare { border-color:transparent;background:transparent }
.sais-ibtn--on-ink { background:transparent;border-color:var(--rule-on-ink);color:var(--text-on-ink-2) }
.sais-ibtn--on-ink:hover { color:var(--text-on-ink-1);background:var(--ink-2);border-color:var(--rule-on-ink-strong) }
.sais-ibtn svg { width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round }

/* ================================================ components/core/TextLink */
.sais-link { color:var(--accent);font-weight:var(--weight-medium);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--accent-edge);transition:var(--transition-color) }
.sais-link:hover { color:var(--accent-hover);text-decoration-color:currentColor }
.sais-link:focus-visible { outline:var(--focus);outline-offset:var(--focus-offset);border-radius:2px }
.sais-link--on-ink { color:var(--accent-lift);text-decoration-color:rgba(255,255,255,.4) }
.sais-link--on-ink:hover { color:var(--text-on-ink-1) }
.sais-link--standalone { display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;font-family:var(--font-mono);font-size:var(--size-label);font-weight:var(--weight-bold);letter-spacing:var(--track-mono);text-transform:uppercase }
.sais-link--standalone::after { content:"→";transition:transform var(--duration-fast) var(--ease) }
.sais-link--standalone:hover::after { transform:translateX(3px) }

/* =================================================== components/core/Brand */
.sais-brand { display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text-1);font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:-0.03em;line-height:1;white-space:nowrap }
.sais-brand--on-ink { color:var(--text-on-ink-1) }
.sais-brand:hover { color:var(--text-1) }
.sais-brand--on-ink:hover { color:var(--text-on-ink-1) }
.sais-brand img { display:block;object-fit:contain;flex:none }
.sais-brand--sm { font-size:1rem } .sais-brand--sm img { width:30px;height:30px }
.sais-brand--md { font-size:1.1875rem } .sais-brand--md img { width:36px;height:36px }
.sais-brand--lg { font-size:1.5rem } .sais-brand--lg img { width:46px;height:46px }
.sais-brand__stack { display:flex;flex-direction:column;gap:.2rem }
.sais-brand__tag { font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-medium);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-3) }
.sais-brand--on-ink .sais-brand__tag { color:var(--text-on-ink-3) }

/* ================================================ components/display/Kicker */
/* align-items is flex-start, not center, so the rule stays pinned to the first
   line when the label wraps. Centring it against a two-line box floated the rule
   into the middle of the text, which the Spanish pages hit constantly — their
   labels run ~20% longer than the English ones and wrap at 375px. The .5em
   top margin re-centres it on that first line, so single-line kickers — still
   the overwhelming majority — render exactly as before. */
.sais-kicker { display:inline-flex;align-items:flex-start;gap:.5rem;font-family:var(--font-mono);font-size:var(--size-label);font-weight:var(--weight-bold);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--accent);line-height:1 }
.sais-kicker--on-ink { color:var(--accent-lift) }
.sais-kicker--muted { color:var(--text-3) }
.sais-kicker--on-ink.sais-kicker--muted { color:var(--text-on-ink-3) }
.sais-kicker::before { content:"";width:14px;height:1px;background:currentColor;flex:none;opacity:.65;margin-top:.5em }
.sais-kicker--bare::before { display:none }

/* =========================================== components/display/SectionHead */
.sais-sechead { display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--measure-lead);margin-bottom:var(--space-10) }
.sais-sechead--center { align-items:center;text-align:center;margin-left:auto;margin-right:auto }
.sais-sechead__h { font-family:var(--font-display);font-size:var(--size-h2);font-weight:var(--weight-black);letter-spacing:var(--track-display);line-height:var(--leading-heading);color:var(--text-1);margin:0;text-wrap:balance }
/* Emphasis is a TONE shift, not a second face — the system has no italic. */
.sais-sechead__h em { font-style:normal;color:var(--text-3) }
.sais-sechead--on-ink .sais-sechead__h { color:var(--text-on-ink-1) }
.sais-sechead--on-ink .sais-sechead__h em { color:var(--text-on-ink-3) }
.sais-sechead__lead { margin:0;color:var(--text-2);font-size:var(--size-lead);line-height:var(--leading-lead);max-width:var(--measure-lead);text-wrap:pretty }
.sais-sechead--on-ink .sais-sechead__lead { color:var(--text-on-ink-2) }

/* ================================================== components/display/Card */
.sais-card { position:relative;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-1);box-shadow:var(--shadow-seat);padding:var(--space-6);transition:var(--transition-ui) }
.sais-card--flush { padding:0 }
.sais-card--sunken { background:var(--paper-2);box-shadow:none }
.sais-card--on-ink { background:var(--ink-1);border-color:var(--rule-on-ink);box-shadow:none;color:var(--text-on-ink-2) }
a.sais-card,.sais-card--interactive { cursor:pointer;text-decoration:none }
a.sais-card:hover,.sais-card--interactive:hover { border-color:var(--rule-strong);box-shadow:var(--shadow-raise);transform:translateY(-1px) }
a.sais-card:focus-visible { outline:var(--focus);outline-offset:var(--focus-offset) }
.sais-card--on-ink:hover { border-color:var(--rule-on-ink-strong);background:var(--ink-2) }
.sais-card__title { font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);line-height:var(--leading-dense);color:var(--text-1);margin:0 }
.sais-card--on-ink .sais-card__title { color:var(--text-on-ink-1) }
.sais-card__head { display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:.5rem }
.sais-card__icon { width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--accent-edge);border-radius:var(--radius-sm);background:var(--accent-wash);color:var(--accent);margin-bottom:var(--space-4);flex:none }
.sais-card__icon svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round }
.sais-card__body { color:var(--text-2);font-size:var(--size-body);line-height:var(--leading-body);margin:0;text-wrap:pretty }
.sais-card--on-ink .sais-card__body { color:var(--text-on-ink-2) }
.sais-card__foot { margin-top:auto;padding-top:var(--space-4) }

/* =============================================== components/display/Callout */
.sais-callout { border:1px solid var(--rule);border-top:2px solid var(--accent);border-radius:0 0 var(--radius-md) var(--radius-md);background:var(--paper-1);padding:var(--space-5) var(--space-6) }
.sais-callout__label { display:block;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--accent);margin-bottom:.55rem }
.sais-callout__body { margin:0;color:var(--text-1);font-size:var(--size-lead);line-height:var(--leading-lead);text-wrap:pretty }
.sais-callout--caution { border-top-color:var(--clay) }
.sais-callout--caution .sais-callout__label { color:var(--clay) }
.sais-callout--affirm { border-top-color:var(--moss) }
.sais-callout--affirm .sais-callout__label { color:var(--moss) }
.sais-callout--on-ink { background:var(--ink-1);border-color:var(--rule-on-ink);border-top-color:var(--accent-lift) }
.sais-callout--on-ink .sais-callout__body { color:var(--text-on-ink-1) }
.sais-callout--on-ink .sais-callout__label { color:var(--accent-lift) }

/* ============================================== components/display/StatCell */
.sais-stats { display:grid;grid-template-columns:repeat(var(--sais-cols,3),minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden }
@media(max-width:900px) {
  .sais-stats { grid-template-columns:repeat(min(2,var(--sais-cols,3)),minmax(0,1fr)) }
  /* Orphan guard: the seam is a container background, so an incomplete final
     row would expose a slab of --rule. */
  .sais-stats > .sais-stat:last-child:nth-child(odd) { grid-column:1/-1 }
}
@media(max-width:600px) { .sais-stats { grid-template-columns:1fr } }
.sais-stats--on-ink { background:var(--rule-on-ink);border-color:var(--rule-on-ink) }
.sais-stat { background:var(--paper-1);padding:var(--space-5) }
.sais-stats--on-ink .sais-stat { background:var(--ink-0) }
.sais-stat__label { display:block;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-medium);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-3);margin-bottom:.6rem }
.sais-stats--on-ink .sais-stat__label { color:var(--text-on-ink-3) }
.sais-stat__value { display:block;font-family:var(--font-display);font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);font-weight:var(--weight-black);letter-spacing:-0.04em;line-height:1;color:var(--text-1);font-variant-numeric:tabular-nums }
.sais-stats--on-ink .sais-stat__value { color:var(--text-on-ink-1) }
.sais-stat__value em { font-style:normal;color:var(--accent);font-size:.55em;font-weight:var(--weight-bold);letter-spacing:0;margin-left:.15em }
.sais-stats--on-ink .sais-stat__value em { color:var(--accent-lift) }
.sais-stat__note { display:block;margin-top:.5rem;font-size:var(--size-sm);color:var(--text-3);line-height:var(--leading-dense) }
.sais-stats--on-ink .sais-stat__note { color:var(--text-on-ink-3) }

/* ============================================== components/display/StepCard */
.sais-steps { display:grid;grid-template-columns:repeat(var(--sais-cols,4),minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;counter-reset:sais-step }
@media(max-width:1000px) {
  .sais-steps { grid-template-columns:repeat(min(2,var(--sais-cols,4)),minmax(0,1fr)) }
  .sais-steps > .sais-step:last-child:nth-child(odd) { grid-column:1/-1 }
}
@media(max-width:640px) { .sais-steps { grid-template-columns:1fr } }
.sais-step { background:var(--paper-1);padding:var(--space-6);display:flex;flex-direction:column;counter-increment:sais-step }
.sais-step__n { font-family:var(--font-mono);font-size:var(--size-label);font-weight:var(--weight-bold);letter-spacing:var(--track-mono);color:var(--accent);margin-bottom:var(--space-5) }
.sais-step__n::before { content:counter(sais-step,decimal-leading-zero) }
.sais-step__when { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-3);margin-bottom:.4rem }
.sais-step__title { font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);line-height:var(--leading-dense);color:var(--text-1);margin:0 0 .6rem;text-wrap:balance }
.sais-step__body { font-size:var(--size-sm);line-height:var(--leading-body);color:var(--text-2);margin:0;text-wrap:pretty }
.sais-step__list { list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem }
.sais-step__list li { position:relative;padding-left:.95rem;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.03em;color:var(--text-3);line-height:1.5 }
.sais-step__list li::before { content:"";position:absolute;left:0;top:.5em;width:5px;height:1px;background:var(--accent) }

/* ============================================ components/display/StatusChip */
.sais-chip { display:inline-flex;align-items:center;gap:.45rem;border:1px solid;border-radius:var(--radius-pill);padding:.28rem .65rem .28rem .55rem;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono);text-transform:uppercase;line-height:1.25;white-space:nowrap }
.sais-chip::before { content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none }
.sais-chip--live { color:var(--moss);border-color:rgba(22,163,74,.32);background:var(--moss-wash) }
.sais-chip--progress { color:var(--clay);border-color:rgba(180,83,9,.32);background:var(--clay-wash) }
.sais-chip--alert { color:var(--rust);border-color:rgba(185,28,28,.32);background:var(--rust-wash) }
.sais-chip--neutral { color:var(--text-3);border-color:var(--rule);background:var(--paper-2) }
.sais-chip--accent { color:var(--accent);border-color:var(--accent-edge);background:var(--accent-wash) }
.sais-chip--on-ink.sais-chip--neutral { color:var(--text-on-ink-3);border-color:var(--rule-on-ink);background:transparent }
.sais-chip--on-ink.sais-chip--live { color:#4ade80;border-color:rgba(74,222,128,.32);background:rgba(74,222,128,.1) }
.sais-chip--on-ink.sais-chip--accent { color:var(--accent-lift);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1) }
.sais-chip--on-ink.sais-chip--progress { color:#fbbf24;border-color:rgba(251,191,36,.32);background:rgba(251,191,36,.1) }
.sais-chip--on-ink.sais-chip--alert { color:#f87171;border-color:rgba(248,113,113,.32);background:rgba(248,113,113,.1) }
.sais-chip--pulse::before { animation:sais-chip-pulse 2.4s var(--ease-in-out) infinite }
@keyframes sais-chip-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce) { .sais-chip--pulse::before { animation:none } }

/* =================================================== components/display/Tag */
.sais-tag { display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--radius-xs);padding:.2rem .45rem;background:var(--paper-2);color:var(--text-2);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:.05em;line-height:1.3;white-space:nowrap }
.sais-tag--accent { border-color:var(--accent-edge);background:var(--accent-wash);color:var(--accent) }
.sais-tag--on-ink { border-color:var(--rule-on-ink);background:var(--ink-1);color:var(--text-on-ink-2) }
button.sais-tag,.sais-tag[role=button] { cursor:pointer;transition:var(--transition-color) }
button.sais-tag:hover { border-color:var(--accent-edge);color:var(--accent);background:var(--accent-wash) }
button.sais-tag[aria-pressed=true] { background:var(--accent);border-color:var(--accent);color:var(--on-accent) }
button.sais-tag:focus-visible { outline:var(--focus);outline-offset:var(--focus-offset) }

/* =========================================== components/display/FeatureList */
.sais-feats { list-style:none;margin:0;padding:0;display:flex;flex-direction:column }
.sais-feats li { display:flex;align-items:flex-start;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--rule-faint);color:var(--text-2);font-size:var(--size-body);line-height:var(--leading-dense) }
.sais-feats li:last-child { border-bottom:0 }
.sais-feats li::before { content:"";width:14px;height:14px;flex:none;margin-top:.28em;border:1px solid var(--accent-edge);border-radius:var(--radius-xs);background:var(--accent-wash) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/9px no-repeat }
.sais-feats--exclude li::before { background:var(--paper-2) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/9px no-repeat;border-color:var(--rule) }
.sais-feats--on-ink li { color:var(--text-on-ink-2);border-bottom-color:var(--rule-on-ink) }
.sais-feats--on-ink li::before { border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/9px no-repeat }

/* ================================================= components/data/Accordion */
.sais-acc { border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-1) }
.sais-acc__item { border-bottom:1px solid var(--rule-faint) }
.sais-acc__item:last-child { border-bottom:0 }
.sais-acc__item summary { display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);list-style:none;cursor:pointer;padding:1.05rem 1.25rem;font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-semibold);letter-spacing:var(--track-heading);color:var(--text-1);transition:var(--transition-color) }
.sais-acc__item summary::-webkit-details-marker { display:none }
.sais-acc__item summary:hover { background:var(--accent-wash);color:var(--accent) }
.sais-acc__item summary:focus-visible { outline:var(--focus);outline-offset:-2px }
.sais-acc__sign { flex:none;width:18px;height:18px;position:relative;color:var(--accent) }
.sais-acc__sign::before,.sais-acc__sign::after { content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform var(--duration-normal) var(--ease),opacity var(--duration-fast) var(--ease) }
.sais-acc__sign::before { width:12px;height:1.5px;margin:-.75px 0 0 -6px }
.sais-acc__sign::after { width:1.5px;height:12px;margin:-6px 0 0 -.75px }
.sais-acc__item[open] .sais-acc__sign::after { transform:rotate(90deg);opacity:0 }
.sais-acc__body { padding:0 1.25rem 1.25rem;color:var(--text-2);font-size:var(--size-body);line-height:var(--leading-body);max-width:var(--measure-prose);text-wrap:pretty }
.sais-acc__body p { margin:0 0 .8rem }
.sais-acc__body p:last-child { margin:0 }

/* ================================================= components/forms/Field */
.sais-field { display:flex;flex-direction:column;gap:.45rem }
.sais-field__label { font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-3) }
.sais-field__label span { color:var(--accent);margin-left:.2em }
.sais-field__control { width:100%;font-family:var(--font-body);font-size:var(--size-body);color:var(--text-1);background:var(--paper-1);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:.65rem .75rem;line-height:1.4;transition:var(--transition-ui) }
.sais-field__control::placeholder { color:var(--text-3);opacity:.75 }
.sais-field__control:hover { border-color:var(--text-3) }
.sais-field__control:focus { outline:var(--focus);outline-offset:1px;border-color:var(--accent) }
.sais-field__control:disabled { background:var(--paper-2);color:var(--text-3);cursor:not-allowed }
textarea.sais-field__control { min-height:118px;resize:vertical }
.sais-field__hint { font-size:var(--size-sm);color:var(--text-3);line-height:var(--leading-dense) }
.sais-field--error .sais-field__control { border-color:var(--rust) }
.sais-field--error .sais-field__hint { color:var(--rust) }
.sais-field--on-ink .sais-field__label { color:var(--text-on-ink-3) }
.sais-field--on-ink .sais-field__control { background:var(--ink-1);border-color:var(--rule-on-ink-strong);color:var(--text-on-ink-1) }
.sais-field--on-ink .sais-field__control:focus { border-color:var(--accent-lift) }
.sais-field--on-ink .sais-field__hint { color:var(--text-on-ink-3) }
.sais-field--on-ink .sais-field__label span { color:var(--accent-lift) }

/* ================================================= components/forms/Select */
.sais-select { display:flex;flex-direction:column;gap:.45rem }
.sais-select__label { font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-3) }
.sais-select__wrap { position:relative }
.sais-select__wrap::after { content:"";position:absolute;right:.75rem;top:50%;width:8px;height:8px;margin-top:-5px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);pointer-events:none }
.sais-select__control { appearance:none;width:100%;font-family:var(--font-body);font-size:var(--size-body);color:var(--text-1);background:var(--paper-1);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:.65rem 2rem .65rem .75rem;line-height:1.4;cursor:pointer;transition:var(--transition-ui) }
.sais-select__control:hover { border-color:var(--text-3) }
.sais-select__control:focus { outline:var(--focus);outline-offset:1px;border-color:var(--accent) }
.sais-select--on-ink .sais-select__label { color:var(--text-on-ink-3) }
.sais-select--on-ink .sais-select__control { background:var(--ink-1);border-color:var(--rule-on-ink-strong);color:var(--text-on-ink-1) }
.sais-select--on-ink .sais-select__wrap::after { border-color:var(--text-on-ink-3) }

/* =============================================== components/forms/Checkbox */
.sais-check { display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:var(--size-sm);color:var(--text-2);line-height:1.45 }
.sais-check input { appearance:none;flex:none;width:17px;height:17px;margin-top:.08em;border:1px solid var(--rule-strong);border-radius:var(--radius-xs);background:var(--paper-1);cursor:pointer;transition:var(--transition-ui) }
.sais-check--radio input { border-radius:50% }
.sais-check input:hover { border-color:var(--accent) }
.sais-check input:focus-visible { outline:var(--focus);outline-offset:var(--focus-offset) }
.sais-check input:checked { background:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:11px;background-position:center;background-repeat:no-repeat }
.sais-check--radio input:checked { background-image:none;box-shadow:inset 0 0 0 3px var(--paper-1) }
.sais-check input:disabled { opacity:.45;cursor:not-allowed }
.sais-check__text b { display:block;font-weight:var(--weight-semibold);color:var(--text-1) }
.sais-check--on-ink { color:var(--text-on-ink-2) }
.sais-check--on-ink input { background:var(--ink-1);border-color:var(--rule-on-ink-strong) }
.sais-check--on-ink input:checked { background-color:var(--accent-lift);border-color:var(--accent-lift);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") }
.sais-check--on-ink .sais-check__text b { color:var(--text-on-ink-1) }

/* ============================================= components/navigation/SiteNav */
.sais-nav { position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule) }
.sais-nav--on-ink { background:rgba(11,13,16,.9);border-bottom-color:var(--rule-on-ink) }
.sais-nav__inner { width:var(--container-wide);margin:0 auto;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6) }
.sais-nav__links { display:flex;align-items:center;gap:.15rem }
.sais-nav__link { position:relative;padding:.5rem .7rem;font-size:var(--size-sm);font-weight:var(--weight-medium);color:var(--text-2);text-decoration:none;border-radius:var(--radius-sm);white-space:nowrap;transition:var(--transition-color) }
.sais-nav__link:hover { color:var(--text-1);background:var(--accent-wash) }
.sais-nav__link[aria-current=page] { color:var(--text-1);font-weight:var(--weight-semibold) }
.sais-nav__link[aria-current=page]::after { content:"";position:absolute;left:.7rem;right:.7rem;bottom:.15rem;height:1.5px;background:var(--accent) }
.sais-nav--on-ink .sais-nav__link { color:var(--text-on-ink-2) }
.sais-nav--on-ink .sais-nav__link:hover { color:var(--text-on-ink-1);background:var(--ink-1) }
.sais-nav--on-ink .sais-nav__link[aria-current=page] { color:var(--text-on-ink-1) }
.sais-nav--on-ink .sais-nav__link[aria-current=page]::after { background:var(--accent-lift) }
.sais-nav__right { display:flex;align-items:center;gap:var(--space-4) }
.sais-nav__place { display:none;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-2) }
.sais-nav__place::before { content:"";width:5px;height:5px;border-radius:50%;background:var(--moss) }
.sais-nav--on-ink .sais-nav__place { color:var(--text-on-ink-3) }
@media(min-width:1100px) { .sais-nav__place { display:inline-flex } }
.sais-nav__toggle { display:none }
@media(max-width:1100px) { .sais-nav__place { display:none } }
@media(max-width:960px) {
  .sais-nav__links { display:none }
  .sais-nav .sais-nav__toggle { display:inline-flex }
}
.sais-nav__sheet { border-top:1px solid var(--rule);padding:var(--space-3) 0 var(--space-4);width:var(--container-wide);margin:0 auto }
.sais-nav--on-ink .sais-nav__sheet { border-top-color:var(--rule-on-ink) }
.sais-nav__sheet a { display:block;padding:.65rem .25rem;font-size:var(--size-body);font-weight:var(--weight-medium);color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--rule-faint) }
.sais-nav__sheet a:last-of-type { border-bottom:0 }
.sais-nav__sheet a:hover,.sais-nav__sheet a[aria-current=page] { color:var(--text-1) }
.sais-nav--on-ink .sais-nav__sheet a { color:var(--text-on-ink-2);border-bottom-color:var(--rule-on-ink) }
.sais-nav--on-ink .sais-nav__sheet a:hover,.sais-nav--on-ink .sais-nav__sheet a[aria-current=page] { color:var(--text-on-ink-1) }
.sais-nav__sheet[hidden] { display:none }
/* The sheet's own CTA + language pair, shown only once the bar drops them. */
.sais-nav__sheet-extra { display:none;align-items:center;gap:var(--space-4);padding-top:var(--space-4);margin-top:var(--space-2);border-top:1px solid var(--rule) }
/* These sit inside .sais-nav__sheet, so undo the stacked-link treatment. */
.sais-nav__sheet .sais-nav__sheet-extra a { display:inline-flex;padding:unset;border-bottom:0;font-size:inherit }
.sais-nav__sheet-extra a.sais-btn { flex:1;justify-content:center;padding:0 1.125rem;font-size:.9375rem;color:var(--on-accent) }
.sais-nav__sheet .sais-nav__sheet-extra .sais-lang a { padding:.3rem .55rem;font-size:var(--size-micro);color:var(--text-2) }
.sais-nav__sheet .sais-nav__sheet-extra .sais-lang a[aria-current=true] { color:var(--on-accent) }
.sais-nav--on-ink .sais-nav__sheet-extra { border-top-color:var(--rule-on-ink) }
/* Below 600px the brand, language toggle, CTA, and menu button no longer fit on
   one bar — a 375px phone overflowed the viewport by ~106px. Move the toggle
   and language pair into the sheet and let the wordmark shrink. */
@media(max-width:600px) {
  .sais-nav__right > .sais-lang,
  .sais-nav__right > .sais-btn { display:none }
  .sais-nav__sheet-extra { display:flex }
  .sais-brand--sm { font-size:.9375rem;gap:.5rem }
  .sais-brand--sm img { width:26px;height:26px }
  .sais-nav__inner { gap:var(--space-3) }
}
@media(max-width:360px) {
  .sais-brand--sm { font-size:.8125rem }
}

/* ========================================== components/navigation/LangSwitch */
.sais-lang { display:inline-flex;align-items:center;gap:1px;border:1px solid var(--rule);border-radius:var(--radius-pill);padding:2px;background:var(--paper-2) }
.sais-lang a { padding:.3rem .55rem;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono);color:var(--text-2);text-decoration:none;line-height:1;transition:var(--transition-color) }
.sais-lang a:hover { color:var(--text-1) }
.sais-lang a[aria-current=true] { background:var(--accent);color:var(--on-accent) }
.sais-lang--on-ink { background:var(--ink-1);border-color:var(--rule-on-ink) }
.sais-lang--on-ink a { color:var(--text-on-ink-3) }
.sais-lang--on-ink a:hover { color:var(--text-on-ink-1) }

/* ========================================== components/navigation/SiteFooter */
.sais-foot { background:var(--ink-0);color:var(--text-on-ink-2);border-top:1px solid var(--rule-on-ink);padding:var(--space-16) 0 var(--space-8) }
.sais-foot__inner { width:var(--container-wide);margin:0 auto }
.sais-foot__top { display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--space-10) }
.sais-foot__blurb { margin:var(--space-4) 0 0;max-width:34ch;font-size:var(--size-sm);line-height:var(--leading-body);color:var(--text-on-ink-2) }
.sais-foot__col h4 { margin:0 0 var(--space-4);font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-on-ink-3) }
.sais-foot__col a { display:block;padding:.28rem 0;color:var(--text-on-ink-2);font-size:var(--size-sm);text-decoration:none;transition:var(--transition-color) }
.sais-foot__col a:hover { color:var(--text-on-ink-1) }
.sais-foot__bot { display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-12);padding-top:var(--space-6);border-top:1px solid var(--rule-on-ink);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-3) }
@media(max-width:1100px) { .sais-foot__top { grid-template-columns:1.4fr 1fr 1fr 1fr } .sais-foot__brandcol { grid-column:1/-1 } }
@media(max-width:860px) { .sais-foot__top { grid-template-columns:1fr 1fr } }
@media(max-width:520px) { .sais-foot__top { grid-template-columns:1fr } }


/* ==========================================================================
   PAGE COMPOSITION
   Section-level layout shared by every marketing page, ported from the kit's
   ui_kits/marketing/*.html <style> blocks. Component rules live above; these
   are the arrangements those components sit in.
   ========================================================================== */
  .hero { position:relative;padding:var(--space-24) 0 var(--space-16);overflow:hidden }
  /* The one texture in the system: a 56px hairline grid, masked so it fades. */
  .hero__grid { position:absolute;inset:0;background-image:linear-gradient(rgba(11,13,16,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,13,16,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%);mask-image:linear-gradient(to bottom,#000,transparent 88%);pointer-events:none }
  .hero__inner { position:relative }
  h1.display { font-family:var(--font-display);font-size:var(--size-display);font-weight:var(--weight-black);letter-spacing:var(--track-display);line-height:var(--leading-display);margin:var(--space-6) 0 0;max-width:var(--measure-display);text-wrap:balance }
  h1.display em { font-style:normal;color:var(--text-3) }
  .lead { margin:var(--space-6) 0 0;max-width:var(--measure-lead);font-size:var(--size-lead);line-height:var(--leading-lead);color:var(--text-2);text-wrap:pretty }
  .row { display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8);align-items:center }
  .grid3 { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4) }
  .grid2 { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center }
  @media(max-width:900px){ .grid3,.grid2 { grid-template-columns:1fr } }

  /* Hero, billow variant (homepage only — bare .hero elsewhere stays
     left-aligned). Composition is badge / display / lead / CTA pair, closing
     on a cloud field that fades into the ink band below. The skin is
     deliberately softer than the rest of the system — owner-directed: serif
     display, pill CTAs, a sky accent — and scoped to this variant, so every
     other page stays pure graphite.
     overflow stays visible so the cloud field's bleed can glow past the
     section edge onto the ink band. */
  .hero--billow { --sky:#2f63f0;--sky-deep:#2149cf;z-index:2;padding-bottom:clamp(200px,22vw,310px);text-align:center;overflow:visible;background:linear-gradient(180deg,var(--paper-0) 0%,#f6f9ff 58%,#edf3ff 100%) }
  .hero--billow .hero__inner { display:flex;flex-direction:column;align-items:center }
  .hero--billow h1.display { max-width:25ch;font-family:"DM Serif Display",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-0.005em;line-height:1.06 }
  .hero--billow h1.display em { font-style:normal;color:inherit }
  .hero--billow .row { justify-content:center }
  .hero--billow .mono-note { margin-top:var(--space-4) }
  .hero__flag.sais-chip { background:var(--paper-0);border-color:rgba(47,99,240,.28);color:var(--sky) }
  .hero--billow .sais-btn { border-radius:var(--radius-pill) }
  .hero--billow .sais-btn--lg { padding:0 1.625rem }
  .hero--billow .sais-btn--primary { background:var(--sky);border-color:var(--sky) }
  .hero--billow .sais-btn--primary:hover { background:var(--sky-deep);border-color:var(--sky-deep) }
  /* The cloud field — static layered radial washes, blurred once at paint
     time (no animation touches the filter). Anchored low so the mass hugs
     the hero floor and its glow bleeds a little past the seam onto ink,
     which is what softens that edge. */
  /* Full-bleed strip, never wider than the page — the extra cloud width comes
     from background-size, which paints past the edges without creating
     horizontal scroll the way an oversized element would on phones. */
  /* The cloud bank. The silhouette is real geometry — an SVG mask of overlapping
     ellipses on a flat base — and the colour is a plain gradient showing through
     it. Earlier passes tried to build the shape out of blurred radial gradients,
     which can only ever read as a gradient smear no matter how it is tuned.
     ::before is the same shape blown up and blurred, purely as the halo. */
  .hero__clouds { position:absolute;left:0;width:100%;bottom:-44px;height:clamp(190px,21vw,300px);pointer-events:none;filter:blur(3px);
    background:linear-gradient(180deg,#8ad8ff 0%,#4ba3ff 30%,#2f7bf0 62%,#1c4fd0 100%);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    -webkit-mask-size:min(1680px,178%) 100%;mask-size:min(1680px,178%) 100%;
    -webkit-mask-position:center bottom;mask-position:center bottom;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat }
  .hero__clouds::before { content:"";position:absolute;inset:-6% -4% -12%;
    background:linear-gradient(180deg,rgba(138,216,255,.55),rgba(47,123,240,.5) 60%,rgba(28,79,208,.45));
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20320%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%220%22%20y%3D%22236%22%20width%3D%221200%22%20height%3D%2284%22%2F%3E%3Cellipse%20cx%3D%22-15%22%20cy%3D%22236%22%20rx%3D%22104%22%20ry%3D%2292%22%2F%3E%3Cellipse%20cx%3D%22115%22%20cy%3D%22236%22%20rx%3D%2274%22%20ry%3D%2264%22%2F%3E%3Cellipse%20cx%3D%22245%22%20cy%3D%22236%22%20rx%3D%22116%22%20ry%3D%22102%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%22236%22%20rx%3D%2280%22%20ry%3D%2270%22%2F%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22236%22%20rx%3D%22110%22%20ry%3D%2298%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22236%22%20rx%3D%2272%22%20ry%3D%2262%22%2F%3E%3Cellipse%20cx%3D%22780%22%20cy%3D%22236%22%20rx%3D%22118%22%20ry%3D%22104%22%2F%3E%3Cellipse%20cx%3D%22920%22%20cy%3D%22236%22%20rx%3D%2278%22%20ry%3D%2268%22%2F%3E%3Cellipse%20cx%3D%221050%22%20cy%3D%22236%22%20rx%3D%22108%22%20ry%3D%2296%22%2F%3E%3Cellipse%20cx%3D%221190%22%20cy%3D%22236%22%20rx%3D%2284%22%20ry%3D%2274%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    -webkit-mask-size:min(1680px,178%) 100%;mask-size:min(1680px,178%) 100%;
    -webkit-mask-position:center bottom;mask-position:center bottom;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    filter:blur(34px);z-index:-1 }


  /* Client logo wall — ink cells joined by 1px seams. Column counts must divide
     10 so a partial row can never expose a slab of the seam colour. */
  .logowall { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule-on-ink);border:1px solid var(--rule-on-ink);border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-6) }
  .logowall__row { position:relative;background:var(--ink-1);display:grid;place-items:center;padding:var(--space-5) var(--space-4);min-height:176px;transition:background-color var(--duration-fast) var(--ease);text-decoration:none;color:inherit }
  .logowall__row:hover { background:var(--ink-2) }
  /* Only the <a> tiles link out to a live, verifiable site or listing; the
     plain <div> tiles are named but not yet click-through. This mark is the
     only signal separating the two, so the wall doesn't read as ten
     interchangeable logos. */
  a.logowall__row::after {
    content:"↗"; position:absolute; top:var(--space-3); right:var(--space-3);
    font-family:var(--font-mono); font-size:var(--size-micro); color:var(--text-on-ink-3);
  }
  a.logowall__row:hover::after { color:var(--text-on-ink-1) }
  .logowall__tile { display:flex;align-items:center;justify-content:center;width:100%;height:112px }
  /* Client marks keep their own colour — the readme's documented exception to
     the monochrome rule for third-party brands. (Site.jsx renders a mono
     variant; colour is the deliberate choice here.)
     The marks ship on an opaque black ground, so screen-blending drops that
     ground against the ink cell. contrast(1.25) is load-bearing: several
     grounds are near-black rather than pure black and otherwise survive the
     blend as a visible grey plate behind the logo. Measured across all ten,
     this crushes every plate to 0 while keeping the most artwork detail of the
     options tried. */
  .logowall__tile img { display:block;width:auto;height:auto;max-width:100%;max-height:112px;object-fit:contain;filter:contrast(1.25);mix-blend-mode:screen;opacity:.92;transition:opacity var(--duration-fast) var(--ease) }
  .logowall__row:hover .logowall__tile img { opacity:1 }
  a.logowall__row:focus-visible { outline:2px solid var(--text-on-ink-1);outline-offset:-2px }
  @media(max-width:1000px){ .logowall { grid-template-columns:repeat(2,minmax(0,1fr)) } .logowall__row { min-height:140px } .logowall__tile { height:88px } .logowall__tile img { max-height:88px } }

  /* Proof of work — screenshots mounted in a ruled frame on ink. */
  .proofpanel { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-on-ink);border:1px solid var(--rule-on-ink);border-radius:var(--radius-lg);overflow:hidden }
  .proofshot { margin:0;background:var(--ink-1);display:grid;grid-template-rows:1fr auto;text-decoration:none;color:inherit }
  .proofshot--wide { grid-column:1 / -1 }
  .proofshot__frame { overflow:hidden;aspect-ratio:16/10 }
  .proofshot--wide .proofshot__frame { aspect-ratio:16/7 }
  .proofshot img { display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease) }
  .proofshot:hover img { transform:scale(1.015) }
  /* These source files are marketing posters, not raw UI captures: each carries
     a burned-in client lockup beside the device — Gameplan's on its left edge,
     Baseline's on its right. Two problems came out of that: side by side in the
     original order the marks met at the seam, and cropping them out clipped the
     artwork mid-letter.
     Both are solved by geometry rather than cropping. The frame matches the
     source's native 1.79:1 (16/9 is within 1%), so nothing is cut, and the
     swapped running order puts Gameplan's mark at the panel's far left and
     Baseline's at its far right — the maximum separation the row allows. */
  .proofshot--crop-right .proofshot__frame,
  .proofshot--crop-left .proofshot__frame { aspect-ratio:16/9 }
  .proofshot--crop-right img,
  .proofshot--crop-left img { object-position:center }
  .proofshot__cap { position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);border-top:1px solid var(--rule-on-ink);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-3);transition:color var(--duration-fast) var(--ease) }
  .proofshot__go { position:absolute;right:var(--space-4);bottom:var(--space-4);padding-left:var(--space-4);background:var(--ink-1);color:var(--text-on-ink-1);opacity:0;transition:opacity var(--duration-fast) var(--ease) }
  .proofshot__go::after { content:" \2192" }
  .proofshot:hover .proofshot__cap { color:var(--text-on-ink-1) }
  .proofshot:hover .proofshot__go,.proofshot:focus-visible .proofshot__go { opacity:1 }
  .proofshot:focus-visible { outline:2px solid var(--text-on-ink-1);outline-offset:-2px }
  @media(max-width:640px){ .proofpanel { grid-template-columns:1fr } }

  /* Build / Connect / Run — the orbit field. Tool logos ride three concentric
     half-visible rings anchored to the stage floor; a canvas particle globe
     (painted by the homepage inline script) rises from the same floor. All
     geometry hangs off --orbit-r, the outer ring's radius: the stage is one
     radius tall plus headroom for a pod, and the inner rings are fixed ratios
     of it, so a single clamp scales the entire scene. Each arm spans from the
     ring's top edge to its center and swings about that center; the pod at the
     arm's tip counter-rotates by the same angle so the logo stays upright. */
  .orbitstack { --pod:clamp(40px, 5.4vw, 54px); --orbit-r:min(calc(50vw - 47px), 504px);
    position:relative;height:calc(var(--orbit-r) + var(--pod));overflow:hidden;border-bottom:1px solid var(--rule) }
  .orbitstack__globe { position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:var(--orbit-r);height:calc(var(--orbit-r)/2);z-index:1;pointer-events:none }
  .orbitstack__ring { position:absolute;bottom:0;left:50%;width:calc(var(--orbit-r)*2*var(--k));height:calc(var(--orbit-r)*2*var(--k));transform:translate(-50%,50%);border:1px solid var(--rule);border-radius:50% }
  .orbitstack__arm { position:absolute;top:0;left:50%;width:0;height:50%;transform-origin:50% 100%;transform:rotate(var(--a));animation:sais-orbit-cw var(--dur) linear infinite }
  .orbitstack__pod { position:absolute;top:calc(var(--pod)/-2);left:calc(var(--pod)/-2);width:var(--pod);height:var(--pod);display:grid;place-items:center;background:var(--paper-0);border:1px solid var(--rule-strong);border-radius:50%;box-shadow:0 1px 2px rgba(11,13,16,.06);z-index:2;transform:rotate(calc(var(--a)*-1));animation:sais-counter-cw var(--dur) linear infinite }
  .orbitstack__ring--ccw .orbitstack__arm { animation-name:sais-orbit-ccw }
  .orbitstack__ring--ccw .orbitstack__pod { animation-name:sais-counter-ccw }
  .orbitstack__pod img { width:46%;height:46%;object-fit:contain }
  @keyframes sais-orbit-cw { from { transform:rotate(var(--a)) } to { transform:rotate(calc(var(--a) + 360deg)) } }
  @keyframes sais-orbit-ccw { from { transform:rotate(var(--a)) } to { transform:rotate(calc(var(--a) - 360deg)) } }
  @keyframes sais-counter-cw { from { transform:rotate(calc(var(--a)*-1)) } to { transform:rotate(calc(var(--a)*-1 - 360deg)) } }
  @keyframes sais-counter-ccw { from { transform:rotate(calc(var(--a)*-1)) } to { transform:rotate(calc(var(--a)*-1 + 360deg)) } }
  @media (prefers-reduced-motion:reduce){ .orbitstack__arm,.orbitstack__pod { animation:none } }
  .stacklegend { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);padding-top:var(--space-6) }
  .stacklegend__t { font-family:var(--font-mono);font-size:var(--size-label);font-weight:var(--weight-bold);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-1);margin:0 0 .4rem }
  .stacklegend__d { margin:0;font-size:var(--size-sm);line-height:var(--leading-body);color:var(--text-2) }
  @media(max-width:760px){ .stacklegend { grid-template-columns:1fr;gap:var(--space-4) } }
  .chips { list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2) }
  .chip { display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper-0);padding:.42rem .7rem;font-family:var(--font-mono);font-size:var(--size-label);letter-spacing:.03em;color:var(--text-2);white-space:nowrap }
  /* Every mark in this row is a square glyph, so they can all be set at one
     size. Twilio and Kimi were wide wordmarks and smeared into an unreadable
     blob at chip scale; both are now square marks. */
  .chip img { width:20px;height:20px;object-fit:contain;flex:none }

  /* Terms band. */
  .terms { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden }
  .terms__cell { background:var(--paper-1);padding:var(--space-6) }
  .terms__ico { display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--accent-edge);border-radius:var(--radius-sm);background:var(--accent-wash);color:var(--accent);margin-bottom:var(--space-5) }
  .terms__t { font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);margin:0 0 .5rem }
  .terms__b { margin:0;font-size:var(--size-sm);color:var(--text-2);line-height:var(--leading-body) }
  @media(max-width:1000px){ .terms { grid-template-columns:1fr 1fr } }
  @media(max-width:640px){ .terms { grid-template-columns:1fr } }

  /* Closing CTA panel. */
  .ctapanel { border:1px solid var(--rule-on-ink);border-radius:var(--radius-lg);padding:var(--space-16) var(--space-12);background:var(--ink-1) }
  .formrow { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) }
  @media(max-width:640px){ .formrow { grid-template-columns:1fr } .ctapanel { padding:var(--space-8) var(--space-5) } }

  /* Heading for the your-part / our-part pair. */
  .splith { font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);margin:var(--space-3) 0 var(--space-5) }

  /* Scroll reveal is progressive enhancement: content is visible by default and
     only opts into the hidden-then-animate state once JS confirms an observer. */
  .reveal { opacity:1;transform:none }
  body.js-reveal .reveal { opacity:0;transform:translateY(var(--shift));transition:opacity var(--duration-slow) var(--ease),transform var(--duration-slow) var(--ease) }
  body.js-reveal .reveal.in { opacity:1;transform:none }

/* --------------------------------------------------------- About page only
   Prose measure, the metro locator, the before/after flow map, the numbered
   diagnose-first rail, and the ink proof counters. Ported from the kit's
   ui_kits/marketing/about.html. */
.prose p { margin:0 0 var(--space-5);font-size:var(--size-lead);line-height:var(--leading-lead);color:var(--text-2);text-wrap:pretty }
.prose p:last-child { margin-bottom:0 }
.prose strong { color:var(--text-1);font-weight:var(--weight-semibold) }

.rail { list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden }
.railstep { display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);background:var(--paper-1);padding:var(--space-6) var(--space-8) }
.railstep__n { font-family:var(--font-mono);font-size:var(--size-h4);color:var(--text-3);padding-top:.1rem }
.railstep__b h3 { font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);margin:0 0 .6rem;color:var(--text-1) }
.railstep__b p { margin:0;max-width:74ch;font-size:var(--size-body);line-height:var(--leading-body);color:var(--text-2);text-wrap:pretty }
.railstep__note { display:inline-block;margin-top:var(--space-5);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:.3rem .55rem;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3) }
@media(max-width:720px){ .railstep { grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-6) } }

.proofcount { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-on-ink);border:1px solid var(--rule-on-ink);border-radius:var(--radius-md);overflow:hidden }
.proofcount li { background:var(--ink-1);padding:var(--space-6) }
.proofcount b { display:block;font-family:var(--font-display);font-size:var(--size-h1);font-weight:var(--weight-black);letter-spacing:var(--track-display);line-height:1;color:var(--text-on-ink-1) }
.proofcount > li > span { display:block;margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-3) }
@media(max-width:720px){ .proofcount { grid-template-columns:1fr } }

.flowmap { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-10) }
.fcol { border:1px solid var(--rule);border-radius:var(--radius-md);padding:var(--space-6);background:var(--paper-1) }
.fcol--after { background:var(--ink-0);border-color:var(--ink-0) }
.fcol__h { display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-5);border-bottom:1px solid var(--rule) }
.fcol--after .fcol__h { border-color:var(--rule-on-ink) }
.fcol__t { font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);margin:0;color:var(--text-1) }
.fcol--after .fcol__t { color:var(--text-on-ink-1) }
.fcol__k { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3) }
.fcol--after .fcol__k { color:var(--text-on-ink-3) }
.fsteps { list-style:none;margin:0;padding:0 }
.fstep { display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);padding:var(--space-5) 0;position:relative }
.fstep + .fstep { border-top:1px solid var(--rule-faint) }
.fcol--after .fstep + .fstep { border-top-color:var(--rule-on-ink) }
.fstep__c { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);color:var(--text-3);padding-top:.15rem;white-space:nowrap }
.fcol--after .fstep__c { color:var(--text-on-ink-3) }
.fstep__b { font-size:var(--size-body);line-height:var(--leading-body);color:var(--text-2);text-wrap:pretty }
.fcol--after .fstep__b { color:var(--text-on-ink-2) }
.fstep__b b { display:block;font-weight:var(--weight-semibold);color:var(--text-1);margin-bottom:.2rem }
.fcol--after .fstep__b b { color:var(--text-on-ink-1) }
.fleak { display:flex;align-items:center;gap:var(--space-4);margin:var(--space-4) 0;padding:var(--space-4) var(--space-5);border:1px dashed var(--rule-strong);border-radius:var(--radius-sm);background:var(--paper-2) }
.fleak b { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-1);white-space:nowrap }
.fleak span { font-size:var(--size-sm);line-height:1.45;color:var(--text-2) }
.fcol__f { margin:var(--space-5) 0 0;padding-top:var(--space-5);border-top:1px solid var(--rule);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3) }
.fcol--after .fcol__f { border-top-color:var(--rule-on-ink);color:var(--text-on-ink-3) }
@media(max-width:1000px){ .flowmap { grid-template-columns:1fr } }
@media(max-width:720px){ .fstep { grid-template-columns:1fr;gap:var(--space-2) } }

/* Metro locator. Geometry is projected from real coordinates and baked into
   static SVG at build time — the kit computes it in React on every load. */
.loc { display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--space-12);align-items:center;margin-top:var(--space-10) }
.loc__h { font-family:var(--font-display);font-size:var(--size-h1);font-weight:var(--weight-black);letter-spacing:var(--track-heading);line-height:1.08;margin:var(--space-5) 0 0;color:var(--text-on-ink-1);text-wrap:balance }
.loc__h em { font-style:normal;color:var(--text-on-ink-3) }
.loc__plot { position:relative;aspect-ratio:5/4;border:1px solid var(--rule-on-ink);border-radius:var(--radius-md);background:var(--ink-1);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:40px 40px;overflow:hidden }
.loc__svg { position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none }
.loc__svg .lk { stroke:rgba(255,255,255,.32);stroke-width:.16;opacity:0 }
.loc.on .loc__svg .lk { animation:locFade .7s var(--ease) forwards }
.loc__svg .geo { fill:none;stroke:rgba(255,255,255,.32);stroke-width:.3;stroke-linecap:round;stroke-linejoin:round }
.loc__svg .geo--minor { stroke:rgba(255,255,255,.16);stroke-width:.18 }
.loc__svg .geo--county { stroke:rgba(255,255,255,.13);stroke-width:.16;stroke-dasharray:1.6 1.2 }
.loc__svg .water { fill:none;stroke:rgba(122,158,196,.55);stroke-width:.42;stroke-linecap:round;stroke-linejoin:round }
.loc__svg .water--fill { fill:rgba(122,158,196,.2);stroke:rgba(122,158,196,.45);stroke-width:.22 }
.loc__svg .glab { fill:rgba(255,255,255,.26);font-family:var(--font-mono);font-size:1.9px;letter-spacing:.1px;text-transform:uppercase }
.loc__svg .glab--water { fill:rgba(146,180,214,.62) }
.loc__svg .shield rect { fill:var(--ink-1);stroke:rgba(255,255,255,.38);stroke-width:.14 }
.loc__svg .shield text { fill:rgba(255,255,255,.6);font-family:var(--font-mono);font-size:2.1px;text-anchor:middle }
.loc__ring { position:absolute;width:56%;aspect-ratio:1;border:1px solid rgba(255,255,255,.5);border-radius:50%;transform:translate(-50%,-50%) scale(.15);opacity:0;pointer-events:none }
.loc.on .loc__ring { animation:locPulse 4.2s var(--ease) infinite }
.loc__dot { position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.35rem;white-space:nowrap;opacity:0 }
.loc.on .loc__dot { animation:locPop .5s var(--ease) forwards }
.loc__dot--flip { flex-direction:row-reverse }
.loc__lab { display:flex;align-items:center;gap:.35rem }
.loc__dot--flip .loc__lab { flex-direction:row-reverse }
.loc__dot b, .loc__dot em { background:var(--ink-1);padding:.14rem .32rem;border-radius:2px }
.loc__dot i { display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.62);flex:none }
.loc__dot b { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-2);font-weight:400 }
.loc__dot em { font-style:normal;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);color:var(--text-on-ink-3);opacity:.8 }
.loc__dot--hub i { width:11px;height:11px;background:var(--paper-0);box-shadow:0 0 0 5px var(--ink-1),0 0 0 6px rgba(255,255,255,.55) }
.loc__dot--hub b { font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);text-transform:none;color:var(--text-on-ink-1);margin-left:.25rem }
.loc__note { position:absolute;left:var(--space-5);bottom:var(--space-4);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-3) }
.loc__north { position:absolute;right:var(--space-5);top:var(--space-5);display:flex;flex-direction:column;align-items:center;gap:.2rem;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);color:var(--text-on-ink-3) }
.loc__scale { position:absolute;right:var(--space-5);bottom:calc(var(--space-4) + 1.05rem);width:13.8%;height:6px;border:1px solid rgba(255,255,255,.32);border-top:0 }
.loc__scale-t { position:absolute;right:var(--space-5);bottom:var(--space-4);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-3) }
.loc__list { list-style:none;margin:var(--space-8) 0 0;padding:0;border-top:1px solid var(--rule-on-ink) }
.loc__list li { display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:.55rem 0;border-bottom:1px solid var(--rule-on-ink);font-size:var(--size-sm);color:var(--text-on-ink-2) }
.loc__list em { font-style:normal;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);color:var(--text-on-ink-3) }
@keyframes locFade { from{opacity:0} to{opacity:1} }
@keyframes locPop { from{opacity:0;transform:translate(-50%,-50%) scale(.5)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes locPulse { 0%{opacity:.5;transform:translate(-50%,-50%) scale(.12)} 70%{opacity:0} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)} }
@media(prefers-reduced-motion:reduce){
  .loc.on .loc__svg .lk, .loc.on .loc__dot, .loc.on .loc__ring { animation:none }
  .loc .loc__dot, .loc .loc__svg .lk { opacity:1 }
}
@media(max-width:1000px){ .loc { grid-template-columns:1fr;gap:var(--space-8) } .loc__plot { aspect-ratio:4/3 } }

/* -------------------------------------------------- How it works page only
   Four-up card grid, the your-part/our-part panels, and the contact list in
   the closing panel. Ported from ui_kits/marketing/HowItWorksPage.jsx. */
.grid4 { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4) }
@media(max-width:1000px){ .grid4 { grid-template-columns:1fr 1fr } }
@media(max-width:640px){ .grid4 { grid-template-columns:1fr } }
.split { border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-1);padding:var(--space-8);box-shadow:var(--shadow-seat) }
.split__h { font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);margin:var(--space-3) 0 var(--space-5) }
.hownote { max-width:78ch;margin:var(--space-6) 0 0;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3);line-height:1.6 }
.clist { margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-on-ink);border:1px solid var(--rule-on-ink);border-radius:var(--radius-md);overflow:hidden }
.clist > div { background:var(--ink-1);padding:var(--space-5) }
.clist dt { font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono-wide);text-transform:uppercase;color:var(--text-on-ink-3);margin-bottom:.5rem }
.clist dd { margin:0;font-size:var(--size-sm);line-height:var(--leading-dense);color:var(--text-on-ink-2);overflow-wrap:anywhere }
.clist dd a { color:var(--text-on-ink-1) }
@media(max-width:760px){ .clist { grid-template-columns:1fr } }

/* ------------------------------------------------------- Agents page only
   The agent switcher (seamed rail + panel), its numbered flow, and the
   media frames used by the handoff row. From ui_kits/marketing/AgentsPage.jsx. */
.live { display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.6fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden }
.live__rail { background:var(--paper-2);display:flex;flex-direction:column;gap:1px }
.live__row { display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border:0;background:var(--paper-1);font-family:var(--font-body);font-size:var(--size-sm);color:var(--text-2);text-align:left;cursor:pointer;transition:var(--transition-color) }
.live__row b { font-weight:var(--weight-semibold) }
.live__row:hover { background:var(--accent-wash);color:var(--text-1) }
.live__row.on { background:var(--ink-0);color:var(--text-on-ink-1) }
.live__row:focus-visible { outline:var(--focus);outline-offset:-2px }
.live__ico { display:grid;place-items:center;flex:none;width:24px;height:24px;color:currentColor }
.live__ico svg { width:16px;height:16px;stroke-width:1.75;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round }
.live__panel { background:var(--paper-1);padding:var(--space-6) }
.live__panel[hidden] { display:none }
.live__head { display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--rule-faint) }
.live__ch { font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);color:var(--text-1) }
.live__meta { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3);text-align:right }
.live__voice { margin:var(--space-5) 0 0;font-size:var(--size-lead);font-weight:var(--weight-medium);line-height:1.4;letter-spacing:-.015em;color:var(--text-1);max-width:46ch }
.live__foot { display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--rule-faint) }
.flow { list-style:none;margin:var(--space-6) 0 0;padding:0;position:relative }
.flow__spine { position:absolute;left:15px;top:1.5rem;bottom:1.5rem;width:1px;background:var(--rule);transform-origin:top;animation:flowSpine .55s var(--ease) forwards }
.flow li { position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:var(--space-4);padding:.62rem 0;opacity:0;transform:translateY(7px);animation:flowIn .5s var(--ease) forwards }
.flow__n { grid-column:1;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--rule-strong);border-radius:50%;background:var(--paper-1);font-family:var(--font-mono);font-size:var(--size-micro);font-weight:700;color:var(--accent) }
.flow p { margin:.42rem 0 0;font-size:var(--size-sm);line-height:1.5;color:var(--text-2);text-wrap:pretty }
@keyframes flowIn { to{opacity:1;transform:none} }
@keyframes flowSpine { from{transform:scaleY(0)} to{transform:scaleY(1)} }
@media(prefers-reduced-motion:reduce){ .flow li,.flow__spine { animation:none } .flow li { opacity:1;transform:none } }
@media(max-width:900px){ .live { grid-template-columns:1fr } .live__rail { flex-direction:row;overflow-x:auto } .live__row { flex:none } }
.proofgrid { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) }
@media(max-width:640px){ .proofgrid { grid-template-columns:1fr } }
.mediaframe { border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-1);box-shadow:var(--shadow-seat) }
.mediaframe img { display:block;width:100%;height:auto }
.mediaframe--ink { background:var(--ink-1);border-color:var(--rule-on-ink);box-shadow:none }
.mediaframe--wide { grid-column:1 / -1 }
.mediacap { padding:var(--space-5);border-top:1px solid var(--rule-on-ink) }
.mediacap__k { display:flex;align-items:baseline;gap:var(--space-4);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-3) }
.mediacap b { display:block;margin:.55rem 0 .3rem;font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);color:var(--text-on-ink-1) }
.mediacap span.body { display:block;font-size:var(--size-sm);line-height:var(--leading-body);color:var(--text-on-ink-2);text-wrap:pretty }

/* --------------------------------------------- Websites & apps page only
   The three-up legend, and the per-build stage: one screenshot on show at its
   own natural size with a seamed list of the others beside it. From
   ui_kits/websites-and-apps/. A uniform card grid was tried first and rejected —
   these builds mix portrait phone shots, landscape laptop renders, and a film
   frame, so any single card ratio letterboxed something. */
.three { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;margin-top:var(--space-8) }
.three__cell { background:var(--paper-1);padding:var(--space-6) }
.three__ico { display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--rule);border-radius:var(--radius-sm);color:var(--text-1);margin-bottom:var(--space-5) }
.three__cell h3 { font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);margin:0 0 .6rem;color:var(--text-1) }
.three__cell > p { margin:0 0 var(--space-5);font-size:var(--size-sm);line-height:var(--leading-body);color:var(--text-2);text-wrap:pretty }
.three--legend { margin-top:var(--space-8);margin-bottom:var(--space-4) }
.three--legend .three__cell { padding:var(--space-5) var(--space-6) }
.three--legend .three__cell > p { margin-bottom:0 }
@media(max-width:1100px){ .three { grid-template-columns:1fr } }

.builds { display:flex;flex-direction:column;gap:var(--space-20);margin-top:var(--space-10) }
.build__head { display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding-bottom:var(--space-6);margin-bottom:var(--space-8);border-bottom:1px solid var(--rule) }
.build__ix { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3) }
.build__id { display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap }
.build__name { font-family:var(--font-display);font-size:var(--size-h2);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);margin:0;color:var(--text-1) }
.build__desc { margin:0;max-width:64ch;font-size:var(--size-body);line-height:var(--leading-body);color:var(--text-2);text-wrap:pretty }
.build--band { background:var(--paper-1);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:var(--space-10) }
.bswitch { display:grid;grid-template-columns:1.5fr .85fr;gap:var(--space-8);align-items:stretch }
.bswitch--flip { grid-template-columns:.85fr 1.5fr }
.bswitch--flip .bstage { order:2 } .bswitch--flip .blist { order:1 }
.bstage { position:relative;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper-2);display:grid;place-items:center;padding:var(--space-8);min-height:500px;overflow:hidden }
.bstage img { display:block;width:auto;height:auto;max-width:100%;max-height:412px;border-radius:var(--radius-sm);box-shadow:var(--shadow-overlay) }
.bstage img[hidden] { display:none }
.bstage--tall { min-height:660px }
.bstage--tall img { max-height:600px;border-radius:var(--radius-lg) }
.bstage__tag { position:absolute;left:var(--space-5);bottom:var(--space-5);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3) }
.shot__film { position:absolute;left:var(--space-5);top:var(--space-5);font-family:var(--font-mono);font-size:var(--size-micro);font-weight:700;letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-1);background:rgba(11,13,16,.72);border:1px solid rgba(255,255,255,.28);border-radius:var(--radius-xs);padding:.2rem .45rem }
.shot__film[hidden] { display:none }

/* Phone carousel — a coverflow of studio renders, used where a build has more
   screens than a single still can carry. The renders arrive with their own
   device frame, lighting, and reflection, so there is no CSS bezel here; a
   drawn frame around a photographed one reads as a mistake.

   The stage variant drops .bstage's padding and goes ink, because both sources
   it holds are dark — on the default paper stage the film's letterbox and the
   renders' backgrounds both sat as dark blocks inside a light panel. */
.bstage--dual { padding:0;background:var(--ink-0);border-color:var(--rule-on-ink) }
.bstage--dual > video { display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit }
.bstage--dual > [hidden] { display:none }

.pcar { position:relative;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;padding:var(--space-6) 0;overflow:hidden;border-radius:inherit }
.pcar:focus-visible { outline:2px solid var(--text-on-ink-1);outline-offset:-2px }
/* Ambient glow and floor. The renders are lit by a warm key from the left and a
   cool rim from the right; the stage repeats that lighting and runs one shared
   gradient beneath them, so four separately-shot reflections read as one
   surface instead of four cards pinned on black. */
.pcar::before { content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(58% 46% at 38% 52%, rgba(255,106,26,.20), transparent 70%),
             radial-gradient(48% 40% at 66% 46%, rgba(150,190,255,.11), transparent 72%);
  opacity:0;transition:opacity 900ms var(--ease) 160ms }
.pcar::after { content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, transparent, rgba(255,106,26,.07) 55%, rgba(255,140,70,.10)),
             linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  opacity:0;transition:opacity 900ms var(--ease) 240ms }
.pcar.is-lit::before, .pcar.is-lit::after { opacity:1 }

.pcar__vp { position:relative;z-index:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent) }
/* left:50% puts the track's origin at the viewport centre — a percentage
   translate would resolve against the track's own width, which is n slots wide
   and would drift as screens are added. From there it shifts back half a slot
   plus one slot per index, landing slot --i dead centre for any n. */
.pcar__track { --slot:clamp(200px, 24vw, 300px);position:relative;left:50%;width:max-content;display:flex;align-items:center;
  transform:translateX(calc(-1 * (var(--slot) / 2) - var(--i, 0) * var(--slot)));
  transition:transform 620ms cubic-bezier(.16,1,.3,1) }
/* min-width:0 is load-bearing. The phone is deliberately wider than its slot so
   the renders overlap, and a flex item's default min-width:auto would let that
   content stretch the slot past --slot — the track translates by --slot per
   index, so every slot would drift further off centre than the last. */
.pcar__slot { flex:0 0 var(--slot);min-width:0;display:grid;place-items:center }
/* The negative inline margins are what centre the phone. An overflowing grid
   item gets "safe" alignment — the engine falls back to start rather than
   centring — so pulling half the overflow back on each side makes the margin
   box exactly one slot wide, leaving no overflow to align unsafely. */
.pcar__phone { position:relative;width:calc(var(--slot) * 1.12);margin-inline:calc(var(--slot) * -.06);
  aspect-ratio:880/1310;z-index:1;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent), linear-gradient(#000 0 100%);
  mask-image:linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent), linear-gradient(#000 0 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  transform:translateX(var(--px)) scale(var(--s));
  filter:brightness(var(--br)) saturate(var(--sat)) blur(var(--bl));
  transition:transform 620ms cubic-bezier(.16,1,.3,1), filter 620ms var(--ease) }
.pcar__phone img { display:block;width:100%;height:100%;object-fit:cover;max-height:none;border-radius:0;box-shadow:none }
/* Depth ladder. --d is unsigned distance from centre and --sd the signed one.
   Neighbours take a real defocus rather than only a dim, matching the bokeh
   already in the renders; --px pulls them back toward the centre so the row
   compresses with distance the way a lens would, rather than marching at an
   even pitch. */
.pcar__slot { --s:.78; --sat:.5;  --br:.5;  --bl:5px;   --px:0px; z-index:0 }
.pcar__slot[data-d="0"] { --s:1;   --sat:1;   --br:1;   --bl:0px;   z-index:3 }
.pcar__slot[data-d="1"] { --s:.88; --sat:.8;  --br:.72; --bl:2.4px; z-index:2 }
.pcar__slot[data-d="2"] { --s:.81; --sat:.6;  --br:.58; --bl:4px;   z-index:1 }
.pcar__slot[data-sd="-1"] { --px:5% }  .pcar__slot[data-sd="1"] { --px:-5% }
.pcar__slot[data-sd="-2"] { --px:11% } .pcar__slot[data-sd="2"] { --px:-11% }
.pcar__slot[data-sd="-3"] { --px:16% } .pcar__slot[data-sd="3"] { --px:-16% }

.pcar__ctl { position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:var(--space-5);margin-top:var(--space-6) }
.pcar__ctl .sais-ibtn { background:rgba(255,255,255,.07);border-color:var(--rule-on-ink-strong);color:var(--text-on-ink-1) }
.pcar__ctl .sais-ibtn:hover { background:rgba(255,255,255,.14);color:#fff }
/* The active dot wears a ring that sweeps over the autoplay interval, so the
   rotation reads as a timer running rather than the carousel twitching on its
   own. --dot-p is registered so the conic stop can animate at all; browsers
   without @property just show the plain dot. */
@property --dot-p { syntax:'<percentage>'; inherits:false; initial-value:0% }
.pcar__dots { display:flex;align-items:center;gap:.6rem }
.pcar__dot { position:relative;appearance:none;border:0;padding:0;cursor:pointer;width:7px;height:7px;border-radius:50%;background:var(--rule-on-ink-strong);transition:background var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease) }
.pcar__dot[aria-selected=true] { background:#fff;transform:scale(1.15) }
.pcar__dot::after { content:"";position:absolute;inset:-5px;border-radius:50%;opacity:0;
  background:conic-gradient(#fff var(--dot-p), transparent 0);
  -webkit-mask:radial-gradient(closest-side, transparent 68%, #000 70%);
  mask:radial-gradient(closest-side, transparent 68%, #000 70%) }
.pcar__dot[aria-selected=true].is-timing::after { opacity:.9;animation:sais-dot-sweep var(--auto,3600ms) linear }
@keyframes sais-dot-sweep { from { --dot-p:0% } to { --dot-p:100% } }
.pcar__dot:focus-visible { outline:2px solid var(--text-on-ink-1);outline-offset:5px }
@media (prefers-reduced-motion:reduce){ .pcar__track,.pcar__phone { transition:none } }
.blist { display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--rule) }
.brow { appearance:none;font:inherit;color:inherit;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);border-left:2px solid transparent;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);padding:var(--space-5) var(--space-4);transition:background var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease) }
.brow:hover { background:var(--paper-1) }
.brow:focus-visible { outline:var(--focus);outline-offset:-2px }
.brow__n { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);color:var(--text-3);padding-top:.15rem }
.brow__txt { display:block }
.brow__txt b { display:block;font-family:var(--font-display);font-size:var(--size-h4);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);color:var(--text-2);margin-bottom:.3rem;transition:color var(--duration-fast) var(--ease) }
.brow__txt span { display:block;font-size:var(--size-sm);line-height:var(--leading-body);color:var(--text-3);text-wrap:pretty }
.brow[aria-selected=true] { background:var(--paper-1);border-left-color:var(--ink-0) }
.brow[aria-selected=true] .brow__n,.brow[aria-selected=true] .brow__txt b { color:var(--text-1) }
.brow[aria-selected=true] .brow__txt span { color:var(--text-2) }
.slinks { display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-top:var(--space-2) }
.slink { display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:var(--space-4);text-decoration:none;border:1px solid var(--ink-0);border-radius:var(--radius-md);padding:.62rem var(--space-5);background:var(--ink-0);color:var(--paper-0);transition:background .18s,color .18s,border-color .18s }
.slink:hover { background:var(--paper-0);color:var(--ink-0) }
.slink:focus-visible { outline:var(--focus);outline-offset:2px }
.slink--web { background:var(--paper-0);color:var(--ink-0);border-color:var(--rule-strong) }
.slink--web:hover { background:var(--ink-0);color:var(--paper-0) }
.slink__gl { display:grid;place-items:center;width:20px;height:20px }
.slink__gl svg { width:100%;height:100%;fill:currentColor;display:block }
.slink__tx { display:block;line-height:1.1 }
.slink__tx em { display:block;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;font-style:normal;opacity:.72;margin-bottom:.18rem;white-space:nowrap }
.slink__tx b { display:block;font-family:var(--font-display);font-size:var(--size-body);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);white-space:nowrap }
.bookgrid { display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-12) }
@media(max-width:1100px){ .bswitch,.bswitch--flip { grid-template-columns:1fr } .bswitch--flip .bstage,.bswitch--flip .blist { order:0 } .bookgrid { grid-template-columns:1fr;gap:var(--space-10) } }
@media(max-width:720px){ .build--band { padding:var(--space-6) } }
@media(max-width:640px){ .bstage { min-height:340px;padding:var(--space-5) } .bstage img { max-height:280px } .bstage--tall { min-height:460px } .bstage--tall img { max-height:400px } }
/* The longest hostname (gcpremierpropertygroup.com) is 287px of nowrap text and
   pushed a 320px viewport sideways. Below 420px the label is allowed to wrap. */
.slink { max-width:100% }
@media(max-width:420px){
  .slink { grid-template-columns:auto minmax(0,1fr) }
  .slink__tx em, .slink__tx b { white-space:normal;overflow-wrap:anywhere }
}
/* A build stage can hold a film as well as a still. */
.bstage video { display:block;width:auto;height:auto;max-width:100%;max-height:412px;border-radius:var(--radius-sm);box-shadow:var(--shadow-overlay) }
.bstage--tall video { max-height:600px;border-radius:var(--radius-lg) }
.bstage video[hidden] { display:none }
@media(max-width:640px){ .bstage video { max-height:280px } .bstage--tall video { max-height:400px } }
/* The stage caption is absolutely positioned, so the stage needs clearance for
   it — otherwise a tall shot runs underneath the label. */
.bstage { padding-bottom:calc(var(--space-8) + 1.4rem) }
@media(max-width:640px){ .bstage { padding-bottom:calc(var(--space-5) + 1.4rem) } }

/* ---------------------------------------------------------- Blog kit
   Index feed with image thumbnails, and the article measure. From
   ui_kits/blog/. The blog keeps the same type as the rest of the system —
   the old build used a separate editorial stack. */
.feed { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) }
.post { display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-1);box-shadow:var(--shadow-seat);overflow:hidden;text-decoration:none;color:inherit;transition:var(--transition-ui) }
.post:hover { border-color:var(--rule-strong);box-shadow:var(--shadow-raise);transform:translateY(-1px);color:inherit }
.post:focus-visible { outline:var(--focus);outline-offset:var(--focus-offset) }
.post--feat { grid-column:1 / -1 }
.post--feat .thumb { aspect-ratio:16/6 }
.thumb { position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--rule) }
.thumb img { width:100%;height:100%;object-fit:cover;display:block }
.cat { position:absolute;left:var(--space-4);top:var(--space-4);z-index:1;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-on-ink-1);background:rgba(11,13,16,.78);border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-xs);padding:.22rem .5rem }
.pbody { display:flex;flex-direction:column;gap:.55rem;padding:var(--space-6);flex:1 }
.flag { align-self:flex-start;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:var(--weight-bold);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-edge);background:var(--accent-wash);border-radius:var(--radius-xs);padding:.18rem .42rem }
.pbody h3 { font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);line-height:var(--leading-dense);color:var(--text-1);margin:0;text-wrap:balance }
.pbody > p { margin:0;font-size:var(--size-sm);line-height:var(--leading-body);color:var(--text-2);text-wrap:pretty }
.pmeta { display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--rule-faint);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3) }
.post:hover .pmeta { color:var(--text-1) }
@media(max-width:820px){ .feed { grid-template-columns:1fr } .post--feat .thumb { aspect-ratio:16/9 } }

/* Article */
.wrapp { width:var(--container-prose);margin-inline:auto }
.artframe { margin:var(--space-8) 0;border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-1) }
.artframe img { display:block;width:100%;height:auto }
.article { max-width:var(--measure-prose) }
.article p { margin:0 0 var(--space-5);font-size:var(--size-lead);line-height:var(--leading-lead);color:var(--text-2);text-wrap:pretty }
.article h2 { font-family:var(--font-display);font-size:var(--size-h2);font-weight:var(--weight-black);letter-spacing:var(--track-display);line-height:var(--leading-heading);color:var(--text-1);margin:var(--space-12) 0 var(--space-5);text-wrap:balance }
.article h3 { font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-bold);letter-spacing:var(--track-heading);color:var(--text-1);margin:var(--space-8) 0 var(--space-4) }
.article ul,.article ol { margin:0 0 var(--space-5);padding-left:1.2rem;color:var(--text-2);font-size:var(--size-lead);line-height:var(--leading-lead) }
.article li { margin-bottom:.5rem }
.article strong { color:var(--text-1);font-weight:var(--weight-semibold) }
.article a { text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--accent-edge) }
.article table { width:100%;border-collapse:collapse;margin:0 0 var(--space-6);font-size:var(--size-sm) }
.article th,.article td { border:1px solid var(--rule);padding:.65rem .8rem;text-align:left;vertical-align:top }
.article th { background:var(--paper-2);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3);font-weight:var(--weight-bold) }
.article figure { margin:var(--space-8) 0 }
.article img { border:1px solid var(--rule);border-radius:var(--radius-lg) }
.artmeta { font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3) }
.sais-crumb { display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-6) }
.sais-crumb a { color:var(--text-3) } .sais-crumb a:hover { color:var(--text-1) }
.sais-crumb span[aria-current] { color:var(--text-1) }
.sais-quote { margin:var(--space-10) 0;padding:var(--space-6) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule) }
.sais-quote p { font-family:var(--font-display);font-size:var(--size-h3);font-weight:var(--weight-medium);line-height:1.35;letter-spacing:var(--track-heading);color:var(--text-1);margin:0 }
.sais-quote footer { margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-3) }