/* Operator Studio — Shared Component Styles
   Reusable across ALL surfaces. No surface-specific rules here.
   Depends on base-tokens.css. */

/* ── Cross-document view transitions — one CSS line, native-app page nav feel.
   Progressive enhancement: browsers that don't support it ignore the rule.
   Craft punch-list item 4 (2026-06-13). */
@view-transition { navigation: auto; }

/* ── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
body{min-height:100vh;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5;overflow-x:hidden;touch-action:manipulation;overscroll-behavior-y:contain}
button{font-family:var(--font-ui);cursor:pointer;border:none;outline:none;min-height:var(--control-min)}
input,select,textarea{font-family:var(--font-ui);border:none;outline:none;font-size:16px;max-width:100%}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
a{color:var(--accent);text-decoration:none}
img,canvas{display:block;max-width:100%}

/* ── Layout containers ───────────────────────────────────────── */
.container{width:min(var(--content-lg),100%);margin:0 auto}
.shell{width:min(var(--content-xl),100%);margin:0 auto}
.shell-narrow{width:min(var(--content-sm),100%);margin:0 auto}
body[data-os-shell="page"],body[data-os-shell="post"]{overflow-x:hidden;background-image:radial-gradient(circle,var(--texture-dot) 1px,transparent 1px);background-size:24px 24px}
/* Page shell rides the same fluid gutter as the header/home sections. The home
   page (data-os-home) is full-bleed: its own --h-wrap + header carry the gutter,
   so zero body padding there. */
body[data-os-shell="page"]{padding:0 var(--page-gutter) var(--space-8)}
body[data-os-home]{padding-left:0;padding-right:0}
body[data-os-shell="post"]{padding:0 0 var(--space-8)}

/* ── Typography ───────────────────────────────────────────────── */
/* One grotesk runs display + body (Swiss discipline), driven by --font-display /
   --font-body (Archivo by default; the eval toggle can swap to Helvetica). */
h1{margin:0;font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--fs-hero);font-weight:600;line-height:1.04;letter-spacing:-.015em;color:var(--text)}
h2{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--fs-feature);font-weight:600;color:var(--text);margin-bottom:var(--space-4);letter-spacing:-.01em}
h3{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--fs-title);font-weight:600;color:var(--text);letter-spacing:-.01em}
/* kicker uses --accent-ink: the darkened brand purple so it stays AA-legible on
   the warm paper, while the full --accent is reserved for the pill / fills. */
.kicker{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-ink);margin-bottom:var(--space-stack-md);font-weight:600}
.eyebrow,.label{font-family:var(--font-mono);font-size:var(--fs-label);line-height:1.3;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3)}
.lead{color:var(--text-2);max-width:var(--content-readable);margin-bottom:var(--space-stack-xl)}
.mono{font-family:var(--font-mono)}
.small{font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.4;color:var(--text-2)}
.muted{color:var(--text-2)}
code{font-family:var(--font-mono);color:var(--text);background:var(--surface-2);padding:2px 6px;border-radius:var(--r)}

/* ── Sections (content-page block rhythm — owned here, not per page) ── */
.sec{padding:var(--space-section) 0;border-bottom:1px solid var(--border)}
.sec:last-of-type{border-bottom:none}
/* Content-page hero heading — scoped to .sec so tool pages (agents/governance,
   .tool-intro) and prose pages keep their own h1; matches the value 10 content
   pages were each declaring inline. */
.sec h1, .hero h1{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--fs-hero);line-height:1.04;font-weight:600;letter-spacing:-.018em;margin-bottom:var(--space-stack-lg)}

