/* investors.spojiti.world — site chrome.
   Every colour, radius and font comes from the production brand kit
   (brand-kit-c789445e.css, generated from brand-kit/tokens.json). Nothing
   here defines a palette; this file only arranges what the kit provides.
   A page that needs a colour asks for var(--brand-read) in ink contexts and
   var(--brand) elsewhere — the kit's rule, and tools/site-kit.py enforces it
   on the main site. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* ── nav ─────────────────────────────────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:50;background:var(--headerbg);
  backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--border)}
.navwrap{max-width:1240px;margin:0 auto;padding:0 22px}
.nav{display:flex;align-items:center;gap:10px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.2px;
  color:var(--strong);text-decoration:none;font-size:17px;white-space:nowrap}
.brand img{width:26px;height:26px;display:block}
.navspace{flex:1}
.navlinks{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.navlinks a{color:var(--ink2);font-weight:600;font-size:13.5px;padding:7px 9px;
  border-radius:9px;text-decoration:none;white-space:nowrap}
.navlinks a:hover{background:var(--hover);color:var(--strong)}
.navlinks a.on{color:var(--strong);background:var(--hover)}
.navtoggle{display:none}
/* The theme toggle, at the right-hand end of the bar. Rules copied from the
   shipped spojiti.world header so the control is the same size, the same
   shape and the same colour on every Spojiti surface. Dark shows the moon,
   light shows the sun. */
.themebtn{flex:0 0 auto;margin-left:auto;display:grid;place-items:center;width:36px;height:36px;
  border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--ink2);
  cursor:pointer;padding:0}
.themebtn:hover{color:var(--strong);background:var(--hover)}
.themebtn svg{width:18px;height:18px;display:block}
.themebtn .sun{display:none}
[data-theme="light"] .themebtn .sun{display:block}
[data-theme="light"] .themebtn .moon{display:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:20px;height:2px;background:var(--ink2);margin:4px 0;border-radius:2px}
@media(max-width:1100px){
  .burger{display:block;margin-left:0}
  .themebtn{margin-left:auto}
  .navlinks{position:absolute;top:62px;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;background:var(--menubg);border-bottom:1px solid var(--border);padding:8px 14px 14px}
  .navtoggle:checked ~ .navlinks{display:flex}
  .navlinks a{padding:12px 10px}
}

/* ── type ────────────────────────────────────────────────────────────────── */
h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-1.1px;margin:0 0 18px;font-weight:800}
h2{font-size:clamp(23px,2.8vw,30px);line-height:1.18;letter-spacing:-.5px;margin:52px 0 16px;font-weight:800}
h3{font-size:19px;line-height:1.3;letter-spacing:-.2px;margin:30px 0 10px;font-weight:800}
h1,h2,h3,p,li,td,th{overflow-wrap:break-word}
p{margin:0 0 16px;font-size:16.5px;line-height:1.72;color:var(--ink2)}
p.lead{font-size:19.5px;line-height:1.62;color:var(--ink)}
strong,b{color:var(--strong);font-weight:700}
a{color:var(--brand-read)}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--brand-read);margin:0 0 14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
section{scroll-margin-top:78px}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{padding:64px 0 18px;border-bottom:1px solid var(--border)}
.hero p.lead{max-width:760px}
.pagehead{padding:54px 0 8px}

/* ── cards ───────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px 24px}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
/* A price sits UNDER the card heading, never inside it. The brand kit lays
   `.card > h3` out as a flex row (an icon beside a short label), so a heading
   containing several inline spans becomes several flex items side by side and
   the sentence breaks into columns instead of wrapping. Card headings are
   labels; anything longer is a paragraph. */
.card p.price{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--brand-read);font-size:17px;font-weight:700;margin:0 0 12px}
.grid{display:grid;gap:16px}
/* Grid items default to min-width:auto, so a single long token inside a card
   makes its track wider than the container and the whole PAGE scrolls
   sideways on a phone — which is how the monetisation page gained 40px of
   horizontal scroll at 390px. min-width:0 lets the track shrink and the text
   wrap, which is what a reader expects. */
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}
  /* 24px of card padding either side is a quarter of a 360px phone. */
  .card,.note,.honest,.calc{padding:18px 16px}
  .wrap{padding:0 16px}}

/* the honesty device: a bordered block that says what is NOT true */
.honest{border:1px solid var(--border);border-left:3px solid var(--warn);
  background:var(--card2);border-radius:12px;padding:20px 22px;margin:22px 0}
.honest .tag{display:block;font-size:12px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--warn);margin-bottom:8px}
.honest p:last-child{margin-bottom:0}

