/* Landing page (/welcome), app/templates/landing/welcome.html.
   Self-contained: loaded only by that page, with its own light/dark tokens.
   Generated from docs/marketing/landing_mockup.html (2026-09-24); edit this file
   directly from now on and keep the mockup as the design reference. */

:root {
  /* Valence theme (site's own brand — matches static/css/01-themes.css :root[data-theme="valence"]) */
  --bg:        #f1f5f9;
  --card:      #fafbfc;
  --deep:      #e2e8f0;
  --hover:     #e8edf4;
  --line:      #cbd5e1;
  --text:      #0f172a;
  --sub:       #334155;
  --muted:     #56647a;
  --dim:       #94a3b8;
  --accent:    #3a5a90;
  --accent-2:  #5578ae;
  --accent-soft: rgba(58,90,144,.10);
  --up:        #1aab55;
  --down:      #d93535;
  --amber:     #c07a00;
  /* Coloured text (the ink) is darker than the tint colours above: 4.5:1 on every surface. */
  --up-ink:    #137538;
  --amber-ink: #935600;
  --chart-total: #7a9cc4;
  --chart-stock: #2563eb;
  --chart-crypto: #7c3aed;
  --grid:      rgba(15,23,42,.06);
  --card-shadow: 0 1px 2px rgba(0,0,0,.025), 0 4px 18px rgba(0,0,0,.03), 0 2px 6px rgba(58,90,144,.05), 0 8px 24px rgba(58,90,144,.04);
  --ring:      rgba(58,90,144,.45);
}
/* Dark: the page's default (welcome.html renders data-theme="dark"); the
   header toggle switches to the light tokens above. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0e1016; --card:#191c26; --deep:#12141c; --hover:#1f2432; --line:#262b39;
  --text:#e4eaf2; --sub:#8a9ab0; --muted:#7f899d; --dim:#4a5262;
  --accent:#8ab8d8; --accent-2:#a8c8e8; --accent-soft:rgba(138,184,216,.10);
  --up:#3fb87a; --down:#f0616d; --amber:#e0a35a; --up-ink:#3fb87a; --amber-ink:#e0a35a;
  --chart-total:#8ab8d8; --chart-stock:#60a5fa; --chart-crypto:#a78bfa;
  --grid:rgba(255,255,255,.05);
  --card-shadow:0 8px 30px rgba(1,4,9,.55); --ring:rgba(138,184,216,.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* The app's own faces (static/vendor/fonts/fonts.css), so the copy matches the replicas. */
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Type scale (about 1.125 per step) and section rhythm on a 3:4 progression. */
:root {
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem;
  --space-sm: 54px; --space: 72px; --space-lg: 96px;
}
:root { --mono: "DM Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }

/* Reusable app-style tokens — used across chips, hovers, and tinted callouts */
:root {
  --tint-brand-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --tint-brand-strong: color-mix(in srgb, var(--accent) 25%, transparent);
  --tint-brand-hover: color-mix(in srgb, var(--accent) 6%, var(--card));
  --tint-up-soft: color-mix(in srgb, var(--up) 12%, transparent);
  --tint-down-soft: color-mix(in srgb, var(--down) 12%, transparent);
  --tint-amber-soft: color-mix(in srgb, var(--amber) 10%, transparent);
  --radius-sm: 6px;
}

/* Universal soft-hover treatment — mirrors the app's .btn-soft pattern */
.hover-soft { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.hover-soft:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(58,90,144,.10); }

/* Card hairline divider — mirrors .card-divider in the app */
.card-divider { height: 1px; background: var(--line); opacity: .7; margin: 6px 0 8px; }

/* Section-eyebrow accent — small brand-tinted vertical bar before the eyebrow text */
.eyebrow::before {
  content: ""; display: inline-block; width: 3px; height: 13px;
  background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  border-radius: 2px; flex-shrink: 0;
}
.roadmap .eyebrow::before {
  background: linear-gradient(to bottom, var(--amber), color-mix(in srgb, var(--amber) 20%, transparent));
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }

/* In-page links land below the 60px sticky header. */
main [id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
/* Logo and wordmark as the app draws them (06-content.css .brand-icon-pill,
   .brand-wordmark): dark like the app's Dark theme, light like its Valence theme. */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: flex; align-items: center; justify-content: center; padding: 5px 6px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.wordmark {
  font-size: 1.2rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1; color: var(--text);
}
.wordmark::first-letter { color: var(--accent); }
:root:not([data-theme="dark"]) .brand-mark { background: color-mix(in srgb, var(--accent) 10%, transparent); }
:root:not([data-theme="dark"]) .wordmark { color: var(--accent); }
.hdr-nav { display: flex; align-items: center; gap: 22px; }
.hdr-nav a.navlink { color: var(--sub); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; }
.nav-demo .nd-short { display: none; }
.hdr-nav a.navlink:hover { color: var(--text); text-decoration: none; }
/* The section being read (welcome_nav.js). */
.hdr-nav a.navlink[aria-current] { color: var(--text); box-shadow: inset 0 -2px var(--accent); padding-bottom: 2px; }
.theme-toggle {
  background: transparent; border: 1px solid var(--line); color: var(--sub);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
  line-height: 1;
}
.theme-toggle:hover { color: var(--text); border-color: var(--muted); }
.theme-toggle svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .theme-toggle .ti-moon, :root:not([data-theme="dark"]) .theme-toggle .ti-sun { display: none; }
/* Phones keep only Sign in: a returning user must still find it with demo mode off. */
@media (max-width: 780px) { .hdr-nav .navlink:not(.navlink--keep) { display: none; } }
/* Phones: brand, Sign in, Demo and the toggle on one line, inside the gutters. */
@media (max-width: 480px) {
  .brand { gap: 8px; }
  .wordmark { font-size: 1rem; letter-spacing: .1em; }
  .hdr-nav { gap: 10px; }
  .nav-demo { padding: 7px 12px; }
  .nav-demo .nd-long { display: none; }
  .nav-demo .nd-short { display: inline; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: var(--fs-sm); border-radius: 9px; padding: 10px 18px;
  cursor: pointer; border: 1px solid transparent; transition: transform .08s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent-2); text-decoration: none; }

/* The second choice beside a primary button: outlined, quiet until hovered. */
.btn-ghost { color: var(--text); background: transparent; border-color: var(--line); }
.btn-ghost:hover { text-decoration: none; border-color: var(--accent); background: var(--tint-brand-hover); }

.btn-sm { padding: 7px 14px; font-size: var(--fs-sm); }

/* Keyboard users skip the header's controls; shown only on focus. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 8px;
  background: var(--accent); color: var(--bg); font-weight: 600; font-size: var(--fs-sm);
}
.skip-link:focus { top: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Shared section rhythm ---------- */
main section { padding: var(--space) 0; }
main section.section--lg { padding: var(--space-lg) 0; }
main section.section--sm { padding: var(--space-sm) 0; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); margin: 0 0 14px;
}
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.01em; line-height: 1.1; }
h2.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; }
.lede { color: var(--sub); font-size: var(--fs-lg); max-width: 60ch; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--card-shadow); position: relative;
}
/* Mirrors the app's .t-card-summary treatment: gradient border via padding-box/border-box + brand-tinted shadow. */
.t-card-brand {
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(to bottom, rgba(58,90,144,0.82) 0%, rgba(58,90,144,0.38) 50%, transparent 100%) border-box !important;
  border: 1px solid transparent !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.025), 0 4px 18px rgba(0,0,0,.03),
    0 2px 6px rgba(58,90,144,.07), 0 8px 24px rgba(58,90,144,.06) !important;
}
:root[data-theme="dark"] .t-card-brand {
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(to bottom, rgba(138,184,216,0.55) 0%, rgba(138,184,216,0.14) 40%, transparent 70%) border-box !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(1,4,9,.55),
    0 2px 8px rgba(138,184,216,.08) !important;
}