/* ── Cards & Panels ──────────────────────────────────────────── */
.card,.panel{border:var(--border-w) solid var(--border);border-radius:var(--r-card);background:var(--surface);padding:var(--space-panel);min-width:0;box-shadow:var(--shadow-card);transition:transform .2s ease,box-shadow .25s ease,border-color .15s,background .15s}
.card:hover{border-color:var(--accent-border);background:var(--surface-2);transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 12px;border-bottom:var(--border-w) solid var(--border-soft)}
.panel-title{font-family:var(--font-ui);font-size:var(--fs-title);font-weight:700;color:var(--text)}
.panel-body{padding:12px}
.empty{padding:var(--space-panel);border:var(--border-w) solid var(--border-soft);border-radius:var(--r);color:var(--text-2);font-family:var(--font-mono);font-size:var(--fs-body);text-align:center}
.error{color:var(--loss);padding:var(--space-panel);text-align:center;font-family:var(--font-mono);font-size:var(--fs-body)}

/* ── Grids ───────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
@media(min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;min-width:var(--table-min);border-collapse:collapse}
thead th{padding:10px 8px;border-bottom:var(--border-w) solid var(--border-soft);text-align:left;vertical-align:top;font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3);font-weight:500}
tbody td{padding:10px 8px;border-bottom:var(--border-w) solid var(--border-soft);font-family:var(--font-mono);font-size:var(--fs-body);color:var(--text);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.pos{color:var(--profit)}
.neg{color:var(--loss)}

/* ── Tags & Badges ───────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;min-height:26px;padding:2px 8px;border:var(--border-w) solid var(--border);border-radius:var(--r);background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-sm);text-transform:uppercase;color:var(--text)}
.tag.up,.tag.long,.tag.buy{color:var(--profit);border-color:var(--profit-border);background:var(--profit-dim)}
.tag.down,.tag.short,.tag.sell{color:var(--loss);border-color:var(--loss-border);background:var(--loss-dim)}
.tag.open{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim)}
.tag.warn{color:var(--warn);border-color:var(--warn-border);background:var(--warn-dim)}
.tag.paper{opacity:.6}

/* ── Status indicators ───────────────────────────────────────── */
.dot{width:9px;height:9px;border-radius:50%;background:var(--text-3);flex-shrink:0}
.dot.up{background:var(--profit);box-shadow:0 0 16px var(--profit-dim)}
.dot.down{background:var(--loss);box-shadow:0 0 16px var(--loss-dim)}
.dot.warn{background:var(--warn);box-shadow:0 0 16px var(--warn-dim)}
.dot.dead{background:var(--text-3)}

/* ── Buttons — Swiss geometry, Y2K gloss, pagepilot-tactile (2026-06-15) ──
   Pill geometry, grotesk weight. The signature CTA is the brand-purple pill
   with a glossy Y2K top-light and a soft purple glow. Tightened toward the
   reference's tactile feel: a crisp lift on hover (translateY -2 + a faint
   scale-up) and a REAL press state on :active (settle to baseline + scale
   0.97). One press physics for every variant via :active below. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--control-min);padding:0 24px;border:var(--border-w) solid var(--text);border-radius:var(--r-pill);background:transparent;color:var(--text);font-family:var(--font-ui);font-size:var(--fs-value);font-weight:600;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;overflow:hidden;will-change:transform;
  transition:background var(--t-fast) var(--ease-snap),border-color var(--t-fast),transform var(--t-fast) var(--ease-snap),box-shadow var(--t-base) var(--ease-snap),color var(--t-fast)}
.btn:hover,.btn:focus-visible{background:var(--text);color:var(--bg);transform:translateY(-2px) scale(1.02)}
/* Primary = brand-purple pill with a glossy top-light + purple glow — the Y2K pop. */
.btn-primary{background:var(--accent);color:var(--accent-deep);border-color:transparent;font-weight:600;box-shadow:0 10px 26px -10px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gloss);pointer-events:none;opacity:.9;transition:opacity var(--t-base)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--accent-2);color:var(--accent-deep);transform:translateY(-2px) scale(1.02);box-shadow:0 22px 48px -14px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-primary:hover::before{opacity:1}
/* Secondary — clean indigo soft-tint: legible, on-system, coheres with the
   purple pill without competing with it (replaced the muddy chrome face). */
