/* ==========================================================================
   Best Stock To Buy Now - stylesheet
   Design language inspired by affirm.com: cream base, bold indigo/periwinkle
   accent, soft coral highlight, big rounded pill shapes, generous whitespace,
   confident rounded type.
   ========================================================================== */

/* Dark-only palette. This site previously supported a light theme too (an
   OS-preference media query plus a manual toggle, see git history) -
   removed by request to simplify to a single dark theme. These values are
   exactly what the old dark-mode override used to set; nothing about the
   dark appearance changed, only the light alternative and the machinery to
   switch to it are gone. */
:root{
  --cream:        #121220;
  --cream-2:      #1A1A2A;
  --ink:          #F2F0EA;
  --ink-soft:     #ABABBF;
  --indigo:       #8B7FFF;
  --indigo-dark:  #C9C2FF;
  --indigo-soft:  rgba(139,127,255,0.18);
  --coral:        #FF8A75;
  --coral-soft:   rgba(255,107,87,0.18);
  --mint:         #2fd678;
  --mint-soft:    rgba(47,214,120,0.16);
  --gold:         #FFC257;
  --gold-soft:    rgba(255,194,87,0.16);
  --white:        #1D1D2E;
  --pos-text:     #2fd678;
  --neg-text:     #FF8A75;
  --warn-text:    #FFC257;
  --gold-hover:   rgba(255,194,87,0.28);
  --line:         rgba(255,255,255,0.10);
  /* The de-facto standard shades already used 10-60+ times each across the
     dark "band" sections (screener tools, Mean Reversion, Crash Indicator)
     before this pass - hardcoded identically everywhere rather than
     referencing a variable. Promoted here with their existing values
     unchanged (a pure consolidation, not a new color choice) so future
     bands reference one token instead of retyping the same hex. Distinct
     from --mint/--coral/--gold above: those are the brighter, more
     saturated "brand accent" tier (badges, small UI chrome); these are the
     slightly softer tier used for checklist dots/text and band gradients
     against a dark surface. */
  --pos-strong:   #8FD98A;
  --neg-strong:   #FF6B57;
  --gold-bright:  #FFD874;
  --band-mid:     #17172A;
  --band-dark:    #0B0B14;
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:    0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg:    0 24px 60px rgba(0,0,0,0.55);
  --radius-lg:    28px;
  --radius-md:    20px;
  --radius-sm:    14px;
  --radius-pill:  999px;
  --maxw:         1200px;
  --header-bg:    rgba(18,18,32,0.85);
  /* A fixed dark SURFACE color (not text) for decorative panels (.method,
     etc.) that were always meant to look like a dark card regardless of
     site theme - kept as its own token rather than reusing --cream-2/--ink,
     which are different values and serve different roles. */
  --fixed-dark:   #1B1B2F;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ background: var(--cream); }

/* Guarantees the `hidden` attribute always wins, even on elements whose
   class also sets an explicit `display` (e.g. display:flex for a banner or
   stats row) - without this, an author rule at equal specificity can beat
   the UA [hidden] rule and the element stays visible despite `el.hidden =
   true` in JS. Found via .takeaway-banner and .dalio-stats both doing this. */
[hidden]{ display:none !important; }

.skip-link{
  position:absolute; top:-100px; left:12px; z-index:1000;
  background: var(--ink); color:var(--white); padding:12px 20px; border-radius: var(--radius-sm);
  font-weight:700; font-size:14px; transition: top .15s ease;
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline: 3px solid var(--indigo); outline-offset: 2px; }
main:focus-visible{ outline: none; }
html{ scroll-behavior: smooth; }

/* Anchor-jump offset: .site-header is position:sticky at 78px tall, so
   without this every #anchor jump (plain <a href="#id">, a cross-page
   <a href="page.html#id">, and every scrollIntoView() call across the JS
   files) lands the target flush at the viewport top, hidden under the
   header. scroll-margin-top applies to all of those uniformly - one fix,
   not a per-link patch. index.html and screener.html also stack a sticky
   subnav (up to 52px) below the header once a visitor scrolls past the
   hero, so their targets need the larger offset; :has() is well-supported
   at this point and avoids a third stylesheet just for this. */
[id]{ scroll-margin-top: 90px; }
body:has(#subnav) [id]{ scroll-margin-top: 142px; }
@media (max-width: 720px){
  /* .subnav itself goes display:none at this width (see its own rule
     below), so it no longer reserves any space - match that here too. */
  body:has(#subnav) [id]{ scroll-margin-top: 90px; }}
body{
  margin:0;
  font-family: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  transition: background-color .2s ease, color .2s ease;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{ font-family:'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; margin:0; line-height:1.08; letter-spacing:-0.025em; }
h1{ font-weight:700; letter-spacing:-0.035em; text-wrap:balance; }
h2{ font-weight:700; letter-spacing:-0.03em; text-wrap:balance; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--indigo-dark);
  background: var(--indigo-soft);
  padding:7px 14px 7px 10px;
  border-radius: var(--radius-pill);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--coral); display:inline-block; }

.pill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px;
  border-radius: var(--radius-pill);
  font-weight:700; font-size:16px;
  border:2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.pill-btn.primary{ background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm); }
.pill-btn.primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--indigo-dark); }
.pill-btn.ghost{ background:transparent; color:var(--ink); border-color: var(--line); }
.pill-btn.ghost:hover{ border-color: var(--ink); }
.pill-btn.small{ padding:10px 18px; font-size:14px; }

/* ---------------- Header ---------------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:78px; }

/* Appears once a visitor scrolls past the hero (js/subnav.js toggles
   .visible) - a long page (14+ sections) benefits from a way to jump
   around instead of only scrolling. */
.subnav{
  position: sticky; top:78px; z-index:49;
  background: var(--header-bg); backdrop-filter: blur(10px); border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden; opacity:0; transition: max-height .25s ease, opacity .2s ease;
}
.subnav.visible{ max-height:52px; opacity:1; }
.subnav-inner{ display:flex; align-items:center; gap:18px; }
.subnav-wrap{
  display:flex; gap:26px; height:44px; align-items:center; overflow-x:auto; flex:1 1 auto; min-width:0;
}
.subnav-wrap::-webkit-scrollbar{ height:5px; }
.subnav-wrap::-webkit-scrollbar-track{ background:transparent; }
.subnav-wrap::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.subnav-wrap::-webkit-scrollbar-thumb:hover{ background: var(--ink-soft); }
.subnav a{ font-size:13.5px; font-weight:600; color: var(--ink-soft); white-space:nowrap; }
.subnav a:hover{ color: var(--indigo); }

/* Site-wide "jump to a stock" search - unifies the per-tool ticker pickers
   (js/global-search.js) into one box reachable from anywhere on the page
   via the sticky subnav, opening the same rich detail modal any tool's row
   click does. */
.subnav-search{ position:relative; flex:0 0 auto; display:flex; align-items:center; }
.subnav-search-icon{ position:absolute; left:12px; width:14px; height:14px; color: var(--ink-soft); pointer-events:none; }
.subnav-search input{
  width:160px; padding:8px 12px 8px 34px; border-radius: var(--radius-pill); border:1px solid var(--line);
  background: var(--cream-2); font-size:13px; font-family:inherit; color: var(--ink);
  transition: width .2s ease, border-color .15s ease, background .15s ease;
}
.subnav-search input::placeholder{ color: var(--ink-soft); }
.subnav-search input:focus{ outline:none; border-color: var(--indigo); background: var(--white); width:220px; }
.subnav-search-results{
  position:absolute; top:calc(100% + 8px); right:0; width:280px; z-index:60;
  background: var(--white); border:1px solid var(--line); border-radius:14px; padding:6px;
  box-shadow: var(--shadow-lg); max-height:320px; overflow-y:auto;
}
.subnav-search-results::-webkit-scrollbar{ width:7px; }
.subnav-search-results::-webkit-scrollbar-track{ background:transparent; }
.subnav-search-results::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.subnav-search-results::-webkit-scrollbar-thumb:hover{ background: var(--ink-soft); }
.subnav-search-result{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:9px; cursor:pointer; font-size:13.5px;
  color:inherit; text-decoration:none;                      /* each result is a link to the stock's own page */
}
.subnav-search-result:hover, .subnav-search-result:focus-visible{ background: var(--cream-2); outline:none; }
/* a ticker that is a real link (stockLinkHtml, js/common.js): it looks like the text it replaced and underlines on hover. It takes colour and font from
   whatever it sits in (and from a button class such as .sd-open when it replaces a button). */
.stock-link{ color:inherit; text-decoration:none; }
.stock-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.stock-link:focus-visible{ outline:2px solid #8B7FFF; outline-offset:3px; border-radius:4px; }
.subnav-search-result .t{ font-weight:800; color: var(--ink); flex:none; }
.subnav-search-result .n{ color: var(--ink-soft); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:10px; }
.subnav-search-empty{ padding:12px; font-size:12.5px; color: var(--ink-soft); }

@media (max-width: 720px){
  .subnav{ display:none; }}
.logo{ display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:700; font-size:20px; }
.logo .mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  background: linear-gradient(135deg, var(--indigo), var(--coral));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; font-weight:800; font-family:'Instrument Sans', sans-serif;
  transform: rotate(-6deg);
}
.logo .mark svg{ width:17px; height:17px; }
.logo .accent{ color: var(--indigo); }
.logo--icon:hover .mark{ transform: rotate(-6deg) scale(1.06); }
.logo .mark{ transition: transform .15s ease; }
nav.main-nav{ display:flex; align-items:center; gap:clamp(16px, 2.2vw, 32px); }
nav.main-nav a{ font-weight:600; font-size:15px; color: var(--ink-soft); transition: color .15s ease; white-space:nowrap; }
nav.main-nav a:hover{ color: var(--ink); }
.header-cta{ display:flex; align-items:center; gap:14px; flex:none; }
.nav-toggle{ display:none; }
/* Five short, job-based labels (Picks / Screener / Market check / Dividends /
   Learn) next to one header button fit comfortably from the 980px hamburger
   breakpoint upward; the fluid gap above is all the tightening needed. (There
   used to be six longer labels plus a second "See the picks" button, which
   needed font and spacing overrides here and dropped that button below
   1140px.) */

/* Persistent, sitewide "where did my watchlist go" link - the watchlist
   tool itself only lives on screener.html, but a star can be added from
   almost any page (portfolio cards, screener tables, near-low, margin of
   safety...), so this needs to be reachable from everywhere a star can be
   clicked, not just remembered. Hidden by default (no "0" badge for a
   first-time visitor who hasn't starred anything yet) - js/watchlist.js
   un-hides it and keeps the count live. */
.header-watchlist-link{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius: var(--radius-pill);
  background: var(--gold-soft); color: var(--ink);
  font-weight:700; font-size:13.5px; border:1px solid rgba(255,194,87,0.35);
  transition: background .15s ease, transform .15s ease;
}
.header-watchlist-link:hover{ background: var(--gold-hover); transform: translateY(-1px); }
.header-watchlist-link--mobile{ display:flex; align-items:center; gap:8px; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  padding: 72px 0 40px;
}
.hero .blob{
  position:absolute; z-index:0; filter: blur(0px); opacity:0.9;
}
.hero .blob-1{ top:-120px; right:-140px; width:480px; height:480px; background: var(--indigo-soft); border-radius:44% 56% 65% 35% / 45% 45% 55% 55%; }
.hero .blob-2{ bottom:-160px; left:-120px; width:360px; height:360px; background: var(--coral-soft); border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; }
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap:56px; align-items:center;
}
.hero h1{ font-size: clamp(36px, 5vw, 58px); margin:18px 0 20px; }
.hero h1 .hl{ color: var(--indigo); }
.hero p.lede{ font-size:19px; color: var(--ink-soft); max-width:520px; margin-bottom:28px; }
.hero-cta-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:22px; }
.hero-note{ font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.hero-note svg{ flex:none; }

.hero-visual{
  position:relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding:22px;
  transform: rotate(2deg);
}
.hero-visual .card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.hero-visual .card-head{ gap:12px; }
.hero-visual .card-head .tag{
  background:var(--mint-soft); color:var(--pos-text); font-weight:700; font-size:12px; padding:6px 12px;
  border-radius:var(--radius-pill); white-space:nowrap; flex:none;
}
.card-live-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; color: var(--indigo-dark); margin-bottom:6px;
}
.card-live-badge::before{
  content:""; width:7px; height:7px; border-radius:50%; background: var(--coral);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.hero-visual .total{ font-family:'Instrument Sans', sans-serif; font-size:30px; font-weight:600; }
.hero-visual .sub{ font-size:13px; color:var(--ink-soft); margin-top:2px;}
.mini-row-scroll{
  max-height:280px; overflow-y:auto; padding-right:6px; margin-right:-6px;
  scroll-behavior:smooth; scroll-snap-type:y proximity;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
}
.mini-row-scroll::-webkit-scrollbar{ width:5px; }
.mini-row-scroll::-webkit-scrollbar-track{ background:transparent; }
.mini-row-scroll::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.mini-row-scroll:hover::-webkit-scrollbar-thumb{ background: var(--indigo-soft); }

.mini-row{
  display:flex; align-items:center; justify-content:space-between; padding:11px 4px;
  border-top:1px solid var(--line); border-radius:10px; scroll-snap-align:start; cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.mini-row:first-of-type{ border-top:none; }
.mini-row:hover, .mini-row:focus-visible{ background: var(--cream-2); transform: translateX(2px); outline:none; }
.mini-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.mini-left > div:last-child{ min-width:0; }
.mini-rank{ font-size:11px; font-weight:700; color: var(--ink-soft); width:14px; flex:none; font-variant-numeric: tabular-nums; }
.mini-badge{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:#fff; flex:none; }
.mini-name{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-bargain-tag{
  display:inline-block; margin-left:7px; font-size:11px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; color: var(--coral); background: var(--coral-soft);
  padding:2px 6px; border-radius: var(--radius-pill); vertical-align:middle; white-space:nowrap;
}
.mini-sector{ font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-right{ text-align:right; flex:none; padding-left:8px; }
.mini-change{ font-size:12px; font-weight:700; }
.mini-change-lbl{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); margin-top:1px; }
.mini-change.up{ color:var(--pos-text); }
.mini-change.down{ color:var(--neg-text); }

/* trust strip */
.trust-strip{
  position:relative; z-index:1; padding:28px 0; border-top:1px solid var(--line);
  background: var(--cream-2);
}
.trust-strip .wrap{
  display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap;
  text-align:center;
}
.trust-strip .label{
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft);
  max-width:100%;
}
.trust-logos{ display:flex; gap:0; align-items:center; flex-wrap:wrap; justify-content:center; }
.trust-logos span{
  font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:14.5px; color: var(--ink-soft);
  letter-spacing:0.01em; padding:0 16px; position:relative;
}
.trust-logos span:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:3px; height:3px; border-radius:50%; background: var(--line);
}

@media (max-width: 620px){
  .trust-strip .wrap{ flex-direction:column; gap:14px; }}

/* ---------------- Section shell ---------------- */
section{ padding: 84px 0; }

/* ---------------- Static content pages (About, Contact, legal, etc.) ---------------- */
.static-page{ padding:56px 0 90px; }
.static-page .wrap{ max-width:740px; }
.static-page h1{ font-size:clamp(30px,4vw,44px); margin:18px 0 16px; }
.static-page .lede{ font-size:17px; color:var(--ink-soft); max-width:640px; margin-bottom:10px; }
.static-page .updated-note{ font-size:12.5px; color:var(--ink-soft); margin-bottom:44px; }
.static-page .static-section{ margin-bottom:38px; }
.static-page .static-section h2{ font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; margin:0 0 12px; }
.static-page .static-section h3{ font-size:15.5px; font-weight:700; margin:22px 0 8px; color:var(--ink); }
.static-page .static-section p{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin:0 0 14px; }
.static-page .static-section ul{ margin:0 0 14px; padding-left:22px; list-style:disc; }
.static-page .static-section li{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin-bottom:7px; }
.static-page .static-section a{ color:var(--indigo-dark); font-weight:600; }
.static-page .static-section a:hover{ text-decoration:underline; }
.static-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:22px 24px; margin-bottom:16px;
}
.static-card h3{ margin-top:0 !important; }
.static-nav{
  display:flex; gap:10px 20px; flex-wrap:wrap; margin-top:52px; padding-top:26px;
  border-top:1px solid var(--line);
}
.static-nav a{ font-size:13.5px; font-weight:700; color:var(--ink-soft); }
.static-nav a:hover{ color:var(--indigo-dark); }
.static-page .data-source-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:14px; }
.static-page .data-source-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; }
.static-page .data-source-card :is(h3, h4){ font-size:14px; margin:0 0 4px; font-family:'Instrument Sans', sans-serif; }
.static-page .data-source-card p{ font-size:12.5px; margin:0; line-height:1.55; }
.section-head{ max-width:680px; margin-bottom:44px; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 42px); margin-bottom:14px; }
.section-head p{ font-size:17px; color:var(--ink-soft); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------------- Macro & Sentiment ---------------- */
.macro-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:22px; }
.macro-card{
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding:28px; box-shadow: var(--shadow-sm);
}
.macro-card h3{ font-size:19px; margin-bottom:6px; }
.macro-card-sub{ font-size:13px; color: var(--ink-soft); margin-bottom:20px; }

