@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#0b1220;
  --bg-accent:#0e1729;
  --surface:#0f172a;
  --card:#111827;
  --muted:#cbd5e1;
  --text:#e5e7eb;
  --brand:#22d3ee;
  --brand-light:#67e8f9;
  --brand-strong:#06b6d4;
  --brand-contrast:#081018;
  --danger:#f43f5e;
  --danger-strong:#e11d48;
  --caution:#f59e0b;
  --caution-strong:#d97706;
  --ring:rgba(34,211,238,.35);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --accent-gold:#c9973a;
  --accent-green:#22c98a;
  --accent-blue:#3d8ef0;
  color-scheme: dark;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(34,211,238,.08), transparent 60%),
    linear-gradient(to bottom right, var(--bg), var(--bg-accent));
}

/* 2026-01-13T01:20:50Z ROO — Global monospace baseline for code-related elements across Blade views */
code, pre, kbd, samp{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre{ white-space: pre; }
code{ font-size: .95em; }

/* Background grid accent */
.grid-bg{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(to right, rgba(148,163,184,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.12) 1px, transparent 1px);
  background-size:56px 56px,56px 56px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 70%);
}

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:0 24px}
.admin-livewire-shell{width:100%; max-width:96rem; margin-left:auto; margin-right:auto}

/* Plan viewer markdown prose */
.plan-prose{color:#cbd5e1;font-size:.875rem;line-height:1.7}
.plan-prose h1,.plan-prose h2,.plan-prose h3,.plan-prose h4{color:#f1f5f9;font-weight:700;margin-top:1.5em;margin-bottom:.5em;line-height:1.3}
.plan-prose h1{font-size:1.5rem;border-bottom:1px solid rgba(100,116,139,.3);padding-bottom:.4em}
.plan-prose h2{font-size:1.2rem}
.plan-prose h3{font-size:1rem;color:#e2e8f0}
.plan-prose h4{font-size:.9rem;color:#94a3b8;font-weight:600}
.plan-prose p{margin:.75em 0}
.plan-prose ul,.plan-prose ol{padding-left:1.5em;margin:.75em 0}
.plan-prose li{margin:.25em 0}
.plan-prose ul>li{list-style:disc}
.plan-prose ol>li{list-style:decimal}
.plan-prose code{background:rgba(15,23,42,.7);border:1px solid rgba(100,116,139,.3);border-radius:.3em;padding:.1em .35em;font-size:.8em;color:#a5f3fc;font-family:ui-monospace,monospace}
.plan-prose pre{background:rgba(2,6,23,.8);border:1px solid rgba(100,116,139,.25);border-radius:.75em;padding:1em 1.25em;overflow-x:auto;margin:1em 0}
.plan-prose pre code{background:none;border:none;padding:0;color:#94a3b8;font-size:.8em}
.plan-prose blockquote{border-left:3px solid rgba(139,92,246,.5);padding-left:1em;margin-left:0;color:#94a3b8;font-style:italic}
.plan-prose a{color:#a78bfa;text-decoration:underline;text-underline-offset:2px}
.plan-prose a:hover{color:#c4b5fd}
.plan-prose table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.8rem}
.plan-prose th{background:rgba(15,23,42,.6);color:#e2e8f0;font-weight:600;padding:.5em .75em;text-align:left;border:1px solid rgba(100,116,139,.3)}
.plan-prose td{padding:.4em .75em;border:1px solid rgba(100,116,139,.2);color:#cbd5e1}
.plan-prose tr:nth-child(even) td{background:rgba(15,23,42,.3)}
.plan-prose hr{border:none;border-top:1px solid rgba(100,116,139,.25);margin:1.5em 0}
.plan-prose strong{color:#f1f5f9;font-weight:600}
.plan-prose em{color:#94a3b8}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(to bottom, rgba(2,6,23,.65), rgba(2,6,23,.35) 40%, transparent);
  border-bottom:1px solid rgba(148,163,184,.12);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand-logo{
  width:28px; height:28px; border-radius:6px;
  background: url('/TB-logo-favicon.png') center center / contain no-repeat;
  box-shadow: 0 6px 18px var(--ring), inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-logo-cover{
  background: url('/TB-logo-favicon.png') center center / contain no-repeat;
}
.brand-logo-cover--acu{
  background: url('/acubooth/acubooth-logo-favicon.png') center center / contain no-repeat;
}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; margin-left:18px}
.nav a:hover{color:var(--text)}
.topbar-actions{display:flex; align-items:center; gap:12px}
.eyebrow-link{color:inherit; text-decoration:none}
.eyebrow-link:hover{color:var(--text)}

/* Hero */
.hero{padding:72px 0 36px}
.hero .eyebrow{color:var(--brand); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px}
.hero h1{margin:10px 0 8px; font-size:40px; line-height:1.15; letter-spacing:.2px}
.hero p{margin:0; color:var(--muted); font-size:16px}

/* Buttons */
/* 2025-11-12T18:59:40Z ROO — Center .cta by default site-wide; keep .card .cta left-aligned */
.cta{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none; transition:all .2s ease; border:1px solid transparent}
.btn-xs{padding:7px 16px; border-radius:8px; font-size:12px}
.btn-primary{background:linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%); color:var(--brand-contrast); box-shadow: var(--shadow)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(34,211,238,.25)}
.btn-outline{background:transparent; color:var(--text); border-color:rgba(148,163,184,.25)}
.btn-outline:hover{border-color:var(--brand); box-shadow: 0 0 0 3px var(--ring)}
/* 2026-01-09T18:45:40Z ROO — Landing primary gradient CTAs: ensure strong text contrast on bright gradients */
.landing-primary-cta{
  color: var(--bg) !important;
  text-decoration:none;
}
.landing-primary-cta:hover,
.landing-primary-cta:focus-visible{
  color: var(--bg) !important;
}
/* 2025-11-22T19:37:00Z ROO — Instrument stats inline controls (.ig-button) use accessible light/dark contrast */
.ig-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  font-size:12px;
  line-height:1.4;
  border-radius:4px;
  border:1px solid #d1d5db;
  background-color:#e5e7eb;
  color:#111827;
  cursor:pointer;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.ig-button:hover{
  background-color:#d1d5db;
  border-color:#9ca3af;
}
.ig-button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
 
/* Cards */
.cards{display:grid; grid-template-columns:1fr; gap:18px; margin-top:28px}
@media(min-width:820px){.cards{grid-template-columns:1fr 1fr}}
/* 2025-12-09T22:38:00Z ROO — Center single-column card layouts (e.g., Getting Started) */
.cards.cards-single{
  grid-template-columns:1fr;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.cards.cards-single.cards-single--wide{
  max-width:1120px;
}
@media(min-width:820px){
  .cards.cards-single{
    grid-template-columns:1fr;
  }
}

/* 2026-01-13T20:10:00Z Roo — Shared centered layout for single primary cards on public pages (Pricing, Setup Checklist) */
.page-main-centered{
  min-height:calc(100vh - 64px); /* 64px = .topbar-inner height */
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.section-header-spaced{
  margin-top:24px;
}
.public-copy-spaced{
  margin-top:24px;
}
.public-list-offset{
  margin:8px 0 0 18px;
}
.public-list-item-spaced{
  margin-bottom:8px;
}
.links-spaced-top{
  margin-top:12px;
}
.links-spaced-top-lg{
  margin-top:16px;
}
.gtm-noscript-frame{
  display:none;
  visibility:hidden;
}

@media(min-width:1024px){
  .container.container-wide{ max-width:1320px; }
}

.hero.hero-tight{
  padding-top:56px;
  padding-bottom:32px;
}

.cards.cards-single.cards-main-centered{
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
}
.faq-search-field label{
  /* 2026-01-14T23:10:40Z ROO Rec0A8QMRTGF8 — FAQ page search label stacking */
  display:block;
  margin-bottom:4px;
  font-size:13px;
}
#faq-page .faq-card-hidden{
  /* 2026-01-14T23:10:40Z ROO Rec0A8QMRTGF8 — FAQ page client-side filtered card visibility */
  display:none !important;
}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(148,163,184,.16); border-radius:14px; box-shadow: var(--shadow)}
.card-inner{padding:22px}
.card h3{margin:0 0 6px; font-size:18px}
.card h4{margin:0 0 6px; font-size:15px; font-weight:600}
.card h5{margin:0 0 6px; font-size:13px; font-weight:600}
.card h6{margin:0 0 4px; font-size:12px; font-weight:600}
.card p{margin:0 0 14px; color:var(--muted); font-size:14px}
.card li{font-size:14px; color:var(--muted)}
.case-study-disclosures{margin-bottom:28px}
.case-study-disclosures .footnote-block:first-child{margin-top:0}
.case-study-disclosures .footnote-block:last-child{margin-bottom:0}
.case-study-section-header{margin-top:24px}
.case-study-section-header-first{margin-top:28px}
.case-study-section-header-xl{margin-top:40px}
.status-banner{
  margin:0;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,42,.58);
  color:var(--text);
  box-shadow:0 12px 32px rgba(2,6,23,.18);
}
.status-banner strong{color:inherit}
.status-banner--success{
  border-color:rgba(16,185,129,.35);
  background:rgba(16,185,129,.12);
  color:#d1fae5;
}
.status-banner--warning{
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.12);
  color:#fef3c7;
}
.status-banner--danger{
  border-color:rgba(244,63,94,.35);
  background:rgba(244,63,94,.12);
  color:#ffe4e6;
}
.status-banner--info{
  border-color:rgba(34,211,238,.35);
  background:rgba(34,211,238,.12);
  color:#cffafe;
}
.settings-table-wrap{
  overflow-x:auto;
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
  background:rgba(2,6,23,.22);
}
.settings-table{
  width:100%;
  min-width:420px;
  border-collapse:collapse;
}
.settings-table th,
.settings-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid rgba(148,163,184,.12);
  vertical-align:top;
}
.settings-table thead th{
  background:rgba(15,23,42,.72);
  color:rgba(203,213,225,.82);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.settings-table tbody tr:hover{background:rgba(255,255,255,.02)}
.settings-table tbody tr:last-child td{border-bottom:none}
.settings-note{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
.settings-count{
  color:var(--text);
  font-size:15px;
  font-weight:600;
}
.settings-divider{
  border:none;
  border-top:1px solid rgba(71,85,105,.55);
  margin:16px 0;
}
.settings-inline-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.settings-hint{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.settings-choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin:16px 0;
}
.settings-choice-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid rgba(71,85,105,.55);
  border-radius:12px;
  background:rgba(15,23,42,.7);
  color:var(--text);
}
.settings-choice-card input[type="checkbox"]{
  margin:0;
  transform:scale(1.1);
}
/* 2026-07-15 — Modernized docs surfaces: sticky sidebar nav with grouped sections,
   active-link highlight, and full markdown prose treatment for docs-content */
.docs-layout{
  max-width:1280px;
  margin:0 auto;
  padding:0 1.5rem 4rem;
}
.docs-main{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.docs-main[data-nav-state="collapsed"] .docs-sidebar{display:none}
.docs-main[data-nav-state="collapsed"] .docs-nav-toggle{display:inline-flex}
.docs-nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(15,23,42,.9);
  color:var(--text);
  padding:0.55rem 0.9rem;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.docs-nav-toggle:hover{border-color:rgba(103,232,249,.8); color:#67e8f9}
.docs-sidebar-shell{display:flex; flex-direction:column; gap:0.75rem}
.docs-sidebar,
.docs-content{
  border:1px solid rgba(148,163,184,.14);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.76));
  box-shadow:var(--shadow);
}

/* Sidebar navigation */
.docs-sidebar{
  padding:1rem .85rem;
  font-size:13px;
  line-height:1.45;
}
.docs-sidebar ul{list-style:none; margin:0; padding:0}
.docs-sidebar hr{
  border:none;
  border-top:1px solid rgba(148,163,184,.14);
  margin:.9rem .35rem;
}
.docs-sidebar > ul > li{
  padding:.28rem .5rem 0;
  color:#e2e8f0;
  font-weight:600;
}
.docs-sidebar > ul > li > strong{
  display:block;
  margin:1.1rem 0 .2rem;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
}
.docs-sidebar > ul > li:first-child > strong{margin-top:.1rem}
.docs-sidebar > ul > li > ul{
  margin:.15rem 0 .5rem;
  padding-left:.45rem;
  border-left:1px solid rgba(148,163,184,.16);
  font-weight:400;
}
.docs-sidebar li li{padding:0}
.docs-sidebar a{
  display:block;
  padding:.28rem .55rem;
  border-radius:8px;
  color:var(--muted);
  text-decoration:none;
  transition:background .15s, color .15s;
}
.docs-sidebar a:hover{
  color:var(--brand-light);
  background:rgba(34,211,238,.08);
}
.docs-sidebar a.is-active{
  color:var(--brand-light);
  background:rgba(34,211,238,.12);
  font-weight:600;
}
.docs-sidebar::-webkit-scrollbar{width:8px}
.docs-sidebar::-webkit-scrollbar-track{background:transparent}
.docs-sidebar::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.25);
  border-radius:8px;
}

/* Markdown prose */
.docs-content{
  flex:1 1 auto;
  min-width:0;
  padding:2rem 2.25rem 2.5rem;
  color:var(--text);
  font-size:15px;
  line-height:1.7;
}
.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4{
  color:#f1f5f9;
  font-weight:700;
  line-height:1.3;
  margin:1.6em 0 .6em;
}
.docs-content h1{
  margin-top:.2em;
  font-size:1.7rem;
  padding-bottom:.45em;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.docs-content h2{
  font-size:1.3rem;
  padding-bottom:.3em;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.docs-content h3{font-size:1.1rem}
.docs-content h4{font-size:.95rem; color:#cbd5e1}
.docs-content p{margin:.8em 0}
.docs-content a{
  color:var(--brand-light);
  text-decoration:underline;
  text-decoration-color:rgba(103,232,249,.35);
  text-underline-offset:3px;
}
.docs-content a:hover{text-decoration-color:currentcolor}
.docs-content code{
  background:rgba(15,23,42,.9);
  border:1px solid rgba(51,65,85,.8);
  border-radius:.375rem;
  padding:.1rem .35rem;
  font-size:.85em;
  color:#a5f3fc;
}
.docs-content pre{
  overflow:auto;
  padding:1rem 1.25rem;
  border:1px solid rgba(51,65,85,.72);
  border-radius:14px;
  background:rgba(2,6,23,.62);
}
.docs-content pre code{
  background:none;
  border:none;
  padding:0;
  color:#cbd5e1;
}
.docs-content table{
  display:block;
  width:max-content;
  max-width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin:1.2em 0;
  font-size:.88em;
}
.docs-content th{
  background:rgba(15,23,42,.85);
  color:#e2e8f0;
  font-weight:600;
  text-align:left;
  padding:.5em .8em;
  border:1px solid rgba(100,116,139,.35);
}
.docs-content td{
  padding:.45em .8em;
  border:1px solid rgba(100,116,139,.22);
  color:var(--muted);
}
.docs-content tr:nth-child(even) td{background:rgba(15,23,42,.35)}
.docs-content blockquote{
  margin:1em 0;
  padding:.2em 1em;
  border-left:3px solid rgba(34,211,238,.5);
  border-radius:0 10px 10px 0;
  background:rgba(15,23,42,.4);
  color:#94a3b8;
}
.docs-content hr{
  border:none;
  border-top:1px solid rgba(148,163,184,.16);
  margin:2em 0;
}
.docs-content img{max-width:100%; border-radius:10px}
.docs-content ul,
.docs-content ol{padding-left:1.5em; margin:.75em 0}
.docs-content li{margin:.3em 0}
.docs-content li > ul,
.docs-content li > ol{margin:.2em 0}
.docs-content strong{color:#f1f5f9}
@media (min-width:1024px){
  .docs-main{
    flex-direction:row;
    align-items:flex-start;
    gap:2rem;
  }
  .docs-main[data-nav-state="collapsed"] .docs-sidebar{display:block}
  .docs-main[data-nav-state="collapsed"] .docs-nav-toggle{display:none}
  .docs-sidebar-shell{
    flex:0 0 300px;
    position:sticky;
    top:80px;
  }
  .docs-sidebar{
    max-height:calc(100vh - 104px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* 2026-04-02T17:15:00Z ROO Rec0AQD2A95D1 — Compact centered confirmation card layout for settings-updated page */
.card.card-confirmation .card-inner{
  padding:28px 24px;
  text-align:center;
}
.card.card-confirmation h1{
  margin:0 0 8px;
  font-size:22px;
}
.card.card-confirmation p{
  margin:0 0 18px;
  font-size:15px;
}
/* 2025-11-12T18:59:40Z ROO — Keep .cta/.links left-aligned when inside cards */
/* 2026-05-13T02:08:25Z ROO — Center links in confirmation cards */
.card.card-confirmation .links{
  margin-top:4px;
  justify-content:center;
}
.card .cta{ justify-content:flex-start; }
.card .links{ justify-content:flex-start; }

/* Media blocks */
.media{display:flex; align-items:flex-start; gap:16px}
.icon{
  width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(34,211,238,.12); color:var(--brand); border:1px solid rgba(34,211,238,.25)
}

.media-gap-sm{margin-bottom:10px}
.media-gap-md{margin-bottom:12px}
.public-mt-4{margin-top:4px}
.public-mt-6{margin-top:6px}
.public-mt-8{margin-top:8px}
.public-mt-10{margin-top:10px}
.public-mt-12{margin-top:12px}
.public-mt-16{margin-top:16px}
.public-mt-24{margin-top:24px}
.public-mb-6{margin-bottom:6px}
.public-mb-10{margin-bottom:10px}
.public-heading-md{margin:12px 0 6px}
.public-list-offset-compact{margin:6px 0 12px 18px}
.public-list-indent{margin-left:18px}
.public-list-indent-md{margin-left:16px}
.public-note-centered{margin-top:8px; text-align:center}
.public-note-centered-tight{margin-top:4px; text-align:center}
.public-label-reset-margin{margin:0}
.public-text-meta{font-size:13px; opacity:.85}
.public-card-row-centered{display:flex; justify-content:center}
.public-media-frame{width:100%; max-width:960px; margin:0 auto}
.public-video-frame{width:100%; height:auto; border-radius:10px; background:#0b1220}
.public-filter-controls{margin-bottom:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.public-input-symbol-filter{max-width:180px}
.public-sortable-table{width:100%; border-collapse:collapse}
.public-sortable-table-heading{text-align:center; padding:8px 6px; cursor:pointer}
.public-static-example-table{width:100%; min-width:520px}
.public-comparison-table{width:100%; border-collapse:collapse}
.public-comparison-table th,
.public-comparison-table td{padding:6px 4px; vertical-align:top}
.public-comparison-table thead th{text-align:left; border-bottom:1px solid #334155}
.public-comparison-table--xl{min-width:720px}
.calendar-table{width:100%; border-collapse:collapse}
.calendar-sortable-heading{text-align:center; padding:8px 6px; cursor:pointer}

.preserve-equities-metrics{
  margin:16px 0 20px;
  padding:16px;
  background:rgba(255,255,255,0.04);
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.08);
}
.preserve-equities-metrics-caption{
  margin:0 0 14px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.preserve-equities-metrics-grid{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.preserve-equities-metric-value{
  font-size:1.4rem;
  font-weight:600;
  line-height:1.2;
}
.preserve-equities-metric-label{
  font-size:12px;
  margin-top:2px;
  color:var(--muted);
}
.preserve-equities-metric-meta{
  font-size:11px;
  margin-top:2px;
  color:var(--muted);
}
.preserve-equities-metrics-disclaimer{
  margin:0;
  font-size:11px;
  color:var(--muted);
}

/* 2026-01-09T19:34:00Z ROO — Normalize onboarding card icon glyph size inside pill to match How it works tiles */
.card .icon svg{
  width:20px;
  height:20px;
  flex-shrink:0;
}

/* Logo & icon previews */
.logo-row{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-start;
  margin-top:12px;
}
.logo-figure{
  flex:1 1 220px;
  margin:0;
}
.logo-image-large{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:var(--shadow);
  background-color:var(--bg-accent);
}
.logo-favicon-swatch{
  width:72px;
  height:72px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 0%, rgba(34,211,238,.35), transparent 55%),
    linear-gradient(135deg, var(--bg-accent), var(--card));
  box-shadow:var(--shadow);
}
.logo-image-favicon{
  width:32px;
  height:auto;
  display:block;
}
.logo-caption{
  margin-top:8px;
  font-size:13px;
}
.logo-usage-list{
  margin-top:16px;
}

/* Style guide token reference */
.style-guide-token-table td,
.style-guide-token-table th{
  vertical-align:middle;
}
.style-guide-token-swatch{
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.style-guide-token-swatch--bg{background:var(--bg)}
.style-guide-token-swatch--bg-accent{background:var(--bg-accent)}
.style-guide-token-swatch--surface{background:var(--surface)}
.style-guide-token-swatch--card{background:var(--card)}
.style-guide-token-swatch--text{background:var(--text)}
.style-guide-token-swatch--muted{background:var(--muted)}
.style-guide-token-swatch--brand{background:var(--brand)}
.style-guide-token-swatch--brand-light{background:var(--brand-light)}
.style-guide-token-swatch--brand-strong{background:var(--brand-strong)}
.style-guide-token-swatch--brand-contrast{background:var(--brand-contrast)}
.style-guide-token-swatch--danger{background:var(--danger)}
.style-guide-token-swatch--danger-strong{background:var(--danger-strong)}
.style-guide-token-swatch--caution{background:var(--caution)}
.style-guide-token-swatch--caution-strong{background:var(--caution-strong)}
.style-guide-token-swatch--ring{
  background:linear-gradient(135deg, rgba(34,211,238,.12), var(--ring));
}
.style-guide-token-swatch--shadow{
  background:linear-gradient(135deg, rgba(15,23,42,.96), rgba(2,6,23,.72));
}
.style-guide-token-value{
  white-space:nowrap;
}
.style-guide-token-usage{
  min-width:220px;
}

/* Links group */
/* 2025-11-12T18:59:40Z ROO — Center .links by default site-wide; keep .card .links left-aligned */
.links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.muted{color:var(--muted)}
/* 2026-04-03T00:24:30Z ROO Rec0AQJ33M18D — Utility for extra-small supporting text in developer notes and captions */
.text-xs{font-size:12px}
.text-sm-13{font-size:13px}
.pricing-example-label{color:var(--text)}
.cookie-consent-banner{
  display:none;
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:9999;
  background:rgba(11,18,32,0.97);
  border-top:1px solid rgba(148,163,184,0.16);
  padding:1rem 1.25rem;
  box-shadow:0 -4px 24px rgba(0,0,0,0.4);
}
.cookie-consent-banner.is-visible{
  display:block;
}
.cookie-consent-banner-inner{
  max-width:72rem;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
}
.cookie-consent-copy{margin:0; font-size:13px; color:var(--muted); flex:1 1 auto; min-width:0}
.cookie-consent-link{color:var(--brand); text-decoration:underline; text-underline-offset:3px}
.cookie-consent-actions{display:flex; gap:0.5rem; flex-shrink:0}
.stats-instruments{font-size:14px; color:var(--text)}
.stats-instruments .header{margin:0 0 8px}
.stats-instruments .stats-caption{margin-top:4px}
.stats-instruments .stats-caption + .stats-caption{margin-top:2px}
.stats-instruments .stats-footnote{margin-top:4px}
.stats-instruments .stats-empty{margin:8px 0; font-size:13px}
.stats-instruments .instrument-group{margin:14px 0 18px}
.stats-instruments .stats-group-heading{margin:0 0 8px; font-size:16px}
.stats-instruments .ig-toggle{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.stats-instruments .ig-caret{display:inline-block; transform:rotate(0deg); transition:transform 150ms; font-size:12px}
.stats-instruments .ig-body{overflow-x:auto; display:none}
.stats-instruments .si-table{width:100%; border-collapse:collapse}
.stats-instruments .si-column-text,
.stats-instruments .si-column-number,
.stats-instruments .si-cell-text,
.stats-instruments .si-cell-number,
.stats-instruments .si-empty-row{padding:6px 8px}
.stats-instruments .si-column-text,
.stats-instruments .si-column-number{border-bottom:1px solid rgba(148,163,184,.28); color:var(--muted); cursor:pointer}
.stats-instruments .si-column-text,
.stats-instruments .si-cell-text{text-align:left}
.stats-instruments .si-column-number,
.stats-instruments .si-cell-number{text-align:right}
.stats-instruments .si-cell-text,
.stats-instruments .si-cell-number,
.stats-instruments .si-empty-row{border-bottom:1px solid rgba(71,85,105,.35)}
.stats-instruments .si-cell-text,
.stats-instruments .si-cell-number{color:var(--text)}
.stats-instruments .si-empty-row{text-align:center; color:var(--muted)}

/* 2026-04-22T22:33:20Z ROO Rec0ARJ74KLH3 — Equalize spacing before/after SEC disclosure blocks and prevent doubled gap before following headings */
.footnote-block{ margin-top:16px; margin-bottom:16px; }
@media (min-width: 720px){ .footnote-block{ margin-top:20px; margin-bottom:20px; } }
/* Remove default top margin on the next h2 so the visual gap below matches .footnote-block bottom margin exactly */
.footnote-block + h2{ margin-top:0; }

/* 2026-04-01T03:59:00Z ROO — Shared production onboarding shell for signup steps */
.onboarding-page .topbar{
  background:linear-gradient(to bottom, rgba(2,6,23,.82), rgba(2,6,23,.46) 45%, transparent);
}
.onboarding-main{
  padding-bottom:40px;
}
.onboarding-hero{
  padding-top:52px;
  padding-bottom:24px;
}
.onboarding-hero-grid{
  display:grid;
  gap:22px;
  align-items:start;
}
.onboarding-hero-copy{
  max-width:720px;
}
.onboarding-hero-copy .cta{
  justify-content:flex-start;
}
.onboarding-progress{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  padding:0;
  margin:16px 0 0;
}
.onboarding-step{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.45);
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}
.onboarding-step.is-active{
  border-color:rgba(34,211,238,.45);
  background:rgba(34,211,238,.12);
  color:var(--text);
}
.onboarding-step.is-complete{
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.onboarding-step-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  flex:0 0 auto;
}
.onboarding-step.is-active .onboarding-step-index{
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  color:var(--brand-contrast);
}
.onboarding-step.is-complete .onboarding-step-index{
  background:rgba(34,211,238,.14);
  color:var(--brand);
}
.onboarding-note{
  margin-top:12px;
  max-width:700px;
  font-size:14px;
  line-height:1.65;
}
.onboarding-inline-link{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(148,163,184,.35);
}
.onboarding-inline-link:hover,
.onboarding-inline-link:focus-visible{
  color:var(--brand);
  border-bottom-color:rgba(34,211,238,.55);
  outline:none;
}
.onboarding-hero-panel,
.onboarding-callout,
.onboarding-secondary-note{
  border:1px solid rgba(148,163,184,.16);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.onboarding-hero-panel{
  padding:22px;
}
.onboarding-panel-badge,
.onboarding-state-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.onboarding-panel-badge{
  background:rgba(34,211,238,.12);
  color:var(--brand);
  border:1px solid rgba(34,211,238,.22);
}
.onboarding-state-badge{
  background:rgba(245,158,11,.14);
  color:#fbbf24;
  border:1px solid rgba(245,158,11,.3);
}
.onboarding-hero-panel h2,
.onboarding-state-card h2{
  margin:14px 0 8px;
  font-size:22px;
  line-height:1.2;
}
.onboarding-hero-panel p,
.onboarding-state-card p{
  margin:0;
  color:var(--muted);
}
.onboarding-checklist,
.onboarding-trust-list,
.onboarding-compact-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}

/* 2026-04-02T01:09:40Z ROO Rec0AQPU7CCMP — Callback Additional Schwab Accounts child-account cards layout */
.child-account-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.child-account-card{
  width:100%;
}
.onboarding-checklist li,
.onboarding-compact-list li{
  position:relative;
  padding-left:24px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.onboarding-checklist li::before,
.onboarding-compact-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.55em;
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow:0 0 0 4px rgba(34,211,238,.12);
}
.onboarding-layout{
  display:grid;
  gap:18px;
  align-items:start;
}
.onboarding-layout > *{
  min-width:0;
}
.onboarding-shell{
  height:100%;
}
.onboarding-card-inner{
  padding:24px;
}
.onboarding-card-header{
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(148,163,184,.14);
}
.onboarding-kicker{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
}
.onboarding-section-title{
  margin:0;
  font-size:28px;
  line-height:1.15;
  letter-spacing:.2px;
}
.onboarding-section-copy{
  margin:10px 0 0;
  max-width:760px;
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
}
.onboarding-form{
  display:grid;
  gap:20px;
}
.onboarding-supported-broker-note{
  margin-top:0.5rem;
}
.form-section{
  display:grid;
  gap:14px;
}
.form-section + .form-section{
  padding-top:20px;
  border-top:1px solid rgba(148,163,184,.12);
}
.form-section-heading h3{
  margin:0;
  font-size:18px;
}
.form-section-copy{
  margin:6px 0 0;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}
.onboarding-supported-broker{color:var(--brand-light)}
.form-grid{
  display:grid;
  gap:16px;
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-label{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.form-help{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.form-control,
.form-select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control::placeholder{
  color:rgba(203,213,225,.62);
}
.form-control:hover,
.form-select:hover{
  border-color:rgba(148,163,184,.38);
}
.form-control:focus,
.form-select:focus{
  outline:none;
  border-color:rgba(34,211,238,.6);
  box-shadow:0 0 0 4px var(--ring);
  background:rgba(255,255,255,.06);
}
.form-control.is-invalid,
.form-select.is-invalid{
  border-color:rgba(248,113,113,.7);
}
.form-alert{
  margin:0;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(248,113,113,.5);
  background:rgba(127,29,29,.22);
  color:var(--text);
}
.form-alert strong{
  display:block;
  margin-bottom:6px;
}
.form-alert ul{
  margin:0;
  padding-left:18px;
}
.field-error{
  color:#fecaca;
  font-size:13px;
  line-height:1.5;
}
.field-error-inline{
  display:block;
}
.positions-cap-table{width:100%; border-collapse:collapse; font-size:14px}
.onboarding-conditional-field.is-hidden{
  display:none;
}
.onboarding-form-footer{
  display:grid;
  gap:12px;
  padding-top:20px;
  border-top:1px solid rgba(148,163,184,.12);
}
.onboarding-disclaimer{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
.onboarding-sidebar{
  display:grid;
  gap:18px;
}
.onboarding-social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.25);
  background:transparent;
  color:var(--text);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:border-color .2s, box-shadow .2s;
  cursor:pointer;
}
.onboarding-social-btn:hover{border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}
.onboarding-social-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:4px 0;
}
.onboarding-social-divider::before,
.onboarding-social-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(148,163,184,.15);
}
.onboarding-social-divider span{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.onboarding-identity-block{
  display:grid;
  gap:10px;
  padding:14px 16px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.15);
  background:rgba(148,163,184,.05);
  font-size:14px;
}
.onboarding-identity-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}
.onboarding-identity-value{
  font-weight:500;
  color:var(--text);
}
.onboarding-trust-list li{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.onboarding-trust-list strong{
  color:var(--text);
}
.onboarding-support-links{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.onboarding-support-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}
.onboarding-support-link:hover,
.onboarding-support-link:focus-visible{
  border-color:rgba(34,211,238,.42);
  color:var(--brand);
  outline:none;
}
.checkbox-stack{
  display:grid;
  gap:12px;
}
.checkbox-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.checkbox-card:hover{
  border-color:rgba(34,211,238,.35);
  background:rgba(255,255,255,.055);
}
.checkbox-card:focus-within{
  border-color:rgba(34,211,238,.55);
  box-shadow:0 0 0 4px var(--ring);
}
.checkbox-card.is-invalid{
  border-color:rgba(248,113,113,.55);
  box-shadow:0 0 0 1px rgba(248,113,113,.16) inset;
}
.checkbox-card-control{
  padding-top:2px;
}
.checkbox-card-input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--brand);
}
.checkbox-card-body{
  display:grid;
  gap:6px;
}
.checkbox-card-title{
  color:var(--text);
  font-size:15px;
  font-weight:700;
  line-height:1.45;
}
.checkbox-card-help{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
.account-ignored-state{
  display:grid;
  gap:0;
}
.account-ignored-state.is-ignored{
  opacity:.56;
}
.checkbox-card.is-order-preference-disabled{
  cursor:not-allowed;
}
.checkbox-card.is-order-preference-disabled .checkbox-card-input{
  cursor:not-allowed;
}
.onboarding-secondary-note{
  padding:14px 16px;
}
.onboarding-secondary-note p{
  margin:0;
  font-size:14px;
  line-height:1.6;
}
.onboarding-actions{
  justify-content:flex-start;
}
.onboarding-state-card{
  display:grid;
  gap:14px;
}

@media(min-width:720px){
  .form-grid{
    grid-template-columns:1fr 1fr;
  }
  .form-field-full{
    grid-column:1 / -1;
  }
}

@media(min-width:980px){
  .onboarding-hero-grid{
    grid-template-columns:minmax(0, 1.35fr) minmax(280px, .75fr);
  }
}

@media(min-width:1024px){
  .onboarding-layout{
    grid-template-columns:minmax(0, 1.18fr) 320px;
  }
}

@media(max-width:719px){
  .onboarding-card-inner,
  .onboarding-hero-panel{
    padding:18px;
  }
  .onboarding-section-title{
    font-size:24px;
  }
  .onboarding-step{
    width:100%;
    justify-content:flex-start;
  }
  .checkbox-card{
    grid-template-columns:1fr;
  }
}

/* Footer */
footer{margin-top:40px; text-align:center}
footer .flex{justify-content:center}

/* Accessibility */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
/* Link visibility and contrast */
a:not(.btn){
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:not(.btn):hover{ color: var(--brand-light); }
a:not(.btn):visited{ color: var(--brand); }
  a:not(.btn):focus-visible{
    outline: 2px solid var(--brand-light);
    outline-offset: 2px;
  }

/* Ensure links inside muted/footer also use high-contrast colors */
.muted a:not(.btn), footer a:not(.btn){ color: var(--brand); }

/* Ensure primary buttons keep their intended contrast even inside muted/links containers */
.muted a.btn-primary, .muted .btn-primary,
.card .btn-primary, .card a.btn-primary {
  color: var(--brand-contrast);
  text-decoration: none;
}
.muted a.btn-primary:hover, .muted .btn-primary:hover,
.card .btn-primary:hover, .card a.btn-primary:hover {
  color: var(--brand-contrast);
}
@media (prefers-color-scheme: dark){
  /* Covered-call pages: increase text contrast in dark mode */
  #opening-page .muted,
  #closing-page .muted,
  #rolling-page .muted {
    color: var(--text);
  }
  #opening-page .card p,
  #closing-page .card p,
  #rolling-page .card p {
    color: var(--text);
  }
  #opening-page .hero p,
  #closing-page .hero p,
  #rolling-page .hero p {
    color: var(--text);
  }
  /* Instrument stats inline controls: dark theme button contrast */
  .ig-button{
    background-color:#374151;
    border-color:#4b5563;
    color:#f9fafb;
  }
  .ig-button:hover{
    background-color:#4b5563;
    border-color:#6b7280;
  }
}

/* 2026-04-30T01:15:00Z ROO Rec0B0PHK30TU — Global header search styles
   2026-04-30T18:40:30Z ROO Rec0B0PHK30TU — Offset below 64px headers so it does not overlap Schwab Account Login on desktop or mobile */
.global-search{
  position: fixed;
  top: 72px; /* 64px header height + 8px offset */
  right: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
}

.global-search-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.75);
  color:var(--text);
  box-shadow: var(--shadow);
  cursor:pointer;
}
.global-search-toggle:hover{ border-color: rgba(34,211,238,.55); }

.global-search-form{
  display:none;
  align-items:center;
  gap:8px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.9);
  backdrop-filter: blur(6px);
  padding:6px 8px;
  border-radius:999px;
  box-shadow: var(--shadow);
}
.global-search.is-open .global-search-form{ display:flex; }

.global-search-input{
  width:220px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
}

.global-search-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(2,6,23,.85);
  color:var(--text);
  cursor:pointer;
}
.global-search-submit:hover{ border-color: rgba(34,211,238,.55); }

.global-search-suggestions{
  position:absolute;
  top:48px;
  right:0;
  min-width:260px;
  background:rgba(10,18,38,.97);
  backdrop-filter:blur(8px);
  border:1px solid rgba(148,163,184,.2);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:61;
}

.global-search-suggestion-item{
  display:block;
  padding:9px 14px;
  color:var(--text);
  font-size:.875rem;
  text-decoration:none;
  border-bottom:1px solid rgba(148,163,184,.08);
}

.global-search-suggestion-item:last-child{ border-bottom:0; }

.global-search-suggestion-item:hover{
  background:rgba(34,211,238,.08);
  color:rgba(34,211,238,.9);
}

/* 2026-04-01T17:38:00Z ROO — Callback view utilities: left-align checkbox rows and narrow text inputs */
.text-left{ text-align:left !important; }
.input-narrow{ max-width:320px; }
/* Form controls: improve contrast in dark mode, including native dropdown popups */
select, input, textarea {
  color: var(--text);
}

/* Ensure OS/UA form controls render dark-themed popups and text */
@media (prefers-color-scheme: dark){
  select, input, textarea {
    color: var(--text);
    -webkit-text-fill-color: var(--text); /* Safari */
  }
  /* Many browsers honor option styling; improves dropdown menu readability */
  select option {
    color: var(--text);
    background-color: var(--surface);
  }
  /* In muted containers, keep selects fully readable */
  .muted select {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
  }
}
/* Whales page: widen content on small screens by reducing side paddings */
@media (max-width: 600px){
  /* Section uses class "container" and id "whales-page" */
  #whales-page.container { padding-left:8px; padding-right:8px; }
  #whales-page .card-inner { padding-left:12px; padding-right:12px; }
  #whales-page .media { gap:12px; }
}
/* Whales trades: slightly smaller font on mobile to reduce wrapping */
@media (max-width: 600px){
  #whales-page .whale-trades{
    font-size: 13px;
    line-height: 1.35;
  }
}
/* Whales trades: prevent wrapping on mobile while allowing horizontal scroll if needed */
@media (max-width: 600px){
  #whales-page .whale-trades{
    white-space: nowrap;      /* keep each trade on one line */
    overflow-x: auto;         /* enable horizontal scroll if still too long */
    display: block;           /* ensure overflow works on the container */
    -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
  }
}
/* Whales intro: align the "Stream..." text flush with the card's left edge */
#whales-page .whales-intro{
  margin-left:2px;   /* match .card-inner default padding */
  display:block;
  text-align:left;
}
@media (max-width: 600px){
  #whales-page .whales-intro{
    margin-left:-2px; /* match tightened mobile padding we applied earlier */
  }
}
/* 2026-07-09T00:00:00Z ROO — Whale page: compact subscribe toggle button in card header */
.wh-subscribe-btn{
  padding: 6px 12px;
  font-size: .82rem;
  white-space: nowrap;
  align-self: flex-start;
}
/* 2026-07-09T00:00:00Z ROO — Whale page: subscribe form panel (expanded state) */
.wh-subscribe-panel{
  border-top: 1px solid rgba(148,163,184,.18);
  padding: 14px 0 10px;
  margin-bottom: 14px;
}
.wh-subscribe-panel h4{
  margin: 0 0 10px;
  font-size: 15px;
}
/* 2026-07-09T00:00:00Z ROO — Whale page: collapsible disclosure <details> sections */
.wh-disclosure-details{
  font-size: .88rem;
  color: var(--muted);
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.14);
  padding: 10px 14px;
  background: rgba(15,23,42,.18);
  margin-bottom: 4px;
}
.wh-disclosure-details[open]{
  padding-bottom: 14px;
}
.wh-disclosure-summary{
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: .88rem;
  color: var(--muted);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wh-disclosure-summary::-webkit-details-marker{ display: none; }
.wh-disclosure-summary::marker{ display: none; }
.wh-disclosure-chevron{
  font-size: .65rem;
  transition: transform .2s ease;
  display: inline-block;
  opacity: .7;
}
.wh-disclosure-details[open] .wh-disclosure-chevron{
  transform: rotate(90deg);
}
/* Standalone disclosure block (outside a card) */
.wh-disclosure-details--block{
  padding: 12px 16px;
}
.wh-disclosure-details--block .wh-disclosure-summary{
  font-size: .9rem;
}
.wh-disclosure-tagline{
  font-weight: 400;
  font-size: .82rem;
  opacity: .7;
}
@media(max-width: 400px){
  .wh-disclosure-tagline{ display: none; }
}
.whale-link,
.whale-link:visited {
  color: inherit;
  text-decoration: none;
}
.whale-link:hover {
  text-decoration: underline;
}
#whale-detail-page .hero{
  padding-bottom: 24px;
}
.whale-access-banner{
  margin-top: 14px;
  display: inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.55);
  color: var(--text);
  font-size: 14px;
}
.whale-detail-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.whale-detail-card-full{
  grid-column: 1 / -1;
}
.whale-detail-meta{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin: 0;
}
.whale-detail-meta-single{
  grid-template-columns: 1fr;
}
.whale-detail-meta dt{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.whale-detail-meta dd{
  margin: 0;
  color: var(--text);
  font-size: 15px;
}
.whale-detail-table-wrapper{
  overflow-x: auto;
}
.whale-detail-table{
  width: 100%;
  border-collapse: collapse;
}
.whale-detail-table th,
.whale-detail-table td{
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148,163,184,.14);
}
.whale-detail-table th{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.whale-share-row{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
/* Brand link: inherit color and remove underline */
.brand a.brand-link { color: inherit; text-decoration: none; }
.brand a.brand-link:hover { text-decoration: none; }
.home-hero { padding-top: 36px; }

@media (max-width: 600px){
  .whale-detail-meta{
    grid-template-columns: 1fr;
  }
  .whale-share-row{
    align-items: stretch;
  }
}

/* 2026-01-12T21:55:00Z ROO — Mermaid diagrams: unified horizontal centering across Blade views */
.mermaid-wrapper{
  display:flex;
  justify-content:center;
  gap:10px; /* 2026-04-08T19:48:40Z ROO — Allow optional captions beside/under diagrams */
}

.mermaid-wrapper .mermaid{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* Ensure standalone Mermaid blocks (div or pre) also center within their content column */
.mermaid{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

pre.mermaid{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* 2026-04-22T22:40:30Z ROO Rec0AULR9T11U — Ensure Mermaid diagrams are centered specifically when inside cards */
.card .mermaid,
.card pre.mermaid{
  display:flex;             /* allow inner SVG to be flex-centered */
  justify-content:center;   /* center horizontally within card */
}
.card .mermaid > svg,
.card pre.mermaid > svg{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* 2026-04-30T20:40:00Z ROO Rec0B0HEDEVPH — Standardize Mermaid sizing on web views */
.mermaid-web {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mermaid-web > svg,
pre.mermaid.mermaid-web > svg {
  width: 100%;
  max-width: 900px;   /* desktop cap; keep wide but readable */
  height: auto;       /* maintain aspect ratio */
}

/* Unify diagram text size with responsive clamp for accessibility */
.mermaid-web > svg text,
pre.mermaid.mermaid-web > svg text {
  font-size: clamp(18px, 1.8vw, 22px) !important;
}

/* 2026-04-08T19:48:40Z ROO — Optional caption styling for Mermaid diagrams */
.mermaid-caption{
  margin-top:8px;
  color: var(--muted, #94a3b8);
  font-size:14px;
}

/* 2025-12-02T19:57:40Z RT — Unified mermaid-large sizing for NVDA + QQQ blogs (smaller, shared text size) */
.mermaid-large {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mermaid-large svg {
  max-width: none !important; /* keep charts from being auto-shrunk */
}

/* Unified chart text size for blog diagrams */
.mermaid-large svg text {
  font-size: 20px !important;  /* mobile / small screens */
}

/* 2025-12-02T21:40:30Z ROO — MDGL blog diagram: center container horizontally */
.mermaid-mdgl-large {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 2025-12-02T21:13:00Z ROO — MDGL blog diagram: force larger font size than default */
.mermaid-mdgl-large svg text,
.mermaid-mdgl-large svg foreignObject div,
.mermaid-mdgl-large .nodeLabel,
.mermaid-mdgl-large .label {
  font-size: 30px !important;
}

/* QQQ scalp diagram: center container and its SVG horizontally */
.mermaid-qqq-scalp{
  display:flex;
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}

.mermaid-qqq-scalp svg{
  max-width:100%;
}

/* On desktop, constrain the QQQ scalp diagram to ~75% of the card width and center it. */
/* The base text sizing remains controlled by .mermaid-large svg text. */
@media (min-width: 1024px){
  .mermaid-qqq-scalp{
    width: 70%;
  }

  .mermaid-qqq-scalp svg{
    max-width: 80%;
  }

  .mermaid-large {
    width: 50%;
    justify-content:center;
  }

  .mermaid-mdgl-large {
    width: 70%;
    justify-content:center;
  }

}

/* Content tagging + related reading */
.content-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.4;
  background: rgba(148,163,184,0.12);
  color: var(--text);
  border: 1px solid rgba(148,163,184,0.35);
}

.related-reading {
  margin-top: 28px;
}

.related-reading-cards {
  margin-top: 14px;
}

.related-reading-card .card-inner {
  padding-top: 14px;
  padding-bottom: 14px;
}

.related-reading-link {
  font-weight: 500;
}

/* Search bar + results */
.search-bar{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
}

@media (min-width: 720px){
  .search-bar{
    justify-content:flex-start;
  }
}

.search-input{
  flex:1 1 220px;
  max-width:420px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.85);
  color:var(--text);
}

.search-results{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.search-result-item{
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(15,23,42,.9));
}

.search-result-item a{
  font-weight:600;
}

.search-summary{
  margin-top:12px;
}

.no-results{
  margin-top:24px;
  padding:16px 18px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.6);
  background:rgba(15,23,42,.7);
}

.no-results-suggestions{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.no-results-suggestions li a{
  display:inline-block;
  padding:5px 12px;
  border-radius:20px;
  border:1px solid rgba(34,211,238,.35);
  color:rgba(34,211,238,.9);
  font-size:.85rem;
  text-decoration:none;
}

.no-results-suggestions li a:hover{
  background:rgba(34,211,238,.1);
  border-color:rgba(34,211,238,.6);
}

.search-result-badge{
  display:inline-block;
  margin-bottom:5px;
  padding:2px 8px;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.3);
  background:rgba(148,163,184,.08);
  color:rgba(148,163,184,.8);
  font-size:.75rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.search-result-item mark{
  background:rgba(250,204,21,.2);
  color:rgba(250,204,21,.95);
  border-radius:2px;
  padding:0 1px;
}


/* ============================================================
   Performance Dashboard — perf-dash-* component styles
   Added: 2026-06-18T18:16:00Z
   ============================================================ */

/* ── Metric Cards ─────────────────────────────────────────── */
.perf-dash-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.perf-dash-card-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.perf-dash-card {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(51, 65, 85, 0.8);
  border-radius: 1rem;
  padding: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
  width: 100%;
  min-width: 0;
}

.perf-dash-card:hover {
  border-color: var(--brand-primary, rgba(34, 211, 238, 0.5));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary, #22d3ee) 20%, transparent),
              0 4px 24px color-mix(in srgb, var(--brand-primary, #22d3ee) 10%, transparent);
}

.perf-dash-card-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
}

.perf-dash-card-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.7);
}

/* ── Formula Bar ──────────────────────────────────────────── */
.perf-dash-formula-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(51, 65, 85, 0.8);
  background: rgba(15, 23, 42, 0.6);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  backdrop-filter: blur(12px);
}

.perf-dash-formula-sep {
  color: rgba(148, 163, 184, 0.5);
  font-size: 1rem;
}

/* ── Tables ───────────────────────────────────────────────── */
.perf-dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.perf-dash-table thead tr {
  background: rgba(30, 41, 59, 0.6);
}

.perf-dash-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 0.75rem 1rem;
  color: rgba(148, 163, 184, 0.7);
}

.perf-dash-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(30, 41, 59, 0.4);
}

.perf-dash-table tbody tr:hover {
  background: rgba(30, 41, 59, 0.3);
}

/* ── Badges ───────────────────────────────────────────────── */
.perf-dash-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}

.perf-dash-badge-up {
  background: rgba(6, 78, 59, 0.4);
  color: rgb(110, 231, 183);
  border-color: rgba(16, 185, 129, 0.4);
}

.perf-dash-badge-down {
  background: rgba(127, 29, 29, 0.4);
  color: rgb(252, 165, 165);
  border-color: rgba(239, 68, 68, 0.4);
}

.perf-dash-badge-flat {
  background: rgba(30, 41, 59, 0.6);
  color: rgba(148, 163, 184, 0.9);
  border-color: rgba(51, 65, 85, 0.4);
}

.perf-dash-badge-yes {
  background: rgba(49, 46, 129, 0.4);
  color: rgb(165, 180, 252);
  border-color: rgba(99, 102, 241, 0.4);
}

.perf-dash-badge-no {
  background: rgba(30, 41, 59, 0.6);
  color: rgba(148, 163, 184, 0.7);
  border-color: rgba(51, 65, 85, 0.4);
}

.perf-dash-badge-live {
  background: rgba(8, 51, 68, 0.4);
  color: rgb(103, 232, 249);
  border-color: rgba(6, 182, 212, 0.4);
}

.perf-dash-badge-rolled {
  background: rgba(59, 7, 100, 0.4);
  color: rgb(216, 180, 254);
  border-color: rgba(168, 85, 247, 0.4);
}

.perf-dash-badge-expired {
  background: rgba(30, 41, 59, 0.6);
  color: rgba(148, 163, 184, 0.7);
  border-color: rgba(51, 65, 85, 0.4);
}

.perf-dash-badge-assigned {
  background: rgba(120, 53, 15, 0.4);
  color: rgb(252, 211, 77);
  border-color: rgba(245, 158, 11, 0.4);
}

/* ── Sidebar Nav Items ────────────────────────────────────── */
.perf-dash-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.9);
  transition: background-color 0.15s ease, color 0.15s ease;
  border: none;
  background: transparent;
  cursor: pointer;
}

.perf-dash-nav-item:hover {
  background: rgba(30, 41, 59, 0.6);
  color: rgb(226, 232, 240);
}

.perf-dash-nav-item.active {
  background: color-mix(in srgb, var(--brand-accent, #c084fc) 20%, transparent);
  color: #fff;
}

/* ── Section Header ───────────────────────────────────────── */
.perf-dash-section-header {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(241, 245, 249);
  margin-bottom: 0.5rem;
}

/* ── Dimmed Rows ──────────────────────────────────────────── */
.perf-dash-dimmed {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

/* ── Value Colors ─────────────────────────────────────────── */
.perf-dash-positive {
  color: rgb(52, 211, 153);
}

.perf-dash-negative {
  color: rgb(248, 113, 113);
}

.perf-dash-neutral {
  color: rgba(148, 163, 184, 0.7);
}

/* ============================================================
   Blueprint Landing Page — fully scoped under #signup-landing
   Added: 2026-06-18T19:20:00Z
   ============================================================ */

.signup-landing-page {
  margin: 0;
  background: #070c15;
  color: #eaf0f8;
  font-family: 'DM Sans', sans-serif;
}

#signup-landing {
  --signup-landing-bg: #070c15;
  --signup-landing-bg-2: #0c1422;
  --signup-landing-bg-3: #111b2d;
  --signup-landing-card: #131d2e;
  --signup-landing-border: rgba(255, 255, 255, 0.07);
  --signup-landing-border-strong: rgba(255, 255, 255, 0.12);
  --signup-landing-gold: #c9973a;
  --signup-landing-gold-light: #e8b84b;
  --signup-landing-gold-dim: rgba(201, 151, 58, 0.15);
  --signup-landing-green: #22c98a;
  --signup-landing-green-dim: rgba(34, 201, 138, 0.12);
  --signup-landing-blue: #3d8ef0;
  --signup-landing-blue-dim: rgba(61, 142, 240, 0.12);
  --signup-landing-text: #eaf0f8;
  --signup-landing-text-2: #8898aa;
  --signup-landing-text-3: #4d607a;
  --signup-landing-red-dim: rgba(220, 60, 60, 0.08);
  --signup-landing-radius: 10px;
  --signup-landing-radius-lg: 16px;
  background: var(--signup-landing-bg);
  color: var(--signup-landing-text);
}

#signup-landing,
#signup-landing * {
  box-sizing: border-box;
}

#signup-landing a {
  color: inherit;
}

#signup-landing [x-cloak] {
  display: none !important;
}

.signup-landing-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;
}

.signup-landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 5%;
  background: rgba(7, 12, 21, 0.92);
  border-bottom: 1px solid var(--signup-landing-border);
  backdrop-filter: blur(12px);
}

.signup-landing-nav-inner,
.signup-landing-section-inner,
.signup-landing-proof-inner {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.signup-landing-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 60px;
}

.signup-landing-nav-logo {
  text-decoration: none;
  color: var(--signup-landing-gold-light);
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 600;
}

.signup-landing-nav-logo span {
  display: block;
  margin-top: -2px;
  color: var(--signup-landing-text-2);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.signup-landing-nav-cta,
.signup-landing-hero-cta,
.signup-landing-buy-button,
.signup-landing-final-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--signup-landing-radius);
  background: var(--signup-landing-gold);
  color: #1a0f00;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease;
}

.signup-landing-nav-cta {
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.signup-landing-nav-cta:hover,
.signup-landing-hero-cta:hover,
.signup-landing-buy-button:hover,
.signup-landing-final-buy:hover {
  background: var(--signup-landing-gold-light);
  transform: translateY(-1px);
}

.signup-landing-hero-section,
.signup-landing-section,
.signup-landing-final-cta {
  padding: 80px 5%;
}

.signup-landing-hero-grid,
.signup-landing-problem-grid,
.signup-landing-tbt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px;
  align-items: center;
}

.signup-landing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 5px 14px;
  border: 1px solid rgba(201, 151, 58, 0.25);
  border-radius: 999px;
  background: var(--signup-landing-gold-dim);
  color: var(--signup-landing-gold-light);
  font-size: 12px;
  font-weight: 500;
}

.signup-landing-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signup-landing-gold);
}