.btn-chrome{background:var(--accent-dim);color:var(--accent-ink);border-color:var(--accent-border);font-weight:600}
.btn-chrome:hover,.btn-chrome:focus-visible{background:var(--accent);color:var(--accent-deep);border-color:var(--accent);transform:translateY(-2px) scale(1.02);box-shadow:0 16px 38px -16px var(--accent-glow)}
/* Dark solid — for use on light bands where an ink CTA is wanted. */
.btn-dark{background:var(--text);color:var(--bg);border-color:transparent;font-weight:600}
.btn-dark:hover,.btn-dark:focus-visible{transform:translateY(-2px) scale(1.02);opacity:.92;color:var(--bg)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{color:var(--text);background:var(--card-hover);border-color:transparent;transform:translateY(-2px) scale(1.02)}
/* Real press — settle to baseline, scale down a touch, collapse the shadow.
   One physics for every variant (the reference's active:scale-[0.98] feel). */
.btn:active{transform:translateY(0) scale(.97);box-shadow:0 4px 12px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.3);transition-duration:.06s}
@media(prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none!important}}

/* ── Consistent CTA arrow — one icon, one size/baseline on every button ──────
   Marketing CTAs carry a trailing arrow. Whether authored as a bare "→" glyph
   in the label or wrapped in <span class="h-arr">/<span class="btn-arr">, the
   arrow now renders at a uniform optical size, vertically centred on the cap,
   and slides on hover. Inline-flex + line-height:1 kills the baseline drift the
   raw glyph had between the primary pill and the soft-tint secondary. */
.h-arr{display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:transform var(--t-base) var(--spring)}
.btn>.h-arr,.btn>.btn-arr{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:1.02em;transform:translateX(0);transition:transform var(--t-base) var(--spring)}
.btn:hover>.h-arr,.btn:hover>.btn-arr,.btn:focus-visible>.h-arr,.btn:focus-visible>.btn-arr{transform:translateX(4px)}
.btn:active>.h-arr,.btn:active>.btn-arr{transform:translateX(2px)}

/* ── Metrics ──────────────────────────────────────────────────── */
.metric-label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-3);margin-bottom:4px}
.metric-value{font-family:var(--font-mono);font-size:var(--fs-metric);line-height:1.1;color:var(--text)}
.metric-sub{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2);margin-top:2px}

/* ── Top ticker strip (always visible, side-fade, scroll-adjusts) ──── */
.os-ticker {
  position: sticky;
  top: var(--strip, 48px);
  left: 0; right: 0;
  z-index: calc(var(--shell-z, 80) - 1);
  height: var(--status-footer-h, 34px);
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border-soft);
  opacity: 1;
  transition: background .4s cubic-bezier(.4,0,.2,1),
              border-color .4s;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
.os-ticker.is-scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom-color: var(--border);
}
.os-dot{width:var(--status-dot-size);height:var(--status-dot-size);border-radius:50%;background:var(--text-3);flex-shrink:0;transition:background .4s,box-shadow .4s}
.os-dot.ok{background:var(--profit);box-shadow:var(--status-dot-glow-profit)}
.os-dot.warn{background:var(--warn);box-shadow:var(--status-dot-glow-warn)}
.os-ticker-track{display:flex;height:100%;animation:os-ticker-scroll 28s linear infinite}
.os-ticker-track:hover{animation-play-state:paused}
.os-ticker-segment{display:inline-flex;align-items:center;gap:14px;padding:0 80px 0 var(--space-page-x);white-space:nowrap;flex-shrink:0;font-family:var(--font-mono);font-size:var(--status-footer-fs);color:var(--text-2)}
.os-ticker-sep{color:var(--text-4)}
.os-ticker-link{color:var(--accent);text-decoration:none;font-weight:700;letter-spacing:.02em;transition:opacity .15s}
.os-ticker-link:hover{opacity:.75}
@keyframes os-ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.os-ticker-track{animation:none;overflow-x:auto}}

