/* Asset Selector — Landing page styles
   Aesthetic: Bloomberg-terminal serious, dense, dark. */

:root{
  --bg:        #07090f;
  --bg-soft:   #0b0f17;
  --surface:   #0f1521;
  --surface-2: #131a28;
  --line:      #1c2334;
  --line-2:    #262f44;
  --fg:        #e9ecf2;
  --fg-mid:    #aab3c5;
  --fg-dim:    #6b7388;
  --fg-faint:  #4a5165;

  --accent:    #ff7a45;   /* amber from the screenshot */
  --accent-2:  #5b8def;   /* ticker blue */
  --up:        #2bd47d;
  --down:      #ff5b6b;

  --serif: "IBM Plex Serif", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --pad-x:   max(28px, calc((100vw - 1360px) / 2));
  --row-pad: 14px;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11"; }
body{ overflow-x:hidden; }
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
hr{border:0; border-top:1px solid var(--line)}

html{ scroll-behavior:smooth }
section[id]{ scroll-margin-top:84px }

/* density modifier */
body[data-density="compact"]{ --row-pad: 9px; font-size:14px; }
body[data-density="spacious"]{ --row-pad: 20px; font-size:15.5px; }

/* ─── shared atoms ───────────────────────────────────────── */
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-dim);
}
.kicker .dot{ color:var(--accent); margin-right:6px }
.mono{ font-family:var(--mono); font-feature-settings:"zero","ss01"; }
.tnum{ font-variant-numeric:tabular-nums; }
.up{ color:var(--up) } .dn{ color:var(--down) }
.faint{ color:var(--fg-dim) }
.hl{ color:var(--accent) }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:2px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  border:1px solid var(--line-2); color:var(--fg);
  transition:background .12s, border-color .12s;
}
.btn:hover{ background:#161e2e; border-color:#3a4763 }
.btn-primary{ background:var(--accent); color:#160a04; border-color:var(--accent);
  font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.btn-primary:hover{ background:#ffa07a; border-color:#ffa07a }
.btn-dark{ background:#000; color:var(--fg); border-color:var(--accent);
  font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.btn-dark:hover{ background:#0d1320; border-color:#ffa07a }
.btn-ghost{ border-color:transparent }
.btn-arrow::after{ content:"→"; }

/* ─── utility bar (top strip) ─────────────────────────────── */
.util{
  height:28px; display:flex; align-items:center;
  padding:0 var(--pad-x);
  background:#04060b; color:var(--fg-dim);
  font-family:var(--mono); font-size:11px;
  border-bottom:1px solid var(--line);
  gap:20px;
}
.util .live{ display:flex; align-items:center; gap:8px; color:var(--up) }
.util .live::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--up); box-shadow:0 0 0 0 currentColor;
  animation:pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(43,212,125,.5)}
  70%{ box-shadow:0 0 0 6px rgba(43,212,125,0)}
  100%{ box-shadow:0 0 0 0 rgba(43,212,125,0)}
}
.util .sep{ color:var(--fg-faint) }
.util .right{ margin-left:auto; display:flex; gap:18px }

/* ─── nav ─────────────────────────────────────────────────── */
.nav{
  display:flex; align-items:center; gap:36px;
  height:64px; padding:0 var(--pad-x);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,21,33,.4), rgba(15,21,33,0));
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:600; letter-spacing:-.01em; }
.brand-logo{ width:30px; height:30px; object-fit:contain; }
.brand-wm{ display:flex; align-items:baseline; gap:8px; line-height:1 }
.brand-fm{ font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--fg) }
.brand-prod{
  font-family:var(--mono); font-size:12px; color:var(--accent);
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  padding-left:10px; border-left:1px solid var(--line-2);
}
.nav-links{ display:flex; gap:26px; font-size:13.5px; color:var(--fg-mid) }
.nav-links a{ position:relative; padding:6px 0 }
.nav-links a:hover{ color:var(--fg) }
.nav-cta{ margin-left:auto; display:flex; gap:10px; align-items:center }
.nav-cta .login{ font-size:13px; color:var(--fg-mid); padding:8px 10px }
.nav-cta .login:hover{ color:var(--fg) }

/* ─── hero ────────────────────────────────────────────────── */
.hero{
  padding: 70px var(--pad-x) 48px;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(91,141,239,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,141,239,.045) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 70%);
  pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:64px; align-items:start; position:relative }
