/* Al Sayf — shared component CSS
   Extracted from swing.html (the authoritative design) and extended
   for account, report, auth, founder, pricing, and legal surfaces.
   ────────────────────────────────────────────────────────────────── */

/* ── Ticker (2026-08-18 ticker-banner handoff) ──
   44px tape above the nav: 3px gold gradient top bar, page-navy ground,
   Geist Mono type, one `›` marker per item, K/P letter tiles (typography
   stand-ins per the 08-17 brand-face policy), 60px edge fades. The two
   delta colors are component-scoped tokens. */
.ticker{position:relative;border-bottom:1px solid var(--line);background:var(--bg);overflow:hidden;height:var(--h-ticker);display:flex;align-items:center;z-index:30;
  --ticker-positive:#4ade80;--ticker-negative:#f87171}
.ticker::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 90%,transparent) 50%,transparent)}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0,transparent 60px,transparent calc(100% - 60px),var(--bg) 100%)}
.ticker-track{display:flex;width:max-content;animation:tick var(--dur-ticker) linear infinite;will-change:transform;-webkit-transform:translateZ(0)}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-seq{display:flex;align-items:center}
.tk{position:relative;display:flex;align-items:center;gap:10px;padding:0 20px;white-space:nowrap;
  font-family:var(--font-ticker);font-size:12.5px;letter-spacing:var(--ls-ticker)}
.tk::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:var(--line-strong)}
.tk .vt{width:14px;height:14px;border-radius:3px;background:var(--line);
  border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:8.5px;line-height:1;color:var(--dim);flex:none}
/* Venue-colored tiles (2026-08-19): Kalshi brand green, Polymarket brand
   blue — the same grounds the board chips wear. */
.tk .vt-k{background:#00d991;border-color:#00d991;color:#002622}
.tk .vt-p{background:#2e5cff;border-color:#2e5cff;color:#fff}
.tk .mk{font-weight:500;font-size:13px;color:var(--accent-text)}
.tk b{font-weight:400;color:var(--text-2)}
.tk .d{font-weight:600}
.tk .d.up{color:var(--ticker-positive)}
.tk .d.down{color:var(--ticker-negative)}
.up{color:var(--up)}.down{color:var(--down)}

/* ── Header ── */
header.site-header{position:sticky;top:0;z-index:20;backdrop-filter:var(--blur-header);-webkit-backdrop-filter:var(--blur-header);background:var(--header-veil);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:var(--h-bar);max-width:var(--w-wrap);margin:0 auto;padding:0 var(--gutter)}
/* Wordmark in the editorial serif site-wide (2026-08-18 operator decision). */
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-family:var(--font-serif);font-weight:var(--fw-regular);font-size:22px;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--text)}
.brand-mark{display:flex;width:24px;height:24px;align-items:center;justify-content:center}
.brand-mark svg{display:block}
nav.header-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{position:relative;padding:var(--pad-nav);border-radius:var(--radius-nav);color:var(--muted);font-size:var(--fs-btn);font-weight:var(--fw-medium);white-space:nowrap;text-decoration:none;transition:color var(--dur-base) var(--ease),background-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.nav-link::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:var(--bw-underline);background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-underline) var(--ease-underline)}
.nav-link:hover{color:var(--text);background:var(--film-strong)}
.nav-link:hover::after{transform:scaleX(1)}
/* Products hover dropdown. Same surface language as .acct-dropdown; opens on
   hover/focus so the trigger stays a plain link to /products. */
