/* ═══════════════════════════════════════════════════════════════════════════
   note500 — shared public-site design system
   One source of truth for every public marketing page (landing, pricing,
   features, support, security, changelog, SEO content, terms, privacy). Extracted
   from landing.html so the pages can't drift again. Pages link this ONCE:
       <link rel="stylesheet" href="/static/site.css">
   …and keep only page-specific overrides in their own <style>. Load AFTER the
   Google Fonts <link> (Sora / Space Grotesk / Inter / JetBrains Mono).
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Light "fintech" palette — mirrors the app's bright theme. */
  --bg:      #F7F8FA;
  --card:    #FFFFFF;
  --card2:   #F1F3F7;
  --border:  #E5E8EE;
  --text:    #14171F;
  --muted:   #6B7280;
  --dim:     #9AA1AE;
  --accent:  #16A34A;   /* note500 green (deeper so it reads on white) */
  --accent2: #0EA5E9;   /* secondary — cyan, for gradients/glows */
  --accent3: #6366F1;   /* tertiary — indigo, adds depth to gradients */
  --green:   #059669;
  --red:     #E11D48;
  /* Signature green→cyan gradient — heading accents, glows, CTA sheens. */
  --grad:      linear-gradient(100deg, #16A34A 0%, #10B981 40%, #0EA5E9 100%);
  --grad-soft: linear-gradient(135deg, rgba(22,163,74,.10), rgba(14,165,233,.08));
  --glow-accent: rgba(22,163,74,.18);
  --glow-cyan:   rgba(14,165,233,.14);

  /* Type roles: hero (Sora), display (Space Grotesk), sans (Inter), mono. */
  --font-hero:    'Geist', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Geist', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  /* Bounded 4-hue section-accent palette. */
  --sec-green:  #16A34A;
  --sec-cyan:   #0EA5E9;
  --sec-indigo: #6366F1;
  --sec-amber:  #F59E0B;

  --shadow:      0 8px 24px rgba(20,23,31,.08);
  --shadow-lift: 0 14px 30px rgba(20,23,31,.12);
  --radius:      18px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  letter-spacing: normal;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}
/* Ambient background: two soft colour blooms fixed behind the page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 78% -8%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(55vw 45vh at 12% 4%, rgba(22,163,74,.10), transparent 58%);
}

/* Headings carry the display face with tightened tracking. */
h1, h2, h3, .nav-brand, .btn { font-family: var(--font-display); letter-spacing: -.02em; }
/* The two biggest headline tiers get Sora for extra presence. */
h1, .sec-head h2 { font-family: var(--font-hero); font-weight: 800; letter-spacing: -.035em; }