.signup-landing-hero-title,
.signup-landing-section-title {
  margin: 0 0 16px;
  color: var(--signup-landing-text);
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 700;
}

.signup-landing-section-title {
  font-size: 38px;
}

.signup-landing-hero-title em,
.signup-landing-section-title em {
  color: var(--signup-landing-gold-light);
  font-style: italic;
}

.signup-landing-hero-subtitle,
.signup-landing-section-subtitle,
.signup-landing-final-cta-subtitle {
  margin: 0;
  color: var(--signup-landing-text-2);
  font-size: 18px;
  line-height: 1.65;
}

.signup-landing-hero-subtitle strong {
  color: var(--signup-landing-text);
  font-weight: 500;
}

.signup-landing-hero-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0;
}

.signup-landing-hero-price-tag {
  color: var(--signup-landing-gold-light);
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}

.signup-landing-hero-price-note {
  color: var(--signup-landing-text-2);
  font-size: 14px;
}

.signup-landing-hero-price-strike {
  color: var(--signup-landing-text-3);
  font-size: 18px;
  text-decoration: line-through;
}

.signup-landing-hero-cta,
.signup-landing-buy-button,
.signup-landing-final-buy {
  padding: 16px 36px;
  font-size: 16px;
}

.signup-landing-hero-proof,
.signup-landing-final-cta-note,
.signup-landing-footnote,
.signup-landing-footer,
.signup-landing-guarantee {
  color: var(--signup-landing-text-3);
  font-size: 12px;
}