.nav-drop{position:relative;display:inline-flex}
.nav-drop-panel{position:absolute;left:0;top:100%;z-index:41;min-width:230px;padding:4px;margin-top:2px;background:var(--face-card);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);display:none;flex-direction:column}
.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{display:flex}
.nav-drop-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;font-size:var(--fs-btn);color:var(--muted);text-decoration:none;white-space:nowrap;transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.nav-drop-item:hover{background:var(--film-strong);color:var(--text)}
.nav-drop-soon{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:2px 7px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-size:var(--fs-btn);font-weight:var(--fw-semibold);padding:var(--pad-btn);border-radius:var(--radius-btn);cursor:pointer;border:1px solid var(--line-strong);background:var(--face-btn);color:var(--text);text-decoration:none;white-space:nowrap;transition:transform var(--dur-quick) var(--ease),border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.btn:hover{transform:var(--lift);border-color:var(--line-strong);background:var(--face-btn-hover);box-shadow:var(--shadow-btn-hover)}
.btn:active{transform:translateY(0)}
.btn-primary{border-color:var(--accent-line);background:var(--face-btn-primary);color:var(--accent-text)}
.btn-primary:hover{background:var(--face-btn-primary-hover);box-shadow:var(--shadow-btn-primary-hover)}
.btn-full{width:100%}
/* Header-sized button. The nav row is set by .nav-link's padding, so a
   full-size .btn in it makes the header taller than every other page chrome;
   this trims the padding to sit on the same baseline as the text links. */
.btn-nav{padding:7px 14px;font-size:var(--fs-btn);border-radius:var(--radius-nav)}
.nav-auth{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ── Account menu ── */
.acct-trigger{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 10px 6px 6px;border-radius:var(--radius-btn);border:1px solid var(--line);background:var(--film-subtle);transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);margin-left:8px}
.acct-trigger:hover,.acct-trigger[aria-expanded="true"]{border-color:var(--line-strong);background:var(--film-strong)}
.acct-avatar{width:22px;height:22px;border-radius:6px;background:var(--accent);color:var(--on-accent);font-size:9.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background-size:cover;background-position:center}
.acct-handle{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.acct-trigger:hover .acct-handle,.acct-trigger[aria-expanded="true"] .acct-handle{color:var(--text)}
.acct-caret{color:var(--dim);font-size:10px}
.acct-dropdown{position:absolute;right:0;top:44px;z-index:41;min-width:200px;background:var(--face-card);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;padding:4px;display:none}
.acct-dropdown.open{display:block}
.acct-dropdown-item{padding:9px 12px;border-radius:8px;font-size:var(--fs-btn);cursor:pointer;color:var(--muted);background:transparent;transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease);border:0;width:100%;text-align:left;font-family:var(--font-sans)}
.acct-dropdown-item:hover{background:var(--film-strong);color:var(--text)}
.acct-dropdown-item.muted{color:var(--dim)}
.acct-dropdown-sep{height:1px;background:var(--line);margin:4px 0}
.acct-backdrop{position:fixed;inset:0;z-index:40;display:none}
.acct-backdrop.open{display:block}

/* ── Mobile menu ── */
.mobile-menu{display:none;position:fixed;inset:0;z-index:50;background:var(--menu-veil);backdrop-filter:var(--blur-menu);-webkit-backdrop-filter:var(--blur-menu);flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px}
.mobile-menu.open{display:flex}
/* Sheet links all render in text-white (operator request 2026-08-24 s8):
   the muted grey read as disabled next to the lit current item. */
.mobile-menu .nav-link{font-size:18px;padding:14px 24px;color:var(--text)}
/* Collapsible Products group in the sheet (2026-08-24 s6): row + caret,
   folded deep-links, and the coming-soon Card countdown row. */
/* Row centers as one unit with the caret tight against the label; the
   folded links + countdown row center with the rest of the sheet
   (operator request 2026-08-24 s7). */
.mobile-menu .nav-prod-row{display:flex;align-items:center;justify-content:center}
.mobile-menu .nav-prod-row .nav-link{padding-right:4px}
.mobile-menu .nav-sub-wrap{display:flex;flex-direction:column;align-items:center}
.mobile-menu .nav-caret{background:none;border:0;color:var(--muted);cursor:pointer;
  padding:14px 8px;display:flex;align-items:center;
  transition:transform var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.mobile-menu .nav-caret:hover{color:var(--text)}
.mobile-menu .nav-caret.open{transform:rotate(180deg)}
.mobile-menu .mn-cd{font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;color:var(--accent);white-space:nowrap;margin-left:8px}
/* Products sub-links (2026-08-18): the desktop dropdown mirrored into the
   sheet — smaller, quieter, tucked under Products. */
.mobile-menu .nav-sub{font-size:14px;padding:6px 24px;color:var(--text)}
.mobile-menu .nav-sub.nav-sub-dim{color:var(--muted)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mobile-menu .close-btn{position:absolute;top:18px;right:18px;border:0;background:none;color:var(--muted);cursor:pointer;padding:8px}
.mobile-menu .close-btn:hover{color:var(--text)}
.menu-btn{display:none;border:0;background:none;cursor:pointer;padding:8px;color:var(--muted);transition:color var(--dur-base) var(--ease)}
.menu-btn:hover{color:var(--text)}
.menu-btn svg{display:block}

/* ── Hero ── */
.hero{padding:64px 0 34px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--gap-hero)}
h1,.h1{margin:0;font-size:var(--fs-h1);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);font-weight:var(--fw-semibold);max-width:var(--measure-hero)}
.hero-sub{margin:0;color:var(--muted);font-size:var(--fs-sub);max-width:var(--measure-sub);text-transform:uppercase;letter-spacing:var(--ls-sub);font-family:var(--font-mono)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* ── Fresh pill ── */
.fresh{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-fresh);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--pad-fresh);background:var(--film-subtle);white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 var(--up-glow);animation:pulse var(--dur-pulse) ease-out infinite}