/* Mobile: ticker flows naturally, not sticky — prevents content overlap */
@media (max-width: 560px) {
  .os-ticker {
    position: static;
    top: auto;
  }
  body[data-os-ticker] {
    scroll-padding-top: var(--strip, 48px);
  }
}

/* ── Command / List rows ────────────────────────────────────── */
.cmd-grid{display:grid;grid-template-columns:1fr;gap:8px}
.cmd-row,.health-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border:var(--border-w) solid var(--border-soft);border-radius:var(--r);background:var(--surface)}
.cmd-copy{min-width:0}
.cmd-title{font-family:var(--font-mono);font-size:var(--fs-body);color:var(--text);overflow-wrap:anywhere}
.cmd-meta{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2);margin-top:2px}
.breaker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.breaker{border:var(--border-w) solid var(--border-soft);border-radius:var(--r);background:var(--surface);padding:8px}
.breaker strong{display:block;font-family:var(--font-mono);font-size:var(--fs-body);color:var(--text);margin-top:4px}

/* ── Feed / Health lists ────────────────────────────────────── */
.health-list,.feed-list{display:grid;gap:8px}
.feed-row{display:grid;grid-template-columns:1fr auto;align-items:start;gap:10px;min-height:48px;padding:9px 10px;border:var(--border-w) solid var(--border-soft);border-radius:var(--r);background:var(--surface)}
.feed-main{min-width:0}
.feed-title{font-family:var(--font-mono);font-size:var(--fs-body);color:var(--text);overflow-wrap:anywhere}
.feed-meta{margin-top:3px;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-2)}

/* ── Mobile cards (alternative to tables on mobile) ─────────── */
.mobile-cards{display:grid;gap:8px}
.signal-card,.backtest-card{padding:var(--space-panel);border:var(--border-w) solid var(--border-soft);border-radius:var(--r);background:var(--surface)}
.card-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:var(--border-w) solid var(--border-soft)}
.card-line:last-child{border-bottom:0}
.card-line .small{text-transform:uppercase;letter-spacing:var(--track-label)}
.card-line strong{font-family:var(--font-mono);font-size:var(--fs-body);font-weight:500;text-align:right;overflow-wrap:anywhere}

/* ── Utility ─────────────────────────────────────────────────── */
.desktop-only{display:none}
@media(min-width:760px){.desktop-only{display:block}}
@media(max-width:760px){.mobile-only{display:block}}

/* ── Reduced motion ──────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ── Feature list ────────────────────────────────────────────── */
.feature-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-stack-lg);padding:0;list-style:none}
.feature-list li{padding:var(--space-3) 0;border-bottom:1px solid var(--border-soft);font-size:var(--fs-body);color:var(--text-2);line-height:1.6}
.feature-list li:last-child{border-bottom:none}
.feature-list li strong{color:var(--text)}

/* ── Subnav grid ─────────────────────────────────────────────── */
.subnav-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:var(--space-stack-lg)}
@media(min-width:640px){.subnav-grid{grid-template-columns:1fr 1fr}}
/* Nav-card affordance (#222): tap targets must read pre-attentively on mobile
   (no hover) — uniform 1px tinted border + trailing chevron + slight elevation.
   (#212: no directional left-stroke; the affordance is the accent chevron.) */