a { color: var(--accent); text-decoration: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ── Buttons ── */
.btn {
  display: inline-block; padding: 12px 26px; border-radius: 999px;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 10px 26px var(--glow-accent), 0 2px 6px rgba(20,23,31,.10);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(22,163,74,.34), 0 0 0 4px rgba(14,165,233,.10);
  filter: brightness(1.04);
}
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.btn-sm { padding: 9px 18px; font-size: 17.5px; }
.btn:focus-visible { outline: 3px solid rgba(34,197,94,.45); outline-offset: 4px; }

/* [hidden] must win over the nav's display rules — the signed-in-only
   "Back to app" CTA carries the attribute and was rendering for signed-out
   visitors because a display declaration outranked it. */
[hidden] { display: none !important; }

/* ── Promo ribbon ──
   Sits directly above the header on every public page. line-height is pinned
   rather than inherited: terms/privacy set line-height:1.6 on body, which made
   their ribbon 1.4px taller and pushed the whole header down out of alignment
   with every other page. */
.promo-ribbon {
  display: block; text-align: center; text-decoration: none;
  background: linear-gradient(100deg, #16A34A 0%, #10B981 45%, #0EA5E9 100%);
  color: #fff; font-weight: 600; font-size: clamp(15px, 4.25vw, 17.5px);
  line-height: 21px;
  letter-spacing: .01em; padding: 9px 14px;
}
.promo-ribbon b { text-decoration: underline; text-underline-offset: 3px; }
.promo-ribbon:hover { filter: brightness(1.06); }

/* ── Nav ──────────────────────────────────────────────────────
   ONE header for every public page. Treatment follows the Similarweb packages
   header: a solid-white 64px bar (no translucency/blur) lifted by a soft
   brand-tinted shadow rather than a hairline border, in a 1248px container, and
   tabs that are BOLD and near-black — 16px/700, .16px letter-spacing — with a
   rounded tinted fill on hover instead of a colour-only change. Brand green
   replaces the reference's blue.

   The header bar is INDEPENDENT of the page's body width: narrow long-form
   pages (security, terms, SEO articles) keep their 760–820px reading column for
   copy while the header still spans 1248px. That's why the width lives on
   .nav-inner / .nav-head below and never on a page's own .wrap.

   Two markup shapes exist in the wild and BOTH are styled here, identically:
     A  <nav><div class="nav-inner"> .nav-brand + .nav-links </div></nav>
     B  <header><div class="wrap"> a.brand + <nav><a>…</a></nav> </div></header>
   Change one, change the other. ── */
:root { --nav-h: 64px; --nav-max: 1248px; }

/* Shape A — the bar itself. Scoped with :has(.nav-inner) so it hits only the
   top-level header BAR; a bare `nav` selector would also catch shape B's inner
   link group and turn it into a stray sticky white strip. */
nav:has(.nav-inner),
header:has(> .wrap > nav) {
  position: sticky; top: 0; z-index: 10;
  padding: 0; border-bottom: none;
  background: var(--card);
  box-shadow: 0 6px 11px rgba(22,163,74,.09);
}
/* The inner rail — same width and height in both shapes. In shape B this rule
   targets the page's .wrap, so it sets ONLY the header rail's own max-width;
   the element is reused as the body column further down the page, which keeps
   its narrower max-width from the page's own stylesheet.
   NOTE the !important on max-width: several pages mark the rail up as
   class="wrap nav-inner", so the page's own .wrap {max-width:1080px} would
   otherwise win on specificity and shrink the header back. The header bar is
   deliberately the ONE element whose width does not follow the page column. */
.nav-inner,
header:has(> .wrap > nav) > .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px;
  height: var(--nav-h); padding: 0 24px;
  max-width: var(--nav-max) !important;
  width: 100%; margin: 0 auto;
}

/* Brand — icon + wordmark, identical on every page. */
.nav-brand,
header > .wrap > a.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1;
  color: var(--text); letter-spacing: -.02em;
}
.nav-brand img, .nav-brand svg,
header > .wrap > a.brand svg { display: block; width: auto; }
.nav-brand .brand-icon,
header > .wrap > a.brand .brand-icon { height: 36px; }
.nav-brand .brand-word,
header > .wrap > a.brand .brand-word {
  font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1;
  color: var(--text); letter-spacing: -.02em;
}
.nav-brand .brand-word b,
header > .wrap > a.brand b { color: #22C55E; font-weight: 700; }

/* Tabs */
.nav-links,
header > .wrap > nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.nav-links a.plain,
header > .wrap > nav a {
  display: flex; align-items: center;
  padding: 8px 12px; border-radius: 6px;
  color: var(--text); text-decoration: none;
  font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: .16px;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.nav-links a.plain:hover,
header > .wrap > nav a:hover { color: var(--accent); background-color: rgba(22,163,74,.08); }
/* Current section — the tab you're on stays green without a hover fill. */
.nav-links a.plain[aria-current="page"],
header > .wrap > nav a[aria-current="page"] { color: var(--accent); }
/* Log in sits apart from the section tabs, behind a thin divider, as in the ref. */
.nav-links a.plain[href="/login"],
header > .wrap > nav a[href="/login"] {
  position: relative; margin-left: 8px; padding-left: 20px; font-weight: 500;
}
.nav-links a.plain[href="/login"]::before,
header > .wrap > nav a[href="/login"]::before {
  content: ""; position: absolute; left: 0; top: calc((100% - 20px) / 2);
  width: 1px; height: 20px; background-color: var(--border);
}
.nav-links a.plain[href="/login"]:hover,
header > .wrap > nav a[href="/login"]:hover { background-color: transparent; }
.nav-links .btn,
header > .wrap > nav .btn { margin-left: 8px; }
/* The CTA is a button, not a tab — undo the tab type/padding it inherits above.
   .btn-primary paints with `background: var(--grad)`, which a bare
   background-color here cannot override, so the fill is restated explicitly;
   without it the header CTA renders transparent on every page that doesn't
   define its own .btn rules. */
header > .wrap > nav a.btn {
  padding: 9px 18px; border-radius: 999px;
  font-size: 17.5px; font-weight: 600; line-height: 20px; letter-spacing: -.01em;
  color: #fff;
}
header > .wrap > nav a.btn-primary {
  background: var(--grad);
  box-shadow: 0 8px 20px rgba(22,163,74,.22);
}
header > .wrap > nav a.btn-primary:hover { color: #fff; filter: brightness(1.05); }

/* Phones: drop the section tabs, keep the brand + Log in + CTA reachable. */
@media (max-width: 600px) {
  .nav-inner,
  header:has(> .wrap > nav) > .wrap { height: 56px; padding: 0 16px; gap: 8px; }
  .nav-links, header > .wrap > nav { gap: 2px; }
  .nav-links a.plain,
  header > .wrap > nav a { display: none; }
  .nav-links a.plain[href="/login"],
  header > .wrap > nav a[href="/login"],
  .nav-links a.btn, header > .wrap > nav a.btn { display: flex; font-size: 17.5px; }
  .nav-brand .brand-icon,
  header > .wrap > a.brand .brand-icon { height: 30px; }
  .nav-brand .brand-word,
  header > .wrap > a.brand .brand-word { font-size: 25px; }
}

/* Icon-only brand below 430px: at the larger type the wordmark no longer fits
   beside "Log in" + the CTA on a 390px phone, and the header row overhung the
   viewport. Mirrors the same rule in landing.html, which carries its own nav. */
@media (max-width: 430px) {
  .nav-brand .brand-word,
  header > .wrap > a.brand .brand-word { display: none; }
  .nav-links { gap: 2px; }
  .nav-links a.plain[href="/login"],
  header > .wrap > nav a[href="/login"] { font-size: 17px; padding: 6px 8px; }
}

/* ── Page hero (.head) — shared treatment so features/pricing/support all match
   landing's .hero: generous padding, Sora headline, green→cyan gradient-wash
   accent + glow, and a large lede. Pages should NOT re-declare these; put only
   truly page-specific tweaks in their own <style>. ── */
.head { text-align: center; padding: clamp(72px, 9vw, 104px) 0 32px; }
.head h1 {
  font-family: var(--font-hero);
  font-size: clamp(52.5px, 8.75vw, 97.5px); line-height: 1.02;
  letter-spacing: -.04em; font-weight: 800; margin-bottom: 22px;
}
.head h1 .glow {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 6px 26px var(--glow-accent));
}
.head p {
  max-width: 720px; margin: 0 auto; color: var(--text);
  font-size: clamp(24px, 2.75vw, 29px); line-height: 1.5;
  font-weight: 600; letter-spacing: -.015em;
}
.head .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ── Sections + headings ── */
section { padding: 78px 0; border-top: 1px solid transparent; --sec: var(--sec-green); }
section[data-accent="cyan"]   { --sec: var(--sec-cyan); }
section[data-accent="indigo"] { --sec: var(--sec-indigo); }
section[data-accent="amber"]  { --sec: var(--sec-amber); }

.sec-head { text-align: center; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(42.5px, 5.25vw, 65px); line-height: 1.08; font-weight: 800; position: relative; }
.sec-head h2::after {
  content: ""; display: block; width: 54px; height: 3px; border-radius: 3px; margin: 16px auto 0;
  background: linear-gradient(90deg, var(--sec), color-mix(in srgb, var(--sec) 40%, #0EA5E9));
}
.sec-head p { color: var(--muted); margin-top: 10px; max-width: 580px; margin-left: auto; margin-right: auto; font-size: 20.5px; }

/* Kicker chip — takes the section accent. */
.kicker {
  display: inline-block; margin-bottom: 14px; color: var(--sec);
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--sec) 32%, transparent);
  background: color-mix(in srgb, var(--sec) 9%, transparent);
  border-radius: 999px; padding: 5px 12px;
}

/* ── Generic card + hover-lift (section-accent-tinted glow) ── */
.card, .site-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover, .site-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--sec) 22%, transparent);
  border-color: color-mix(in srgb, var(--sec) 40%, var(--border));
}