.fomc-list{ display:flex; flex-direction:column; gap:2px; }
.fomc-row{ padding:12px 0; border-top:1px solid var(--line); }
.fomc-row:first-child{ border-top:none; }
.fomc-row-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fomc-date{ font-weight:700; font-size:14.5px; }
.earnings-date-sep{ color: var(--ink-soft); font-weight:400; }
.fomc-meta{ display:flex; align-items:center; gap:8px; }
.fomc-days{ font-size:12.5px; color: var(--ink-soft); }

/* A real toggle now, not just a hover tooltip - opens the Fed's own current
   rate-path numbers (data/fomc-meetings.json's sepProjections), not just a
   description of what "projections" means. */
.fomc-sep{
  font-size:11.5px; font-weight:700; color: var(--indigo-dark); background: var(--indigo-soft);
  padding:4px 10px; border-radius: var(--radius-pill); white-space:nowrap; flex:none;
}
/* White text on --indigo only hits 3.19:1 (same real finding as the
   screener's status-filter buttons) - the site's own dark surface color
   clears 5.19:1 against this background. Not caught by a static a11y
   audit since these are hover/expanded-only states, but the same bug. */
.fomc-sep:hover{ background: var(--indigo); color:#1D1D2E; }
.fomc-sep[aria-expanded="true"]{ background: var(--indigo); color:#1D1D2E; }

.fomc-sep-wrap{ margin-top:14px; }
.fomc-sep-panel{ background: var(--cream); border-radius: var(--radius-sm); padding:16px; }
.fomc-sep-intro{ font-size:12.5px; color: var(--ink-soft); line-height:1.55; margin:0 0 14px; }
.fomc-sep-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.fomc-sep-stat{
  display:flex; flex-direction:column; gap:2px; text-align:center; min-width:70px;
  background: var(--white); border:1px solid var(--line); border-radius:10px; padding:9px 12px;
}
.fomc-sep-stat--lr{ background: var(--indigo-soft); border-color:transparent; }
.fomc-sep-stat-lbl{ font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color: var(--ink-soft); }
.fomc-sep-stat-val{ font-family:'Instrument Sans', sans-serif; font-size:17px; font-weight:600; color: var(--ink); }
.fomc-sep-link{ font-size:12px; font-weight:600; color: var(--indigo-dark); }
.fomc-sep-empty{ font-size:12.5px; color: var(--ink-soft); margin:0; }

/* 0.6 pushed this row's already-muted text (var(--ink-soft) at full
   strength is already the softer of the two ink colors) below WCAG AA's
   4.5:1 - e.g. the "vs Prior Period" SEP toggle pill dropped to 3.81:1.
   0.8 keeps the same "this one's in the past" visual cue with contrast
   to spare. */
.fomc-row-muted{ opacity:0.8; }
.fomc-row-muted .fomc-date{ font-weight:600; }
/* Small headings so a past meeting never reads as just another upcoming one. */
.fomc-group-label{
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft);
}
.fomc-group-label + .fomc-row{ border-top:none; padding-top:6px; }
.fomc-group-label--next{ margin-top:10px; padding-top:14px; border-top:1px dashed var(--line); }

/* The last meeting: a card of its own, so a decision already made never reads as another upcoming date. */
.fomc-last{ margin:10px 0 2px; padding:16px 18px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); border:1px solid var(--line); }
.fomc-last-top{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; }
.fomc-badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 8px; border-radius:999px;
  background: var(--mint-soft); color: var(--pos-text); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.fomc-badge svg{ width:12px; height:12px; }
.fomc-last-date{ font-size:13.5px; font-weight:600; color: var(--ink-soft); }
.fomc-last .fomc-sep{ margin-top:14px; }
.fomc-last-outcome{ margin:12px 0 0; font-size:18px; font-weight:700; letter-spacing:-0.015em; line-height:1.3; color: var(--ink); }
.fomc-last-rate{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:10px; font-variant-numeric: tabular-nums; }
.fomc-rate-from{ font-size:14px; color: var(--ink-soft); }
.fomc-rate-arrow{ color: var(--ink-soft); }
.fomc-rate-to{ font-size:14px; font-weight:800; color: var(--ink); }
.fomc-delta{ padding:3px 9px; border-radius:999px; background: var(--indigo-soft); color: var(--ink); font-size:12px; font-weight:700; }
.fomc-last .fomc-sep-wrap{ margin-top:14px; }

.fomc-more .fomc-row:first-child{ border-top:1px solid var(--line); }
.fomc-toggle{
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
  margin-top:14px; padding:10px; border-radius: var(--radius-sm); border:1px dashed var(--line);
  background:none; color: var(--indigo-dark); font-weight:700; font-size:13px;
  transition: background .15s ease, border-color .15s ease;
}
.fomc-toggle:hover{ background: var(--indigo-soft); border-color: var(--indigo); }
.fomc-toggle-arrow{ transition: transform .2s ease; display:inline-block; }
.fomc-toggle.open .fomc-toggle-arrow{ transform: rotate(180deg); }

