/* ==========================================================================
   FreeFlow Finance — design system
   Palette: near-black ink base, deep violet structure, lilac + antique-gold
   accents. Gold marks the number that matters most on a page (fair value,
   target price); lilac marks interactive/structural elements; the rating
   colors (green/amber/red) are a functional finance convention, kept muted
   rather than neon so they sit inside the rest of the palette.
   Type: Newsreader (display serif, editorial/annual-report register) +
   IBM Plex Sans (UI/body) + IBM Plex Mono (every number, ticker, table).
   ========================================================================== */

:root{
  --ink:        #0a0912;
  --ink-2:      #0d0c16;
  --surface:    #15131f;
  --surface-2:  #1b1828;
  --surface-3:  #241f33;
  --line:       #2b2739;
  --line-soft:  #201d2b;

  --violet-900: #241546;
  --violet-700: #422a7a;
  --violet-600: #52349a;
  --violet-500: #6d3fc0;
  --violet-400: #8a63d6;
  --lilac:      #b9a3f5;
  --lilac-dim:  #9483c4;

  --gold:       #c9a227;
  --gold-soft:  #e4c97a;

  --text:       #f1eef8;
  --text-muted: #a7a0bd;
  --text-dim:   #736c8c;

  --green:      #4fb787;
  --green-soft: rgba(79,183,135,.14);
  --amber:      #d4a344;
  --amber-soft: rgba(212,163,68,.14);
  --red:        #dd6b7f;
  --red-soft:   rgba(221,107,127,.14);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 20px 60px -20px rgba(0,0,0,.6);
  --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.5);

  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --max: 1240px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{ overflow-x: hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0; background: var(--ink); color: var(--text);
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1100px 600px at 12% -10%, rgba(109,63,192,.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(185,163,245,.08), transparent 55%);
  background-attachment: fixed;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 500; margin: 0 0 .4em; letter-spacing: -.01em; }
p{ margin: 0 0 1em; color: var(--text-muted); }
.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
::selection{ background: var(--violet-500); color: #fff; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px){ .wrap{ padding: 0 18px; } }

/* ---------------------------------- header --------------------------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(10,9,18,.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.header-row{ display:flex; align-items:center; gap:20px; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-size: 20px; color: var(--text); white-space:nowrap; }
.brand-mark{ width: 30px; height: 30px; flex: none; }
.brand small{ display:block; font-family: var(--font-body); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lilac-dim); margin-top:1px; }

.main-nav{ display:flex; align-items:center; gap: 4px; margin-left: 8px; position:relative; }
.main-nav a, .nav-btn{
  font-size: 13.5px; color: var(--text-muted); padding: 8px 12px; border-radius: 8px;
  cursor:pointer; border:none; background:none; font-family: var(--font-body);
  display:flex; align-items:center; gap:5px;
}
.main-nav a:hover, .nav-btn:hover{ color: var(--text); background: var(--surface-2); }
.main-nav a.active{ color: var(--text); background: var(--surface-2); }
.caret{ width:8px; height:8px; opacity:.6; transform: translateY(1px); }

.sector-menu{
  position:absolute; top: 44px; left:0; background: var(--surface); border:1px solid var(--line);
  border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow); display:none;
  grid-template-columns: 1fr 1fr; gap:2px; width: 480px; z-index: 60;
}
.sector-menu.open{ display:grid; }
.sector-menu a{ display:flex; flex-direction:column; gap:1px; padding:9px 11px; border-radius:8px; }
.sector-menu a:hover{ background: var(--surface-3); }
.sector-menu .sm-name{ font-size:13px; color:var(--text); }
.sector-menu .sm-meta{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); }

.header-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.search-box{ position:relative; }
.search-input{
  background: var(--surface-2); border:1px solid var(--line); color: var(--text);
  border-radius: 20px; padding: 8px 14px 8px 34px; font-size: 13px; width: 200px;
  font-family: var(--font-body); transition: width .18s ease, border-color .18s ease;
}
.search-input:focus{ outline:none; width: 260px; border-color: var(--violet-500); }
.search-icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--text-dim); pointer-events:none; }
.search-results{
  position:absolute; top: 40px; right:0; width: 320px; max-height: 420px; overflow:auto;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); display:none; z-index: 70;
}
.search-results.open{ display:block; }
.sr-item{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.sr-item:last-child{ border-bottom:none; }
.sr-item:hover{ background: var(--surface-2); }
.sr-tick{ font-family:var(--font-mono); font-size:12.5px; color:var(--lilac); width:52px; flex:none; }
.sr-name{ font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.sr-rating{ font-size:10px; flex:none; }
.mobile-toggle{ display:none; }

@media (max-width: 980px){
  .main-nav{ display:none; }
  .main-nav.mobile-open{
    display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0;
    background: var(--surface); border-bottom:1px solid var(--line); padding:10px; gap:2px; box-shadow:var(--shadow);
  }
  .main-nav.mobile-open a, .main-nav.mobile-open .nav-btn{ width:100%; padding:12px 14px; }
  .main-nav.mobile-open .sector-menu{ position:static; width:100%; box-shadow:none; border:none; margin-top:4px; display:none; }
  .main-nav.mobile-open .sector-menu.open{ display:grid; grid-template-columns:1fr; }
  .mobile-toggle{ display:flex; }
  .search-input{ width: 140px; }
  .search-input:focus{ width: 180px; }
}
.mobile-toggle{ background:none; border:1px solid var(--line); border-radius:8px; width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer; color:var(--text);}
.mobile-toggle svg{ width:18px; height:18px; }

/* ---------------------------------- sidebar ----------------------------
   A persistent index of the whole coverage universe. Each ticker carries a
   rating dot, so the rail doubles as a heatmap: scroll it and you can see
   where the model is positive and where it isn't, across all 100 names,
   without opening anything.
   ---------------------------------------------------------------------- */
.layout{ display:grid; grid-template-columns: 266px minmax(0,1fr); align-items:start; }
.layout > *{ min-width:0; }

.sidebar{
  position:sticky; top:68px; height:calc(100vh - 68px); overflow-y:auto; overscroll-behavior:contain;
  border-right:1px solid var(--line-soft); background:rgba(13,12,22,.5);
  padding:20px 0 40px; scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent;
}
.sidebar::-webkit-scrollbar{ width:8px; }
.sidebar::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:4px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }

.sb-pad{ padding:0 14px; }
.sb-head{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--text-dim);
  padding:0 12px; margin:22px 0 8px;
}
.sb-head:first-child{ margin-top:0; }

.sb-link{
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:8px;
  font-size:13px; color:var(--text-muted); cursor:pointer;
}
.sb-link:hover{ background:var(--surface-2); color:var(--text); }
.sb-link.active{ background:var(--violet-900); color:var(--text); }
.sb-link svg{ width:15px; height:15px; flex:none; opacity:.75; }

.sb-group{ margin-bottom:2px; }
.sb-group-head{
  display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border-radius:8px;
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-body); font-size:12.5px; color:var(--text-muted);
}
.sb-group-head:hover{ background:var(--surface-2); color:var(--text); }
.sb-group-head .sb-ico{ width:15px; height:15px; flex:none; color:var(--lilac-dim); }
.sb-group-head .sb-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-group-head .sb-n{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim); }
.sb-group-head .sb-caret{
  width:11px; height:11px; flex:none; transition:transform .16s ease; opacity:.55;
}
.sb-group.open .sb-group-head{ color:var(--text); }
.sb-group.open .sb-caret{ transform:rotate(90deg); }

.sb-list{ display:none; padding:2px 0 6px 12px; margin-left:19px; border-left:1px solid var(--line-soft); }
.sb-group.open .sb-list{ display:block; }

.sb-co{
  display:flex; align-items:center; gap:8px; padding:5.5px 10px; border-radius:6px;
  font-size:12px; color:var(--text-muted); cursor:pointer;
}
.sb-co:hover{ background:var(--surface-2); color:var(--text); }
.sb-co.active{ background:var(--violet-700); color:#fff; }
.sb-co .dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.sb-co .tk{ font-family:var(--font-mono); font-size:11.5px; flex:none; }
.sb-co .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; opacity:.62; }

