/* ===========================================================================
   The public site (v5.33): landing, pricing, ninjatrader. Loaded AFTER app.css
   and only on those three pages — the tokens, the buttons, the chips, the
   pills and table.data all come from app.css; this file is the marketing
   layout on top, and nothing in here is needed by a signed-in page.
   Light only by decision (docs/pricing.md §4); every colour is still a token
   so the pairs in app.css stay the single source of truth.
   Prefix: every class here starts with `s-` so it cannot collide with the app.
   =========================================================================== */

/* ---------- frame ---------- */
.s-wrap { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.s-section { padding-top: 56px; padding-bottom: 56px; }
.s-band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.s-band + .s-band { border-top: 0; }

/* ---------- top bar: the app's .topbar, with a site nav instead of the tabs ---------- */
.s-topbar { justify-content: space-between; }
/* The mark and wordmark take app.css's sizes (30px mark on phones, 64px + a
   34px wordmark from 768px), so the two bars read as one (v5.91). */
/* Phone: the nav is a panel hanging off the sticky bar, opened by the app's
   own .navtoggle (app.js adds .open). Sign in lives in the panel here and in
   the bar on desktop — one link, two homes, never both visible. */
.s-nav { display: none; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; padding: 8px 12px 12px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-pop); }
/* Same height cap and self-scroll as the app's .navtabs (app.css, v5.112): a
   short landscape phone is shorter than seven rows. */