.gauge-wrap{ position:relative; text-align:center; padding-top:6px; }
.gauge-svg{ width:100%; max-width:280px; }
.gauge-score{ font-family:'Instrument Sans', sans-serif; font-size:38px; font-weight:600; margin-top:-16px; }
.gauge-label{ font-size:14px; font-weight:700; color: var(--indigo-dark); margin-bottom:4px; }
.gauge-methodology{ font-size:11.5px; color: var(--ink-soft); line-height:1.5; margin-top:12px; }
.gauge-spark-wrap{ margin-top:4px; }
.gauge-spark-wrap .gauge-sparkline{ margin-bottom:0; }
/* The sparkline doubles as the button that opens the 3-month chart. */
.gauge-spark-btn{
  display:block; width:100%; padding:8px 10px 6px; margin:0;
  background:none; border:1px solid transparent; border-radius: var(--radius-sm);
  color:inherit; font:inherit; text-align:center; cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.gauge-spark-btn:hover{ background: var(--indigo-soft); border-color: var(--line); }
.gauge-spark-btn:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }
.gauge-spark-cta{ display:block; margin-top:4px; font-size:11.5px; font-weight:700; color: var(--indigo-dark); }
.gauge-spark-btn:hover .gauge-spark-cta{ text-decoration:underline; }
.gauge-trend{ font-size:12.5px; font-weight:600; color: var(--ink-soft); text-align:center; margin:4px 0 14px; }
.gauge-crypto-note{ font-size:11.5px; color: var(--ink-soft); line-height:1.5; margin:2px 0 10px; padding-top:10px; border-top:1px dashed var(--line); }
.gauge-crash-link{ display:block; font-size:12.5px; font-weight:700; color: var(--indigo-dark); margin-top:12px; text-align:center; }
.gauge-crash-link:hover{ text-decoration:underline; }

.crypto-season-mini{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); cursor:help; }
.crypto-season-mini-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color: var(--ink-soft);
  margin-bottom:7px;
}
#cryptoSeasonLabel{ font-size:11px; color: var(--indigo-dark); font-weight:800; text-transform:none; letter-spacing:0; }
.crypto-season-track{
  position:relative; height:6px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #F7931A 0%, var(--cream-2) 50%, #8B5CF6 100%);
}
.crypto-season-marker{
  position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  background: var(--white); border:2px solid var(--ink); transform: translate(-50%, -50%);
  transition: left .5s ease;
}

@media (max-width: 820px){
  .macro-grid{ grid-template-columns:minmax(0,1fr); }}

/* ---------------- Global Macro Dashboard ---------------- */
.indicator-carousel{ position:relative; }
.indicator-grid{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:none; scroll-behavior:smooth;
  padding:4px 4px 14px; margin:-4px -4px -10px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}
/* Dedicated clearance for the floating prev/next arrows (44px wide,
   reaching 22px into the track). scroll-snap-type is off on this track
   specifically because snap-align:start on the first card fights any
   inset here - the browser auto-scrolls on load to cancel out padding
   or margin placed before a snap:start item, which silently ate every
   version of this clearance fix until snap was turned off. */
.indicator-grid > .indicator-card:first-child{ margin-left:30px; }
.indicator-grid > .indicator-card:last-child{ margin-right:30px; }
.indicator-grid::-webkit-scrollbar{ height:5px; }
.indicator-grid::-webkit-scrollbar-track{ background:transparent; }
.indicator-grid::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.indicator-card{
  flex: 0 0 260px; scroll-snap-align:start;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-md);
  padding:22px; box-shadow: var(--shadow-sm);
}
.indicator-category{ font-size:11px; font-weight:700; color: var(--indigo); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.indicator-name{ font-size:12.5px; font-weight:700; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; margin-bottom:10px; min-height:32px; }
.indicator-group-start{ margin-left:18px; position:relative; }
.indicator-group-start::before{ content:""; position:absolute; left:-18px; top:4px; bottom:4px; width:1px; background: var(--line); }
.indicator-value-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.indicator-value{ font-family:'Instrument Sans', sans-serif; font-size:28px; font-weight:600; }
.indicator-unit{ font-size:12px; color: var(--ink-soft); }
.indicator-change{ font-size:12.5px; font-weight:700; margin-bottom:12px; }
.indicator-change.pos{ color:var(--pos-text); }
.indicator-change.neg{ color:var(--neg-text); }
.indicator-sparkline{ width:100%; height:36px; display:block; margin-bottom:10px; }
/* Clamped so one indicator with an unusually long description (e.g. the
   10Y-3M spread's) doesn't make its card far taller than the rest of the
   row - the prev/next arrows are vertically centered on the whole
   carousel's height, so an outlier-tall card used to push real text right
   under the arrow instead of leaving it over blank space like every other
   card. */
.indicator-desc{
  font-size:11.5px; color: var(--ink-soft); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.indicator-date{ font-size:11px; color: var(--ink-soft); margin-top:8px; }

@media (max-width: 620px){
  .indicator-carousel .slider-arrow{ display:none; }
  .indicator-card{ flex-basis:78%; }}
.fred-attribution{
  margin-top:20px; font-size:12.5px; color: var(--ink-soft); text-align:center;
}
.fred-attribution a{ color: var(--indigo); font-weight:600; text-decoration:underline; }

/* ---------------- Portfolio (top picks) ---------------- */
.portfolio{ background: var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.takeaway-banner{
  display:flex; align-items:flex-start; gap:14px;
  background: linear-gradient(135deg, var(--indigo-soft) 0%, var(--gold-soft) 100%);
  border:1px solid rgba(75,63,255,0.15); border-radius: var(--radius-md);
  padding:18px 22px; margin-bottom:24px;
}
.takeaway-icon{ width:22px; height:22px; flex:none; color: var(--gold); }
.takeaway-banner p{ margin:0; font-size:15px; font-weight:600; color: var(--ink); line-height:1.5; }
.takeaway-banner .takeaway-chip{
  display:inline-flex; align-items:center; font-weight:800; color: var(--indigo-dark);
  background: var(--white); padding:2px 8px; border-radius: var(--radius-pill);
  margin:0 2px; cursor:pointer; border:none; font-size:13.5px;
}
.takeaway-banner .takeaway-chip:hover{ background: var(--indigo-soft); }

.portfolio-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px 24px; flex-wrap:wrap;
  margin-bottom:26px;
}
/* "Clears" + one segmented selector (Any / Buffett / Lynch / Both) - was four long
   pills ("Clears Buffett filter" ...) plus three more pill-shaped controls beside them. */
.pf-filter{ display:flex; align-items:center; gap:10px; }
.pf-filter-label{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); }
.chip-row{
  display:inline-flex; gap:2px; padding:3px;
  border:1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--cream);
}
.chip{
  padding:6px 15px; border-radius: var(--radius-pill); font-weight:700; font-size:13px;
  border:0; background:transparent; color:var(--ink-soft);
  transition: background .15s ease, color .15s ease;
}
.chip:hover{ color: var(--ink); }
.chip.active{ background: var(--ink); color:var(--white); }
.chip:focus-visible{ outline:2px solid var(--indigo); outline-offset:2px; }

.toolbar-badges{ display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; }

/* The margin-of-safety switch: no pill border, just the switch and a short label. */
.mos-toggle{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.mos-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.mos-toggle-track{
  position:relative; flex:none; width:34px; height:20px; border-radius:999px;
  background: var(--line); transition: background .15s ease;
}
.mos-toggle-thumb{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition: transform .15s ease;
}
.mos-toggle input:checked + .mos-toggle-track{ background: var(--indigo); }
.mos-toggle input:checked + .mos-toggle-track .mos-toggle-thumb{ transform:translateX(14px); }
.mos-toggle input:focus-visible + .mos-toggle-track{ outline:2px solid var(--indigo); outline-offset:2px; }
.mos-toggle-label{ font-size:13px; font-weight:600; color: var(--ink-soft); }
/* Yield and Correlation as plain inline stats (hover for the explanation) instead of
   two more coloured pills. */
.pf-stats{ display:flex; align-items:center; gap:18px; padding-left:22px; border-left:1px solid var(--line); }
.pf-stat{ display:flex; align-items:baseline; gap:6px; font-size:13px; cursor:help; }
.pf-stat-lbl{ font-weight:600; color: var(--ink-soft); }
.pf-stat-val{ font-weight:800; font-family:'Instrument Sans', sans-serif; font-size:16px; color: var(--pos-text); }
.pf-stat--dalio .pf-stat-val{ color: var(--indigo-dark); }
/* This stat is the right-most thing on the toolbar, so a bubble centred on it would stick out past the
   page (and invisible tooltips still count toward scrollable width). Anchor it to the stat's right edge. */
.pf-stat--dalio .hover-tip-bubble{ left:auto; right:0; transform:translateY(6px) scale(.96); transform-origin:bottom right; }
.pf-stat--dalio:hover .hover-tip-bubble,
.pf-stat--dalio:focus .hover-tip-bubble,
.pf-stat--dalio:focus-visible .hover-tip-bubble{ transform:translateY(0) scale(1); }
@media (max-width: 820px){
  .pf-stats{ border-left:0; padding-left:0; }
  /* wrapped onto the left edge: a bubble centred on the Yield stat would be cut off by the screen */
  .pf-stat:not(.pf-stat--dalio) .hover-tip-bubble{ left:0; transform:translateY(6px) scale(.96); transform-origin:bottom left; }
  .pf-stat:not(.pf-stat--dalio):hover .hover-tip-bubble,
  .pf-stat:not(.pf-stat--dalio):focus .hover-tip-bubble,
  .pf-stat:not(.pf-stat--dalio):focus-visible .hover-tip-bubble{ transform:translateY(0) scale(1); }}
@media (max-width: 560px){
  .pf-filter{ width:100%; }
  .pf-filter .chip-row{ flex:1; }
  .pf-filter .chip{ flex:1; text-align:center; padding-left:6px; padding-right:6px; }}

/* ---------------- Reusable hover tooltip ---------------- */
/* Same dark-glass floating card used by .philosophy-tooltip and
   .stock-modal-info-tooltip elsewhere - always dark regardless of the
   page's light/dark theme, since it's a floating overlay, not page content. */
.hover-tip{ position:relative; }
.hover-tip-bubble{
  position:absolute; z-index:20; left:50%; bottom:calc(100% + 12px);
  transform:translateX(-50%) translateY(6px) scale(.96); transform-origin:bottom center;
  width:max-content; max-width:280px; color:#fff; border-radius:14px; padding:12px 16px; text-align:left;
  font-weight:400; font-size:12px; line-height:1.55; letter-spacing:normal; text-transform:none;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(160deg, rgba(27,27,47,0.95), rgba(27,27,47,0.86));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hover-tip:hover .hover-tip-bubble,
.hover-tip:focus .hover-tip-bubble,
.hover-tip:focus-visible .hover-tip-bubble{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);
}
@media (max-width: 480px){
  .hover-tip-bubble{ max-width:220px; }}

.correlation-details{ margin-top:28px; }
.correlation-details summary{ list-style:none; }
.correlation-details summary::-webkit-details-marker{ display:none; }

/* The matrix used to hide behind a tiny "› Portfolio correlation matrix" text line. It's the most
   interesting thing under the picks, so it's a full-width teaser card: a question, this week's real
   numbers (filled in by js/correlation.js) and an obvious button. Still a <details>, so opening,
   keyboard and screen-reader behaviour are native. */
.corr-teaser{
  display:flex; align-items:center; gap:18px; cursor:pointer; user-select:none;
  padding:18px 22px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--indigo-soft) 0%, var(--gold-soft) 100%);
  border:1.5px solid rgba(139,127,255,0.35);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.corr-teaser:hover{ transform: translateY(-2px); border-color: var(--indigo); box-shadow: var(--shadow-sm); }