.signup-landing-hero-proof {
  margin-top: 14px;
}

.signup-landing-hero-proof span {
  color: var(--signup-landing-green);
}

.signup-landing-hero-card,
.signup-landing-calculator,
.signup-landing-price-card,
.signup-landing-tbt-card {
  overflow: hidden;
  border: 1px solid var(--signup-landing-border-strong);
  border-radius: var(--signup-landing-radius-lg);
  background: var(--signup-landing-bg-3);
}

.signup-landing-hero-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--signup-landing-border);
  background: linear-gradient(135deg, #0f1a2e, #111d35);
}

.signup-landing-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.signup-landing-card-dot--red { background: #ff5f57; }
.signup-landing-card-dot--yellow { background: #febc2e; }
.signup-landing-card-dot--green { background: #28c840; }

.signup-landing-hero-card-title,
.signup-landing-ticker-symbol,
.signup-landing-ticker-income,
.signup-landing-card-total-value,
.signup-landing-calculator-mono,
.signup-landing-calculator-metric-value,
.signup-landing-income-badge,
.signup-landing-shares-input,
.signup-landing-bar-caption strong {
  font-family: 'JetBrains Mono', monospace;
}

.signup-landing-hero-card-title,
.signup-landing-card-total-label,
.signup-landing-calculator-metric-label,
.signup-landing-bars-label,
.signup-landing-price-product,
.signup-landing-section-label,
.signup-landing-rule-tag,
.signup-landing-tbt-pricing-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.signup-landing-ticker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--signup-landing-border);
}

.signup-landing-ticker-row:last-child {
  border-bottom: 0;
}

.signup-landing-ticker-symbol {
  min-width: 52px;
  color: var(--signup-landing-gold-light);
  font-size: 13px;
  font-weight: 500;
}

.signup-landing-ticker-name,
.signup-landing-calculator-company {
  color: var(--signup-landing-text-2);
  font-size: 13px;
}

.signup-landing-ticker-shares {
  color: var(--signup-landing-text-3);
  font-size: 12px;
}

.signup-landing-ticker-income,
.signup-landing-card-total-value,
.signup-landing-calculator-metric-value--positive,
.signup-landing-income-badge,
.signup-landing-bar-caption strong {
  color: var(--signup-landing-green);
}

.signup-landing-card-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--signup-landing-bg-2);
}