/* ── Footer ── */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; color: var(--muted); font-size: 17.5px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ── Reveal-on-scroll (JS adds .reveal-in) ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Header "Free tools" dropdown ──────────────────────────────────────────
   Lived only in landing.html, so /features, /pricing and /brokers silently
   shipped a header one item short. Moved here so every marketing page gets
   the same nav; the markup is the .nav-dd block inside .nav-links. */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-toggle {
  background: none; border: 0; margin: 0; cursor: pointer;
  display: flex; align-items: center;
  padding: 8px 12px; border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: .16px;
  color: var(--text); white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.nav-dd-toggle:hover, .nav-dd:hover .nav-dd-toggle,
.nav-dd:focus-within .nav-dd-toggle {
  color: var(--accent); background-color: rgba(22,163,74,.08);
}
.nav-dd-menu {
  /* Anchor to the LEFT edge of the toggle, not its centre. The centred variant
     drifted well left of "Free tools" because .nav-dd is a flex item that
     shrink-wraps differently than the menu's own width — left:0 pins it under
     the trigger on every page regardless of that width. */
  position: absolute; top: calc(100% + 12px); left: 0; transform: translateY(-6px);
  /* Wide enough that the two descriptions sit on ONE line each instead of
     wrapping mid-phrase ("SPX, / Dow, Nasdaq"). */
  min-width: 320px; width: max-content; max-width: min(380px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
  padding: 6px; z-index: 20;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Invisible hover bridge so moving from the toggle to the menu doesn't drop it. */
.nav-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.nav-dd-menu a { display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { background: var(--bg); outline: none; }
.nav-dd-t { display: block; color: var(--text); font-size: 17.5px; font-weight: 600; }
.nav-dd-s { display: block; color: var(--muted); font-size: 16px; margin-top: 2px; line-height: 1.4; }
@media (max-width: 820px) {
  .nav-dd { display: none; }   /* folds away on phones like the other secondary links */
}

/* ── Header "Features" mega-menu ───────────────────────────────────────────
   Built by static/site-nav.js from the plain <a href="/features"> link every
   marketing header carries: a two-column grid of icon + title + blurb, one
   entry per feature page. Reuses the .nav-dd open/close mechanics above. */
.nav-dd-features .nav-dd-toggle::after {
  content: ""; width: 6px; height: 6px; margin-left: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .7;
}
.nav-dd-features.is-current .nav-dd-toggle { color: var(--accent); }
.nav-dd-mega {
  /* Centre under the toggle; wide enough for two 300px columns. */
  left: 50%; transform: translate(-50%, -6px);
  min-width: 0; width: max-content; max-width: min(760px, calc(100vw - 32px));
  padding: 14px 14px 12px;
}
.nav-dd:hover .nav-dd-mega, .nav-dd:focus-within .nav-dd-mega { transform: translate(-50%, 0); }
.nav-dd-head {
  font-family: var(--font-mono, monospace); font-size: 14px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); padding: 4px 12px 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.nav-dd-grid { display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 2px 8px; }
.nav-dd-grid a { display: flex; align-items: flex-start; gap: 14px; padding: 12px 12px; }
.nav-dd-grid a[aria-current="page"] { background: var(--bg); }
.nav-dd-grid a[aria-current="page"] .nav-dd-t { color: var(--accent); }
.nav-dd-grid svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.nav-dd-grid .nav-dd-t { font-size: 19px; }
.nav-dd-grid .nav-dd-s { font-size: 17px; }
@media (max-width: 820px) {
  /* .nav-dd folds away on phones; the Features entry must stay reachable, so
     it collapses back to a plain link (the toggle) and hides the grid. */
  .nav-dd-features { display: flex; }
  .nav-dd-features .nav-dd-mega { display: none; }
  .nav-dd-features .nav-dd-toggle::after { display: none; }
}