/* Starbench Analysis — shared design tokens
   A precision intelligence terminal for the space economy.
   Space Grotesk = display & authority · Newsreader = editorial prose · JetBrains Mono = data & chrome.
   Signature motif: the logo's plasma droplet — an amber→cyan spectral gradient — echoed throughout. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root {
  /* surfaces */
  --void:   #060912;   /* deep space — dark sections & body */
  --void-2: #0d1630;   /* raised cosmic panel (bluer, atmospheric) */
  --paper:  #f5f7f9;   /* the document */
  --paper-2:#e9edf2;   /* differentiated light surface (models) */
  --panel:  #ffffff;   /* white cards on paper */

  /* ink */
  --ink:      #12151d;                 /* primary text on light */
  --ink-soft: rgba(18, 21, 29, 0.58);  /* secondary text on light */
  --taupe:    rgba(18, 21, 29, 0.58);  /* legacy alias */

  /* accents — pulled straight from the wordmark's plasma droplet */
  --gold: #f5b13c;   /* instrument amber — primary signal (was luxury gold) */
  --cyan: #4fd6e8;   /* plasma / telemetry data */
  --ion:  #ff6ea0;   /* re-entry ion — atmospheric accent, used sparingly */
  --up:   #35c46b;   /* equities up   (finance only) */
  --down: #f2545b;   /* equities down (finance only) */

  /* signature spectral gradient — the droplet, unrolled */
  --spectrum:  linear-gradient(90deg, var(--gold), var(--ion) 55%, var(--cyan));
  --spectrum-v:linear-gradient(180deg, var(--gold), var(--cyan));

  /* legacy aliases so existing markup/SVGs keep resolving */
  --red:  var(--gold);
  --blue: var(--cyan);

  /* rules */
  --hair: 1px;
  --rule:       1px solid var(--ink);
  --rule-thin:  1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  --rule-red:   1px solid var(--gold);
  --rule-dk:    1px solid rgba(255, 255, 255, 0.14);
  --rule-dk-thin: 1px solid rgba(255, 255, 255, 0.08);

  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --serif:   'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* Reset radii everywhere — angular only, an instrument aesthetic */
*, *::before, *::after {
  border-radius: 0 !important;
  box-sizing: border-box;
}