.signup-landing-card-total-label,
.signup-landing-calculator-metric-label,
.signup-landing-bars-label,
.signup-landing-proof-label,
.signup-landing-tbt-pricing-label {
  color: var(--signup-landing-text-3);
  font-size: 11px;
  font-weight: 500;
}

.signup-landing-proof-bar,
.signup-landing-section--alt,
.signup-landing-footer {
  background: var(--signup-landing-bg-2);
}

.signup-landing-proof-bar {
  padding: 28px 5%;
  border-top: 1px solid var(--signup-landing-border);
  border-bottom: 1px solid var(--signup-landing-border);
}

.signup-landing-proof-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.signup-landing-proof-stat {
  text-align: center;
}

.signup-landing-proof-number {
  color: var(--signup-landing-text);
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 700;
}

.signup-landing-section-label {
  margin-bottom: 12px;
  color: var(--signup-landing-gold);
  font-size: 11px;
  font-weight: 600;
}

.signup-landing-section-label--center,
.signup-landing-section-title--center,
.signup-landing-section-subtitle--center,
.signup-landing-final-cta-inner {
  text-align: center;
}

.signup-landing-section-subtitle {
  max-width: 560px;
}

.signup-landing-section-inner--narrow {
  width: min(760px, 100%);
}

.signup-landing-problem-grid,
.signup-landing-inside-grid,
.signup-landing-rules-grid {
  margin-top: 48px;
}