.note{border:1px solid var(--border);border-left:3px solid var(--brand);
  background:var(--card2);border-radius:12px;padding:20px 22px;margin:22px 0}
.note .tag{display:block;font-size:12px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--brand-read);margin-bottom:8px}
.note p:last-child{margin-bottom:0}

/* ── stat strip ──────────────────────────────────────────────────────────── */
.stats{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);margin:26px 0}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 18px 16px}
.stat .n{font-size:27px;font-weight:800;letter-spacing:-.8px;color:var(--strong);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.1}
.stat .k{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.45}

/* ── tables ──────────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;margin:22px 0}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
thead th{background:var(--card2);color:var(--muted);font-size:11.5px;letter-spacing:1px;
  text-transform:uppercase;font-weight:800;white-space:nowrap;position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--hover)}
td.num,th.num{text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;font-size:13.5px}
td.name{color:var(--strong);font-weight:600}
tr.total td{background:var(--card2);font-weight:800;color:var(--strong)}
.yes{color:var(--brand-read);font-weight:800}
.no{color:var(--danger);font-weight:800}
.part{color:var(--warn);font-weight:800}
.us td{background:var(--card3)}
.us td.name{color:var(--brand-read)}
caption{caption-side:bottom;text-align:left;padding:12px 14px;color:var(--muted);
  font-size:13px;line-height:1.6}

/* ── calculator ──────────────────────────────────────────────────────────── */
.calc{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;margin:24px 0}
.ctrls{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-bottom:8px}
@media(max-width:800px){.ctrls{grid-template-columns:1fr}}
.ctrl label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ctrl .val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--brand-read);font-size:17px;font-weight:700;margin-bottom:6px}
.ctrl .hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:7px}
input[type=range]{width:100%;accent-color:var(--brand);height:22px}
input[type=number],select{width:100%;background:var(--bg2);border:1px solid var(--border);
  border-radius:10px;color:var(--ink);padding:10px 12px;font-size:15px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.readout{border-top:1px solid var(--border);margin-top:20px;padding-top:20px}
/* ONE BUTTON, and only one. The brand kit enforces this with a selector more
   specific than anything a page can write (body .btn.ghost), because the house
   rule is a single button style across every Spojiti surface. Do not add a
   variant here; where a page needs a quieter second action, use a link. */
.btn{display:inline-block;background:var(--brand);color:var(--on-brand);border:0;
  border-radius:12px;padding:12px 20px;font-weight:800;font-size:14.5px;cursor:pointer;
  text-decoration:none}
.btnrow .also{align-self:center;color:var(--brand-read);font-weight:700;font-size:15px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}

/* ── chart ───────────────────────────────────────────────────────────────── */
.chart{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin:22px 0}
.chart svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ── lists ───────────────────────────────────────────────────────────────── */
ul.plain{list-style:none;padding:0;margin:0 0 16px}
ul.plain li{position:relative;padding-left:22px;margin:0 0 11px;color:var(--ink2);
  font-size:16.5px;line-height:1.66}
ul.plain li::before{content:"";position:absolute;left:3px;top:11px;width:7px;height:7px;
  border-radius:2px;background:var(--brand)}
ul.plain li b{color:var(--strong)}

/* ── page nav ────────────────────────────────────────────────────────────── */
.pager{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin:56px 0 0;
  border-top:1px solid var(--border);padding-top:26px}
@media(max-width:620px){.pager{grid-template-columns:1fr}}
.pager a{display:block;background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:16px 18px;text-decoration:none}
.pager a:hover{background:var(--card2)}
.pager .k{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin-bottom:5px}
.pager .t{color:var(--strong);font-weight:700;font-size:16px}
.pager .next{text-align:right}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--border);margin-top:64px;padding:40px 0 48px;
  color:var(--muted);font-size:13.5px;line-height:1.7}
footer.site a{color:var(--ink2);text-decoration:none}
footer.site a:hover{color:var(--strong)}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
.fgrid h4{color:var(--strong);font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;margin:0 0 10px}
.fgrid a{display:block;margin:6px 0}
.fline{border-top:1px solid var(--border);margin-top:28px;padding-top:18px;font-size:12.5px}

/* ── print: investors print decks ────────────────────────────────────────── */
@media print{
  header.site,.pager,.burger{display:none}
  body{background:#fff;color:#111}
  .card,.honest,.note,.calc,.chart,.tablewrap{break-inside:avoid;border-color:#ccc}
  a{color:#111;text-decoration:none}
}