:root{
  --bg:#F4F4F0; --paper:#FFFFFF; --ink:#111111; --ink-2:#575350; --line:#111111;
  --c1:#FF90E8; --c2:#FFD84D; --c3:#7CB0FF; --c4:#57D9A3; --c5:#FF9A5A; --c6:#B69CFF; --c7:#FF7A7A;
  --bw:2px; --r:4px;
  --disp:'Archivo Black','Helvetica Neue',Arial,sans-serif;
  --body:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
     font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mid{max-width:760px}

/* ---- nav: segmented black bar, gumroad style ---- */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:var(--bw) solid var(--line)}
.nav .in{max-width:1200px;margin:0 auto;display:flex;align-items:stretch}
.nav .brand{font-family:var(--disp);font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;
  display:flex;align-items:center;padding:0 22px;border-right:var(--bw) solid var(--line)}
.nav .brand img{height:30px;width:auto;display:block}
@media(max-width:560px){.nav .brand img{height:24px}.nav .brand{padding:0 14px}}
.nav .sp{flex:1}
.nav a.cell{display:flex;align-items:center;padding:0 20px;text-decoration:none;font-weight:500;
  font-size:.92rem;border-left:var(--bw) solid var(--line);min-height:56px}
.nav a.cell:hover{background:var(--c2)}
.nav a.cell.dark{background:var(--ink);color:var(--bg);font-weight:700}
.nav a.cell.dark:hover{background:var(--c1);color:var(--ink)}
@media(max-width:1180px){.nav a.cell.opt{display:none}}

/* ---- hero ---- */
.hero{border-bottom:var(--bw) solid var(--line);padding:64px 0 56px;position:relative;overflow:hidden}
.blob{position:absolute;border:var(--bw) solid var(--line);border-radius:50%;z-index:0}
.b1{width:150px;height:150px;background:var(--c1);left:-46px;top:56px;transform:rotate(-12deg)}
.b2{width:96px;height:96px;background:var(--c2);right:8%;top:34px}
.b3{width:126px;height:126px;background:var(--c3);right:-40px;bottom:26px}
.b4{width:70px;height:70px;background:var(--c4);left:14%;bottom:-24px}
.hero .wrap{position:relative;z-index:1}
h1{font-family:var(--disp);font-size:clamp(2.1rem,5.6vw,4.1rem);line-height:1.02;
   letter-spacing:-.035em;margin:.6rem 0 1rem;max-width:17ch}