/* ── Eyebrow ── */
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent);margin-bottom:16px}

/* ── Segmented control ── */
.seg{display:flex;padding:3px;gap:3px;border:1px solid var(--line);border-radius:var(--radius-seg);background:var(--film-subtle)}
.seg button{font-family:var(--font-sans);font-size:var(--fs-seg);font-weight:var(--fw-semibold);padding:10px 14px;border:0;border-radius:var(--radius-seg-item);cursor:pointer;white-space:nowrap;min-height:var(--h-touch);background:transparent;color:var(--muted);transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.seg button:hover{background:var(--film-strong);color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--accent-dim);color:var(--accent);box-shadow:var(--shadow-seg-active)}
.seg button:disabled,.seg button[disabled]{opacity:.5;cursor:not-allowed}
.seg-sm button{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;min-height:var(--h-touch)}

/* ── Window pill ── */
.window{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-stat-key);text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:var(--radius-seg);padding:9px 14px;white-space:nowrap;background:var(--film-subtle)}

/* ── Chips ── */
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-bottom:24px}
.chip{font-family:var(--font-mono);font-size:var(--fs-chip);letter-spacing:var(--ls-chip);text-transform:uppercase;padding:var(--pad-chip);border-radius:var(--radius-pill);cursor:pointer;min-height:var(--h-touch);border:1px solid var(--line);background:var(--film-subtle);color:var(--muted);transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),transform var(--dur-quick) var(--ease)}
.chip:hover{color:var(--text);background:var(--film-strong);transform:var(--lift)}
.chip[aria-pressed="true"]{color:var(--on-accent);background:var(--accent);border-color:var(--accent);font-weight:var(--fw-bold)}

/* ── Board ── */
.board{display:flex;flex-direction:column;gap:var(--gap-board)}
.group{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--face-group);box-shadow:var(--shadow-card);overflow:hidden}
.group-head{display:flex;align-items:center;gap:12px;padding:var(--pad-group-head);background:var(--film-soft);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-group);text-transform:uppercase;color:var(--dim);white-space:nowrap}
.group-head .count{margin-left:auto;color:var(--dim);opacity:.75;white-space:nowrap}
.row{display:grid;grid-template-columns:34px minmax(0,1fr) 92px 200px;align-items:center;gap:var(--gap-row);padding:var(--pad-row);border-bottom:1px solid var(--line-row);transition:background var(--dur-quick) var(--ease)}
.row:hover{background:var(--film-hover)}
.group .row:last-child{border-bottom:0}
.venue{width:26px;height:26px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);color:var(--muted);background:var(--film-raised)}
.venue svg{display:block}
.venue.K{color:var(--venue-kalshi);border-color:var(--venue-kalshi-line);background:var(--venue-kalshi-fill)}
.venue.P{color:var(--venue-poly);border-color:var(--venue-poly-line);background:var(--venue-poly-fill)}
.title{font-size:var(--fs-title);font-weight:var(--fw-medium);letter-spacing:var(--ls-title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{margin-top:3px;font-family:var(--font-mono);font-size:var(--fs-label);color:var(--dim);letter-spacing:var(--ls-ticker)}
.odds{font-family:var(--font-mono);font-size:var(--fs-odds);font-weight:var(--fw-medium);text-align:right;letter-spacing:var(--ls-odds);font-variant-numeric:tabular-nums}
.swing{display:flex;align-items:center;gap:12px}
.track{position:relative;flex:1;height:var(--bw-track);border-radius:var(--radius-pill);background:var(--film-strong);overflow:hidden}
.fill{position:absolute;top:0;bottom:0;left:0;border-radius:var(--radius-pill);width:0;transition:width var(--dur-fill) var(--ease-fill)}
.fill.up{background:var(--face-fill-up)}
.fill.down{background:var(--face-fill-down)}
.delta{font-family:var(--font-mono);font-size:var(--fs-delta);font-weight:var(--fw-bold);min-width:62px;text-align:right;font-variant-numeric:tabular-nums}
.more{width:100%;padding:11px;border:0;border-top:1px solid var(--line);background:var(--film-faint);color:var(--muted);cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-stat-key);text-transform:uppercase;transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.more:hover{background:var(--film-strong);color:var(--accent)}
.state{padding:48px 22px;text-align:center;color:var(--dim);font-family:var(--font-mono);font-size:var(--fs-seg);letter-spacing:var(--ls-label);border:1px solid var(--line);border-radius:var(--radius-card);background:var(--film-subtle)}

/* ── Cards ── */
.card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--face-card);box-shadow:var(--shadow-card);padding:var(--pad-card)}
.card.clv{background:var(--face-clv)}
.card.stack{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.card.stack .eyebrow{align-self:stretch}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--gap-blk)}
.mini{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px}
.mini p{margin:0;font-size:var(--fs-title);color:var(--muted)}
.mini strong{color:var(--text);font-weight:var(--fw-semibold)}