/* Deep-space backdrop: the whole page sits in the void */
html { background: var(--void); scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  background-color: var(--void);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(1px 1px   at 33% 64%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px   at 58% 16%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 76% 48%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px   at 89% 30%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(1px 1px   at 46% 86%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1100px 520px at 82% -25%, rgba(79,214,232,.10), transparent 70%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-width: 0; }

.serif   { font-family: var(--serif); }
.display { font-family: var(--display); }
.mono    { font-family: var(--mono); }
.tnum    { font-variant-numeric: tabular-nums; }
.no-select { user-select: none; }
.tick { color: var(--gold); }

/* Cosmic panel background used by dark instrument surfaces & footer */
.cosmos {
  background-color: var(--void);
  background-image:
    radial-gradient(1.2px 1.2px at 14% 26%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px   at 34% 70%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px   at 60% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 54%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px   at 90% 36%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(1px 1px   at 48% 88%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1000px 520px at 84% -40%, rgba(79,214,232,.13), transparent 70%),
    radial-gradient(820px 460px  at 6% 130%, rgba(245,177,60,.08), transparent 70%),
    linear-gradient(180deg, var(--void-2) 0%, var(--void) 62%);
}

.cap {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  font-size: 11px;
}

/* Eyebrow / channel marker — the recurring structural register.
   The § is Starbench's section sign: this is a research document, filed and numbered. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.sct { color: var(--gold); font-weight: 700; }
.ch-coord {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}

/* Hairline cross — grid registration mark (corners of instruments/plates) */
.cross { width: 14px; height: 14px; position: relative; display: inline-block; }
.cross::before, .cross::after { content: ''; position: absolute; background: var(--ink); }
.cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.cross.red::before, .cross.red::after { background: var(--gold); }
.cross.light::before, .cross.light::after { background: rgba(255,255,255,.35); }

/* Diamond / square grid bubbles (utility, retained) */
.diamond, .bubble {
  width: 22px; height: 22px; background: var(--panel); border: 1px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
}
.diamond { transform: rotate(45deg); }
.diamond > * { transform: rotate(-45deg); }
.diamond.red, .bubble.red { border-color: var(--gold); color: var(--gold); }
.bubble.filled { background: var(--ink); color: var(--paper); }

/* Dimension & leader lines (utility, retained) */
.dim { position: relative; height: 1px; background: var(--gold); }
.dim::before, .dim::after { content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--gold); }
.dim::before { left: 0; } .dim::after { right: 0; }
.leader { height: 1px; background: var(--gold); }

/* Label tag — small mono tag */
.tag {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  padding: 3px 6px 2px; background: var(--paper-2);
  display: inline-block;
}
.tag.ink { color: var(--ink); border-color: var(--ink); background: transparent; }

/* Live pulse — the plasma droplet, alive. Used across ticker / index / status. */
@keyframes blink { 0%, 62% { opacity: 1; } 80%, 100% { opacity: 0.2; } }
.live-dot {
  display: inline-block; width: 7px; height: 7px;
  background: var(--spectrum-v);
  box-shadow: 0 0 7px var(--cyan); animation: blink 1.6s infinite;
  flex: 0 0 auto;
}
/* SBSE runs on EOD closes — the homepage body carries mkt-closed permanently
   so the dots hold steady; nothing on the page is "live". */
body.mkt-closed .live-dot { animation: none; box-shadow: none; opacity: .45; }

/* Buttons — angular */
.btn {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600; padding: 12px 18px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-red { border-color: var(--gold); background: var(--gold); color: #17140a; }
.btn-red:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-arrow::after { content: '→'; font-family: var(--mono); transition: transform 200ms ease; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* Separators */
hr.rule       { border: 0; border-top: var(--rule); margin: 0; }
hr.rule-thin  { border: 0; border-top: var(--rule-thin); margin: 0; }
hr.rule-red   { border: 0; border-top: var(--rule-red); margin: 0; }

/* Focus visibility (quality floor) */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ================== PAGE SHELL ================== */

.sheet {
  position: relative; width: 100%; max-width: 1320px; margin: 0 auto;
  font-family: var(--mono); color: var(--ink); background: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 60px 160px -60px rgba(0,0,0,.9);
}
.sheet-border { display: none; } /* full-bleed sections read better against the void */

/* Gated model report pages (layout.php sets body.app-wide) are wide, data-dense
   dashboards; drop the 1320px editorial cap + framing shadow so they don't read
   as a shrunken column boxed on the dark void. Editorial app pages keep the sheet. */
body.app-wide .sheet { max-width: none; box-shadow: none; }

/* ================== TICKER TAPE (exchange strip) ================== */

.ticker-tape {
  position: relative; display: flex; align-items: stretch;
  border-bottom: var(--rule-dk); color: #fff; overflow: hidden;
  font-family: var(--mono);
}
.tt-label {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 0 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  border-right: var(--rule-dk); background: rgba(0,0,0,.28);
}
.tt-label .tt-idx {
  font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,.82);
  font-variant-numeric: tabular-nums;
}
.tt-viewport { position: relative; flex: 1 1 auto; overflow: hidden; display: flex; }
.tt-viewport::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 88%, var(--void));
}
@keyframes tt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tt-track {
  display: inline-flex; align-items: center; white-space: nowrap; flex: 0 0 auto;
  padding: 9px 0; animation: tt-scroll 60s linear infinite; will-change: transform;
}
.ticker-tape:hover .tt-track { animation-play-state: paused; }
.tt-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 0 20px; font-size: 12px; border-right: var(--rule-dk-thin);
}
.tt-item .sym { font-weight: 700; letter-spacing: 0.06em; color: #eef2f6; }
.tt-item .px  { color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.tt-item .chg { font-variant-numeric: tabular-nums; font-weight: 600; }
.tt-item .chg.up   { color: var(--up); }
.tt-item .chg.down { color: var(--down); }

/* ================== HEADER (masthead) ================== */

.site-header {
  position: relative; padding: 22px 60px; background: var(--paper); color: var(--ink);
  border-bottom: var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* spectral hairline riding the masthead's lower edge — the droplet, unrolled */
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--spectrum); opacity: .9;
}
.wordmark { display: flex; align-items: baseline; gap: 12px; }
.wordmark .mark { display: inline-flex; }
.wordmark .mark img { display: block; height: 40px; width: auto; }
.nav { display: flex; gap: 26px; align-items: center;
       font-family: var(--mono);
       font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.nav a { color: var(--ink); text-decoration: none; position: relative; }
.nav a:not(.btn-subscribe) { padding-bottom: 2px; }
.nav a:not(.btn-subscribe)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--gold); transition: right 200ms ease;
}
.nav a:not(.btn-subscribe):hover::after { right: 0; }
.nav .sep { width: 1px; height: 16px; background: var(--ink); }
/* Auth cluster wrapper: transparent to flex so its children stay direct .nav
   items (the static homepage's session-nav JS swaps this element's outerHTML). */
.nav-auth { display: contents; }

/* --- nav dropdowns (Industry Models / Applied Research / Tools) --- */
/* lift the whole masthead above the sections below so open menus overlay them */
.site-header { z-index: 40; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-trigger .caret { font-size: 8px; opacity: .7; transition: transform 180ms ease; }
.nav-item.has-dropdown:hover > .nav-trigger .caret,
.nav-item.has-dropdown:focus-within > .nav-trigger .caret { transform: translateY(1px) rotate(180deg); }
/* invisible bridge across the visual gap: keeps :hover alive as the pointer
   travels from the trigger down to the menu, so it no longer vanishes */
.nav-item.has-dropdown::after {
  content: ''; position: absolute; top: 100%; left: 0;
  width: 210px; height: 12px;
}

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 210px; padding: 7px 0;
  background: var(--paper); border: var(--rule);
  box-shadow: 0 16px 34px -18px rgba(18, 21, 29, 0.5);
  display: grid;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
/* spectral hairline echoing the masthead's lower edge */
.dropdown::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--spectrum); opacity: .9;
}
.nav-item.has-dropdown:hover > .dropdown,
.nav-item.has-dropdown:focus-within > .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}
.dropdown a {
  display: block; padding: 9px 16px; white-space: nowrap;
  color: var(--ink); letter-spacing: 0.1em;
}
.dropdown a::after { display: none; }              /* no sliding underline inside menus */
.dropdown a:hover { background: var(--ink); color: var(--paper); }
.btn-subscribe {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; padding: 9px 16px;
  border: 1px solid var(--gold); background: var(--gold); color: #17140a; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 180ms, color 180ms;
}
.btn-subscribe:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ================== MARKET HERO ================== */