.tagline{font-size:1.18rem;max-width:52ch;margin:0 0 1.5rem;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:var(--bw) solid var(--line);border-radius:100px;padding:.28rem .8rem;background:var(--paper);
  font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.chip.c1{background:var(--c1)} .chip.c2{background:var(--c2)}
.chip.c3{background:var(--c3)} .chip.c4{background:var(--c4)}
/* centred hero, homepage only */
.hero.center .wrap{text-align:center}
.hero.center h1{margin-left:auto;margin-right:auto}
.hero.center .tagline{margin-left:auto;margin-right:auto;max-width:62ch}
.hero.center .chips{justify-content:center}

/* ---- generic sections ---- */
.sec{border-bottom:var(--bw) solid var(--line);padding:52px 0}
.sec.paper{background:var(--paper)}
h2{font-family:var(--disp);font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.08;
   letter-spacing:-.03em;margin:.2rem 0 1rem}
h3{font-family:var(--disp);font-size:1.1rem;letter-spacing:-.02em;margin:0 0 .5rem}
p{margin:0 0 1rem}
.lede{font-size:1.16rem}
.kicker{font-family:var(--disp);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  display:inline-block;border:var(--bw) solid var(--line);padding:.3rem .7rem;margin-bottom:1rem;background:var(--c2)}

/* ---- cost table ---- */
.tw{overflow-x:auto;border:var(--bw) solid var(--line);background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.9rem}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line)}
thead th{background:var(--ink);color:var(--bg);font-family:var(--disp);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border-bottom:var(--bw) solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr.top{background:var(--c2)}
tbody tr:hover{background:var(--bg)}
tbody tr.top:hover{background:var(--c2)}
.cpl{font-family:var(--disp);font-size:.95rem;white-space:nowrap}
.na{color:var(--ink-2);font-style:italic}
td .rk{font-family:var(--disp);font-size:.9rem}
.tname{display:inline-flex;align-items:center;gap:.45rem;font-weight:700}
.tname img{width:18px;height:18px;object-fit:contain;flex:0 0 18px}
.tname a{text-decoration:none}
.tname a:hover{background:var(--c1)}

/* ---- tool rows ---- */
.tool{border-bottom:var(--bw) solid var(--line);scroll-margin-top:70px}
.tool .grid{display:grid;grid-template-columns:110px 1fr 1fr;min-height:100%}
@media(max-width:980px){.tool .grid{grid-template-columns:76px 1fr}.tool .shotcell{grid-column:1/-1;border-left:0!important;border-top:var(--bw) solid var(--line)}}
@media(max-width:620px){.tool .grid{grid-template-columns:1fr}.tool .numcell{border-right:0!important;border-bottom:var(--bw) solid var(--line);min-height:auto;padding:14px 24px}}
.numcell{border-right:var(--bw) solid var(--line);display:flex;align-items:flex-start;justify-content:center;
  padding:34px 0;font-family:var(--disp);font-size:2.5rem;letter-spacing:-.04em;line-height:1}
.bodycell{padding:34px 30px}
.shotcell{border-left:var(--bw) solid var(--line);padding:34px 30px;background:var(--paper)}
.tool h2{font-size:clamp(1.25rem,2.4vw,1.75rem);margin-bottom:.7rem}
.pricebox{border:var(--bw) solid var(--line);display:flex;margin:1.2rem 0}
.pricebox div{padding:.7rem .9rem;flex:1;min-width:0}
.pricebox div+div{border-left:var(--bw) solid var(--line)}
.pricebox dt{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.pricebox dd{margin:0;font-family:var(--disp);font-size:1rem;letter-spacing:-.02em}

/* ---- data homepage: stat grids, charts, source notes ---- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border:var(--bw) solid var(--line);background:var(--paper)}
.statgrid .s{padding:24px 20px;border-left:var(--bw) solid var(--line);
  border-top:var(--bw) solid var(--line);margin-left:calc(-1 * var(--bw));margin-top:calc(-1 * var(--bw))}
.statgrid .s b{display:block;font-family:var(--disp);font-size:2.4rem;line-height:1;letter-spacing:-.03em}
.statgrid .s .lab{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);margin-top:.7rem;font-weight:700}
.statgrid .s .note{display:block;font-size:.88rem;color:var(--ink-2);margin-top:.5rem;line-height:1.45}
.statgrid a.s{text-decoration:none;color:inherit}
.statgrid a.s:hover{background:var(--c2)}
@media(max-width:560px){.statgrid .s b{font-size:2rem}}

.chartbox{border:var(--bw) solid var(--line);background:var(--paper);padding:22px 22px 18px}
.chartbox h3{margin:0 0 .3rem}
.chartbox .sub{margin:0 0 1.2rem;font-size:.9rem;color:var(--ink-2)}
.bars{display:grid;gap:9px}
.bar{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;align-items:center;gap:12px;font-size:.9rem}
.bar .t{display:block;height:24px;border:var(--bw) solid var(--line);background:var(--bg)}
.bar .f{display:block;height:100%}
.bar .v{font-family:var(--disp);font-size:.92rem;min-width:44px;text-align:right}
@media(max-width:560px){.bar{grid-template-columns:1fr;gap:3px}.bar .v{text-align:left}}

.srcnote{font-size:.85rem;color:var(--ink-2);margin-top:1rem}
.srcnote a{color:var(--ink-2)}
ol.srclist{font-size:.9rem;color:var(--ink-2);padding-left:1.2rem}
ol.srclist li{margin-bottom:.6rem}

/* range bars need a wider value column and a real log axis */
.bar.wide{grid-template-columns:minmax(96px,150px) 1fr auto}
.bar.wide .v{min-width:96px}
.axis{position:relative;display:block;height:15px;margin-top:5px}
.axis i{position:absolute;font-style:normal;font-size:.66rem;color:var(--ink-2);
  white-space:nowrap;font-weight:700;letter-spacing:.06em;transform:translateX(-50%)}
.axis i.a0{transform:none}
.axis i.a1{transform:translateX(-100%)}
.axisrow{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;gap:12px}
.axisrow .sp{min-width:96px}
@media(max-width:560px){.axisrow{grid-template-columns:1fr}.axisrow .lbl,.axisrow .sp{display:none}}
/* fact boxes with more than three entries cannot survive one row on a phone */
@media(max-width:700px){
  .pricebox{display:grid;grid-template-columns:1fr 1fr}
  .pricebox div+div{border-left:0}
  .pricebox div{border-top:var(--bw) solid var(--line);border-left:var(--bw) solid var(--line)}
  .pricebox div:nth-child(odd){border-left:0}
  .pricebox div:nth-child(-n+2){border-top:0}
  .pricebox div:last-child:nth-child(odd){grid-column:1/-1}
}
.shot{border:var(--bw) solid var(--line);background:var(--bg)}
.cap{font-size:.8rem;color:var(--ink-2);margin:.55rem 0 0}
.pc{margin:1.2rem 0}
.pc ul{margin:0 0 .9rem;padding:0;list-style:none;font-size:.9rem}
.pc li{display:flex;gap:.5rem;margin-bottom:.35rem;line-height:1.45}
.pc li b{flex:0 0 auto;font-family:var(--disp);font-size:.8rem;width:1.1rem}
.pc .good li b{color:#0B8A4B} .pc .bad li b{color:#C02626}
.pc h4{font-family:var(--disp);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .5rem}
.take{border:var(--bw) solid var(--line);padding:.85rem 1rem;font-size:.93rem;margin:1.1rem 0}
.btn{display:inline-block;border:var(--bw) solid var(--line);background:var(--ink);color:var(--bg);
  padding:.62rem 1.15rem;font-weight:700;font-size:.9rem;text-decoration:none;border-radius:0}
.btn:hover{background:var(--c1);color:var(--ink)}
.btn.lite{background:var(--paper);color:var(--ink)}
.btn.lite:hover{background:var(--c2)}

/* ---- faq + lists ---- */
details{border:var(--bw) solid var(--line);background:var(--paper);margin-bottom:-2px}
summary{cursor:pointer;list-style:none;padding:.85rem 1rem;font-weight:700;display:flex;
  justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--disp);font-size:1.1rem}
details[open] summary{background:var(--c3);border-bottom:var(--bw) solid var(--line)}
details[open] summary::after{content:"3"}
.ans{padding:.9rem 1rem;font-size:.93rem;color:var(--ink-2)}
.ans p:last-child{margin:0}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:1.2rem 0}
ol.steps li{counter-increment:s;border:var(--bw) solid var(--line);background:var(--paper);
  padding:.8rem 1rem .8rem 3.1rem;position:relative;margin-bottom:-2px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;bottom:0;width:2.4rem;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);
  border-right:var(--bw) solid var(--line);background:var(--c4)}