.sb-backdrop{
  display:none; position:fixed; inset:68px 0 0 0; background:rgba(6,5,12,.6);
  z-index:44; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.sb-backdrop.show{ display:block; }

@media (max-width:1080px){
  .layout{ grid-template-columns: minmax(0,1fr); }
  .sidebar{
    position:fixed; top:68px; left:0; width:278px; z-index:45;
    transform:translateX(-100%); transition:transform .2s ease;
    background:var(--ink-2); border-right:1px solid var(--line);
  }
  .sidebar.open{ transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){ .sidebar{ transition:none; } }

/* ---------------------------------- buttons/pills --------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding: 11px 20px; border-radius: 999px;
  font-size: 13.5px; font-family: var(--font-body); font-weight:500; cursor:pointer; border:1px solid transparent;
}
.btn-violet{ background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); color:#fff; }
.btn-ghost{ border-color: var(--line); color: var(--text); background: var(--surface-2); }
.btn-ghost:hover{ border-color: var(--violet-500); }

.tag{ display:inline-flex; align-items:center; font-size:11px; letter-spacing:.04em; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); font-family: var(--font-mono);}
.tag-lilac{ background: rgba(185,163,245,.12); color: var(--lilac); }

.rating-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-family: var(--font-mono); padding: 5px 12px; border-radius: 999px; font-weight:600; letter-spacing:.02em; white-space:nowrap;}
.rating-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.r-strongbuy{ background: var(--green-soft); color: var(--green); }
.r-buy{ background: var(--green-soft); color: var(--green); opacity:.88;}
.r-hold{ background: var(--amber-soft); color: var(--amber); }
.r-reduce{ background: var(--red-soft); color: var(--red); opacity:.9;}
.r-sell{ background: var(--red-soft); color: var(--red); }

/* ---------------------------------- hero ------------------------------- */
.hero{ position:relative; padding: 76px 0 56px; overflow:hidden; }
.hero-flow{ position:absolute; inset: -40px 0 auto 0; height: 480px; z-index:0; opacity:.9; pointer-events:none; }
.hero-inner{ position:relative; z-index:1; max-width: 760px; }
.eyebrow{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--lilac); margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{ content:''; width:26px; height:1px; background: var(--lilac); }
.hero h1{ font-size: clamp(34px, 5vw, 54px); line-height:1.05; color:var(--text); margin-bottom:20px; }
.hero h1 em{ font-style: italic; color: var(--gold-soft); }
.hero .lede{ font-size:16.5px; max-width: 560px; color: var(--text-muted); margin-bottom: 30px;}
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.snapshot-strip{
  display:flex; gap:0; margin-top:52px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow-x:auto; position:relative; z-index:1;
}
.snap-item{ padding: 16px 26px; border-right:1px solid var(--line); flex:none; min-width:140px; }
.snap-item:last-child{ border-right:none; }
.snap-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color: var(--text-dim); margin-bottom:6px; }
.snap-value{ font-family: var(--font-mono); font-size:17px; color: var(--text); }
.snap-value.up{ color: var(--green); } .snap-value.down{ color: var(--red); }

/* ---------------------------------- section scaffolding ---------------- */
section{ padding: 64px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: 32px; flex-wrap:wrap;}
.section-head h2{ font-size: 28px; color:var(--text); }
.section-head .sub{ color:var(--text-muted); font-size:14px; max-width:520px; }
.section-link{ font-size:13px; color: var(--lilac); white-space:nowrap; display:flex; align-items:center; gap:6px;}
.section-link:hover{ color: var(--gold-soft); }
hr.rule{ border:none; border-top:1px solid var(--line); margin: 8px 0; }

/* ---------------------------------- sector grid ------------------------ */
.sector-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.sector-grid > *{ min-width: 0; }
.sector-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; cursor:pointer; transition: border-color .15s ease, transform .15s ease;
  display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
}
.sector-card:hover{ border-color: var(--violet-500); transform: translateY(-2px); }
.sector-card .sc-top{ display:flex; align-items:center; justify-content:space-between; }
.sector-card .sc-icon{ width:34px; height:34px; color: var(--lilac); }
.sector-card .sc-count{ font-family:var(--font-mono); font-size:11px; color:var(--text-dim); }
.sector-card h3{ font-size:19px; color:var(--text); margin:0; }
.sector-card p{ font-size:13px; margin:0; line-height:1.55; }
.sector-card .sc-stats{ display:flex; gap:18px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft); }
.sector-card .sc-stat{ min-width: 0; }
.sector-card .sc-stat b{ display:block; font-family:var(--font-mono); font-size:15px; color:var(--text); font-weight:500; white-space:nowrap; }
.sector-card .sc-stat span{ font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }

/* ---------------------------------- tables ------------------------------ */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
table.ff-table{ width:100%; border-collapse: collapse; font-size:13.5px; min-width:720px; }
table.ff-table th{
  text-align:left; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color: var(--text-dim); padding: 14px 16px; border-bottom:1px solid var(--line); white-space:nowrap; cursor:pointer;
  position: sticky; top:0; background: var(--surface); user-select:none;
}
table.ff-table th:hover{ color: var(--lilac); }
table.ff-table th.sorted{ color: var(--lilac); }
table.ff-table td{ padding: 13px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.ff-table tbody tr{ cursor:pointer; transition: background .1s ease; }
table.ff-table tbody tr:hover{ background: var(--surface-2); }
table.ff-table tbody tr:last-child td{ border-bottom:none; }
td.tk{ font-family: var(--font-mono); color: var(--lilac); font-weight:600; }
td.num, th.num{ text-align:right; font-family:var(--font-mono); }
td.upside-pos{ color: var(--green); font-family:var(--font-mono);}
td.upside-neg{ color: var(--red); font-family:var(--font-mono);}
.row-name{ color:var(--text-dim); font-size:12px; }

/* ---------------------------------- cards / stat blocks ------------------ */
.card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; }
.stat-grid > *{ min-width: 0; }
.stat-cell{ background: var(--surface); padding: 20px 22px; }
.stat-cell .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:8px; }
.stat-cell .value{ font-family: var(--font-mono); font-size:22px; color:var(--text); }
.stat-cell .value.gold{ color: var(--gold-soft); }
.stat-cell .sub{ font-size:11.5px; margin-top:4px; color:var(--text-dim); }

/* ---------------------------------- company header ----------------------- */
.co-hero{ padding: 40px 0 8px; }
.co-crumb{ font-size:12.5px; color:var(--text-dim); margin-bottom:20px; display:flex; gap:8px; align-items:center; }
.co-crumb a:hover{ color:var(--lilac); }
.co-top{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start; margin-bottom: 28px;}
.co-id{ display:flex; gap:18px; align-items:center; }
.co-mono{
  width:56px; height:56px; border-radius:14px; background: linear-gradient(150deg, var(--violet-600), var(--violet-900));
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:15px; color:#fff; flex:none;
  border:1px solid var(--violet-400);
}
.co-name{ font-size: 30px; color:var(--text); margin:0; }
.co-sub{ font-size:13px; color:var(--text-muted); display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:4px;}
.co-price-block{ text-align:right; }
.co-price{ font-family:var(--font-mono); font-size:32px; color:var(--text); }
.co-price .cur{ font-size:16px; color:var(--text-dim); }
.co-fv-row{ display:flex; gap:16px; align-items:baseline; justify-content:flex-end; margin-top:6px; }
.co-fv{ font-family:var(--font-mono); font-size:16px; color: var(--gold-soft); }
.co-up{ font-family:var(--font-mono); font-size:14px; }

.co-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); margin-top: 6px; overflow-x:auto;}
.co-tab{ padding: 13px 18px; font-size:13px; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; font-family:var(--font-body);}
.co-tab:hover{ color:var(--text); }
.co-tab.active{ color:var(--text); border-color: var(--gold); }
.co-panel{ display:none; padding-top: 34px; }
.co-panel.active{ display:block; }

.two-col{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items:start; }
.two-col > *{ min-width: 0; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } .co-price-block{ text-align:left; } .co-fv-row{ justify-content:flex-start; } }

.prose p{ font-size:14.5px; line-height:1.75; color: var(--text-muted); }
.prose h4{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color: var(--lilac); margin: 26px 0 12px; }
.prose h4:first-child{ margin-top:0; }
ul.bullets{ margin:0 0 1em; padding:0; list-style:none; }
ul.bullets li{ position:relative; padding-left:22px; margin-bottom:12px; font-size:14px; line-height:1.6; color:var(--text-muted); }
ul.bullets.bull li::before{ content:'+'; position:absolute; left:0; top:-1px; color: var(--green); font-family:var(--font-mono); font-weight:700; }
ul.bullets.risk li::before{ content:'−'; position:absolute; left:1px; top:-1px; color: var(--red); font-family:var(--font-mono); font-weight:700; }
ul.bullets.cat li::before{ content:'›'; position:absolute; left:2px; top:-1px; color: var(--lilac); font-family:var(--font-mono); font-weight:700; }

.seg-bar{ display:flex; height:34px; border-radius:8px; overflow:hidden; margin-bottom:14px; }
.seg-bar div{ display:flex; align-items:center; justify-content:center; font-size:10.5px; font-family:var(--font-mono); color:#fff; overflow:hidden; white-space:nowrap; }
.seg-legend{ display:flex; flex-wrap:wrap; gap:12px 20px; margin-bottom: 8px;}
.seg-legend .li{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted); }
.seg-legend .sw{ width:10px; height:10px; border-radius:3px; flex:none; }