.hero h1{
  font-size: clamp(48px, 6.2vw, 88px);
  line-height:.96; letter-spacing:-.035em; font-weight:600;
  text-wrap:balance; margin:18px 0 22px;
}
.hero h1 em{ font-style:italic; font-family:var(--serif); font-weight:400; color:var(--accent); }
.hero h1 .strike{ text-decoration:line-through; text-decoration-color:var(--fg-faint); text-decoration-thickness:2px; color:var(--fg-dim); font-weight:400 }
.hero-sub{
  font-size:17.5px; line-height:1.55; color:var(--fg-mid);
  max-width:520px; text-wrap:pretty;
}
.hero-sub strong{ color:var(--fg); font-weight:500 }
.hero-cta{ display:flex; gap:12px; margin-top:32px; align-items:center }
.hero-cta .or{ color:var(--fg-faint); font-family:var(--mono); font-size:11px; padding:0 4px }

.hero-meta{
  margin-top:46px; display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line);
}
.hero-meta > div{ padding:18px 0; border-right:1px solid var(--line) }
.hero-meta > div:last-child{ border-right:0 }
.hero-meta .num{ font-family:var(--mono); font-size:26px; color:var(--fg); letter-spacing:-.02em }
.hero-meta .num .unit{ font-size:14px; color:var(--fg-dim); margin-left:2px }
.hero-meta .lbl{ font-family:var(--mono); font-size:10.5px; color:var(--fg-dim);
  letter-spacing:.1em; text-transform:uppercase; margin-top:6px }

/* hero right column — terminal card */
.term-card{
  background:var(--surface);
  border:1px solid var(--line);
  font-family:var(--mono);
  position:relative;
}
.term-card .term-head{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--line);
  font-size:11px; color:var(--fg-dim); letter-spacing:.08em;
}
.term-card .dots{ display:flex; gap:5px; margin-right:6px }
.term-card .dots span{ width:9px; height:9px; border-radius:50%; background:#2a3346 }
.term-card .dots span:first-child{ background:var(--accent) }
.term-card .term-body{ padding:18px 18px 16px; font-size:12.5px; line-height:1.7 }
.term-card .ln{ display:flex; gap:10px }
.term-card .ln .ix{ color:var(--fg-faint); width:22px; text-align:right; user-select:none }
.term-card .prompt{ color:var(--accent); margin-right:8px }
.term-card .key{ color:var(--accent-2) }
.term-card .str{ color:#a6e0a3 }
.term-card .com{ color:var(--fg-dim); font-style:italic }
.term-card .cursor{
  display:inline-block; width:7px; height:13px; background:var(--accent);
  vertical-align:-2px; animation:blink 1.05s steps(2,end) infinite; margin-left:4px;
}
@keyframes blink{ 50%{opacity:0} }

/* ─── peer comparison snapshot ────────────────────────────── */
.section{ padding: 90px var(--pad-x); border-bottom:1px solid var(--line); position:relative }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:36px; gap:40px; flex-wrap:wrap }
.section-head h2{ font-size:clamp(34px, 4vw, 52px); line-height:1; letter-spacing:-.025em; font-weight:500; max-width:680px; text-wrap:balance }
.section-head h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent) }
.section-head p{ color:var(--fg-mid); max-width:380px; font-size:15px; line-height:1.55; text-wrap:pretty }
.section-num{ font-family:var(--mono); font-size:11px; color:var(--fg-dim); letter-spacing:.18em; margin-bottom:14px }

.peer-frame{
  border:1px solid var(--line); background:var(--surface);
}
.peer-frame .peer-bar{
  background:#0a0d15; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:18px; padding:12px 16px;
  font-family:var(--mono); font-size:12px; color:var(--fg-mid);
}
.peer-bar .lbl{ color:var(--fg-dim); letter-spacing:.1em; text-transform:uppercase; font-size:10.5px }
.peer-bar .selector{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line-2); padding:5px 10px; min-width:280px;
  background:var(--bg-soft);
}
.peer-bar .selector b{ color:var(--fg); font-weight:500 }
.peer-bar .selector .caret{ margin-left:auto; color:var(--fg-dim) }

.peer-meta{ display:flex; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface-2);
  font-family:var(--mono); font-size:11.5px; }