.market-hero {
  position: relative; background: var(--paper); overflow: hidden;
  padding: 40px 60px 38px;
  display: grid; grid-template-columns: 1.42fr 0.72fr; gap: 40px; align-items: center;
}
/* faint instrument grid — a drafting plate under the lead dispatch */
.market-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 39px, color-mix(in srgb, var(--ink) 5%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--ink) 5%, transparent) 39px 40px);
  -webkit-mask-image: radial-gradient(120% 100% at 88% 0%, #000, transparent 72%);
          mask-image: radial-gradient(120% 100% at 88% 0%, #000, transparent 72%);
}
.market-hero > * { position: relative; z-index: 1; }
.mh-copy .eyebrow { display: block; margin-bottom: 20px; }
.mh-copy h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 5.4vw, 66px); line-height: 1.0;
  letter-spacing: -0.028em; margin: 0; color: var(--ink);
}
.mh-copy h1 em { font-style: normal; color: var(--gold); }
.mh-copy h1 .accent { color: var(--gold); }
.mh-copy h1 a.mh-title { color: inherit; text-decoration: none; transition: color 200ms ease; }
.mh-copy h1 a.mh-title:hover { color: var(--gold); }
.mh-sub {
  font-family: var(--serif); font-size: 18.5px; line-height: 1.56;
  color: #2b2f38; max-width: 60ch; margin: 22px 0 0;
}
.mh-actions { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mh-link {
  font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 3px;
}
.mh-link:hover { color: var(--cyan); border-color: var(--cyan); }
.mh-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.mh-kicker .read { font-family: var(--mono); font-size: 10px; text-transform: uppercase;
                   letter-spacing: 0.1em; color: var(--ink-soft); }
/* dispatch stamp — a filed, numbered document header */
.dispatch {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.dispatch::before {
  content: ''; width: 16px; height: 1px; background: var(--gold); display: inline-block;
}

/* Featured-story media plate (the story's own image) */
.fh-media { margin: 0; }
.fh-media .img { aspect-ratio: 4 / 3; }

/* ================== SBSE MISSION CONSOLE (the signature instrument) ================== */

.sbse-band {
  position: relative; color: #eef2f6; padding: 34px 60px 40px;
  border-top: var(--rule-dk); border-bottom: var(--rule-dk);
  display: flex; flex-direction: column; gap: 26px;
}
/* spectral rule across the top of the console — reads as a live signal bus */
.sbse-band::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--spectrum); opacity: .85;
}
.sbse-band .cx { position: absolute; opacity: .4; }
.sbse-band .cx.tl { top: 12px; left: 12px; } .sbse-band .cx.tr { top: 12px; right: 12px; }
.sbse-band .cx.bl { bottom: 12px; left: 12px; } .sbse-band .cx.br { bottom: 12px; right: 12px; }

/* console header — instrument identity + live status readout */
.console-head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: var(--rule-dk-thin);
}
.console-id {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,.82); font-weight: 500;
}
.console-id b { color: var(--gold); font-weight: 700; letter-spacing: 0.1em; }
.console-status {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.console-status .led {
  display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.82);
}
.console-status .mclock {
  color: var(--cyan); font-variant-numeric: tabular-nums; letter-spacing: 0.12em;
}
.console-status .dly { color: rgba(255,255,255,.42); }

.console-grid {
  display: grid; grid-template-columns: minmax(230px, auto) 1fr minmax(190px, auto);
  gap: 52px; align-items: center;
}
.sbse-left { display: flex; flex-direction: column; gap: 8px; }
.sbse-left .ip-value { margin: 2px 0; font-size: 58px; }
.sbse-mid { min-width: 0; position: relative; }
.sbse-mid .ip-spark { height: 118px; margin: 0; }
.sbse-mid .ip-foot { margin-top: 14px; padding-top: 0; border-top: 0; }
.sbse-right { display: flex; flex-direction: column; gap: 10px; }
.sbse-movers-label { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase;
                     letter-spacing: 0.14em; color: rgba(255,255,255,.5); }
.sbse-right .ip-constituents { flex-direction: column; gap: 8px; margin-top: 0; }
.sbse-right .ip-chip { justify-content: space-between; }

.ip-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
            text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 500; }