.corr-teaser:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; }
.corr-teaser-icon{ flex:none; width:52px; height:52px; display:flex; color: var(--indigo); }
.corr-teaser-icon svg{ width:100%; height:100%; }
.corr-teaser-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.corr-teaser-kicker{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: var(--indigo-dark); }
.corr-teaser-title{ font-family:'Instrument Sans', sans-serif; font-size:21px; font-weight:600; line-height:1.2; color: var(--ink); }
.corr-teaser-sub{ font-size:13.5px; line-height:1.5; color: var(--ink-soft); }
.corr-teaser-cta{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--white); font-size:13.5px; font-weight:800;
}
.corr-teaser-cta svg{ width:16px; height:16px; transition: transform .2s ease; }
.corr-teaser-cta-close{ display:none; }
.correlation-details[open] .corr-teaser-cta-open{ display:none; }
.correlation-details[open] .corr-teaser-cta-close{ display:inline; }
.correlation-details[open] .corr-teaser-cta svg{ transform: rotate(180deg); }
@media (max-width: 640px){
  .corr-teaser{ flex-wrap:wrap; padding:16px 18px; gap:14px; }
  .corr-teaser-icon{ width:42px; height:42px; }
  .corr-teaser-title{ font-size:19px; }
  .corr-teaser-cta{ width:100%; justify-content:center; }}
.correlation-panel{ margin-top:14px; }
.corr-note{ font-size:12.5px; color: var(--ink-soft); margin-bottom:14px; max-width:640px; }
/* Shared table-scroll wrapper (also used by screener.html tables, which
   layer extra rules like max-height on top of this in css/screener.css). */
.table-scroll{
  overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius-md); background: var(--white);
}
.table-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.table-scroll::-webkit-scrollbar-track{ background:transparent; }
.table-scroll::-webkit-scrollbar-thumb{ background: var(--ink-soft); border-radius:999px; border:2px solid var(--white); background-clip:padding-box; }
.table-scroll::-webkit-scrollbar-thumb:hover{ background: var(--ink); background-clip:padding-box; }
.table-scroll::-webkit-scrollbar-corner{ background: transparent; }
.corr-matrix-layout{ display:flex; align-items:flex-start; gap:28px; }
.corr-matrix-col{ flex:1; min-width:0; }
.corr-table{ border-collapse:collapse; font-size:11.5px; }
.corr-table th, .corr-table td{
  padding:7px 9px; text-align:center; border:1px solid var(--line); min-width:44px;
}
.corr-table th{ font-weight:700; background: var(--cream-2); position:sticky; top:0; }
.corr-table th.row-head{ text-align:left; position:sticky; left:0; z-index:1; }
.corr-table td.diag{ background: var(--cream-2); color: var(--ink-soft); }
.corr-table th.corr-th{ cursor:pointer; transition: background .12s ease, color .12s ease; }
.corr-table th.corr-th:hover{ background: var(--indigo-soft); color: var(--indigo-dark); }
.corr-table th.corr-th:focus-visible{ outline:2px solid var(--indigo); outline-offset:-2px; }
.corr-table th.corr-th.selected{ background: var(--indigo); color:#1D1D2E; }

/* Deliberately theme-invariant dark glass card (like .backtest-panel /
   .stock-modal) - this is a featured interactive tool, not a page section,
   so it's styled to pop against the light matrix beside it in both themes. */
.corr-custom-panel{
  position:relative; overflow:hidden;
  flex:0 0 270px; position:sticky; top:20px;
  background: radial-gradient(130% 150% at 15% 0%, #241F45 0%, #1B1B2F 55%, #0E0E1C 100%);
  border:1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md);
  padding:22px; color:#fff;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,0.45);
}
.corr-custom-orb{
  position:absolute; top:-70px; right:-60px; width:180px; height:180px; border-radius:50%;
  background: var(--indigo); filter:blur(50px); opacity:0.35; pointer-events:none;
}
.corr-custom-title{
  position:relative; font-family:'Instrument Sans', sans-serif; font-size:19px; font-weight:600;
  color:#fff; margin:0 0 8px; line-height:1.2;
}
.corr-custom-tagline{ position:relative; font-size:12.5px; color: rgba(255,255,255,0.65); line-height:1.55; margin:0 0 16px; }
.corr-custom-tagline em{ color:#fff; font-style:normal; font-weight:700; }
.corr-custom-chips{ position:relative; display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.corr-custom-chip{
  display:inline-flex; align-items:center; gap:5px; border:none; cursor:pointer;
  background:#fff; color: var(--indigo-dark); font-weight:800; font-size:12px;
  padding:5px 10px; border-radius: var(--radius-pill);
}
.corr-custom-chip:hover{ background: rgba(255,255,255,0.85); }
.corr-custom-chip .x{ font-size:11px; opacity:.7; }
.corr-custom-empty{ position:relative; }
.corr-custom-demo{
  display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:14px;
  background: rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.18); border-radius:14px;
}
.corr-custom-demo-chip{
  font-size:11.5px; font-weight:800; padding:4px 9px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75);
}
.corr-custom-demo-op{ color: rgba(255,255,255,0.35); font-weight:700; font-size:13px; }
.corr-custom-demo-q{
  font-family:'Instrument Sans', sans-serif; font-weight:700; font-size:17px; color:#FFC257;
  margin-left:auto;
}
.corr-custom-empty p{ font-size:12.5px; color: rgba(255,255,255,0.6); line-height:1.5; margin:0; }
.corr-custom-stats{ position:relative; flex-direction:column; gap:10px; margin:0 0 14px; }
.corr-custom-stats .dalio-stat{
  min-width:0; padding:12px 14px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
}
.corr-custom-stats .dalio-stat-lbl{ color: rgba(255,255,255,0.55); }
.corr-custom-stats .dalio-stat-val{ color:#fff; }
.corr-custom-stats .dalio-stat-note{ color: rgba(255,255,255,0.5); }
.corr-custom-stats .dalio-stat--headline{ background: rgba(139,127,255,0.16); border-color: rgba(139,127,255,0.35); }
.corr-custom-stats .dalio-stat--headline .dalio-stat-val{ color:#C9C2FF; }
/* Fixed bright variants, not the theme-swapping --pos-text/--neg-text -
   this panel is always dark regardless of site theme, same reasoning as
   the always-dark .stock-modal. */
.corr-custom-stats .dalio-stat-val.pos{ color:var(--pos-strong); }
.corr-custom-stats .dalio-stat-val.neg{ color:#FB7185; }
.corr-custom-pair{ position:relative; font-size:12px; color: rgba(255,255,255,0.6); line-height:1.5; margin:0 0 8px; }
.corr-custom-clear{
  position:relative; font-size:12.5px; font-weight:700; color: rgba(255,255,255,0.7);
  background:none; border:1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-pill); padding:7px 14px; cursor:pointer; width:100%;
}
.corr-custom-clear:hover{ border-color: rgba(255,255,255,0.4); color:#fff; }

@media (max-width: 900px){
  .corr-matrix-layout{ flex-direction:column; align-items:stretch; }
  .corr-matrix-col{ width:100%; min-width:0; }
  .corr-custom-panel{ flex:1 1 auto; width:100%; position:static; }}

.dalio-section{ margin-top:32px; padding-top:28px; border-top:1px solid var(--line); }
.dalio-section h4{ font-family:'Instrument Sans', sans-serif; font-size:17px; font-weight:600; margin-bottom:10px; max-width:640px; }

.dalio-video{ margin:20px 0 28px; max-width:640px; }
.dalio-ai-link{ white-space:normal; text-align:center; font-size:13.5px; padding:11px 20px; margin-bottom:28px; }
.dalio-video-play{
  position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius: var(--radius-md);
  overflow:hidden; border:none; padding:0; cursor:pointer; background:#000;
  box-shadow: var(--shadow-md);
}
.dalio-video-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.dalio-video-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.78) 100%);
}
.dalio-video-play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; background: rgba(255,255,255,0.94);
  display:flex; align-items:center; justify-content:center; color: var(--indigo-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); transition: transform .15s ease, background .15s ease;
}
.dalio-video-play-icon svg{ width:24px; height:24px; margin-left:3px; }
.dalio-video-play:hover .dalio-video-play-icon{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
.dalio-video-caption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  display:flex; flex-direction:column; gap:2px; text-align:left;
}
.dalio-video-title{ color:#fff; font-weight:700; font-size:14.5px; line-height:1.3; }
.dalio-video-source{ color: rgba(255,255,255,0.75); font-size:11.5px; }
.dalio-video-iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius: var(--radius-md); display:block; box-shadow: var(--shadow-md); }
.dalio-stats{ display:flex; gap:14px; margin:18px 0; flex-wrap:wrap; }
.dalio-stat{
  background: var(--cream-2); border-radius: var(--radius-sm); padding:12px 18px; min-width:180px;
}
.dalio-stat-lbl{ display:block; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:4px; }
.dalio-stat-val{ font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; color: var(--ink); }
.dalio-stat-val.pos{ color:var(--pos-text); }
.dalio-stat-val.neg{ color:var(--neg-text); }
.dalio-stat--headline{ background: var(--indigo-soft); border:1px solid rgba(75,63,255,0.2); }
.dalio-stat--headline .dalio-stat-val{ color: var(--indigo-dark); font-size:28px; }
.dalio-stat-note{ display:block; font-size:11px; color: var(--ink-soft); margin-top:2px; }
.dalio-explainer{ font-size:13px; color: var(--ink-soft); max-width:640px; margin-bottom:22px; line-height:1.55; font-style:italic; }

.dalio-bars{ display:flex; flex-direction:column; gap:14px; max-width:640px; margin-bottom:26px; }
.dalio-bar-row{ display:grid; grid-template-columns: 1fr 2fr auto; align-items:center; gap:12px; }
.dalio-bar-lbl{ font-size:12.5px; color: var(--ink-soft); }
.dalio-bar-track{ height:14px; background: var(--cream-2); border-radius: var(--radius-pill); overflow:hidden; }
.dalio-bar-fill{ height:100%; border-radius: var(--radius-pill); transition: width .6s ease; }
.dalio-bar-fill--flat{ background: var(--coral); }
.dalio-bar-fill--actual{ background: var(--mint); }
.dalio-bar-val{ font-weight:700; font-size:13px; font-variant-numeric: tabular-nums; text-align:right; min-width:48px; }