.peer-meta .chip{ display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border:1px solid var(--line-2); color:var(--fg-mid); }
.peer-meta .chip .k{ color:var(--fg-dim) }
.peer-meta .chip.ok{ border-color:rgba(43,212,125,.4); color:var(--up) }
.peer-meta .chip.acc{ border-color:rgba(91,141,239,.4); color:var(--accent-2) }
.peer-meta h3{ font-family:var(--sans); font-size:17px; font-weight:500; color:var(--fg);
  margin-right:auto; align-self:center; letter-spacing:-.01em }

.peer-table-wrap{ overflow:auto; }
.peer-table{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px;
  white-space:nowrap; min-width:1100px; }
.peer-table th, .peer-table td{
  padding: var(--row-pad) 14px;
  text-align:right; border-bottom:1px solid var(--line);
}
.peer-table th{
  font-weight:400; color:var(--fg-dim); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.1em;
  background:#0a0e17; position:sticky; top:0;
  border-bottom:1px solid var(--line-2);
}
.peer-table th .sub{ display:block; color:var(--fg-faint); font-size:9.5px; margin-top:2px; letter-spacing:.06em; text-transform:none }
.peer-table th.sortable{ cursor:pointer }
.peer-table th.sortable:hover{ color:var(--fg) }
.peer-table th .arr{ color:var(--accent); margin-left:4px; font-family:var(--mono) }
.peer-table th:first-child, .peer-table td:first-child{ text-align:left; position:sticky; left:0; background:var(--surface); z-index:1 }
.peer-table th:first-child{ background:#0a0e17 }
.peer-table tr.avg td{ background:#101725; color:var(--fg-mid); font-size:11.5px }
.peer-table tr.avg td:first-child{ background:#101725 }
.peer-table tr:hover td{ background:#131a28 }
.peer-table tr:hover td:first-child{ background:#131a28 }
.peer-table .ticker{ color:var(--accent-2); font-weight:600; font-size:13px; letter-spacing:.02em }
.peer-table .co{ display:block; color:var(--fg-dim); font-size:11px; margin-top:2px; font-family:var(--sans) }
.peer-table .rating{ color:var(--fg); font-weight:500 }
.peer-table .rating.hi{ color:var(--up) }
.peer-table .rating.lo{ color:var(--down) }
.peer-table .bar{ display:inline-block; height:3px; width:48px; background:#1c2334; vertical-align:1px; margin-right:8px; position:relative }
.peer-table .bar i{ position:absolute; left:0; top:0; bottom:0; background:var(--accent) }

/* FCFE/FCFF divergence flag */
.peer-table tr.fcf-warn td{ background:rgba(255,180,60,.05); }
.peer-table tr.fcf-warn td:first-child{ background:rgba(255,180,60,.05); box-shadow:inset 2px 0 0 #ffb43c }
.peer-table tr.fcf-warn:hover td,
.peer-table tr.fcf-warn:hover td:first-child{ background:rgba(255,180,60,.10) }
.fcf-flag{
  display:inline-block; margin-left:8px; color:#ffb43c;
  font-size:13px; cursor:help; vertical-align:-1px;
  animation:fcf-blink 2.6s ease-in-out infinite;
}
@keyframes fcf-blink{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

/* tag chips list under section heading */
.cap-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:18px; font-family:var(--mono); font-size:11px; }
.cap-row span{ padding:5px 9px; border:1px solid var(--line); color:var(--fg-dim); letter-spacing:.04em }
.cap-row span.on{ color:var(--accent); border-color:rgba(255,122,69,.4) }

/* ─── manifesto pullquote ─────────────────────────────────── */
.manifesto{
  padding:120px var(--pad-x); border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255,122,69,.07), transparent 70%),
    var(--bg);
  text-align:left; position:relative;
}
.manifesto .quote{
  max-width:1080px; margin:0 auto;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(28px,3.4vw,46px); line-height:1.22; letter-spacing:-.01em;
  color:var(--fg); text-wrap:balance;
}
.manifesto .quote::before{
  content:"“"; font-family:var(--serif); font-size:140px; color:var(--accent);
  line-height:0; vertical-align:-30px; margin-right:8px;
}
.manifesto .quote b{ color:var(--accent); font-style:normal; font-family:var(--sans); font-weight:500; padding:0 4px }
.manifesto .attrib{ max-width:1080px; margin:36px auto 0; font-family:var(--mono); font-size:11.5px;
  color:var(--fg-dim); letter-spacing:.1em; text-transform:uppercase }

/* ─── how it works ───────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(5, 1fr); gap:0; border-top:1px solid var(--line);
  border-left:1px solid var(--line); }
.step{ border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:24px 22px 28px; position:relative; min-height:240px; display:flex; flex-direction:column }
.step .ix{ font-family:var(--mono); color:var(--fg-faint); font-size:11px; letter-spacing:.1em }
.step .ix b{ color:var(--accent); font-weight:500 }
.step .ttl{ margin-top:36px; font-size:18.5px; font-weight:500; letter-spacing:-.01em; color:var(--fg); line-height:1.2 }
.step .dsc{ margin-top:10px; color:var(--fg-mid); font-size:13.5px; line-height:1.5 }
.step .glyph{ margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:11px; color:var(--fg-dim) }
.step .glyph .pill{ color:var(--accent); border:1px solid rgba(255,122,69,.3); padding:3px 7px; margin-right:6px }

/* ─── features grid ───────────────────────────────────────── */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feat{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:28px 24px 30px; position:relative; min-height:260px;
  display:flex; flex-direction:column;
  transition:background .15s;
}
.feat:hover{ background:#0c111c }
.feat .feat-head{
  font-family:var(--mono); font-size:10.5px; color:var(--fg-dim);
  letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:10px;
}
.feat .feat-head .id{ color:var(--accent) }
.feat h4{ margin-top:16px; font-size:19px; font-weight:500; letter-spacing:-.01em; color:var(--fg); line-height:1.2 }
.feat p{ margin-top:10px; color:var(--fg-mid); font-size:13.5px; line-height:1.55 }
.feat .glyph{ margin-bottom:14px; height:34px; display:flex; align-items:center }
.feat .glyph svg{ width:32px; height:32px; }
.feat .meta-line{ margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:10.5px; color:var(--fg-faint); letter-spacing:.04em }

/* ─── methodology / how we rate ───────────────────────────── */
.method{ display:grid; grid-template-columns: .55fr 1fr; gap:64px; align-items:start }
.method .indicators{ border-top:1px solid var(--line) }
.method .ind-row{ display:grid; grid-template-columns: 60px 1fr 90px 90px; gap:18px;
  padding:18px 0; border-bottom:1px solid var(--line); align-items:center; }
.method .ind-row .id{ font-family:var(--mono); color:var(--fg-faint); font-size:11.5px }
.method .ind-row .nm{ font-size:15px; color:var(--fg) }
.method .ind-row .nm .desc{ display:block; font-size:12px; color:var(--fg-dim); margin-top:3px; font-family:var(--sans) }
.method .ind-row .wt{ font-family:var(--mono); font-size:12px; color:var(--fg-mid); text-align:right }
.method .ind-row .vis{ height:6px; background:#161e2e; border:0; position:relative }
.method .ind-row .vis i{ position:absolute; left:0; top:0; bottom:0; background:var(--accent) }

.method-side h3{ font-size:20px; letter-spacing:-.01em; font-weight:500 }
.method-side p{ color:var(--fg-mid); margin-top:14px; font-size:14.5px; line-height:1.6 }
.method-side .formula{
  margin-top:28px; padding:18px; border:1px solid var(--line); background:var(--surface);
  font-family:var(--mono); font-size:12.5px; line-height:1.7; color:var(--fg-mid);
}
.method-side .formula .k{ color:var(--accent-2) }
.method-side .formula .v{ color:var(--fg) }
.method-side .formula .c{ color:var(--fg-dim); font-style:italic }

/* BYO callout in the methodology side panel */
.byo-callout{
  margin-top:24px;
  border:1px solid var(--line-2);
  border-left:3px solid var(--accent);
  background:linear-gradient(90deg, rgba(255,122,69,.06), transparent 60%);
  padding:16px 18px 18px;
}
.byo-head{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; color:var(--fg);
  letter-spacing:.04em; text-transform:uppercase;
}
.byo-tag{
  background:var(--accent); color:#160a04; font-weight:700;
  padding:3px 8px; font-size:10.5px; letter-spacing:.12em;
}
.byo-list{
  margin:12px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:8px;
  color:var(--fg-mid); font-size:13.5px; line-height:1.5;
}
.byo-list li{
  position:relative; padding-left:20px;
}
.byo-list li::before{
  content:"›"; position:absolute; left:0; top:0;
  color:var(--accent); font-family:var(--mono); font-weight:600;
}
.byo-list b{ color:var(--fg); font-weight:500 }

/* "Your indicator" highlighted row */
.method .ind-row.ind-row-byo{
  background:linear-gradient(90deg, rgba(255,122,69,.05), transparent 70%);
  border-top:1px solid rgba(255,122,69,.25);
  border-bottom:1px solid rgba(255,122,69,.25);
}
.method .ind-row.ind-row-byo .id{
  color:var(--accent); font-weight:500;
}
.method .ind-row.ind-row-byo .nm{ color:var(--fg) }
.method .ind-row.ind-row-byo .nm .hl{ color:var(--accent) }
.method .vis.vis-byo i{ background:var(--accent); opacity:.5; }
.method .vis.vis-byo{
  background:repeating-linear-gradient(45deg, var(--surface-2) 0 4px, transparent 4px 8px),#161e2e;
}

/* method-head (column header row inside the indicator list) */
.method .ind-row.method-head{
  border-bottom:1px solid var(--line-2);
  font-family:var(--mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--fg-dim);
}
.method .ind-row.method-head .id{ color:var(--accent) }
.method .ind-row.method-head .nm{ color:var(--fg-dim); font-size:10.5px; font-family:var(--mono) }
.method .ind-row.method-head .wt{ color:var(--fg-dim); text-transform:uppercase }

/* three-step pipeline + result bar */
.method-steps{ margin-top:80px; border-top:1px solid var(--line); padding-top:48px }
.ms-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line); }
.ms-step{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 28px 28px; position:relative; min-height:230px;
  display:flex; flex-direction:column; gap:8px;
}
.ms-step:not(:last-child)::after{
  content:"→"; position:absolute; right:-12px; top:46px;
  font-family:var(--mono); color:var(--accent); font-size:18px;
  width:24px; height:24px; background:var(--bg); display:flex;
  align-items:center; justify-content:center; z-index:1;
}
.ms-num{ font-family:var(--mono); font-size:10.5px; color:var(--fg-faint); letter-spacing:.14em }
.ms-num b{ color:var(--accent); font-weight:500 }
.ms-ttl{ font-size:22px; font-weight:500; letter-spacing:-.01em; color:var(--fg); margin-top:6px }
.ms-dsc{ color:var(--fg-mid); font-size:13.5px; line-height:1.55 }
.ms-eq{
  margin-top:auto; padding:10px 12px; border:1px solid var(--line-2); background:var(--surface);
  font-family:var(--mono); font-size:12.5px; color:var(--fg);
}
.ms-eq .k{ color:var(--accent) }

.ms-result{ margin-top:48px; }
.ms-result-bar{
  position:relative; height:74px; border:1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(255,91,107,.08) 0%, rgba(255,91,107,.04) 45%, transparent 50%, rgba(43,212,125,.04) 55%, rgba(43,212,125,.10) 100%);
}
.ms-result-line{
  position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between;
  padding:0 28px; border-bottom:1px dashed var(--line-2);
}
.ms-result-line .ms-mark{
  font-family:var(--mono); font-size:11px; color:var(--fg-dim);
  letter-spacing:.04em; padding-top:8px; position:relative;
}
.ms-result-line .ms-mark::before{
  content:""; position:absolute; left:50%; top:0; height:8px; width:1px; background:var(--line-2);
}
.ms-result-line .ms-mark-100{ color:var(--accent); font-weight:600 }
.ms-result-line .ms-mark-100::before{ background:var(--accent); height:74px; width:1.5px }
.ms-result-line .ms-pin{
  position:absolute; left:50%; top:38px; transform:translateX(-50%);
  font-size:10px; letter-spacing:.12em; color:var(--accent); white-space:nowrap;
  background:var(--bg); padding:2px 6px;
}
.ms-result-zones{
  position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:space-between;
  padding:0 28px; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
}
.ms-zone.ms-under{ color:var(--down) }
.ms-zone.ms-over{ color:var(--up) }
.ms-result-note{
  margin-top:18px; color:var(--fg-mid); font-size:14px; line-height:1.55;
  max-width:920px;
}
.ms-result-note b{ color:var(--fg); font-weight:500 }

@media (max-width:1100px){
  .ms-row{ grid-template-columns:1fr }
  .ms-step:not(:last-child)::after{ display:none }
}

/* ─── CTA / email ─────────────────────────────────────────── */
.cta{
  padding:120px var(--pad-x);
  border-bottom:1px solid var(--line); position:relative;
  background:
    linear-gradient(180deg, transparent, rgba(255,122,69,.03)),
    var(--bg);
}
.cta-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:end }
.cta h2{ font-size:clamp(40px, 5vw, 68px); line-height:.98; letter-spacing:-.03em; font-weight:500; text-wrap:balance }
.cta h2 em{ font-family:var(--serif); font-style:italic; color:var(--accent); font-weight:400 }
.cta .sub{ color:var(--fg-mid); margin-top:18px; font-size:16px; max-width:480px; line-height:1.55 }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap }
.cta-actions .btn{ padding:18px 22px; font-size:13px }
.email-foot{ margin-top:14px; font-family:var(--mono); font-size:11px; color:var(--fg-dim); white-space:nowrap }
.email-foot .ok{ color:var(--up) }

/* ─── footer ──────────────────────────────────────────────── */
footer{ padding: 56px var(--pad-x) 36px; color:var(--fg-dim); font-size:13px }
footer .foot-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:40px }
footer h5{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-dim); margin-bottom:14px; font-weight:500 }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:9px }
footer a:hover{ color:var(--fg) }
footer .colofon{ display:flex; align-items:center; justify-content:space-between; margin-top:56px;
  padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--fg-faint) }