.signup-landing-problem-grid {
  gap: 40px;
}

.signup-landing-problem-card,
.signup-landing-inside-card,
.signup-landing-rule-card {
  padding: 28px;
  border: 1px solid var(--signup-landing-border);
  border-radius: var(--signup-landing-radius-lg);
  background: var(--signup-landing-card);
}

.signup-landing-problem-card--negative {
  border-color: rgba(220, 60, 60, 0.2);
  background: var(--signup-landing-red-dim);
}

.signup-landing-problem-card--positive {
  border-color: rgba(34, 201, 138, 0.2);
  background: rgba(34, 201, 138, 0.04);
}

.signup-landing-problem-label {
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signup-landing-problem-label--negative { color: #dc3c3c; }
.signup-landing-problem-label--positive { color: var(--signup-landing-green); }

.signup-landing-problem-list,
.signup-landing-price-list,
.signup-landing-tbt-feature-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.signup-landing-problem-list li,
.signup-landing-price-list li,
.signup-landing-tbt-feature-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--signup-landing-border);
  color: var(--signup-landing-text-2);
  font-size: 14px;
}

.signup-landing-problem-list li:last-child,
.signup-landing-price-list li:last-child,
.signup-landing-tbt-feature-item:last-child {
  border-bottom: 0;
}