.subnav-card{position:relative;display:block;padding:var(--space-panel);padding-right:calc(var(--space-panel) + 22px);border:1px solid var(--accent-border);border-radius:var(--r-card);background:var(--surface-2);box-shadow:var(--shadow-card);transition:border-color .15s,background .15s,transform .2s ease,box-shadow .25s ease;text-decoration:none}
.subnav-card::after{content:"→";position:absolute;top:var(--space-panel);right:var(--space-panel);color:var(--accent);font-family:var(--font-mono);font-size:var(--fs-body);line-height:1}
.subnav-card:active{transform:translateY(0)}
.subnav-card:hover{border-color:var(--accent-border);background:var(--surface);transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.subnav-card h3{font-size:var(--fs-title);font-weight:700;margin-bottom:4px;color:var(--text)}
.subnav-card p{font-size:var(--fs-body);color:var(--text-3);line-height:1.5}

/* ── Status pill (Active / In development) ────────────────────── */
.status-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--fs-xxs);letter-spacing:var(--track-label);text-transform:uppercase;border-radius:var(--r);padding:3px 8px;margin-bottom:var(--space-stack-md)}
.status-pill.active{color:var(--profit);border:var(--border-w) solid var(--profit-border);background:var(--profit-dim)}
.status-pill.active::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--profit);flex-shrink:0;animation:pulse-dot 2.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--profit-border)}60%{opacity:.5;box-shadow:0 0 0 3px transparent}}
.status-pill.dev{color:var(--text-3);border:var(--border-w) solid var(--border);background:var(--surface-2)}

/* ── Differentiator grid ──────────────────────────────────────── */
.diff-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:var(--space-stack-lg)}
@media(min-width:640px){.diff-grid{grid-template-columns:1fr 1fr}}
.diff-card{padding:var(--space-panel);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-card);transition:transform .2s ease,box-shadow .25s ease}
.diff-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.diff-card h3{font-size:var(--fs-title);font-weight:700;margin-bottom:6px;color:var(--text)}
.diff-card p{font-size:var(--fs-body);color:var(--text-3);line-height:1.55}

/* ── Live proof block ─────────────────────────────────────────── */
/* Live-data treatment: green-tinted panel + the pulsing .live-dot in the kicker
   above mark this as real-time system output, distinct from static/nav cards (#222).
   (#212: uniform 1px tinted border; the green tint + live-dot carry the live signal,
   not a directional left-stroke.) */