footer .colofon .blob{ display:flex; gap:18px; align-items:center }
.foot-brand{ display:flex; flex-direction:column; gap:6px }
.foot-product{ font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--fg) }
.foot-by{
  font-family:var(--mono); font-size:11px; color:var(--fg-dim);
  letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.foot-fm{ display:inline-flex; align-items:center; gap:6px; color:var(--accent) }
.foot-fm img{ width:14px; height:14px; object-fit:contain; filter:brightness(1.4) }
.foot-fm span{ font-weight:600 }
.foot-socials{ display:flex; gap:18px; margin-top:22px; font-family:var(--mono); font-size:11.5px; }
.foot-socials a{ color:var(--fg-mid); border-bottom:1px solid var(--line) }
.foot-socials a:hover{ color:var(--fg); border-color:var(--accent) }

/* responsive: collapse a couple grids */
@media (max-width:1100px){
  .feat-grid{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr) }
  .hero-grid, .method, .cta-grid{ grid-template-columns:1fr }
  .hero-grid{ gap:36px }
  footer .foot-grid{ grid-template-columns:repeat(2,1fr) }
}


/* ─── BYO (bring your own template) section ──────────────── */
.byo-section{ background:linear-gradient(180deg, var(--bg), var(--bg-soft) 40%, var(--bg)) }
.byo-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:48px; align-items:start }
.byo-points{ display:flex; flex-direction:column; gap:24px; border-left:1px solid var(--line) }
.byo-pt{ display:grid; grid-template-columns: 56px 1fr; gap:18px; padding:12px 0 12px 22px; position:relative }
.byo-pt::before{ content:""; position:absolute; left:-5px; top:18px; width:9px; height:9px;
  background:var(--accent); border-radius:50%; box-shadow:0 0 0 4px var(--bg) }