.signup-landing-inside-grid,
.signup-landing-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.signup-landing-inside-card,
.signup-landing-rule-card {
  position: relative;
}

.signup-landing-inside-number,
.signup-landing-rule-number {
  color: rgba(255, 255, 255, 0.05);
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.signup-landing-inside-number {
  position: absolute;
  top: 12px;
  right: 20px;
}

.signup-landing-inside-icon {
  margin-bottom: 14px;
  font-size: 28px;
}

.signup-landing-inside-title,
.signup-landing-rule-title {
  margin: 0 0 8px;
  color: var(--signup-landing-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.signup-landing-inside-description,
.signup-landing-rule-description,
.signup-landing-tbt-card,
.signup-landing-faq-answer p {
  color: var(--signup-landing-text-2);
  font-size: 14px;
  line-height: 1.65;
}

.signup-landing-inside-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.signup-landing-inside-tag--blue {
  background: var(--signup-landing-blue-dim);
  color: var(--signup-landing-blue);
}

.signup-landing-inside-tag--gold {
  background: var(--signup-landing-gold-dim);
  color: var(--signup-landing-gold-light);
}

.signup-landing-inside-tag--green {
  background: var(--signup-landing-green-dim);
  color: var(--signup-landing-green);
}

.signup-landing-inside-tag--red {
  background: rgba(220, 60, 60, 0.1);
  color: #e05757;
}

.signup-landing-calculator {
  margin-top: 48px;
  padding: 36px;
}

.signup-landing-calculator-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.signup-landing-calculator-metric {
  padding: 18px;
  border-radius: var(--signup-landing-radius);
  background: var(--signup-landing-bg-2);
}

.signup-landing-calculator-metric-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 500;
}

.signup-landing-calculator-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.signup-landing-calculator-table th,
.signup-landing-calculator-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--signup-landing-border);
  vertical-align: middle;
}

.signup-landing-calculator-table th {
  color: var(--signup-landing-text-3);
  font-size: 11px;
  font-weight: 500;
  text-align: left;
}

.signup-landing-calculator-table th:last-child,
.signup-landing-calculator-table td:last-child {
  text-align: right;
}

.signup-landing-symbol-badge,
.signup-landing-income-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
}

.signup-landing-symbol-badge {
  background: var(--signup-landing-blue-dim);
  color: var(--signup-landing-blue);
  font-size: 12px;
  font-weight: 500;
}

.signup-landing-income-badge {
  background: var(--signup-landing-green-dim);
  font-size: 12px;
  font-weight: 600;
}

.signup-landing-shares-input,
.signup-landing-add-field select,
.signup-landing-add-field input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--signup-landing-border-strong);
  border-radius: 6px;
  background: var(--signup-landing-bg);
  color: var(--signup-landing-text);
}

.signup-landing-shares-input {
  width: 88px;
  text-align: right;
}

.signup-landing-remove-button {
  border: 0;
  background: transparent;
  color: var(--signup-landing-text-3);
  font-size: 18px;
  cursor: pointer;
}

.signup-landing-remove-button:hover {
  color: #dc3c3c;
}

.signup-landing-calculator-empty {
  color: var(--signup-landing-text-3);
  font-size: 13px;
}

.signup-landing-add-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--signup-landing-border);
}

.signup-landing-add-field--select {
  flex: 1 1 auto;
}

.signup-landing-add-field--shares {
  width: 110px;
}

.signup-landing-add-button {
  padding: 8px 16px;
  border: 1px solid rgba(201, 151, 58, 0.3);
  border-radius: 6px;
  background: var(--signup-landing-gold-dim);
  color: var(--signup-landing-gold-light);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.signup-landing-form-error {
  margin: 6px 0 0;
  color: #fca5a5;
  font-size: 12px;
}

.signup-landing-bars-wrap {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--signup-landing-border);
}

.signup-landing-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 100px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--signup-landing-border);
}

.signup-landing-bar-column {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

.signup-landing-bar-value {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: rgba(34, 201, 138, 0.8);
}

.signup-landing-bar-month {
  position: absolute;
  bottom: -18px;
  color: var(--signup-landing-text-3);
  font-size: 9px;
}

.signup-landing-bar-caption {
  margin: 22px 0 0;
  color: var(--signup-landing-text-3);
  font-size: 12px;
}

.signup-landing-rules-grid {
  gap: 16px;
}

.signup-landing-rule-card {
  display: flex;
  gap: 16px;
}

.signup-landing-rule-card--featured {
  border-color: rgba(201, 151, 58, 0.25);
  background: rgba(201, 151, 58, 0.03);
}

.signup-landing-rule-card--wide {
  grid-column: 1 / -1;
}

.signup-landing-rule-number {
  flex-shrink: 0;
  font-size: 32px;
}

.signup-landing-rule-number--large {
  font-size: 48px;
}

.signup-landing-rule-tag {
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
}

.signup-landing-rule-tag--gold { color: var(--signup-landing-gold-light); }
.signup-landing-rule-tag--green { color: var(--signup-landing-green); }
.signup-landing-rule-tag--blue { color: var(--signup-landing-blue); }

.signup-landing-tbt-feature-list {
  margin-top: 24px;
}

.signup-landing-tbt-feature-item strong,
.signup-landing-tbt-step strong {
  color: var(--signup-landing-text);
  font-weight: 500;
}

.signup-landing-tbt-card {
  padding: 32px;
  text-align: center;
}

.signup-landing-tbt-logo {
  color: var(--signup-landing-gold-light);
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 500;
}

.signup-landing-tbt-logo-sub {
  margin-bottom: 24px;
  color: var(--signup-landing-text-3);
  font-size: 13px;
}

.signup-landing-tbt-steps {
  text-align: left;
}

.signup-landing-tbt-step {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--signup-landing-border);
  font-size: 13px;
}

.signup-landing-tbt-step:last-child {
  border-bottom: 0;
}

.signup-landing-tbt-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid rgba(201, 151, 58, 0.3);
  border-radius: 50%;
  background: var(--signup-landing-gold-dim);
  color: var(--signup-landing-gold-light);
  font-size: 12px;
  font-weight: 600;
}

.signup-landing-tbt-pricing-box {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--signup-landing-border);
}

.signup-landing-tbt-pricing-value {
  color: var(--signup-landing-text);
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
}

.signup-landing-tbt-pricing-value span {
  color: var(--signup-landing-text-2);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
}

.signup-landing-tbt-pricing-link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 24px;
  border: 1px solid rgba(201, 151, 58, 0.3);
  border-radius: 6px;
  background: var(--signup-landing-gold-dim);
  color: var(--signup-landing-gold-light);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.signup-landing-section--testimonials .mt-16 {
  margin-top: 0;
}

.signup-landing-price-card {
  margin-top: 48px;
  border-color: rgba(201, 151, 58, 0.3);
}

.signup-landing-price-top {
  padding: 36px;
  border-bottom: 1px solid rgba(201, 151, 58, 0.15);
  background: linear-gradient(135deg, rgba(201, 151, 58, 0.12), rgba(201, 151, 58, 0.06));
  text-align: center;
}

.signup-landing-price-product {
  margin-bottom: 10px;
  color: var(--signup-landing-gold);
  font-size: 13px;
  font-weight: 600;
}

.signup-landing-price-amount {
  color: var(--signup-landing-gold-light);
  font-family: 'Playfair Display', serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
}

.signup-landing-price-cycle {
  margin-top: 4px;
  color: var(--signup-landing-text-2);
  font-size: 15px;
}

.signup-landing-price-body {
  padding: 32px 36px;
}

.signup-landing-buy-button {
  width: 100%;
}

.signup-landing-guarantee {
  margin-top: 16px;
  line-height: 1.6;
}

.signup-landing-faq-list {
  margin-top: 48px;
}

.signup-landing-faq-item {
  border-bottom: 1px solid var(--signup-landing-border);
}

.signup-landing-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  border: 0;
  background: transparent;
  color: var(--signup-landing-text);
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.signup-landing-faq-toggle {
  color: var(--signup-landing-gold);
  font-size: 20px;
  transition: transform 0.25s ease;
}

.signup-landing-faq-toggle.is-open {
  transform: rotate(45deg);
}

.signup-landing-faq-answer p {
  margin: 0;
  padding: 0 0 18px;
}

.signup-landing-final-cta-subtitle {
  margin-bottom: 36px;
}

.signup-landing-footer {
  padding: 28px 5%;
  border-top: 1px solid var(--signup-landing-border);
  text-align: center;
  line-height: 1.7;
}

.signup-landing-footer p {
  margin: 0 0 8px;
}

.signup-landing-footer a {
  text-decoration: underline;
}


