/* ==========================================================================
   /investors — the investor brief. A standalone page, not a base.html child:
   it is a full-viewport deck, so the site masthead and footer would sit
   inside every slide.

   Brand system (.claude/skills/yummypenny-design): dark-first surfaces with a
   green cast, JetBrains Mono for every number (tabular), Bricolage Grotesque
   for display, one phosphor-green accent, hairline borders, glow not shadow
   for signal. Retailers appear only as neutral ticker chips.

   Every number on the page is written by investors.js from the model
   (`deal_aggregator/web/investor_model.py`); nothing numeric is typed here.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #0C110E; --surface: #131A15; --raise: #182019;
  --line: #242D26; --line-2: #33403A;
  --ink: #E9EFEA; --muted: #A3AFA7; --faint: #75817A;
  --save: #34C481; --save-2: #4FD695; --save-soft: rgba(52,196,129,.14);
  --save-ink: #8CE6BC; --save-line: rgba(52,196,129,.4);
  --low: #E8834E; --low-soft: rgba(232,131,78,.13);
  --violet: #C7ABF7; --violet-soft: rgba(167,124,255,.16);
  --gold: #EDC25E; --gold-soft: rgba(237,194,94,.13); --gold-line: rgba(237,194,94,.45);
  --blue: #7FB2FF;
  --s-pro: var(--save); --s-plus: var(--violet); --s-ads: var(--low); --s-data: var(--blue);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow: 0 24px 60px -38px rgba(0,0,0,.9);
  --ease: cubic-bezier(.2,.7,.2,1);
  --bar-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--save-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--save); outline-offset: 2px; border-radius: 6px;
}
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ top bar */
.ib-bar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: rgba(12,17,14,.82); backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.ib-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.ib-brand img { height: 26px; width: auto; }
.ib-word { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.ib-word b { color: var(--save); font-weight: 700; }
.ib-tag { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); border-left: 1px solid var(--line); padding-left: 12px; }
.ib-spacer { flex: 1; }
.ib-count { font-family: var(--mono); font-size: .72rem; color: var(--muted); min-width: 64px; text-align: right; }
.ib-progress { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--save); width: 0; transition: width .35s var(--ease); box-shadow: 0 0 8px var(--save); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.seg button {
  font: 600 .7rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 0; border-radius: 999px;
  padding: 7px 12px; cursor: pointer; transition: color .15s, background .15s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--save-soft); color: var(--save-ink); box-shadow: inset 0 0 0 1px var(--save-line); }

/* ------------------------------------------------------------ deck */
.deck {
  height: 100vh; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory;
  scroll-behavior: smooth; overscroll-behavior: contain;
}
.slide {
  position: relative; min-height: 100vh; min-height: 100dvh; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--bar-h) + 40px) 48px 56px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.slide::before {  /* the site's soft brand wash, one per slide, never on data */
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw;
  background: radial-gradient(closest-side, rgba(52,196,129,.07), transparent 70%);
  pointer-events: none;
}
.slide.alt::before { inset: auto auto -30% -20%; background: radial-gradient(closest-side, rgba(167,124,255,.06), transparent 70%); }
.inner { position: relative; width: 100%; max-width: 1180px; }

.eyebrow {
  font: 600 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--save-ink); display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--save); box-shadow: 0 0 6px var(--save); }