/* ── Stat grid ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 32px}
.stats-2{grid-template-columns:repeat(2,1fr)}
.stat{border:1px solid var(--line);border-radius:var(--radius-stat);padding:var(--pad-stat);background:var(--film)}
.stat .k{font-family:var(--font-mono);font-size:var(--fs-stat-key);letter-spacing:var(--ls-stat-key);text-transform:uppercase;color:var(--dim)}
.stat .v{font-family:var(--font-mono);font-size:var(--fs-stat);font-weight:var(--fw-bold);margin-top:10px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ── Footer ──
   Two stacked bands: the identity/links row, then the venue disclaimer. The
   disclaimer is sans and sentence case on purpose — it is the one block down
   here a stranger has to actually READ, and 60 words of uppercase mono is the
   least readable configuration available (same reasoning that fixed the old
   hero sub). Mono stays for the labels above it. */
/* Columns layout (2026-08-16): brand + blurb left, three link columns,
   then the legal bar and the disclaimer. */
footer.site-footer{margin-top:var(--gap-blk);padding:56px 0 48px;border-top:1px solid var(--line);color:var(--dim)}
footer.site-footer .foot-cols{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;justify-content:space-between}
footer.site-footer .foot-brand{display:flex;flex-direction:column;gap:14px;flex:0 1 320px;min-width:240px}
footer.site-footer .foot-brand .brand{display:flex;align-items:center;gap:10px;color:var(--text);font-family:var(--font-serif);font-weight:var(--fw-regular);letter-spacing:var(--ls-brand);white-space:nowrap}
footer.site-footer .foot-blurb{margin:0;font-family:var(--font-sans);font-size:13.5px;line-height:1.65;color:var(--muted);text-wrap:pretty}
footer.site-footer .foot-col{display:flex;flex-direction:column;gap:12px;min-width:150px}
footer.site-footer .foot-head{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent);margin-bottom:4px}
footer.site-footer .foot-col a{color:var(--muted);font-family:var(--font-sans);font-size:13.5px;text-decoration:none;transition:color var(--dur-base) var(--ease)}
footer.site-footer .foot-col a:hover{color:var(--text)}
/* Condensed Company column (2026-08-19 design consult): the single link list
   flows into three short columns so the footer's height matches the brand
   block — one gold label, no 12-link tower. */
/* Grid, not CSS columns (2026-08-19 alignment fix): columns sit at their
   natural width with a fixed 56px gutter and every row shares one 12px
   baseline, instead of column-count spreading three ragged columns across
   whatever width the flex child happens to get. Fills top-to-bottom. */
footer.site-footer .foot-links{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(4,auto);justify-content:start;
  column-gap:56px;row-gap:12px}
footer.site-footer .foot-soon{font-size:11px;color:var(--dim);white-space:nowrap}
footer.site-footer .foot-links a{display:block}
@media(max-width:820px){
  footer.site-footer .foot-links{grid-template-rows:repeat(6,auto)}
}
/* Phones (2026-08-24): two columns, not a one-per-line tower — the 13-link
   stack was taller than the page content on a 390px screen. */
@media(max-width:520px){
  footer.site-footer .foot-links{grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
/* Legal bar hairline removed (2026-08-18): the © bar and disclaimer read as
   part of the ONE footer, not a second one. */
footer.site-footer .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:40px;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase}
footer.site-footer .foot-bottom>span{white-space:nowrap}
/* --muted, not --dim: at 12px on this ground --dim measures 4.07:1, under the
   4.5:1 AA floor, and a disclaimer nobody can read is worse than no disclaimer
   — it looks like burying it. --muted measures 6.9:1. */
footer.site-footer .foot-disclaimer{font-family:var(--font-sans);font-size:12px;line-height:1.65;letter-spacing:normal;text-transform:none;color:var(--muted);max-width:78ch;margin:16px 0 0}

/* ── Forms ── */
.input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--film-subtle);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-btn);transition:border-color var(--dur-base) var(--ease)}
/* No outline:none here — the global :focus-visible rule (2px amber outline)
   must survive for keyboard users; pointer focus gets the border highlight. */