.s-nav { max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.s-nav.open { display: flex; }
.s-nav a { color: var(--muted); font-weight: 500; padding: 11px 12px; border-radius: var(--radius-token); }
.s-nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.s-nav a.active { color: var(--text); background: var(--surface-2); }
.s-nav-signin { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 14px !important; border-radius: 0 !important; }
.s-actions { display: flex; align-items: center; gap: 8px; }
.s-actions .navtoggle { margin-left: 0; }
.s-signin { display: none; color: var(--muted); font-weight: 500; padding: 9px 10px; border-radius: var(--radius-token); }
.s-signin:hover { color: var(--text); text-decoration: none; }
.s-actions .btn-primary { padding: 8px 12px; font-size: 14px; }

/* ---------- type ---------- */
.s-display { font-family: 'Anton', var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; margin: 0; }
.s-h1 { font-size: 44px; }
.s-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.s-eyebrow.nt8 { color: var(--pos-ink); }
.s-lede { color: var(--muted); font-size: 18px; line-height: 1.5; max-width: 60ch; text-wrap: pretty; margin: 0; }
.s-h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 0; text-wrap: pretty; }
.s-p { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0; text-wrap: pretty; }
.s-p.sm { font-size: 14px; }
.s-sample { font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.s-stack { display: flex; flex-direction: column; gap: 16px; }
.s-stack.tight { gap: 8px; }
.s-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.s-ctas .btn-primary, .s-ctas .btn-secondary { padding: 13px 22px; font-size: 16px; }
.s-fine { font-size: 13px; color: var(--muted); }

/* ---------- checks ---------- */
.s-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.s-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.s-ck { flex: none; margin-top: 2px; }

/* ---------- cards & grids ---------- */
.s-card { box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.s-card.pad { padding: 20px; }
.s-card-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.s-card .table-wrap { overflow-x: auto; }
.s-grid2, .s-grid3, .s-grid4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.s-grid2 { gap: 28px; }
.s-grid2 > .s-first { order: -1; }
.s-title { font-weight: 600; }

/* ---------- hero ---------- */
.s-hero { background: var(--surface); border-bottom: 1px solid var(--border); }
.s-hero .chip { align-self: flex-start; }
.s-hero .hero { margin-bottom: 0; }
.s-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s-hero-stats .stat { padding: 12px 10px; }
.s-hero-stats .stat-v { font-size: 20px; }
.s-hero-stats .stat-k { font-size: 11px; }

/* ---------- the Book mock-up ---------- */
.s-book table.data { min-width: 760px; }
.s-book .xblock { min-width: 210px; }
.s-book .xhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s-book .xwhy { color: var(--muted); font-size: 12px; margin-top: 5px; }
.s-book tr.funded { background: var(--funded-row); }
.s-acct { font-weight: 600; }
.s-acct-sub { color: var(--muted); font-size: 12px; }

/* ---------- the NT8 chart ---------- */
.s-chart { padding: 10px; }
.s-chart svg { display: block; width: 100%; height: auto; }

/* ---------- journal mock-up ---------- */
.s-jcard { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.s-jcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.s-jnums { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.s-jnums .muted { margin-right: 4px; }

/* An app component used as a mock-up on the site (the Journal day card):
   app.css gives .card a bottom margin for the page flow; inside a site
   stack the gap does that job. */
.s-mock.card { margin-bottom: 0; }
.s-mock .jcard-head h2 { font-size: 17px; }
/* The two analysis tables: dense numeric columns read as one line each and
   scroll inside their card rather than fold. */
.s-analysis table.data { min-width: 480px; }
.s-analysis table.data th, .s-analysis table.data td { white-space: nowrap; }

/* ---------- proof ---------- */
.s-ph { background: repeating-linear-gradient(135deg, var(--warn-weak) 0 8px, var(--warn-weak-2) 8px 16px); border: 1px dashed var(--warn-border); color: var(--warn-ink); border-radius: var(--radius-token); padding: 10px 12px; font-size: 13px; }

/* ---------- pricing ---------- */
.s-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.s-tier { position: relative; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.s-tier.big { padding: 28px 24px; }
.s-tier.featured { border: 2px solid var(--accent); }
/* The Founding Operator seat (v5.92): the amber pair, so it reads as the
   guided, limited card next to Pro's blue without a second accent colour;
   every token is a light-dark() pair from app.css. */
.s-tier.vip { border: 2px solid var(--warn-ink); }
.s-tier.vip .s-tier-spots { background: var(--warn-weak); color: var(--warn-ink); }
.s-tier-badge { position: absolute; top: -11px; left: 16px; }
.s-tier-badge.vip { background: var(--warn-weak); color: var(--warn-ink); border-color: transparent; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.s-tier-head { display: flex; flex-direction: column; gap: 6px; }
.s-tier-name { font-weight: 700; font-size: 18px; }
.s-tier-price { font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.s-tier-per { color: var(--muted); font-size: 14px; }
.s-tier-save { color: var(--pos); font-weight: 600; white-space: nowrap; }
.s-tier-spots { font-weight: 600; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-token); font-size: 14px; }
.s-tier .s-checks { flex-grow: 1; }
.s-tier .s-checks li { font-size: 14px; }
.s-tier-cta { width: 100%; box-sizing: border-box; }
.s-pricing-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
/* The 14-day guarantee under the cards (v5.92): the green pair, one line. */
.s-guarantee { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 14px 18px; background: var(--pos-weak); border: 1px solid var(--pos); border-radius: var(--radius); color: var(--text); }
.s-guarantee-ico { flex: none; font-size: 20px; line-height: 1.3; }
.s-guarantee p { margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.s-guarantee strong { color: var(--pos-ink); }
.s-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-token); padding: 3px; gap: 2px; margin-top: 8px; }
.s-toggle span { padding: 7px 14px; border-radius: 6px; color: var(--muted); font-weight: 500; font-size: 14px; }
.s-toggle span.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.s-spot { padding: 24px; border-left: 4px solid var(--funded-edge); }
.s-cmp th { text-align: center; }
.s-cmp th:first-child { text-align: left; }
.s-cmp td { text-align: center; }
.s-cmp td:first-child { text-align: left; font-weight: 500; }
.s-cmp th.pro { color: var(--accent); }
.s-cmp tr.s-cmp-group th { text-align: left; padding: 14px 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.s-faq { display: flex; flex-direction: column; }
.s-faq > div { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-top: 1px solid var(--border); }
.s-faq-q { font-weight: 600; font-size: 16px; margin: 0; }
.s-faq-a { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; text-wrap: pretty; }

/* ---------- ninjatrader page ---------- */
.s-code { margin: 0; padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--surface-2); overflow-x: auto; }
.s-steps { display: flex; flex-direction: column; gap: 18px; }
.s-step { display: flex; gap: 14px; align-items: flex-start; }
.s-step-n { flex: none; width: 32px; height: 32px; border-radius: var(--radius-token); background: var(--accent-weak); color: var(--accent-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.s-fields > div { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border); }
.s-fields b { flex: none; width: 150px; font-variant-numeric: tabular-nums; font-weight: 700; }
.s-instr { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); border-color: transparent; box-shadow: none; }

/* ---------- about page: the release list ---------- */
/* Narrow leading column on purpose: a version is four characters, and a
   150px `.s-fields b` would strand the date halfway across the card. */
.s-rel > div { display: flex; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.s-rel > div:first-child { border-top: 0; }
.s-rel b { flex: none; min-width: 52px; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- legal pages: one column of prose ---------- */
.s-legal { max-width: 72ch; padding-top: 56px; padding-bottom: 72px; }
.s-legal .s-h1 { font-size: 40px; margin: 8px 0 6px; }
.s-legal-meta { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.s-legal .s-lede { font-size: 17px; margin-bottom: 8px; }
.s-legal h2 { font-size: 20px; font-weight: 700; margin: 36px 0 8px; letter-spacing: -.01em; }
.s-legal p, .s-legal li { font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.s-legal p { margin: 0 0 12px; }
.s-legal ul { margin: 0 0 12px; padding-left: 22px; }
.s-legal li { margin-bottom: 6px; }
.s-legal .table-wrap { margin: 8px 0 16px; }
.s-legal code { font-size: 14px; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
/* A fact the owner has not filled in yet (lib/legal.php). Loud on purpose:
   the page must not be shown to Polar or a stranger with one of these on it. */
.s-todo { background: var(--warn-weak-2); color: var(--warn-ink); border: 1px dashed var(--warn-border); border-radius: 6px; padding: 0 6px; font-weight: 700; }

/* ---------- closing band ---------- */
.s-cta { background: var(--text); color: var(--on-solid); }
.s-cta .s-display { color: var(--on-solid); font-size: 32px; }
.s-cta p { color: var(--muted); margin: 0; max-width: 52ch; text-wrap: pretty; }
.s-cta .btn-secondary { background: transparent; color: var(--on-solid); border-color: var(--border-strong); }
.s-cta-row { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; padding-top: 56px; padding-bottom: 56px; }
.s-cta-row.split { text-align: left; align-items: flex-start; }

/* ---------- footer ---------- */
.s-foot { border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.s-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 40px; }
.s-foot .brand-mark { height: 22px; }
.s-foot .brand-text { font-size: 16px; }
/* The release stamp as a subscript to the wordmark: small, on the baseline,
   tucked against the last letter. A real <sub>, so the semantics match; the
   vertical-align it would add is reset because the row is flex-aligned. */
.s-foot .brand-ver { font-size: 10px; font-weight: 500; line-height: 1; color: var(--muted); align-self: flex-end; margin-left: -6px; padding-bottom: 1px; vertical-align: baseline; letter-spacing: .02em; }
.s-foot-links { display: flex; gap: 16px; flex-wrap: wrap; }
.s-foot-links a { color: var(--muted); }
.s-foot-links a:hover { color: var(--text); }

/* ---------- ≥768: the desktop layout ---------- */
@media (min-width: 768px) {
  .s-wrap { padding-left: 24px; padding-right: 24px; }
  .s-section { padding-top: 88px; padding-bottom: 88px; }
  .s-nav, .s-nav.open { display: flex; flex-direction: row; align-items: center; gap: 4px; position: static; padding: 0; background: none; border: 0; box-shadow: none; }
  .s-nav a { padding: 9px 12px; }
  .s-nav a.active { background: none; }
  .s-nav-signin { display: none; }
  .s-signin { display: inline-block; }
  .s-h1 { font-size: 64px; }
  .s-legal .s-h1 { font-size: 48px; }
  .s-h2 { font-size: 28px; }
  .s-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
  .s-grid2 > .s-first { order: 0; }
  .s-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-hero-stats { gap: 16px; }
  .s-hero-stats .stat { padding: 12px 14px; }
  .s-hero-stats .stat-v { font-size: 22px; }
  .s-cta .s-display { font-size: 40px; }
  .s-cta-row.split { flex-direction: row; justify-content: space-between; align-items: center; }
  .s-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
  .s-spot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: center; }
}
@media (min-width: 1024px) {
  .s-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}