.proof-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-stack-lg);margin-bottom:var(--space-stack-lg);background:var(--profit-dim);border:1px solid var(--profit-border);border-radius:var(--r);padding:var(--space-panel)}
.proof-stat{display:flex;flex-direction:column;gap:4px;min-width:100px}
.proof-val{font-family:var(--font-mono);font-size:var(--fs-value);font-weight:600;color:var(--text);line-height:1.1}
.proof-lbl{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.muted-note{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-4);line-height:1.5;margin-top:var(--space-stack-sm)}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--profit);box-shadow:0 0 0 0 var(--profit-border);animation:pulse-dot 2.4s ease-in-out infinite;margin-right:7px;vertical-align:middle}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* ── Gate block (locked content preview) ──────────────────────── */
.gate-list{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-stack-lg)}
.gate-block{border:var(--border-w) solid var(--border);border-radius:var(--r);padding:var(--space-panel);background:var(--surface);display:flex;align-items:center;gap:var(--space-8)}
.gate-label{font-size:var(--fs-body);color:var(--text-2);flex:1;line-height:1.4}
.gate-label small{display:block;font-family:var(--font-mono);font-size:var(--fs-xxs);color:var(--text-4);letter-spacing:.04em;text-transform:uppercase;margin-top:3px}
.gate-hint{font-family:var(--font-mono);font-size:var(--fs-xxs);color:var(--text-4);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

/* ── Site footer ─────────────────────────────────────────────── */
/* 2026-05-31: full-bleed surface band owned entirely by shared CSS.
   Bleed is body-padding-independent — calc(50% - 50vw) lands the left edge
   on the viewport edge whether the parent is full-width-padded (most pages),
   zero-padded (long-form posts), or a centered column.
   The scrollbar-width sliver from 100vw is clipped by body{overflow-x:hidden},
   which every active page now sets. Content stays in the gutter via padding. */
.os-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Footer rides the SAME shared gutter + outer max-width as the header and every
     homepage section (--page-gutter / --page-max), so the "operator studio"
     wordmark's left edge aligns exactly to the header wordmark and the hero H1.
     The full-bleed band is painted edge-to-edge; the inner content keeps the
     gutter via an inner wrap (.os-footer-grid / -bottom max-width:--page-max). */
  padding: clamp(56px, 7vw, 80px) var(--page-gutter) var(--space-12);
  /* Footer band: warm near-black with a faint brand-purple wash at the top edge —
     the same dark-band language as the homepage. */
  background:
    radial-gradient(90% 130% at 50% 0%, var(--accent-dim), transparent 62%),
    var(--ink);
  color: var(--on-dark);
  border-top: 1px solid var(--ink-3);
  /* No margin-top: the preceding section already supplies its full bottom padding,
     and the footer has its own top padding (clamp 56–80px). The old margin-top
     stacked a THIRD gap (section bottom + margin + footer top) → a white dead band
     before the dark footer. Removed; the two paddings alone give a clean gap. */
}
:root[data-theme="dark"] .os-footer { color: var(--on-dark); }
.os-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
  width: 100%;
  /* Inner wrap rides the SAME outer max-width as the header (--page-max) on
     EVERY surface, so the footer "operator studio" wordmark's left edge is
     pixel-identical to the header wordmark sitewide (home + content pages).
     The header is full-bleed everywhere, capped at --page-max with --page-gutter
     padding; the footer band is also full-bleed with --page-gutter padding, so
     capping this inner grid at the same --page-max + auto-margins lands both left
     edges on the shared gutter. Body PROSE columns stay narrow via .container —
     only this brand chrome aligns to the header. */
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .os-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .os-footer-grid { grid-template-columns: 1fr; }
}
.os-footer-bottom {
  width: 100%;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

/* Footer is a fixed dark band in BOTH themes — colors are light-on-dark literals,
   not theme tokens, so it reads coherently with the homepage dark sections. */
.os-footer-logo-slot { margin-bottom: 8px; }
/* Canonical wordmark logotype (brand-guidelines §6): same weight (800), casing
   (lowercase), tracking (-.02em) and face as the nav .os-wordmark; the ONLY
   permitted variation is optical size — 15px here vs 17px in the nav. */
.os-footer-wordmark {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  transition: color .12s;
}
.os-footer-wordmark:hover { color: var(--accent); }
.os-footer-tagline {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  margin-top: 6px;
}
.os-footer-col-head {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);  /* AA at 9px on --ink (was .4 = 3.81:1) */
  margin-bottom: 12px;
}
.os-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.os-footer-links a {
  font-size: var(--fs-body);
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .12s;
}
.os-footer-links a:hover { color: #fff; }

.os-footer-social { display: flex; gap: 8px; margin-bottom: 16px; }
.os-social-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  text-decoration: none;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.os-social-btn:hover {
  border-color: var(--accent-border);
  color: var(--accent);
}
.os-footer-lang { display: flex; gap: 4px; }

.os-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.4);
}
.os-footer-status { display: flex; align-items: center; gap: 6px; }
.os-footer-legal { display: flex; gap: 12px; }
.os-footer-legal a { color: rgba(255,255,255,.45); text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-xs); transition: color .12s; }
.os-footer-legal a:hover { color: #fff; }

/* Language toggle inside the dark footer — light-on-dark, vibrant active state. */
.os-footer-lang .os-lang-opt {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  min-height: 0;
  transition: all .15s;
}
.os-footer-lang .os-lang-opt.active,
.os-footer-lang .os-lang-opt:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* ── Reveal motion (one substrate, lifted from per-page inline <style>) ──
   Single entrance physics for every marketing section: transform+opacity only,
   the locked ease-out easing, the 150–700ms window, staggered via --reveal-d.
   #212 + motion lock: one keyframe, two easings site-wide (this + chrome cubic). */
@keyframes os-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.reveal{animation:os-reveal .5s var(--reveal-d,0s) ease-out both}
@media(prefers-reduced-motion:reduce){.reveal{animation:none}}

/* ── Home / marketing hero (lifted from index.html inline <style>) ──────── */
.hero{padding:var(--space-16) 0 var(--space-section);border-bottom:1px solid var(--border)}
.hero h1{font-size:var(--fs-display);line-height:1.05;font-weight:800;letter-spacing:-.025em;margin-bottom:var(--space-stack-lg);color:var(--text)}
.hero .tagline{font-size:var(--fs-feature);line-height:1.35;font-weight:600;color:var(--text);max-width:var(--content-hero);margin-bottom:var(--space-stack-md)}
.hero .desc{max-width:var(--content-readable);color:var(--text-2);font-size:var(--fs-body);line-height:1.65;margin-bottom:var(--space-stack-lg)}
.hero .motto{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--space-stack-xl)}
.hero-actions{display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:center}