ol.steps li:nth-child(3n+2)::before{background:var(--c1)}
ol.steps li:nth-child(3n)::before{background:var(--c3)}

/* ---- back to top + footer ---- */
.totop{position:fixed;right:20px;bottom:20px;z-index:70;width:48px;height:48px;display:none;
  align-items:center;justify-content:center;border:var(--bw) solid var(--line);background:var(--c2);
  cursor:pointer;font-family:var(--disp);font-size:1rem;padding:0;color:var(--ink)}
.totop.on{display:flex}
.totop:hover{background:var(--c1)}
.totop:focus-visible{outline:3px solid var(--c3);outline-offset:2px}
footer{background:var(--ink);color:var(--bg);padding:40px 0 48px}
footer a{color:var(--bg)}
footer a:hover{background:var(--c1);color:var(--ink)}
footer .fb{font-family:var(--disp);font-size:1.25rem;margin-bottom:.6rem}
footer small{color:#9A948F;font-size:.82rem;line-height:1.6;display:block;max-width:64ch}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- charts: unit marks and dot plots, not bars ---- */
.uchart{display:grid;gap:15px}
.urow{display:grid;grid-template-columns:minmax(92px,150px) 1fr auto;gap:14px;align-items:center}
.urow .ul{font-size:.86rem;line-height:1.3}
.marks{display:flex;flex-wrap:wrap;gap:4px}
.mk{width:12px;height:12px;border:var(--bw) solid var(--line);background:var(--c2);flex:0 0 12px}
.mk.off{background:transparent;opacity:.42}
.urow .un{font-family:var(--disp);font-size:1.05rem;min-width:46px;text-align:right}
.ukey{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:1rem;
      font-size:.76rem;color:var(--ink-2);letter-spacing:.04em}
.ukey span{display:flex;align-items:center;gap:7px}
.ukey .mk{width:10px;height:10px;flex:0 0 10px}

.dchart{display:grid;gap:8px}
.drow{display:grid;grid-template-columns:minmax(88px,136px) 1fr auto;gap:14px;align-items:center}
.drow .dl{font-size:.86rem}
.dtrack{position:relative;height:18px}
.dtrack:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--line);opacity:.2}
.dot{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border:var(--bw) solid var(--line);border-radius:50%;background:var(--c3)}
.dot.hi{background:var(--c1)}
.span{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--line)}
.end{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border:var(--bw) solid var(--line);border-radius:50%;background:var(--paper)}
.end.mx{background:var(--c4)}
.drow .dn{font-family:var(--disp);font-size:1rem;min-width:52px;text-align:right}
.drow.wide .dn{min-width:104px;font-size:.93rem}
.scale{position:relative;display:block;height:16px;margin-top:6px}
.scale i{position:absolute;font-style:normal;font-size:.66rem;color:var(--ink-2);
  white-space:nowrap;font-weight:700;letter-spacing:.06em;transform:translateX(-50%)}