.input:focus{border-color:var(--accent)}
.input::placeholder{color:var(--dim)}
.divider{display:flex;align-items:center;gap:14px;width:100%;color:var(--dim);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.sso-btn{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--film-subtle);color:var(--text);font-size:var(--fs-btn);font-weight:var(--fw-medium);cursor:pointer;transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);text-decoration:none;font-family:var(--font-sans)}
.sso-btn:hover{background:var(--film-strong);border-color:var(--line-strong)}
.sso-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:0 0 28px}
.sso-icon img{width:100%;height:100%;object-fit:contain;display:block}
.sso-icon img.x-logo{width:70%;height:70%;filter:invert(1)}
.sso-badge{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.sso-badge.live{color:var(--up)}
.dropzone{border:2px dashed var(--line-strong);border-radius:var(--radius-card);padding:32px 24px;text-align:center;cursor:pointer;transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease)}
.dropzone:hover{border-color:var(--accent);background:var(--film-subtle)}
.dropzone-label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.file-chip{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-btn);background:var(--film-subtle);margin-bottom:8px}
.file-chip .name{font-family:var(--font-mono);font-size:12px;color:var(--text)}
.file-chip .fmeta{font-family:var(--font-mono);font-size:11px;color:var(--dim)}
.file-chip .remove{margin-left:auto;cursor:pointer;color:var(--dim);border:0;background:none;font-size:14px;padding:2px 6px}
.file-chip .remove:hover{color:var(--down)}

/* ── Notice ── */
.notice{border:1px solid var(--line);border-radius:var(--radius-btn);padding:14px 16px;background:var(--film-subtle);width:100%}
.notice.notice-up{border-color:rgba(61,220,145,.3);background:rgba(61,220,145,.06)}
.notice.notice-down{border-color:rgba(255,95,109,.3);background:rgba(255,95,109,.06)}
.notice-title{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:6px}
.notice-up .notice-title{color:var(--up)}
.notice-down .notice-title{color:var(--down)}
.notice-body{font-size:var(--fs-title);line-height:1.5;color:var(--muted)}

/* ── Progress bar ── */
.progress{width:100%;height:6px;border-radius:var(--radius-pill);background:var(--film-strong);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--radius-pill);background:var(--accent);transition:width .3s ease}

/* ── Report components ── */
.verdict{border-top:2px solid;border-radius:var(--radius-card);padding:28px 26px;background:var(--film-soft)}
.verdict.verdict-up{border-color:var(--up)}
.verdict.verdict-down{border-color:var(--down)}
.verdict.verdict-muted{border-color:var(--muted)}
.verdict-tag{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-group);text-transform:uppercase;margin-bottom:18px}
.verdict-up .verdict-tag{color:var(--up)}
.verdict-down .verdict-tag{color:var(--down)}
.verdict-muted .verdict-tag{color:var(--muted)}
.verdict-headline{font-size:19px;line-height:1.3;font-weight:var(--fw-medium);color:var(--text);margin-bottom:12px}
.verdict-body{font-size:var(--fs-title);line-height:1.6;color:var(--muted);max-width:52ch}
.verdict-twist{font-size:var(--fs-title);line-height:1.6;color:var(--muted);max-width:52ch;font-style:italic;margin-top:12px}