/* True-count proof strip — mono numbers, no decorative state color (#212). */
.proof-strip{display:flex;flex-wrap:wrap;gap:var(--space-12);border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:var(--space-panel);margin-top:var(--space-stack-xl);max-width:var(--content-hero)}
.proof-item{display:flex;flex-direction:column;gap:var(--space-2);min-width:96px}
.proof-num{font-family:var(--font-mono);font-size:var(--fs-kpi);font-weight:600;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.proof-label{font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}

/* Thesis block — editorial display jump for the H2 statement. */
.thesis h2{font-size:var(--fs-display);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin-bottom:var(--space-stack-lg);max-width:var(--content-readable)}

/* Mono arrow link — the quiet secondary path (about / proof hook). */
.link-arr{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font-family:var(--font-mono);font-size:var(--fs-xs);text-decoration:none;letter-spacing:.03em;transition:color .15s}
.link-arr:hover{color:var(--accent)}

/* ── Blog post / prose styles ────────────────────────────────── */
.post{max-width:65ch;margin:0 auto;padding:0 var(--space-page-x) var(--space-8)}
@media(min-width:640px){.post{padding-left:0;padding-right:0}}
.post-head{padding:var(--space-section) 0 var(--space-stack-xl);border-bottom:1px solid var(--border)}
.post-head h1{font-size:var(--fs-hero);line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:var(--space-stack-md) 0 var(--space-stack-lg)}
.post-head .lead{color:var(--text-2);font-size:var(--fs-body);line-height:1.65;max-width:55ch}
.post-body{padding:var(--space-stack-xl) 0}
.post-body p{color:var(--text-2);font-size:var(--fs-body);line-height:1.7;margin-bottom:var(--space-stack-lg);max-width:65ch}
.post-body h2{font-size:var(--fs-feature);font-weight:700;letter-spacing:-.01em;color:var(--text);margin:var(--space-section) 0 var(--space-stack-lg)}
.post-body ul{margin:0 0 var(--space-stack-lg) var(--space-4);padding:0;list-style:disc}
.post-body ul li{color:var(--text-2);font-size:var(--fs-body);line-height:1.7;margin-bottom:var(--space-2)}
.post-body code{font-family:var(--font-mono);font-size:.9em;color:var(--text);background:var(--surface-2);padding:2px 6px;border-radius:var(--r)}
.post-body pre{font-family:var(--font-mono);font-size:var(--fs-body);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:var(--space-panel);overflow-x:auto;margin-bottom:var(--space-stack-lg)}
.post-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.post-body strong{color:var(--text);font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED VIBRANT PRIMITIVES (2026-06-14)
   Folded from the homepage's inline .pp-* set so every surface — about, writing,
   proof, websites, contact, legal — can reach for the same design language.
   Token-driven (--grad / --r-card / --shadow-card / --accent) so light+dark
   themes follow automatically. Namespaced .os-* to live in the shared layer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Headline highlight — one emphasized word gets a brand-purple marker underline,
   the signature move (sparing, confident, Swiss). */
.os-grad-text{position:relative;color:inherit;background:linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 92%, transparent 92%);padding:0 .04em}
:root[data-theme="dark"] .os-grad-text{background:linear-gradient(transparent 62%, var(--accent-dim) 62%, var(--accent-dim) 92%, transparent 92%)}

/* Vibrant card — rounded, soft violet shadow, lifts on hover. The shared
   replacement for the per-page .method-card / .case-card / .call-step look. */
.os-card{position:relative;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);padding:24px;box-shadow:var(--shadow-card);transition:transform .2s ease,box-shadow .25s ease}
.os-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.os-card h3{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-title);letter-spacing:-.01em;color:var(--text);margin-bottom:8px}
.os-card p{font-size:var(--fs-body);color:var(--text-2);line-height:1.6;margin:0}