.ip-value { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
            font-size: 54px; line-height: 1; letter-spacing: -0.02em; margin: 6px 0 4px; color: #fff; }
.ip-delta { font-family: var(--mono); font-size: 13px; font-weight: 600;
            font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ip-delta.up { color: var(--up); } .ip-delta.down { color: var(--down); }
.ip-spark { display: block; width: 100%; height: 92px; margin: 16px 0 4px; }
/* chart furniture — recessive grid, muted mono labels, hover readout */
.ip-spark .grid { stroke: rgba(255,255,255,.09); }
.ip-spark .grid.base { stroke: rgba(255,255,255,.22); stroke-dasharray: 3 4; }
.ip-spark .ax { font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
                fill: rgba(255,255,255,.45); }
.ip-spark .cursor { stroke: rgba(255,255,255,.3); stroke-dasharray: 2 3; }
.spark-tip { position: absolute; top: -6px; transform: translateX(-50%);
             padding: 3px 8px; border: 1px solid rgba(255,255,255,.22);
             background: rgba(10,14,20,.92); color: rgba(255,255,255,.85);
             font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums;
             letter-spacing: .06em; pointer-events: none; white-space: nowrap; }
.ip-constituents { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ip-chip {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.16); font-family: var(--mono); font-size: 10.5px;
  font-variant-numeric: tabular-nums; background: rgba(255,255,255,.03);
  transition: border-color 180ms ease, background 180ms ease;
}
.sbse-right .ip-chip:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.06); }
.ip-chip .s { color: #eef2f6; font-weight: 700; letter-spacing: 0.05em; }
.ip-chip .d.up { color: var(--up); } .ip-chip .d.down { color: var(--down); }
.ip-foot { margin-top: 16px; padding-top: 12px; border-top: var(--rule-dk-thin);
           font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
           text-transform: uppercase; color: rgba(255,255,255,.42); }

/* basket popover — click the foot line to see the full index makeup + weights */
.ip-foot-link {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  cursor: pointer;
  text-decoration: underline dotted rgba(255,255,255,.45);
  text-underline-offset: 3px;
  transition: color 180ms ease;
}
.ip-foot-link:hover, .ip-foot-link[aria-expanded="true"] {
  color: var(--cyan); text-decoration-color: var(--cyan);
}
.ip-foot-link:focus-visible { outline: 1px dashed var(--cyan); outline-offset: 3px; }
.ip-basket-pop {
  position: absolute; left: 0; bottom: 34px; z-index: 6;
  width: min(420px, 100%); padding: 14px 16px 12px;
  background: rgba(10,14,20,.97); border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  font-family: var(--mono);
}
.bp-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.bp-row {
  display: grid; grid-template-columns: 46px 1fr 64px 42px; gap: 10px;
  align-items: center; padding: 2.5px 0;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.bp-sym { color: #eef2f6; font-weight: 700; letter-spacing: 0.05em; }
.bp-name { color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-bar { height: 5px; background: rgba(255,255,255,.08); }
.bp-bar span { display: block; height: 100%; background: var(--gold); }
.bp-w { text-align: right; color: rgba(255,255,255,.85); }
.bp-note {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

/* ================== RECENT ARTICLES ================== */

.recent-body { padding: 32px 60px 40px; background: var(--paper); }

.lead { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px;
        border-top: var(--rule); border-bottom: var(--rule); padding: 30px 0 34px; margin-bottom: 40px; }
.lead-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.lead-meta .read { font-size: 9px; color: var(--ink-soft); font-family: var(--mono);
                   text-transform: uppercase; letter-spacing: 0.1em; }
.lead h2 { font-family: var(--display); font-size: 46px; margin: 0; font-weight: 600;
           letter-spacing: -0.025em; line-height: 1.02; }
.lead p { font-family: var(--serif); font-size: 17px; line-height: 1.55; margin: 18px 0 0; color: var(--ink); }
.lead-cta { margin-top: 28px; display: flex; gap: 16px; align-items: center; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 30px; }
.card { display: flex; flex-direction: column; }
.card-meta { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 8px; }
.card-meta .read { font-size: 9px; color: var(--ink-soft); font-family: var(--mono);
                   text-transform: uppercase; letter-spacing: 0.1em; }
.card h3 { font-family: var(--display); font-size: 22px; margin: 0; font-weight: 600;
           letter-spacing: -0.02em; line-height: 1.12; }
.card h3 a { color: inherit; text-decoration: none; transition: color 200ms ease; }
.card h3 a:hover { color: var(--gold); }
.card p { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
          margin: 10px 0 16px; }
.card-foot { margin-top: auto; display: flex; justify-content: flex-start; align-items: center;
             padding-top: 12px; }
.card-foot .btn { padding: 8px 14px; font-size: 10px; gap: 8px; letter-spacing: 0.12em; }
.card-foot a { font-family: var(--mono); font-size: 10px; color: var(--ink); text-decoration: none;
               text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px; }
.card-foot a .arrow { color: var(--gold); transition: transform 180ms ease; }
.card:hover .card-foot a .arrow,
.card-foot a:hover .arrow { transform: translateX(4px); }

/* Post-card cover link — wraps the .img plate; same destination as title/Read more */
.card-img-link { display: block; }

/* Image placeholder — blueprint plate */
.img { width: 100%; aspect-ratio: 16/10; border: 1px solid var(--ink);
       background: repeating-linear-gradient(135deg,
                     color-mix(in srgb, var(--cyan) 12%, transparent) 0 8px,
                     transparent 8px 14px),
                   color-mix(in srgb, var(--paper-2) 70%, transparent);
       position: relative; overflow: hidden; transition: box-shadow 220ms ease; }
.card:hover .img { box-shadow: inset 0 0 0 1px var(--gold); }
/* Post-card image (from data/posts.json image URL) fills the frame; corner
   marks render above it. */
.img > img { position: absolute; inset: 0; width: 100%; height: 100%;
             object-fit: cover; display: block; }
.img.tall { aspect-ratio: 4/3; }
.img .corner { position: absolute; }
.img .corner.tl { top: 6px; left: 6px; } .img .corner.tr { top: 6px; right: 6px; }
.img .corner.bl { bottom: 6px; left: 6px; } .img .corner.br { bottom: 6px; right: 6px; }
.img .caption-row { position: absolute; left: 14px; bottom: 14px; right: 14px;
                    display: flex; justify-content: space-between; align-items: center; }
.img .fig { background: var(--panel); border: 1px solid var(--ink); padding: 4px 8px;
            font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
.img .ph { background: var(--gold); border: 1px solid var(--gold); color: #17140a; padding: 4px 8px;
           font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ================== INDUSTRY MODELS ================== */

.models { position: relative; padding: 40px 60px 56px; border-top: 3px solid var(--gold);
          border-bottom: var(--rule); background-color: var(--paper-2);
          background-image:
            repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--cyan) 10%, transparent) 31px 32px),
            repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--cyan) 10%, transparent) 31px 32px); }
.models-head { margin-bottom: 30px; }
.models-head h2 { font-family: var(--display); font-size: 46px; margin: 0 0 12px;
                  font-weight: 600; letter-spacing: -0.028em; line-height: 1.0; }
.models-head p { font-family: var(--serif); font-size: 16.5px; color: var(--ink-soft);
                 max-width: 620px; margin: 0; line-height: 1.55; }
/* free-floating tiles — small icon, title, blurb; no dividers or card frames */
.models-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 52px; }
.model { position: relative; }
.model-icon { display: block; width: 64px; height: 64px; object-fit: contain;
              margin-bottom: 16px; transition: transform 200ms ease; }