/* ---------- Hero ---------- */
.hero { padding-top: 64px; padding-bottom: 40px; position: relative; isolation: isolate; }
/* Behind the hero: a soft glow near the chart, fading out on every side.
   Static, and themed by the tokens. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 65% at 72% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }
/* 3.2rem keeps "across every broker." on one line in the desktop column (measured). */
h1.hero-title { font-size: clamp(2.3rem, 4.6vw, 3.2rem); font-weight: 700; }
h1.hero-title .truth { display: block; color: var(--accent); }
.hero-sub { color: var(--sub); font-size: var(--fs-lg); margin-top: 20px; max-width: 54ch; }
.hero-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
/* Under the buttons, the privacy points as one quiet line of reassurance: a lock,
   then short points separated by dots. The dot trails its point, so a wrapped
   line never starts with one. */
.trust { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; color: var(--muted); font-size: var(--fs-sm); }
.trust-icon { width: 14px; height: 14px; flex: none; margin-top: .3em; }
.trust-list { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; padding: 0; list-style: none; }
.trust-list li:not(:last-child)::after { content: "·" / ""; margin-left: 8px; }

/* animated intro */
.rise { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
.rise-1 { animation-delay: .05s; } .rise-2 { animation-delay: .16s; }
.rise-3 { animation-delay: .27s; } .rise-4 { animation-delay: .38s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Proof band ---------- */
.band { background: var(--deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
@media (max-width: 820px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-item { padding: 22px; }
.proof-item .pi-head { display: flex; align-items: center; gap: 10px; }
.proof-n { font-family: var(--mono); font-size: var(--fs-sm); color: var(--accent); font-weight: 500; }
.proof-item .pi-eyebrow {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); font-weight: 600;
}
.proof-item .card-divider { margin: 12px 0 10px; }
.proof-item h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 10px; letter-spacing: -.005em; text-wrap: pretty; }
.proof-item p { margin: 0; color: var(--sub); font-size: var(--fs-sm); }

/* ---------- Feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.feature.reverse .feat-visual { order: -1; }
@media (max-width: 900px) { .feature, .feature.reverse { grid-template-columns: 1fr; gap: 28px; } .feature.reverse .feat-visual { order: 0; } }
.feat-copy h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 700; }
.feat-copy p { color: var(--sub); margin: 16px 0 0; }
.bench-mini { font-size: var(--fs-xs); }

/* ---------- How it works: steps, the broker list, trust ---------- */
.how-steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
/* The number hangs in the left padding, so the step reads as one paragraph
   (as grid items, each text run beside the <b> became a 28px-wide column). */
.how-steps li { counter-increment: step; position: relative; padding-left: 38px; color: var(--sub); }
.how-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500;
}
.how-steps b { color: var(--text); }

/* Every broker, collapsed to one line of region counts; opens on "See all 30". */
.broker-more { margin-top: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 18px; }
.broker-more summary {
  cursor: pointer; list-style: none; padding: 14px 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
}
.broker-more summary::-webkit-details-marker { display: none; }
.broker-more summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.bm-counts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--sub); font-weight: 600; }
.bm-counts b { font-family: var(--mono); font-weight: 500; color: var(--text); }
.bm-toggle { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); display: inline-flex; gap: 8px; }
.bm-toggle::after { content: "+"; font-weight: 500; }
.broker-more[open] .bm-toggle::after { content: "\2212"; }
.broker-more[open] summary { border-bottom: 1px solid var(--line); }