.scale i.a0{transform:none}
.scale i.a1{transform:translateX(-100%)}
.scalerow{display:grid;grid-template-columns:minmax(88px,136px) 1fr auto;gap:14px}
.scalerow .sp{min-width:52px}
.scalerow.wide .sp{min-width:104px}
@media(max-width:560px){
  .urow,.drow{grid-template-columns:1fr;gap:5px}
  .urow .un,.drow .dn{text-align:left}
  .scalerow{grid-template-columns:1fr}
  .scalerow .sl,.scalerow .sp{display:none}
}

/* ---- fact list ---- */
.factgroup{margin-top:2.4rem}
.factgroup h3{font-size:1.35rem;margin:0 0 .2rem}
.factgroup .gsub{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--ink-2);margin:0 0 .4rem}
.factlist{border-top:var(--bw) solid var(--line);margin-top:1rem}
.fact{display:grid;grid-template-columns:minmax(118px,170px) 1fr;gap:26px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line)}
.fact .big{font-family:var(--disp);font-size:2.15rem;line-height:1;letter-spacing:-.03em;
  position:relative;padding-left:14px}
.fact .big:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;background:var(--c2)}
.fact .txt{font-size:1.02rem;line-height:1.55;max-width:62ch}
.cite{display:inline-block;min-width:17px;height:17px;line-height:15px;text-align:center;
  border:1px solid var(--line);background:var(--paper);font-family:var(--body);font-size:.62rem;
  font-weight:700;color:var(--ink);text-decoration:none;vertical-align:super;margin-left:.34rem;
  padding:0 2px}
.cite:hover{background:var(--c2);color:var(--ink)}
ol.srclist li{scroll-margin-top:86px}
ol.srclist li:target{background:var(--c2);box-shadow:-8px 0 0 var(--c2),8px 0 0 var(--c2)}
@media(max-width:620px){
  .fact{grid-template-columns:1fr;gap:8px;padding:17px 0}
  .fact .big{font-size:1.85rem}
}