.eyebrow .idx { color: var(--faint); }
h1, h2 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.04; margin: 0 0 18px; font-weight: 700; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); max-width: 22ch; }
h2 em, h1 em { font-style: normal; color: var(--save); }
h3 { font-family: var(--display); font-size: 1.15rem; margin: 0 0 6px; letter-spacing: -.01em; }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.22rem); color: var(--muted); max-width: 62ch; margin: 0 0 28px; }
.lede b, .muted b { color: var(--ink); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.fine { font-family: var(--mono); font-size: .66rem; color: var(--faint); letter-spacing: .02em; line-height: 1.6; }
.fine a { color: var(--muted); }

/* grids */
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* cards and stat tiles */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; box-shadow: var(--shadow); transition: border-color .2s, transform .2s var(--ease);
}
.card:hover { border-color: var(--line-2); }
.card p { margin: 0; color: var(--muted); font-size: .92rem; }
.card .k { font: 600 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; display: block; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; }
.tile .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -.02em; line-height: 1.1; }
.tile .l { font: 600 .64rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.tile .s { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.tile.hi { border-color: var(--save-line); background: linear-gradient(180deg, var(--save-soft), var(--surface) 70%); }
.tile.hi .v { color: var(--save-ink); }
.tile.gold { border-color: var(--gold-line); background: linear-gradient(180deg, var(--gold-soft), var(--surface) 70%); }
.tile.gold .v { color: var(--gold); }
.big { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: clamp(3rem, 8vw, 6.4rem); letter-spacing: -.04em; line-height: .95; color: var(--save); }

/* ticker chips — neutral, never a retailer's colour */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 700 .66rem/1 var(--mono); letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 7px; background: var(--raise); }

/* list with marks */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--muted); }
.ticks li::before { content: "✓"; font-family: var(--mono); color: var(--save); font-weight: 700; }
.ticks li b { color: var(--ink); font-weight: 600; }
.nums { list-style: none; padding: 0; margin: 0; counter-reset: n; display: grid; gap: 12px; }
.nums li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.nums li > * { grid-column: 2; }
.nums li::before { grid-row: 1 / span 2; content: counter(n, decimal-leading-zero); font: 700 .78rem/1.9 var(--mono); color: var(--save); border: 1px solid var(--save-line); border-radius: 8px; text-align: center; background: var(--save-soft); }
.nums li b { display: block; color: var(--ink); }
.nums li span { color: var(--muted); font-size: .92rem; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font: 600 .62rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.tbl td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tbl td:first-child { font-family: var(--sans); color: var(--muted); }
.tbl tr.em td { color: var(--save-ink); font-weight: 700; }
.tbl tbody tr:hover td { background: var(--raise); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }

/* charts */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.chart .axis text, .chart text.ax { fill: var(--faint); font: 500 11px var(--mono); }
.chart text.lab { fill: var(--muted); font: 600 11px var(--mono); }
.chart text.val { fill: var(--ink); font: 700 12px var(--mono); }
.chart text.halo { paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .bar { transition: opacity .15s; }
.chart.dim .bar { opacity: .45; }
.chart.dim .bar.on { opacity: 1; }
/* Charts arrive with their slide: bars grow from the baseline, lines draw
   left to right. A chart redrawn on a scenario switch is born in its final
   state, because its slide already carries .in. */
.chart .grow { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 45ms + 150ms); }
.chart .grow-x { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
.chart .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.slide.in .chart .grow { transform: none; }
.slide.in .chart .grow-x { transform: none; }
.slide.in .chart .draw { stroke-dashoffset: 0; }
.no-js .chart .grow, .no-js .chart .grow-x { transform: none; }
.no-js .chart .draw { stroke-dashoffset: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; font: 600 .68rem/1 var(--mono); color: var(--muted); letter-spacing: .04em; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tip {
  position: fixed; z-index: 40; pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .12s, transform .12s; background: rgba(19,26,21,.97); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 10px 12px; font: 500 .74rem/1.5 var(--mono); color: var(--ink);
  box-shadow: var(--shadow); min-width: 170px;
}
.tip.on { opacity: 1; transform: none; }
.tip .t { color: var(--muted); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.tip .r { display: flex; justify-content: space-between; gap: 16px; }
.tip .r i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }
.tip .tot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; font-weight: 700; }

/* TAM rings */
.rings { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; }
.ring { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 50%; display: flex; align-items: flex-start; justify-content: center; text-align: center; }
.ring .rval { font: 700 1.3rem/1.1 var(--mono); }
.ring .rl { font: 600 .6rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ring.tam { width: 100%; height: 100%; border: 1px solid var(--line-2); background: var(--surface); padding-top: 9%; }
.ring.sam { width: 64%; height: 64%; border: 1px solid var(--save-line); background: var(--raise); padding-top: 8%; }
.ring.som { width: 30%; height: 30%; background: var(--save-soft); border: 1px solid var(--save); padding-top: 7%; box-shadow: 0 0 30px -6px rgba(52,196,129,.5); }
.ring.som .rval { color: var(--save-ink); font-size: 1.05rem; }

/* slider */
.ctl { display: grid; gap: 8px; margin: 0 0 18px; }
.ctl label { display: flex; justify-content: space-between; font: 600 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ctl label output { color: var(--save-ink); font-size: .9rem; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--raise); border: 1px solid var(--line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--save); box-shadow: 0 0 0 4px var(--save-soft), 0 0 10px var(--save); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--save); box-shadow: 0 0 0 4px var(--save-soft); cursor: grab; }

/* timeline */
.tl { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: linear-gradient(90deg, var(--save), var(--line-2)); }
.tl .st { position: relative; padding-top: 34px; }
.tl .st::before { content: ""; position: absolute; top: 7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--save); box-shadow: 0 0 8px var(--save); }
.tl .when { font: 700 .7rem/1 var(--mono); color: var(--save-ink); letter-spacing: .08em; text-transform: uppercase; }
.tl h3 { margin-top: 8px; font-size: 1rem; }
.tl p { margin: 0; color: var(--muted); font-size: .84rem; }

/* 2x2 positioning map */
.map2 { position: relative; aspect-ratio: 1.35; border: 1px solid var(--line); border-radius: 14px; background:
  linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat,
  linear-gradient(90deg, var(--line), var(--line)) 0 50% / 100% 1px no-repeat, var(--surface); }
.map2 .ax { position: absolute; font: 600 .6rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.map2 .dot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 .74rem/1.2 var(--mono); color: var(--muted); text-align: center; }
.map2 .dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); border: 2px solid var(--muted); }
.map2 .dot.us { color: var(--save-ink); font-size: .9rem; font-weight: 700; }
.map2 .dot.us::before { width: 20px; height: 20px; background: var(--save); border-color: var(--save-ink); box-shadow: 0 0 18px var(--save); }