@media (max-width: 900px) {
  .signup-landing-hero-grid,
  .signup-landing-problem-grid,
  .signup-landing-tbt-grid,
  .signup-landing-proof-inner,
  .signup-landing-inside-grid,
  .signup-landing-rules-grid,
  .signup-landing-calculator-metrics {
    grid-template-columns: 1fr;
  }

  .signup-landing-section,
  .signup-landing-final-cta,
  .signup-landing-hero-section {
    padding: 56px 5%;
  }

  .signup-landing-hero-title {
    font-size: 38px;
  }

  .signup-landing-section-title {
    font-size: 32px;
  }

  .signup-landing-rule-card--wide {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .signup-landing-nav-inner,
  .signup-landing-add-strip {
    flex-direction: column;
    align-items: stretch;
  }

  .signup-landing-calculator {
    padding: 24px;
  }

  .signup-landing-calculator-table-wrap {
    overflow-x: auto;
  }

  .signup-landing-calculator-table {
    min-width: 640px;
  }
}

.cc-analyzer-card{
  /* Allow the analyzer card to use a bit more width on large screens while still centering */
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.cc-analyzer-header{
  margin-bottom: 16px;
}

.cc-analyzer-lead{
  margin-bottom: 0;
}

.cc-analyzer-shell{
  display: grid;
  gap: 24px;
}

.cc-region-divider{
  border: none;
  border-top: 1px solid rgba(148,163,184,.10);
  margin: -2px 0 2px;
}

.cc-top-grid,
.cc-context-grid{
  display: grid;
  gap: 14px;
}

.cc-top-grid{
  /* Use auto-fit so symbol + cost-basis can stack gracefully on narrower screens */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.cc-symbol-card,
.cc-prechart-section{
  display: grid;
  gap: 10px;
}

.cc-analyzer-note{
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(34,211,238,.20);
  border-radius: 12px;
  background: rgba(15,23,42,.35);
}

.cc-symbol-row{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.cc-range-stack,
.cc-symbol-meta-list,
.cc-section-heading{
  display: grid;
  gap: 8px;
}

.cc-range-stack{
  min-width: 0;
}

.cc-currency-input{
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-currency-input span{
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.cc-currency-input input[type="number"]{
  flex: 1;
}

.cc-symbol-input,
.cc-input-card input[type="number"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.35);
  color: var(--text);
}

.cc-symbol-input{
  width: min(220px, 100%);
  text-transform: uppercase;
}

.cc-symbol-badge{
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,.22);
  background: rgba(8,145,178,.12);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cc-input-hint,
.cc-symbol-meta,
.cc-scenario-lead{
  margin: 0;
}

.cc-meta-dl{
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0;
}

.cc-meta-dl dt{
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.cc-meta-dl dd{
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.cc-input-hint{
  font-size: 13px;
}

.cc-input-grid,
.cc-stat-grid,
.cc-summary-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cc-input-card,
.cc-stat-card,
.cc-summary-card{
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.30);
}

.cc-input-card{
  overflow: hidden;
}

.cc-input-label,
.cc-stat-label{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cc-input-card input[type="range"]{
  width: 100%;
}

.cc-input-card--cost-basis{
  align-content: start;
  min-width: 0;
}

.cc-context-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cc-stat-value{
  font-size: 22px;
  line-height: 1.2;
}

.cc-stat-card--highlight{
  border-left: 3px solid var(--brand);
  padding-left: 16px;
}

.cc-stat-card--highlight .cc-stat-value{
  font-size: 26px;
}

.cc-chart-shell{
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.35);
}

.cc-chart-shell--scenario{
  padding-top: 14px;
}

.cc-chart-header{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.cc-chart-header--scenario{
  margin-bottom: 10px;
}

.cc-chart-header h4,
.cc-summary-card h4,
.cc-scenario-section h4{
  margin: 0 0 6px;
  font-size: 16px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cc-section-heading h4{
  margin: 0;
  font-size: 15px;
}

.cc-chart-header h5{
  margin: 0 0 6px;
  font-size: 15px;
}

.cc-section-heading h5{
  margin: 0;
  font-size: 13px;
}

.cc-chart-header p,
.cc-summary-card p,
.cc-section-heading p{
  margin: 0;
  overflow-wrap: anywhere;
}

.cc-analyzer-header > div,
.cc-chart-header > div,
.cc-section-heading,
.cc-breakdown-row,
.cc-income-card,
.cc-scenario-section,
.cc-analyzer-cta{
  min-width: 0;
}

.cc-input-label,
.cc-stat-label,
.cc-input-hint,
.cc-stat-value,
.cc-income-selector-button,
.cc-caution-list li,
.cc-caution-empty{
  white-space: normal;
  overflow-wrap: anywhere;
}

.cc-summary-card-detail{
  margin-top: 8px !important;
}

.cc-chart-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}

.cc-chart-toggle{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cc-chart-toggle-button{
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.4);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.cc-chart-toggle-button.is-active{
  color: #fff;
  border-color: rgba(34,211,238,.45);
  background: rgba(34,211,238,.16);
}

.cc-legend-swatch{
  display: inline-block;
  width: 16px;
  height: 4px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}

.cc-legend-swatch--stock{ background: #60a5fa; }
.cc-legend-swatch--covered{ background: #22d3ee; }
.cc-legend-swatch--covered-preserve{ background: #4ade80; }
.cc-legend-swatch--wedge{ background: rgba(248,113,113,.75); }
.cc-legend-swatch--cross,
.cc-legend-swatch--cross-standard{ background: rgba(248,113,113,.75); }
.cc-legend-swatch--cross-preserve{ background: #4ade80; }
.cc-legend-swatch--yield-standard{ background: #fb923c; }
.cc-legend-swatch--yield-preserve{ background: #4ade80; }

.cc-chart-frame{
  overflow-x: auto;
}

.cc-chart-svg{
  width: 100%;
  height: auto;
  display: block;
}

.cc-axis,
.cc-grid-line,
.cc-cross-line,
.cc-scenario-line,
.cc-yield-line{
  fill: none;
  stroke-linecap: round;
}

.cc-axis{ stroke: rgba(148,163,184,.45); stroke-width: 1.4; }
.cc-grid-line{ stroke: rgba(148,163,184,.14); stroke-width: 1; }
.cc-cross-line{ stroke: rgba(248,113,113,.75); stroke-width: 1.5; stroke-dasharray: 5 5; }
.cc-cross-line--standard{ stroke: rgba(248,113,113,.75); }
.cc-cross-line--preserve{ stroke: #4ade80; stroke-width: 1.5; stroke-dasharray: 5 5; }
.cc-scenario-line{ stroke: rgba(250,204,21,.8); stroke-width: 1.5; stroke-dasharray: 4 4; }
.cc-yield-line{ stroke-width: 1.5; stroke-dasharray: 6 4; }
.cc-yield-line--standard{ stroke: #fb923c; }
.cc-yield-line--preserve{ stroke: #4ade80; }

.cc-axis-label,
.cc-cross-label,
.cc-yield-label{
  fill: var(--muted);
  font-size: 12px;
}

.cc-yield-label--standard{ fill: #fb923c; font-size: 11px; font-weight: 600; }
.cc-yield-label--preserve{ fill: #4ade80; font-size: 11px; font-weight: 600; }
.cc-cross-label--standard{ fill: rgba(248,113,113,.88); font-size: 11px; font-weight: 600; }
.cc-cross-label--preserve{ fill: #4ade80; font-size: 11px; font-weight: 600; }

.cc-line{
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cc-line--stock{ stroke: #60a5fa; }
.cc-line--covered{ stroke: #22d3ee; }
.cc-line--covered-preserve{ stroke: #4ade80; stroke-dasharray: 10 6; }
.cc-wedge-fill{ fill: rgba(248,113,113,.22); }

.cc-point{
  stroke: rgba(2,6,23,.8);
  stroke-width: 1.5;
}

.cc-point--stock{ fill: #60a5fa; }
.cc-point--covered{ fill: #22d3ee; }

.cc-scenario-section{
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.30);
}

.cc-scenario-section--caution{
  border-color: rgba(250,204,21,.28);
  background: rgba(120,53,15,.14);
}

.cc-scenario-chart-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.cc-scenario-table{
  width: 100%;
  border-collapse: collapse;
}

.cc-scenario-table th,
.cc-scenario-table td{
  padding: 10px 8px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  text-align: left;
}

.cc-scenario-table th{
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: normal;
  overflow-wrap: anywhere;
  border-bottom: 2px solid rgba(148,163,184,.20);
}

.cc-scenario-table tbody tr:nth-child(even){
  background: rgba(148,163,184,.04);
}

.cc-scenario-table tbody tr:hover{
  background: rgba(34,211,238,.06);
}

.cc-opportunity-cell{
  color: #fca5a5;
  font-weight: 700;
}

.cc-breakdown-stack{
  gap: 10px;
}

.cc-breakdown-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
}

.cc-breakdown-row span:last-child{
  grid-column: 1 / -1;
}

.cc-breakdown-row--total{
  padding-top: 8px;
  border-top: 1px solid rgba(148,163,184,.14);
}

.cc-dollar-example{
  padding: 16px;
  border: 1px solid rgba(34,211,238,.25);
  border-left: 4px solid var(--brand);
  border-radius: 14px;
  background: rgba(34,211,238,.04);
  margin-bottom: 14px;
}

.cc-dollar-example h4{
  margin: 0 0 6px;
}

.cc-dollar-example p{
  margin: 4px 0 0;
}

.cc-analyzer-alert,
.cc-income-section,
.cc-caution-details,
.cc-analyzer-cta{
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.30);
}

.cc-analyzer-alert--amber,
.cc-caution-details[open]{
  border-color: rgba(250,204,21,.28);
  background: rgba(120,53,15,.14);
}

.cc-income-section h4,
.cc-analyzer-cta h3{
  margin: 0 0 6px;
}

.cc-income-selector{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.cc-income-selector-button{
  appearance: none;
  border: 1px solid rgba(148,163,184,.2);
  background: rgba(15,23,42,.2);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.cc-income-selector-button:hover{
  border-color: rgba(34,211,238,.35);
  color: var(--text);
}

.cc-income-selector-button--active{
  border-color: rgba(34,211,238,.45);
  background: rgba(34,211,238,.12);
  color: var(--brand);
}

.cc-income-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.cc-income-card{
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.32);
}

.cc-income-card .cc-stat-value{
  color: var(--brand);
}

.cc-caution-details summary{
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-caution-list,
.cc-caution-empty{
  margin: 12px 0 0;
}

.cc-caution-list{
  padding-left: 18px;
}

.cc-caution-list li + li{
  margin-top: 8px;
}

.cc-section-spacer{
  width: 100%;
  height: 18px;
}

.cc-outcome{
  font-weight: 800;
}

.cc-outcome--positive{
  color: #86efac;
}

.cc-outcome--negative{
  color: #fca5a5;
}

.cc-disclosure-note{
  margin-top: 8px;
  text-align: center;
}

.cc-disclosure-note--compact{
  margin-top: 4px;
}

.cc-analyzer-cta{
  display: grid;
  gap: 12px;
  max-width: 1120px;
  margin: 18px auto 0;
}

@media (max-width: 980px) {
  .cc-top-grid,
  .cc-context-grid,
  .cc-input-grid,
  .cc-stat-grid,
  .cc-summary-grid,
  .cc-scenario-chart-grid,
  .cc-income-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-chart-header{
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .cc-input-grid,
  .cc-stat-grid,
  .cc-summary-grid,
  .cc-scenario-chart-grid,
  .cc-income-grid{
    grid-template-columns: 1fr;
  }

  .cc-top-grid,
  .cc-context-grid{
    grid-template-columns: 1fr;
  }

  .cc-meta-dl{
    grid-template-columns: 1fr;
  }
  .cc-symbol-row{
    align-items: stretch;
  }

  .cc-symbol-input{
    width: 100%;
  }

  /* Mobile-friendly stacked scenario cards instead of a wide scrollable table */
  .cc-scenario-table,
  .cc-scenario-table thead,
  .cc-scenario-table tbody,
  .cc-scenario-table tr,
  .cc-scenario-table th,
  .cc-scenario-table td{
    display: block;
  }

  .cc-scenario-table thead{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .cc-scenario-table tr{
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(15,23,42,.30);
  }

  .cc-scenario-table td{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-items: start;
    padding: 6px 0;
    border-bottom: 1px solid rgba(148,163,184,.08);
    text-align: left;
    overflow-wrap: anywhere;
  }

  .cc-scenario-table td:last-child{
    border-bottom: none;
  }

  .cc-scenario-table td::before{
    content: attr(data-label);
    font-weight: 700;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    margin-right: 0;
  }

  /* Tighten overall spacing in the analyzer shell on small screens */
  .cc-analyzer-shell{
    gap: 16px;
  }

  .cc-input-card,
  .cc-stat-card,
  .cc-summary-card,
  .cc-income-card{
    padding: 12px;
  }

  .cc-stat-card--highlight .cc-stat-value{
    font-size: 22px;
  }
}

/* ============================================================
   Page-scoped layout rules (extracted from inline <style> blocks)
   ============================================================ */

/* --- Covered Call: Opening / Opening Overview pages (#opening-page) --- */
#opening-page .cards{grid-template-columns:1fr !important}
#opening-page .card-inner{padding:20px}
#opening-page .media{align-items:flex-start;gap:12px}
#opening-page .icon{width:32px;height:32px;border-radius:8px;flex:0 0 auto}
#opening-page h3{margin:0 0 8px;font-size:18px}
#opening-page h4{margin:12px 0 6px;font-size:15px}
#opening-page .card p.muted{margin:4px 0 10px;font-size:15px;line-height:1.6}
#opening-page .card ul,
#opening-page .card ol{margin:8px 0 0 0;padding-left:16px;list-style-position:outside}
#opening-page .card li{margin:6px 0}
@media (max-width:700px){
  #opening-page .media{flex-direction:column;align-items:flex-start;gap:8px}
  #opening-page .icon{width:26px;height:26px}
  #opening-page .card-inner{padding:16px}
  #opening-page .card ul,
  #opening-page .card ol{margin:4px 0 0 0;padding-left:0;list-style-position:inside}
}

/* --- Covered Call: Closing page (#closing-page) --- */
#closing-page .cards{grid-template-columns:1fr !important}
#closing-page .card-inner{padding:20px}
#closing-page .media{align-items:flex-start;gap:12px}
#closing-page .icon{width:32px;height:32px;border-radius:8px;flex:0 0 auto}
#closing-page h3{margin:0 0 8px;font-size:18px}
#closing-page h4{margin:12px 0 6px;font-size:15px}
#closing-page .card p.muted{margin:4px 0 10px;font-size:15px;line-height:1.6}
#closing-page .card ul,
#closing-page .card ol{margin:8px 0 0 0;padding-left:16px;list-style-position:outside}
#closing-page .card li{margin:6px 0}
@media (max-width:700px){
  #closing-page .media{flex-direction:column;align-items:flex-start;gap:8px}
  #closing-page .icon{width:26px;height:26px}
  #closing-page .card-inner{padding:16px}
  #closing-page .card ul,
  #closing-page .card ol{margin:4px 0 0 0;padding-left:0;list-style-position:inside}
}

/* --- Covered Call: Rolling page (#rolling-page) --- */
#rolling-page .cards{grid-template-columns:1fr !important}
#rolling-page .card-inner{padding:20px}
#rolling-page .media{align-items:flex-start;gap:12px}
#rolling-page .icon{width:32px;height:32px;border-radius:8px;flex:0 0 auto}
#rolling-page h3{margin:0 0 8px;font-size:18px}
#rolling-page h4{margin:12px 0 6px;font-size:15px}
#rolling-page .card p.muted{margin:4px 0 10px;font-size:15px;line-height:1.6}
#rolling-page .card ul,
#rolling-page .card ol{margin:8px 0 0 0;padding-left:16px;list-style-position:outside}
#rolling-page .card li{margin:6px 0}
@media (max-width:700px){
  #rolling-page .media{flex-direction:column;align-items:flex-start;gap:8px}
  #rolling-page .icon{width:26px;height:26px}
  #rolling-page .card-inner{padding:16px}
  #rolling-page .card ul,
  #rolling-page .card ol{margin:4px 0 0 0;padding-left:0;list-style-position:inside}
}

/* --- Covered Call: Selection page (#selection-page) --- */
#selection-page .cards{grid-template-columns:1fr !important}
#selection-page .card-inner{padding:20px}
#selection-page .media{align-items:flex-start;gap:12px}
#selection-page .icon{width:32px;height:32px;border-radius:8px;flex:0 0 auto}
#selection-page h3{margin:0 0 8px;font-size:18px}
#selection-page h4{margin:12px 0 6px;font-size:15px}
#selection-page .card p.muted{margin:4px 0 10px;font-size:15px;line-height:1.6}
#selection-page .card ul,
#selection-page .card ol{margin:8px 0 0 0;padding-left:16px;list-style-position:outside}
#selection-page .card li{margin:6px 0}
@media (max-width:700px){
  #selection-page .media{flex-direction:column;align-items:flex-start;gap:8px}
  #selection-page .icon{width:26px;height:26px}
  #selection-page .card-inner{padding:16px}
  #selection-page .card ul,
  #selection-page .card ol{margin:4px 0 0 0;padding-left:0;list-style-position:inside}
}

/* --- Bull Put: Opening page (#bp-opening-page) --- */
#bp-opening-page .cards{grid-template-columns:1fr !important}
#bp-opening-page .card-inner{padding:20px}
#bp-opening-page .media{align-items:flex-start;gap:12px;display:flex}
#bp-opening-page .icon{width:32px;height:32px;border-radius:8px;flex:0 0 auto}
#bp-opening-page h3{margin:0 0 8px;font-size:18px}
#bp-opening-page h4{margin:12px 0 6px;font-size:15px}
#bp-opening-page .card p.muted{margin:4px 0 10px;font-size:15px;line-height:1.6}
#bp-opening-page .card ul,
#bp-opening-page .card ol{margin:8px 0 0 0;padding-left:16px;list-style-position:outside}
#bp-opening-page .card li{margin:6px 0}
@media (max-width:700px){
  #bp-opening-page .media{flex-direction:column;align-items:flex-start;gap:8px}
  #bp-opening-page .icon{width:26px;height:26px}
  #bp-opening-page .card-inner{padding:16px}
  #bp-opening-page .card ul,
  #bp-opening-page .card ol{margin:4px 0 0 0;padding-left:0;list-style-position:inside}
}

/* --- Bull Put: Strike Selection page (#bp-select-page) --- */
#bp-select-page .cards{grid-template-columns:1fr !important}
#bp-select-page .card-inner{padding:20px}
#bp-select-page .media{align-items:flex-start;gap:12px;display:flex}
#bp-select-page .icon{width:32px;height:32px;border-radius:8px;flex:0 0 auto}
#bp-select-page h3{margin:0 0 8px;font-size:18px}
#bp-select-page h4{margin:12px 0 6px;font-size:15px}
#bp-select-page .card p.muted{margin:4px 0 10px;font-size:15px;line-height:1.6}
#bp-select-page .card ul,
#bp-select-page .card ol{margin:8px 0 0 0;padding-left:16px;list-style-position:outside}
#bp-select-page .card li{margin:6px 0}
@media (max-width:700px){
  #bp-select-page .media{flex-direction:column;align-items:flex-start;gap:8px}
  #bp-select-page .icon{width:26px;height:26px}
  #bp-select-page .card-inner{padding:16px}
  #bp-select-page .card ul,
  #bp-select-page .card ol{margin:4px 0 0 0;padding-left:0;list-style-position:inside}
}

/* --- Bull Put: Ready Symbols / Symbols pages (shared card centering) --- */
#bp-cards { display: flex; justify-content: center; }
#bp-card  { width: 100%; max-width: 1000px; }
#bp-table-wrap { overflow: auto; margin: 0 auto; width: 100%; }
#bp-table-wrap table { width: 100%; }
@media (min-width: 1024px) {
  #bp-card { max-width: 1200px; }
}

/* --- Covered Call: Symbols page (#cc-cards / #cc-card) --- */
#cc-cards { display: flex; justify-content: center; }
#cc-card  { width: 100%; max-width: 1000px; }
#cc-table-wrap { overflow: auto; margin: 0 auto; width: 100%; }
#cc-table-wrap table { width: 100%; }
@media (min-width: 1024px) {
  #cc-card { max-width: 1200px; }
}

/* --- Calendar page --- */
.calendar-cards { display: flex; justify-content: center; flex-direction: column; gap: 24px; }
.calendar-card  { width: 100%; max-width: 1000px; margin: 0 auto; }
.table-wrap { overflow: auto; margin: 0 auto; width: 100%; }
.table-wrap table { width: 100%; }
@media (min-width: 1024px) {
  .calendar-card { max-width: 1200px; }
}

/* --- FAQ page (#faq-page) --- */
#faq-page .cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

/* --- Movers page (#mv-cards / .movers-pre) --- */
#mv-cards { display: flex; justify-content: center; }
#mv-card  { width: 100%; max-width: 1000px; }
.movers-pre {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
}
@media (min-width: 1024px) {
  #mv-card { max-width: 1200px; }
}

/* --- Whale Trades page (#wh-cards) --- */
#wh-cards { display: flex; justify-content: center; }
#wh-card  { width: 100%; max-width: 1000px; }
@media (min-width: 1024px) {
  #wh-card { max-width: 1200px; }
}

/* --- Preserve Equities page (#pe-cards) --- */
#pe-cards { display: flex; justify-content: center; }
#pe-card  { width: 100%; max-width: 1000px; }
@media (min-width: 1024px) {
  #pe-card { max-width: 1200px; }
}

/* --- Cash Balance Reconciliation page (#cbr-cards) --- */
#cbr-cards { display: flex; justify-content: center; }
#cbr-card  { width: 100%; max-width: 1000px; }
@media (min-width: 1024px) {
  #cbr-card { max-width: 1200px; }
}

/* --- Stats Instruments page (#si-cards) --- */
#si-cards { display: flex; justify-content: center; }
#si-card  { width: 100%; max-width: 1000px; }
@media (min-width: 1024px) {
  #si-card { max-width: 1200px; }
}

/* --- Safety page (#safety-page) --- */
#safety-page .cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
#safety-page h2 { margin-top: 20px; margin-bottom: 8px; font-size: 20px; }
#safety-page h3 { margin-top: 16px; margin-bottom: 6px; font-size: 17px; }
#safety-page p.muted { margin: 6px 0 10px; line-height: 1.6; }
#safety-page ul.muted { margin: 8px 0 10px 18px; }
#safety-page ul.muted li { margin-bottom: 6px; }
#safety-page blockquote {
  margin: 10px 0;
  padding-left: 12px;
  border-left: 3px solid rgba(148,163,184,.6);
  color: var(--muted);
  font-style: italic;
}
#safety-page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
}

/* --- Advisor Compliance page (#advisor-compliance-page) --- */
#advisor-compliance-page .cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

/* --- Roll Lookup tool --- */
.roll-lookup-form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.roll-lookup-form-group{
  margin-bottom:0;
}
.roll-lookup-form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:18px;
}
.roll-lookup-form-summary{
  margin:0;
}
.roll-candidate--production-ready td{
  background:rgba(16,185,129,.10);
}
.roll-candidate-ready-badge{
  margin-top:6px;
}