.broker-region { margin-top: 16px; }
.broker-region .region-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.broker-region .region-head h3 { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.broker-region .region-head .region-sub {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
}
.broker-region .region-head .region-flag { font-size: var(--fs-base); opacity: .85; }
.broker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.broker-chips li {
  padding: 4px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--up) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--up) 30%, var(--line));
}

.broker-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--sub);
}
.broker-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.broker-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.broker-legend .sw-auto { background: color-mix(in srgb, var(--up) 22%, var(--card)); border: 1px solid color-mix(in srgb, var(--up) 40%, var(--line)); }
.broker-legend .sw-manual { background: var(--deep); border: 1px solid var(--line); }

.broker-note {
  margin: 14px 0 18px; font-size: var(--fs-sm); color: var(--muted);
  padding: 10px 14px; background: color-mix(in srgb, var(--amber) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--line)); border-radius: 8px;
  display: flex; gap: 10px; align-items: flex-start;
}
.broker-note::before { content: "!"; font-weight: 500; color: var(--amber-ink); flex-shrink: 0; padding-top: 1px; }


/* ---------- Window strips: related app views side by side (welcome_strips.js) ----------
   A strip bleeds like a wide frame; each window is a little narrower than the
   track so the next one peeks in. Swipe, trackpad, keyboard (the track is
   focusable), the pills or the arrows move between windows, which snap into
   place. The track takes the height of the window in view. */