/* team */
.person { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; }
.avatar { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font: 700 1.2rem var(--display); color: var(--bg); background: var(--save); }
.avatar.v { background: var(--violet); }
.avatar.o { background: var(--low); }
.avatar.h { background: var(--raise); color: var(--muted); border: 1px dashed var(--line-2); font-family: var(--mono); font-size: 1rem; }
.person .role { font: 600 .64rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--save-ink); margin-bottom: 6px; }

/* use of funds bars */
.funds { display: grid; gap: 12px; }
.fund { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px 14px; align-items: center; }
.fund .n { font-weight: 600; font-size: .92rem; }
.fund .p { font: 700 .92rem var(--mono); text-align: right; color: var(--save-ink); }
.fund .track { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--raise); overflow: hidden; }
.fund .track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--save), var(--save-2)); transition: width 1s var(--ease); }
.fund .d { grid-column: 1 / -1; font-size: .78rem; color: var(--muted); margin-top: -2px; }

/* side dots */
.dots { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 15; display: grid; gap: 9px; }
.dots a { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: block; transition: background .2s, transform .2s; }
.dots a:hover { background: var(--muted); }
.dots a[aria-current="true"] { background: var(--save); transform: scale(1.4); box-shadow: 0 0 8px var(--save); }

.hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); display: flex; gap: 8px; align-items: center; }
.kbd { font: 600 .66rem/1 var(--mono); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; color: var(--muted); background: var(--raise); }

/* reveal — every .rv element rises in when its slide arrives */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.slide.in .rv { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

.disclaim { margin-top: 26px; max-width: 90ch; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .chart .grow, .chart .grow-x { transform: none; }
  .chart .draw { stroke-dashoffset: 0; }
}

@media (max-width: 980px) {
  .split, .split.rev, .g2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: minmax(0, 1fr); }
  .tl { grid-template-columns: minmax(0, 1fr); }
  .tl::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .tl .st { padding: 0 0 0 30px; }
  .tl .st::before { top: 2px; }
  .ib-tag, .dots { display: none; }
}
@media (max-width: 640px) {
  .deck { scroll-snap-type: none; }
  .slide { padding: calc(var(--bar-h) + 28px) 16px 40px; min-height: auto; }
  .ib-bar { padding: 0 12px; gap: 10px; }
  .ib-word { display: none; }
  .seg button { padding: 7px 9px; font-size: .62rem; }
  .ib-count { min-width: 0; }
  .hint { display: none; }
  .map2 .dot { font-size: .62rem; }
  /* Charts keep a readable minimum width and scroll sideways rather than
     shrinking their 11px labels to 5px. */
  .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chart svg { min-width: 600px; }
  #ch-share svg, #ch-stack svg, #ch-r40 svg, #ch-corpus svg, #ch-cov svg, #ch-marg svg { min-width: 480px; }
}
@media print {
  .chart .grow, .chart .grow-x { transform: none; }
  .chart .draw { stroke-dashoffset: 0; }
}
@media print {
  .ib-bar, .dots, .hint { display: none; }
  .deck { height: auto; overflow: visible; }
  .slide { min-height: auto; page-break-after: always; padding: 32px; }
  .rv { opacity: 1; transform: none; }
}