/* Icon chip — the rounded square that fronts a feature card. Iridescent Y2K
   fill, white glyph; soft purple glow. */
.os-chip{position:relative;width:48px;height:48px;border-radius:var(--r-card);display:grid;place-items:center;margin-bottom:16px;background:var(--iridescent);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:18px;box-shadow:0 10px 24px -10px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.4);overflow:hidden}
.os-chip::before{content:"";position:absolute;inset:0;background:var(--gloss);pointer-events:none}

/* Pill tag — mono micro-label inside cards. */
.os-pill{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--r-pill);padding:4px 11px}

/* CTA band — the full-width signature closer: a near-black band with the
   brand-purple pill. One design language with the homepage's dark sections.
   Drop one onto any page: <div class="os-cta">…<a class="btn btn-primary">…</div> */
.os-cta{position:relative;overflow:clip;text-align:center;border-radius:var(--r-card);padding:clamp(48px,8vw,84px) 24px;margin:var(--space-section) auto 0;max-width:var(--content-lg);
  background:radial-gradient(120% 130% at 50% 0%, var(--accent-dim), transparent 60%), var(--ink);
  box-shadow:var(--shadow-float)}
.os-cta>*{position:relative;z-index:1}
.os-cta h2{color:var(--on-dark);font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;letter-spacing:-.02em;font-size:var(--fs-display);line-height:1.04;margin-bottom:14px}
.os-cta p{color:var(--on-dark-2);font-size:1.05rem;line-height:1.55;max-width:520px;margin:0 auto 26px}
.os-cta .btn{border-color:rgba(246,244,238,.4);color:var(--on-dark)}
.os-cta .btn:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.os-cta .btn-primary{background:var(--accent);color:var(--accent-deep);border-color:transparent}
.os-cta .btn-primary:hover{background:var(--accent-2);color:var(--accent-deep)}

/* ── Content-card harmoniser (2026-06-14) ───────────────────────────────────
   The content pages (about/contact/proof/websites) each declare their own
   card/list class inline, all on the same recipe (1px border + --surface + --r).
   Rather than fork the vibrant card feel into every page, lift them all to the
   rounded + soft-violet-shadow language here, in the shared layer. Token-driven,
   so light+dark follow. This is what makes those pages read as one family with
   the homepage's rounded cards. */
.method-card,
.case-card,
.call-step,
.stream-item,
.diff-card,
.brief-item,
.book-panel,
.pkg-list,
.row-list,
.intake,
.spec-strip,
.proof-frame,
.ledger-wrap,
.gate-block {
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-card);
}
.method-card,
.case-card,
.call-step,
.stream-item,
.diff-card,
.brief-item {
  transition: transform .2s ease, box-shadow .25s ease, border-color .15s, background .15s;
}
.method-card:hover,
.case-card:hover,
.stream-item:hover,
.diff-card:hover,
.brief-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--accent-border);
}

/* ── Shared Y2K bento card — rounded, gloss top-edge, iridescent hover ring,
   springy lift. Namespaced .os-bento for any surface that wants the language. */
.os-bento{position:relative;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-card);overflow:hidden;transition:transform var(--t-base) var(--spring),box-shadow var(--t-base),border-color var(--t-fast)}
.os-bento::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 30%);opacity:.6}
.os-bento:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:var(--accent-border)}