.dalio-pairs{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:28px; max-width:640px; }
.dalio-pair-card{ border-radius: var(--radius-sm); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.dalio-pair-card--good{ background: var(--mint-soft); }
.dalio-pair-card--bad{ background: var(--coral-soft); }
.dalio-pair-lbl{ font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.dalio-pair-card--good .dalio-pair-lbl{ color:var(--pos-text); }
.dalio-pair-card--bad .dalio-pair-lbl{ color:var(--neg-text); }
.dalio-pair-tickers{ font-family:'Instrument Sans', sans-serif; font-size:18px; font-weight:600; }
.dalio-pair-note{ font-size:12px; color: var(--ink-soft); line-height:1.4; }

/* Retagged from h5 to h3 to fix a real heading-order accessibility bug
   (this followed an h2 with no h3/h4 between them) - font-family/line-
   height/letter-spacing pinned explicitly so it keeps looking like a
   small sans-serif label instead of picking up the h1-h4 heading rule
   rule the new tag now qualifies for. */
.dalio-subhead{
  font-size:15px; font-weight:700; margin:26px 0 6px;
  font-family:'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height:1.5; letter-spacing:normal;
}
.dalio-rank-list{ display:flex; flex-direction:column; gap:6px; max-width:640px; margin:14px 0 22px; }
.dalio-rank-row{ display:grid; grid-template-columns:52px 1fr 40px; align-items:center; gap:10px; }
.dalio-rank-ticker{ font-size:12.5px; font-weight:700; }
.dalio-rank-track{ height:8px; background: var(--cream-2); border-radius: var(--radius-pill); overflow:hidden; }
.dalio-rank-fill{ height:100%; border-radius: var(--radius-pill); transition: width .5s ease; }
.dalio-rank-val{ font-size:12px; font-weight:700; font-variant-numeric: tabular-nums; text-align:right; color: var(--ink-soft); }

.dalio-sector-insight{ font-size:13px; color: var(--ink-soft); max-width:660px; line-height:1.6; margin-bottom:22px; padding:14px 16px; background: var(--cream-2); border-radius: var(--radius-sm); }

.dalio-footnote{ font-size:11.5px; color: var(--ink-soft); margin-top:16px; max-width:640px; line-height:1.6; }

.dalio-gap-card{
  background: var(--cream-2); border-radius: var(--radius-md); padding:22px;
  max-width:760px; margin-bottom:28px;
}
.dalio-gap-card .dalio-subhead{ margin-top:0; }
.dalio-gap-card .pill-btn{ margin-top:6px; max-width:100%; white-space:normal; text-align:center; }
.dalio-gap-list{ display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.dalio-gap-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:12px;
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:9px 13px;
}
.dalio-gap-ticker{ font-weight:800; font-size:13px; white-space:nowrap; }
.dalio-gap-new{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color: var(--pos-text); background: var(--mint-soft); border-radius:999px; padding:2px 6px; margin-left:6px;
  vertical-align:middle;
}
.dalio-gap-name{ font-size:12px; color: var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dalio-gap-corr{ font-weight:700; font-size:13px; font-variant-numeric: tabular-nums; color: var(--indigo-dark); }

.dalio-extra-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:32px; max-width:900px; margin-bottom:8px; }
.dalio-extra-col .dalio-subhead{ margin-top:0; }
.dalio-rolling-list{ display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.dalio-rolling-row{ display:grid; grid-template-columns:1fr 2fr auto; align-items:center; gap:10px; }
.dalio-rolling-row.latest .dalio-rolling-lbl{ font-weight:700; color: var(--ink); }
.dalio-rolling-lbl{ font-size:11.5px; color: var(--ink-soft); }
.dalio-regime-days{ font-size:11px; color: var(--ink-soft); opacity:0.75; }
.dalio-rolling-track{ height:10px; background: var(--cream-2); border-radius: var(--radius-pill); overflow:hidden; }
.dalio-rolling-fill{ height:100%; border-radius: var(--radius-pill); background: var(--indigo); transition: width .5s ease; }
.dalio-rolling-fill.down{ background: var(--coral); }
.dalio-rolling-val{ font-size:12.5px; font-weight:700; font-variant-numeric: tabular-nums; text-align:right; min-width:34px; }

@media (max-width: 620px){
  .dalio-bar-row{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .dalio-bar-val{ text-align:left; }
  .dalio-pairs{ grid-template-columns:minmax(0,1fr); }
  .dalio-extra-grid{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .dalio-gap-row{ grid-template-columns:minmax(0,1fr); gap:3px; }
  .dalio-gap-corr{ text-align:left; }}

.stock-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap:18px;
}
.stock-card{
  position:relative;
  background: var(--cream);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding:22px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* the picks as plain cards in the page's HTML (scripts/lib/snapshots.js homePicks); js/script.js replaces them with the rich cards when it loads */
.pick-static-lede{ grid-column:1 / -1; margin:0 0 4px; max-width:820px; font-size:15.5px; line-height:1.65; color: var(--ink-soft); }
.pick-static{ display:flex; flex-direction:column; gap:6px; padding:18px 20px; background: var(--cream); border:1px solid var(--line); border-radius: var(--radius-md); }
.pick-static h3{ margin:0; font-family:'Instrument Sans', sans-serif; font-size:19px; font-weight:600; line-height:1.25; }
.pick-static h3 a{ color: var(--ink); }
.pick-static h3 a:hover{ color: var(--indigo-dark); text-decoration:underline; }
.pick-static-meta{ margin:0; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); }
.pick-static-price{ margin:0; font-family:'Instrument Sans', sans-serif; font-size:23px; font-weight:600; line-height:1.1; }
.pick-static-why{ margin:0; font-size:13px; line-height:1.55; color: var(--ink-soft); }
.stock-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; background: var(--white); }
.stock-card:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; }
.stock-card-hint{
  margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:11.5px; font-weight:700; color: var(--indigo); text-align:center;
}

.stock-card--dual{
  border:1.5px solid var(--gold); padding-top:44px;
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--cream) 90px);
  box-shadow: 0 0 0 1px var(--gold-soft), var(--shadow-sm);
}
.stock-card--dual:hover{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-md); }
.dual-ribbon{
  /* Absolute offsets on a child are measured from the parent's padding
     edge, i.e. inset by the parent's own border-width (1.5px) - using the
     same border-radius as the parent's OUTER curve on a box that starts
     1.5px further in left a small square notch peeking past the card's
     actual rounded corner. Negative-offsetting out to the border's outer
     edge lines the ribbon's curve up with the card's real corner exactly. */
  position:absolute; top:-0.75px; left:-0.75px; right:-0.75px; height:32px; border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, var(--gold) 0%, #FFA51F 100%);
  color:#4A2E00; font-size:11px; font-weight:800; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; gap:5px; cursor:help;
}
.stock-card--dual .rank{ top:48px; }
.stock-card .rank{
  position:absolute; top:16px; right:16px;
  font-family:'Instrument Sans', sans-serif; font-size:13px; font-weight:700; color: rgba(255,255,255,0.62);
}
.stock-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ticker-badge{
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px; font-family:'Instrument Sans', sans-serif;
  flex:none;
}
.stock-names .ticker{ font-weight:800; font-size:16px; }
.stock-names .company{ font-size:12.5px; color:var(--ink-soft); }
.stock-meta{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; }
.stock-price{ font-family:'Instrument Sans', sans-serif; font-size:22px; font-weight:600; }
.stock-change{ font-size:13px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); }
.stock-change.up{ color:var(--pos-text); background:var(--mint-soft); }
.stock-change.down{ color:var(--neg-text); background:var(--coral-soft); }
.stock-sector{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color: var(--indigo-dark); background: var(--indigo-soft); padding:4px 10px; border-radius:var(--radius-pill);
  margin-bottom:12px;
}
.indicator-row{ display:flex; gap:8px; margin-bottom:14px; }
.indicator{
  flex:1; display:flex; flex-direction:column; gap:3px;
  background: var(--white); border:1px solid var(--line); border-radius:10px;
  padding:8px 9px; cursor:help;
}
.indicator-lbl{
  font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-soft);
  border-bottom:1px dotted currentColor; width:fit-content; opacity:0.85;
}
.indicator-val{ font-size:12.5px; font-weight:800; color: var(--ink); }
.indicator-val.up{ color:var(--pos-text); }
.indicator-val.down{ color:var(--neg-text); }

.philosophy-row{ display:flex; gap:8px; margin-bottom:14px; }
.truth-row{ flex-wrap:wrap; }
.philosophy-badge{
  position:relative; flex:1; text-align:center; font-size:12px; font-weight:700; padding:7px 8px;
  border-radius:10px; cursor:help; border:1px solid transparent;
}
.philosophy-badge.pass{ background: var(--mint-soft); color:var(--pos-text); border-color:rgba(10,122,85,0.2); }
.philosophy-badge.fail{ background: var(--cream-2); color: var(--ink-soft); }

.philosophy-tooltip{
  position:absolute; bottom:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(6px) scale(.96); transform-origin:bottom center;
  width:260px; color:#fff; border-radius: 16px;
  padding:16px 18px; text-align:left; font-weight:400; font-size:12px; line-height:1.5;
  z-index:30; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(160deg, rgba(27,27,47,0.92), rgba(27,27,47,0.82));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.philosophy-badge.pass .philosophy-tooltip{ box-shadow: 0 20px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(143,217,138,0.25), inset 0 1px 0 rgba(255,255,255,0.06); }
.philosophy-badge:hover .philosophy-tooltip,
.philosophy-badge:focus .philosophy-tooltip,
.philosophy-badge:focus-visible .philosophy-tooltip{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1);
}

/* The two badges (Buffett | Lynch) sit at the left and right halves of the
   card, so a 260px tooltip centred on either one sticks out past the card -
   and for the right-most card in the grid, past the page itself, which added
   up to 24px of sideways scroll at 1000-1250px wide even while the tooltip
   was invisible (visibility:hidden still counts toward scrollable overflow).
   Anchor each to its own side of the card instead so neither can leave it.
   A lone badge (the other one had no verdict) keeps the centred default. */
.philosophy-badge:first-child:not(:only-child) .philosophy-tooltip{
  left:0; right:auto; transform-origin:bottom left;
  transform: translateY(6px) scale(.96);
}
.philosophy-badge:last-child:not(:only-child) .philosophy-tooltip{
  left:auto; right:0; transform-origin:bottom right;
  transform: translateY(6px) scale(.96);
}
.philosophy-badge:first-child:not(:only-child):hover .philosophy-tooltip,
.philosophy-badge:first-child:not(:only-child):focus .philosophy-tooltip,
.philosophy-badge:first-child:not(:only-child):focus-visible .philosophy-tooltip,
.philosophy-badge:last-child:not(:only-child):hover .philosophy-tooltip,
.philosophy-badge:last-child:not(:only-child):focus .philosophy-tooltip,
.philosophy-badge:last-child:not(:only-child):focus-visible .philosophy-tooltip{
  transform: translateY(0) scale(1);
}

.philosophy-tooltip-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.philosophy-avatar{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--coral) 100%);
  flex:none;
}
.philosophy-ring-wrap{ position:relative; width:36px; height:36px; flex:none; }
.philosophy-ring{ width:36px; height:36px; transform:rotate(-90deg); }
.philosophy-ring-track{ fill:none; stroke:rgba(255,255,255,0.15); stroke-width:3; }
.philosophy-ring-fill{ fill:none; stroke-width:3; stroke-linecap:round; transition: stroke-dashoffset .5s ease; }
.philosophy-ring-fill.pass{ stroke: var(--pos-strong); }
.philosophy-ring-fill.fail{ stroke: rgba(255,255,255,0.45); }
.philosophy-ring-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
}