:root { --col-left: max(24px, calc((100vw - 1032px) / 2)); }
.window-strip { margin-top: 30px; scroll-margin-top: 76px; }
.ws-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ws-index { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ws-pill {
  /* The fill follows the scroll: --seen is how much of this pill's window is in
     view (welcome_strips.js), so the highlight slides from pill to pill. Without
     the script, the pill marked current is filled. */
  --seen: 0;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  padding: 8px 18px; border-radius: 999px; color: var(--sub);
  background: color-mix(in srgb, var(--accent) calc(var(--seen) * 100%), var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) calc(var(--seen) * 100%), var(--line));
  transition: color .15s;
}
.ws-pill[aria-current] { --seen: 1; color: var(--bg); }
.ws-pill:not([aria-current]):hover { border-color: var(--accent); color: var(--text); }
.ws-arrows { display: flex; gap: 8px; }
.ws-arrow {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  color: var(--text); background: var(--card); border: 1px solid var(--line);
  transition: border-color .15s, opacity .15s;
}
.ws-arrow svg { width: 18px; height: 18px; }
.ws-arrow:hover:not(:disabled) { border-color: var(--accent); }
.ws-arrow:disabled { opacity: .35; cursor: default; }
.ws-track {
  position: relative; margin-top: 18px;
  /* Full width, padded so each window snaps to the text column's left edge. */
  margin-inline: calc(50% - 50vw); padding-inline: var(--col-left); scroll-padding-inline: var(--col-left);
  display: grid; grid-auto-flow: column; gap: 20px; align-items: start;
  grid-auto-columns: min(1120px, calc(100vw - var(--col-left) - 64px));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  /* No scrollbar: the pills, the arrows and the peeking window show there is more. */
  scroll-snap-type: x mandatory; scrollbar-width: none;
  transition: height .3s ease-out;
}
.ws-track::-webkit-scrollbar { display: none; }
.ws-track:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
/* Mouse drag to scroll (welcome_strips.js): a grab hand, and while dragging no snap and no text selection. */
@media (hover: hover) and (pointer: fine) { .ws-track { cursor: grab; } }
.ws-track[data-free] { scroll-snap-type: none; }
.ws-track[data-dragging] { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.ws-track[data-dragging] .ws-slide { cursor: grabbing; }
.ws-slide { scroll-snap-align: start; min-width: 0; }
/* Inside a window the frame fills the window: no bleed of its own. */
.ws-slide .replica-frame, .ws-slide .replica-frame--wide { margin-inline: 0; margin-top: 0; }
.ws-caption { max-width: 62ch; margin: 0 0 14px; color: var(--sub); }
/* A peeking window is a dimmed frame: its words show once it is the one in view. */
/* How much of each window is in view follows the scroll position (--seen, 0 to 1,
   set by welcome_strips.js): the arriving window's words and frame brighten as it
   slides in, the leaving one's fade. At rest a peeking window is a dimmed frame
   (its words hidden, data-away), so no sliced sentence shows at the edge. */
.ws-slide :is(.ws-caption, .note, .note-lg) { opacity: var(--seen, 1); }
.ws-slide .replica-frame {
  opacity: calc(.35 + .65 * var(--seen, 1));
  /* Windows beside the one in view also sit a little smaller, so it stands forward. */
  transform: scale(calc(.96 + .04 * var(--seen, 1))); transform-origin: left top;
}
.ws-slide[data-away] :is(.ws-caption, .note, .note-lg) { visibility: hidden; }
/* A click on a peeking window brings it into view (welcome_strips.js). */
.ws-slide:not([data-current]) { cursor: pointer; }
.ws-track:not([data-dragging]) .ws-slide:not([data-current]):hover .replica-frame { opacity: .7; }
/* Touch screens and narrow windows swipe: one scrolling row of pills, no arrows. */
@media (hover: none), (max-width: 600px) {
  /* The row runs to the screen edge, so a cut pill reads as more to swipe, not as clipped. */
  .ws-index {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--col-left)); padding-inline: var(--col-left); scroll-padding-inline: var(--col-left);
  }
  .ws-index::-webkit-scrollbar { display: none; }
  .ws-pill { flex: none; }
  .ws-arrows { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .ws-track { scroll-behavior: smooth; } }