.model:hover .model-icon { transform: translateY(-2px); }
.model h3 { font-family: var(--display); font-size: 23px; margin: 0; font-weight: 600;
            letter-spacing: -0.02em; line-height: 1.12; }
.model h3 a { color: inherit; text-decoration: none; transition: color 200ms ease; }
.model h3 a:hover { color: var(--gold); }
.model p { font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink);
           margin: 14px 0 0; }

/* ================== FOOTER ================== */

.mega { position: relative; padding: 62px 60px 0; border-top: var(--rule-dk); color: var(--paper); }
.mega::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
                background: var(--spectrum); opacity: .6; }
.mega-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px;
            padding-bottom: 46px; border-bottom: var(--rule-dk); }
.mega .label { font-family: var(--mono); color: var(--gold); font-size: 11px;
               text-transform: uppercase; letter-spacing: 0.12em; }
.mega h2 { font-family: var(--display); font-size: 50px; margin: 12px 0 0;
           font-weight: 600; letter-spacing: -0.028em; line-height: 1.0; color: #fff; }
.mega .lead-p { font-family: var(--serif); font-size: 16.5px; line-height: 1.55;
                margin: 18px 0 0; color: rgba(255,255,255,.74); max-width: 560px; }
/* Subscribe link: pin every state to the amber accent so :visited never falls
   back to the UA purple (unreadable on the dark footer). */
.mega .lead-p a,
.mega .lead-p a:visited { color: var(--gold); text-decoration: underline;
                          text-underline-offset: 2px; text-decoration-thickness: 1px;
                          transition: color 160ms ease; }
.mega .lead-p a:hover { color: var(--cyan); }

.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 46px 0; }
.mega-cols h4 { font-family: var(--mono); font-size: 10px; color: var(--gold);
                margin: 0 0 18px; padding-bottom: 8px; border-bottom: var(--rule-dk);
                text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.mega-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.mega-cols a { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.78);
               text-decoration: none; transition: color 160ms ease; position: relative; }
.mega-cols a:hover { color: var(--cyan); }

.colophon { display: flex; justify-content: space-between; align-items: flex-end;
            padding: 30px 0 30px; border-top: var(--rule-dk); }
.colophon .mark { font-family: var(--display); font-size: 24px; font-weight: 600;
                  letter-spacing: -0.01em; color: #fff; }
.colophon .mark .dot { color: var(--gold); }
.colophon .addr { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,.55);
                  margin-top: 8px; text-transform: uppercase; letter-spacing: 0.1em; }
.colophon .legal { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,.55);
                   display: flex; gap: 18px; text-transform: uppercase; letter-spacing: 0.1em; }

/* Fine print — informational-only / not-investment-advice boilerplate */
.mega .disclaimer { font-family: var(--mono); font-size: 9px; line-height: 1.7;
                    color: rgba(255,255,255,.38); max-width: 880px; margin: 0;
                    padding: 14px 0 0; }

/* ================== RESPONSIVE ================== */