.score-row{ display:grid; grid-template-columns: 110px 1fr 22px; align-items:center; gap:10px; margin-bottom:9px; font-size:12px; }
.score-row .track{ height:6px; background: var(--surface-3); border-radius:4px; overflow:hidden; }
.score-row .fill{ height:100%; background: linear-gradient(90deg, var(--violet-500), var(--lilac)); border-radius:4px; }
.score-row .n{ font-family:var(--font-mono); color:var(--text-dim); text-align:right; }
.score-row .label{ color:var(--text-muted); }

.range-wrap{ padding: 10px 4px 0; }
.range-track{ position:relative; height:8px; background: var(--surface-3); border-radius:4px; margin: 34px 0 30px; }
.range-fill{ position:absolute; top:0; bottom:0; background: linear-gradient(90deg, var(--red), var(--amber) 50%, var(--green)); border-radius:4px; opacity:.35;}
.range-pt{ position:absolute; top:50%; transform:translate(-50%,-50%); text-align:center; }
.range-pt .dot{ width:12px; height:12px; border-radius:50%; margin:0 auto; border:2px solid var(--ink); }
.range-pt .lbl{ font-size:10px; color:var(--text-dim); margin-top:8px; white-space:nowrap; text-transform:uppercase; letter-spacing:.05em;}
.range-pt .val{ font-family:var(--font-mono); font-size:13px; color:var(--text); margin-top:2px; white-space:nowrap;}
.range-pt.price .dot{ background: var(--gold); width:14px; height:14px; }
.range-pt.price .val{ color: var(--gold-soft); }

.grid-table{ border-collapse:collapse; width:100%; font-family:var(--font-mono); font-size:12px; }
.grid-table th{ font-size:10px; color:var(--text-dim); padding:8px; text-transform:uppercase; letter-spacing:.04em; font-weight:400;}
.grid-table td{ text-align:center; padding:10px 6px; border-radius:6px; }
.grid-table .axis{ color: var(--text-dim); font-size:11px; }
.grid-table .corner{ color:var(--text-dim); font-size:9px; text-align:left; padding-left:4px;}

.model-table{ font-size:12.5px; }
.model-table th, .model-table td{ text-align:right; padding:9px 12px; }
.model-table th:first-child, .model-table td:first-child{ text-align:left; }
.model-table tbody tr.stage2{ opacity:.72; }
.stage-divider td{ border-top: 1px dashed var(--line); padding-top:14px !important; }

.spark{ width:100%; height:60px; display:block; }

.comp-note{ background: var(--surface-2); border:1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding:14px 18px; font-size:12.5px; color: var(--text-muted); margin-bottom:20px;}

/* ---------------------------------- about page --------------------------- */
.about-hero{ display:grid; grid-template-columns: 220px 1fr; gap:40px; align-items:center; padding: 50px 0 20px;}
@media (max-width:700px){ .about-hero{ grid-template-columns:1fr; } }
.avatar{ width:200px; height:200px; border-radius:28px; }
.social-row{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.social-btn{ display:flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2); font-size:13px; }
.social-btn:hover{ border-color: var(--violet-500); }
.social-btn svg{ width:16px; height:16px; }
.timeline{ position:relative; padding-left:28px; }
.timeline::before{ content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background: var(--line); }
.tl-item{ position:relative; margin-bottom:26px; }
.tl-item::before{ content:''; position:absolute; left:-28px; top:4px; width:11px; height:11px; border-radius:50%; background: var(--violet-900); border:2px solid var(--lilac); }
.tl-item h4{ font-size:14.5px; color:var(--text); margin:0 0 4px; font-family:var(--font-body); font-weight:600;}
.tl-item p{ font-size:13px; margin:0; }

/* ---------------------------------- methodology --------------------------- */
.method-step{ display:grid; grid-template-columns:44px 1fr; gap:18px; margin-bottom:34px; }
.method-num{ font-family:var(--font-display); font-size:26px; color: var(--lilac-dim); line-height:1;}
.method-step h3{ font-size:18px; margin-bottom:8px;}
.method-step p{ font-size:14px; }
.formula{ background: var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:14px 18px; font-family:var(--font-mono); font-size:13px; color:var(--lilac); margin:12px 0; overflow-x:auto; white-space:nowrap;}