/* ---------- Pricing ---------- */
.price-table { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: var(--fs-sm); }
.price-table th, .price-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.price-table tbody th { font-weight: 400; }
.price-table thead th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; vertical-align: bottom; }
.price-table .col { text-align: center; width: 160px; }
/* Each plan's price under its name, where the columns are compared. */
.price-table .th-price {
  display: block; margin-top: 4px; font-family: var(--mono); font-size: var(--fs-base);
  text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 500;
}
.price-table .th-price--prem { color: var(--accent); }
.price-table .yes { color: var(--up-ink); }
.price-table .no { color: var(--muted); }
.price-table .prem { color: var(--accent); font-weight: 500; }
@media (max-width: 600px) { .price-table .col { width: 88px; } .price-table .th-price { font-size: var(--fs-sm); white-space: nowrap; } .price-table th, .price-table td { padding: 10px 8px; } }
.price-note { margin-top: 18px; font-size: var(--fs-sm); color: var(--sub); }
.price-cta { margin-top: 22px; }
.price-cta p { margin: 0; color: var(--sub); }
.price-cta .hero-cta { margin-top: 14px; }

/* ---------- Roadmap teaser ---------- */
.roadmap { text-align: center; }
.roadmap .eyebrow { color: var(--amber-ink); }
.roadmap h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.roadmap p { color: var(--sub); max-width: 56ch; margin: 16px auto 0; }

/* Broker strip under the hero: the first question a visitor has ("does it read
   my brokers?"), answered in one line; the full list is in How it works. */