@media (max-width: 1280px) {
  .site-header, .market-hero, .sbse-band,
  .recent-body, .models, .mega { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 1024px) {
  .market-hero { grid-template-columns: 1fr; gap: 36px; }
  .console-grid { grid-template-columns: 1fr; gap: 26px; }
  .sbse-mid .ip-spark { height: 96px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .mega h2, .models-head h2 { font-size: 40px; }
  .lead h2 { font-size: 38px; }
}

@media (max-width: 860px) {
  .lead { grid-template-columns: 1fr; gap: 24px; }
  .mega-top { grid-template-columns: 1fr; gap: 30px; }
  .mega-cols { grid-template-columns: repeat(2, 1fr); }
  .nav { gap: 18px; }
}

@media (max-width: 720px) {
  .tt-label { padding: 0 12px; font-size: 10px; }
  .tt-label .tt-idx { display: none; }

  .site-header { flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 20px; }
  .wordmark .mark img { height: 32px; }
  .nav { flex-wrap: wrap; gap: 14px 18px; width: 100%; }
  .nav .sep { display: none; }
  .btn-subscribe { margin-left: auto; }

  .market-hero { padding: 40px 20px 44px; }
  .mh-sub { font-size: 16px; }
  .sbse-band { padding: 26px 20px 30px; }
  .console-head { gap: 12px 16px; }
  .console-status { gap: 12px; flex-wrap: wrap; }
  .sbse-left .ip-value { font-size: 44px; }

  .recent-body { padding: 24px 20px 36px; }
  .lead h2 { font-size: 32px; }
  .lead p { font-size: 16px; }
  .lead-meta { flex-wrap: wrap; gap: 8px; }
  .card-grid { grid-template-columns: 1fr; gap: 24px; }
  .card h3 { font-size: 21px; }

  .models { padding: 32px 20px 40px; }
  .models-head { margin-bottom: 22px; }
  .models-head h2 { font-size: 34px; }
  .models-head p { font-size: 15px; }
  .models-grid { grid-template-columns: 1fr; gap: 32px; }
  .model h3 { font-size: 21px; }

  .mega { padding: 44px 20px 0; }
  .mega h2 { font-size: 32px; }
  .mega .lead-p { font-size: 15px; }
  .mega-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 36px 0; }
  .colophon { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 0 28px; }
  .colophon .legal { flex-wrap: wrap; gap: 8px 14px; }

  .img .ph { display: none; }
  .img .caption-row { right: 14px; }
}

@media (max-width: 420px) {
  .lead h2 { font-size: 28px; }
  .models-head h2 { font-size: 28px; }
  .mega h2 { font-size: 28px; }
  .mega-cols { grid-template-columns: 1fr; }
  .nav { font-size: 10px; gap: 12px 14px; }
  .btn-subscribe { padding: 8px 12px; font-size: 10px; }
}

@media (max-width: 360px) {
  .sbse-left .ip-value { font-size: 40px; }
}

/* ================== REDUCED MOTION ================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tt-track { animation: none; }
  .tt-viewport { overflow-x: auto; }
  .live-dot { animation: none; }
  .card-foot a .arrow, .btn-arrow::after,
  .model::before, .tile, .tile::before { transition: none; }
  .spark-line, .ip-spark path { transition: none !important; }
}

/* ================== APP PAGES — login · dashboard · account ================== */

.site-header .wordmark a { display: inline-flex; text-decoration: none; }
.site-header .wordmark a::after { content: none; }
.nav .nav-id { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
               text-transform: none; color: var(--ink-soft); }
.nav-logout { margin: 0; display: inline-flex; }
.btn-ghost {
  font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; padding: 9px 15px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background 180ms, color 180ms;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

.app-main { background: var(--paper); border-bottom: var(--rule); }
.app-main-pad { padding: 44px 60px 60px; }
.app-main-pad h1 { font-family: var(--display); font-size: 34px; font-weight: 600;
                   letter-spacing: -0.02em; margin: 0 0 6px; }
.app-main-pad h2 { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 26px 0 10px; }
.app-main-pad section { border-top: var(--rule-thin); padding-top: 18px; margin-top: 22px; max-width: 640px; }
.app-main-pad label { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
                      letter-spacing: 0.08em; color: var(--ink-soft); margin: 12px 0; }
.app-main-pad input { display: block; margin-top: 5px; font-family: var(--mono); font-size: 14px;
                      padding: 10px 12px; min-width: 300px;
                      border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); background: #fff; }
.app-main-pad input:focus { outline: none; border-color: var(--gold);
                            box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.app-main-pad button { font-family: var(--mono); font-size: 11px; text-transform: uppercase;
                       letter-spacing: 0.12em; font-weight: 600; padding: 10px 16px; margin-top: 8px;
                       border: 1px solid var(--gold); background: var(--gold); color: #17140a; cursor: pointer; }
.app-main-pad button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.app-main-pad ul { font-family: var(--mono); font-size: 12px; line-height: 1.7; padding-left: 18px; }
.app-main-pad a { color: var(--ink); }
.app-main-pad .error { color: var(--down); font-family: var(--mono); font-size: 12px; }

/* ================== LOCKED TOOL PREVIEW ================== */
/* Decorative blurred facsimile of a Tools board under an unlock CTA. Carries no
   real data — the grid below is pure CSS skeleton. */
.tool-lock { position: relative; min-height: 560px; padding: 44px 60px 72px;
             background: var(--paper); overflow: hidden; }
.tool-lock-stage { position: absolute; inset: 0; filter: blur(7px) saturate(.85);
                   opacity: .5; pointer-events: none; user-select: none; }
.tool-lock-blur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
                  padding: 44px 60px; }
.tool-lock-blur .tl-card { border: 2px solid var(--ink); background: var(--panel);
                           box-shadow: 5px 5px 0 var(--ink); padding: 18px; min-height: 150px;
                           display: flex; flex-direction: column; gap: 11px; }
.tl-line { height: 12px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.tl-line-lg { height: 20px; width: 72%; background: color-mix(in srgb, var(--ink) 26%, transparent); }
.tl-line-sm { width: 44%; }
.tl-bars { margin-top: auto; display: flex; gap: 8px; align-items: flex-end; height: 46px; }
.tl-bars span { flex: 1; background: color-mix(in srgb, var(--cyan) 34%, transparent); }
.tl-bars span:nth-child(1) { height: 60%; }
.tl-bars span:nth-child(2) { height: 100%; background: color-mix(in srgb, var(--gold) 46%, transparent); }
.tl-bars span:nth-child(3) { height: 42%; }
.tl-bars span:nth-child(4) { height: 78%; }

.tool-lock-panel { position: relative; z-index: 1; max-width: 480px; margin: 40px auto;
                   background: var(--panel); border: 2.5px solid var(--ink);
                   box-shadow: 8px 8px 0 var(--ink); padding: 34px 34px 30px; text-align: left; }
.tool-lock-rule { display: block; width: 46px; height: 4px; background: var(--down); margin-bottom: 18px; }
.tool-lock-panel h1 { font-family: var(--display); font-size: 30px; font-weight: 600;
                      letter-spacing: -0.01em; margin: 10px 0 12px; }
.tool-lock-sub { font-family: var(--serif); font-size: 15px; line-height: 1.55;
                 color: var(--ink-soft); margin: 0 0 22px; }
.tool-lock-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tool-lock-login { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
                   color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.tool-lock-login:hover { color: var(--gold); }
.tool-lock-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
                  line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 720px) {
  .tool-lock { padding: 30px 20px 48px; }
  .tool-lock-blur { grid-template-columns: 1fr 1fr; padding: 20px; }
}

.app-foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 22px 60px; background: var(--void); color: rgba(255,255,255,.6);
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
}
.app-foot .mark { font-family: var(--display); font-size: 16px; color: #fff;
                  text-transform: none; letter-spacing: -0.01em; }
.app-foot .mark .dot { color: var(--gold); }
.app-foot a { color: rgba(255,255,255,.6); text-decoration: none; }
.app-foot a:hover { color: var(--cyan); }

/* ---- form primitives (login) ---- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase;
               letter-spacing: 0.12em; color: var(--ink-soft); }
.field input, .field textarea {
  font-family: var(--mono); font-size: 14px; color: var(--ink); padding: 12px 14px; width: 100%;
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent); background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { resize: vertical; line-height: 1.45; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.btn-block { width: 100%; justify-content: center; margin-top: 4px; }

/* ---- small registration cross (model landing sample plate) ---- */
.cross-sm { width: 10px; height: 10px; }

/* ================== MODEL LANDING (public marketing page) ================== */

.ml { padding: 0 0 10px; }

/* hero */
.ml-hero {
  position: relative; background: var(--paper); padding: 46px 60px 44px;
  display: grid; grid-template-columns: 1.4fr 0.7fr; gap: 44px; align-items: center;
  border-bottom: var(--rule);
}
.ml-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 39px, color-mix(in srgb, var(--ink) 5%, transparent) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--ink) 5%, transparent) 39px 40px);
  -webkit-mask-image: radial-gradient(120% 100% at 88% 0%, #000, transparent 72%);
          mask-image: radial-gradient(120% 100% at 88% 0%, #000, transparent 72%);
}
.ml-hero > * { position: relative; z-index: 1; }
.ml-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ml-kicker .eyebrow { color: var(--ink-soft); }
.ml-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4.4vw, 56px);
              line-height: 1.0; letter-spacing: -0.028em; margin: 0; color: var(--ink); }