.philosophy-tooltip strong{ display:block; font-weight:700; font-size:13px; margin-bottom:4px; color:#fff; }
.philosophy-tooltip p{ color: rgba(255,255,255,0.75); font-size:11.5px; margin:0 0 12px; line-height:1.5; }
.philosophy-tooltip ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.philosophy-tooltip li{ font-size:11px; display:flex; align-items:center; gap:7px; }
.philosophy-tooltip li .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.philosophy-tooltip li.yes{ color:#DFF7EC; }
.philosophy-tooltip li.yes .dot{ background:var(--pos-strong); }
.philosophy-tooltip li.no{ color: rgba(255,255,255,0.5); }
.philosophy-tooltip li.no .dot{ background: rgba(255,255,255,0.3); }

@media (max-width: 480px){
  .philosophy-tooltip{ width:220px; }}

.stock-why{ font-size:13.5px; color: var(--ink-soft); margin-bottom:16px; min-height:58px; }
.stock-next-earnings{ font-size:11.5px; color: var(--ink-soft); margin-bottom:8px; }
.stock-next-earnings b{ color: var(--ink); font-weight:700; }
.stock-foot{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; }
.allocation{ font-size:12.5px; color:var(--ink-soft); }
.allocation b{ color:var(--ink); font-size:14px; }
/* padding+matching negative margin grows the actual tap target to the
   24x24px WCAG minimum (was 71.5x19.5px, real touch-target audit finding)
   without shifting where the link visually sits in the footer row. */
.detail-link{
  font-size:13px; font-weight:700; color: var(--indigo); display:flex; align-items:center; gap:4px;
  padding:8px 10px; margin:-8px -10px;
}

.portfolio-footnote{
  margin-top:26px; padding:16px 20px; border-radius:var(--radius-sm);
  background: var(--gold-soft); border:1px solid rgba(255,178,56,0.35);
  font-size:13px; color:var(--warn-text); display:flex; gap:10px; align-items:flex-start;
}
.portfolio-footnote-icon{ width:16px; height:16px; flex:none; margin-top:1px; }

/* ---------------- How it works ---------------- */
.how-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:22px; }
.how-card{
  background: var(--white); border-radius: var(--radius-md); padding:26px;
  border:1px solid var(--line); box-shadow: var(--shadow-sm);
}
.how-num{
  width:38px; height:38px; border-radius:11px; background: var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Instrument Sans', sans-serif;
  margin-bottom:18px;
}
.how-card h3{ font-size:18px; margin-bottom:8px; }
.how-card p{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ---------------- Toolkit showcase ---------------- */
.toolkit-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; }
.toolkit-card{
  display:flex; flex-direction:column; background: var(--white); border-radius: var(--radius-md); padding:28px;
  border:1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.toolkit-card:hover{ transform:translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--indigo); }
.toolkit-icon{ width:28px; height:28px; margin-bottom:16px; color: var(--indigo); }
.toolkit-card h3{ font-size:17px; margin:0 0 8px; color: var(--ink); }
.toolkit-card p{ font-size:13.5px; color: var(--ink-soft); line-height:1.55; margin:0 0 18px; flex:1; }
.toolkit-link{ font-size:13.5px; font-weight:700; color: var(--indigo); }
.toolkit-card:hover .toolkit-link{ color: var(--indigo-dark); }
.toolkit-card{ position:relative; }
.toolkit-card[hidden]{ display:none; }
.toolkit-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.toolkit-top .toolkit-icon{ margin-bottom:16px; }
.toolkit-cat{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: var(--ink-soft); padding:4px 10px; border-radius:999px; border:1px solid var(--line); white-space:nowrap; }
.toolkit-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 30px; }
.toolkit-filter[hidden]{ display:none; }
.toolkit-filter button{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color: var(--ink-soft); font:inherit; font-size:14px; font-weight:700;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.toolkit-filter button small{ font-size:11.5px; font-weight:600; opacity:.7; }
.toolkit-filter button:hover{ border-color: var(--indigo); color: var(--ink); }
.toolkit-filter button.active{ background:#4B3FFF; border-color:#4B3FFF; color:#fff; }
.toolkit-filter button.active small{ opacity:1; color:#fff; }
.toolkit-filter button:focus-visible, .toolkit-more:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; }
.toolkit-more-wrap{ text-align:center; margin-top:30px; }
.home-stock-links{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; max-width:900px; margin:0 auto 22px; padding:0; list-style:none; }
.home-stock-links a{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; }
.home-stock-links a:hover{ border-color:var(--indigo); color:var(--indigo-dark); }
.home-stock-links span{ font-size:12px; font-weight:500; color:var(--ink-soft); }
.home-stock-more{ margin:0; text-align:center; }
.toolkit-more[hidden]{ display:none; }
.toolkit-more{
  height:44px; padding:0 26px; border-radius:999px; cursor:pointer; border:1px solid var(--line); background:transparent;
  color: var(--ink); font:inherit; font-size:14px; font-weight:700; transition: border-color .15s ease, background .15s ease;
}
.toolkit-more:hover{ border-color: var(--indigo); background: var(--indigo-soft); }

@media (max-width: 900px){
  .toolkit-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }}
@media (max-width: 560px){
  .toolkit-grid{ grid-template-columns:minmax(0,1fr); }}

/* ---------------- Backtest / Track Record ---------------- */
#backtest{ padding-top:0; }
.backtest-panel{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 10% 0%, #1E1B3A 0%, var(--fixed-dark) 55%, #0E0E1C 100%);
  color:#fff; padding:56px 48px 48px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
}
.backtest-orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:0.35; pointer-events:none; }
.backtest-orb-1{ width:340px; height:340px; background: var(--indigo); top:-120px; right:-80px; }
.backtest-orb-2{ width:280px; height:280px; background: var(--coral); bottom:-100px; left:-60px; }

