/* Fifth Star Funds, website 2026 mockup stylesheet.
   Tokens from 01-design-system.md. One stylesheet for every page. */

:root{
  --red:#c8102e; --blue:#1d3a8a; --ink:#1a1a24; --panel:#2c2c31; --muted:#5c5c66;
  --paper:#fff; --soft:#f5f6fa; --lblue:#edf1fb; --line:#e3e5ee; --coral:#ff6b7d; --gold:#b88a2e;
  --hl:#ffe08a;
  --grad:linear-gradient(100deg, #2c2c31 0%, #1d3a8a 140%);
  --wrap:1080px; --narrow:760px;
  /* Global logo scale. Multiplies every context at once, so the proportions
     settled by assets/logos/_tools/size_logos.py are preserved exactly and only
     the overall size moves. Ceiling is about 1.3: the portfolio grid is four
     columns, which leaves 199px inside a card, and the widest logo is 152px. */
  --ug:1.3;
  /* Height of one portfolio card's logo area. 58 is H_MAX in size_logos.py, .82
     is the on-dark tile's own --u, 18px is that tile's vertical padding. */
  --logo-row:calc(76px * 0.82 * var(--ug,1) + 18px);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
/* Smooth only after a click on this page. Arriving from another page with a #section in the
   link jumps straight there instead of gliding down the whole page (16,000px on the white paper). */
@media (prefers-reduced-motion: no-preference){ html:focus-within{scroll-behavior:smooth;} }
/* The header is sticky and 67px tall, so an anchor target used to land flush at the top
   of the viewport with its own heading hidden behind it. Kyle, 2026-09-23: "some links
   don't load at the top of the page." The offset lives on the target rather than on the
   root, because scroll-padding on the root does not cover the initial fragment
   navigation in every browser. Do not set both: they add, and the target lands twice as
   far down as it should, which is how this was first measured at 168px. */
[id]{scroll-margin-top:84px;}
header.site[id], body[id]{scroll-margin-top:0;}
body{font-family:'Outfit','Helvetica Neue',Arial,sans-serif; color:var(--ink); background:var(--paper);
button,input,select,textarea{font-family:inherit;} /* form controls don't inherit the font by default, so Sign up rendered in Arial (2026-10-06) */
  line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
p a, li a, td a{color:var(--blue); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
p a:hover, li a:hover{color:var(--red);}
strong,b{font-weight:700;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.narrow{max-width:var(--narrow); margin:0 auto; padding:0 24px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.grid-2.split{grid-template-columns:1.1fr 0.9fr; align-items:center;}
.grid-2.wide-left{grid-template-columns:1.2fr 0.8fr;}
.grid-2.wide-right{grid-template-columns:0.8fr 1.2fr;}
@media(max-width:860px){.grid-2,.grid-2.split,.grid-2.wide-left,.grid-2.wide-right,.grid-3,.grid-4{grid-template-columns:1fr;}}
@media(max-width:860px){.grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.grid-4{grid-template-columns:1fr;}}

/* Type */
h1{font-size:54px; font-weight:800; letter-spacing:-0.03em; line-height:1.04;}
h2{font-size:34px; font-weight:800; letter-spacing:-0.02em; line-height:1.12;}
h3{font-size:22px; font-weight:700; letter-spacing:-0.01em; line-height:1.25;}
h4{font-size:17px; font-weight:700;}
.kicker{font-size:12.5px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--red); margin-bottom:14px;}
.kicker.blue{color:var(--blue);} .kicker.coral{color:var(--coral);} .kicker.gold{color:var(--gold);} .kicker.muted{color:var(--muted);}
.lead{font-size:21px; line-height:1.55; max-width:64ch;}
.prose{max-width:68ch;}
.prose p{margin-bottom:18px;}
.prose h2{margin:44px 0 16px;} .prose h3{margin:32px 0 12px;}
.prose ul,.prose ol{margin:0 0 18px 22px;} .prose li{margin-bottom:8px;}
.prose .lead{margin-bottom:26px;}
.small{font-size:14.5px; color:var(--muted); line-height:1.5;}
.hl{background:linear-gradient(transparent 56%, var(--hl) 56%); font-weight:700; padding:0 2px;}
.accent{color:var(--red);} .accent-blue{color:var(--blue);} .accent-coral{color:var(--coral);}
.mt-0{margin-top:0} .mt-1{margin-top:12px} .mt-2{margin-top:24px} .mt-3{margin-top:40px} .mt-4{margin-top:64px}
.mb-1{margin-bottom:12px} .mb-2{margin-bottom:24px} .mb-3{margin-bottom:40px}
.center{text-align:center;}

/* Buttons */
.btn{display:inline-block; font-weight:700; font-size:15px; padding:13px 22px; border-radius:8px; transition:.15s; border:1.5px solid transparent; cursor:pointer; line-height:1.2;}
.btn-red{background:var(--red); color:#fff;} .btn-red:hover{background:#a60d26;}
.btn-blue{background:var(--blue); color:#fff;} .btn-blue:hover{background:#152c6b;}
.btn-ghost{border-color:rgba(255,255,255,.55); color:#fff;} .btn-ghost:hover{border-color:#fff;}
.btn-outline{border-color:var(--ink); color:var(--ink);} .btn-outline:hover{background:var(--ink); color:#fff;}
.btn-sm{font-size:14px; padding:11px 16px;}
.actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.link-arrow{font-weight:700; color:var(--blue);} .link-arrow::after{content:" \2192";}
.link-arrow:hover{color:var(--red);}

/* Header */
header.site{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:66px; gap:20px;}
/* The logotype is 11.5:1. A fixed height plus the global img{max-width:100%}
   squashed it to half its correct width on a phone, which read as the logo
   being compressed. It was distorted, not cramped. object-fit keeps the shape
   and the height drops on small screens so it fits without shrinking the name
   to nothing. Kyle 2026-09-22. */
header.site .brand img{height:34px; width:auto; max-width:100%; object-fit:contain; object-position:left center;}
header.site nav{display:flex; gap:24px; font-size:14.5px; font-weight:500; color:#33333f; align-items:center;}
header.site nav a:hover, header.site nav a.on{color:var(--red);}
header.site nav a.on{font-weight:700;}
header.site .right{display:flex; gap:10px; align-items:center;}
header.site .apply{font-size:14px; font-weight:600; color:#33333f; margin-right:6px;}
header.site .apply:hover{color:var(--red);}
/* The phone header is the logo and one control. Apply and Give live inside the
   menu with everything else, because three competing targets on a 390px row is
   what crowded the logo in the first place. Kyle 2026-09-22. */
header.site .menu{display:none; width:44px; height:44px; font-size:0; border:1px solid var(--line);
  border-radius:8px; background:#fff; position:relative; cursor:pointer; flex:none;}
/* Three bars as three pinned layers rather than one many-stop gradient, because
   the last stop of the gradient version landed on the box edge and dropped. */
header.site .menu::before{content:""; position:absolute; left:11px; right:11px; top:12px; height:14px;
  background:
    linear-gradient(var(--ink),var(--ink)) top/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) bottom/100% 2px no-repeat;}
header.site .menu:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
header.site nav .m-only{display:none;}
@media(max-width:900px){
  header.site nav{display:none;}
  header.site .menu{display:block;}
  header.site .apply{display:none;}
  header.site .right > .btn{display:none;}
  header.site .brand img{height:26px;}
  header.site nav.open .m-only{display:block;}
}
header.site nav.open{display:flex; position:absolute; top:66px; left:0; right:0; background:#fff; flex-direction:column; align-items:stretch; text-align:left; gap:0; border-bottom:1px solid var(--line); padding:8px 0;}
header.site nav.open a{padding:12px 24px; border-top:1px solid var(--line);}
header.site nav.open a.m-only.give{color:var(--red); font-weight:700;}

/* Hero, dark gradient band */
.hero{background:var(--grad); color:#fff; position:relative; padding:78px 0 84px; overflow:hidden;}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,var(--red) 0 50%, var(--blue) 50% 100%);}
.hero h1{max-width:16ch;}
.hero h1 .accent{color:var(--coral);}
.hero .sub{font-size:19px; color:#d2d6e2; margin-top:22px; max-width:50ch; line-height:1.55;}
.hero .actions{margin-top:34px;}
.hero .kicker{color:#ff8a98;}
/* Links inside a dark hero or band read white with a coral underline. Navy on navy was invisible (audit 2026-10-06). */
.hero .sub a, .hero p a{color:#fff; text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:3px;}
.ctaband .kicker{color:#ff8a98;}
/* Soft light, chosen 2026-09-21. The mark is flattened to white and set in
   soft-light, so it lightens the gradient where it falls rather than covering it.
   You are seeing the gradient bent into the shape of the mark, which is why the
   gradient still does the work, and why text reads fine over it.

   Sized by HEIGHT, not width, so it scales with the band and always keeps the
   same air top and bottom. That also means the shorter inner-page hero gets a
   proportionally smaller mark for free. The mark is square, so width follows. */
.hero .mark{position:absolute; right:40px; top:50%; transform:translateY(-50%);
  height:calc(100% - 56px); width:auto; max-width:62%;
  opacity:.55; filter:brightness(0) invert(1); mix-blend-mode:soft-light;
  pointer-events:none;}

@media(max-width:1000px){.hero .mark{right:24px; max-width:70%; opacity:.5;}}
.hero.short{padding:56px 0 60px;}
.hero.short h1{font-size:44px; max-width:20ch;}
/* The hero mark is off below 680px. Settled by Kyle 2026-09-22: it had been
   hidden by default and the open question was whether to give it a phone sizing
   pass. The answer is no. On a phone the headline has the whole screen and the
   mark would be competing with it for a reader who has about ten seconds. */
@media(max-width:680px){h1{font-size:38px;} .hero{padding:52px 0 58px;} .hero.short h1{font-size:34px;} .hero .mark{display:none;} h2{font-size:28px;}}

/* Bands */
section.band{padding:72px 0;}
section.band.tight{padding:48px 0;}
section.band.soft{background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
section.band.lblue{background:var(--lblue);}
section.band.dark{background:var(--panel); color:#fff;}
section.band.dark .kicker{color:var(--coral);}
section.band.dark .founder .q .accent{color:var(--coral);}
section.band.dark .founder .who span{color:#a9adc2;}
section.band.dark .founder .stat{border-left-color:var(--coral);}
section.band.dark .founder .stat em{color:#a9adc2;}
section.band.dark .founder .photo{background:linear-gradient(140deg,#3b3b45 0%,#23232b 100%); border-color:#4a4a55;}
section.band.dark .founder .photo span{color:#9a9aa8;}
section.band.dark .link-arrow{color:var(--coral);}
section.band.dark .link-arrow:hover{color:#fff;}
section.band.grad{background:var(--grad); color:#fff;}
section.band.grad .kicker{color:var(--coral);}
.seam{height:5px; background:linear-gradient(90deg,var(--red) 0 50%, var(--blue) 50% 100%);}
hr.rule{border:0; border-top:1px solid var(--line); margin:36px 0;}
@media(max-width:680px){section.band{padding:52px 0;}}

/* Proof metrics strip */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); background:#fff; border-radius:12px; overflow:hidden;}
.metrics.three{grid-template-columns:repeat(3,1fr);}
/* Two across, for a metrics block sitting in half a grid-2. Rows get a rule between them. */
.metrics.two{grid-template-columns:1fr 1fr;}
.metrics.two .metric:nth-child(2n){border-right:none;}
.metrics.two .metric:nth-child(n+3){border-top-width:4px; box-shadow:inset 0 1px 0 var(--line);}
.metrics.two .metric .n{font-size:40px;}
.metric{padding:28px 22px; border-right:1px solid var(--line); border-top:4px solid var(--ink);}
.metric:last-child{border-right:none;}
.metric.r{border-top-color:var(--red);} .metric.b{border-top-color:var(--blue);}
.metric .n{font-size:48px; font-weight:800; letter-spacing:-0.03em; line-height:.95;}
.metric.r .n{color:var(--red);} .metric.b .n{color:var(--blue);}
.metric .l{font-size:14px; color:var(--muted); margin-top:12px; line-height:1.4;}
.metric .src{font-size:11.5px; color:#8a8a96; margin-top:8px;}
@media(max-width:860px){.metrics,.metrics.three{grid-template-columns:1fr 1fr;} .metric:nth-child(2n){border-right:none;} .metric{border-bottom:1px solid var(--line);}}
@media(max-width:480px){.metrics,.metrics.three{grid-template-columns:1fr;} .metric{border-right:none;}}

/* Big stat inline */
.bigstat{display:flex; gap:22px; align-items:baseline; flex-wrap:wrap;}
.bigstat .n{font-size:64px; font-weight:800; letter-spacing:-0.03em; line-height:1; color:var(--red);}
.bigstat .n.blue{color:var(--blue);}
.bigstat .l{font-size:16px; color:var(--muted); max-width:34ch; line-height:1.4;}

/* Pull quote */
.pull{text-align:center; max-width:880px; margin:0 auto;}
.pull .rule{width:46px; height:3px; background:var(--red); margin:0 auto 22px; border-radius:2px;}
.pull p{font-size:26px; font-weight:800; letter-spacing:-0.015em; line-height:1.35;}
.pull p .accent{color:var(--red);}
.pull .who{margin-top:16px; color:var(--muted); font-size:15px;}
.pull.left{text-align:left; margin:0;} .pull.left .rule{margin:0 0 22px;}
@media(max-width:680px){.pull p{font-size:21px;}}

/* Founder story block */
.founder{display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:center;}
.founder .photo{aspect-ratio:4/5; border-radius:14px; border:1px solid var(--line); background:linear-gradient(140deg,#e7ebf7 0%,#cdd5ec 100%); position:relative; overflow:hidden;}
.founder .photo img{width:100%; height:100%; object-fit:cover;}
.founder .photo span{position:absolute; bottom:12px; left:14px; font-size:11.5px; color:#6b7390; font-weight:600; letter-spacing:.04em;}
.founder .q{font-size:24px; line-height:1.42; font-weight:600; letter-spacing:-0.01em;}
.founder .q .accent{color:var(--red);}
.founder .who{margin-top:18px; font-weight:700; font-size:15.5px;}
.founder .who span{color:var(--muted); font-weight:500;}
.founder .stat{margin-top:22px; border-left:3px solid var(--red); padding-left:15px;}
.founder .stat b{font-size:34px; font-weight:800; display:block; line-height:1; letter-spacing:-0.02em;}
.founder .stat em{font-style:normal; color:var(--muted); font-size:14px;}
@media(max-width:760px){.founder{grid-template-columns:1fr;} .founder .photo{max-width:320px;}}

/* Two-column contrast (Pedigree vs Grit) */
.contrast{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.contrast > div{padding:34px 30px;}
.contrast > div:first-child{border-right:1px solid var(--line);}
.contrast .word{font-size:44px; font-weight:800; letter-spacing:-0.03em; line-height:1; margin-bottom:14px; color:var(--muted);}
.contrast > div:last-child .word{color:var(--ink);}
@media(max-width:680px){.contrast{grid-template-columns:1fr;} .contrast > div:first-child{border-right:0; border-bottom:1px solid var(--line);}}

/* Logic chain */
.chain{display:flex; flex-wrap:wrap; gap:10px 6px; align-items:center; font-weight:700; font-size:18px;}
.chain .arrow{color:var(--red); font-weight:800;}
.chain .end{color:var(--blue);}

/* Alignment rows */
.rows{border-top:1px solid var(--line);}
.rows .row{display:grid; grid-template-columns:220px 1fr; gap:24px; padding:18px 0; border-bottom:1px solid var(--line);}
.rows .row b{color:var(--blue); font-weight:700;}
.rows .row span a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}
@media(max-width:680px){.rows .row{grid-template-columns:1fr; gap:4px;}}

/* Light-blue aside */
.aside{background:var(--lblue); border-left:4px solid var(--blue); padding:26px 28px; border-radius:0 10px 10px 0;}
.aside .kicker{color:var(--blue); margin-bottom:8px;}
.aside p{margin:0;} .aside p + p{margin-top:12px;}

/* Numbered steps */
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.steps.four{grid-template-columns:repeat(4,1fr);}
.steps.stack{grid-template-columns:1fr; gap:0; border-top:1px solid var(--line);}
.step{position:relative; padding-top:12px;}
.step::before{counter-increment:step; content:counter(step); display:block; font-size:13px; font-weight:800; color:var(--red); letter-spacing:.1em; margin-bottom:8px;}
.step h3{margin-bottom:8px; font-size:19px;}
/* The number runs with the heading rather than sitting on a line of its own
   above it. Kyle 2026-09-21. The stacked variant keeps its own big number in a
   56px column, so it is excluded here rather than re-styled. */
.steps:not(.stack) .step::before{content:none;}
.steps:not(.stack) .step h3::before{
  counter-increment:step; content:counter(step);
  font-size:13px; font-weight:800; color:var(--red); letter-spacing:.1em;
  margin-right:11px; vertical-align:2px;
}
.step p{color:#3c3c48; font-size:15.5px;}
.steps.stack .step{display:grid; grid-template-columns:56px 1fr; gap:16px; padding:22px 0; border-bottom:1px solid var(--line);}
.steps.stack .step::before{font-size:28px; margin:0; line-height:1;}
@media(max-width:860px){.steps,.steps.four{grid-template-columns:1fr;}}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.cards.two{grid-template-columns:1fr 1fr;} .cards.four{grid-template-columns:repeat(4,1fr);}
.card{border:1px solid var(--line); border-radius:12px; padding:22px; background:#fff; display:flex; flex-direction:column; gap:10px; transition:.15s;}
a.card:hover{border-color:var(--blue); box-shadow:0 6px 24px rgba(29,58,138,.08); transform:translateY(-2px);}
.card .tag{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.card .tag.red{color:var(--red);} .card .tag.blue{color:var(--blue);}
.card h3{font-size:19px;}
.card p{font-size:15px; color:#3c3c48;}
.card .meta{font-size:13px; color:var(--muted); margin-top:auto;}
/* Apply, "What you get": each card opens on the thing itself, not a letter. The figure, the partners'
   own logos at the supporter wall's computed sizes, and a small threads drawing for introductions. */
.card.get .get-top{height:64px; display:flex; align-items:center; margin-bottom:18px;}
.card.get .get-fig{font-weight:800; font-size:40px; letter-spacing:-0.02em; color:var(--blue); line-height:1;}
.card.get .get-top img{width:calc(var(--w) * 0.95px); height:calc(var(--h) * 0.95px); object-fit:contain;}
@media(max-width:560px){ .card.get .get-fig{font-size:27px;} .card.get .get-top{height:56px; margin-bottom:12px;} }
.get-intro path{fill:none; stroke:#86a6ec; stroke-width:1.75; stroke-linecap:round;}
.get-intro circle{fill:#1e4fbf;}
.get-intro .gi-you{fill:var(--red);}
.logo-tile{width:56px; height:56px; border-radius:12px; background:var(--lblue); color:var(--blue); font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center; letter-spacing:-0.02em; border:1px solid #dfe5f5;}
.logo-tile.lg{width:88px; height:88px; font-size:34px; border-radius:16px;}
.logo-tile.dark{background:var(--panel); color:#fff; border-color:var(--panel);}
@media(max-width:860px){.cards,.cards.four{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.cards,.cards.two,.cards.four{grid-template-columns:1fr;}}

/* Portfolio card logo. No box, no border, normalised so every logo covers the same ink area.
   Per-logo --w and --h come from assets/logos/_sizes.json, measured in the browser.
   --u scales the whole system without re-measuring. Box is 132 by 55, which scored
   the most even across our actual set. See assets/logos/_tools/sizing.html. */
/* Every card's logo area is the same height, so the company names below them sit
   on one line across a row. The height is the tallest on-dark tile: H_MAX from
   size_logos.py at the tile's own --u, plus the tile's vertical padding. Before
   2026-09-21 the on-dark variant set min-height:0, so a short wide logo like
   Supperclub's made a 40px tile against everyone else's 73px and its name rode up. */
.logo-mark{min-height:var(--logo-row); display:flex; align-items:center; margin-bottom:2px;}
.logo-mark img, .wall img{width:calc(var(--w,110) * var(--u,1) * var(--ug,1) * 1px); height:calc(var(--h,40) * var(--u,1) * var(--ug,1) * 1px);
  object-fit:contain; display:block; max-width:100%;}
.logo-mark.on-dark{background:var(--panel); border-radius:10px; padding:9px 13px;
  align-self:flex-start; display:inline-flex; justify-content:center; --u:.82;}

/* Supporter and partner logo walls */
.wall{display:flex; flex-wrap:wrap; align-items:center; gap:30px 40px; --u:.88;}
.wall.sm{--u:.76;}
.wall .plate{background:var(--panel); border-radius:9px; padding:7px 12px; display:inline-flex; --u:.7;}
.wall.reversed img{filter:brightness(0) invert(1); opacity:.92;}
.wall.reversed .plate{background:transparent; padding:0; --u:.88;}
.tiered{display:grid; gap:30px;}
.tiered .grp{display:grid; grid-template-columns:186px 1fr; gap:26px; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);}
.tiered .grp:first-child{padding-top:0; border-top:0;}
.tiered .grp .lbl{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
section.band.dark .tiered .grp{border-color:#43434c;}
section.band.dark .tiered .grp .lbl{color:#9a9aa8;}
@media(max-width:760px){.tiered .grp{grid-template-columns:1fr; gap:14px;} .wall{gap:22px 28px; --u:.72;} .wall.sm{--u:.66;}}

/* Filters */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 28px;}
.filters button{font:inherit; font-size:13.5px; font-weight:600; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#33333f; cursor:pointer;}
.filters button.on{background:var(--ink); color:#fff; border-color:var(--ink);}

/* Status pills */
.pill{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--soft); color:var(--muted); border:1px solid var(--line);}
.pill.blue{background:var(--lblue); color:var(--blue); border-color:#d6def5;}
.pill.red{background:#fbe9ec; color:var(--red); border-color:#f3c9d0;}
.pill.green{background:#e8f5ee; color:#1f6b3f; border-color:#cde8d8;}

/* Team */
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.person img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; border:1px solid var(--line);}
.person .ph{width:100%; aspect-ratio:1; border-radius:50%; background:linear-gradient(140deg,#e7ebf7,#cdd5ec); border:1px solid var(--line);}
.person h3{font-size:18px; margin-top:14px;}
.person .role{font-size:14px; color:var(--muted);}
.person p{font-size:14.5px; color:#3c3c48; margin-top:8px;}
@media(max-width:860px){.team{grid-template-columns:1fr 1fr;}}

/* Supporter tiers */
.tiers .tier{padding:24px 0; border-top:1px solid var(--line);}
.tiers .tier:last-child{border-bottom:1px solid var(--line);}
.tiers .tier .kicker{margin-bottom:10px;}
.tiers .names{display:flex; flex-wrap:wrap; gap:8px 26px; font-size:16px; font-weight:600;}
.tiers .names .ph-logo{display:inline-flex; align-items:center; gap:8px;}
.tiers .names .ph-logo i{width:26px; height:26px; border-radius:6px; background:var(--soft); border:1px dashed #c9cdda; display:inline-block;}
.logos{display:flex; flex-wrap:wrap; gap:14px 36px; align-items:center;}
.logos .ph-logo{height:40px; padding:0 16px; display:inline-flex; align-items:center; border:1px dashed #c9cdda; border-radius:8px; color:var(--muted); font-weight:700; font-size:14px; letter-spacing:.02em;}
.logos img{height:34px; width:auto;}

/* Tables */
table.data{width:100%; border-collapse:collapse; font-size:15px;}
table.data th{text-align:left; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:10px 12px 10px 0; border-bottom:2px solid var(--ink);}
table.data td{padding:12px 12px 12px 0; border-bottom:1px solid var(--line); vertical-align:top;}
table.data td.n{font-weight:700; white-space:nowrap;}
table.data caption{caption-side:bottom; text-align:left; font-size:13px; color:var(--muted); padding-top:10px;}

/* Table wrap for phones */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tablewrap table.data{min-width:100%;}

/* CSS bar chart */
.bars{display:grid; gap:10px;}
.bar{display:grid; grid-template-columns:200px 1fr 80px; gap:14px; align-items:center; font-size:15px;}
.bar .track{height:14px; background:var(--soft); border-radius:7px; overflow:hidden; border:1px solid var(--line);}
.bar .fill{height:100%; background:var(--blue); border-radius:7px;}
.bar.red .fill{background:var(--red);}
.bar .v{font-weight:700; text-align:right;}
@media(max-width:560px){.bar{grid-template-columns:1fr; gap:6px;} .bar .v{text-align:left;}}

/* Embeds and placeholders */
.embed{border:2px dashed #c9cdda; border-radius:12px; padding:36px 28px; background:#fafbfe; color:var(--muted); text-align:center;}
.embed b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px;}
.embed .sm{font-size:13.5px;}
.ph-img{background:linear-gradient(140deg,#e7ebf7 0%,#cdd5ec 100%); border:1px solid var(--line); border-radius:12px; position:relative; min-height:220px;}
.ph-img span{position:absolute; bottom:12px; left:14px; font-size:11.5px; color:#6b7390; font-weight:600; letter-spacing:.04em;}
.ph-img.wide{aspect-ratio:16/9; min-height:0;} .ph-img.tall{aspect-ratio:4/5; min-height:0;} .ph-img.sq{aspect-ratio:1; min-height:0;}
/* The company logo on its own page. No frame and no border: those belong to the
   placeholder, and a logo reads perfectly well without one. It is sized to the column
   rather than to a box, so it is as large as the layout allows. A logo that needs a
   dark ground to be visible keeps a panel, which is legibility and not decoration. */
.co-logo{display:flex; align-items:center; justify-content:center; min-height:190px; --u:1.9;}
.co-logo img{width:calc(var(--w,110) * var(--u,1) * var(--ug,1) * 1px);
  height:calc(var(--h,40) * var(--u,1) * var(--ug,1) * 1px); max-width:100%; display:block;}
.co-logo.on-dark{background:var(--panel); border-radius:14px; padding:30px 34px; --u:1.6;}
@media(max-width:860px){.co-logo{min-height:0; justify-content:flex-start; margin-bottom:8px; --u:1.25;}
  .co-logo.on-dark{--u:1.1;}}
.grid-2 > *, .grid-3 > *, .grid-4 > *, .founder > *{min-width:0;}

/* Forms (mockup only) */
.form{display:grid; gap:14px; max-width:560px;}
.form label{font-size:13.5px; font-weight:700; display:block; margin-bottom:6px;}
.form input,.form select,.form textarea{width:100%; font:inherit; font-size:15px; padding:11px 13px; border:1px solid #c9cdda; border-radius:8px; background:#fff;}
.form textarea{min-height:110px;}
.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:560px){.form .row2{grid-template-columns:1fr;}}
.tiersel{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.tiersel button{font:inherit; font-weight:700; font-size:16px; padding:14px 6px; border:1.5px solid var(--line); border-radius:10px; background:#fff; cursor:pointer;}
.tiersel button.on{border-color:var(--red); color:var(--red); background:#fff5f6;}
.tiersel button small{display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:2px;}
@media(max-width:560px){.tiersel{grid-template-columns:1fr 1fr;}}
.toggle{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:14px; font-weight:600;}
.toggle button{font:inherit; font-weight:600; padding:8px 16px; border:0; background:#fff; cursor:pointer; color:#33333f;}
.toggle button.on{background:var(--ink); color:#fff;}

/* CTA band */
.ctaband{background:var(--grad); color:#fff; padding:64px 0; position:relative;}
.ctaband::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,var(--red) 0 50%, var(--blue) 50% 100%);}
.ctaband h2{max-width:22ch;}
.ctaband .paths{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:36px;}
/* Number and heading share a line, body and link span both columns under them.
   Kyle 2026-09-21: the number on a line of its own read as a stray digit. */
.ctaband .path{display:grid; grid-template-columns:auto 1fr; column-gap:11px; row-gap:7px;
  align-items:baseline; align-content:start;}
.ctaband .path b{grid-column:1; grid-row:1; font-size:27px; font-weight:800; color:var(--coral); line-height:1;}
.ctaband .path h3{grid-column:2; grid-row:1; color:#fff; font-size:19px; margin:0;}
.ctaband .path p{grid-column:1 / -1; color:#d2d6e2; font-size:15px;}
.ctaband .path a{grid-column:1 / -1; justify-self:start; color:#fff; font-weight:700; margin-top:3px; border-bottom:1.5px solid var(--coral);}
@media(max-width:860px){.ctaband .paths{grid-template-columns:1fr;} .ctaband .path a{display:inline-flex; align-items:flex-end; min-height:40px;}}

/* Footer */
/* Footer, regrouped 2026-10-06 (Kyle): the organization on the left with room to breathe, the
   three link lists as one group, the EIN and address on the copyright line. Markup in
   _tools/set_footer.py. */
footer.site{background:var(--panel); color:#c9cbd6; padding:52px 0 34px; font-size:14.5px;}
footer.site .ft-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:64px; align-items:start;}
footer.site .ft-links{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;}
footer.site h4{color:#fff; font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px;}
footer.site a{display:block; padding:3px 0; color:#c9cbd6;} footer.site a:hover{color:#fff;}
footer.site .brand img{height:30px; margin-bottom:16px;}
footer.site .structure{color:#e6e7ee; font-weight:500; max-width:38ch; line-height:1.55;}
footer.site .legal{border-top:1px solid #3d3d45; margin-top:40px; padding-top:22px; font-size:13px; color:#a2a4b3; line-height:1.55;}
footer.site .legal p + p{margin-top:8px;}
/* Stay in touch sits above the footer on light blue with a red rule, so a dark band above it and
   the dark footer below it stay distinct, and the newsletter reads as an invitation. */
.news-band{background:var(--lblue); border-top:3px solid var(--red); padding:36px 0;}
.news-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:64px; align-items:center;}
.news-row h4{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin:0 0 6px;}
.news-row p{margin:0; color:#3a4a4d;}
.news-row form{display:flex; gap:8px; max-width:460px;}
.news-row input{font-size:15px; padding:11px 12px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--ink); flex:1; min-width:0;}
@media(max-width:860px){footer.site .ft-top,.news-row{grid-template-columns:1fr; gap:28px;}}
@media(max-width:560px){footer.site .ft-links{grid-template-columns:1fr 1fr; gap:24px 20px;} footer.site .ft-links > div:last-child{grid-column:1 / -1;}}

/* Homepage round section, 2026-10-06: every word in one column, the rings beside it as art. */
.round-split{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:64px; align-items:center;}
.round-split .prose p{max-width:60ch;}
.round-art{display:flex; justify-content:center;}
.round-art .roundvis{width:100%; max-width:340px; height:auto;}
@media(max-width:860px){.round-split{grid-template-columns:1fr; gap:28px;} .round-art{order:-1;} .round-art .roundvis{max-width:200px;}}

/* Breadcrumb */
/* Data graphics. Generated by _tools/build_charts.py as inline SVG, so every
   number is real text: the build guard sees it, a screen reader reads it, and
   it restyles for dark or print without being redrawn. */
.chart{display:block; margin:0 0 6px; overflow:visible;}
.chart .axis{stroke:var(--line); stroke-width:1;}
.chart .bar-a{fill:#c9d0e6;}
.chart .bar-b{fill:var(--blue);}
.chart .val{font-size:12.5px; font-weight:600; fill:var(--muted);}
.chart .ratio{font-size:18px; font-weight:800; fill:var(--muted); letter-spacing:-.02em;}
.chart .ratio.now{fill:var(--red);}
.chart .yr{font-size:14px; font-weight:700; fill:var(--ink);}
.chart .hh{font-size:11.5px; fill:var(--muted);}
/* The rubric's three groups. The evaluation is not a flat list of ten and the page
   should not pretend it is: the grouping is what says founder quality outweighs
   business fundamentals. */
.dimgroups{display:grid; gap:18px;}
.dimgroups .dg{border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:#fff;}
/* Three equal groups. No accent on one of them: emphasis reads as weighting, and the
   weighting is not disclosed. Kyle, 2026-09-23. */
.dimgroups .lbl{font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--red);}
.dimgroups ul{margin:12px 0 0; padding:0; list-style:none;}
.dimgroups li{position:relative; padding:7px 0 7px 22px; font-size:17px; line-height:1.38;}
.dimgroups li::before{content:""; position:absolute; left:4px; top:15px; width:7px; height:7px;
  border-radius:50%; background:var(--line);}
/* The Airtable application embed. Two separate problems fixed 2026-09-23 on Kyle's
   read: it sat in the narrow column, and it was 2400px tall.
   The Airtable interface form lays out to the height of its frame and then scrolls
   inside itself, so the frame height is the only thing that decides whether a reader
   scrolls within a box. Measured from the form element's own scrollHeight at three
   widths: 3846px at 940, 4080px at 700, 5101px at 390. Each frame height below carries
   about 150px of headroom on its measurement, because a font loading late can add a
   line and a scrollbar inside the box is much worse than white space under the submit
   button. Airtable does not report its height to us, so these are measurements with a
   date and not a formula. Re-measure after any change to the form. */
.form-embed{max-width:940px; margin-left:auto; margin-right:auto;}
.form-embed iframe{width:100%; height:4000px; border:1px solid var(--line); border-radius:12px;
  background:transparent; display:block;}
@media(max-width:900px){.form-embed iframe{height:4240px;}}
@media(max-width:560px){.form-embed iframe{height:5280px;}}
ul.proof{max-width:74ch;}
.chart .mark{stroke:var(--red); stroke-width:1.5; stroke-dasharray:4 3;}
.chart .markarrow{fill:var(--red);}
.chart .marklbl{font-size:12px; font-weight:800; fill:var(--red);}
.chart text .val{font-weight:800; fill:var(--ink);}
.chart-key{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-top:2px;}
.chart-key span{display:flex; align-items:center; gap:7px;}
.chart-key i{width:12px; height:12px; border-radius:3px; display:inline-block;}
@media(max-width:600px){.chart .val{font-size:11px;} .chart .hh{font-size:10px;} .chart .ratio{font-size:18px;}}

/* Sourced milestones on a company page. The source line is part of the claim,
   so it sits inside the item rather than in a footnote nobody reads. */
.proof{list-style:none; margin:8px 0 0; padding:0;}
.proof li{position:relative; padding:0 0 15px 20px; margin-bottom:15px; border-bottom:1px solid var(--line);}
.proof li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0;}
.proof li::before{content:""; position:absolute; left:0; top:11px; width:7px; height:7px;
  border-radius:50%; background:var(--red);}
.proof li .small{display:block; margin-top:5px; color:var(--muted);}

/* Company page title. A long name at a fixed 46px overflows a 390px phone,
   so the size scales and a name that still doesn't fit breaks instead. */
.co-title{font-size:clamp(30px,6.6vw,46px); overflow-wrap:break-word; hyphens:auto;}

.crumb{font-size:13.5px; color:var(--muted); margin-bottom:18px;}
.crumb a{color:var(--muted);} .crumb a:hover{color:var(--red);}

/* Mockup annotations. Amber, dashed, visible only in the mockup. Delete for production. */
.mock{border:1.5px dashed #d9a400; background:#fff9e3; color:#5b4a00; border-radius:8px; padding:12px 16px; font-size:13.5px; line-height:1.5; margin:18px 0;}
.mock b{color:#5b4a00; font-weight:800; letter-spacing:.06em; font-size:11.5px; text-transform:uppercase; display:block; margin-bottom:4px;}
.mock-bar{background:#2c2c31; color:#ffe08a; font-size:12.5px; padding:6px 0; text-align:center; letter-spacing:.04em;}
.mock-bar a{color:#fff; text-decoration:underline; margin-left:10px;}
body.clean .mock{display:none;}

/* Sitemap page */
.sitemap-list{columns:2; gap:40px;} .sitemap-list li{break-inside:avoid; margin-bottom:8px;}
@media(max-width:680px){.sitemap-list{columns:1;}}

.ph-img.has-img{background:none; border:1px solid var(--line); overflow:hidden; padding:0;}
.ph-img.has-img img{width:100%; height:100%; object-fit:cover; display:block;}
/* The company's own logo standing in for a founder photo we do not have yet.
   Same 4:5 box as the photo, so a headshot drops in later without the page
   reflowing. Kyle 2026-09-21. --u is set so the widest logo still clears the
   padding, and object-fit:contain is the safety net at narrow widths. */
.ph-img.is-logo{display:flex; align-items:center; justify-content:center; padding:30px;
  /* A placeholder is blue because it is empty. A logo is not a placeholder, and it
     belongs on the same white the portfolio cards use. Kyle, 2026-09-23. */
  background:#fff;}
.ph-img.is-logo.on-dark{background:var(--panel); border-color:var(--panel);}
/* Here the logo sizes on its own aspect rather than on the normalised --w/--h
   box. That box exists to make thirty logos optically even side by side in the
   card grid. A company page shows one logo on its own, so nothing is being
   compared, and fitting the normalised box just letterboxes the art smaller. */
.ph-img.is-logo img{width:auto; height:auto; max-width:100%; max-height:62%; display:block;}

/* Liquid wealth gap, design 3B (Claude Design, 2026-09-24). Drawn at 382 wide. */
.gapfig{margin:0;}
.gapfig-title{max-width:440px; font-size:24px; line-height:1.25; font-weight:500; letter-spacing:-0.01em; margin:0 0 18px;}
.gapchart{display:block; overflow:visible; max-width:440px; font-family:'Outfit','Helvetica Neue',Arial,sans-serif;}
.gapchart .gc-yr{font-size:13px; fill:var(--muted);}
.gapchart .gc-yr.now{font-weight:700; fill:var(--ink);}
.gapchart .gc-val{font-size:13px; font-weight:500; fill:var(--ink);}
.gapchart .gc-val.now{font-size:15px; font-weight:700;}
.gapchart .gc-key{font-size:13px; font-weight:700; fill:var(--blue);}
.gapchart .gc-tot{font-size:13px; font-weight:700; fill:var(--ink);}
.gapchart .gc-note{font-size:12px; fill:var(--muted);}
.gapchart .gc-blk{font-size:12px; font-weight:500; fill:var(--red);}
.gapchart .gc-black{fill:var(--red);}
.gapchart .gc-gap{fill:#86a6ec;}
.gapchart .gc-axis{stroke:var(--ink); stroke-width:1;}
.gapfig figcaption{font-size:13px; line-height:1.5; color:var(--muted); margin-top:14px;}
.gapfig-sub{max-width:440px; font-size:20px; line-height:1.4; font-weight:300; margin:0 0 18px;}
.gapchart .cc-lbl{font-size:12px; fill:var(--muted);}
.gapchart .cc-val{font-size:15px; font-weight:700; fill:var(--ink);}
.gapchart .cc-val.red{fill:var(--red);}
.gapchart .cc-in{font-size:12px; font-weight:500; fill:var(--ink);}
.gapchart .cc-div{stroke:#fff; stroke-width:2;}
.gapchart .cc-outline{fill:none; stroke:var(--ink); stroke-width:1.5;}
.gapchart .cc-outline.heavy{stroke-width:2;}

/* The evergreen loop, design 1A (Claude Design, 2026-09-24). Drawn at 342 wide. */
.loopchart{display:block; max-width:380px; overflow:visible; font-family:'Outfit','Helvetica Neue',Arial,sans-serif;}
.loopchart .lp-fwd{stroke:var(--red); stroke-width:3;}
.loopchart .lp-head{fill:var(--red);}
.loopchart .lp-ret{fill:none; stroke:var(--red); stroke-width:3; stroke-dasharray:9 7; stroke-linejoin:round;}
.loopchart .lp-dot{fill:#fff; stroke:var(--ink); stroke-width:2;}
.loopchart .lp-num{font-size:17px; font-weight:700; fill:var(--ink);}
.loopchart .lp-lbl{font-size:15px; font-weight:500; fill:var(--ink);}
.loopchart .lp-lbl.strong{font-size:16px; font-weight:700;}
.loopchart .lp-sub{font-size:13px; fill:var(--muted);}
.loopchart .lp-exp{font-size:15px; font-weight:700; fill:var(--red);}
.loopchart .lp-note{font-size:14px; fill:var(--ink);}

/* Where a contribution goes, design 1B split three ways (2026-09-24). */
.contribchart{max-width:440px;}
.contribchart .cb-sup{fill:#e07a88;}
.contribchart .cb-head{font-size:15px; font-weight:700; fill:var(--ink);}
.contribchart .cb-rule{stroke:var(--ink); stroke-width:1.5;}
.contribchart .cb-rule.red{stroke:var(--red);}
.contribchart .cb-big{font-size:32px; font-weight:700; fill:var(--ink);}
.contribchart .cb-big.light{fill:#fff;}
.contribchart .cb-mid{font-size:22px; font-weight:700; fill:var(--ink);}
.contribchart .cb-found{font-size:15px; font-weight:700; fill:var(--red);}
.contribchart .cb-row{font-size:14px; fill:var(--ink);}
.contribchart .cb-amt{font-weight:700;}

/* Capital on day one, design 1A (2026-09-24). */
.dayone .d1-head{font-size:16px; font-weight:700; fill:var(--ink);}
.dayone .d1-note{font-size:13px; fill:var(--muted);}
.dayone .d1-lbl{font-size:12px; fill:var(--muted);}
.dayone .d1-big{font-size:17px; font-weight:700; fill:var(--ink);}
.dayone .d1-hero{font-size:24px; font-weight:700; fill:var(--red);}
.dayone .d1-rule{stroke:var(--line); stroke-width:1;}
.dayone .d1-sub{font-size:14px; font-weight:700; fill:var(--ink);}
.dayone .d1-val{font-size:12px; font-weight:500; fill:var(--ink);}
.dayone .d1-val.red{fill:var(--red);}

/* It isn't ambition, design 1A (2026-09-24). */
.ambition .am-sec{font-size:12px; font-weight:700; fill:var(--muted); letter-spacing:.04em;}
.ambition .am-rule{stroke:var(--line); stroke-width:1;}
.ambition .am-title{font-size:14px; font-weight:700; fill:var(--ink);}
.ambition .am-sub{font-size:12px; fill:var(--muted);}
.ambition .am-val{font-size:15px; font-weight:700; fill:var(--ink);}
.ambition .am-val.red{fill:var(--red);}
.ambition .am-lab{font-size:12px; font-weight:400; fill:var(--muted);}

/* Where the venture money ends up, design 1C (2026-09-24). */
.venture .vs-note{font-size:12px; fill:var(--muted);}
.venture .vs-year{font-size:15px; font-weight:700; fill:var(--ink);}
.venture .vs-share{font-size:20px; font-weight:700; fill:var(--red);}
.venture .vs-share.small{font-size:17px;}

/* The round in numbers, design 1C (2026-09-24). */
.roundnums .rn-head{font-size:15px; font-weight:700; fill:var(--ink);}
.roundnums .rn-src{font-size:12px; fill:var(--muted);}
.roundnums .rn-big{font-size:56px; font-weight:700; letter-spacing:-0.02em;}
.roundnums .rn-big.red{fill:var(--red);} .roundnums .rn-big.blue{fill:var(--blue);}
.roundnums .rn-lbl{font-size:15px; font-weight:500; fill:var(--ink);}
.roundnums .rn-track{fill:none; stroke:var(--line); stroke-width:1;}
.roundnums .rn-rule{stroke:var(--line); stroke-width:1;}
.roundnums .rn-fig{font-size:20px; font-weight:700; fill:var(--ink);}
.roundnums .rn-fig.blue{fill:var(--blue);}
.roundnums .rn-desc{font-size:14px; fill:var(--ink);}

/* Chicago, design 1A (2026-09-24). */
.chicago .ch-note{font-size:12px; fill:var(--muted);}
.chicago .ch-lbl{font-size:15px; font-weight:700; fill:var(--ink);}
.chicago .ch-track{fill:#fff; stroke:var(--line); stroke-width:1;}
.chicago .ch-val{font-size:22px; font-weight:700;}
.chicago .ch-val.blue{fill:var(--blue);} .chicago .ch-val.red{fill:var(--red);}
.chicago .ch-rank{font-size:13px; fill:var(--ink);}

/* Homepage round visual, design 1B, generated by build_charts.py. Decorative.
   The rings turn very slowly, inner ones faster, and stop for reduced motion. */
.roundvis{display:block; max-width:496px; margin-top:36px;}
.roundvis .rv-ring{fill:none; stroke:#dce4f7; stroke-width:1;}
.roundvis line{stroke-width:1.25;}
.roundvis .rv-1 polygon{fill:#1e4fbf;} .roundvis .rv-1 line{stroke:#1e4fbf;}
.roundvis .rv-2 polygon{fill:#86a6ec;} .roundvis .rv-2 line{stroke:#86a6ec;}
.roundvis .rv-3 circle{fill:#242424;} .roundvis .rv-3 line{stroke:#242424;}
.roundvis .rv-4 circle{fill:#86a6ec;} .roundvis .rv-4 line{stroke:#86a6ec;}
.roundvis .rv-star{fill:var(--red);}
.roundvis .rv-spin{transform-box:view-box; transform-origin:248px 240px;}
@media (prefers-reduced-motion: no-preference){
  .roundvis .rv-1{animation:rv-turn 90s linear infinite;}
  .roundvis .rv-2{animation:rv-turn 140s linear infinite reverse;}
  .roundvis .rv-3{animation:rv-turn 200s linear infinite;}
  .roundvis .rv-4{animation:rv-turn 280s linear infinite reverse;}
}
@keyframes rv-turn{to{transform:rotate(360deg);}}
@media(max-width:860px){.roundvis{max-width:340px; margin:24px auto 8px;}}

/* Apply, "Who we back": six diamonds making our star, two still drifting in.
   Generated by who_we_back_visual() in build_charts.py. The drifters are drawn in
   place and pushed out by their own transform, so arriving is taking it away. It
   plays once when it scrolls into view. Reduced motion shows the star whole. */
.wbvis{display:block; margin-top:40px;}
.wbvis.wb-desk{max-width:496px;}
.wbvis.wb-phone{display:none; max-width:358px;}
.wbvis .wb-red{fill:var(--red);}
.wbvis .wb-blue{fill:#1e4fbf;}
.wbvis .wb-light{fill:#86a6ec;}
.wbvis .wb-ink{fill:#242424;}
.wbvis .wb-trail circle{fill:#86a6ec;}
.wbvis .wb-drift{transform-box:fill-box; transform-origin:center;
  transform:translate(var(--dx),var(--dy)) rotate(var(--r));}
.wbvis.wb-in .wb-drift{transform:none; transition:transform 1.6s cubic-bezier(.22,.8,.3,1) .2s;}
.wbvis .wb-trail{transition:opacity .9s ease .2s;}
.wbvis.wb-in .wb-trail{opacity:0;}
@media (prefers-reduced-motion: reduce){
  .wbvis .wb-drift{transform:none;}
  .wbvis .wb-trail{display:none;}
}
@media(max-width:860px){
  .wbvis.wb-desk{display:none;}
  .wbvis.wb-phone{display:block; margin:24px auto 8px;}
}

/* Research, "What we track": threads leaving one red star, a few ending in an ink dot.
   Generated by what_we_track_visual() in build_charts.py. Script adds wt-ready (threads
   undrawn) and then wt-in when it scrolls into view, so without script the still shows. */
.wtvis{display:block; margin-top:36px; overflow:visible;}
.wtvis.wt-desk{max-width:496px;}
.wtvis.wt-phone{display:none; max-width:358px;}
/* Claude Design 1A, 2026-10-01: one thread per check, ending in its outcome. Building ends in a
   dot, raised reaches furthest and ends in a ringed dot, closed stops early in a quiet ink line. */
.wtvis path{fill:none; stroke-width:1.75; stroke-linecap:round;}
.wtvis .wt-l{stroke:#86a6ec;}
.wtvis .wt-b{stroke:#1e4fbf;}
.wtvis .wt-k{stroke:#242424; stroke-width:1; opacity:.35;}
.wtvis .wt-dot{fill:#1e4fbf;}
.wtvis .wt-ring{fill:#fff; stroke:#1e4fbf; stroke-width:1.25;}
.wtvis .wt-open{fill:#fff; stroke:#242424; stroke-width:1;}
.wtvis .wt-star{fill:var(--red);}
.wtvis.wt-ready path{stroke-dasharray:1; stroke-dashoffset:1;}
.wtvis.wt-ready circle{opacity:0;}
.wtvis.wt-in path{stroke-dashoffset:0; transition:stroke-dashoffset .7s cubic-bezier(.3,.6,.3,1) calc(var(--i) * 25ms);}
.wtvis.wt-in circle{opacity:1; transition:opacity .3s ease calc(var(--i) * 25ms + .6s);}
/* White paper section 1, "The round nobody records": Claude Design 2B. Generated by
   round_nobody_records_visual() in build_charts.py, moved by the script at the foot of white-paper.html.
   Without script or with reduced motion, the still shows. */
.nrvis{display:block; margin-top:44px; overflow:visible;}
.nrvis.nr-desk{max-width:496px;}
.nrvis.nr-phone{display:none; max-width:358px;}
.nrvis .nr-l{fill:#86a6ec;}
.nrvis .nr-b{fill:#1e4fbf;}
.nrvis .nr-m path{fill:none; stroke:#1e4fbf; stroke-width:1.4; stroke-linecap:round;}
.nrvis.nr-phone .nr-m path{stroke-width:1.1;}
.nrvis .nr-m polygon{fill:#1e4fbf;}
@media(max-width:860px){
  .nrvis.nr-desk{display:none;}
  .nrvis.nr-phone{display:block; margin:28px auto 4px;}
}
@media(max-width:860px){
  .wtvis.wt-desk{display:none;}
  .wtvis.wt-phone{display:block; margin:20px auto 4px;}
}

/* Portfolio by year, Claude Design 1B. Generated by portfolio_table() in build_charts.py
   on Research and in the white paper. A real table: large numbers, small heads, and
   under each year one segment per company. */
.ptable{margin:0; max-width:496px;}
.ptable table{width:100%; border-collapse:collapse; table-layout:fixed;}
.ptable th,.ptable td{text-align:left; padding:0; vertical-align:bottom;}
.ptable col,.ptable thead th:first-child{width:88px;}
.ptable thead th{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.3; padding:0 12px 10px 0;}
.ptable .pt-row th,.ptable .pt-row td,.ptable tfoot th,.ptable tfoot td{border-top:1px solid #e4e4e4; padding-top:18px;}
.ptable .pt-row td,.ptable tfoot td{font-size:40px; font-weight:500; line-height:.9; font-variant-numeric:tabular-nums; color:var(--ink);}
.ptable td.pt-op{color:#1e4fbf;} .ptable td.pt-rs{color:var(--red);}
.ptable .pt-yr{display:block; font-size:20px; font-weight:500; line-height:1; color:var(--ink);}
.ptable .pt-age{display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:3px;}
.ptable .pt-strip td{padding:12px 0 18px;}
.ptable .pt-strip td span{display:flex; gap:2px;}
.ptable .pt-strip td span + span{margin-top:4px;}
.ptable i{display:block; flex:0 0 22px; min-width:0; height:7px; box-sizing:border-box;}
@media(max-width:480px){.ptable i{flex-basis:13px;}}
.ptable .pt-op{background:#86a6ec;} .ptable .pt-cl{border:1.5px solid #575757;}
.ptable .pt-rs{background:var(--red);} .ptable .pt-rscl{border:1.5px solid var(--red);}
.ptable .pt-no{background:#ededed;}
.ptable td.pt-op,.ptable td.pt-rs{background:none;}
.ptable tfoot th{font-size:20px; font-weight:700; color:var(--ink); padding-bottom:4px;}
.ptable tfoot th,.ptable tfoot td{border-top:1px solid var(--ink);}
.ptable tfoot td{font-weight:700;}
.ptable figcaption{font-size:12px; line-height:1.5; color:var(--muted); padding-top:18px;}
.ptable .pt-key{display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--ink); margin-bottom:10px;}
.ptable .pt-key span{display:flex; gap:6px; align-items:center;}
.ptable .pt-key i{flex:0 0 22px;}
@media(max-width:860px){
  .ptable{max-width:none;}
  .ptable thead th:first-child{width:64px;}
  .ptable thead th{font-size:10px; letter-spacing:.08em;}
  .ptable .pt-row td,.ptable tfoot td{font-size:28px;}
  .ptable .pt-yr{font-size:17px;}
}

/* Apply, rubric section: Claude Design 1A, "Ten facets, one form". Generated by rubric_visual()
   in build_charts.py, turned by the script at the foot of apply.html. Ten equal faces, one per
   thing the rubric scores. It stays pinned in the left column while the ten rows scroll past.
   Without script or with reduced motion, the still shows. */
#rubric .grid-2{align-items:stretch;}
.rbwrap{position:sticky; top:max(90px, calc(50vh - 280px)); margin-top:36px;}
.rbvis{display:block; overflow:visible;}
.rbvis polygon{stroke:#f5f6fa; stroke-width:1; stroke-linejoin:round;}
.rbvis.rb-desk{max-width:496px;}
.rbvis.rb-phone{display:none; max-width:358px;}
.rbvis.rb-phone polygon{stroke-width:.75;}
@media(max-width:860px){
  .rbwrap{position:static; margin-top:24px;}
  .rbvis.rb-desk{display:none;}
  .rbvis.rb-phone{display:block; margin:0 auto 8px;}
}

/* About, Mission: the logo mark as a slab turning on its vertical axis, Claude Design 4B v2.
   Generated by mission_visual() in build_charts.py, which writes the face-on still. The
   script at the foot of about.html builds the slab and turns it: every 16 s it rests edge
   on for 2.2 s, its side a bar banded in the logo's colours darkened to 72%, then makes one
   steady full turn. Without script or with reduced motion the still stays. */
.ms-grid{align-items:center;}
.msvis{display:block; margin:0 auto;}
.msvis.ms-desk{max-width:496px;}
.msvis.ms-phone{display:none; max-width:342px;}
.msvis .ms-r{fill:#F30A04;}
.msvis .ms-b{fill:#1046D1;}
@media(max-width:860px){
  .msvis.ms-desk{display:none;}
  .msvis.ms-phone{display:block; margin:0 auto 8px;}
}

/* Founders' headshots on company pages (2026-10-14). The logo stays in the hero on
   every page. The founders section (layout B, Kyle's choice) uses the team grid from
   About, so founders and our own team look alike. .faces is the unused layout A. */
.founded .kicker{margin-bottom:10px;}
.faces{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 22px;}
.faces li{display:flex; align-items:center; gap:10px; font-weight:600; min-width:0;}
.faces img,.faces .no-photo{width:56px; height:56px; flex:none; border-radius:50%; object-fit:cover; object-position:50% 20%; border:1px solid var(--line);}
.faces .no-photo{display:none;}
.founders-team{grid-template-columns:repeat(auto-fill,minmax(150px,200px)); margin-top:6px;}
.founders-team img{object-position:50% 20%;}
@media(max-width:860px){.founders-team{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}
/* The founder's quote beside the headshots (2026-10-14). Below them on a phone. */
.founders-row{display:grid; grid-template-columns:auto minmax(0,1fr); gap:56px; align-items:center;}
.founders-row .founders-team{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(130px,190px);}
.founders-row .pull p{font-size:24px;}
@media(max-width:860px){.founders-row{grid-template-columns:minmax(0,1fr); gap:32px;} .founders-row .founders-team{grid-auto-flow:row; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}

/* First Check, What we believe: the step graphic beside the text (2026-10-14).
   Not .steps, which is the numbered-steps grid on Home, How It Works and Apply. Reusing it
   squeezed those into one 400px column on production for an evening. */
.grid-2.believe{grid-template-columns:0.8fr 1.2fr; align-items:center; gap:56px;}
.fc-steps{display:block; width:100%; max-width:400px; font-family:'Outfit','Helvetica Neue',Arial,sans-serif;}
.fc-steps .st-first{fill:var(--red);}
.fc-steps .st-r2{fill:rgba(200,16,46,.08); stroke:rgba(200,16,46,.35); stroke-width:1.5; stroke-dasharray:5 6;}
.fc-steps .st-r3{fill:rgba(200,16,46,.035); stroke:#c9cedc; stroke-width:1.5; stroke-dasharray:5 6;}
.fc-steps .st-mark{filter:brightness(0) invert(1);}
.fc-steps .st-lbl{font-size:16px; font-weight:600; fill:var(--muted);}
.fc-steps .st-lbl.first{font-weight:700; fill:var(--red);}
@media(max-width:860px){.grid-2.believe{grid-template-columns:minmax(0,1fr); gap:28px;} .grid-2.believe > div{order:-1;} .fc-steps{max-width:300px;}}

/* Research explainer: who funds a company, in the order it usually raises (2026-10-14).
   Order from Berger and Udell 1998 and OECD 2011, see website-2026/reports/Funding sequence evidence.md. */
.ex-fig{margin:32px 0 0; max-width:380px;}
.ex-circle{display:block; width:100%; font-family:'Outfit','Helvetica Neue',Arial,sans-serif;}
.ex-circle .ex-r3{fill:rgba(200,16,46,.035); stroke:#c9cedc; stroke-width:1.5; stroke-dasharray:5 6;}
.ex-circle .ex-r2{fill:rgba(200,16,46,.07); stroke:rgba(200,16,46,.3); stroke-width:1.5; stroke-dasharray:5 6;}
.ex-circle .ex-r1{fill:rgba(200,16,46,.18); stroke:rgba(200,16,46,.45); stroke-width:1.5;}
.ex-circle .ex-core{fill:#fff; stroke:var(--ink); stroke-width:1.5;}
.ex-circle .ex-c{font-size:13px; font-weight:700; fill:var(--ink); text-anchor:middle;}
.ex-circle .ex-l{font-size:14.5px; font-weight:600; fill:var(--ink); text-anchor:middle;}
.ex-circle .ex-l.first{font-weight:700; fill:var(--red);}
/* Chart labels on phones (Kyle, 15 Oct 2026: "make them larger on phones"). The charts
   scale down with their viewBox, so a 12px label rendered at 10.7px at 390px wide. These
   bring every label to at least 12px on a phone. Checked chart by chart at 390. */
@media(max-width:600px){
  .gapchart .gc-yr, .gapchart .gc-val, .gapchart .gc-key, .gapchart .gc-tot,
  .gapchart .gc-note, .gapchart .gc-blk, .gapchart .cc-lbl, .gapchart .cc-in,
  .dayone .d1-note, .dayone .d1-lbl, .dayone .d1-val, .ambition .am-sec, .ambition .am-sub,
  .venture .vs-note, .roundnums .rn-src, .chicago .ch-note, .chicago .ch-rank{font-size:13.6px;}
  .ex-circle .ex-c{font-size:15px;}
  .ex-circle .ex-l{font-size:15px;}
}
.ex-fig figcaption{color:var(--muted);}
@media(max-width:860px){.ex-fig{max-width:320px;}}