.cat-table{width:100%;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;border-collapse:separate;border-spacing:0}
.cat-table th{text-align:left;padding:13px 18px;background:var(--film-soft);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-stat-key);text-transform:uppercase;color:var(--dim);font-weight:var(--fw-regular)}
.cat-table th:not(:first-child){text-align:right}
.cat-table td{padding:14px 18px;border-bottom:1px solid var(--line-row);font-size:var(--fs-title)}
.cat-table td:not(:first-child){text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.cat-table tr:last-child td{border-bottom:0}
.cat-table tr:hover td{background:var(--film-hover)}
.cat-table .small-sample{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-left:8px}

.ladder{display:flex;flex-direction:column;gap:14px}
.ladder-rung{border:1px solid var(--line);border-radius:var(--radius-stat);padding:18px 20px;background:var(--film)}
.ladder-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ladder-name{font-size:15px;font-weight:var(--fw-semibold)}
.ladder-range{font-family:var(--font-mono);font-size:11px;color:var(--dim);letter-spacing:.06em}
.ladder-bar{position:relative;height:6px;border-radius:var(--radius-pill);background:var(--film-strong);overflow:visible}
.ladder-bar .axis{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--line-strong)}
.ladder-fill{position:absolute;top:0;height:100%;border-radius:var(--radius-pill)}
.ladder-fill.up{background:var(--face-fill-up)}
.ladder-fill.down{background:var(--face-fill-down)}
.ladder-label{position:absolute;top:-18px;font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.ladder-meta{display:flex;gap:16px;margin-top:10px;font-family:var(--font-mono);font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}

.leak-card{border:1px solid rgba(255,95,109,.3);border-radius:var(--radius-card);background:linear-gradient(140deg,rgba(255,95,109,.06),rgba(15,22,32,.95) 42%);box-shadow:var(--shadow-card);padding:24px 26px;margin-top:18px;font-size:var(--fs-title);line-height:1.6;color:var(--muted)}

.exclusion-table{width:100%;border:1px solid var(--line);border-radius:var(--radius-stat);overflow:hidden;border-collapse:separate;border-spacing:0}
.exclusion-table td{padding:12px 16px;border-bottom:1px solid var(--line-row);font-size:var(--fs-title);color:var(--muted)}
.exclusion-table td:first-child{font-family:var(--font-mono);font-size:14px;font-weight:var(--fw-bold);color:var(--text);text-align:right;width:60px;font-variant-numeric:tabular-nums}
.exclusion-table tr:last-child td{border-bottom:0}
.exclusion-total{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}

/* ── Pricing ── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pricing-tier{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pricing-tier .price{font-family:var(--font-mono);font-size:36px;font-weight:var(--fw-bold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pricing-tier .period{font-size:16px;font-weight:var(--fw-regular);color:var(--muted)}
.pricing-tier .desc{font-size:var(--fs-title);line-height:1.6;color:var(--muted)}
.pricing-features{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;width:100%}
.pricing-features li{font-size:14px;color:var(--muted);padding-left:16px;position:relative}
.pricing-features li::before{content:"+";position:absolute;left:0;color:var(--accent);font-family:var(--font-mono);font-weight:700}
.pricing-badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-line);border-radius:var(--radius-xs);padding:3px 8px}

/* ── Prose (legal) ── */
.prose{font-size:var(--fs-title);line-height:1.6;color:var(--muted)}
.prose h3{font-size:17px;font-weight:var(--fw-semibold);color:var(--text);margin:24px 0 8px;letter-spacing:-.01em}
.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{padding-left:20px;margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose a{color:var(--accent)}
.prose a:hover{color:var(--accent-hover)}

/* ── Contact list ── */
.contact-list{border:1px solid var(--line);border-radius:var(--radius-stat);overflow:hidden}
.contact-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line-row);transition:background var(--dur-quick) var(--ease)}
.contact-row:last-child{border-bottom:0}
.contact-row:hover{background:var(--film-hover)}
.contact-label{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--ls-stat-key);text-transform:uppercase;color:var(--dim);min-width:100px}
.contact-value{font-size:var(--fs-title);color:var(--accent);text-decoration:none}
.contact-value:hover{color:var(--accent-hover)}
.contact-ext{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--dim)}

/* ── Run table (account history) ── */
.run-table{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--face-group);box-shadow:var(--shadow-card);overflow:hidden}
.run-table-head{display:grid;grid-template-columns:120px 90px 92px minmax(0,1fr) 20px;gap:18px;padding:var(--pad-group-head);background:var(--film-soft);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-group);text-transform:uppercase;color:var(--dim)}
.run-row{display:grid;grid-template-columns:120px 90px 92px minmax(0,1fr) 20px;align-items:center;gap:18px;padding:var(--pad-row);border-bottom:1px solid var(--line-row);cursor:pointer;transition:background var(--dur-quick) var(--ease)}
.run-row:hover{background:var(--film-hover)}
.run-row:last-child{border-bottom:0}