main section.broker-strip { padding: 22px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.strip-title { margin: 0 0 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.strip-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0; padding: 0; list-style: none; color: var(--sub); font-weight: 600; font-size: var(--fs-sm); }
.strip-more { display: inline-block; margin-top: 10px; font-size: var(--fs-sm); color: var(--accent); }

/* Question cards that link to the section answering them. */
a.proof-item { color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
a.proof-item:hover { transform: translateY(-2px); }
a.proof-item:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
a.proof-item { display: flex; flex-direction: column; }
.proof-item .pi-link { margin-top: auto; padding-top: 12px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }

/* Slim call to action after the payoff sections. */
main section.cta-inline { padding: 34px 0; text-align: center; background: var(--accent-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-inline p { margin: 0; color: var(--text); font-weight: 600; }
.cta-inline .hero-cta { justify-content: center; margin-top: 16px; }

/* FAQ: native disclosure widgets, keyboard and screen-reader friendly. */
/* One column: in two, an opened answer made the columns ragged and the reading order zigzag. */
.faq-list { margin-top: 26px; display: grid; gap: 12px; max-width: 760px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 18px; }
.faq-item summary {
  cursor: pointer; padding: 15px 0; font-weight: 700; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; font-weight: 500; color: var(--accent); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.faq-item p { margin: 0 0 16px; color: var(--sub); }

/* ---------- Final CTA ---------- */
.final { text-align: center; background: var(--deep); border-top: 1px solid var(--line); position: relative; isolation: isolate; }
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 70% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.final h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 700; }
.final p { color: var(--sub); margin: 16px auto 26px; max-width: 46ch; }
.final .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--line); }
footer.site .wrap { padding-top: 34px; padding-bottom: 44px; }
.foot-note { color: var(--muted); font-size: var(--fs-sm); max-width: 74ch; }
.foot-meta { margin-top: 20px; display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  .ws-track { transition: none; }
  .ws-slide .replica-frame { transform: none; }
  .replica-host:not([data-rendered]) { animation: none; }
}

/* ---------- Live replicas of the app (welcome_replicas.js, 10-replica.css) ----------
   A frame around each replica: a slim window bar, then the app itself drawn in
   its own theme inside a shadow root, scaled to the frame's width. */
.replica-frame {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.replica-bar {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  background: var(--deep);
  border-bottom: 1px solid var(--line);
}
.replica-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
/* A replica is drawn at the app's width and scaled to whatever width the page
   gives it, so it must not ask for width itself: inline-size containment keeps
   the unscaled layout out of its column's min-content, which in the two-column
   hero and feature grids would otherwise widen that column past half the page
   (and the scale, measured from the host, would then stay at 1). */
.replica-host { min-height: 120px; contain: inline-size; }
/* Until its preview draws (welcome_replicas.js sets data-rendered), a frame
   shows a placeholder of about the right size, not a blank box. */
.replica-host:not([data-rendered]) {
  aspect-ratio: 16 / 10;
  background: linear-gradient(100deg, var(--deep) 35%, var(--hover) 50%, var(--deep) 65%) 0 0 / 300% 100%;
  animation: replica-wait 1.6s ease-in-out infinite;
}
@keyframes replica-wait { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hero-grid > *, .feat-visual { min-width: 0; }
/* Wide replicas (the app's full-page views) leave the 1080px text column for up
   to 1320px, so they are drawn nearer their own width; never past the gutters. */
.replica-frame--wide { margin-inline: min(0px, calc(50% - min(660px, 50vw - 32px))); }
/* A dialog's frame hugs the dialog's own width (welcome_replicas.js sets
   --replica-max from the host's data-width), centred in the column. */
.replica-frame--hug { max-width: calc(var(--replica-max, 100%) + 2px); margin-inline: auto; }
/* A tall view shown to where it has made its point, then faded out (Fees). */
.replica-frame--crop {
  max-height: var(--crop, 720px);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 140px), transparent);
}
@media (max-width: 600px) { .replica-frame--crop { max-height: var(--crop-phone, 560px); } }
/* The dashboard: down to the first rows of the Stocks & ETFs table. */
.replica-frame--crop-lg { --crop: 1080px; --crop-phone: 2000px; }

/* Previews beside text reach into the page margin on their outer side, so they
   are drawn larger without widening the text measure. --bleed is how far: the
   space between the 1032px column and the window edge, less a 32px gutter, up
   to 160px, the hero's up to 240px (0 on windows too narrow to have a margin).
   The text column gets 5/12, the preview 7/12 (the hero about 48/52). Stacked
   at 900px and below. */
:root {
  --bleed-room: calc((100vw - 1032px) / 2 - 32px);
  --bleed: clamp(0px, var(--bleed-room), 160px);
  --bleed-hero: clamp(0px, var(--bleed-room), 240px);
}
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .hero-visual { margin-right: calc(-1 * var(--bleed-hero)); }
  .feature.feature--bleed { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .feature.feature--bleed .feat-visual { margin-right: calc(-1 * var(--bleed)); }
  .feature.feature--bleed.reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .feature.feature--bleed.reverse .feat-visual { margin-right: 0; margin-left: calc(-1 * var(--bleed)); }
}

/* A feature whose visual is a full-page view: text above, the view full width. */
.feature.feature-stacked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.feature-stacked .feat-copy { max-width: 760px; }

/* Live-page additions */
a.brand { color: inherit; text-decoration: none; }
.foot-meta a { color: var(--muted); }
.foot-meta a:hover { color: var(--accent); }
.foot-note a { color: var(--accent); }

/* ==========================================================================
   Small text and layout classes carried over from the mockup, where they were
   inline styles (the CSP, style-src 'self', blocks those). Each is compounded
   with the element's own classes, as specific as the inline style was.
   ========================================================================== */

p.note { margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); }

p.bench-mini.c-sub { color: var(--sub); }

p.note-lg { margin-top: 18px; font-size: var(--fs-sm); color: var(--muted); }

div.card.t-card-brand.price-wrap { overflow-x: auto; padding: 6px; margin-top: 22px; }
span.strike { font-family: var(--mono); text-decoration: line-through; color: var(--muted); }

/* Touch screens: every control at least 44px. */
@media (pointer: coarse) {
  .ws-pill, .hdr-nav a.navlink { min-height: 44px; display: inline-flex; align-items: center; }
  .ws-arrow, .theme-toggle { width: 44px; height: 44px; }
}