.byo-pt-num{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.16em; padding-top:3px }
.byo-pt-body h4{ font-size:18px; font-weight:500; letter-spacing:-.01em; color:var(--fg); line-height:1.2 }
.byo-pt-body p{ margin-top:8px; color:var(--fg-mid); font-size:14px; line-height:1.55 }
.byo-pt-body p code{ font-family:var(--mono); font-size:12.5px; color:var(--accent);
  background:rgba(255,122,69,.08); padding:2px 6px; border:1px solid rgba(255,122,69,.25) }

.byo-flags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line) }
.byo-flag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  padding:5px 9px; border:1px solid var(--line-2); color:var(--fg-mid); }
.byo-flag-accent{ color:var(--accent); border-color:rgba(255,122,69,.4); background:rgba(255,122,69,.05) }

/* xls mockup */
.xls-mock{
  background:#161a23; border:1px solid var(--line-2);
  font-family:var(--mono); font-size:12px; color:var(--fg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.xls-bar{
  display:flex; align-items:center; gap:14px; padding:9px 14px;
  background:#0f1219; border-bottom:1px solid var(--line);
  color:var(--fg-dim); font-size:11px;
}
.xls-traffic{ display:flex; gap:6px }
.xls-traffic span{ width:10px; height:10px; border-radius:50%; background:#2a3346 }
.xls-traffic span:first-child{ background:#ff5f57 }
.xls-traffic span:nth-child(2){ background:#febc2e }
.xls-traffic span:nth-child(3){ background:#28c840 }
.xls-file{ color:var(--fg) }
.xls-meta{ margin-left:auto; letter-spacing:.1em; color:var(--accent) }

.xls-toolbar{
  display:flex; align-items:center; gap:18px; padding:7px 14px;
  background:#1d6f3d; color:#eaf6ee; font-size:11.5px;
  border-bottom:1px solid rgba(0,0,0,.35);
}
.xls-tool-spacer{ flex:1 }
.xls-binding{ font-size:10.5px; letter-spacing:.12em; color:#bff0c8 }

.xls-grid{
  background:#f7f7f5; color:#1a1a1a;
  font-family:"IBM Plex Mono", monospace; font-size:11.5px;
  padding:0; border-bottom:1px solid #d6d6d2;
}
.xls-row{ display:grid; grid-template-columns: 30px 200px repeat(4, 1fr); }
.xls-row-h{ background:#e8eae5; color:#5b6166; font-size:10.5px; letter-spacing:.06em; }
.xls-cell{ padding:5px 8px; border-right:1px solid #d9dbd6; border-bottom:1px solid #ebebe7; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.xls-cell.xls-corner{ background:#dadcd6 }
.xls-cell.xls-col{ text-align:center }
.xls-cell.xls-rowh{ background:#e8eae5; color:#5b6166; text-align:center; font-size:10.5px }
.xls-cell.xls-label{ text-align:left; color:#1a1a1a; background:#fbfaf7 }
.xls-cell.xls-bold{ font-weight:700 }
.xls-cell.xls-accent{ color:#b94a26 }
.xls-cell.xls-val{ text-align:right; font-variant-numeric:tabular-nums }
.xls-row-th .xls-cell.xls-val{ font-weight:600; color:#5b6166 }
.xls-cell.xls-filled{ color:#1d6f3d; background:rgba(29,111,61,.07) }
.xls-cell.xls-derived{ color:#3b4f6b; background:#eef3fa; font-style:italic }
.xls-cell.xls-input{ color:#b94a26; background:rgba(255,122,69,.10) }

.xls-legend{
  display:flex; gap:18px; padding:10px 14px; background:#f0efeb; color:#5b6166;
  font-size:10.5px; letter-spacing:.04em; border-bottom:1px solid #d6d6d2;
}
.xls-lg-sw{ display:inline-block; width:10px; height:10px; vertical-align:-1px; margin-right:6px; border:1px solid #d0d0c8 }
.xls-lg-filled{ background:rgba(29,111,61,.25); border-color:rgba(29,111,61,.4) }
.xls-lg-input{ background:rgba(255,122,69,.25); border-color:rgba(255,122,69,.6) }
.xls-lg-derived{ background:#dde6f2; border-color:#a8b9d4 }

.xls-tabs{
  display:flex; gap:0; padding:0; background:#1d6f3d; color:#eaf6ee;
  font-size:11px; border-top:1px solid rgba(0,0,0,.35);
}
.xls-tab{ padding:8px 14px; border-right:1px solid rgba(0,0,0,.18);
  background:#175a31; color:#bff0c8; cursor:default }
.xls-tab.xls-tab-on{ background:#f7f7f5; color:#1d6f3d; font-weight:600 }
.xls-tab.xls-tab-add{ color:#bff0c8; padding:8px 12px }

/* ─── QC consistency block (FCFE / FCFF) ─────────────────── */
.qc-block{
  margin-top:64px; padding:36px; position:relative;
  border:1px solid var(--line-2); background:var(--surface);
  border-left:3px solid #ffb43c;
}
.qc-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px }
.qc-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:#ffb43c; align-self:flex-start;
  padding:4px 9px; border:1px solid rgba(255,180,60,.4); background:rgba(255,180,60,.06) }
.qc-head h3{ font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1.15; max-width:780px }

.qc-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:48px; align-items:start }
.qc-copy p{ color:var(--fg-mid); font-size:14.5px; line-height:1.6; margin-bottom:14px }
.qc-copy p:last-child{ margin-bottom:0 }

.qc-vis{ display:flex; flex-direction:column; gap:12px }
.qc-row{
  display:grid; grid-template-columns: 60px 1fr 130px;
  gap:18px; align-items:center;
  padding:14px 16px; border:1px solid var(--line);
  background:var(--bg-soft); font-family:var(--mono);
}
.qc-row .qc-tk{ font-size:14px; color:var(--accent-2); font-weight:600; letter-spacing:.04em }
.qc-bars{ display:flex; flex-direction:column; gap:6px }
.qc-bar{ display:grid; grid-template-columns: 42px 60px 1fr; gap:10px; align-items:center; position:relative; font-size:11.5px }
.qc-bar-lbl{ color:var(--fg-dim); letter-spacing:.04em }
.qc-bar-val{ color:var(--fg); text-align:right; font-variant-numeric:tabular-nums }
.qc-bar-fill{ height:4px; background:var(--up); display:block; transition:width .3s; max-width:100% }
.qc-bar-neg .qc-bar-fill{ background:var(--down) }
.qc-delta{ text-align:right; font-size:11.5px; letter-spacing:.06em }
.qc-delta.qc-ok{ color:var(--fg-dim) }
.qc-delta.qc-warn{ color:#ffb43c; font-weight:600 }
.qc-row.qc-row-warn{
  border-color:rgba(255,180,60,.5);
  background:linear-gradient(90deg, rgba(255,180,60,.08), var(--bg-soft) 70%);
  box-shadow:inset 2px 0 0 #ffb43c;
}

@media (max-width:1100px){
  .byo-grid{ grid-template-columns:1fr }
  .qc-grid{ grid-template-columns:1fr }
}

/* ─── mobile: hamburger button (injected via JS) ─────────── */
.nav-hamburger{
  display:none; background:none; border:none; color:var(--fg-mid);
  font-size:22px; padding:6px 8px; cursor:pointer; margin-left:auto;
  line-height:1;
}
.nav-hamburger:hover{ color:var(--fg) }

/* ─── mobile ≤ 768px ─────────────────────────────────────── */
@media (max-width:768px){
  :root{ --pad-x: 16px }

  /* A1: Navbar hamburger */
  .nav-hamburger{ display:block }
  .nav-links{ display:none !important }
  .nav-cta{ display:none !important }
  .nav.nav-open .nav-links{
    display:flex !important; flex-direction:column; gap:12px;
    width:100%; order:10; padding:12px 0;
  }
  .nav.nav-open .nav-cta{
    display:flex !important; flex-direction:column; gap:8px;
    width:100%; order:11; padding:0 0 12px;
  }
  .nav.nav-open{
    flex-wrap:wrap; height:auto;
  }
  .nav.nav-open .nav-cta .btn{ width:100%; justify-content:center }

  /* A2: Hero meta grid — 2x2 */
  .hero-meta{ grid-template-columns:repeat(2,1fr) }
  .hero-meta > div:nth-child(2){ border-right:0 }
  .hero{ padding:40px var(--pad-x) 32px }
  .hero-cta{ flex-direction:column }
  .hero-cta .or{ display:none }

  /* Peer table: already has overflow:auto wrapper */
  .peer-bar{ flex-wrap:wrap; gap:10px }
  .peer-bar .selector{ min-width:0; flex:1 }
  .peer-meta{ flex-wrap:wrap }

  /* Steps: 1 column */
  .steps{ grid-template-columns:1fr }
  .step{ min-height:auto }

  /* Features: 1 column */
  .feat-grid{ grid-template-columns:1fr }
  .feat{ min-height:auto }

  /* Method indicator grid */
  .method .ind-row{ grid-template-columns:40px 1fr; gap:8px }
  .method .ind-row .wt, .method .ind-row .vis{ display:none }
  .ms-row{ grid-template-columns:1fr }

  /* BYO */
  .byo-pt{ grid-template-columns:1fr }
  .byo-pt-num{ display:none }

  /* XLS mockup */
  .xls-row{ grid-template-columns:20px 120px repeat(4,80px) }
  .xls-mock{ overflow-x:auto }

  /* CTA */
  .cta{ padding:60px var(--pad-x) }
  .cta-actions{ flex-direction:column }

  /* QC block */
  .qc-block{ padding:20px }
  .qc-row{ grid-template-columns:1fr }
  .qc-row .qc-tk{ font-size:12px }

  /* A4: Footer — 1 column */
  footer .foot-grid{ grid-template-columns:1fr }
  footer .colofon{ flex-direction:column; gap:12px; text-align:center }
  footer .colofon .blob{ justify-content:center }

  /* Section padding */
  .section{ padding:48px var(--pad-x) }
  .manifesto{ padding:60px var(--pad-x) }

  /* Utility bar */
  .util{ font-size:10px; gap:12px; overflow-x:auto }
}