.ml-pitch { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: #2b2f38;
            margin: 18px 0 0; max-width: 52ch; }
.ml-hero-actions { margin-top: 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ml-cadence { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
              color: var(--ink-soft); }
.ml-hero-media { margin: 0; }
.ml-hero-media .img { aspect-ratio: 4/3; }
.ml-sample { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
             font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
             color: color-mix(in srgb, var(--ink) 42%, transparent); text-align: center; }

/* body */
.ml-body { background: var(--paper); padding: 44px 60px 56px;
           display: grid; grid-template-columns: 1.55fr 0.75fr; gap: 52px; align-items: start; }
.ml-main { min-width: 0; }
.ml-section { margin-bottom: 34px; }
.ml-section > h2 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
                   margin: 0 0 14px; padding-bottom: 10px; border-bottom: var(--rule-thin); }
.ml-lede { font-family: var(--serif); font-size: 16.5px; line-height: 1.62; color: var(--ink); margin: 0; }
.ml-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ml-list li { position: relative; padding-left: 22px; font-family: var(--serif); font-size: 15px;
              line-height: 1.5; color: var(--ink); }
.ml-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
                      background: var(--spectrum-v); }
.ml-list.check li::before { top: 6px; width: 9px; height: 9px; background: none;
                            border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
                            transform: rotate(-45deg); }
.ml-method p { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink-soft);
               margin: 0 0 14px; }

/* Markdown-authored body (public.md) — prose styled to match the model page */
.md-body { min-width: 0; }
.md-body > *:first-child { margin-top: 0; }
.md-body h2 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
              margin: 38px 0 14px; padding-bottom: 10px; border-bottom: var(--rule-thin); }
.md-body h3 { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
              margin: 28px 0 10px; color: var(--ink); }
.md-body p { font-family: var(--serif); font-size: 16.5px; line-height: 1.62; color: var(--ink); margin: 0 0 16px; }
.md-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold);
             text-underline-offset: 3px; }
.md-body a:hover { color: var(--gold); }
.md-body strong { font-weight: 700; }
.md-body ul, .md-body ol { padding-left: 20px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.md-body li { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.md-body blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 2px solid var(--gold);
                      font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.md-body code { font-family: var(--mono); font-size: 0.86em; background: var(--paper-2); padding: 1px 5px;
                border: var(--rule-thin); }
.md-body pre { overflow-x: auto; background: var(--paper-2); border: var(--rule-thin); padding: 14px 16px;
               margin: 0 0 18px; }
.md-body pre code { background: none; border: none; padding: 0; }
.md-body hr { border: none; border-top: var(--rule-thin); margin: 30px 0; }
.md-body figure { margin: 0 0 20px; }
.md-body img { display: block; max-width: 100%; height: auto; border: var(--rule-thin); }
.md-body figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-top: 8px; line-height: 1.5; }
.md-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-family: var(--mono);
                 font-size: 12.5px; display: block; overflow-x: auto; }
.md-body th, .md-body td { text-align: left; padding: 9px 12px; border: var(--rule-thin); vertical-align: top; }
.md-body th { background: var(--paper-2); font-weight: 600; }

/* access sidebar */
.ml-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }
.ml-access { position: relative; border: var(--rule); background: var(--panel); padding: 26px 24px 22px;
             box-shadow: 0 30px 90px -60px rgba(0,0,0,.9); }
.ml-access-rule { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--spectrum); }
.ml-access .eyebrow { display: block; margin-bottom: 10px; }
.ml-access h3 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
                margin: 0; line-height: 1.05; }
.ml-access-sub { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--ink-soft);
                 margin: 10px 0 0; }
.ml-form { display: flex; flex-direction: column; gap: 13px; margin-top: 20px; }
.ml-thanks { margin-top: 20px; border: 1px solid color-mix(in srgb, var(--up) 45%, transparent);
             background: color-mix(in srgb, var(--up) 9%, transparent); padding: 14px 14px; }
