/* ============================================================================
   Trader Blueprint — marketing site stylesheet
   Direction: "editorial data". Shared by index / features / pricing / blog.
   Both themes ship; System follows the OS via theme.js.
   Spec: docs/superpowers/specs/2026-09-09-marketing-site-redesign-design.md
   ============================================================================ */

/* Self-hosted display face — Schibsted Grotesk (SIL Open Font License 1.1, so
   self-hosting is permitted). Files under assets/fonts/ are Google Fonts' own
   v7 subsets; the licence + copyright notice ship beside them as
   assets/fonts/OFL.txt (unmodified, from the same google/fonts upstream).
   The weight axis (600 800) is one variable file per subset.
   latin-ext is kept only for the ₹ / € / − glyphs (U+20A0–20C0, U+2212).
   Body prose stays on the system stack (--font-body); figures/labels use the
   system monospace stack (--font-mono). No external font request is made. */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal; font-weight:600 800; font-display:swap;
  src:url("assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal; font-weight:600 800; font-display:swap;
  src:url("assets/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

html[data-theme="dark"]{
  --bg:#0A0C10; --surface:#15181C; --surface-2:#1B1F24; --surface-3:#22272D;
  /* --muted lightened from #67717C (3.94:1 on --bg — failed WCAG 2.2 AA for
     small text). #7C8792 measures 5.35:1 on --bg, 4.87:1 on --surface. */
  --border:#232930; --ink:#E8ECEF; --ink-2:#9AA4AD; --muted:#7C8792;
  --green:#29AC72; --red:#C93752; --accent:#3ECF8E;
  --green-soft:rgba(41,172,114,.12); --red-soft:rgba(201,55,82,.12);
  --green-line:rgba(41,172,114,.38);
  /* Gain/loss as TEXT. The frozen swatch tokens fail WCAG AA as small text on
     these surfaces (--red #C93752 -> 3.3:1, worst case). Measured on --bg /
     --surface / --surface-2 / --surface-3: --pos-text >= 8.3:1, --neg-text
     #EC6D80 5.0-6.6:1. --red/--accent stay the swatch/border/fill colours. */
  --pos-text:var(--accent); --neg-text:#EC6D80;
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --hero-glow:radial-gradient(60% 50% at 50% 0%, rgba(62,207,142,.13), transparent 70%);
  --grid-line:rgba(255,255,255,.03);
}
html[data-theme="light"]{
  --bg:#EEF1F5; --surface:#FFFFFF; --surface-2:#F5F7FA; --surface-3:#EAEEF3;
  /* --muted darkened from #8A95A0 (2.69:1 on --bg — failed WCAG 2.2 AA for
     small text). #5F6A75 measures 4.87:1 on --bg, 5.52:1 on --surface. */
  --border:#E0E5EB; --ink:#1A2027; --ink-2:#55606B; --muted:#5F6A75;
  --green:#0A6E3E; --red:#EE5A70; --accent:#0E9E63;
  --green-soft:rgba(10,110,62,.10); --red-soft:rgba(238,90,112,.13);
  --green-line:rgba(10,110,62,.32);
  /* Gain/loss as TEXT — see the dark block. Light swatch --red #EE5A70 is
     2.9-3.3:1 and mint --accent as text is ~1.9:1 (both fail). Measured:
     --pos-text (#0A6E3E) 5.4-6.3:1, --neg-text (#B81D38) 5.5-6.4:1. */
  --pos-text:var(--green); --neg-text:#B81D38;
  --shadow:0 6px 20px rgba(60,70,90,.12);
  --hero-glow:radial-gradient(60% 50% at 50% 0%, rgba(14,158,99,.10), transparent 70%);
  --grid-line:rgba(20,30,40,.05);
}

:root{
  --radius:12px; --radius-sm:10px; --radius-chip:8px; --btn-radius:11px;
  --maxw:1120px;
  --rule:1px solid var(--border);
  --font-display:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  /* Figures / labels / section numbers: the OS monospace every trader already
     reads in their terminal and broker. No web font, nothing to download. */
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

h1,h2,h3{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; }
h1{ font-size:clamp(2.5rem,6vw,4.25rem); line-height:1.03; letter-spacing:-.03em; }
h2{ font-size:clamp(1.75rem,3.5vw,2.5rem); line-height:1.12; }
h3{ font-size:1.1875rem; font-weight:700; letter-spacing:-.01em; }

/* Focus ring must clear 3:1 against the page (WCAG 2.4.11). Mint --accent is
   only ~1.8:1 on the light surfaces, so use --pos-text (mint in dark, deep
   green in light — 5.4:1+ both ways). */
:focus-visible{ outline:2px solid var(--pos-text); outline-offset:2px; border-radius:3px; }

/* Keyboard users land on this before the ~7 nav links. Off-screen until focused. */
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:100;
  background:var(--surface); color:var(--ink); border:var(--rule);
  padding:8px 14px; border-radius:var(--btn-radius); font-size:14px; font-weight:600;
  transition:top .12s ease;
}
.skip-link:focus{ top:8px; }

/* -------------------------------- layout ------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:80px 0; border-top:var(--rule); }
/* The first <section> on every page is .hero (no .section class), so
   `.section:first-of-type` never matched and section 01's border-top doubled up
   with .trust-strip's border-bottom into a 2px hairline. Target the real
   adjacencies instead. */
.trust-strip + .section{ border-top:0; }
.hero + .section{ border-top:0; }
.section-sm{ padding:48px 0; }
.center{ text-align:center; }
.lede{ font-size:1.0625rem; color:var(--ink-2); max-width:60ch; }
.center .lede{ margin-left:auto; margin-right:auto; }

.eyebrow{
  font-family:var(--font-mono); font-weight:500; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
/* --accent (mint) as *text* is 1.8–3.0:1 on the light surfaces — fails AA even
   as large text. The token value is frozen (P&L palette), so every place it is
   used as text swaps to --green (#0A6E3E, 5.4–6.3:1) in light theme. Dark
   --accent as text is 8.3:1+ and stays. */
html[data-theme="light"] .eyebrow{ color:var(--green); }
.back-link{ color:var(--accent); font-weight:600; }
html[data-theme="light"] .back-link{ color:var(--green); }
html[data-theme="light"] .hero h1 .accent{ color:var(--green); }
html[data-theme="light"] .brand .b2{ color:var(--green); }
.section-num{
  font-family:var(--font-mono); font-weight:500; font-size:.75rem;
  letter-spacing:.1em; color:var(--muted); display:block; margin-bottom:12px;
}
.label{
  font-family:var(--font-mono); font-weight:500; font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}

/* === components === (Task 2 appends below this line) */

/* ------------------------------ buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--btn-radius); font-size:14.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; font-family:var(--font-body);
  transition:transform .12s ease, opacity .12s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:#04150D; }
.btn-ghost{ background:var(--surface-2); color:var(--ink); border-color:var(--border); }
.btn-lg{ padding:14px 26px; font-size:15.5px; }
.btn-block{ width:100%; }

/* ------------------------------- header -------------------------------- */
/* The mount divs must generate no box: .site-head is position:sticky, and an
   ancestor whose height equals the header's own leaves zero sticky travel — the
   header (and the mobile hamburger + its absolutely-positioned panel) would
   scroll away. display:contents promotes .site-head/.site-foot to effective
   children of <body>. */
#siteNav, #siteFooter{ display:contents; }
.site-head{
  position:sticky; top:0; z-index:50; min-height:64px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:var(--rule);
}
.site-head .wrap{ display:flex; align-items:center; gap:24px; min-height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-.2px; font-family:var(--font-display); }
.brand .mark{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--accent),var(--green)); color:#04150D; font-weight:800; font-size:15px;
}
.brand .b2{ color:var(--accent); }
.site-nav{ display:flex; gap:4px; margin-left:auto; align-items:center; }
.site-nav a{ padding:8px 13px; border-radius:9px; font-size:14px; color:var(--ink-2); font-weight:500; }
.site-nav a:hover{ background:var(--surface-2); color:var(--ink); }
.site-nav a[aria-current="page"]{ color:var(--ink); background:var(--surface-2); }
.site-nav a.btn-primary{ color:#04150D; }
.site-nav a.btn-primary:hover{ background:var(--accent); color:#04150D; }
.site-nav a.btn{ padding:9px 16px; border-radius:var(--btn-radius); font-size:14px; }
.theme-btn{
  background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2);
  width:36px; height:36px; border-radius:10px; cursor:pointer; display:grid; place-items:center;
  font-size:15px; font-family:inherit;
}
.theme-btn:hover{ color:var(--ink); }
.nav-toggle{
  display:none; background:var(--surface-2); border:1px solid var(--border); color:var(--ink);
  width:38px; height:38px; border-radius:10px; cursor:pointer; margin-left:auto;
  font-size:18px; line-height:1;
}
/* Static no-JS fallback header (rendered until nav.js replaces it). It carries
   no toggle, so its links must stay visible and simply wrap on narrow screens
   instead of collapsing into the absolutely-positioned mobile panel. */
.site-head[data-fallback] .site-nav{
  position:static; flex-wrap:wrap; background:none; border:0; padding:0; margin-left:auto;
}

/* -------------------------------- hero --------------------------------- */
.hero{ position:relative; padding:96px 0 72px; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:var(--hero-glow);
}
.hero .wrap{ position:relative; z-index:1; }
.hero h1 .accent{ color:var(--accent); }
.hero .lede{ font-size:1.15rem; margin:20px auto 28px; }
.hero .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero .note{ margin-top:16px; font-size:13px; color:var(--muted); }

/* -------------------------------- cards -------------------------------- */
.grid{ display:grid; gap:20px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.card{
  background:var(--surface); border:var(--rule); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.card .ico{
  width:40px; height:40px; border-radius:11px; background:var(--green-soft);
  display:grid; place-items:center; margin-bottom:14px; color:var(--accent);
}
.card .ico svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card p{ color:var(--ink-2); font-size:14.5px; }

/* ------------------------------- chips --------------------------------- */
.chip-row{ display:flex; gap:10px; flex-wrap:wrap; }
.stat-chip{
  display:inline-flex; flex-direction:column; gap:2px;
  background:var(--surface-2); border:var(--rule); border-radius:var(--radius-chip);
  padding:10px 14px;
}
.stat-chip .lbl{ font-family:var(--font-mono); font-weight:500; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.stat-chip .val{ font-family:var(--font-mono); font-weight:500; font-size:.8125rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-chip .val.pos{ color:var(--pos-text); }
.stat-chip .val.neg{ color:var(--neg-text); }

/* --------------------------- trust strip ------------------------------- */
.trust-strip{
  background:var(--surface); border-top:var(--rule); border-bottom:var(--rule);
  padding:18px 0;
}
.trust-strip .wrap{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.trust-strip span{ font-family:var(--font-mono); font-weight:500; font-size:.75rem; letter-spacing:.08em; color:var(--ink-2); }

/* ------------------------ screenshot frame ---------------------------- */
.shot{ border:var(--rule); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
.shot-bar{ display:flex; gap:6px; padding:11px 14px; border-bottom:var(--rule); background:var(--surface-2); }
.shot-bar i{ width:10px; height:10px; border-radius:50%; background:var(--surface-3); }
.shot-body{ padding:18px; }
.shot img{ display:block; width:100%; height:auto; }
/* synthetic stand-in panel — replaced by a real screenshot element later */
.panel{ display:grid; gap:12px; }
/* flex-wrap + min-width:0 so the 4-cell hero row can shrink and wrap instead of
   overflowing the overflow:hidden .shot frame at narrow widths (the mono labels
   have a large min-content width). The 2-cell rows are unaffected. */
.panel .row{ display:flex; gap:12px; flex-wrap:wrap; }
.panel .cell{ flex:1; min-width:0; background:var(--surface-2); border:var(--rule); border-radius:var(--radius-sm); padding:14px; }
.panel .cell .k{ font-family:var(--font-mono); font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.panel .cell .v{ font-family:var(--font-mono); font-size:.8125rem; font-weight:500; margin-top:4px; font-variant-numeric:tabular-nums; }
.panel .cell .v.pos{ color:var(--pos-text); }
.panel .cell .v.neg{ color:var(--neg-text); }
.panel svg{ width:100%; height:60px; display:block; }

/* --------------------- alternating feature rows ---------------------- */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.feature-row + .feature-row{ margin-top:64px; }
.feature-row.rev .feature-txt{ order:2; }
.feature-row .feature-txt h2{ margin:6px 0 14px; }
.feature-row .feature-txt p{ color:var(--ink-2); font-size:15px; margin-bottom:12px; }
.feature-row .chip-row{ margin-top:16px; }

/* -------------------------------- FAQ --------------------------------- */
.faq-item{ border-bottom:var(--rule); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 0; font-weight:650; font-size:15.5px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:var(--font-mono); color:var(--muted); transition:transform .15s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--ink-2); font-size:14.5px; padding:0 0 18px; max-width:70ch; }

/* --------------------------- closing CTA ------------------------------ */
.cta-band{
  background:var(--surface); border:var(--rule); border-radius:var(--radius);
  padding:48px 32px; text-align:center; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.cta-band::before{ content:""; position:absolute; inset:0; background:var(--hero-glow); pointer-events:none; }
.cta-band > *{ position:relative; }
.cta-band h2{ font-family:var(--font-display); }
.cta-band p{ color:var(--ink-2); margin:12px auto 24px; max-width:52ch; }

/* ------------------------------ footer -------------------------------- */
.site-foot{ border-top:var(--rule); padding:44px 0 36px; color:var(--ink-2); font-size:13.5px; }
.site-foot .wrap{ display:flex; gap:40px; flex-wrap:wrap; }
.site-foot .foot-col{ display:flex; flex-direction:column; gap:8px; }
.site-foot .foot-col a:hover{ color:var(--ink); }
.site-foot .foot-col strong{ font-family:var(--font-mono); font-weight:500; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.site-foot .copy{ margin-left:auto; font-family:var(--font-mono); font-size:.75rem; color:var(--muted); }

/* --------------------------- scroll reveal ---------------------------- */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------------------------- article/blog --------------------------- */
.post-list{ display:grid; gap:16px; }
.post-card{
  background:var(--surface); border:var(--rule); border-radius:var(--radius);
  padding:24px 26px; display:block; transition:border-color .14s ease, transform .14s ease;
}
.post-card:hover{ border-color:var(--green-line); transform:translateY(-2px); }
.post-meta{ display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--muted); margin-bottom:9px; }
.pill{ padding:3px 10px; border-radius:999px; background:var(--surface-2); border:var(--rule); font-size:11.5px; color:var(--ink-2); }
.post-card h3{ margin-bottom:7px; }
.post-card p{ color:var(--ink-2); font-size:14.5px; }

.article{ max-width:720px; margin:0 auto; padding:56px 24px 80px; }
.article h1{ font-size:clamp(2rem,4vw,2.6rem); letter-spacing:-.02em; margin-bottom:16px; }
.article .post-meta{ margin-bottom:30px; }
.article h2{ font-size:1.5rem; margin:38px 0 12px; }
.article h3{ font-size:1.125rem; margin:26px 0 8px; }
.article p{ color:var(--ink-2); margin-bottom:16px; font-size:15.5px; }
.article ul,.article ol{ color:var(--ink-2); margin:0 0 16px 22px; }
.article li{ margin-bottom:8px; font-size:15.5px; }
.article strong{ color:var(--ink); font-weight:650; }
.article code{
  background:var(--surface-2); border:var(--rule); border-radius:6px;
  padding:1.5px 6px; font-size:13.5px; font-family:var(--font-mono); color:var(--ink);
}
.article pre{
  background:var(--surface-2); border:var(--rule); border-radius:var(--radius-sm);
  padding:16px 18px; overflow-x:auto; margin-bottom:18px;
}
.article pre code{ background:none; border:none; padding:0; font-size:13px; line-height:1.65; }
.callout{
  background:var(--green-soft); border:1px solid var(--green-line);
  border-radius:var(--radius-sm); padding:16px 18px; margin:22px 0;
}
.callout p{ margin:0; color:var(--ink); font-size:14.5px; }
.tbl{ width:100%; border-collapse:collapse; margin-bottom:20px; font-size:14px; }
.tbl th,.tbl td{ text-align:left; padding:10px 12px; border-bottom:var(--rule); }
.tbl th{ color:var(--muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; font-family:var(--font-mono); }
.tbl td{ color:var(--ink-2); }
.tbl-wrap{ overflow-x:auto; }

/* ----------------------------- responsive ---------------------------- */
@media (max-width:1120px){ .wrap{ padding:0 20px; } }
@media (max-width:900px){
  .g3,.g2{ grid-template-columns:1fr; }
  .feature-row{ grid-template-columns:1fr; gap:24px; }
  .feature-row.rev .feature-txt{ order:0; }
  .feature-row .shot{ order:-1; }
  .section{ padding:56px 0; }
  .hero{ padding:64px 0 48px; }
}
@media (max-width:640px){
  .nav-toggle{ display:grid; place-items:center; }
  .site-nav{
    position:absolute; top:64px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg); border-bottom:var(--rule); padding:12px 16px 16px; margin:0;
  }
  .site-nav[hidden]{ display:none; }
  .site-nav a{ padding:10px 12px; }
  .site-head .wrap{ position:relative; }
  .trust-strip .wrap{ gap:10px; }
  .site-foot .wrap{ gap:24px; }
  .site-foot .copy{ margin-left:0; width:100%; }
  /* strict 2-up for the 4-cell hero panel row — grid tracks force equal
     widths and content wrapping regardless of the mono labels' min-content. */
  .panel .row{ display:grid; grid-template-columns:1fr 1fr; }
  .panel .cell{ min-width:0; }
}

/* ------------------------------- pricing ------------------------------ */
.price-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:820px; margin:0 auto; }
.plan{ background:var(--surface); border:var(--rule); border-radius:var(--radius); padding:32px; position:relative; }
.plan.featured{ border-color:var(--green-line); box-shadow:0 0 0 1px var(--green-line), var(--shadow); }
.plan .tag{ position:absolute; top:-11px; left:32px; padding:4px 12px; border-radius:999px;
  background:var(--accent); color:#04150D; font-size:11px; font-weight:700; font-family:var(--font-mono); letter-spacing:.05em; }
.plan .tag.soon{ background:var(--surface-3); color:var(--ink-2); border:var(--rule); }
.plan h3{ font-size:1.3rem; margin-bottom:4px; }
.plan .who{ color:var(--muted); font-size:13.5px; margin-bottom:20px; }
.plan .amt{ font-size:2.75rem; font-weight:800; letter-spacing:-.03em; font-family:var(--font-display); }
.plan .per{ color:var(--muted); font-size:14px; margin-bottom:22px; }
.feat{ list-style:none; margin:22px 0 26px; }
.feat li{ display:flex; gap:10px; padding:7px 0; font-size:14.5px; color:var(--ink-2); }
.feat li svg{ width:17px; height:17px; flex:0 0 17px; margin-top:3px; stroke:var(--pos-text); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.feat li.off{ color:var(--muted); }
.feat li.off svg{ stroke:var(--muted); }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr; } }