.backtest-head{ position:relative; z-index:1; max-width:640px; margin-bottom:36px; }
.backtest-eyebrow{ background: rgba(255,255,255,0.1); color:#fff; }
.backtest-head h2{ color:#fff; font-size: clamp(28px, 3.6vw, 42px); margin:16px 0 12px; }
.backtest-head p{ color: rgba(255,255,255,0.65); font-size:15.5px; line-height:1.6; margin-bottom:24px; }

.backtest-toggle{ display:inline-flex; background: rgba(255,255,255,0.08); border-radius: var(--radius-pill); padding:4px; gap:2px; }
.backtest-toggle-btn{
  background:none; border:none; color: rgba(255,255,255,0.6); font-weight:700; font-size:13.5px;
  padding:9px 18px; border-radius: var(--radius-pill); transition: background .2s ease, color .2s ease;
}
.backtest-toggle-btn.active{ background:#fff; color: var(--fixed-dark); }
.backtest-toggle-btn:not(.active):hover{ color:#fff; }

.backtest-stats{
  position:relative; z-index:1; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-bottom:36px;
}
.backtest-stat{
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md);
  padding:20px 22px; backdrop-filter: blur(6px);
}
.backtest-stat--delta{ background: rgba(255,255,255,0.1); }
.backtest-stat-lbl{ display:block; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: rgba(255,255,255,0.55); margin-bottom:8px; }
.backtest-stat-val{ display:block; font-family:'Instrument Sans', sans-serif; font-size:clamp(28px,3.4vw,38px); font-weight:600; line-height:1; transition: color .3s ease; }
.backtest-stat-sub{ display:block; font-size:12.5px; color: rgba(255,255,255,0.5); margin-top:6px; }
.backtest-color-portfolio{ color:var(--pos-strong); }
.backtest-color-spy{ color:#B8B8D4; }

.backtest-chart-wrap{ position:relative; z-index:1; margin-bottom:18px; }
.backtest-chart{ width:100%; height:auto; display:block; overflow:visible; }
.backtest-tooltip{
  position:absolute; top:0; left:0; transform:translate(-50%,-115%);
  background: rgba(10,10,20,0.95); border:1px solid rgba(255,255,255,0.15); border-radius:10px;
  padding:9px 12px; font-size:12px; line-height:1.5; pointer-events:none; white-space:nowrap;
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
.backtest-tooltip strong{ display:block; color: rgba(255,255,255,0.5); font-weight:600; font-size:11px; margin-bottom:4px; }

.backtest-legend{ position:relative; z-index:1; display:flex; gap:24px; font-size:13px; color: rgba(255,255,255,0.75); margin-bottom:28px; }
.backtest-legend-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.backtest-legend-dot.backtest-color-portfolio{ background:var(--pos-strong); }
.backtest-legend-dot.backtest-color-spy{ background:#B8B8D4; }

.backtest-footnote{ position:relative; z-index:1; font-size:11.5px; color: rgba(255,255,255,0.4); line-height:1.6; max-width:760px; margin:0; }

@media (max-width: 768px){
  .backtest-panel{ padding:40px 24px 32px; }
  .backtest-stats{ grid-template-columns:minmax(0,1fr); }}

/* ---------------- Methodology / trust ---------------- */
.method{ background: var(--fixed-dark); color:#fff; border-radius: var(--radius-lg); margin:0 24px; padding:64px 48px; position:relative; overflow:hidden; }
.method .wrap{ padding:0; max-width:none; }
.method-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
.method h2{ color:#fff; }
.method .section-head p{ color: rgba(255,255,255,0.7); }
.method-list{ display:flex; flex-direction:column; gap:20px; }
.method-item{ display:flex; gap:16px; }
.method-icon{
  width:44px; height:44px; border-radius:12px; background: rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.method-icon svg{ width:22px; height:22px; color:#fff; }
.method-item h3{ color:#fff; font-size:16px; margin-bottom:4px; }
.method-item p{ color: rgba(255,255,255,0.65); font-size:14px; margin:0; }
.method-stats{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:16px; }
.stat-card{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding:24px; }
.stat-card .num{ font-family:'Instrument Sans', sans-serif; font-size:clamp(18px, 5.5vw, 32px); font-weight:600; color: var(--gold); overflow-wrap:break-word; }
@media (max-width: 480px){
  .stat-card{ padding:16px; }}
.stat-card .lbl{ font-size:13px; color: rgba(255,255,255,0.65); margin-top:6px; }

.slider-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; background: var(--white);
  border:1.5px solid var(--line); color: var(--ink); box-shadow: var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; transition: border-color .15s ease;
}
.slider-arrow:hover{ border-color: var(--indigo); color: var(--indigo); }
.slider-arrow svg{ width:20px; height:20px; }
.slider-arrow.prev{ left:-22px; }
.slider-arrow.next{ right:-22px; }

@media (max-width: 620px){
  .slider-arrow{ display:none; }}

/* ---------------- FAQ ---------------- */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 22px; background:none; border:none; text-align:left; font-weight:700; font-size:16px; color: var(--ink);
}
.faq-q .plus{ font-size:20px; color: var(--indigo); transition: transform .2s ease; flex:none; }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a{ max-height:640px; }   /* was 220px, which cut a 56-word answer off on a phone (238px of text); the ceiling only has to be above the tallest answer */
.faq-a p{ padding:0 22px 20px; font-size:14.5px; color: var(--ink-soft); margin:0; }

/* ---------------- CTA band ---------------- */
.cta-band{
  /* Fixed indigo gradient, not var(--indigo) - this band is meant to look
     the same regardless of site theme, like .stock-modal/.wisdom-band. Using
     the theme-swapping variable here washed out the disclaimer text and
     button in dark mode, since --indigo/--indigo-dark go much lighter there. */
  background: linear-gradient(135deg, #4B3FFF 0%, #6E5BFF 100%);
  border-radius: var(--radius-lg); margin:0 24px; padding:64px 48px; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; font-size: clamp(28px,4vw,40px); margin-bottom:14px; }
.cta-band p{ color: rgba(255,255,255,0.85); font-size:17px; margin-bottom:28px; }
.cta-band .pill-btn.primary{ background:#fff; color:#2E22CC; }
.cta-band .pill-btn.primary:hover{ background:#FFB238; color:#1B1B2F; }
.cta-band .disc{ margin-top:16px; font-size:12.5px; color: rgba(255,255,255,0.6); }

/* ---------------- Footer ---------------- */
/* Deliberately always dark ("trading terminal" look), regardless of site
   theme - uses --fixed-dark, not var(--ink), for the same reason .method
   does: a themed var would flip to near-white in dark mode and break this. */
/* padding-top (not margin-top) so the always-dark background itself fills
   this gap - a margin sits outside the background box and let the page's
   own theme color (cream in light mode) show through as a seam above the
   ticker. */
footer{ padding:24px 0 30px; background: var(--fixed-dark); color: rgba(255,255,255,0.92); }

.footer-ticker{
  width:100%; overflow:hidden; background: #111122; border-bottom:1px solid rgba(255,255,255,0.08);
  padding:11px 0; -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}
.footer-ticker-track{
  display:flex; gap:36px; white-space:nowrap; width:max-content;
  animation: footer-ticker-scroll 45s linear infinite;
}
.footer-ticker:hover .footer-ticker-track{ animation-play-state: paused; }
@keyframes footer-ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.footer-ticker-item{ font-size:13px; font-weight:700; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.85); letter-spacing:.01em; }
.footer-ticker-item .t-ticker{ color:#fff; margin-right:6px; }
.footer-ticker-item .t-change.up{ color:#4ADE80; }
.footer-ticker-item .t-change.down{ color:#FB7185; }

footer .wrap{ padding-top:56px; }
.footer-grid{ display:grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap:28px; margin-bottom:40px; }
.footer-brand .logo{ color:#fff; font-size:17px; line-height:1.3; align-items:flex-start; }
.footer-brand .logo .accent{ color: var(--indigo); filter:brightness(1.3); }
.footer-brand p{ font-size:14px; color: rgba(255,255,255,0.6); margin-top:14px; max-width:260px; }
/* Retagged from h5 to h4 (real heading-order fix - the last heading before
   the footer elsewhere on the page was several levels above h5) - font-
   family/line-height pinned so it doesn't pick up the h1-h4 heading rule
   rule; color brightened from a 0.4-alpha low-contrast gray that failed
   WCAG AA (3.76:1, needs 4.5:1) to one that actually clears it. */
.footer-col h4{
  font-size:12px; text-transform:uppercase; letter-spacing:.06em; color: rgba(255,255,255,0.62);
  margin-bottom:16px; font-weight:700;
  font-family:'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; line-height:1.5;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; color: rgba(255,255,255,0.85); font-weight:600; transition: color .15s ease; }
.footer-col a:hover{ color: #8B7FFF; }
/* Company links and legal links are slim inline rows, not two more tall columns (the footer used to list 45 links in five long columns). */
.footer-inline{ display:flex; flex-wrap:wrap; gap:4px 28px; padding:22px 0; border-top:1px solid rgba(255,255,255,0.1); }
.footer-legal{ display:flex; flex-wrap:wrap; gap:4px 24px; }
.footer-inline a, .footer-legal a{ font-size:13.5px; font-weight:600; color: rgba(255,255,255,0.72); transition: color .15s ease; }
.footer-inline a:hover, .footer-legal a:hover{ color:#8B7FFF; }
/* the stock pages row: the biggest stocks and the A to Z list, so the 294 stock pages are reachable from every page; and the line that says where the numbers come from */
.footer-stocks{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; padding:18px 0; border-top:1px solid rgba(255,255,255,0.1); }
.footer-stocks-label{ font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.footer-stocks a{ font-size:13.5px; font-weight:600; color: rgba(255,255,255,0.72); transition: color .15s ease; }
.footer-stocks a:hover{ color:#8B7FFF; }
.footer-stocks .footer-stocks-all{ color:#C9C2FF; }
.footer-sources{ margin:0 0 4px; max-width:900px; font-size:13px; line-height:1.55; color: rgba(255,255,255,0.62); }
.footer-sources a{ color: rgba(255,255,255,0.8); text-decoration:underline; text-underline-offset:2px; }
.footer-sources a:hover{ color:#8B7FFF; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ font-size:12.5px; color: rgba(255,255,255,0.5); margin:0; }
.legal-disclaimer{ font-size:11.5px; color: rgba(255,255,255,0.62); max-width:900px; margin-top:18px; line-height:1.6; }

/* ---------------- Ad slots (reserved, unsold inventory) ----------------
   Empty by default - no script, no third-party tag, nothing loaded. These
   exist so the layout already has room the day a placement actually sells;
   until then they're just a quiet, honestly-labeled placeholder. See
   advertise.html for what this site will and won't sell. */
.ad-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1px dashed var(--line); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  color: var(--ink-soft); text-align:center;
  margin:32px auto;
}
/* Both used `opacity` (not just color alpha) to mute the text - fine on
   their own, but the .ad-slot--footer override below only replaced `color`,
   so its own alpha was compounding with this opacity instead of replacing
   it (0.5 color-alpha x 0.7/0.55 element-opacity = as low as ~0.28
   effective alpha), which is why the footer ad slot failed contrast much
   worse than the banner one despite looking like the same muted style.
   Fixed by using a single solid rgba() color instead of color+opacity, so
   there's nothing left to compound - same value now works in both places
   and the footer-specific override isn't needed any more. */
.ad-slot-label{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: rgba(255,255,255,0.62); }
.ad-slot-sub{ font-size:12px; color: rgba(255,255,255,0.62); }
.ad-slot-sub a{ color: inherit; text-decoration:underline; text-decoration-color: rgba(255,255,255,0.25); }
.ad-slot-sub a:hover{ color: var(--ink); }
.ad-slot--banner{ max-width:1120px; min-height:90px; padding:16px; }
.ad-slot--sidebar{ min-height:250px; padding:20px; }
.ad-slot--footer{ min-height:64px; padding:12px; margin:0 0 22px; border-color: rgba(255,255,255,0.12); }

/* ---------------- Mobile nav (hamburger + slide-out drawer) ---------------- */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:transparent; border:1.5px solid var(--line);
  color: var(--ink); flex:none; transition: border-color .15s ease;
}
.nav-toggle:hover{ border-color: var(--indigo); }
.nav-toggle svg{ width:20px; height:20px; }

.mobile-menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:90;
  opacity:0; transition: opacity .25s ease;
}
.mobile-menu-backdrop.open{ opacity:1; }

.mobile-menu{
  position:fixed; top:0; right:0; height:100%; width:min(320px, 85vw); z-index:100;
  background: var(--white); box-shadow: var(--shadow-lg);
  padding:20px; display:flex; flex-direction:column; gap:2px; overflow-y:auto;
  transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.mobile-menu::-webkit-scrollbar{ width:7px; }
.mobile-menu::-webkit-scrollbar-track{ background:transparent; }
.mobile-menu::-webkit-scrollbar-thumb{ background: var(--line); border-radius:999px; }
.mobile-menu::-webkit-scrollbar-thumb:hover{ background: var(--ink-soft); }
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mobile-menu-close{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
  background: var(--cream-2); border:none; color: var(--ink); flex:none;
}
.mobile-menu-close svg{ width:18px; height:18px; }
.mobile-menu a{
  padding:15px 10px; font-weight:700; font-size:16.5px; color: var(--ink); border-radius:10px;
  transition: background .15s ease;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible{ background: var(--cream-2); }
.mobile-menu-cta{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.mobile-menu-cta .pill-btn{ width:100%; }

/* Mirrors the desktop sticky subnav's jump links (hidden below 720px) so a
   phone visitor can still get to a specific section instead of scrolling
   blind through a page that runs 15+ sections deep. */
.mobile-menu-section-nav{ margin:6px 0 10px; padding-top:10px; border-top:1px solid var(--line); }
.mobile-menu-section-label{
  display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-soft); margin-bottom:6px; padding:0 10px;
}
.mobile-menu-section-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:2px; }
.mobile-menu-section-grid a{
  padding:10px; font-weight:600; font-size:13.5px; color: var(--ink-soft); border-radius:8px;
}
.mobile-menu-section-grid a:hover, .mobile-menu-section-grid a:focus-visible{ background: var(--cream-2); color: var(--ink); }

.mobile-menu-search{ position:relative; margin-bottom:14px; }
.mobile-menu-search input{
  width:100%; padding:12px 14px 12px 44px; border-radius: var(--radius-pill); border:1px solid var(--line);
  background: var(--cream-2); font-size:14px; font-family:inherit; color: var(--ink);
}
.mobile-menu-search input::placeholder{ color: var(--ink-soft); }
.mobile-menu-search input:focus{ outline:none; border-color: var(--indigo); background: var(--white); }
.mobile-menu-search .subnav-search-icon{ left:16px; top:50%; width:18px; height:18px; transform:translateY(-50%); }
.mobile-menu-search .subnav-search-results{ left:0; right:0; width:auto; top:calc(100% + 6px); }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  nav.main-nav{ display:none; }
  .header-cta .pill-btn{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-visual{ transform:none; }
  .how-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .method-grid{ grid-template-columns:minmax(0,1fr); }
  .footer-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .method, .cta-band{ margin:0 16px; padding:44px 26px; }}
@media (max-width: 620px){
  .wrap{ padding:0 18px; }
  .how-grid{ grid-template-columns:minmax(0,1fr); }
  .footer-grid{ grid-template-columns:minmax(0,1fr); }
  .hero{ padding-top:40px; }
  .portfolio-toolbar{ flex-direction:column; align-items:flex-start; }}
@media (max-width: 480px){
  .site-header .wrap{ height:auto; padding-top:14px; padding-bottom:14px; flex-wrap:wrap; row-gap:10px; }
  .logo{ font-size:17px; }
  .logo .mark{ width:28px; height:28px; font-size:14px; }
  .logo .mark svg{ width:14px; height:14px; }
  .header-cta{ gap:8px; }}

/* ---------------- Sentiment gauge: 3-month chart modal ---------------- */
/* Same always-dark glass surface as .stock-modal (it reuses that overlay and
   close button), just narrower and with chart-specific content. */
.gauge-modal{
  position:relative; width:100%; max-width:720px; max-height:92vh; overflow-y:auto; overflow-x:hidden;
  background: radial-gradient(120% 140% at 10% 0%, #1E1B3A 0%, #1B1B2F 55%, #0E0E1C 100%);
  border:1px solid rgba(255,255,255,0.1); border-radius:28px;
  padding:32px; color:#fff;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  transform: scale(.94) translateY(12px); transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.gauge-modal::-webkit-scrollbar{ width:8px; }
.gauge-modal::-webkit-scrollbar-track{ background:transparent; margin:28px 0; }
.gauge-modal::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #8B7FFF, #FFC257); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box;
}

.gc-title{ font-family:'Instrument Sans', sans-serif; font-size:24px; font-weight:600; margin:0 0 6px; padding-right:44px; }
.gc-sub{ font-size:13px; line-height:1.5; color: rgba(255,255,255,0.62); margin:0 0 18px; }
.gc-summary{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.gc-stat{
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:14px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
}
.gc-stat-k{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
.gc-stat-v{ font-family:'Instrument Sans', sans-serif; font-size:26px; font-weight:600; line-height:1.1; }
.gc-stat-s{ font-size:11.5px; color: rgba(255,255,255,0.55); }
.gc-readout{ min-height:64px; margin-bottom:8px; }
.gc-readout-main{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.gc-readout-date{ font-size:13px; font-weight:700; color: rgba(255,255,255,0.75); }
.gc-readout-score{ font-family:'Instrument Sans', sans-serif; font-size:30px; font-weight:600; line-height:1; }
.gc-readout-label{ font-size:14px; font-weight:800; }
.gc-readout-parts{ display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:6px; font-size:12.5px; color: rgba(255,255,255,0.6); }
.gc-readout-parts b{ color:#fff; font-weight:700; }
.gc-plot{
  width:100%; border-radius:12px; cursor:crosshair; outline-offset:4px;
  touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.gc-plot:focus-visible{ outline:2px solid #8B7FFF; }
.gc-svg{ display:block; max-width:100%; }
.gc-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px;
  list-style:none; margin:12px 0 0; padding:0; font-size:11.5px; font-weight:600; color: rgba(255,255,255,0.65);
}
.gc-legend li{ display:inline-flex; align-items:center; gap:6px; }
.gc-legend i{ width:9px; height:9px; border-radius:50%; flex:none; }
.gc-grid{ stroke: rgba(255,255,255,0.1); stroke-width:1; }
.gc-axis{ font-size:11px; fill: rgba(255,255,255,0.5); }
.gc-cursor{ stroke: rgba(255,255,255,0.55); stroke-width:1; stroke-dasharray:3 3; }
.gc-dot{ stroke:#fff; stroke-width:2; }
.gc-hint{ font-size:12px; color: rgba(255,255,255,0.5); margin:10px 0 0; text-align:center; }
.gc-method{ font-size:12px; line-height:1.55; color: rgba(255,255,255,0.58); margin:14px 0 0; padding-top:14px; border-top:1px dashed rgba(255,255,255,0.12); }
.gc-method b{ color: rgba(255,255,255,0.85); }
@media (hover:none){ .gc-hint-kb{ display:none; }}
@media (max-width:560px){
  .gauge-modal{ padding:22px 16px 20px; border-radius:22px; }
  .gc-title{ font-size:20px; }
  .gc-sub{ margin-bottom:14px; }
  .gc-summary{ margin-bottom:12px; }
  .gc-method{ margin-top:12px; padding-top:12px; }
  .gc-stat{ padding:9px 10px; }
  .gc-stat-v{ font-size:22px; }}

/* phone: the card's own controls were 27px and 34px tall, on the modal and on a stock's page alike */

/* ---------------- Wisdom quotes band ---------------- */
/* Deliberately theme-invariant, like .backtest-panel / .stock-modal - a
   closing note before the footer, not a page section that should flip
   with the site's light/dark toggle. */
.wisdom-band{
  padding:64px 0; margin-top:0;
  background: linear-gradient(160deg, #2B3646 0%, #212B38 55%, #1A222D 100%);
  color:#fff;
}
.wisdom-carousel{ position:relative; margin-bottom:36px; }
.wisdom-track{
  display:flex; align-items:flex-start; gap:22px; overflow-x:auto; scroll-snap-type:none; scroll-behavior:smooth;
  padding:4px 4px 14px; margin:-4px -4px -10px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  scrollbar-width: none;
}
.wisdom-track::-webkit-scrollbar{ display:none; }
/* See .indicator-grid's comment: scroll-snap-type is off here because
   snap-align:start on the first card auto-scrolls the track on load to
   cancel out any clearance margin placed before it - only turning off
   snap stops that and lets the arrow-clearance margin below actually hold. */
.wisdom-card{ flex:0 0 300px; scroll-snap-align:start; display:flex; flex-direction:column; }
.wisdom-track > .wisdom-card:first-child{ margin-left:30px; }
.wisdom-track > .wisdom-card:last-child{ margin-right:30px; }
.wisdom-mark{
  display:block; font-family:'Instrument Sans', sans-serif; font-size:38px; line-height:1;
  color: rgba(255,255,255,0.22); margin-bottom:10px;
}
.wisdom-quote{ font-size:15px; line-height:1.65; color: rgba(255,255,255,0.88); margin:0 0 22px; flex:1; }
.wisdom-author{ display:flex; align-items:center; gap:10px; }
.wisdom-avatar{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff;
}
.wisdom-avatar--lynch{ background: linear-gradient(135deg, #FFC257, #FF8A75); }
.wisdom-avatar--munger{ background: linear-gradient(135deg, var(--pos-strong), #2fd678); }
.wisdom-avatar--buffett{ background: linear-gradient(135deg, #8B7FFF, #4B3FFF); }
.wisdom-avatar--graham{ background: linear-gradient(135deg, #B8B8D4, #6B6B8C); }
.wisdom-avatar--marks{ background: linear-gradient(135deg, #FF8A75, #B23A2E); }
.wisdom-avatar--ackman{ background: linear-gradient(135deg, #4B3FFF, #1A1F71); }
.wisdom-avatar--druck{ background: linear-gradient(135deg, #2fd678, #0A7A55); }
.wisdom-avatar--simons{ background: linear-gradient(135deg, #FFC257, #7A5411); }
.wisdom-avatar--carnegie{ background: linear-gradient(135deg, #CC092F, #5A2D81); }
.wisdom-avatar--burry{ background: linear-gradient(135deg, #8B7FFF, #FF8A75); }
.wisdom-avatar--pabrai{ background: linear-gradient(135deg, #FF9900, #CC092F); }
.wisdom-name{ font-size:13.5px; font-weight:700; color:#fff; }
.wisdom-arrow{
  position:absolute; top:38%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.wisdom-arrow:hover{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.32); }
.wisdom-arrow svg{ width:18px; height:18px; }
.wisdom-arrow.prev{ left:-14px; }
.wisdom-arrow.next{ right:-14px; }
.wisdom-back-top{ text-align:center; }
.wisdom-back-top-btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius: var(--radius-pill);
  border:1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04);
  color:#fff; font-weight:700; font-size:13px;
}
.wisdom-back-top-btn svg{ width:14px; height:14px; }
.wisdom-back-top-btn:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }

@media (max-width: 780px){
  .wisdom-arrow{ display:none; }
  .wisdom-card{ flex-basis:82%; }}

/* ---- "About this page" copy ----
   A short plain-text block near the end of a tool or content page: what the page is called in plain words, what it
   measures and where the numbers come from. Written for readers first (it answers "what is this?") and it is also the
   copy search engines read. Uses the theme tokens only, so it follows the light and dark themes like the rest of the page. */
.seo-blurb{ padding:44px 0 12px; }
/* When nothing follows it but the dark footer, it needs room of its own (a disclaimer section after it brings its own 40px of padding, so the 12px stays there) */
main > .seo-blurb:last-of-type{ padding-bottom:64px; }
.seo-blurb .wrap{ padding-top:32px; border-top:1px solid var(--line); }
.seo-blurb h2{ margin:0 0 10px; max-width:820px; font-size:clamp(20px, 2.4vw, 26px); font-weight:600; line-height:1.25; color:var(--ink); }
.seo-blurb p{ max-width:820px; margin:0; font-size:14.5px; line-height:1.75; color:var(--ink-soft); }
.seo-blurb a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.seo-blurb a:hover{ text-decoration-thickness:2px; }
@media (max-width: 600px){
  .seo-blurb{ padding:32px 0 8px; }
  main > .seo-blurb:last-of-type{ padding-bottom:48px; }
  .seo-blurb .wrap{ padding-top:24px; }
  .seo-blurb p{ font-size:14px; }
}

/* ---- Themed scrollbars: Firefox only ----
   Chromium (and Safari) ignore ::-webkit-scrollbar the moment scrollbar-width / scrollbar-color
   are set on the same element, and on Windows then draw the NATIVE scrollbar - recoloured, but
   still with its arrow buttons (the chunky left/right/up arrows). So those two properties live here,
   behind a test that only Firefox fails; everywhere else the thin ::-webkit-scrollbar rules above apply. */
@supports not selector(::-webkit-scrollbar){
  .footer-stocks{ scrollbar-width:thin; scrollbar-color:rgba(139,127,255,0.5) transparent; }
  .subnav-wrap,
  .subnav-search-results,
  .mini-row-scroll,
  .indicator-grid,
  .mobile-menu{ scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .table-scroll{ scrollbar-width: thin; scrollbar-color: var(--ink-soft) transparent; }
  .gauge-modal{ scrollbar-width: thin; scrollbar-color: rgba(139,127,255,0.5) transparent; }}

/* Phone pass (2026-10-17): thumb-sized targets, fields that do not make iOS zoom, readable fine print, and a footer that folds up. */
@media (max-width: 720px){
  /* !important on purpose: iOS Safari zooms the page when a field under 16px takes focus, and the fields are styled in a dozen stylesheets */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]), select, textarea{ font-size:16px !important; }
  .logo{ min-height:44px; min-width:44px; align-items:center; }
  :is(.static-nav, .blog-start-here, .blog-post-nav, .glossary-jump) a{ display:flex; align-items:center; min-height:44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]), select{ min-height:44px; }
  main summary{ padding-block:12px; }
  .chip{ min-height:40px; }
  .detail-link{ padding:12px 10px; margin:-12px -10px; }
  .fomc-sep, .fomc-toggle{ min-height:44px; }
  .legal-disclaimer{ font-size:12px; }
}
/* The footer had five columns and about 45 links, 2,785px on a phone: over half of a short page. Below 620px js/footer.js folds each column
   under its heading (a button inside the h4); without JavaScript the lists simply stay open. */
@media (max-width: 620px){
  .footer-acc .footer-grid{ gap:0; margin-bottom:24px; }
  .footer-acc .footer-brand{ margin-bottom:20px; }
  .footer-acc .footer-col{ border-top:1px solid rgba(255,255,255,0.1); }
  .footer-acc .footer-col:last-child{ border-bottom:1px solid rgba(255,255,255,0.1); }
  .footer-acc .footer-col h4{ margin:0; }
  .footer-acc .footer-col h4 button{
    display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:0; border:0; background:none; cursor:pointer;
    color:rgba(255,255,255,0.85); font:inherit; letter-spacing:inherit; text-transform:inherit; text-align:left;
  }
  .footer-acc .footer-col h4 button::after{
    content:""; flex:none; width:8px; height:8px; margin-right:4px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .2s ease;
  }
  .footer-acc .footer-col[data-open="true"] h4 button::after{ transform:rotate(-135deg); }
  .footer-acc .footer-col h4 button:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; border-radius:4px; }
  .footer-acc .footer-col ul{ gap:0; padding-bottom:10px; }
  .footer-acc .footer-col[data-open="false"] ul{ display:none; }
  .footer-acc .footer-col a{ display:flex; align-items:center; min-height:44px; }
  .footer-inline{ gap:0 24px; padding:14px 0; }
  .footer-inline a, .footer-legal a{ display:inline-flex; align-items:center; min-height:44px; }
  .footer-legal{ gap:0 24px; }
  /* the label rows (stock pages, superinvestors, guides) scroll sideways in one line instead of wrapping into six, so three rows cost about 200px, not 540px */
  .footer-stocks{ gap:0 22px; padding:10px 0; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; }
  .footer-stocks::-webkit-scrollbar{ height:6px; }
  .footer-stocks::-webkit-scrollbar-track{ background:transparent; }
  .footer-stocks::-webkit-scrollbar-thumb{ background:rgba(139,127,255,0.45); border-radius:999px; }
  .footer-stocks-label{ flex:0 0 auto; padding-right:2px; }
  .footer-stocks a{ display:inline-flex; align-items:center; min-height:44px; flex:0 0 auto; white-space:nowrap; }
}
@media (max-width: 620px) and (prefers-reduced-motion: reduce){
  .footer-acc .footer-col h4 button::after{ transition:none; }
}

/* A hidden tooltip bubble (.hover-tip-bubble) near the right edge widened the page by 18px at 1024px wide (a sideways scrollbar on a small laptop or a
   tablet). clip, unlike hidden, does not turn the page into a scroll container, so position:sticky (header, section bar) keeps working. */
html{ overflow-x:clip; }
/* a stock link that replaced a button (.sd-open) keeps the button's box */
.stock-link.sd-open{ display:inline-block; }