.ml-thanks strong { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.ml-thanks p { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--ink); margin: 6px 0 0; }
.ml-access-foot { margin-top: 20px; padding-top: 16px; border-top: var(--rule-thin);
                  display: flex; flex-direction: column; gap: 9px;
                  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; }
.ml-access-foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold);
                    padding-bottom: 2px; align-self: flex-start; }
.ml-access-foot a:hover { color: var(--cyan); border-color: var(--cyan); }

.ml-facts { border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.ml-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
           padding: 11px 16px; border-bottom: var(--rule-thin); }
.ml-fact:last-child { border-bottom: 0; }
.ml-fact .k { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
              color: var(--ink-soft); }
.ml-fact .v { font-family: var(--mono); font-size: 11.5px; color: var(--ink); text-align: right; }

@media (max-width: 1024px) {
  .ml-hero { grid-template-columns: 1fr; gap: 30px; }
  .ml-body { grid-template-columns: 1fr; gap: 34px; }
  .ml-aside { position: static; }
}
@media (max-width: 720px) {
  .ml-hero { padding: 34px 20px 34px; }
  .ml-body { padding: 32px 20px 44px; }
}

/* ---- login card ---- */
.auth-wrap { display: flex; justify-content: center; align-items: flex-start;
             padding: 76px 20px 92px; min-height: 58vh; }
.auth-card { position: relative; width: 100%; max-width: 400px; background: var(--panel);
             border: var(--rule); padding: 40px 36px 30px;
             box-shadow: 0 40px 120px -60px rgba(0,0,0,.9); }
.auth-rule { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--spectrum); }
.auth-head .eyebrow { display: block; margin-bottom: 12px; }
.auth-head h1 { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em;
                margin: 0; line-height: 1; }
.auth-sub { font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; }
.auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.auth-error { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--down);
              border: 1px solid color-mix(in srgb, var(--down) 50%, transparent);
              background: color-mix(in srgb, var(--down) 8%, transparent); padding: 10px 12px; margin-top: 20px; }
.auth-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
             margin-top: 22px; padding-top: 18px; border-top: var(--rule-thin);
             font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink-soft); }
.auth-foot .muted { color: var(--ink-soft); }
.auth-foot a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.auth-foot a:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---- dashboard ---- */
.dash { padding: 44px 60px 60px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px;
             flex-wrap: wrap; padding-bottom: 26px; border-bottom: var(--rule); }
.dash-head .eyebrow { display: block; margin-bottom: 10px; }
.dash-head h1 { font-family: var(--display); font-size: 40px; font-weight: 600; letter-spacing: -0.028em;
                line-height: 1; margin: 0; }
.dash-sub { font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-soft);
            margin: 12px 0 0; max-width: 62ch; }
.dash-sub .muted { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.dash-id { display: grid; grid-template-columns: auto auto; gap: 5px 14px; align-items: baseline;
           border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); padding: 14px 18px; }
.dash-id .k { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
              color: var(--ink-soft); }
.dash-id .v { font-family: var(--mono); font-size: 12px; color: var(--ink); }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; border: var(--rule); }
.kpi { padding: 18px 20px; border-right: var(--rule-thin); display: flex; flex-direction: column; gap: 7px; }
.kpi:last-child { border-right: 0; }
.kpi-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
             color: var(--ink-soft); }
.kpi-val { font-family: var(--mono); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.01em; }
.kpi-val.small { font-size: 16px; letter-spacing: 0; padding: 6px 0; }
.kpi-foot { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em;
            color: var(--ink-soft); }
.kpi-foot.down { color: var(--down); }

.dash-section-bar { margin-top: 42px; padding: 14px 0; border-top: 3px solid var(--gold);
                    border-bottom: var(--rule); font-family: var(--mono); font-size: 11px; font-weight: 600;
                    text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink); }

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.tile { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
        border: var(--rule); background: var(--panel); padding: 20px 20px 18px;
        transition: box-shadow 220ms ease; overflow: hidden; }
.tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
                background: var(--spectrum-v); transform: scaleY(0); transform-origin: top;
                transition: transform 240ms cubic-bezier(.22,.61,.36,1); }
.tile:hover { box-shadow: 0 14px 34px -20px rgba(0,0,0,.55); }
.tile:hover::before { transform: scaleY(1); }
.tile.is-locked { background: color-mix(in srgb, var(--paper-2) 55%, var(--panel)); }
.tile-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.tile-status { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
               padding: 3px 7px 2px; border: 1px solid; }
.tile-status.on { color: var(--up); border-color: color-mix(in srgb, var(--up) 50%, transparent);
                  background: color-mix(in srgb, var(--up) 10%, transparent); }
.tile-status.off { color: var(--ink-soft); border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.tile-exp { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
            color: var(--ink-soft); }
.tile h3 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
           line-height: 1.12; margin: 0; }
.tile p { font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
          margin: 9px 0 16px; }
.tile-foot { margin-top: auto; }
.tile-cta { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
            color: var(--gold); }
.tile-cta.muted { color: var(--ink-soft); }

@media (max-width: 1024px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: var(--rule-thin); }
  .dash-head h1 { font-size: 34px; }
}

@media (max-width: 720px) {
  .dash { padding: 30px 20px 44px; }
  .app-main-pad { padding: 30px 20px 44px; }
  .app-foot { padding: 18px 20px; flex-direction: column; align-items: flex-start; }
  .tile-grid { grid-template-columns: 1fr; }
  .auth-wrap { padding: 40px 16px 60px; }
  .auth-card { padding: 30px 22px 26px; }
}