/* ── Upload nudge ── */
.upload-nudge{margin-bottom:18px;border:1px solid var(--accent-line);border-radius:var(--radius-card);background:var(--face-clv);box-shadow:var(--shadow-card);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ── Locked preview ── */
.locked-blur{filter:blur(3px) saturate(.65);opacity:.5;pointer-events:none;user-select:none}
.locked-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.locked-card{max-width:520px;width:100%;border:1px solid var(--accent-line);border-radius:var(--radius-card);background:var(--face-clv);box-shadow:0 40px 90px -40px #000,inset 0 1px 0 var(--film-top-edge);padding:34px 34px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* ── Blk spacing ── */
.blk{margin-top:var(--gap-blk)}
.blk-sm{margin-top:18px}

/* ── Heading styles ── */
h2,.h2{margin:0;font-size:var(--fs-h2);font-weight:var(--fw-semibold);letter-spacing:var(--ls-h2)}
h3,.h3{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-semibold);letter-spacing:var(--ls-h2)}

/* ── Responsive ── */
@media(max-width:900px){body{background-attachment:scroll}}
@media(max-width:820px){
  .bar{height:56px;gap:12px;padding:0 var(--gutter-mobile)}
  .brand{white-space:nowrap;font-size:15px;gap:8px}
  nav.header-nav{gap:2px}
  nav.header-nav .nav-link:not(.keep){display:none}
  nav.header-nav .nav-link{padding:8px 10px;font-size:13px}
  nav.header-nav .btn{padding:8px 13px;font-size:12.5px;margin-left:4px!important}
  /* Sign up STAYS in the mobile header (2026-08-24 s6): Home left the
     header, so the overflow that forced the 2026-08-09 collapse is gone —
     the slot Home held now shows the one ask. */
  .menu-btn{display:block}
  .ticker{height:36px}
  .tk{padding:0 14px;font-size:11px;gap:8px}
  .hero{padding:36px 0 26px;gap:14px}
  h1,.h1{font-size:32px;max-width:18ch;letter-spacing:-.03em}
  .hero-sub{font-size:11.5px;letter-spacing:.14em;max-width:34ch}
  .hero-cta{width:100%;gap:8px}
  .hero-cta .btn{flex:1;justify-content:center}
  .seg button{padding:7px 12px;font-size:12px}
  .window{padding:8px 12px;font-size:10.5px}
  .chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin:0 -16px;padding:0 16px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto}
  .board{gap:14px}
  .group-head{padding:12px 16px 11px;font-size:10px}
  .row{grid-template-columns:28px minmax(0,1fr) auto;gap:10px 12px;padding:14px 16px}
  .venue{width:24px;height:24px;font-size:10px}
  .title{font-size:13.5px}
  .meta{font-size:10.5px}
  .odds{font-size:15px}
  .swing{grid-column:2/-1;margin-top:2px;gap:10px}
  .delta{font-size:12px;min-width:56px}
  .card{padding:26px 20px}
  h2,.h2{font-size:22px}
  h3,.h3{font-size:18px}
  .stats{grid-template-columns:1fr;gap:10px;margin:22px 0 24px}
  .stat{padding:16px 18px}
  .stat .v{font-size:24px;margin-top:6px}
  .duo{grid-template-columns:1fr;gap:14px}
  .mini{flex-direction:column;align-items:flex-start;gap:14px}
  .pricing-grid{grid-template-columns:1fr;gap:14px}
  .run-table-head,.run-row{grid-template-columns:90px 70px 72px minmax(0,1fr);gap:10px;padding:12px 16px}
  .run-table-head>:last-child,.run-row>:last-child{display:none}
  footer.site-footer{padding:40px 0 40px}
  footer.site-footer .foot-cols{gap:32px}
  footer.site-footer .foot-bottom{margin-top:32px;font-size:10px}
  .upload-nudge{flex-direction:column;align-items:flex-start}
}
/* Hero mark — the brand sword above the headline. Same SVG as the header
   lockup (one source of truth); the width/height attributes on it are
   presentational, so these rules override them cleanly. The rect's rx scales
   with the viewBox, so the rounded corner stays proportional at any size. */
.hero-mark{display:block;line-height:0}
.hero-mark svg{
  width:96px;height:96px;
  /* drop-shadow follows the SVG's own alpha, so the halo traces the rounded
     plate instead of a square box. Two layers: a grounding shadow so the mark
     sits ON the page, and a warm amber bloom tying it to the accent. */
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.6))
         drop-shadow(0 0 30px var(--accent-dim));
}
@media(max-width:820px){
  .hero-mark svg{width:76px;height:76px}
}
@media(max-width:400px){
  .hero-mark svg{width:60px;height:60px}
}

/* ── The Ticket — /account intake as a three-state machine ──
   NO TAPE → WIRING → FEED LIVE. Single column; the page is the state,
   nothing hides in a modal. Mono is for machine truth, sans for talk. */
.ticket{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.ticket-head{margin:0;font-size:clamp(22px,3vw,28px);font-weight:var(--fw-semibold);letter-spacing:-.01em}
.ticket-sub{margin:0 0 4px;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:48ch}
.ticket-alt{margin-top:10px;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--muted)}
.ticket-alt-dim{color:var(--dim)}
.ticket-alt a{color:var(--accent);text-decoration:none}
.ticket-alt a:hover{text-decoration:underline}
.ticket-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Keyhole — the credential form. The PEM placeholder is literally the shape
   of a PEM so the field explains itself. */