.faq-item{ border-bottom:1px solid var(--line); padding: 18px 0; }
.faq-q{ font-family: var(--font-body); font-weight:600; font-size:14.5px; color:var(--text); cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.faq-a{ font-size:13.5px; color:var(--text-muted); margin-top:10px; display:none; line-height:1.7;}
.faq-item.open .faq-a{ display:block; }
.faq-item.open .faq-plus{ transform: rotate(45deg); }
.faq-plus{ font-family:var(--font-mono); font-size:18px; color:var(--lilac); transition: transform .15s ease; flex:none; margin-left:12px;}

/* ---------------------------------- footer --------------------------------- */
footer{ border-top:1px solid var(--line); padding: 46px 0 40px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:36px;}
@media (max-width:760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-grid h5{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:14px;}
.footer-grid a{ display:block; font-size:13px; color:var(--text-muted); margin-bottom:9px; }
.footer-grid a:hover{ color: var(--lilac); }
.disclaimer{ font-size:11.5px; color: var(--text-dim); line-height:1.7; padding-top:26px; border-top:1px solid var(--line-soft); }
.disclaimer b{ color: var(--text-muted); }

/* ---------------------------------- misc ------------------------------------ */
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-pill{ font-size:12px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--text-muted); cursor:pointer; background:var(--surface); font-family:var(--font-body);}
.filter-pill:hover{ border-color:var(--violet-500); }
.filter-pill.active{ background: var(--violet-700); border-color: var(--violet-500); color:#fff; }
.empty-state{ text-align:center; padding: 80px 20px; color:var(--text-dim); }
.back-top{ position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40;}
.back-top.show{ opacity:1; pointer-events:auto; }
.skiplink{ position:absolute; left:-9999px; top:0; background:var(--violet-600); color:#fff; padding:10px 16px; z-index:100;}
.skiplink:focus{ left:16px; top:16px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--lilac); outline-offset:2px; }
.loading{ text-align:center; padding:100px 20px; color:var(--text-dim); font-family:var(--font-mono); font-size:13px;}

/* ---------------------------------- screener & portfolio ----------------- */
.scr-label{ font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-dim); margin-bottom:10px; }
.scr-sub{ text-transform:none; letter-spacing:0; opacity:.7; margin-left:8px; font-size:11px; }
.scr-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.scr-grid > *{ min-width:0; }
.scr-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.scr-field label{ font-size:12px; color:var(--text-muted); }
.scr-input{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:9px 12px; font-size:13.5px; font-family:var(--font-mono);
  width:100%; min-width:0;
}
.scr-input:focus{ outline:none; border-color:var(--violet-500); }
select.scr-input{ font-family:var(--font-body); cursor:pointer; }
.scr-hint{ font-size:10.5px; color:var(--text-dim); }

.pf-add{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.pf-add .scr-field{ flex:1; min-width:130px; }
.pf-remove{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:6px; color:var(--text-dim); cursor:pointer; font-size:17px; line-height:1;
}
.pf-remove:hover{ background:var(--red-soft); color:var(--red); }

/* ---------------------------------- financial analysis ------------------- */
.fin-metric{ margin-bottom:20px; }
.fin-metric:last-child{ margin-bottom:0; }
.fin-metric-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:12px; }
.fin-metric-label{ font-size:13px; color:var(--text-muted); }
.fin-metric-value{ font-family:var(--font-mono); font-size:15px; color:var(--text); }
.fin-track{ position:relative; height:6px; background:var(--surface-3); border-radius:4px; }
.fin-fill{ height:100%; background:linear-gradient(90deg,var(--violet-700),var(--lilac)); border-radius:4px; }
.fin-marker{
  position:absolute; top:50%; width:3px; height:14px; border-radius:2px;
  background:var(--gold); transform:translate(-50%,-50%);
}
.fin-metric-hint{ font-size:10.5px; color:var(--text-dim); margin-top:7px; }

.fin-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:7px 0; font-size:13px; color:var(--text-muted); }
.fin-row .mono{ color:var(--text); }
.fin-row-total{ border-top:1px solid var(--line); margin-top:4px; padding-top:11px; color:var(--text); }
.fin-row-total .mono{ color:var(--gold-soft); }

@media (max-width:640px){
  .pf-add{ flex-direction:column; align-items:stretch; }
  .pf-add .btn{ width:100%; justify-content:center; }
}