.keyhole-label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.keyhole-hint{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--dim);margin-top:3px;max-width:52ch;line-height:1.6}
.keyhole-hint strong{color:var(--text-2);font-weight:600}
.keyhole-input,.keyhole-pem{width:100%;padding:9px 11px;background:var(--bg);border:1px solid var(--line);border-radius:6px;color:var(--text);font-family:var(--font-mono)}
.keyhole-input{font-size:12.5px}
.keyhole-pem{font-size:11.5px;resize:vertical;line-height:1.55}
.keyhole-input:focus,.keyhole-pem:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 2px var(--accent-ring)}

/* Fingerprint chip — the paste collapsed into an artifact */
.key-chip{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--accent-line);border-radius:6px;background:var(--accent-dim);font-family:var(--font-mono);font-size:12px}
.key-chip-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.key-chip-print{color:var(--text-2);overflow-wrap:anywhere;min-width:0}
.key-chip-edit{margin-left:auto;flex:none;border:0;background:none;color:var(--muted);font-family:var(--font-mono);font-size:11px;cursor:pointer;text-decoration:underline}
.key-chip-edit:hover{color:var(--text)}

/* Custody — a term sheet, not a trust badge. Every line literally true. */
.custody{margin-top:14px;border:1px solid var(--line);border-radius:6px;padding:14px 16px;font-family:var(--font-mono)}
.custody-head{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.custody-line{font-size:12px;line-height:1.75;color:var(--muted)}
.custody-line strong{color:var(--text-2);font-weight:600}

/* Ledger row — the whole connected state in one line */
.ledger-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--film-subtle);font-family:var(--font-mono);font-size:12px}
.lr-state{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--up)}
.lr-fact{color:var(--muted)}
.lr-spacer{flex:1}
.lr-destroy{border:0;background:none;color:var(--dim);font-family:var(--font-mono);font-size:11.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lr-destroy:hover{color:var(--down)}

@media(max-width:640px){
  .ledger-row{gap:8px}
  .lr-spacer{display:none}
  .ledger-row .btn{width:100%}
}

/* Progress — a single long request (score-my-fills). Time-based fill toward
   an estimate, asymptotic so it never sits at 100% before the server answers:
   width = 1 - e^(-t/tau) driven from JS. The label carries the honest part
   (elapsed / estimate); the bar is the feel. */
.progress{display:block;width:100%;margin-top:12px;min-width:0}
.progress-track{display:block;height:6px;min-height:6px;border-radius:var(--radius-pill);
  background:var(--film-strong);overflow:hidden}
.progress-fill{display:block;height:100%;width:0%;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  transition:width .25s linear}
.progress-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:4px 10px;margin-top:7px;min-width:0;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.5;letter-spacing:.04em;color:var(--muted)}
.progress-label span:first-child{min-width:0;overflow-wrap:anywhere}
.progress-label .pct{color:var(--accent);font-variant-numeric:tabular-nums;flex:none}

/* Unlock CTA — the affordance next to a gated control. Reads as an action,
   not a caption: accent text, real hit area, own row. */
.unlock-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:var(--radius-pill);
  border:1px solid var(--accent-line);background:var(--accent-dim);
  color:var(--accent);text-decoration:none;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  transition:background var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease),
             color var(--dur-base) var(--ease),transform var(--dur-quick) var(--ease);
}
.unlock-cta:hover{background:var(--accent-ring);border-color:var(--accent);color:var(--accent-hover);transform:var(--lift)}
.unlock-cta:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px}
@media(max-width:420px){
  .unlock-cta{font-size:11.5px;padding:8px 13px;gap:6px}
}

@media(max-width:400px){
  h1,.h1{font-size:28px}
  .hero-cta{flex-direction:column}
}
@media(max-width:340px){
  nav.header-nav .nav-link{display:none}
}
/* Mobile ticker (2026-08-18 mobile handoff): 11px type and 24px edge fades
   under 480px — the desktop 60px fade eats too much of a narrow viewport. */
@media(max-width:480px){
  .ticker::after{background:linear-gradient(90deg,var(--bg) 0,transparent 24px,transparent calc(100% - 24px),var(--bg) 100%)}
  .tk{font-size:11px}
}
/* Reduced motion (2026-08-18): no auto-scroll at all — ticker.js renders a
   single non-duplicated line; the strip scrolls by the user's own gesture. */
@media(prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ticker::-webkit-scrollbar{display:none}
  .ticker-track{animation:none}
}