/* Bootstrapped — poster system. Four colours, hard edges, one display face. */
:root{
  --u:#4F46E5; --y:#E4FF3C; --k:#0B1533; --w:#FFFFFF; --cy:#10C2D4;
  --k2:#0B1533; --line:#0B1533; --mute:rgba(0,0,0,.62); --mutew:rgba(255,255,255,.9);
  --d:"Unbounded","Arial Black",Impact,sans-serif;
  --s:"Onest","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,4.5vw,56px);
  --sec:clamp(48px,7vw,84px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--w);color:var(--k);font:500 17px/1.5 var(--s);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{margin:0}
::selection{background:var(--y);color:var(--k)}
[hidden]{display:none!important}

/* type */
.d,h1,h2,h3{font-family:var(--d);font-weight:900;letter-spacing:-.05em;text-transform:none;line-height:.92}
.lab{font:700 12px/1.3 var(--s);letter-spacing:.14em;text-transform:none}
h1{font-size:clamp(36px,7.4vw,104px);overflow-wrap:anywhere}
h2{font-size:clamp(30px,5.4vw,76px);overflow-wrap:anywhere}
h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.03em}
u{text-decoration-thickness:2px;text-underline-offset:3px}

/* shell */
.in{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.ann{background:var(--k);color:var(--w);text-align:center;padding:11px var(--pad);font:700 12px/1.4 var(--s);letter-spacing:.12em;text-transform:none}
.ann b{color:var(--y);font-weight:700}
.top{position:sticky;top:0;z-index:60;background:var(--u);color:var(--w);border-bottom:2px solid var(--w)}
.top .in{display:flex;align-items:center;gap:22px;height:72px}
.wm{display:flex;align-items:center;gap:12px;font:900 17px/1 var(--d);letter-spacing:-.02em;text-transform:none;color:var(--w)}
.wm .mark{width:34px;height:34px;color:var(--y);flex:none}
.wm small{align-self:flex-end;padding-bottom:2px}
.wm small{font:700 10px/1 var(--s);letter-spacing:.12em;opacity:.75;text-transform:none}
.top nav{margin-left:auto;display:flex;gap:26px;font:600 15px/1 var(--s)}
.menu{display:none;margin-left:auto;width:44px;height:44px;border:2px solid var(--w);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menu i{display:block;width:20px;height:3px;background:var(--w)}
.top.open .menu i:nth-child(1){transform:translateY(8px) rotate(45deg)}.top.open .menu i:nth-child(2){opacity:0}.top.open .menu i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.top nav a{padding:6px 0;border-bottom:3px solid transparent}
.top nav a:hover{color:var(--cy)}
.top nav a[aria-current=page]{color:var(--y);border-bottom-color:var(--y)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--s);padding:18px 30px;background:var(--y);color:var(--k);border:2px solid var(--y);cursor:pointer;transition:transform .12s,background .12s}
.btn:hover{transform:translateY(-2px)}
.btn.sm{padding:12px 20px;font-size:14px}
.btn.go{background:var(--y);color:var(--k);border-color:var(--y)}
.btn.gh{background:transparent;color:inherit;border-color:currentColor}
.btn.wh{background:var(--w);color:var(--u);border-color:var(--w)}
.btn.kk{background:var(--k);color:var(--w);border-color:var(--k)}
.acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}
.gate{font:600 14px/1.5 var(--s);color:var(--mute);margin-top:14px}

/* palettes */
.blue{background:var(--u);color:var(--w)}
.blue .lab{color:var(--y)}
.black{background:var(--k);color:var(--w)}
.black .lab{color:var(--y)}
.yellow{background:var(--y);color:var(--k)}
.white{background:var(--w);color:var(--k)}
.white .lab,.yellow .lab{color:inherit}
section{padding:var(--sec) 0}
section.tight{padding-top:0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;border-bottom:1px solid var(--rl);padding-bottom:20px;margin-bottom:8px}
.sec-head .lab{text-align:right;max-width:34ch}
@media(max-width:720px){.sec-head{flex-direction:column;align-items:flex-start}.sec-head .lab{text-align:left}}

/* marquee */
.mq{overflow:hidden;white-space:nowrap;border-top:1px solid var(--rl);border-bottom:1px solid var(--rl);padding:16px 0;font:900 clamp(18px,2vw,28px)/1 var(--d);letter-spacing:-.02em;text-transform:none}
.mq div{display:inline-block;}
.mq span{padding:0 22px}
@media(prefers-reduced-motion:reduce){.mq div{animation:none}}

/* hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 78% 40%,rgba(228,255,60,.16),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(11,21,51,.35),transparent 70%)}
.hero .in{position:relative}
.hero .in{display:flex;flex-direction:column;gap:0;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px);max-width:1040px;margin:0 auto}
.seal{width:clamp(84px,9vw,120px);aspect-ratio:1;border:clamp(4px,.45vw,6px) solid var(--y);color:var(--y);border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(-12deg);font:900 clamp(30px,3.4vw,44px)/1 var(--d);letter-spacing:-.04em;margin-bottom:8px}
.hero .kick{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.hero .copy{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:28px;min-width:0;max-width:720px;text-align:center;margin:0 auto}
.hero .g1{display:flex;flex-direction:column;align-items:center;gap:18px}
.hero .eyebrow{font:700 12px/1 var(--s);letter-spacing:.12em;text-transform:none;color:rgba(255,255,255,.45)}
.hero .copy h1{font-size:clamp(34px,3.6vw,50px);line-height:.95;overflow-wrap:normal;padding:0;max-width:16ch}
.hero .sub{font:500 clamp(17px,1.4vw,21px)/1.45 var(--s);max-width:54ch;margin:0 auto;text-wrap:balance;color:rgba(255,255,255,.92)}
.hero .below{display:flex;flex-direction:column;align-items:center;gap:24px}
.hero .fineprint{margin:0;font:600 12px/1.5 var(--s);color:rgba(255,255,255,.35);letter-spacing:.02em}
.hero .fineprint b{color:rgba(255,255,255,.7)}
.hero .acts{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0;padding:0}
.hero .micro{font:600 14px/1.4 var(--s);color:var(--y);opacity:.95}
.hero .row2{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}
.hero .lnk{font:700 16px/1 var(--s);color:var(--w);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.hero .lnk:hover{color:var(--y)}
.hero .hstats{display:flex;flex-wrap:wrap;justify-content:center;gap:0 36px;border-top:1px solid rgba(255,255,255,.35);padding-top:18px;min-width:min(100%,560px)}
.hstat{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;border:0;background:none}
.hstat b{font:900 30px/1 var(--d);color:var(--y);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hstat b i{font-style:normal;color:var(--w);opacity:.55;font-size:.6em;margin-left:2px}
.hstat>span{font:700 11px/1.2 var(--s);letter-spacing:.1em;text-transform:none;color:rgba(255,255,255,.85)}
.hstat+.hstat{border-left:1px solid rgba(255,255,255,.35);padding-left:36px}
.card{position:relative;background:var(--k);color:var(--w);border:2px solid var(--y);border-radius:14px;padding:26px 28px;box-shadow:0 24px 48px rgba(0,0,0,.3);width:408px;justify-self:end;display:flex;flex-direction:column}
.card .t{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 11px/1 var(--s);letter-spacing:.12em;text-transform:none;color:var(--y);margin-bottom:14px;white-space:nowrap}
.card .t span:last-child{color:rgba(255,255,255,.6)}
.card h4,.card .h4{font:900 24px/1.05 var(--d);text-transform:none;letter-spacing:-.03em;margin:0 0 6px}
.card .tag{font:700 12.5px/1.4 var(--s);color:var(--y);text-transform:none;letter-spacing:.02em;margin:0 0 16px}
.card ul+.tag{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);color:var(--w)}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:10px}
.card li{position:relative;padding-left:22px;font:500 14.5px/1.4 var(--s)}
.card li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;background:var(--y);transform:rotate(45deg)}
.card li b{color:var(--y);font-weight:700}
.card .f{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);font:600 13.5px/1.45 var(--s);color:var(--w)}
.card .badge{display:none}
.chip{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--s);color:var(--w);background:rgba(11,21,51,.38);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:11px 16px}
.chip b{color:var(--y);font-weight:900}
.chip i{width:9px;height:9px;border-radius:50%;background:var(--y);box-shadow:0 0 0 0 rgba(228,255,60,.6);}
@media(prefers-reduced-motion:reduce){.chip i{animation:none}}
.stamp{width:100%;color:var(--y)}
.stamp svg{width:100%;height:auto;display:block}
.stamp{display:flex;flex-direction:column;align-items:center;gap:10px}
.stamp .lock{display:none}
.stamp .lock i{font-style:normal;color:var(--y)}
.stamp .lock .z{display:inline-block;transform:scaleX(.72);transform-origin:center;margin:0 -.05em}
@media(max-width:900px){.hero .kick{grid-template-columns:1fr;row-gap:26px}.card{width:100%}.hero .copy{gap:16px;justify-content:flex-start}.hero .g1{gap:12px}.hero .copy .lab{font-size:11px}.hero .copy h1{font-size:clamp(38px,11vw,64px)}.hero .sub{font-size:16px}.hero .below{gap:14px}.hero .acts{gap:12px}.hero .micro{font-size:13px}.hstat b{font-size:26px}.hero .hstats{flex-direction:column;gap:14px;padding-top:16px}.hstat+.hstat{border-left:0;padding-left:0}.hero .lnk{display:none}.hero .row2{width:100%}.hero .row2 .btn{width:100%;justify-content:center}.card{max-width:none;justify-self:stretch;padding:22px 20px}.card .badge{display:none}.ann{padding:8px var(--pad);font-size:11px;letter-spacing:.06em}.ann .hm{display:none}.ck{font-size:13px;padding:12px 14px}}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.quotes div{display:flex;flex-direction:column;gap:8px;padding:26px 24px 26px 0;border-bottom:1px solid var(--rl)}
.quotes div i{font:900 40px/.8 var(--d);color:var(--u);font-style:normal}
.quotes p{font:600 clamp(16px,1.4vw,19px)/1.4 var(--s)}
.after{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:36px}
.after h3{font-size:clamp(26px,3.2vw,44px);letter-spacing:-.04em}
@media(max-width:720px){.quotes{grid-template-columns:1fr}}

/* x quotes — self-hosted, no embeds. swipes sideways on phones */
.xq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.xq .q{display:flex;flex-direction:column;gap:14px;padding:24px 22px;border:1px solid var(--rl);background:var(--w);transition:transform .12s,box-shadow .12s}
.xq .q:hover{transform:translateY(-3px);box-shadow:none}
.xq .who{display:flex;align-items:center;gap:11px}
.xq .who img{width:42px;height:42px;border-radius:50%;flex:0 0 42px;background:var(--u)}
.xq .who b{display:block;font:700 15px/1.25 var(--s)}
.xq .who span span{display:block;font:500 13.5px/1.3 var(--s);color:#5d6275;margin-top:2px}
.xq .q p{font:500 16px/1.5 var(--s)}
.xq .on{margin-top:auto;padding-top:4px;font:700 11.5px/1 var(--s);letter-spacing:.11em;text-transform:none;color:var(--u)}
.xqnote{margin:16px 0 0;font:500 14px/1.55 var(--s);opacity:.62}
.xqnote a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:860px){
  .xq{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
      margin-inline:calc(var(--pad)*-1);padding:2px var(--pad) 6px}
  .xq::-webkit-scrollbar{display:none}
  .xq .q{flex:0 0 82%;scroll-snap-align:start}
  .xq .q:last-child{margin-right:var(--pad)}
}

/* logo proof — real companies, visible in one glance */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:24px;max-width:860px}
.proof a{display:flex;align-items:center;gap:13px;padding:14px 18px;border:1px solid var(--rl);background:var(--w);color:var(--k);transition:transform .12s,box-shadow .12s}
.proof a:hover{transform:translateY(-3px);box-shadow:none}
.proof img{width:40px;height:40px;object-fit:contain;flex:0 0 40px;border-radius:9px;background:var(--k);padding:5px}
.proof b{display:block;font:700 15px/1.2 var(--s)}
.proof a>span>span{display:block;font:500 13px/1.35 var(--s);opacity:.62;margin-top:3px}
.black .proof a,.blue .proof a{border-color:var(--w);background:transparent;color:var(--w)}
.black .proof a:hover,.blue .proof a:hover{box-shadow:none}
.black .proof a>span>span,.blue .proof a>span>span{opacity:.72}
@media(max-width:600px){.proof{grid-template-columns:1fr;gap:10px}.proof a{padding:12px 14px}}

/* video proof card — thumbnail links out, no iframe */
.vid{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:26px;align-items:center;margin-top:26px;border:1px solid var(--rl);padding:18px;background:var(--w)}
.vid .shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--k)}
.vid .shot img{width:100%;height:100%;object-fit:cover}
.vid .shot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;
  border-left:26px solid var(--w);border-top:16px solid transparent;border-bottom:16px solid transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.vid .shot:hover::after{border-left-color:var(--y)}
.vid h3{font-size:clamp(19px,2vw,25px);margin-bottom:8px}
.vid p{font:500 15px/1.5 var(--s);opacity:.68}
a.vid .lab{display:block;color:var(--u);margin:0 0 10px}
.black .vid,.blue .vid{border-color:var(--w);background:transparent;color:var(--w)}
.black .vid p,.blue .vid p{opacity:.78}
.black .vid .lab,.blue .vid .lab{color:var(--y)}
.item .vid{grid-column:2}
@media(max-width:700px){.vid{grid-template-columns:1fr;gap:16px;padding:14px}}
@media(max-width:600px){.item .vid{grid-column:1}}

/* kit — everything a member gets, one tile each. 2-up on phones */
.kit{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--rl);border-left:1px solid var(--rl);margin-top:26px}
.kit>*{display:flex;flex-direction:column;gap:8px;padding:22px 20px;border-right:1px solid var(--rl);border-bottom:1px solid var(--rl);background:var(--w);color:var(--k);transition:background .12s}
.kit>a:hover{background:var(--y)}
.kit .k{font:900 clamp(28px,3vw,40px)/.95 var(--d);letter-spacing:-.05em;color:var(--u)}
.kit h3{font-size:clamp(16px,1.5vw,20px)}
.kit p{font:500 14px/1.45 var(--s);opacity:.7}
.kit .logos{display:flex;gap:6px;margin-top:auto;padding-top:4px}
.kit .logos img{width:24px;height:24px;border-radius:6px;object-fit:contain}
.kit .hi{background:var(--u);color:var(--w)}.kit .hi .k{color:var(--y)}.kit .hi p{opacity:.85}
@media(max-width:900px){.kit{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.kit>*{padding:16px 12px}.kit h3{font-size:14px;letter-spacing:-.02em}.kit p{font-size:13px}}

/* trust strip — hard facts, scannable in one pass */
.tldr{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.tldr span{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--rl);font:700 13px/1.25 var(--s)}
.tldr span::before{content:"";width:8px;height:8px;background:var(--y);transform:rotate(45deg);flex:0 0 8px}
.white .tldr span::before,.yellow .tldr span::before{background:var(--u)}
@media(max-width:600px){.tldr{gap:8px}.tldr span{padding:8px 11px;font-size:12px}}

/* pull quote */
.pq{margin:6px 0;padding:0 0 0 22px;border-left:6px solid var(--u);font:700 clamp(20px,2.4vw,30px)/1.25 var(--d);letter-spacing:-.03em;text-transform:none}

/* year timeline: wider left column than .items */
.items.yr .item{grid-template-columns:142px 1fr;gap:6px 28px}
.items.yr .no{font:900 clamp(19px,1.9vw,23px)/1.15 var(--d);letter-spacing:-.03em;padding-top:4px}
@media(max-width:600px){.items.yr .item{grid-template-columns:1fr}.items.yr .no{padding-top:0}}

/* three-up bands */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.three>div{display:flex;flex-direction:column;gap:16px;padding:clamp(40px,4.5vw,64px) var(--pad) clamp(36px,4vw,56px)}
.three>div+div{border-left:1px solid var(--rl)}
.three .num{font:900 clamp(38px,3.8vw,54px)/.9 var(--d);letter-spacing:-.05em;text-transform:none}
.three h3{font-size:clamp(22px,2.2vw,30px)}
.three p{font:600 15px/1.5 var(--s)}
.three .hi{background:var(--u);color:var(--w)}
.three .hi .lab{color:var(--y)}
.black .three>div+div{border-left-color:var(--w)}
@media(max-width:900px){.three{grid-template-columns:1fr}.three>div+div{border-left:0;border-top:1px solid var(--rl)}}
.band{border-top:1px solid var(--rl);border-bottom:1px solid var(--rl)}

/* counted list */
.count{display:flex;flex-direction:column}
.count>div{display:grid;grid-template-columns:110px 1fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--rl);align-items:start}
.count .n{font:900 clamp(40px,4vw,56px)/.9 var(--d);color:var(--u);letter-spacing:-.05em}
.count h3{margin-bottom:10px}
.count p{max-width:76ch}
.count a.more{display:inline-block;margin-top:10px;font:700 14px/1 var(--s);color:var(--u);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.count .tail{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:32px;font:700 16px/1.5 var(--s)}
@media(max-width:720px){.count>div{grid-template-columns:1fr;gap:10px}}

/* tables */
.tbl{display:flex;flex-direction:column}
.tbl .th,.tbl .tr{display:grid;gap:clamp(16px,2.5vw,32px)}
.tbl .th{padding:18px 0;border-bottom:1px solid var(--rl)}
.tbl .tr{padding:22px 0;border-bottom:1px solid var(--rl);font:500 16px/1.45 var(--s)}
.tbl .tr:last-of-type{border-bottom-width:3px}
.tbl .tr .m{font:900 22px/1 var(--d);letter-spacing:-.03em;text-transform:none}
.tbl .tr b{font-weight:700}
.tbl.lib .th,.tbl.lib .tr{grid-template-columns:1fr 1.5fr 1.5fr}
.tbl.cmp .th,.tbl.cmp .tr{grid-template-columns:1.2fr 1fr 1fr}
.tbl.board .th,.tbl.board .tr{grid-template-columns:.6fr 1.4fr 1fr 1fr}
.tbl.board .tr{font:600 18px/1.4 var(--s)}
.tbl .note{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:28px;align-items:start}
.tbl .note .src{font:500 14px/1.5 var(--s);color:var(--mute)}
.tbl .note .hook{font:700 17px/1.5 var(--s)}
.tbl .note .hook em{font-style:normal;color:var(--u)}
.tbl .sum{font:700 18px/1.5 var(--s);padding-top:28px;max-width:80ch}
.tbl .tr.dim{opacity:.5}.tbl .tr.dimmer{opacity:.3}
@media(max-width:820px){.tbl.lib .th{display:none}.tbl.lib .tr,.tbl.board .tr,.tbl.cmp .tr{grid-template-columns:1fr;gap:8px}.tbl.board .th,.tbl.cmp .th{display:none}.tbl .note{grid-template-columns:1fr}.tbl .tr .m{margin-bottom:2px}}
.tbl.vs .tr{grid-template-columns:1fr 60px 1fr;align-items:center}
.tbl.vs .was{font:900 26px/1.1 var(--d);text-transform:none;letter-spacing:-.02em;opacity:.32;text-decoration:line-through}
.tbl.vs .arrow{text-align:center;font:900 22px/1 var(--d);color:var(--u)}
.tbl.vs .now b{font:900 26px/1.1 var(--d);text-transform:none;letter-spacing:-.02em;display:block;margin-bottom:4px}
.tbl.vs .now{font:500 16px/1.45 var(--s)}
@media(max-width:640px){.tbl.vs .tr{grid-template-columns:1fr!important;gap:6px;text-align:left}.tbl.vs .arrow{display:none}}


/* letter */
.letter{display:grid;grid-template-columns:1fr 2fr;gap:64px}
.letter .who{display:flex;flex-direction:column;gap:12px}
.letter .who h2{font-size:clamp(30px,3.2vw,40px)}
.letter .who small{font:500 15px/1.4 var(--s);opacity:.6}
.letter .txt{display:flex;flex-direction:column;gap:20px;font:500 clamp(17px,1.35vw,19px)/1.55 var(--s);max-width:70ch}
.letter .txt .hi{color:var(--y)}
/* Why trust me: the four numbers in a 2×2 grid, one divider down the middle, so the rows line up */
.letter .hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 34px;padding:0 0 20px}
.letter .hgrid .hstat{border-left:0;padding-left:0}
.letter .hgrid .hstat:nth-child(even){border-left:1px solid rgba(255,255,255,.35);padding-left:34px}
@media(max-width:900px){.letter{grid-template-columns:1fr;gap:28px}.letter .hgrid{gap:18px 22px}.letter .hgrid .hstat:nth-child(even){padding-left:22px}}

/* objections */
.obj{display:grid;grid-template-columns:1fr 1fr}
.obj>div{display:flex;flex-direction:column;gap:12px;padding:36px 40px 36px 0;border-bottom:2px solid var(--w)}
.obj>div:nth-child(2n){padding:36px 0 36px 40px}
.obj>div:nth-child(2n+1){border-right:2px solid var(--w)}
.obj .q{font:900 clamp(20px,1.8vw,24px)/1.1 var(--d);letter-spacing:-.03em;color:var(--y);text-transform:none}
.obj p{font:500 17px/1.5 var(--s)}
@media(max-width:820px){.obj{grid-template-columns:1fr}.obj>div,.obj>div:nth-child(2n){padding:28px 0;border-right:0}}

/* price */
.price{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.price .nums{display:flex;flex-direction:column;gap:10px}
.price .row{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.price .n1{font:900 clamp(80px,9vw,124px)/.85 var(--d);letter-spacing:-.05em;color:var(--u)}
.price .n2{font:900 clamp(48px,5vw,66px)/.9 var(--d);letter-spacing:-.05em}
.price .row>span{font:700 clamp(18px,1.6vw,22px)/1 var(--s)}
.price .row>.n1{font:900 clamp(80px,9vw,124px)/.85 var(--d)}
.price .row>.n2{font:900 clamp(48px,5vw,66px)/.9 var(--d)}
.price .why{max-width:44ch;margin-top:16px}
@media(max-width:900px){.price{grid-template-columns:1fr;gap:36px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.steps>div{display:flex;flex-direction:column;gap:14px;padding:36px 32px 36px 0;border-right:1px solid var(--rl)}
.steps>div:last-child{border-right:0}
.steps .n{font:900 clamp(40px,4vw,58px)/.9 var(--d);color:var(--u);letter-spacing:-.05em}
.steps h3{font-size:22px}
.steps p{font:500 15px/1.5 var(--s)}
.steps.up3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.up5{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.steps.up5 h3{font-size:22px}
@media(max-width:900px){.steps,.steps.up3,.steps.up5{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps,.steps.up3,.steps.up5{grid-template-columns:1fr}.steps>div{border-right:0;border-bottom:1px solid var(--rl);padding-right:0}}

/* faq */
.faq{display:flex;flex-direction:column}
.faq details{border-bottom:1px solid var(--rl)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:22px 0;font:700 19px/1.3 var(--s)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:900 28px/1 var(--d);color:var(--u)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 24px;max-width:76ch;font:500 16px/1.55 var(--s)}
.faq a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* close */
.close .in{display:flex;flex-direction:column;gap:40px}
.close h2{font-size:clamp(44px,8.6vw,120px);text-align:left;align-self:flex-start}
.close h2 em{font-style:normal;color:var(--y)}
.close .base{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;border-top:2px solid var(--w);padding-top:28px}
.close .base p{font:600 clamp(17px,1.4vw,20px)/1.45 var(--s);max-width:60ch}
.close .base>*{min-width:0}
.close .base>div:not(.hdone){display:flex;justify-content:flex-end;min-width:0;flex-wrap:wrap}
@media(max-width:900px){.close .base{grid-template-columns:1fr}.close .base div{justify-content:flex-start}}

/* footer */
footer{background:var(--k);color:var(--w);border-top:2px solid var(--w)}
footer .in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:24px;padding-bottom:24px;font:600 13px/1.5 var(--s)}
footer .links{display:flex;gap:22px;flex-wrap:wrap;opacity:.75}
footer a:hover{color:var(--cy)}

/* dock (mobile) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:12px;align-items:center;background:var(--k);color:var(--w);border-top:2px solid var(--w);padding:12px 16px}
.dock small{flex:1;font:600 12px/1.35 var(--s)}
.dock .btn{padding:14px 18px;font-size:14px}
@media(max-width:720px){.dock{display:flex}body{padding-bottom:76px}}
/* the full nav plus the button needs ~1040px on one line; below that the header switches to the menu */
@media(max-width:1040px){.wm small{display:none}.top .in{min-height:60px;height:auto;flex-wrap:wrap;padding-top:0;padding-bottom:0}.top .btn{display:none}.menu{display:flex}
.top nav{display:none;width:100%;flex-direction:column;gap:0;border-top:2px solid var(--w);padding:8px 0 12px;background:var(--u)}
.top nav a{padding:14px 0;border-bottom:2px solid rgba(255,255,255,.2);font-size:18px}
.top nav a[aria-current=page]{border-bottom-color:var(--y)}
.top.open nav{display:flex}}

/* ====== subpages ====== */
.page-head{background:var(--u);color:var(--w);padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px)}
.page-head .crumb{display:block;font:700 12px/1 var(--s);letter-spacing:.14em;text-transform:none;color:var(--y);margin-bottom:20px}
.page-head h1{font-size:clamp(36px,6.4vw,88px);max-width:14ch}
.page-head h1 em{font-style:normal;color:var(--y)}
.page-head .lede{margin-top:24px;max-width:62ch;font:500 clamp(17px,1.5vw,20px)/1.5 var(--s);color:var(--mutew)}
.lede{font:500 clamp(17px,1.5vw,20px)/1.5 var(--s);max-width:66ch;color:var(--mute)}
h2.sub,section .in>h2{font-size:clamp(28px,4vw,54px);margin-bottom:24px}
section .in>h2+.lede{margin-top:-8px;margin-bottom:28px}
.prose{max-width:72ch;display:flex;flex-direction:column;gap:18px;font:500 17px/1.6 var(--s)}
.prose h2{font-size:clamp(26px,3vw,40px);margin:24px 0 0}
.prose h3{font-size:22px;margin-top:12px}
.prose a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.prose ul,.prose ol{margin:0;padding-left:22px}
.prose li{margin:6px 0}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose td,.prose th{border-bottom:1px solid var(--rl);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.updated{display:block;font:700 12px/1 var(--s);letter-spacing:.12em;text-transform:none;color:var(--mute);margin-bottom:24px}

.agenda{display:flex;flex-direction:column;border-top:1px solid var(--rl)}
.agenda .row{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:26px 0;border-bottom:1px solid var(--rl)}
.agenda .t{font:900 18px/1.2 var(--d);letter-spacing:-.03em;color:var(--u)}
.agenda h3{font-size:24px;margin-bottom:8px}
.agenda p{font:500 16px/1.55 var(--s);max-width:70ch}
@media(max-width:720px){.agenda .row{grid-template-columns:1fr;gap:8px}}

.items{display:flex;flex-direction:column;border-top:1px solid var(--rl)}
.item{display:grid;grid-template-columns:90px 1fr;gap:8px 32px;padding:26px 0;border-bottom:1px solid var(--rl);align-items:start}
.item .no{font:900 clamp(28px,3vw,40px)/1 var(--d);color:var(--u);letter-spacing:-.05em;grid-row:span 2}
.item h3{font-size:24px}
.item .lab{display:block;margin-top:4px;color:var(--mute)}
.item p{grid-column:2;font:500 16px/1.55 var(--s);max-width:70ch}
@media(max-width:600px){.item{grid-template-columns:1fr}.item .no{grid-row:auto}.item p{grid-column:1}}

.res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--rl)}
.res a{display:flex;flex-direction:column;gap:12px;padding:32px;border-bottom:1px solid var(--rl);border-right:1px solid var(--rl);transition:background .12s}
.res a:nth-child(2n){border-right:0}
.res a:nth-last-child(-n+2){border-bottom:0}
.res a:hover{background:var(--y)}
.res .n{font:700 12px/1 var(--s);letter-spacing:.14em;text-transform:none;color:var(--u)}
.res h3{font-size:24px}
.res p{font:500 15px/1.55 var(--s);color:var(--mute)}
.res a.soon{cursor:default}
@media(max-width:720px){.res{grid-template-columns:1fr}.res a{border-right:0}.res a:nth-last-child(-n+2){border-bottom:1px solid var(--rl)}.res a:last-child{border-bottom:0}}

.pricebox{border:1px solid var(--rl);padding:clamp(24px,4vw,56px)}
.pricebox>h2{font-size:clamp(28px,3.6vw,48px);margin-bottom:28px}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.rcpt{border:1px solid var(--rl);padding:24px;background:var(--y)}
.rcpt .hd{display:flex;justify-content:space-between;gap:20px;font:700 12px/1.3 var(--s);letter-spacing:.14em;text-transform:none;padding-bottom:14px;border-bottom:1px solid var(--rl)}
.rcpt .hd span:last-child{text-align:right}
@media(max-width:560px){.rcpt .hd{display:none}.rcpt .ln{flex-direction:column;gap:4px}.rcpt .ln span{opacity:.72;font-size:13px}
.rcpt .sum{flex-wrap:wrap;gap:6px}.rcpt .sum b{font-size:32px;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}.rcpt .sum b small{margin-left:0!important}}
.rcpt .ln{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:2px dashed var(--k);font:500 15px/1.4 var(--s)}
.rcpt .ln b{font-weight:700}
.rcpt .sum{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 0;font:700 16px/1 var(--s)}
.rcpt .sum b{font:900 40px/1 var(--d);letter-spacing:-.04em}
.rcpt .aft{font:500 13px/1.5 var(--s);margin-top:12px;color:var(--mute)}
.terms{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--rl)}
.terms li{padding:16px 0;border-bottom:1px solid var(--rl);font:500 15px/1.55 var(--s)}
.terms li b{font-weight:700}
@media(max-width:820px){.pay{grid-template-columns:1fr}}

.stubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rl)}
.stubs>div{display:flex;flex-direction:column;gap:10px;padding:28px;border-right:1px solid var(--rl)}
.stubs>div:last-child{border-right:0}
.stubs b{font:900 40px/1 var(--d);color:var(--u);letter-spacing:-.05em}
.stubs span{font:700 17px/1.35 var(--s)}
@media(max-width:720px){.stubs{grid-template-columns:1fr}.stubs>div{border-right:0;border-bottom:1px solid var(--rl)}.stubs>div:last-child{border-bottom:0}}

.form{display:flex;flex-direction:column;gap:22px;max-width:640px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font:700 15px/1.3 var(--s)}
.field .hint{font:500 13px/1.45 var(--s);color:var(--mute)}
.field input:not([type=radio]):not([type=checkbox]),.field textarea{width:100%;font:500 16px/1.5 var(--s);color:var(--k);background:var(--w);border:1px solid var(--rl);padding:14px 16px;outline:none}
.field input:not([type=radio]):focus,.field textarea:focus{border-color:var(--u);box-shadow:0 0 0 3px var(--y)}
.field textarea{min-height:120px;resize:vertical}
.choice{display:flex;flex-wrap:wrap;gap:10px}
.choice label{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--rl);padding:12px 16px;font:700 14px/1.2 var(--s);cursor:pointer;white-space:nowrap;max-width:100%}
.choice label:has(input:checked){background:var(--y)}
.choice input{margin:0;width:16px;height:16px;flex:0 0 auto;padding:0;border:0;accent-color:var(--u)}
.formnote{font:500 13px/1.5 var(--s);color:var(--mute)}

.show{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.frame{border:1px solid var(--rl);background:var(--y);padding:24px}
.doc .dh{display:flex;justify-content:space-between;font:700 12px/1 var(--s);letter-spacing:.14em;text-transform:none;padding-bottom:14px;border-bottom:1px solid var(--rl);margin-bottom:6px}
.doc ol{margin:0;padding:0;list-style:none;counter-reset:l}
.doc li{counter-increment:l;position:relative;display:block;padding:14px 0 14px 48px;border-bottom:1px solid var(--rl);font:500 15px/1.5 var(--s)}
.doc li::before{content:counter(l,decimal-leading-zero);position:absolute;left:0;top:14px;font:900 16px/1.5 var(--d);color:var(--u)}
.doc li b{font-weight:700}
.rd{background:var(--k);color:var(--k);padding:0 6px}
@media(max-width:900px){.show{grid-template-columns:1fr}}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rl)}
.stats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.stats.four{grid-template-columns:1fr 1fr}.stats.four>div:nth-child(2n){border-right:0}.stats.four>div:nth-child(-n+2){border-bottom:1px solid var(--rl)}}
.stats>div{padding:24px;border-right:1px solid var(--rl)}
.stats>div:last-child{border-right:0}
.stats b{display:block;font:900 clamp(36px,4vw,56px)/1 var(--d);letter-spacing:-.05em;color:var(--u)}
.stats span{font:600 14px/1.4 var(--s);color:var(--mute)}
@media(max-width:600px){.stats{grid-template-columns:1fr}.stats>div{border-right:0;border-bottom:1px solid var(--rl)}.stats>div:last-child{border-bottom:0}
  /* four-up stays 2x2 on phones: half the scroll */
  .stats.four{grid-template-columns:1fr 1fr}
  .stats.four>div{padding:18px 16px;border-right:1px solid var(--rl);border-bottom:0}
  .stats.four>div:nth-child(2n){border-right:0}
  .stats.four>div:nth-child(-n+2){border-bottom:1px solid var(--rl)}
  .stats.four b{font-size:clamp(23px,7vw,34px)}
  .stats.four span{font:600 13px/1.35 var(--s)}}

.qa{display:flex;flex-direction:column}
.qa details{border-bottom:1px solid var(--rl)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:20px 0;font:700 18px/1.3 var(--s)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:900 26px/1 var(--d);color:var(--u)}
.qa details[open] summary::after{content:"–"}
.qa details p{padding:0 0 22px;max-width:74ch;font:500 16px/1.55 var(--s)}
.qa a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.sign{display:flex;align-items:center;gap:14px;margin-top:8px}
.sign .av{width:48px;height:48px;background:var(--u);color:var(--w);display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--s)}
.sign b{display:block;font:700 16px/1.3 var(--s)}
.sign small{font:500 14px/1.3 var(--s);opacity:.6}

/* scroll reveal — subtle */
.rv{opacity:1;transform:none}
.rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.done{display:none;border:1px solid var(--rl);background:var(--y);padding:28px;max-width:640px;margin-top:24px}
.done h3{font-size:26px;margin-bottom:8px}
.done p{font:500 16px/1.5 var(--s)}
.form.sent,.form.grid2.sent{display:none}
.form.sent+.done{display:block}
.err{display:none;font:600 14px/1.5 var(--s);color:var(--u)}
.err.on{display:block}

.reflink{display:flex;gap:10px;margin-top:10px}
.reflink input{flex:1;min-width:0;font:600 15px/1.4 var(--s);border:1px solid var(--rl);background:var(--w);padding:12px 14px}

/* cookie consent: small, bottom-left, out of the way */
.ck{position:fixed;left:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;gap:10px;background:var(--k);color:var(--w);border:2px solid var(--y);padding:12px 14px;max-width:300px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.ck p{font:500 12.5px/1.45 var(--s);margin:0;opacity:.9}
.ck a{text-decoration:underline;text-underline-offset:3px}
.ckb{display:flex;gap:8px}
.ckb .btn{padding:8px 12px;font-size:12.5px}
@media(max-width:720px){.ck{left:12px;right:12px;bottom:88px;max-width:none;flex-direction:row;align-items:center;justify-content:space-between}}


.letter .who img{width:min(100%,240px);height:auto;aspect-ratio:1;object-fit:cover;border:3px solid var(--y);margin-top:22px;display:block}
.sign img{width:56px;height:56px;object-fit:cover;border:2px solid var(--u)}

/* wordmark: the OO of BOOTSTRAPPED set as $0 */
.wm .wz{font-style:normal;color:var(--y)}
.wm .z{display:inline-block;transform:scaleX(.72);transform-origin:center;margin:0 -.05em}

/* the dollar in the wordmark gets a full bar, Unbounded's own is too shy */
.dol{position:relative;display:inline-block}
.dol::after{content:"";position:absolute;left:50%;top:-7%;bottom:-7%;width:.11em;border-radius:.06em;background:var(--y);transform:translateX(-50%)}

/* scroll progress hairline */
.hair{position:fixed;left:0;right:0;top:0;height:3px;z-index:90;pointer-events:none}
.hair i{display:block;height:100%;background:var(--y);transform:scaleX(0);transform-origin:left}

.anchor{display:flex;flex-direction:column;gap:16px;max-width:52ch}
.anchor h3{font-size:clamp(24px,2.6vw,36px);line-height:1;margin-bottom:6px}
.anchor h3 em{font-style:normal;color:var(--y)}
.anchor p{font:500 18px/1.5 var(--s);margin:0}

.anchor p.hi{color:var(--y);font-weight:700}

.chip.tm b{font-variant-numeric:tabular-nums;min-width:11.5ch;display:inline-block}

.hero .pill{display:inline-flex;align-items:center;gap:9px;font:700 12px/1 var(--s);letter-spacing:.06em;text-transform:none;color:var(--w);background:rgba(11,21,51,.35);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 14px 9px 11px}
.hero .pill i{width:8px;height:8px;border-radius:50%;background:var(--y);box-shadow:0 0 0 0 rgba(228,255,60,.6);}
.hero h1 em{font-style:normal;color:var(--y)}
.card{background:rgba(11,21,51,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:20px;box-shadow:0 30px 70px rgba(11,21,51,.45),inset 0 1px 0 rgba(255,255,255,.08)}
@media(max-width:900px){.hero .pill{font-size:11px;padding:8px 12px 8px 10px}.hero .pill .hm{display:none}}


.form.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;max-width:760px}
.form.grid2 .field.full{grid-column:1/-1}
.form.grid2 .field input:not([type=radio]){padding:12px 14px}
.form.grid2 .field input::placeholder{color:#8a93a8;font-weight:500}
.form.grid2 .btn{width:100%;justify-content:center}
.form.grid2 .formnote{margin-top:10px}
.page-head.short{padding-bottom:clamp(28px,4vw,44px)}
@media(max-width:640px){.form.grid2{grid-template-columns:1fr;gap:14px}}

.dock{transform:translateY(110%);transition:transform .35s ease}
.dock.on{transform:none}
.field label .opt{font:600 11px/1 var(--s);letter-spacing:.08em;text-transform:none;color:var(--mute);margin-left:8px}

.srcline{font:600 12px/1.4 var(--s);opacity:.65;padding:10px var(--pad);border-bottom:1px solid var(--rl)}
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;padding-top:8px}
.faq details{border-bottom:1px solid var(--rl);padding:18px 0}
.faq summary{cursor:pointer;list-style:none;font:800 clamp(17px,1.4vw,20px)/1.3 var(--s);display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:900 22px/1 var(--d);flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{font:500 15.5px/1.55 var(--s);margin:12px 0 0;max-width:60ch}
@media (max-width:760px){.faq{grid-template-columns:1fr}.srcline{padding:10px 20px}}

.rowlab{display:block;margin:28px 0 0;opacity:.6}
.steps.won{gap:0;margin-top:12px;background:var(--u);color:var(--w)}
.steps.won>div{padding:36px 28px;border-right-color:rgba(255,255,255,.3)}
.steps.won .n{color:var(--y)}
.steps.won+.rowlab,.steps+.rowlab{margin-top:36px}
@media (max-width:760px){.steps.won>div{padding:24px 20px}}
@media(max-width:900px){.hero .kick>*{min-width:0}.card .t{white-space:normal;flex-wrap:wrap;row-gap:4px}.hero .copy h1{font-size:clamp(34px,9.4vw,64px)}}

.hero .by{display:flex;align-items:center;gap:12px;font:600 14px/1.35 var(--s);color:rgba(255,255,255,.88);margin:-8px 0 0;text-align:left}
.hero .by img{width:40px;height:40px;border-radius:50%;border:2px solid var(--y);object-fit:cover;flex:none}
.hero .by b{color:var(--w);font-weight:800}
@media(max-width:900px){.hero .by{font-size:13px;margin:0}}
@media(min-width:901px) and (max-width:1150px){.hero .copy h1{font-size:clamp(40px,4.6vw,60px)}}
.faq{display:block;columns:2;column-gap:48px}
.faq details{break-inside:avoid}
@media (max-width:760px){.faq{columns:1}}
/* phones: keep the desktop structure, two columns, compact */
@media(max-width:560px){
  .steps,.steps.up3,.steps.up5{grid-template-columns:1fr 1fr;gap:0 18px}
  .steps>div{padding:18px 0 16px;border-right:0;border-bottom:1px solid var(--rl);gap:8px}
  .steps .n{font-size:32px}
  .steps h3{font-size:16px}
  .steps p{font-size:13.5px;line-height:1.45}
  .steps.won{gap:0}
  .steps.won>div{padding:16px 14px;border-right:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3)}
  .steps.won>div:nth-child(2n){border-right:0}
  .three>div{padding:22px var(--pad) 20px;gap:8px}
  .three .num{font-size:36px}
  .three p{font-size:14px}
  .rowlab{margin-top:22px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:8px}
  .sec-head .lab{text-align:left;max-width:none}
}
/* wide-gamut screens (iPhone, recent Macs) render #4F46E5 as flat blue; nudge the hue ~8° toward violet there so it matches an sRGB monitor */
@media (color-gamut:p3){:root{--u:#6046E5}}

/* done state, redesigned: seat number, locked-in checklist, personal note */
.done .seat{display:inline-block;background:var(--k);color:var(--y);font:800 12px/1 var(--s);letter-spacing:.06em;text-transform:none;padding:6px 12px;border-radius:20px;margin-bottom:14px}
.done .lock{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.done .lock li{display:flex;align-items:flex-start;gap:10px;font:600 15px/1.45 var(--s)}
.done .lock li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;background:var(--k);color:var(--y);font:800 13px/22px var(--s);text-align:center}
.done .note{display:flex;gap:12px;align-items:flex-start;background:var(--w);border:1px solid var(--rl);padding:16px;margin-top:18px}
.done .note img{width:48px;height:48px;border-radius:50%;flex:none;object-fit:cover;border:1px solid var(--rl)}
.done .note p{font:500 14.5px/1.5 var(--s);margin:0}
.done .note b{display:block;font:800 13px/1 var(--s);margin-top:6px}

/* file-1 peek: a real document, styled to feel physically real (unlike a stylized "coming soon" mockup) */
.done .peek{position:relative;margin-top:22px;background:var(--w);border:1px solid var(--rl);box-shadow:none;transform:rotate(-0.6deg);padding:20px 20px 18px}
.done .peek .lab{display:block;color:var(--u);opacity:1;margin-bottom:10px}
.done .peek .ttl{font:900 15px/1.2 var(--d);text-transform:none;letter-spacing:-.01em;margin:0 0 12px;color:var(--k)}
.done .peek blockquote{margin:0;padding:14px 16px;background:#F4F3FF;border-left:4px solid var(--u);font:500 14.5px/1.55 "SF Mono",ui-monospace,Menlo,monospace;color:#1F2937}
@media(max-width:600px){.done .peek{transform:none;box-shadow:none}}
.peekwrap{max-width:620px;margin:0 auto}
@media(max-width:900px){.peekwrap{max-width:100%}}


/* ---- lead-magnet front door: inline capture in the hero ---- */
.hform{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:780px;min-width:0}
.hform input{flex:1 1 150px;min-width:0;font:500 16px/1.5 var(--s);color:var(--k);background:var(--w);border:1px solid var(--rl);border-radius:2px;padding:14px 16px;outline:none;box-shadow:none}
.hform input:focus{border-color:var(--y);box-shadow:0 0 0 3px var(--y)}
.hform button{flex:0 0 auto;cursor:pointer;border:1px solid var(--rl);box-shadow:none;padding-top:13px;padding-bottom:13px}
.hform.sent{display:none}
.hdone{display:none;width:100%;max-width:780px;min-width:0;border:1px solid var(--rl);background:var(--y);color:var(--k);padding:18px 22px;text-align:left}
.hform.sent+.hdone{display:block}
.hdone b{font:900 19px/1.2 var(--d);text-transform:none;letter-spacing:-.02em;display:block;margin-bottom:5px}
.hdone p{font:500 14.5px/1.5 var(--s);margin:0}
.hform .err{flex:1 1 100%;margin:0}
@media(max-width:620px){.hform input{flex:1 1 100%}.hform button{width:100%;justify-content:center}}

/* ---- free vs paid ---- */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--rl);margin-top:8px}
.tier{padding:32px 34px;border-right:1px solid var(--rl)}
.tier:last-child{border-right:0;background:var(--k);color:var(--w)}
.tier>.lab{display:block;font:700 12px/1 var(--s);letter-spacing:.14em;text-transform:none;color:var(--u);margin-bottom:12px}
.tier:last-child>.lab{color:var(--y)}
.tier h3{font:900 clamp(26px,3vw,38px)/1 var(--d);text-transform:none;letter-spacing:-.03em;margin-bottom:6px}
.tier .pr{font:700 14px/1.4 var(--s);color:var(--mute);margin-bottom:20px}
.tier:last-child .pr{color:rgba(255,255,255,.92)}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tier li{position:relative;padding-left:24px;font:500 15.5px/1.45 var(--s)}
.tier li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;background:var(--u);transform:rotate(45deg)}
.tier:last-child li::before{background:var(--y)}
@media(max-width:720px){.tiers{grid-template-columns:1fr}.tier{border-right:0;border-bottom:1px solid var(--rl)}.tier:last-child{border-bottom:0}}

/* ---- the one public piece, featured above the shelf ---- */
.feat{display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:center;border:1px solid var(--rl);border-bottom:0;background:var(--k);color:var(--w);padding:30px 34px;text-decoration:none}
.feat:hover{background:#111d3f}
.feat .lab{display:block;font:700 12px/1 var(--s);letter-spacing:.14em;text-transform:none;color:var(--y);margin-bottom:10px}
.feat h3{font:900 clamp(24px,3vw,36px)/1.05 var(--d);text-transform:none;letter-spacing:-.03em;margin-bottom:10px}
.feat p{font:500 15px/1.55 var(--s);color:rgba(255,255,255,.82);max-width:64ch}
@media(max-width:720px){.feat{grid-template-columns:1fr;padding:24px}}
.hform input[type=email]{flex:2 1 230px}
.close .hform{justify-content:flex-start}
.close .hform input{flex:1 1 160px}
.close .hform button{flex:1 1 auto}

/* ===== density pass: get real content into the first screen, and make the grid browsable ===== */
/* 1. hero was 793px tall and pushed the first content item to screen two */
.hero .in{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(24px,3vw,40px)}
.hero .copy h1{font-size:clamp(38px,6.4vw,62px)}
.hero .sub{font-size:17px;max-width:60ch;margin-left:auto;margin-right:auto}
.hero .below{gap:12px}

/* 2. one 72px per page — a real ladder instead of four competing shouts */
#issues .sec-head h2,#sell .sec-head h2,#sample .sec-head h2{font-size:clamp(28px,3.4vw,40px)!important}

/* 3. the card wall: three columns, real gaps, and a poster tile so each card reads as an object */
#issues .res{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border:0}
#issues .res a{border:1px solid var(--rl);background:var(--w);padding:0 0 18px;gap:0;border-radius:2px}
#issues .res a:nth-child(2n),#issues .res a:nth-last-child(-n+2){border-right:1px solid var(--rl);border-bottom:1px solid var(--rl)}
#issues .res a:hover{background:var(--w);transform:translateY(-2px);box-shadow:none}
#issues .res .n{display:block;background:var(--k);color:var(--y);padding:26px 18px;font:900 26px/1 var(--d);letter-spacing:-.03em;text-transform:none;margin-bottom:14px}
#issues .res a[href] .n{background:var(--u);color:var(--w)}
#issues .res h3{font-size:19px;line-height:1.12;padding:0 18px;margin-bottom:8px}
#issues .res p{padding:0 18px;font-size:14px;line-height:1.5}
@media(max-width:980px){#issues .res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#issues .res{grid-template-columns:1fr}}

/* 4. rhythm: 84px of padding everywhere made every section feel like its own page */
section.tight{padding:clamp(34px,4vw,52px) 0}
.close .base{align-items:start}
h1,h2,h3{scroll-margin-top:88px}

/* 5. one field + one welded button, so the CTA is the brightest thing in the hero */
.hform{max-width:560px;gap:0}
.hform input{flex:1 1 auto;border-right-width:0;box-shadow:none}
.hform button{box-shadow:none;border-left-width:3px}
.hform input:focus{border-color:var(--k);box-shadow:none}
.hero .micro{opacity:.85}
.hero .sub em{color:var(--w)!important;text-decoration:underline;text-underline-offset:3px}

#issues .res a[href]{border-color:var(--u);box-shadow:none}
#issues .res a.soon .n{background:#E9E9F2;color:var(--k)}
#issues .res a.soon{opacity:.92}

/* ---- density pass 2, on measured benchmark gaps ---- */
/* cards were white-on-acid-yellow with weak figure-ground across 36% of the page */
#issues .res a{box-shadow:none}
#issues .res a.soon{opacity:1;background:var(--w)}
/* the remaining weeks as a compact index rather than 5 more disabled tiles */
.sched{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--rl)}
.sched li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:2px solid rgba(11,21,51,.25);font:700 15px/1.35 var(--s)}
.sched li span{flex:0 0 auto;font:800 11px/1 var(--s);letter-spacing:.12em;text-transform:none;opacity:.6;min-width:58px}
@media(max-width:720px){.sched{grid-template-columns:1fr}}
/* hero to ~430 so a full card row clears the fold */
.hero .in{padding-top:clamp(18px,2.2vw,30px);padding-bottom:clamp(18px,2.2vw,30px)}
.hero .copy h1{font-size:clamp(36px,5.4vw,56px)}
/* the closing block duplicated the hero: same indigo, same form, louder heading */
.close h2{font-size:clamp(34px,4vw,44px)!important}
section.blue.close{background:var(--k)}
/* /pricing: H2s spanned the full width while their content hugged the left half */
.prose{max-width:64ch}
.pricebox .pay{align-items:start}
.rcpt{border-width:3px}

/* ---- benchmark pass 3 ---- */
/* 5 items in a 2-col grid orphaned Week 10 beside 570px of nothing */
.sched{grid-template-columns:1fr}
/* 5px shadow into an 18px gap left 13px of real gutter; theirs is 24px */
#issues .res{gap:26px}
/* shadows existed on 6 elements only — make it the system, not an island */
.tiers,.rcpt,.feat{box-shadow:none}
/* navy ran 4 bands deep with the paid tile 85px above the closing band */
.tier:last-child{background:var(--u)}
.tier:last-child>.lab{color:var(--y)}
/* ladder was 44/40/38 inside 6px, then a cliff */
#issues .sec-head h2,#sell .sec-head h2{font-size:clamp(26px,3vw,34px)!important}
.close h2{font-size:clamp(34px,4.4vw,46px)!important}
.prose p,.prose li{max-width:64ch}
/* one ladder for every page: h1 > close > h2 > h3, with real steps between */
main section h2{font-size:clamp(26px,3vw,34px)}
.close h2{font-size:clamp(34px,4.4vw,46px)!important}
.page-head h1{font-size:clamp(34px,5vw,58px)}
/* the two stragglers: .letter .who h2 and bare section h2 outranked `main section h2` */
.letter .who h2{font-size:clamp(26px,3vw,34px)}
main section>.in>h2{font-size:clamp(26px,3vw,34px)}
.close .in h2{font-size:clamp(34px,4.4vw,46px)}

/* their hero is 5 elements with air around them; ours was 7 and tight */
.hero .in{padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(40px,6vw,76px)}
.hero .copy{gap:22px}
.hero .sub{font-size:19px;max-width:44ch}
.hero .below{gap:16px}
/* keep field + button on one row like theirs */
.hero .hform{max-width:520px;flex-wrap:nowrap}
.hero .hform input[type=email]{flex:1 1 auto;min-width:0}
.hero .hform button{flex:0 0 auto;white-space:nowrap}
@media(max-width:560px){.hero .hform{flex-wrap:wrap}.hero .hform input[type=email]{flex:1 1 100%;border-right-width:3px}.hero .hform button{width:100%;justify-content:center;border-left-width:3px}}
/* the capture is the point of the page: give it real width and height */
.hero .hform{max-width:640px}
.hero .hform input[type=email]{font-size:17px;padding:19px 20px}
.hero .hform button{padding:19px 28px;font-size:16px}
@media(max-width:560px){.hero .hform input[type=email]{padding:17px 16px}.hero .hform button{padding:17px 20px}}
/* which playbooks are free, at a glance */
#issues .res a .n.free{background:var(--u);color:var(--w)}
#issues .res a .n.mem{background:#E9E9F2;color:var(--k);opacity:.85}
/* the welded signup button: .btn.go (0,2,0) was beating .hform button (0,1,1) on
   border-color, so the yellow block sat outside the navy frame with no outline */
.hform .btn.go{border-color:var(--k)}
/* .below is a centred flex column, so the form shrank to fit-content (380px) and
   ignored its 640px max-width — leaving the placeholder only 26px before the button */
.hero .below{width:100%}
/* the signup error sits outside the form, so it can never resize the input group.
   .err's default colour is indigo, which is invisible on the indigo hero and blue band. */
.hero .err,.close .err{color:var(--y)}
/* capped at the subhead's own width: .hero .copy is a centred flex column that sizes to
   its widest child, so a wider message would stretch the column and the form with it */
.hero .err,.close .err{margin:10px 0 0;max-width:60ch}
.hero .err{text-align:center;margin-left:auto;margin-right:auto}
/* Turnstile sits below the signup row; interaction-only means it is usually 0px */
.tsbox{margin-top:10px;display:flex;justify-content:center}
.close .tsbox{justify-content:flex-start}

.tier ul li.mut{opacity:.62;font-size:.94em}

.tiers.one{grid-template-columns:1fr}
.tiers.one .tier{border-right:0}
.tiers.one .tier h3,.tiers.one .tier ul{max-width:860px}

/* long-form blog posts: callouts, code, figures. Everything else a post needs is already in .prose */
.prose blockquote{margin:0;padding:14px 18px;border-left:4px solid var(--u);background:rgba(79,70,229,.06);border-radius:0 10px 10px 0;font-size:16px}
.prose blockquote p{margin:0}
.prose blockquote p+p{margin-top:10px}
.prose pre{margin:0;padding:16px 18px;background:var(--k);color:var(--w);border-radius:12px;overflow-x:auto;font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.prose figure{margin:0}
.prose figure img{width:100%;height:auto;display:block;border:1px solid var(--rl);border-radius:12px}
.prose figcaption{margin-top:8px;font:500 14px/1.5 var(--s);color:var(--mute)}
.prose th{font-weight:700}

/* charts: inline SVG, so the numbers are real text a crawler can read */
.prose figure.chart{margin:8px 0;padding:22px 20px 16px;border:1px solid var(--rl);border-radius:14px;background:#FCFCFB}
.prose figure.chart svg{width:100%;height:auto;display:block;overflow:visible}
.prose figure.chart .ct{font:800 15px/1.3 var(--s);color:var(--k);margin:0 0 2px}
.prose figure.chart .cs{font:500 13px/1.4 var(--s);color:var(--mute);margin:0 0 16px}
.prose figure.chart figcaption{margin-top:14px;font:500 13px/1.5 var(--s);color:var(--mute)}
.chart .lbl{font:600 13px/1 var(--s);fill:var(--k)}
.chart .val{font:800 14px/1 var(--s);fill:var(--k)}
.chart .ax{font:500 12px/1 var(--s);fill:#6B7280}
.chart .gl{stroke:#E7E5F0;stroke-width:1}

/* the blog index is a list of posts, so it is a <ul> — keep the card look */
ul.res{list-style:none;margin:0;padding:0}
ul.res li{display:contents}

/* launch countdown — js/site.js reveals it and hides it again once the date passes */
.cdown{display:inline}
.cdown b{font-weight:800;font-variant-numeric:tabular-nums}

/* FAQ — the answers already existed in JSON-LD; this renders the same source for people */
.faqs{max-width:70ch;gap:0}
.faqs details{border-bottom:1px solid var(--rl);padding:0}
.faqs summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;font:700 17px/1.35 var(--s);position:relative}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";position:absolute;right:4px;top:15px;font:800 22px/1 var(--s);color:var(--u)}
.faqs details[open] summary::after{content:"\2013"}
.faqs details p{margin:0 0 20px;font:500 16px/1.6 var(--s);max-width:64ch}

/* partner cards — logo first, one line of copy, scannable in four seconds */
.pcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pcards li{display:contents}
.pcards a{display:flex;flex-direction:column;gap:12px;padding:26px 24px 28px;border:1px solid var(--rl);border-radius:16px;background:var(--w);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.pcards a:hover{transform:translateY(-3px);box-shadow:none}
.pcards .mark{width:56px;height:56px;border-radius:12px;object-fit:contain;background:#F4F3FA;padding:7px;border:1px solid var(--rl)}
.pcards .blk{font:800 10px/1.3 var(--s);letter-spacing:.1em;text-transform:none;color:var(--u)}
.pcards h3{font:800 24px/1.05 var(--d);margin:0;color:var(--k);letter-spacing:-.01em}
.pcards p{margin:0;font:500 15px/1.5 var(--s);color:var(--k)}
.pcards .tag{margin-top:auto;padding-top:12px;font:700 12px/1.3 var(--s);color:var(--u)}
.pstrip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 6px}
.pstrip img{width:34px;height:34px;border-radius:8px;object-fit:contain;background:#F4F3FA;padding:4px;border:1px solid var(--rl)}

/* partner logo strip — the discounts are a named benefit, so show whose */
.plink{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 14px 10px 10px;border:1px solid var(--rl);border-radius:999px;background:var(--w);text-decoration:none;width:fit-content;transition:transform .12s ease}
.plink:hover{transform:translateY(-2px)}
.plink img{width:30px;height:30px;border-radius:7px;object-fit:contain;background:#F4F3FA;padding:3px;border:1px solid var(--k)}
.plink span{font:700 13px/1.2 var(--s);color:var(--k);margin-left:4px}

/* hero trust row: proof inside the first screen */
.htrust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;margin-top:6px;font:600 13.5px/1.3 var(--s);color:var(--w)}
.htrust b{color:var(--y);font-weight:800}
.htrust .hl{display:inline-flex;align-items:center;gap:6px}
.htrust img{width:22px;height:22px;border-radius:5px;background:var(--w);object-fit:contain}

/* library shelf: one card per playbook, number first */
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.pb{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;border:1px solid var(--rl);background:var(--w);color:var(--k);overflow:hidden;transition:transform .12s,box-shadow .12s}
.pb .num{font:900 clamp(40px,4vw,56px)/.85 var(--d);letter-spacing:-.06em;color:#7D79AD}
.pb .tag{position:absolute;top:18px;right:18px;padding:5px 9px;font:800 11px/1 var(--s);letter-spacing:.1em;text-transform:none;background:var(--k);color:var(--w)}
.pb h3{font-size:clamp(17px,1.6vw,21px);line-height:1.1}
.pb p{font:500 14.5px/1.45 var(--s);color:var(--mute)}
.pb .go{margin-top:auto;padding-top:8px;font:800 12px/1 var(--s);letter-spacing:.1em;text-transform:none;color:var(--u)}
.pb.free{border-color:var(--u);box-shadow:none}
.pb.free .num{color:var(--u)}
.pb.free .tag{background:var(--y);color:var(--k)}
.pb.hot{background:var(--k);color:var(--w)}
.pb.hot .num{color:var(--y)}
.pb.hot p{color:rgba(255,255,255,.82)}
.pb.hot .tag{background:var(--y);color:var(--k)}
.pb.mem .tag::before{content:"";display:inline-block;width:7px;height:8px;margin-right:6px;border:1px solid var(--rl);border-radius:2px 2px 1px 1px;vertical-align:-1px}
a.pb:hover{transform:translate(-2px,-2px);box-shadow:none}
@media(max-width:900px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .shelf{grid-template-columns:1fr;gap:10px}
  .pb{display:grid;grid-template-columns:52px 1fr;column-gap:12px;row-gap:4px;padding:14px 14px 16px}
  .pb .num{grid-row:1/4;font-size:38px}
  .pb .tag{position:static;justify-self:start;grid-column:2}
  .pb h3,.pb p,.pb .go{grid-column:2}
  .pb p{font-size:13.5px}
}

/* first-dollars sample: one huge number per founder */
.first{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.first>div{display:flex;flex-direction:column;gap:6px;padding:20px 20px 22px;background:var(--w);border:1px solid var(--rl);box-shadow:none}
.first .big{font:900 clamp(48px,5.4vw,78px)/.85 var(--d);letter-spacing:-.06em;color:var(--u)}
.first h3{font-size:clamp(17px,1.6vw,21px);margin-top:6px}
.first p{font:500 14.5px/1.45 var(--s);color:var(--mute)}
.first .me{background:var(--k);color:var(--w)}.first .me .big{color:var(--y)}.first .me p{color:rgba(255,255,255,.85)}
.firstnote{margin-top:24px;font:700 clamp(16px,1.6vw,20px)/1.4 var(--s);max-width:60ch}
@media(max-width:900px){.first{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.first{gap:10px}.first>div{padding:14px 14px 16px;box-shadow:none}.first .big{font-size:42px}.first p{font-size:13px}}

/* moves: the one move that took a SaaS from X to Y */
.moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.mv{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;background:var(--w);border:1px solid var(--rl);box-shadow:none}
.mv .co{font:800 11.5px/1 var(--s);letter-spacing:.12em;text-transform:none;color:var(--u)}
.mv h3{font-size:clamp(17px,1.6vw,21px);line-height:1.1}
.mv .ft{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
.mv .ft b{font:900 clamp(34px,3.6vw,52px)/.9 var(--d);letter-spacing:-.05em}
.mv .ft b:first-child{color:#7D79AD}
.mv .ft b:last-child{color:var(--u)}
.mv .ft i{font:900 26px/1 var(--s);font-style:normal;color:var(--k)}
.mv p{font:500 14px/1.45 var(--s);color:var(--mute)}
.mv.me{background:var(--k);color:var(--w)}.mv.me .co{color:var(--y)}.mv.me .ft b:last-child{color:var(--y)}.mv.me .ft b:first-child{color:rgba(255,255,255,.5)}.mv.me .ft i{color:var(--w)}.mv.me p{color:rgba(255,255,255,.85)}
@media(max-width:900px){.moves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.moves{grid-template-columns:1fr;gap:10px}.mv{padding:14px 16px 16px;box-shadow:none}.mv .ft b{font-size:38px}}
.hero .sub b{color:var(--y);font-weight:800}

/* key facts: crawlable definition list, laid out as a card */
.vp{margin:22px 0 0;max-width:40ch;font:800 clamp(20px,2.2vw,28px)/1.25 var(--s)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:22px 0 0;border:1px solid var(--rl);box-shadow:none}
.facts>div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rl)}
.facts>div:nth-child(odd){border-right:1px solid var(--rl)}
.facts>div:nth-last-child(-n+2){border-bottom:0}
.facts dt{font:800 11.5px/1.5 var(--s);letter-spacing:.1em;text-transform:none;color:var(--u)}
.facts dd{margin:0;font:600 15px/1.45 var(--s)}
.facts a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:800px){.facts{grid-template-columns:1fr}.facts>div:nth-child(odd){border-right:0}.facts>div:nth-last-child(2){border-bottom:1px solid var(--rl)}.facts>div{grid-template-columns:118px 1fr;padding:12px 14px}}

/* headlines never split a word; shrink instead */
h1,h2{overflow-wrap:normal;word-break:normal;hyphens:none}
@media(max-width:600px){.page-head h1{font-size:clamp(26px,8.2vw,44px)}h2{font-size:clamp(26px,8.2vw,40px)}}
@media(max-width:340px){.kit>*{padding:14px 10px}.kit h3{font-size:12.5px}.kit .k{font-size:24px}}
/* small phones: padding and big numbers step down so nothing pushes past the edge */
@media(max-width:400px){
  .tier{padding:22px 16px}.tier h3{font-size:22px}
  .steps .n{font-size:32px}
  .res a{padding:20px 16px}.res h3{font-size:19px}.res p,.res h3{overflow-wrap:anywhere}
}
@media(max-width:400px){
  .in .steps,.in .steps.up3,.in .steps.up5{grid-template-columns:1fr}
  .in .steps>div{border-right:0;padding-right:0}
  h2{font-size:clamp(22px,7.6vw,36px)!important}
}
.steps h3{font-size:clamp(16px,1.6vw,22px)}

/* ===== blog: chunks, not walls ===== */
.page-head .lede + p{margin-top:8px;max-width:62ch;font:500 clamp(17px,1.5vw,20px)/1.5 var(--s);color:var(--mutew)}
.post{counter-reset:sec;font-size:17.5px;line-height:1.65;gap:16px}
.post .tldr-box{margin:0 0 14px;padding:20px 22px;background:var(--y);border:1px solid var(--rl);box-shadow:none}
.post .tldr-box .k{display:block;font:800 12px/1 var(--s);letter-spacing:.14em;text-transform:none;margin-bottom:12px}
.post .tldr-box ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.post .tldr-box li{position:relative;padding-left:24px;font:700 16px/1.4 var(--s);margin:0}
.post .tldr-box li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;background:var(--u);transform:rotate(45deg)}
.post h2{counter-increment:sec;position:relative;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--rl);font-size:clamp(24px,2.8vw,34px)}
.post h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:8px;font:900 clamp(34px,3.4vw,48px)/.9 var(--d);letter-spacing:-.05em;color:var(--u)}
.post h2 + p{font-weight:700;font-size:1.08em}
.post h3{margin-top:10px;font-size:clamp(18px,1.8vw,22px)}
.post blockquote,.post .note{margin:6px 0;padding:16px 18px;background:#EFEDFF;border:3px solid var(--u);border-radius:0;font-size:16px;line-height:1.55}
.post .note{background:#FFFBE0;border-color:var(--k)}
.post ul li,.post ol li{margin:8px 0}
.post strong,.post b{background:linear-gradient(transparent 62%,rgba(228,255,60,.75) 62%)}
.post .tldr-box b,.post .cta-in b{background:none}
.post .cta-in{display:flex;flex-direction:column;gap:10px;margin:22px 0 8px;padding:22px;background:var(--k);color:var(--w);border:1px solid var(--rl);box-shadow:none}
.post .cta-in b{font:900 clamp(20px,2.2vw,26px)/1.1 var(--d);letter-spacing:-.03em;text-transform:none;color:var(--y)}
.post .cta-in span{font:500 15px/1.45 var(--s);opacity:.9}
.post .cta-in .btn{align-self:flex-start}
@media(max-width:600px){.post{font-size:16.5px}.post .tldr-box{padding:16px}.post .tldr-box li{font-size:15px}.post .cta-in .btn{align-self:stretch;justify-content:center}}
.post .cta-in .btn,.post .cta-in .btn:hover{text-decoration:none}
/* ===== blog visuals: HTML, so readers see them and AI can read them ===== */
.post .v-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0}
.post .v-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.post .v-cards>div{display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--w);border:1px solid var(--rl);box-shadow:none}
.post .v-cards .lab{font:800 11.5px/1 var(--s);letter-spacing:.12em;text-transform:none;color:var(--u)}
.post .v-cards b{font:900 clamp(30px,3vw,42px)/.95 var(--d);letter-spacing:-.05em;background:none;margin-top:4px}
.post .v-cards.three b{font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;text-transform:none}
.post .v-cards small{font:600 12.5px/1.35 var(--s);color:var(--mute)}
.post .v-cards p{margin-top:6px;font:700 14px/1.4 var(--s)}
.post .v-cards .hi{background:var(--k);color:var(--w)}.post .v-cards .hi .lab,.post .v-cards .hi b{color:var(--y)}.post .v-cards .hi small{color:rgba(255,255,255,.7)}
.post .v-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:10px 0;border:1px solid var(--rl)}
.post .v-flow>div{position:relative;padding:16px 14px;border-right:1px solid var(--rl);background:var(--w)}
.post .v-flow>div:last-child{border-right:0}
.post .v-flow span{display:block;font:900 30px/1 var(--d);letter-spacing:-.05em;color:var(--u)}
.post .v-flow b{display:block;margin-top:8px;font:800 15px/1.25 var(--s);background:none}
.post .v-flow p{margin-top:4px;font:500 13.5px/1.4 var(--s);color:var(--mute)}
.post .v-flow .hi{background:var(--y)}
.post .v-flow .hi p{color:var(--k)}
.post .v-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:10px 0;border:1px solid var(--rl)}
.post .v-stats>div{padding:16px 14px;border-right:1px solid var(--rl)}
.post .v-stats>div:last-child{border-right:0}
.post .v-stats b{display:block;font:900 clamp(26px,2.6vw,36px)/.95 var(--d);letter-spacing:-.05em;color:var(--u);background:none}
.post .v-stats span{display:block;margin-top:6px;font:600 13px/1.35 var(--s);color:var(--mute)}
.post .v-stats .hi{background:var(--k)}.post .v-stats .hi b{color:var(--y)}.post .v-stats .hi span{color:rgba(255,255,255,.8)}
.post .v-plan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0}
.post .v-plan>div{padding:16px;border:1px solid var(--rl);background:var(--w)}
.post .v-plan .lab{display:block;margin-bottom:8px;font:900 18px/1 var(--d);letter-spacing:-.03em;text-transform:none;color:var(--u)}
.post .v-plan ul{margin:0;padding-left:18px}.post .v-plan li{font:500 14.5px/1.45 var(--s);margin:6px 0}
.post .v-plan .hi{background:var(--y)}.post .v-plan .hi .lab{color:var(--k)}
.post .v-fig{margin:12px 0}.post .v-fig img{width:100%;height:auto;border:1px solid var(--rl)}
.post .v-fig figcaption{margin-top:8px;font:500 13.5px/1.45 var(--s);color:var(--mute)}
@media(max-width:760px){
  .post .v-cards,.post .v-cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post .v-flow,.post .v-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post .v-flow>div:nth-child(2n),.post .v-stats>div:nth-child(2n){border-right:0}
  .post .v-flow>div:nth-child(-n+2),.post .v-stats>div:nth-child(-n+2){border-bottom:1px solid var(--rl)}
  .post .v-plan{grid-template-columns:1fr}
}
@media(max-width:600px){.post .v-cards>div{padding:12px}.post .v-cards b{font-size:28px}.post .v-cards.three b{font-size:17px}.post .v-cards p{font-size:13px}.post .v-cards small{font-size:11.5px}}
@media(max-width:340px){.post .v-cards,.post .v-cards.three{grid-template-columns:1fr}}

.post .v-plan:has(> div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.post .v-plan:has(> div:nth-child(4)){grid-template-columns:1fr}}

.mv p .src{display:block;margin-top:6px;font:600 12px/1.3 var(--s);color:var(--u);text-decoration:underline;text-underline-offset:2px}
.tbl.vs4 .th,.tbl.vs4 .tr{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.7fr)}
.tbl.vs4 .tr{font:500 16px/1.45 var(--s)}
.tbl.board .tr.me{background:var(--y);color:var(--k);box-shadow:-14px 0 0 var(--y),14px 0 0 var(--y)}
@media(max-width:820px){.tbl.vs4 .tr{grid-template-columns:1fr}}
.pb-live{display:contents}

/* pricing picker: one plan, Monthly | Yearly, one price, one button */
.pp{background:var(--w);color:var(--k);border:1px solid var(--rl);box-shadow:none;padding:28px;display:flex;flex-direction:column;gap:18px}
.pp-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font:800 12px/1 var(--s);letter-spacing:.12em;text-transform:none}
.pp-badge{background:var(--u);color:var(--w);padding:6px 8px;letter-spacing:.04em;text-transform:none;font-size:12px}
.pp-switch{display:flex;border:1px solid var(--rl)}
.pp-switch button{flex:1;height:46px;border:0;background:var(--w);color:var(--k);font:700 15px/1 var(--s);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pp-switch button[aria-checked="true"]{background:var(--k);color:var(--w)}
.pp-switch i{font-style:normal;background:var(--y);color:var(--k);font:800 11px/1 var(--s);padding:4px 6px}
.pp-price{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.pp-price s{font:700 24px/1 var(--s);color:var(--mute);padding-bottom:8px}
.pp-price b{font:900 56px/1.05 var(--d);letter-spacing:-.04em}
.pp-price span{color:var(--mute);padding-bottom:8px;font:600 16px/1 var(--s)}
.pp-then{font:500 14px/1.4 var(--s);color:var(--mute);margin-top:-2px}
.pp-cta{width:100%;border-color:var(--k);box-shadow:none;font-weight:800}
.pp-small{font:500 13px/1.45 var(--s);color:var(--mute);text-align:center;margin-top:-6px}
.pp-inc{list-style:none;padding:16px 0 0;margin:0;border-top:2px solid rgba(11,21,51,.12);display:flex;flex-direction:column;gap:9px;font:500 15px/1.4 var(--s)}
.pp-inc li::before{content:"✓";color:var(--u);font-weight:800;margin-right:8px}

/* playbook pages: wide tables scroll inside their own box, never the page */
.prose .md-table{overflow-x:auto;margin:18px 0}
.prose .md-table table{margin:0}
.pb-locked{margin:28px 0 8px;padding:22px;border:1px solid var(--rl);background:var(--w);box-shadow:none}
.pb-locked ul{margin:12px 0 18px}
h2.h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.03em}
.res h2.h3{font-size:24px}
@media(max-width:600px){.res h2.h3{font-size:19px;overflow-wrap:anywhere}}
.page-head .updated{color:rgba(255,255,255,.88)}
.black .steps .n,.black .n{color:#A5B4FC}
/* guides: steps are numbered in their own headings, so no section counter; word cards fit their box */
.post.guide h2::before{content:none;display:none}
.post .v-cards.words{grid-template-columns:repeat(4,minmax(0,1fr))}
.post .v-cards.words b{font-size:clamp(18px,1.9vw,20px);letter-spacing:-.02em;overflow-wrap:normal}
@media(max-width:900px){.post .v-cards.words{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* grid items may shrink below their longest unbreakable line (the stat row), so the letter never pushes the page wider */
.letter>*{min-width:0}
/* key facts: the value column may shrink, so long values wrap instead of widening the page at 360px */
.facts>div{grid-template-columns:118px minmax(0,1fr)}
.facts dd{overflow-wrap:anywhere}
/* Indie Hackers feature: a quiet credibility line in the hero and under the founder's letter */
.htrust a.ih{color:var(--w);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.htrust a.ih b{color:var(--y)}
.letter .ihq{font-weight:700}
.letter .ihq a{color:var(--y);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.pp-hook{font:700 15px/1.4 var(--s);margin:-4px 0 0}
.pp-now{font:500 14px/1.45 var(--s);margin:0}
.pp-guar{display:flex;flex-direction:column;gap:4px;border:1px solid var(--rl);background:#f4ffc2;padding:14px 16px;font:500 14px/1.45 var(--s)}
.pp-guar b{font:800 15px/1.3 var(--s)}

/* "Steal my playbook": the hook under the price */
.pp-pitch{display:flex;flex-direction:column;gap:8px;border:1px solid var(--rl);background:var(--k);color:#fff;padding:18px 20px;font:500 14px/1.5 var(--s)}
.pp-pitch i{font:800 11px/1 var(--s);font-style:normal;letter-spacing:.14em;text-transform:none;color:var(--y)}
.pp-pitch b{font:900 20px/1.2 var(--d,var(--s))}
.pp-pitch span{color:#C9CEDD}
.pp-pitch a{color:#fff;text-decoration:underline}
.pp-pitch strong{font:800 15px/1.4 var(--s);color:var(--y)}
.pp-pitch em{font-style:normal;color:#fff}
.pp-pitch b a{color:var(--y);text-decoration:underline}
.pp-pitch span.o{color:#fff;font-weight:700;font-size:15px}

/* Home: the value stack as a receipt, with the proof beside it */
.vstack{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start;padding-top:24px}
.vs-receipt{background:var(--k);color:#fff;border:1px solid var(--rl);box-shadow:none;padding:24px 26px;display:flex;flex-direction:column;gap:14px}
.vs-receipt>i{font:800 12px/1 var(--s);letter-spacing:.14em;text-transform:none;font-style:normal;color:var(--y)}
.vs-receipt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font:500 15px/1.4 var(--s)}
.vs-receipt li{display:flex;align-items:baseline;gap:10px}
.vs-receipt li span{flex:0 1 auto}
.vs-receipt li::after{content:"";order:1;flex:1 1 16px;min-width:16px;border-bottom:2px dotted rgba(255,255,255,.25);transform:translateY(-4px)}
.vs-receipt li b{order:2;flex:none;color:var(--y);font-weight:800}
.vs-receipt li b.inc{color:#C9CEDD}
.vs-total{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-top:2px solid var(--y);padding-top:12px;font:700 15px/1.3 var(--s)}
.vs-total strong{display:flex;flex-direction:column;align-items:flex-end;font:900 26px/1 var(--d);color:var(--y);text-align:right}
.vs-total small{font:700 12px/1.35 var(--s);color:#fff;margin-top:6px;max-width:26ch}
.vs-guar{margin:0;border-left:4px solid var(--y);padding-left:12px;font:500 14px/1.45 var(--s);color:#C9CEDD}
.vs-proof{margin:0;display:flex;flex-direction:column;gap:12px}
.vs-proof img{width:100%;height:auto;border:1px solid var(--rl);box-shadow:none;background:#fff}
.vs-proof figcaption{font:500 16px/1.5 var(--s)}
@media(max-width:860px){.vstack{grid-template-columns:1fr}.vs-total{flex-direction:column;align-items:flex-start}.vs-total strong{align-items:flex-start;text-align:left}}
.vs-roi{margin:0;font:500 15px/1.5 var(--s);color:#fff}
.vs-roi b{color:var(--y)}
/* Home hero: the USP headline is a full sentence, so it runs smaller and wraps at a readable width. */
.hero .copy h1{font-size:clamp(30px,3.5vw,50px);line-height:1.02;max-width:22ch;margin-left:auto;margin-right:auto}

/* Makers: listed startups, rendered live by functions/makers/[[path]].js */
.mk-why{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mk-why li{display:flex;flex-direction:column;gap:6px;border-left:4px solid var(--u);padding:4px 0 4px 16px}
.mk-why b{font:800 17px/1.25 var(--s)}
.mk-why span{font-size:15px;color:var(--mute)}
.mk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mk-card{display:flex;flex-direction:column;gap:14px;height:100%;padding:24px;background:#fff;border:1px solid var(--rl);box-shadow:none;transition:transform .12s,box-shadow .12s}
a.mk-card:hover{transform:translate(-2px,-2px);box-shadow:none}
.mk-card.is-member{box-shadow:none}
a.mk-card.is-member:hover{box-shadow:none}
.mk-card p{font-size:15px;color:var(--mute);flex:1}
.mk-row{display:flex;align-items:center;gap:14px;min-width:0}
.mk-row h1,.mk-row .h3{margin:0;overflow-wrap:anywhere}
.mk-kind{display:block;margin-top:4px;font:700 11px/1 var(--s);letter-spacing:.12em;text-transform:none;color:var(--u)}
.mk-logo{flex:none;border:1px solid var(--rl);background:#fff;object-fit:contain;padding:3px}
.mk-initial{display:flex;align-items:center;justify-content:center;background:var(--y);color:var(--k);font:900 1.3em/1 var(--d)}
.mk-founder{display:flex;align-items:center;gap:8px;font-size:14px;flex-wrap:wrap}
.mk-face{width:28px;height:28px;border-radius:50%;border:1px solid var(--rl);object-fit:cover}
.mk-badge{display:inline-flex;align-items:center;gap:4px;background:var(--y);color:var(--k);font:800 11px/1 var(--s);letter-spacing:.08em;text-transform:none;padding:5px 8px;border:1px solid var(--rl)}
.page-head .mk-badge{border-color:var(--y)}
.mk-add{display:flex;flex-direction:column;justify-content:center;gap:10px;height:100%;padding:24px;border:3px dashed var(--k);background:var(--y)}
.mk-add b{font:900 20px/1.15 var(--d);text-transform:none}
.mk-add span{font-size:15px}
.mk-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--rl);margin-bottom:40px}
.mk-facts div{padding:20px 24px;border-right:1px solid var(--rl)}
.mk-facts div:last-child{border-right:0}
.mk-facts dt{font:700 11px/1 var(--s);letter-spacing:.12em;text-transform:none;color:var(--mute);margin-bottom:8px}
.mk-facts dd{margin:0;font:800 17px/1.3 var(--s)}
.mk-more{margin-top:48px}
.mk-more h2{font:900 22px/1.2 var(--d);text-transform:none;margin-bottom:20px}
@media(max-width:900px){.mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.mk-grid,.mk-why,.mk-facts{grid-template-columns:1fr}.mk-facts div{border-right:0;border-bottom:1px solid var(--rl)}.mk-facts div:last-child{border-bottom:0}}
.mk-card .h3{display:block;font:900 20px/1.15 var(--d);text-transform:none}

/* Landing: "Get your startup listed" band (index #get-listed) */
.lm{background:var(--y);color:var(--k);padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--rl);border-bottom:1px solid var(--rl)}
.lm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.lm-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.lm-copy h2{font:900 clamp(34px,5vw,64px)/1 var(--d);text-transform:none}
.lm-copy h2 em{font-style:normal;color:var(--u)}
.lm-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lm-ticks li{display:flex;align-items:center;gap:12px;font-size:19px}
.lm-ticks li::before{content:"✓";display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;background:var(--k);color:var(--y);font-weight:900;font-size:15px}
.lm .btn.go{background:var(--k);color:var(--y);border-color:var(--k)}
.lm-preview{display:block;background:#fff;border:1px solid var(--rl);box-shadow:none;transform:rotate(1.2deg);transition:transform .15s}
.lm-preview:hover{transform:rotate(0) translateY(-3px)}
.lm-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--rl);background:#F3F4F8;font-size:13px;color:var(--mute);overflow:hidden;white-space:nowrap}
.lm-bar i{width:10px;height:10px;border-radius:50%;background:var(--k);opacity:.25;flex:none}
.lm-bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.lm-bar b{color:var(--u)}
.lm-card{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,3vw,32px)}
.lm-row{display:flex;align-items:center;gap:14px}
.lm-logo{display:flex;align-items:center;justify-content:center;width:64px;height:64px;flex:none;background:var(--y);border:1px solid var(--rl);font:900 28px/1 var(--d)}
.lm-name{display:block;font:900 clamp(22px,2.6vw,30px)/1.05 var(--d);text-transform:none}
.lm-kind{display:block;margin-top:6px;font:700 11px/1 var(--s);letter-spacing:.12em;text-transform:none;color:var(--u)}
.lm-line{font-size:17px;color:var(--mute)}
.lm-by{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.lm-face{width:28px;height:28px;border-radius:50%;border:1px solid var(--rl);background:linear-gradient(135deg,var(--u),var(--cy))}
.lm-badge{background:var(--y);border:1px solid var(--rl);padding:4px 7px;font:800 11px/1 var(--s);letter-spacing:.08em;text-transform:none}
.lm-visit{align-self:flex-start;background:var(--y);border:1px solid var(--rl);padding:12px 18px;font-weight:700;font-size:15px}
@media(max-width:820px){.lm-grid{grid-template-columns:1fr}.lm-preview{transform:none}}

/* Hero: what a free account gets, as three ticks */
.hfree{list-style:none;margin:14px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center}
.hfree li{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.hfree li::before{content:"✓";display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--y);color:var(--k);font-weight:900;font-size:12px}
.lm-members{font-size:15px;line-height:1.5;max-width:46ch;border-top:1px solid var(--rl);padding-top:14px}

/* Landing: "Sound familiar?" (index #sound-familiar) */
.sf-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.sf-list li{font:700 clamp(17px,1.6vw,21px)/1.3 var(--s);padding:18px 20px;border:1px solid var(--rl);background:#fff;box-shadow:none}
.sf-answer{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px;font:800 clamp(18px,2vw,24px)/1.3 var(--s)}
.mk-face-initial{display:inline-flex;align-items:center;justify-content:center;background:var(--u);color:#fff;font:900 12px/1 var(--d)}
.sub-face{display:inline-block;width:44px;height:44px;border-radius:50%;border:2px solid var(--y);object-fit:cover;vertical-align:middle;margin:-6px 10px 0 0}
.sub-ih{color:var(--y);text-decoration:underline;text-underline-offset:3px;font-weight:700;margin-left:6px}

/* Value list without dollar leaders; the quote card instead of a pasted screenshot */
.vs-receipt li::after{display:none}
.vs-receipt li{justify-content:space-between;gap:18px}
.vs-receipt li b{text-align:right;white-space:nowrap}
.vs-receipt ul{font-size:16px}
.vs-quote{display:flex;flex-direction:column;gap:14px;padding:24px;border:1px solid var(--rl);box-shadow:none;background:#fff}
.vs-quote blockquote{margin:0;font:700 clamp(18px,1.6vw,22px)/1.35 var(--s)}
.vs-quote figcaption{display:flex;align-items:center;gap:10px;font-size:15px}
.vs-quote figcaption img{width:36px;height:36px;border-radius:50%;border:1px solid var(--rl);object-fit:cover}
.xq .q{box-shadow:none}
#issues .res>:nth-child(n+4){display:none}
.more-pb{display:inline-block;margin-top:22px;font:700 15px/1 var(--s);text-decoration:underline;text-underline-offset:3px}

/* the number, live, in the hero: two inputs, one headline (same rules as the app's Where you stand) */

/* hero as two columns: the copy on the left; the roast card with the email step on the right */
.hero .kick{grid-template-columns:minmax(0,1fr) 408px;gap:48px;align-items:center}
.hero .copy{align-items:flex-start;text-align:left;margin:0;max-width:none}
.hero .g1,.hero .below{align-items:flex-start}
.hero .sub{margin:0;text-wrap:pretty}
.hero .hform,.hero .hfree,.hero .htrust{justify-content:flex-start}
.hero .spec{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.hero .spec span{background:var(--y);color:var(--k);font:800 13px/1 var(--s);padding:9px 11px;letter-spacing:.01em;border-radius:2px}
.card.xr{border-radius:2px;text-decoration:none;color:var(--w);box-shadow:none;transition:transform .15s}
.card.xr:hover{transform:translate(-2px,-2px)}
.card.xr .h4{display:block;text-transform:none;font-size:22px;letter-spacing:-.02em}
.xr-snap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2)}
.xr-snap div{min-width:0}
.xr-snap dt{font:700 9px/1.2 var(--s);letter-spacing:.1em;text-transform:none;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xr-snap dd{margin:2px 0 0;font:900 15px/1.2 var(--d);color:var(--y);white-space:nowrap}
.xr-list{list-style:none;margin:0;padding:0;display:grid;gap:7px;counter-reset:xr;font:700 13.5px/1.3 var(--s)}
.xr-list li{display:flex;gap:9px;align-items:baseline}
.xr-list li::before{content:counter(xr);counter-increment:xr;flex:0 0 18px;width:18px;height:18px;background:var(--y);color:var(--k);font:900 10px/18px var(--d);text-align:center;transform:none;border-radius:0;position:static;margin:0}
.card.xr .f{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card.xr .f img{width:28px;height:28px;border-radius:50%;border:2px solid var(--y);object-fit:cover}
@media(max-width:900px){.hero .kick{grid-template-columns:1fr}.hero .copy{align-items:center;text-align:left}.card.xr{width:100%;max-width:none}}

/* two-column hero: the headline stays short so the number and the form sit above the fold (last rule wins) */
.hero .copy h1{font-size:clamp(28px,2.7vw,40px);line-height:.95;max-width:none}
@media(min-width:901px) and (max-width:1150px){.hero .copy h1{font-size:clamp(32px,3.6vw,44px)}}

/* why this exists: the business half, six verbs */
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.why-list li{display:flex;flex-direction:column;gap:6px;border:2px solid rgba(255,255,255,.25);padding:16px 18px;min-width:0}
.why-list b{font:900 20px/1.1 var(--d);color:var(--y);letter-spacing:-.02em}
.why-list span{font:500 15px/1.45 var(--s);color:rgba(255,255,255,.85)}
@media(max-width:900px){.why-list{grid-template-columns:1fr 1fr;gap:10px}.why-list li{padding:12px 14px}.why-list b{font-size:17px}}
@media(max-width:520px){.why-list{grid-template-columns:1fr}}

/* Get listed: one column on phones, nothing wider than the screen */
@media(max-width:900px){.lm-grid{grid-template-columns:1fr!important;gap:22px}.lm-grid>*{min-width:0;max-width:100%}.lm-preview{width:100%}}

/* the Indie Hackers link under the quote wraps on phones */
.letter .ihq a{white-space:normal;overflow-wrap:anywhere;display:inline}

/* hero: one headline, one line, one object (the number, with the email step inside it) */
.hero .kick{grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:center}
.hero .g1{gap:16px}
.hero .hero-lab{color:var(--y);letter-spacing:.14em}
.hero .copy h1{font-size:clamp(34px,3.4vw,50px);line-height:.95;max-width:none}
.hero .sub{font-size:clamp(17px,1.35vw,20px)}
.hero .proof{display:flex;align-items:center;gap:12px;margin:4px 0 0;font:500 15px/1.4 var(--s);color:rgba(255,255,255,.9)}
.hero .proof img{width:40px;height:40px;border-radius:50%;border:2px solid var(--y);object-fit:cover;flex:0 0 40px}
.hero .proof a{color:var(--y);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.vstack .card.xr{width:100%;justify-self:stretch;color:var(--w)}
@media(max-width:900px){.hero .kick{grid-template-columns:1fr;gap:28px}.hero .copy{align-items:flex-start;text-align:left}.roast{padding:16px}.roast .hform input{flex-basis:100%}}

/* the proof line is a sentence with a plain link, not a button */
.hero .copy .proof a,.hero .proof a{display:inline;border:0;padding:0;background:none;box-shadow:none;font:inherit;font-weight:700;color:var(--y);text-decoration:underline;text-underline-offset:3px;white-space:normal}
.hero .proof span{display:inline}

/* hero width: room for the two-line headline next to the card */
.hero .in{max-width:1200px}
.hero .kick{grid-template-columns:minmax(0,1fr) 420px;gap:48px}
.hero .copy h1{font-size:clamp(34px,3.3vw,46px)}
.hero .sub{max-width:none}
@media(max-width:900px){.hero .kick{grid-template-columns:1fr}}
.hero .proof b{display:inline}
/* the roast card: the deliverable in the hero, with the email step inside */
.roast{display:flex;flex-direction:column;gap:11px;background:var(--w);color:var(--k);border:1px solid var(--rl);border-radius:2px;box-shadow:none;padding:20px 22px;text-align:left}
.roast>.lab{color:var(--k);font-weight:800}
.roast .h4{font:900 clamp(21px,2.1vw,25px)/1.12 var(--d);letter-spacing:-.02em;color:var(--k)}
.roast ol{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:r;font:700 15.5px/1.3 var(--s)}
.roast ol li{display:flex;gap:10px;align-items:baseline;position:static;padding:0}
.roast ol li::before{content:counter(r);counter-increment:r;flex:0 0 22px;width:22px;height:22px;background:var(--k);color:var(--y);font:900 11px/22px var(--d);text-align:center;position:static;transform:none;border-radius:0;margin:0}
.roast .f{display:flex;align-items:center;gap:10px;font:500 14px/1.4 var(--s);color:#5d6275}
.roast .f img{width:32px;height:32px;border-radius:50%;border:1px solid var(--rl);object-fit:cover;flex:0 0 32px}
.roast .go{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rl);padding-top:14px}
.roast .hform{max-width:none;flex-direction:column;align-items:stretch;gap:8px}
.roast .hform input{flex:1 1 auto;width:100%;padding:12px 14px;font-size:15px;box-shadow:none}
.roast .hform .btn{width:100%;justify-content:center}
.roast .micro{color:#5d6275;font-size:13px;line-height:1.45}
.roast .micro a{color:var(--k);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.roast .rs{margin:-3px 0 0;font:500 14.5px/1.45 var(--s);color:#3b4057}
.roast .rs b{color:var(--k);font-weight:800}
.roast .lab2{margin-top:3px;padding-top:11px;border-top:1px solid var(--rl)}
.roast .rt{list-style:none;margin:0;padding:0;display:grid;gap:7px;font:500 14.5px/1.35 var(--s);color:#3b4057}
.roast .rt li{display:flex;gap:9px;align-items:baseline;position:static;padding:0}
.roast .rt li::before{content:"\2713";flex:0 0 18px;width:18px;height:18px;background:var(--y);color:var(--k);font:900 11px/18px var(--s);text-align:center;position:static;transform:none;border-radius:0;margin:0}
.roast .rt b{color:var(--k);font-weight:800}
.roast .go{padding-top:12px}
.roast .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:-4px}
.roast .price b{font:900 46px/1 var(--d);letter-spacing:-.03em;color:var(--k)}
.roast .price>span{font:700 15px/1 var(--s);color:#3b4057}
.roast .price small{flex-basis:100%;font:500 13px/1.3 var(--s);color:#5d6275}
.roast .rt{font:800 14.5px/1.3 var(--s);color:var(--k);gap:6px}
.roast .prom{display:flex;gap:10px;align-items:center;margin:0;font:500 13.5px/1.35 var(--s);color:#3b4057}
.roast .prom img{width:30px;height:30px;border-radius:50%;border:1px solid var(--rl);object-fit:cover;flex:0 0 30px}
.roast .prom i{font-style:italic}
.roast .prom b{color:var(--k)}
.hero .in{padding-top:clamp(28px,3.6vw,48px);padding-bottom:clamp(28px,3.6vw,48px)}
.roast .oks{display:flex;flex-wrap:wrap;gap:4px 18px;font:700 13px/1.3 var(--s);color:#3b4057}
/* Where you'll be: the ladder stands as tall as the example beside it, three lines with room to breathe */
.vstack{align-items:stretch}
.vs-receipt{justify-content:center;gap:26px;padding:28px 30px}
.vs-receipt ul{gap:22px;font-size:18px}
.vs-receipt li b{font-size:18px}
@media(max-width:900px){.vs-receipt{gap:16px;padding:22px 20px}.vs-receipt ul{gap:12px;font-size:16px}.vs-receipt li b{font-size:16px}}
/* the press line: Indie Hackers' case study, with their logo, under the hero copy */
.hero .press{display:flex;gap:14px;align-items:center;margin:6px 0 0;max-width:640px;text-decoration:none;color:#fff;border:0;background:none;box-shadow:none;padding:0}
.hero .press .me{width:44px;height:44px;border-radius:50%;border:2px solid var(--y);object-fit:cover;flex:0 0 44px}
.hero .press .col{display:flex;flex-direction:column;gap:5px;min-width:0}
.hero .press .press-ih{display:flex;align-items:center;gap:7px;font:700 12px/1 var(--s);letter-spacing:.04em;color:rgba(255,255,255,.85);white-space:nowrap}
.hero .press .press-ih img{display:block;height:auto}
.hero .press .press-q{font:800 16px/1.3 var(--s);color:var(--y);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.hero .press .press-what{font:500 13.5px/1.4 var(--s);color:rgba(255,255,255,.82)}
@media(max-width:900px){.hero .press{align-items:flex-start}.hero .press .press-ih{flex-wrap:wrap;white-space:normal}}
.hero .sub{font-size:clamp(18px,1.7vw,22px);font-weight:600;color:#fff;max-width:30ch}
@media(max-width:900px){.hero .sub{font-size:19px}}
/* featured makers: founding members with access, first on the wall and on the landing strip */
.mk-card.is-featured{position:relative;background:#FBFFD6;box-shadow:none}
.mk-feat{position:absolute;top:-13px;left:18px;background:var(--u);color:#fff;font:800 11px/1 var(--s);letter-spacing:.12em;text-transform:none;padding:6px 10px;border:1px solid var(--rl)}
.fm-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;list-style:none;margin:0;padding:0}
.fm-strip a{display:flex;gap:14px;align-items:center;padding:16px 18px;background:#fff;color:var(--k);border:1px solid var(--rl);box-shadow:none;text-decoration:none}
.fm-strip img,.fm-strip .fm-i{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--rl);object-fit:cover;background:var(--y);display:flex;align-items:center;justify-content:center;font:900 18px var(--d)}
.fm-strip b{display:block;font:800 16px/1.2 var(--s)}
.fm-strip span{display:block;font:500 13.5px/1.35 var(--s);color:#5d6275}

/* ===== Fight poster home (impeccable direction, 14 Oct 2026): Builders vs Makers, the undercard, the main event ===== */
.fp{background:var(--w);color:var(--k);border-bottom:1px solid var(--rl);overflow:hidden}
.fp-ring{--split:50;position:relative;display:grid;grid-template-columns:calc(var(--split) * 1%) calc((100 - var(--split)) * 1%);min-height:min(calc(100svh - 72px),860px)}
.fp-side{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.4vw,18px);padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px);min-width:0;transition:padding .3s cubic-bezier(.16,1,.3,1)}
.fp-b{background:var(--w);align-items:flex-end;text-align:right}
.fp-m{background:var(--u);color:var(--w);align-items:flex-start}
.fp-corner{font:800 12px/1 var(--s);letter-spacing:.18em;text-transform:none;opacity:.7}
.fp-name{margin:0;font:900 clamp(44px,8.6vw,150px)/.86 var(--d);letter-spacing:-.04em;text-transform:none;white-space:nowrap}
.fp-b .fp-name{color:var(--k)}
.fp-m .fp-name{color:var(--w)}
.fp-verb{margin:0;font:900 clamp(22px,2.6vw,40px)/1 var(--d);text-transform:none;letter-spacing:-.02em}
.fp-b .fp-verb s{text-decoration-thickness:.16em;text-decoration-color:var(--u)}
.fp-m .fp-verb{color:var(--y)}
.fp-note{margin:0;max-width:38ch;font:500 clamp(15px,1.15vw,18px)/1.45 var(--s)}
.fp-b .fp-note{color:#3b4057}
.fp-m .fp-note{color:#E3E6F5}
.fp-go{display:flex;flex-direction:column;gap:10px;margin-top:clamp(6px,1vw,14px);width:min(100%,520px)}
.fp-go .hform{justify-content:flex-start;max-width:none}
.fp-go .hform input{flex:1 1 220px;min-width:0;padding:16px 16px;font:600 16px var(--s);border:1px solid var(--rl);background:var(--w);color:var(--k)}
.fp-go .btn{border:1px solid var(--rl);box-shadow:none}
.fp-go .btn:hover{transform:translate(-2px,-2px);box-shadow:none}
.fp-bill{font:600 13.5px/1.4 var(--s);color:#E3E6F5}
.fp-bill b{color:var(--y);font:900 16px var(--d)}
.fp-vs{position:absolute;z-index:3;left:calc(var(--split) * 1%);top:50%;transform:translate(-50%,-50%);width:clamp(84px,9vw,132px);aspect-ratio:1;display:grid;place-items:center;padding:0;background:var(--y);color:var(--k);border:0;cursor:ew-resize;touch-action:none;
  filter:drop-shadow(4px 4px 0 var(--k))}
.fp-vs span{font:900 clamp(22px,2.4vw,34px)/1 var(--d);letter-spacing:-.04em}
.fp-vs:focus-visible{outline:none;filter:drop-shadow(0 0 0 var(--k)) drop-shadow(4px 4px 0 var(--u))}
.fp-ring::after{content:"";position:absolute;z-index:2;top:0;bottom:0;left:calc(var(--split) * 1%);width:3px;margin-left:-1.5px;background:var(--k)}
/* the title-card punch-in, once on load */
@media (prefers-reduced-motion:no-preference){
  .fp-b .fp-name{animation:fp-in-l .7s cubic-bezier(.16,1,.3,1) both}
  .fp-m .fp-name{animation:fp-in-r .7s cubic-bezier(.16,1,.3,1) both}
  .fp-vs{animation:fp-pop .55s .25s cubic-bezier(.34,1.56,.64,1) both}
}
@keyframes fp-in-l{from{transform:translateX(-14%);filter:blur(6px)}to{transform:none;filter:none}}
@keyframes fp-in-r{from{transform:translateX(14%);filter:blur(6px)}to{transform:none;filter:none}}
@keyframes fp-pop{from{transform:translate(-50%,-50%) scale(.4) rotate(-20deg)}to{transform:translate(-50%,-50%) scale(1) rotate(0)}}

/* the undercard: ranked rows in shrinking type */
.fp-under{background:var(--k);color:var(--w);padding:var(--sec) 0}
.fp-h{margin:0 0 clamp(20px,3vw,36px);font:900 clamp(24px,3vw,40px)/1.08 var(--d);letter-spacing:-.03em;text-wrap:balance}
.fp-h em{font-style:normal;color:var(--u)}
.fp-under .fp-h{text-align:center;color:var(--y)}
.fp-card{list-style:none;margin:0 auto;padding:0;max-width:980px;text-align:center}
.fp-card li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:clamp(12px,1.6vw,18px) 0;border-top:1px solid rgba(255,255,255,.18)}
.fp-card li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.fp-card b{font:900 var(--fs,32px)/1 var(--d);text-transform:none;letter-spacing:-.03em}
.fp-card span{font:600 clamp(13px,1vw,15px)/1.3 var(--s);letter-spacing:.08em;text-transform:none;color:#C9CEDD}
.fp-card li:nth-child(1){--fs:clamp(40px,6vw,88px)}
.fp-card li:nth-child(2){--fs:clamp(36px,5.2vw,76px)}
.fp-card li:nth-child(3){--fs:clamp(32px,4.5vw,64px)}
.fp-card li:nth-child(4){--fs:clamp(28px,3.9vw,54px)}
.fp-card li:nth-child(5){--fs:clamp(25px,3.3vw,46px)}
.fp-card li:nth-child(6){--fs:clamp(22px,2.8vw,38px)}
.fp-card li:nth-child(1) b{color:var(--y)}

/* the main event: Panche vs $0 */
.fp-main{background:var(--w);padding:var(--sec) 0;border-bottom:1px solid var(--rl)}
.fp-main .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.fp-bout{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0}
.fp-fighter{margin:0;position:relative;border:1px solid var(--rl);box-shadow:none;background:var(--k)}
.fp-fighter img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.fp-fighter figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:var(--k);color:var(--w);font:900 13px/1 var(--d);text-transform:none;letter-spacing:-.01em}
.fp-vs-s{position:relative;left:auto;top:auto;transform:none;width:clamp(56px,5vw,76px);margin:0 -14px;cursor:default;animation:none}
.fp-zero{aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px;background:var(--k);color:var(--w);border:1px solid var(--rl);box-shadow:none}
.fp-zero b{font:900 clamp(56px,7vw,110px)/.9 var(--d);letter-spacing:-.05em;color:var(--y)}
.fp-zero span{font:600 13px/1.35 var(--s);color:#C9CEDD}
.fp-result p{margin:0 0 16px;max-width:60ch;color:#3b4057}
.fp-result .press{display:flex;flex-direction:column;gap:6px;margin:0 0 20px;color:var(--k);text-decoration:none}
.fp-result .press-ih{display:flex;align-items:center;gap:7px;font:700 12px/1 var(--s);color:#5d6275}
.fp-result .press-ih img{filter:invert(1);height:auto}
.fp-result .press-q{font:800 17px/1.3 var(--s);color:var(--u);text-decoration:underline;text-underline-offset:3px}
.fp-purse{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font:700 15px/1.3 var(--s)}
.fp-purse li{display:flex;gap:9px;align-items:baseline}
.fp-purse li::before{content:"";flex:0 0 10px;height:10px;background:var(--y);border:1px solid var(--rl);transform:translateY(1px)}
.fp-guar{margin:0;font:600 15px/1.4 var(--s);color:var(--k)}

@media(max-width:900px){
  .fp-ring{grid-template-columns:1fr;min-height:0}
  .fp-ring::after{display:none}
  .fp-side{align-items:flex-start;text-align:left;padding:40px var(--pad)}
  .fp-b{padding-bottom:56px}.fp-m{padding-top:64px}
  .fp-name{font-size:clamp(44px,15vw,96px)}
  .fp-vs{position:relative;left:auto;top:auto;transform:none;justify-self:start;margin:-44px 0 -44px var(--pad);width:88px;cursor:default;animation:none}
  .fp-main .in{grid-template-columns:1fr}
  .fp-purse{grid-template-columns:1fr}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* fit pass: names size to their own half, both corners start level, text clears the VS */
.fp-ring{--pt:clamp(56px,13vh,150px)}
.fp-side{container-type:inline-size;justify-content:flex-start;padding-top:var(--pt)}
.fp-b{padding-right:clamp(64px,6vw,96px)}
.fp-m{padding-left:clamp(64px,6vw,96px)}
.fp-name{font-size:clamp(40px,14.5cqi,150px)}
.fp-vs{top:calc(var(--pt) + 26px + 7.2cqw)}
@media(max-width:900px){.fp-side{padding-top:40px}.fp-b{padding-right:var(--pad)}.fp-m{padding-left:var(--pad)}.fp-name{font-size:clamp(44px,17cqi,110px)}.fp-vs{top:auto}}
.fp-ring{min-height:clamp(540px,70svh,700px)}.fp-side{padding-bottom:clamp(48px,7vh,80px)}@media(max-width:900px){.fp-ring{min-height:0}}
.fp-corner{opacity:1}.fp-m .fp-corner{color:#fff}.fp-b .fp-corner{color:#3b4057}.xr-snap dt{font-size:11px}

@media(prefers-reduced-motion:reduce){.hero .pill i{animation:none}}

/* ===================================================================================
   HOME: colour chapters (taste-skill direction colour-chapters, brand palette and type kept).
   The page opens CLOSED (navy) and the door sign swings it OPEN (violet); chapters run navy, lime,
   white, violet, and close on lime. Scoped to .ch and body:has(.ch).
   =================================================================================== */
.ch{--m:clamp(16px,3.2vw,44px);--ease:cubic-bezier(.23,1,.32,1);font:500 18px/1.55 var(--s);color:var(--k)}
.ch section{padding:0;position:relative}
.ch a{color:inherit}
.ch :focus-visible{outline:3px solid var(--y);outline-offset:3px}
.ch .f-white :focus-visible,.ch .ch-review :focus-visible,.ch .ch-notes :focus-visible,.ch #join-block :focus-visible{outline-color:var(--u)}
.ch h2,.ch h3{letter-spacing:-.04em}
.ch-h{font:900 clamp(40px,6.6vw,108px)/.9 var(--d);text-transform:none;letter-spacing:-.045em;margin:0;max-width:14ch;text-wrap:balance}
.ch-link{font:700 16px/1.3 var(--s);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;transition:color .15s}
.ch-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 26px;border:0;background:var(--y);color:var(--k);font:800 16px/1 var(--s);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s ease,transform .12s var(--ease)}
.ch-btn:hover{background:#fff}
.ch-btn:active{transform:scale(.97)}
.ch-btn:disabled{opacity:.7;cursor:progress}
body:has(.ch) .top{background:var(--k);transition:background-color .7s var(--ease)}
body.door-open .top{background:var(--u)}
@media(max-width:1040px){body:has(.ch) .top nav{background:inherit}}

/* 1. hero: the shop, closed then open */
.ch-hero{min-height:calc(100svh - 72px);display:grid;grid-template-rows:1fr auto;padding:0 var(--m) 40px;background:var(--k);color:#fff;overflow:hidden;transition:background-color .7s var(--ease)}
.ch-hero.is-open{background:var(--u)}
.ch-name{align-self:start;margin:clamp(96px,16vh,170px) 0 0;font:900 clamp(56px,11.4vw,196px)/.84 var(--d);text-transform:none;letter-spacing:-.045em;overflow-wrap:normal}
.ch-line{display:block;overflow:hidden;padding-bottom:.06em}
.ch-line>span{display:inline-block}
.ch-l2{color:var(--y)}
.ch-act{justify-self:end;width:min(100%,470px);display:flex;flex-direction:column;gap:14px}
.ch-act>p:first-child{margin:0;font-size:20px;line-height:1.45;font-weight:600}
.ch .ch-form{display:flex;gap:0;flex-wrap:nowrap;margin:0;max-width:none}
.ch .ch-form input[type=email]{flex:1;min-width:0;height:56px;padding:0 16px;border:2px solid #fff;border-right:0;background:#fff;color:var(--k);font:600 16px/1 var(--s);border-radius:0}
.ch .ch-form input::placeholder{color:#55607e}
.ch .ch-form input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--u)}
.ch-bill{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.86)}
.ch .err{margin:0;color:var(--y);font:700 15px/1.4 var(--s)}
.ch-hang{position:absolute;top:0;right:calc(var(--m) + 110px);width:2px;height:40px;background:#fff;opacity:.85}
.ch-hang::before{content:"";position:absolute;top:34px;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--y)}
.ch-sign{position:absolute;top:46px;right:var(--m);width:222px;height:112px;padding:0;border:0;background:none;cursor:pointer;perspective:900px;transform-origin:50% -40px;-webkit-tap-highlight-color:transparent;z-index:2}
.ch-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--rl);backface-visibility:hidden;transition:transform .7s cubic-bezier(.23,1,.32,1)}
.ch-face b{font:900 34px/1 var(--d);text-transform:none;letter-spacing:-.02em}
.ch-face span{font:700 15px/1 var(--s)}
.ch-closed{background:#fff;color:var(--k)}
.ch-open{background:var(--y);color:var(--k);transform:rotateY(-180deg)}
.ch-sign[aria-pressed=true] .ch-closed{transform:rotateY(180deg)}
.ch-sign[aria-pressed=true] .ch-open{transform:rotateY(0)}
@media(prefers-reduced-motion:no-preference){
  .ch-sign{animation:ch-sway 3.2s ease-in-out 1.2s 1 both}
  .ch-line>span{animation:ch-rise .9s var(--ease) both}
  .ch-l2>span{animation-delay:.11s}
  .ch-act{animation:ch-up .6s var(--ease) .5s both}
  .ch .pre{opacity:0;transform:translateY(28px)}
  .ch .rise{transition:opacity .7s var(--ease),transform .7s var(--ease)}
}
@media(prefers-reduced-motion:reduce){.ch-face,.ch-hero,body:has(.ch) .top{transition:none}}
@keyframes ch-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes ch-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ch-sway{0%,100%{transform:rotate(0)}20%{transform:rotate(2.2deg)}45%{transform:rotate(-1.6deg)}70%{transform:rotate(.8deg)}}

/* 2. the running numbers */
.ch-run{background:#fff}
.ch-run-band{background:var(--y);overflow:hidden;padding:clamp(18px,3.4vh,34px) 0;border-top:1px solid var(--rl);border-bottom:1px solid var(--rl)}
.ch-run-track{display:flex;align-items:center;gap:.5em;width:max-content;white-space:nowrap;font:900 clamp(40px,6.4vw,104px)/1 var(--d);text-transform:none;letter-spacing:-.045em}
.ch-run-track i{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--u);flex:none}
@media(prefers-reduced-motion:no-preference){.ch-run-track{}}
.ch-run-note{display:flex;align-items:center;gap:12px;padding:22px var(--m) 26px;font:600 18px/1.4 var(--s);text-decoration:none}
.ch-run-note img{flex:none}
.ch-run-note:hover{color:var(--u)}

/* 3. notes at the counter */
.ch-notes{background:#fff;padding:clamp(64px,10vw,130px) var(--m)!important}
.ch-slips{list-style:none;margin:44px 0 48px;padding:0;display:flex;flex-wrap:wrap;gap:30px 26px;max-width:1180px}
.ch-slips li{position:relative;padding:22px 24px 20px;background:#fff;border:1px solid var(--rl);box-shadow:none;font:800 clamp(18px,1.7vw,23px)/1.25 var(--s);letter-spacing:-.01em}
.ch-slips li::before{content:"";position:absolute;top:-9px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--y);border:1px solid var(--rl)}
.ch-slips li:nth-child(1){transform:rotate(-2deg)}.ch-slips li:nth-child(2){transform:rotate(1.4deg) translateY(10px)}.ch-slips li:nth-child(3){transform:rotate(-.8deg)}
.ch-slips li:nth-child(4){transform:rotate(2deg) translateY(-6px)}.ch-slips li:nth-child(5){transform:rotate(-1.3deg) translateY(8px)}.ch-slips li:nth-child(6){transform:rotate(1deg)}
.ch-reply{margin:0;max-width:52ch;font-size:20px;font-weight:600}

/* 4. statements on colour fields */
.ch-field{min-height:62svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:24px;padding:clamp(40px,6vh,72px) var(--m) clamp(24px,4vh,44px)}
.ch-field p{grid-column:8/span 4;grid-row:1;margin:0;font-size:19px;line-height:1.5;font-weight:600;max-width:32ch}
.ch-big{grid-column:1/-1;grid-row:2;align-self:end;margin:0;font:900 clamp(56px,10.4vw,176px)/.86 var(--d);text-transform:none;letter-spacing:-.05em}
.ch-mirror p{grid-column:2/span 4}
.ch-mirror .ch-big{text-align:right}
.f-navy{background:var(--k);color:#fff}.f-navy .ch-big{color:var(--y)}
.f-violet{background:var(--u);color:#fff}
.f-white{background:#fff;color:var(--k)}.f-white .ch-big{color:var(--u)}
.f-lime{background:var(--y);color:var(--k)}

/* 5. the founder: inset panel, coin-shaped portrait */
.ch-about{background:#fff;padding:20px!important}
.ch-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;min-height:100svh;padding:clamp(32px,4vw,56px);background:var(--k);color:#fff;overflow:hidden}
.ch-panel-l{position:relative;min-height:520px}
.ch-state{margin:0;font:900 clamp(36px,4.4vw,68px)/.94 var(--d);text-transform:none;letter-spacing:-.04em;max-width:11ch}
.ch-coin{position:absolute;left:0;bottom:calc(-1 * clamp(32px,4vw,56px) - 7vw);margin:0;width:min(38vw,560px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:10px solid var(--y)}
.ch-coin img{width:100%;height:100%;object-fit:cover;display:block}
.ch-panel-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-content:start;padding-top:8px}
.ch-block h3{margin:0 0 12px;font:800 22px/1.2 var(--s);text-transform:none;letter-spacing:-.01em;color:var(--y)}
.ch-block p{margin:0 0 18px;font-size:16px;line-height:1.55}
.ch-ledger{margin:0 0 18px}
.ch-ledger div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-top:2px solid rgba(255,255,255,.18)}
.ch-ledger dt{font-size:14.5px;line-height:1.35}
.ch-ledger dd{margin:0;font:900 22px/1 var(--d);color:var(--y);white-space:nowrap;font-variant-numeric:tabular-nums}
.ch-perks{list-style:none;margin:0 0 16px;padding:0}
.ch-perks li{position:relative;padding:7px 0 7px 22px;font-size:16px;line-height:1.4}
.ch-perks li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;background:var(--y)}
.ch-guar{font-weight:700}
.ch-btn-a{margin-top:6px}
.ch-panel .ch-link:hover{color:var(--y)}

/* 6. the review, on lime */
.ch-review{background:var(--y);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:clamp(32px,5vw,80px);align-items:center;min-height:90svh;padding:clamp(64px,9vw,120px) var(--m)!important}
.ch-times{list-style:none;margin:36px 0 0;padding:0;max-width:560px}
.ch-times li{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--rl)}
.ch-times b{font:900 17px/1.3 var(--d);text-transform:none;letter-spacing:-.02em}
.ch-paper{display:block;padding:32px 32px 26px;background:#fff;color:var(--k);border:1px solid var(--rl);box-shadow:none;text-decoration:none;transform:rotate(1.4deg);transition:transform .4s var(--ease)}
.ch-paper:hover{transform:rotate(0) translateY(-4px)}
.ch-paper-top{display:flex;justify-content:space-between;font:700 13px/1 var(--s);color:#47506e;margin-bottom:16px}
.ch-paper-h{display:block;font:900 clamp(22px,2vw,28px)/1.08 var(--d);text-transform:none;letter-spacing:-.035em}
.ch-paper-for{display:block;margin:10px 0 20px;font-size:15px;color:#3a4361}
.ch-tally{display:grid;grid-template-columns:repeat(50,minmax(0,1fr));gap:3px 2px;padding:14px 0 8px;border-top:1px solid var(--rl)}
.ch-tally i{display:block;height:22px;box-shadow:inset 0 0 0 1.5px rgba(11,21,51,.28)}
.ch-tally i.on{background:var(--u);box-shadow:none}
.ch-tally-key{display:flex;justify-content:space-between;gap:12px;font:700 13.5px/1.35 var(--s);margin-bottom:20px}
.ch-paper-list{margin:0 0 20px;padding:0 0 0 22px;font:700 16px/1.35 var(--s)}
.ch-paper-list li{padding:7px 0;border-bottom:2px solid rgba(11,21,51,.12)}
.ch-paper-list em{margin-left:8px;font-style:normal;font-weight:800;font-size:13.5px;color:var(--u)}
.ch-paper-sig{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14.5px}
.ch-paper-sig img{border-radius:50%}
.ch-paper-sig b{color:var(--u);text-decoration:underline;text-underline-offset:3px}

/* 7. the street of signs, on violet */
.ch-street{background:var(--u);color:#fff;padding:clamp(64px,9vw,120px) 0 clamp(56px,8vw,100px)!important;overflow:hidden}
.ch-street-head{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 var(--m)}
.ch-street-head .ch-link:hover{color:var(--y)}
.ch-rail{--gap:18px;margin-top:56px;padding:0 var(--m);display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:44px var(--gap)}
.ch-blade{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:42px;text-decoration:none}
.ch-blade::before{content:"";position:absolute;top:0;left:calc(var(--gap)/-2);right:calc(var(--gap)/-2);height:6px;background:var(--y)}
.ch-blade::after{content:"";position:absolute;top:6px;left:50%;width:2px;height:36px;margin-left:-1px;background:#fff}
.ch-board{width:100%;min-height:156px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 12px 16px;background:#fff;color:var(--k);border:1px solid var(--rl);box-shadow:none;transform-origin:50% -36px;transition:transform .5s var(--ease)}
.ch-blade:hover .ch-board{transform:rotate(-2.5deg)}
.ch-board .lg{width:48px;height:48px;object-fit:cover;border:1px solid var(--rl);display:grid;place-items:center;font:900 22px/1 var(--d);background:#fff}
.ch-board b{font:900 16px/1.1 var(--d);text-transform:none;letter-spacing:-.03em;overflow-wrap:break-word;max-width:100%}
.ch-board .ln{font-size:14px;line-height:1.35}
.ch-board .by{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#3a4361}
.ch-board .by img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.ch-blade.lit .ch-board{background:var(--y)}
.ch-blade.lit .by{color:var(--k)}
.ch-feat{position:absolute;top:28px;padding:5px 10px;background:var(--k);color:var(--y);font:800 12px/1 var(--s);z-index:1}
.ch-yours .ch-board{background:transparent;color:#fff;border:3px dashed #fff;box-shadow:none;justify-content:center}
.ch-yours:hover .ch-board{border-color:var(--y);color:var(--y)}
.ch-street-note{margin:48px 0 0;padding:0 var(--m);max-width:calc(70ch + 2 * var(--m));font-size:16px;font-weight:600}

/* 8. what people said: name block, quote block, then the visitors' book */
.ch-said{background:#fff}
.ch-split{display:grid;grid-template-columns:5fr 7fr;min-height:66svh}
.ch-who{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:32px var(--m);background:var(--k);color:#fff}
.ch-who img{width:56px;height:56px;border-radius:50%;margin-bottom:10px}
.ch-who b{font:700 20px/1.2 var(--s)}
.ch-who span{font-size:16px;color:rgba(255,255,255,.82)}
.ch-quote{display:block;padding:48px var(--m) 48px 64px;background:var(--y);color:var(--k);text-decoration:none}
.ch-quote q{display:block;max-width:22ch;font:900 clamp(28px,3.2vw,48px)/1.08 var(--d);text-transform:none;letter-spacing:-.04em;quotes:"\201C" "\201D";text-indent:-.5em}
.ch-quote:hover q{color:var(--u)}
.ch-book{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rl)}
.ch-entry{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:32px var(--m) 28px;border-right:1px solid var(--rl);text-decoration:none;transition:background-color .15s}
.ch-entry:last-child{border-right:0}
.ch-entry:hover{background:#f4f5ff}
.ch-entry p{margin:0;font-size:17px;line-height:1.45;font-weight:600}
.ch-entry span{display:flex;align-items:center;gap:10px;font-size:15px}
.ch-entry img{border-radius:50%}
.ch-said-note{margin:0;padding:22px var(--m) 30px;font-size:16px}
.ch-said-note a{text-decoration:underline;text-underline-offset:4px}

/* 9. the playbooks as one paragraph, on navy */
.ch-work{background:var(--k);color:#fff;padding:clamp(72px,10vw,140px) var(--m)!important}
.ch-para{margin:0;font:900 clamp(32px,4.6vw,76px)/1.08 var(--d);text-transform:none;letter-spacing:-.045em;max-width:22ch}
.ch-para-h{color:#fff}
.ch-para a{color:rgba(255,255,255,.66);text-decoration:none;transition:color .2s}
.ch-para a.free{color:var(--y)}
.ch-para a:hover{color:#fff;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}
.ch-work-note{margin:36px 0 0;font-size:17px;font-weight:600}
.ch-work-note .ch-link{margin-left:8px}
.ch-work-note .ch-link:hover{color:var(--y)}

/* 10. questions, a band each */
.ch-faq{background:#fff}
.ch-faq-h{display:flex;align-items:flex-end;min-height:36svh;margin:0;padding:24px var(--m) 28px;background:var(--y);font:900 clamp(56px,8vw,140px)/.9 var(--d);text-transform:none;letter-spacing:-.05em}
.ch-q{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:52px var(--m)}
.ch-q:nth-of-type(even){background:var(--u);color:#fff}
.ch-q h3{grid-column:1/span 5;margin:0;font:800 clamp(22px,2vw,30px)/1.2 var(--s);text-transform:none;letter-spacing:-.02em}
.ch-q>div{grid-column:7/-1}
.ch-q p{margin:0 0 12px;font-size:18px;line-height:1.55;max-width:60ch}

/* 11. the close: the hero inverted, lime ground and navy ink */
.ch #join-block{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:90svh;padding:clamp(64px,9vw,120px) var(--m) 40px;background:var(--y);color:var(--k);border-top:1px solid var(--rl)}
.ch-close-h{margin:0;font:900 clamp(64px,11vw,190px)/.86 var(--d);text-transform:none;letter-spacing:-.05em}
.ch-close-h span{display:block}
.ch-close-h span+span{color:var(--u)}
.ch-close-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);justify-content:space-between;gap:32px;align-items:end}
.ch-close-row p{margin:0;font-size:20px;font-weight:600;max-width:40ch}
.ch-close-row p a{display:block;margin-top:10px;font-size:16px;text-decoration:underline;text-underline-offset:4px}
.ch #join-block .ch-form input[type=email]{border-color:var(--k)}
.ch #join-block .ch-btn{background:var(--k);color:var(--y)}
.ch #join-block .ch-btn:hover{background:var(--u);color:#fff}
.ch #join-block .err{color:var(--u)}
.ch-close-row .ch-form{justify-self:end;width:min(100%,520px)}

/* phones and tablets */
@media(max-width:960px){
  .ch-panel{grid-template-columns:1fr;min-height:0}
  .ch-panel-l{min-height:0;display:flex;flex-direction:column;gap:28px}
  .ch-coin{position:relative;bottom:auto;width:min(70vw,360px)}
  .ch-panel-r{grid-template-columns:1fr 1fr}
  .ch-review{grid-template-columns:1fr}
  .ch-book{grid-template-columns:1fr 1fr}
  .ch-entry:nth-child(2){border-right:0}
  .ch-entry:nth-child(-n+2){border-bottom:1px solid var(--rl)}
  .ch-q h3{grid-column:1/-1;margin-bottom:14px}
  .ch-q>div{grid-column:1/-1}
}
@media(max-width:640px){
  .ch-hero{min-height:calc(100svh - 60px);padding-bottom:28px}
  .ch-name{margin-top:190px;font-size:clamp(44px,15vw,80px)}
  .ch-sign{top:40px;width:180px;height:94px;left:var(--m);right:auto}
  .ch-hang{left:calc(var(--m) + 89px);right:auto}
  .ch-face b{font-size:28px}
  .ch-act{justify-self:stretch}
  .ch .ch-form{flex-direction:column;gap:10px}
  .ch .ch-form input[type=email]{border-right:2px solid #fff;flex:none}
  .ch #join-block .ch-form input[type=email]{border-right:1px solid var(--rl)}
  .ch-field{min-height:56svh;grid-template-columns:1fr}
  .ch-field p,.ch-mirror p{grid-column:1}
  .ch-mirror .ch-big{text-align:left}
  .ch-big{font-size:clamp(48px,14vw,90px)}
  .ch-panel{padding:28px 20px}
  .ch-about{padding:10px!important}
  .ch-panel-r{grid-template-columns:1fr;gap:36px}
  .ch-split{grid-template-columns:1fr}
  .ch-quote{order:-1;padding:40px var(--m)}
  .ch-who{padding:24px var(--m)}
  .ch-book{grid-template-columns:1fr}
  .ch-entry{border-right:0;border-bottom:1px solid var(--rl)}
  .ch-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-tally{grid-template-columns:repeat(25,minmax(0,1fr))}
  .ch-paper{padding:24px 18px 20px;transform:none;box-shadow:none}
  .ch-times li{grid-template-columns:1fr;gap:4px}
  .ch-close-row{grid-template-columns:1fr}
  .ch-close-h{font-size:clamp(56px,17vw,100px)}
  .ch-slips li{font-size:18px}
}
/* chapters: gate fixes, round 1 */
.hp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ch .ch-btn{color:var(--k)}
.ch .ch-btn:hover{color:var(--k)}
.ch-slips li{box-shadow:none;border-width:3px}
.ch-board{box-shadow:none}
.ch-feat{font-size:13px}
.ch-state{max-width:12ch}
.ch-review .ch-h{font-size:clamp(40px,5.4vw,88px);max-width:12ch}
.ch-paper-h{font-size:clamp(24px,2.3vw,32px)}
.ch-paper-for{margin:10px 0 20px;font-size:15px;line-height:1.45}
.ch-quote blockquote{margin:0;max-width:26ch;font:900 clamp(24px,2.5vw,36px)/1.12 var(--d);text-transform:none;letter-spacing:-.035em;text-indent:-.5em}
.ch-quote:hover blockquote{color:var(--u)}
.ch #join-block .ch-close-h{font:900 clamp(64px,11vw,190px)/.86 var(--d);margin:0;text-transform:none;letter-spacing:-.05em;color:var(--k)}
.ch #join-block .ch-close-h span+span{color:var(--u)}
.ch-built{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 18px}
.ch-built a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;text-decoration:none}
.ch-built a:hover{color:var(--y)}
.ch-built img{border:2px solid rgba(255,255,255,.25)}
.ch-partners{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 16px;text-decoration:none}
.ch-partners img{width:40px;height:40px;object-fit:contain;background:#fff;border:2px solid #fff}
.ch-partners span{margin-left:6px;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.ch-partners:hover span{color:var(--y)}
.ch-coin img{object-position:30% 30%}
/* playbooks: a list of titles beside a page from the free one */
.ch-work{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,72px);align-items:center}
.ch-work .ch-h{color:#fff}
.ch-pbs{list-style:none;margin:36px 0 0;padding:0}
.ch-pbs a{display:flex;flex-direction:column;gap:8px;padding:22px 0;border-top:3px solid rgba(255,255,255,.2);text-decoration:none}
.ch-pbs li:last-child a{border-bottom:3px solid rgba(255,255,255,.2)}
.ch-pbs .t{font:900 clamp(22px,2.2vw,32px)/1.08 var(--d);text-transform:none;letter-spacing:-.035em;transition:color .2s}
.ch-pbs .m{font-size:15px;font-weight:700;color:rgba(255,255,255,.8)}
.ch-pbs a.free .m{color:var(--y)}
.ch-pbs a:hover .t{color:var(--y)}
.ch-fig{margin:0}
.ch-fig img{display:block;width:100%;height:auto;border:3px solid #fff}
.ch-fig figcaption{margin-top:12px;font-size:15px;color:rgba(255,255,255,.85)}
.ch-work-note{grid-column:1/-1;margin:0}
@media(max-width:960px){.ch-work{grid-template-columns:1fr}}
/* chapters: gate fixes, round 2 */
.ch-review .ch-h{max-width:14ch}
.ch-field.has-fig{min-height:0;row-gap:clamp(32px,5vh,56px)}
.ch-field.has-fig p{grid-column:1/span 4;align-self:start}
.ch-ffig{grid-column:6/-1;grid-row:1;margin:0}
.ch-ffig img{display:block;width:100%;height:auto;border:1px solid var(--rl)}
.ch-mirror.has-fig p{grid-column:9/-1;grid-row:1}
.ch-mirror.has-fig .ch-ffig{grid-column:1/span 7}
.ch-reply-row{display:flex;align-items:center;gap:28px}
.ch-reply-row img{width:180px;height:180px;flex:none;object-fit:cover;border:1px solid var(--rl)}
@media(max-width:960px){
  .ch-field.has-fig p,.ch-mirror.has-fig p{grid-column:1/-1}
  .ch-ffig,.ch-mirror.has-fig .ch-ffig{grid-column:1/-1;grid-row:2}
  .ch-field.has-fig .ch-big{grid-row:3}
}
@media(max-width:640px){
  .ch-hero{grid-template-rows:auto auto;align-content:start;row-gap:24px}
  .ch-name{margin-top:150px}
  .ch-sign{top:32px;width:170px;height:88px}
  .ch-hang{left:calc(var(--m) + 84px);height:32px}
  .ch-hang::before{top:26px}
  .ch-act>p:first-child{font-size:18px}
  .ch-quote blockquote{font-size:22px}
  .ch-reply-row{flex-direction:column;align-items:flex-start}
  .ch-reply-row img{width:140px;height:140px}
}
.ch-review .ch-h{max-width:none;font-size:clamp(36px,4.4vw,72px)}
.ch-bill{color:#fff}
.ch #join-block .ch-close-h{font-size:clamp(64px,11vw,190px)!important}
@media(max-width:640px){.ch #join-block .ch-close-h{font-size:clamp(56px,17vw,100px)!important}}
.ch-board b{font-size:14px;letter-spacing:-.045em;overflow-wrap:normal;word-break:normal}
.ch .ch-hero{padding:0 var(--m) 40px}
@media(max-width:640px){.ch .ch-hero{padding-bottom:28px}}
/* hero: say what it is in 3 seconds */
.ch-pre{display:block;overflow:hidden;font-size:clamp(26px,3.6vw,60px);line-height:1.05;color:rgba(255,255,255,.62);letter-spacing:-.035em;margin-bottom:.12em}
.ch-pre>span{display:inline-block}
@media(prefers-reduced-motion:no-preference){.ch-pre>span{animation:ch-rise .9s var(--ease) both}}
.ch-name{margin-top:clamp(64px,11vh,130px)}
.ch-act{width:min(100%,540px)}
.ch .ch-act .ch-what{margin:0;font:800 clamp(22px,1.9vw,28px)/1.2 var(--s);letter-spacing:-.015em;color:#fff}
.ch .ch-act .ch-how{margin:0;font-size:17px;line-height:1.5;color:#fff}
@media(max-width:640px){.ch-name{margin-top:140px}.ch-pre{font-size:24px}}
/* hero: the explainer and the form sit right under the headline, left-aligned, inside the first screen */
.ch .ch-hero{grid-template-rows:auto auto;align-content:start;row-gap:clamp(24px,3.4vh,40px)}
.ch-name{margin-top:clamp(56px,9vh,110px)}
.ch-act{justify-self:start}

/* ===== chapters, critique round 1 fixes (Impeccable critique + taste rubric, 14 Oct) ===== */
/* one grid: every section's content starts where the nav's content starts */
.ch{--m:max(clamp(16px,3.2vw,44px),calc((100% - 1280px) / 2 + var(--pad)))}
/* hero: violet, headline + one line + form on the left, the big sign on the right */
.ch .ch-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;align-items:center;column-gap:clamp(24px,4vw,64px);min-height:auto;padding:clamp(40px,7vh,84px) var(--m) clamp(40px,7vh,72px);background:var(--u)}
.ch-hero-l{display:flex;flex-direction:column;gap:clamp(20px,3vh,32px);min-width:0}
.ch-name{margin:0!important;font-size:clamp(52px,9.2vw,150px)}
.ch-pre{font-size:clamp(24px,3vw,48px)}
.ch-act{justify-self:auto;width:min(100%,600px)}
.ch .ch-act .ch-what{font-size:clamp(20px,1.7vw,24px);line-height:1.3}
.ch-bill{font-size:14.5px}
.ch-door{position:relative;display:flex;flex-direction:column;align-items:center;align-self:start;margin-top:clamp(8px,4vh,40px)}
.ch-door .ch-hang{position:relative;top:auto;right:auto;left:auto;width:3px;height:56px}
.ch-door .ch-hang::before{top:48px;left:-6px;width:15px;height:15px}
.ch-door .ch-sign{position:relative;top:auto;right:auto;left:auto;width:clamp(240px,24vw,340px);height:clamp(124px,12vw,170px);margin-top:4px;animation:none}
.ch-door .ch-face b{font-size:clamp(40px,3.8vw,58px)}
.ch-door .ch-face span{font-size:clamp(14px,1.1vw,16px);text-align:center;padding:0 10px}
.ch-door .ch-face{border-width:4px}
.ch-door .ch-face{transition:transform .7s cubic-bezier(.23,1,.32,1)}
@media(prefers-reduced-motion:no-preference) and (hover:hover){.ch-door .ch-sign{transition:transform .4s cubic-bezier(.23,1,.32,1);transform-origin:50% -56px}.ch-door .ch-sign:hover{transform:rotate(-2.5deg)}}
@media(max-width:900px){
  .ch .ch-hero{grid-template-columns:1fr;row-gap:20px;padding-top:24px}
  .ch-door{order:-1;align-self:end;margin:0}
  .ch-door .ch-hang{height:22px}.ch-door .ch-hang::before{top:16px}
  .ch-door .ch-sign{width:170px;height:86px}
  .ch-door .ch-face b{font-size:28px}.ch-door .ch-face span{font-size:12.5px}
  .ch-name{font-size:clamp(48px,14vw,90px)}
}
/* the business half: one compact 2x2 counter, a readable artefact in each block */
.ch-fields{background:#fff;padding:clamp(64px,8vw,110px) var(--m)!important}
.ch-fields-h{margin-bottom:32px}
.ch-grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--rl)}
.ch-block4{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,40px);min-height:300px}
.ch-block4:nth-child(1){border-right:1px solid var(--rl);border-bottom:1px solid var(--rl)}
.ch-block4:nth-child(2){border-bottom:1px solid var(--rl)}
.ch-block4:nth-child(3){border-right:1px solid var(--rl)}
.ch-block4 .ch-big{font-size:clamp(40px,5vw,84px);text-align:left!important;margin:0}
.ch-block4 p{margin:0;font-size:18px;font-weight:600;max-width:38ch}
.ch-passes{counter-reset:p;list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ch-passes li{counter-increment:p;padding:7px 11px;border:2px solid rgba(255,255,255,.4);font:700 14.5px/1 var(--s)}
.ch-passes li::before{content:counter(p) " ";color:var(--y)}
.ch-checks{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ch-checks li{display:flex;align-items:center;gap:10px;font:700 17px/1.3 var(--s)}
.ch-checks li::before{content:"";width:18px;height:18px;flex:none;background:var(--y);box-shadow:inset 0 0 0 2px var(--k)}
.ch-ten{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-top:auto}
.ch-ten i{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--rl);font:900 12px/1 var(--d);font-style:normal;text-transform:none}
.ch-ten i.yes{background:var(--y)}
.ch-flow{list-style:none;margin:auto 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:f}
.ch-flow li{counter-increment:f;padding:10px;border:1px solid var(--rl);background:#fff;font:700 14px/1.25 var(--s)}
.ch-flow li::before{content:counter(f);display:block;font:900 18px/1 var(--d);color:var(--u);margin-bottom:6px}
.ch-ffig{display:none}
@media(max-width:820px){.ch-grid4{grid-template-columns:1fr}.ch-block4{border-right:0!important;border-bottom:1px solid var(--rl)!important;min-height:0}.ch-block4:last-child{border-bottom:0!important}.ch-flow{grid-template-columns:1fr 1fr}.ch-block4 .ch-big{font-size:clamp(40px,12vw,64px)}}
/* founder panel: full-bleed like every other chapter, portrait cropped on the face */
.ch-about{padding:0!important}
.ch-panel{min-height:0;padding:clamp(56px,7vw,96px) var(--m)}
.ch-coin{position:relative;bottom:auto;width:min(28vw,380px);margin-top:28px}
.ch-coin img{object-position:24% 18%}
.ch-panel-l{min-height:0}
/* the one quote: a full-width lime band */
.ch-said{background:var(--y)}
.ch-quote{display:flex;flex-direction:column;gap:20px;padding:clamp(56px,7vw,96px) var(--m);background:var(--y)}
.ch-quote blockquote{max-width:24ch;font-size:clamp(28px,3.6vw,56px);line-height:1.04}
.ch-qby{display:flex;align-items:center;gap:12px;font:600 16px/1.3 var(--s)}
.ch-qby img{border-radius:50%;border:1px solid var(--rl)}
/* small fixes */
.ch-street-note{max-width:calc(62ch + 2 * var(--m))}
.ch-slips li{line-height:1.32}
.ch-block4 .ch-big{align-self:flex-start;grid-column:auto;grid-row:auto}
/* ===== chapters, critique round 2 fixes ===== */
/* closing form: the field keeps its width; the section is as tall as its content */
.ch #join-block{min-height:0;gap:clamp(32px,5vw,56px);padding:clamp(64px,8vw,110px) var(--m) clamp(56px,7vw,90px)}
.ch #join-block .ch-form{display:flex;flex-wrap:nowrap;max-width:none}
.ch #join-block .ch-form input[type=email]{flex:1 1 auto;width:auto;min-width:0;max-width:none}
.ch #join-block .ch-form .ch-btn{flex:none}
.ch-close-row{grid-template-columns:minmax(0,1fr) minmax(0,560px)}
.ch-close-row .ch-form{width:100%}
@media(max-width:900px){.ch-close-row{grid-template-columns:1fr}.ch #join-block .ch-form{flex-direction:column}.ch #join-block .ch-form input[type=email]{flex:none;width:100%;border-right:1px solid var(--rl)}}
/* headlines stay on two lines */
.ch-fields-h{max-width:none;font-size:clamp(34px,4.6vw,76px)}
.ch-state{max-width:none;font-size:clamp(30px,3.2vw,50px)}
.ch-review .ch-h{font-size:clamp(30px,3.4vw,54px)}
/* the quote is a statement, not a headline */
.ch-quote blockquote{font-size:clamp(22px,2.5vw,36px);line-height:1.15;max-width:30ch}
.ch-qby{flex-wrap:wrap}
/* readable small text */
.ch-pre{color:rgba(255,255,255,.74)}
body:has(.ch) .dock small{font-size:13.5px}
@media(max-width:700px){.ch-fig{display:none}.ch-block4{padding-top:32px}}
/* ===== chapters, critique round 2 fixes (structure) ===== */
/* the strongest proof as one confident line */
.ch-run-note{gap:16px;padding:22px var(--m);font-size:16px}
.ch-run-note img{width:34px;height:34px}
.ch-run-note b{display:block;font:900 clamp(17px,1.5vw,21px)/1.2 var(--d);letter-spacing:-.025em;text-transform:none;margin-bottom:3px}
/* membership as its own band, with its own Join and the full offer line */
.ch-member{background:var(--u);color:#fff;padding:clamp(56px,7vw,96px) var(--m)!important}
.ch-member .ch-h{color:#fff;margin-bottom:28px;max-width:none}
.ch-member .ch-h span{color:var(--y)}
.ch-member-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.ch-member .ch-perks{columns:2;column-gap:32px;margin:0}
.ch-member .ch-perks li{break-inside:avoid;font-size:17px;font-weight:600;color:#fff}
.ch-member-act{display:flex;flex-direction:column;gap:12px}
.ch-member-act .ch-btn{align-self:flex-start}
.ch-member-act .ch-bill,.ch-member-act .ch-guar{color:#fff;margin:0;font-size:15.5px}
@media(max-width:820px){.ch-member-grid{grid-template-columns:1fr}.ch-member .ch-perks{columns:1}}
/* founder panel: who I am, one job */
.ch-panel-r{grid-template-columns:1fr}
.ch-panel .ch-block{max-width:520px}
/* artefacts: no numerals, the flow reads with arrows */
.ch-passes li::before{content:none}
.ch-flow{counter-reset:none;gap:22px}
.ch-flow li{position:relative;text-wrap:balance}
.ch-flow li::before{content:none}
.ch-flow li:not(:last-child)::after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);font:900 16px/1 var(--d);color:var(--k)}
.ch-ten i.yes{font-size:10px;letter-spacing:-.02em}
@media(max-width:480px){.ch-ten{gap:4px}.ch-ten i.yes{font-size:8.5px}.ch-flow{grid-template-columns:1fr 1fr;gap:22px 26px}.ch-flow li:nth-child(2)::after{content:none}}
.ch-block4 .ch-big,.ch-big{white-space:nowrap}
/* headlines on phones */
@media(max-width:640px){.ch #join-block .ch-close-h{font-size:clamp(44px,14vw,80px)!important}.ch-block4 .ch-big{font-size:clamp(36px,11vw,56px)}}
/* "Sound familiar?": the notes use the full width, no dead space below */
.ch-slips{max-width:none}
.ch-notes{padding-bottom:clamp(56px,7vw,96px)!important}
/* "How I did it": heading, then the three titles across, then the line */
.ch-work{display:block}
.ch-work .ch-pbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-top:32px}
.ch-work .ch-pbs a{height:100%;border-bottom:3px solid rgba(255,255,255,.2)}
.ch-work-note{margin-top:28px}
@media(max-width:820px){.ch-work .ch-pbs{grid-template-columns:1fr}}
/* the sign hangs from a nail */
.ch-door .ch-hang::after{content:"";position:absolute;top:-6px;left:-5px;width:13px;height:13px;border-radius:50%;background:var(--k);box-shadow:inset 0 0 0 3px #fff}
/* the dock steps aside while a Join is already on screen */
.dock.dock-off{transform:translateY(110%)!important}
body:has(.ch) .dock small{font-size:13px;line-height:1.3}
/* round 3: no sideways scroll from the tilted paper; the yes box is readable; the half heading fits a phone */
.ch section{overflow-x:clip}
.ch-ten{grid-template-columns:repeat(9,minmax(0,1fr)) minmax(0,1.8fr)}
.ch-ten i{aspect-ratio:auto;height:34px}
.ch-ten i.yes{font-size:13px!important;letter-spacing:0}
@media(max-width:640px){.ch-fields-h{font-size:clamp(28px,8vw,40px)}}
/* round 3 design fixes */
.ch-member{background:var(--k)}
.ch-faq-h{background:#fff;min-height:0;padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--rl)}
.ch-work .ch-pbs .t{font-size:clamp(19px,1.7vw,24px)}
.ch-door .ch-sign{width:clamp(250px,25vw,380px);height:clamp(128px,12.5vw,190px)}
@media(max-width:820px){.ch-flow{grid-template-columns:1fr 1fr;gap:22px 26px}.ch-flow li:nth-child(2)::after{content:none}}
/* six parts of bootstrapping: one 3x2 counter, navy hairlines between the blocks */
.ch-grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;background:var(--k);border:1px solid var(--rl)}
.ch-grid6 .ch-block4{border:0!important;min-height:330px}
.ch-grid6 .ch-block4 .ch-big{font-size:clamp(34px,3.6vw,60px)}
.ch-grid6 .ch-block4 p{font-size:17px}
.f-white .ch-passes li{border-color:var(--k)}
.f-white .ch-passes li::before{content:none}
.f-lime .ch-ten i.yes{background:var(--k);color:var(--y)}
.ch-fund{margin-top:auto!important;padding-top:14px;border-top:2px solid rgba(255,255,255,.25);font-weight:600!important}
.ch-fund b{display:block;font:900 clamp(32px,3vw,46px)/1 var(--d);color:var(--y);margin-bottom:6px}
.f-navy .ch-checks li::before{box-shadow:inset 0 0 0 2px var(--y)}
@media(max-width:1080px){.ch-grid6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.ch-grid6{grid-template-columns:1fr}.ch-grid6 .ch-block4{min-height:0}}
/* six parts: headings wrap inside their block, the flow sits 2x2 */
.ch-grid6 .ch-block4 .ch-big{white-space:normal;font-size:clamp(30px,3vw,50px);line-height:.95}
.ch-grid6 .ch-flow{grid-template-columns:1fr 1fr;gap:20px 26px}
.ch-grid6 .ch-flow li:nth-child(2)::after{content:none}
/* hero headline stays on two lines beside the sign */
.ch-name{font-size:clamp(48px,7.6vw,128px)}
.ch-roi{margin:-12px 0 32px;max-width:62ch;font-size:clamp(17px,1.4vw,20px);font-weight:600;color:#fff}
/* the full journey: eight parts, 4x2, navy hairlines; punchy, one line each */
.ch-grid8{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:var(--k);border:1px solid var(--rl)}
.ch-grid8 .ch-block4{border:0!important;min-height:290px;padding:clamp(20px,2.2vw,30px);gap:12px}
.ch-grid8 .ch-block4 .ch-big{white-space:normal;font-size:clamp(28px,2.5vw,42px);line-height:.95}
.ch-grid8 .ch-block4 p{font-size:16.5px;font-weight:700;max-width:none}
.ch-grid8 .ch-flow{grid-template-columns:1fr 1fr;gap:14px 22px}
.ch-grid8 .ch-flow li{font-size:13px;padding:8px}
.ch-grid8 .ch-flow li:nth-child(2)::after{content:none}
.ch-grid8 .ch-passes li{font-size:13px;padding:6px 9px}
.ch-chips{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ch-chips li{padding:8px 12px;background:var(--k);color:var(--y);font:800 14px/1 var(--s)}
.ch-grid8 .f-lime .ch-ten i.yes{background:var(--k);color:var(--y)}
@media(max-width:1100px){.ch-grid8{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.ch-grid8{grid-template-columns:1fr}.ch-grid8 .ch-block4{min-height:0}}
.ch-chips-line li{background:transparent;color:var(--k);border:1px solid var(--rl)}
.f-navy .ch-chips li,.f-violet .ch-chips li{background:var(--y);color:var(--k)}
.f-lime .ch-checks li::before{background:#fff}
.ch-roi{max-width:66ch}
/* round 4: hero sign under the form on phones; the review card supports, it doesn't lead */
@media(max-width:900px){.ch-door{order:2;align-self:center}}
.ch-review{grid-template-columns:minmax(0,1.3fr) minmax(0,480px)}
.ch-paper{transform:rotate(1deg) scale(.92);transform-origin:top right}
/* the ROI as a ledger, true at the price shown */
.ch-roi-ledger{display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:0;margin:-8px 0 32px;border:1px solid var(--rl)}
.ch-roi-ledger div{padding:14px 16px;border-right:1px solid var(--rl)}
.ch-roi-ledger div:last-child{border-right:0;background:var(--y)}
.ch-roi-ledger dt{font:700 13.5px/1.2 var(--s)}
.ch-roi-ledger dd{margin:6px 0 0;font:900 clamp(20px,2vw,28px)/1 var(--d);letter-spacing:-.03em}
@media(max-width:640px){.ch-roi-ledger{grid-template-columns:1fr}.ch-roi-ledger div{border-right:0;border-bottom:1px solid var(--rl)}}
/* membership on white so it doesn't merge with the navy founder panel */
.ch-member{background:#fff;color:var(--k)}
.ch-member .ch-h{color:var(--k)}
.ch-member .ch-h span{color:var(--u)}
.ch-member .ch-perks li{color:var(--k)}
.ch-member .ch-perks li::before{background:var(--u)}
.ch-member-act .ch-bill,.ch-member-act .ch-guar{color:var(--k)}
.ch-member-act .ch-btn{box-shadow:none}
/* the quote on violet so it doesn't merge with the lime journey */
.ch-said,.ch-quote{background:var(--u)}
.ch-quote,.ch-quote blockquote,.ch-qby{color:#fff}
/* no holes inside the journey blocks */
.ch-grid8 .ch-checks,.ch-grid8 .ch-chips{margin-top:14px}
.ch-grid8 .ch-block4{min-height:0}
.nw{white-space:nowrap}
.ch-roi-ledger{width:fit-content;max-width:100%}

/* ===================================================================================
   HOME: modern community (14 Oct 2026). References studied: builders.mk, Small Bets, WIP, MicroConf Connect.
   Light ground, soft tinted bands, rounded cards, pill buttons and chips, soft shadows, sentence-case headings,
   nothing moving. Brand colours as accents. Scoped to .mc and body:has(.mc).
   =================================================================================== */
.mc{--r:18px;--pad-x:max(20px,calc((100% - 1180px) / 2));--sh:0 1px 2px rgba(11,21,51,.05),0 10px 30px rgba(11,21,51,.07);--line:#e6e8f2;--tv:#f5f4ff;--tl:#fbffe8;--ink:#0b1533;--soft:#4a5370;
  font:500 17px/1.6 var(--s);color:var(--ink);background:#fff}
.mc a{color:inherit}
.mc section{padding:0}
.mc-in{padding:0 var(--pad-x)}
.mc :focus-visible{outline:3px solid var(--u);outline-offset:3px;border-radius:8px}
.mc h1,.mc h2,.mc h3{text-transform:none;letter-spacing:-.03em;font-family:var(--d)}
/* header on this page: light */
body:has(.mc){background:#fff}
body:has(.mc) .top{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);color:var(--k);border-bottom:1px solid #e6e8f2}
body:has(.mc) .top nav a{color:var(--k)}
body:has(.mc) .top nav a:hover{color:var(--u)}
body:has(.mc) .wm{color:var(--k)}
body:has(.mc) .wm .mark{color:var(--u)}
body:has(.mc) .top .btn{background:var(--k);border-color:var(--k);color:var(--y);border-radius:999px;padding:11px 18px}
body:has(.mc) .menu{border-color:var(--k)}
body:has(.mc) .menu i{background:var(--k)}
@media(max-width:1040px){body:has(.mc) .top nav{background:#fff;border-top-color:#e6e8f2}body:has(.mc) .top nav a{border-bottom-color:#eef0f6}}
body:has(.mc) footer{background:#0b1533}
body:has(.mc) .dock{background:#fff;color:var(--k);border-top:1px solid #e6e8f2;box-shadow:0 -8px 24px rgba(11,21,51,.08)}
body:has(.mc) .dock .btn{background:var(--u);border-color:var(--u);color:#fff;border-radius:999px}
body:has(.mc) .dock small{font-size:13px}
/* founding offer bar */
.mc-offer{padding:10px var(--pad-x);background:var(--k);color:#fff;text-align:center;font:600 14px/1.45 var(--s)}
.mc-offer a{color:var(--y);font-weight:800;text-decoration:none;margin-left:6px}
/* buttons, chips, cards */
.mc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--u);color:#fff;font:800 16px/1 var(--s);cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:0 6px 18px rgba(79,70,229,.28);transition:transform .15s var(--ease,cubic-bezier(.23,1,.32,1)),box-shadow .15s}
.mc-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(79,70,229,.32)}
.mc-btn:active{transform:scale(.97)}
.mc-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font:800 12.5px/1 var(--s);letter-spacing:.01em}
.mc-chip-v{background:#ecebff;color:#3b33c4}
.mc-chip-l{background:#f2ffb3;color:#3f4a00}
.mc-pill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--y);color:var(--k);font:800 13px/1 var(--s)}
.mc-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);text-decoration:none}
.mc-link{font:800 15px/1.3 var(--s);color:var(--u)!important;text-decoration:none}
.mc-link:hover{text-decoration:underline;text-underline-offset:4px}
.mc-fine{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--soft)}
.nw{white-space:nowrap}
/* hero */
.mc-hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px)!important;background:#fff}
.mc-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.mc-h1{margin:0;font-weight:900;font-size:clamp(42px,5.4vw,78px);line-height:1.02}
.mc-h1 span{display:block;color:var(--u)}
.mc-lede{margin:20px 0 26px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--soft);max-width:34ch}
.mc .mc-form{display:flex;gap:8px;max-width:520px;margin:0;padding:6px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:var(--sh)}
.mc .mc-form input[type=email]{flex:1;min-width:0;height:52px;padding:0 18px;border:0;border-radius:999px;background:transparent;box-shadow:none;font:600 16px/1 var(--s);color:var(--k)}
.mc .mc-form input:focus{outline:none}
.mc .mc-form:focus-within{border-color:var(--u);box-shadow:0 0 0 4px rgba(79,70,229,.15)}
.mc .mc-form .mc-btn{flex:none}
.mc .err{margin:8px 0 0 18px;color:#b42318;font:700 14px/1.4 var(--s)}
.mc-proof{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:15px;color:var(--soft)}
.mc-proof b{color:var(--k)}
.mc-proof a{color:var(--u);font-weight:700;text-decoration:none}
.mc-faces{display:flex}
.mc-faces img,.mc-faces span{width:36px;height:36px;border-radius:50%;border:2px solid #fff;margin-left:-8px;object-fit:cover;background:#ecebff;display:grid;place-items:center;font:800 14px/1 var(--s);color:var(--u)}
.mc-faces > :first-child{margin-left:0}
/* app preview */
.mc-preview{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 30px 70px rgba(11,21,51,.14);overflow:hidden}
.mc-preview-top{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbff;font:600 12.5px/1 var(--s);color:var(--soft)}
.mc-preview-top i{width:10px;height:10px;border-radius:50%;background:#e1e3ee}
.mc-preview-top span{margin-left:8px}
.mc-preview-band{display:flex;flex-direction:column;gap:10px;margin:14px;padding:20px;border-radius:16px;background:var(--u);color:#fff}
.mc-preview-band .mc-pill{align-self:flex-start}
.mc-preview-band b{font:900 24px/1.1 var(--d);letter-spacing:-.03em}
.mc-preview-band p{margin:0;font-size:15px;line-height:1.45}
.mc-preview-band em{font-style:normal;font-weight:800;color:var(--y)}
.mc-stations{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;position:relative}
.mc-stations::before{content:"";position:absolute;left:6%;right:6%;top:13px;height:3px;background:var(--y);opacity:.8}
.mc-stations li{position:relative;z-index:1;justify-self:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--y);background:var(--u);display:grid;place-items:center;font:900 12px/1 var(--s)}
.mc-stations li.on,.mc-stations li.here{background:var(--y);color:var(--k)}
.mc-stations li.here{box-shadow:0 0 0 4px rgba(228,255,60,.35)}
.mc-preview-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 14px 14px}
.mc-mini{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:14px}
.mc-mini .mc-chip{align-self:flex-start}
.mc-mini b{font-size:15px;line-height:1.3}
.mc-mini small{color:var(--soft);font-size:13px}
.mc-preview-note{margin:0;padding:0 16px 14px;font-size:13px;color:var(--soft)}
/* quotes */
.mc-quotes{padding:8px 0 clamp(48px,6vw,80px)!important}
.mc-quote-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mc-quote{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:20px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .15s,transform .15s}
.mc-quote:hover{border-color:#c9c6ff;transform:translateY(-2px)}
.mc-quote p{margin:0;font-size:16px;font-weight:600;line-height:1.45}
.mc-quote span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--soft)}
.mc-quote img{border-radius:50%}
.mc-quote b{color:var(--k)}
/* sections */
.mc-sec{padding:clamp(64px,8vw,104px) 0!important}
.mc-tint-v{background:var(--tv)}
.mc-tint-l{background:var(--tl)}
.mc-head h2{margin:0;font-weight:800;font-size:clamp(32px,3.6vw,50px);line-height:1.05}
.mc-head h2 span{color:var(--u)}
.mc-head p{margin:12px 0 0;font-size:18px;color:var(--soft);max-width:46ch}
.mc-head .mc-link{display:inline-block;margin-top:16px}
.mc-head-row{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.mc-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
/* the journey: eight numbered cards */
.mc-parts{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.mc-part{display:flex;flex-direction:column;gap:8px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.mc-num{font:900 15px/1 var(--d);color:var(--u)}
.mc-part-l .mc-num{color:#5b6b00}
.mc-part h3{margin:0;font-weight:800;font-size:21px;line-height:1.15}
.mc-part p{margin:0;font-size:15px;line-height:1.5;color:var(--soft)}
.mc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.mc-chips i{font-style:normal;padding:4px 10px;border-radius:999px;background:#f2f3f8;font:700 12.5px/1.2 var(--s);color:var(--k)}
.mc-part-v .mc-chips i{background:#ecebff;color:#3b33c4}
.mc-part-l .mc-chips i{background:#f2ffb3;color:#3f4a00}
/* stuck notes */
.mc-notes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.mc-notes li{padding:12px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh);font-size:16px;font-weight:700}
/* founder proof */
.mc-founder{padding:28px}
.mc-founder-top{display:flex;align-items:center;gap:14px}
.mc-founder-top img{border-radius:50%;object-fit:cover}
.mc-founder-top b{display:block;font-size:17px}
.mc-founder-top small{color:var(--soft);font-size:14px}
.mc-founder p{margin:18px 0;font-size:18px;line-height:1.55;font-weight:600}
.mc-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.mc-metrics div{padding:14px;border-radius:14px;background:var(--tv)}
.mc-metrics dt{font-size:13px;color:var(--soft);line-height:1.3}
.mc-metrics dd{margin:6px 0 0;font:900 26px/1 var(--d);letter-spacing:-.03em;color:var(--k)}
/* playbooks */
.mc-pbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mc-pbs a{display:flex;flex-direction:column;gap:10px;height:100%;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh);text-decoration:none;transition:transform .15s}
.mc-pbs a:hover{transform:translateY(-2px)}
.mc-pbs .t{font:800 20px/1.2 var(--d);letter-spacing:-.025em}
.mc-pbs .m{align-self:flex-start;padding:4px 10px;border-radius:999px;background:#f2f3f8;font:800 12.5px/1.2 var(--s)}
.mc-pbs a.free .m{background:#f2ffb3;color:#3f4a00}
/* makers wall */
.mc-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.mc-maker{display:flex;flex-direction:column;gap:8px;padding:18px;min-height:150px}
.mc-maker .lg{width:44px;height:44px;border-radius:12px;object-fit:cover;background:#ecebff;display:grid;place-items:center;font:900 18px/1 var(--d);color:var(--u)}
.mc-maker b{font-size:16px;line-height:1.25}
.mc-maker small{color:var(--soft);font-size:13.5px;line-height:1.4}
.mc-maker .by{display:flex;align-items:center;gap:6px;margin-top:auto;font-size:13px;font-weight:600;color:var(--soft)}
.mc-maker .by img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.mc-maker .feat{align-self:flex-start}
.mc-maker-you{border-style:dashed;justify-content:center;box-shadow:none;background:transparent}
.mc-live{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:22px}
.mc-live .mc-chip{align-self:flex-start}
.mc-live b{font:800 21px/1.2 var(--d);letter-spacing:-.025em}
.mc-live p{margin:0;color:var(--soft);font-size:15.5px}
/* example review */
.mc-example{display:flex;flex-direction:column;gap:10px;padding:24px}
.mc-example .mc-chip{align-self:flex-start}
.mc-example b{font:800 21px/1.2 var(--d);letter-spacing:-.025em}
.mc-example ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-weight:600}
.mc-example small{color:var(--soft);font-size:13.5px}
/* membership */
.mc-ledger{display:grid;grid-template-columns:repeat(3,auto);gap:10px;margin:22px 0 0;justify-content:start}
.mc-ledger div{padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.mc-ledger div:last-child{background:var(--y);border-color:var(--y)}
.mc-ledger dt{font-size:13px;color:var(--soft)}
.mc-ledger div:last-child dt{color:var(--k)}
.mc-ledger dd{margin:4px 0 0;font:900 22px/1 var(--d);letter-spacing:-.03em}
.mc-plan{padding:28px;display:flex;flex-direction:column;gap:16px}
.mc-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mc-ticks li{position:relative;padding-left:30px;font-weight:600}
.mc-ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:#ecebff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='3.2'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.mc-plan .mc-btn{align-self:flex-start}
/* FAQ (the build inserts it), as a clean list */
.mc .ch-faq{padding:clamp(64px,8vw,104px) var(--pad-x)!important;background:#fff}
.mc .ch-faq-h{display:block;min-height:0;margin:0 0 20px;padding:0;background:none;border:0;font:800 clamp(32px,3.6vw,50px)/1.05 var(--d)!important;letter-spacing:-.03em;text-transform:none;color:var(--k)}
.mc .ch-q{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;padding:22px 0;border-top:1px solid var(--line);background:none!important;color:var(--k)!important}
.mc .ch-q h3{margin:0;font:800 18px/1.35 var(--s);letter-spacing:-.01em}
.mc .ch-q p{margin:0 0 8px;color:var(--soft);font-size:16.5px}
/* close */
.mc #join-block{padding:clamp(64px,8vw,104px) 0!important;background:var(--tv);color:var(--k);border:0}
.mc-close{display:flex;flex-direction:column;align-items:center;text-align:center}
.mc #join-block h2{margin:0;font:900 clamp(40px,5vw,72px)/1 var(--d)!important;letter-spacing:-.035em;color:var(--k)}
.mc-close>p:not(.mc-fine){margin:14px 0 24px;font-size:18px;color:var(--soft)}
.mc-close .mc-form{width:100%}
/* small screens */
@media(max-width:980px){.mc-hero-grid,.mc-split{grid-template-columns:1fr}.mc-parts{grid-template-columns:repeat(2,minmax(0,1fr))}.mc-pbs,.mc-quote-row{grid-template-columns:1fr}.mc .ch-q{grid-template-columns:1fr;gap:8px}}
@media(max-width:560px){.mc-parts{grid-template-columns:1fr}.mc .mc-form{flex-direction:column;border-radius:20px}.mc .mc-form .mc-btn{width:100%}.mc-metrics,.mc-ledger{grid-template-columns:1fr}.mc-preview-row{grid-template-columns:1fr}.mc-offer{font-size:13px}}
.mc-h1{font-size:clamp(40px,4.3vw,64px)}
.mc .feat,.mc .mc-chip{box-shadow:none;border:0}
/* modern community: round-1 evidence fixes */
.mc .mc-btn,.mc a.mc-btn{color:#fff!important;border:0!important}
.mc .mc-form button.mc-btn{border:0!important}
.mc-h1{font-size:clamp(36px,3.9vw,58px)}
.mc-h1 .mc-l1,.mc-h1 .mc-l2{display:block;white-space:nowrap}
.mc-h1 .mc-l2{color:var(--u)}
@media(max-width:560px){.mc-h1 .mc-l1,.mc-h1 .mc-l2{white-space:normal}.mc .mc-form input[type=email]{flex:none;height:52px;width:100%}}
.mc .ch-q h3,.mc .ch-q>div{grid-column:auto!important;grid-row:auto!important}
.mc .ch-q{align-items:start}
.mc-chip,.mc-chips i,.mc-pbs .m,.mc-maker .by,.mc-preview-note,.mc-preview-top,.mc-mini small,.mc-maker small{font-size:13px!important}
.mc-wall{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.mc-proof{flex-wrap:wrap;row-gap:6px}
.mc-faces{margin-right:4px}
.mc-num{font-size:13px}
/* modern community: round-1 design fixes */
.mc-head h2{font-weight:700;font-size:clamp(28px,3vw,40px);line-height:1.1}
.mc-head h2 span{color:inherit}
#why-makers .mc-head h2 span{color:var(--u)}
body:has(.mc) .hair{display:none}
body:has(.mc) .menu{border:0;border-radius:999px;background:#f2f3f8}
.mc #join-block h2{text-align:center;align-self:center;font-size:clamp(34px,4vw,56px)!important}
.mc-notes li{box-shadow:none}
.mc-tint-l{background:#f7ffd0}
.mc-live .mc-link{margin-top:4px}
.mc-plan .mc-ticks a{color:var(--u)}
@media(max-width:560px){.mc-parts{grid-template-columns:1fr 1fr;gap:10px}.mc-part{padding:14px}.mc-part h3{font-size:16px}.mc-part p{font-size:13.5px}.mc-chips{display:none}}

/* round 5: cookie bar in the modern look, one price line per phone screen, phone H1 on two lines, tap targets */
body:has(.mc) .ck{left:16px;bottom:16px;flex-direction:row;align-items:center;gap:14px;max-width:460px;background:#fff;color:var(--k);border:1px solid #e6e8f2;border-radius:16px;padding:10px 12px 10px 16px;box-shadow:0 1px 2px rgba(11,21,51,.05),0 10px 28px rgba(11,21,51,.10)}
body:has(.mc) .ck p{font-size:13px;opacity:1;color:#4a5370}
body:has(.mc) .ckb .btn{border-radius:999px;border-width:1px;font-size:13px;padding:8px 14px;box-shadow:none;white-space:nowrap}
@media(max-width:720px){body:has(.mc) .ck{left:12px;right:12px;bottom:84px;max-width:none;padding:8px 10px 8px 14px}.mc-offer{display:none}}
@media(max-width:560px){.mc .mc-h1{font-size:clamp(26px,7.7vw,36px)}.mc-h1 .mc-l1,.mc-h1 .mc-l2{white-space:nowrap}}
.mc-link{display:inline-block;padding-block:12px}
.mc-head .mc-link{margin-top:4px}
.mc-stations li{font-size:13px}

/* ===================================================================================
   HOME v6 "the room" (14 Oct 2026, evening). Same light, rounded, brand world, built rather than assembled:
   a real photo and a note instead of a fake app window, an editorial numbered road instead of eight identical
   cards, founders' sentences as type instead of chips, all-white ground (no tinted bands, no gradients),
   hairlines for structure, one card only where it holds something (the plan). Scoped to .rm.
   =================================================================================== */
.rm{--line:#e7e9f1;--soft:#4a5370}
.rm ::selection{background:var(--y);color:var(--k)}
.rm .mc-in{max-width:none}
/* arrows are drawn, not typed */
.rm-go::after,.rm-more::after,.rm-ih::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.rm-go:hover::after,.rm-more:hover::after,.rm-ih:hover::after,.rm-live:hover .rm-more::after{transform:translateX(3px)}
.rm .mc-btn{box-shadow:0 4px 14px rgba(79,70,229,.22)}
.rm-more{display:inline-flex;align-items:center;gap:6px;padding-block:12px;font:800 15px/1.2 var(--s);color:var(--u)!important;text-decoration:none;white-space:nowrap}
.rm-fine{margin:12px 0 0;font-size:14px;color:var(--soft)}

/* hero: words left, a person right */
.rm-hero{padding:clamp(44px,6vw,88px) 0 clamp(40px,5vw,64px)!important;background:#fff}
.rm-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.rm .mc-h1{margin:0;font:800 clamp(38px,4.6vw,68px)/1.02 var(--d);letter-spacing:-.04em;color:var(--k)}
.rm .mc-h1 .mc-l2{color:var(--u)}
.rm-lede{margin:22px 0 0;max-width:34em;font-size:clamp(17px,1.35vw,19.5px);line-height:1.55;color:var(--soft)}
.rm .mc-h1 .mc-l1{color:var(--k)}
.rm-form{margin-top:28px;max-width:560px}
.rm-room{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:14.5px;color:var(--soft)}
.rm-room[hidden]{display:none}
.rm-room b{color:var(--k)}
.rm-faces{display:flex}
.rm-faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px;box-shadow:0 1px 3px rgba(11,21,51,.18)}
.rm-faces img:first-child{margin-left:0}
.rm-me{position:relative;margin:0;justify-self:end;width:min(100%,420px)}
.rm-me>img{display:block;width:100%;height:auto;aspect-ratio:1/1.05;object-fit:cover;object-position:50% 30%;border-radius:28px}
.rm-note{position:relative;margin:-72px 0 0 -40px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 2px 4px rgba(11,21,51,.04),0 18px 40px rgba(11,21,51,.10);font-size:15.5px;line-height:1.55}
.rm-note p{margin:0 0 10px;color:var(--soft)}
.rm-note b{color:var(--k)}
.rm-ih{display:inline-flex;align-items:center;gap:8px;font:800 14px/1.2 var(--s);color:var(--k)!important;text-decoration:none}
.rm-ih img{border-radius:5px}

/* what founders said: a quiet ruled row */
.rm-said{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rm-said-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.rm-said a{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:24px 28px 22px;text-decoration:none;border-left:1px solid var(--line)}
.rm-said a:first-child{border-left:0;padding-left:0}
.rm-said a:last-child{padding-right:0}
.rm-said q{font:600 16.5px/1.5 var(--s);color:var(--k);quotes:"\201C" "\201D" "\2018" "\2019"}
.rm-said a:hover q{color:var(--u)}
.rm-said span{display:flex;align-items:center;gap:10px;font:700 14px/1 var(--s);color:var(--soft)}
.rm-said img{border-radius:50%}

/* sections */
.rm-sec{padding:clamp(64px,8vw,112px) 0 0!important;background:#fff}
.rm-sec-tight{padding-top:clamp(56px,6vw,88px)!important}
.rm-head{max-width:760px;margin-bottom:clamp(28px,3vw,44px)}
.rm-head h2{margin:0;font:800 clamp(30px,3.3vw,48px)/1.06 var(--d);letter-spacing:-.035em;color:var(--k)}
.rm-head p{margin:14px 0 0;font-size:17.5px;color:var(--soft);max-width:44em}
.rm-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none}

/* the road: numbers carry the order, rules carry the structure */
.rm-road{list-style:none;margin:0;padding:0;counter-reset:part;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);grid-auto-flow:column;grid-template-rows:repeat(4,auto)}
.rm-road li{counter-increment:part;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:8px;padding:22px 0;border-top:1px solid var(--line)}
.rm-road li::before{content:counter(part);grid-row:span 2;font:800 34px/1 var(--d);letter-spacing:-.04em;color:var(--u)}
.rm-road h3{margin:2px 0 6px;font:800 21px/1.2 var(--d);letter-spacing:-.025em;color:var(--k)}
.rm-road p{margin:0;font-size:16px;line-height:1.55;color:var(--soft)}

/* stuck: the sentences are the design */
.rm-stuck{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(32px,5vw,80px)}
.rm-stuck li{break-inside:avoid;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.rm-stuck q{font:700 clamp(19px,1.75vw,25px)/1.25 var(--d);letter-spacing:-.025em;color:var(--k);quotes:"\201C" "\201D"}
.rm-stuck span{flex:none;padding:3px 10px;border-radius:999px;background:var(--y);font:800 13px/1.4 var(--s);color:var(--k)}

/* wall */
.rm-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.rm-maker{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px 16px;border:1px solid var(--line);border-radius:18px;background:#fff;text-decoration:none;transition:border-color .15s,transform .2s cubic-bezier(.23,1,.32,1)}
.rm-maker:hover{border-color:#c9c6ff;transform:translateY(-2px)}
.rm-maker .lg{width:44px;height:44px;border-radius:12px;object-fit:cover;display:grid;place-items:center;background:#efeeff;color:var(--u);font:800 18px/1 var(--d);margin-bottom:6px}
.rm-maker b{font:800 16px/1.25 var(--s);color:var(--k);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-maker small{font-size:13.5px;line-height:1.4;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rm-maker .by{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font:600 13px/1.2 var(--s);color:var(--soft)}
.rm-maker .by img{border-radius:50%}
.rm-maker .fm{position:absolute;top:16px;right:16px;padding:3px 9px;border-radius:999px;background:var(--y);font:800 12.5px/1.3 var(--s);color:var(--k)}
.rm-you{border-style:dashed;border-color:#c9c6ff}
.rm-you .lg{background:var(--u);color:#fff}
.rm-live{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;margin-top:22px;padding:18px 22px 18px 18px;border:1px solid var(--line);border-radius:20px;text-decoration:none;transition:border-color .15s}
.rm-live:hover{border-color:#c9c6ff}
.rm-date{display:grid;place-items:center;width:68px;height:68px;border-radius:16px;background:var(--k);color:#fff;font:700 12px/1 var(--s);text-transform:uppercase;letter-spacing:.06em}
.rm-date b{font:800 26px/1 var(--d);letter-spacing:-.03em;color:var(--y)}
.rm-live-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.rm-live-t small{font:700 13px/1.3 var(--s);color:var(--u)}
.rm-live-t b{font:800 18px/1.3 var(--s);color:var(--k)}
.rm-live-t span{font-size:15px;color:var(--soft)}

/* playbooks: a ruled index */
.rm-pbs{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.rm-pbs li a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid var(--line);text-decoration:none}
.rm-pbs .t{font:700 19px/1.35 var(--s);color:var(--k)}
.rm-pbs a:hover .t{color:var(--u)}
.rm-pbs .m{flex:none;font:700 14px/1 var(--s);color:var(--soft)}
.rm-pbs .free .m{color:var(--k);background:var(--y);padding:5px 10px;border-radius:999px}

/* membership: words left, the one card right */
.rm-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.rm-split .rm-head h2 span{color:var(--u)}
.rm-promise{padding-top:18px;border-top:1px solid var(--line);color:var(--k)!important;font-weight:700}
.rm-sign{display:flex;align-items:center;gap:10px;font:800 15px/1 var(--s)!important;color:var(--k)!important}
.rm-sign img{border-radius:50%}
.rm-plan{padding:28px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 2px 4px rgba(11,21,51,.04),0 18px 40px rgba(11,21,51,.08)}
.rm-plan ul{list-style:none;margin:0 0 24px;padding:0}
.rm-plan li{position:relative;padding:10px 0 10px 32px;border-top:1px solid var(--line);font-size:16px;line-height:1.45}
.rm-plan li:first-child{border-top:0;font-weight:800}
.rm-plan li::before{content:"";position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1533' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.rm-plan li a{color:var(--u)}
.rm-plan .mc-btn{width:100%}

/* FAQ and close on white */
.rm .ch-faq{padding:clamp(64px,8vw,112px) var(--pad-x) 0!important}
.rm .ch-faq-h{font-size:clamp(30px,3.3vw,48px)!important}
.rm-close{padding:clamp(72px,9vw,120px) 0!important;text-align:center;background:#fff}
.rm-close h2{margin:0;font:800 clamp(34px,4.2vw,60px)/1.04 var(--d);letter-spacing:-.04em;color:var(--k)}
.rm-close>div>p{margin:14px auto 0;color:var(--soft)}
.rm-close .rm-form{margin:28px auto 0}

@media(max-width:1100px){
  .rm-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rm-note{margin:-64px 0 0 -24px}
}
@media(max-width:760px){
  .rm-hero-grid,.rm-split{grid-template-columns:1fr}
  .rm-me{justify-self:start;width:min(100%,460px)}
  .rm-note{margin:-64px 16px 0}
  .rm-road{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
  .rm-stuck{columns:1}
}
@media(max-width:860px){
  .rm-said-row{grid-template-columns:1fr}
  .rm-said a,.rm-said a:first-child,.rm-said a:last-child{padding:18px 0;border-left:0;border-top:1px solid var(--line)}
  .rm-said a:first-child{border-top:0}
}
@media(max-width:560px){
  .rm .mc-h1{font-size:clamp(26px,7.7vw,38px)}
  .rm-road li{grid-template-columns:48px minmax(0,1fr)}
  .rm-road li::before{font-size:26px}
  .rm-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rm-live{grid-template-columns:auto minmax(0,1fr)}
  .rm-live>.rm-more{grid-column:1/-1}
  .rm-head-row{flex-direction:column;align-items:flex-start;gap:0}
  .rm-stuck li{flex-direction:column;gap:8px}
}
.rm #join-block.rm-close,.rm .rm-close{background:#fff!important;border-top:1px solid var(--line)}
.rm .ch-faq{background:#fff!important}
/* the ROI as a receipt: ruled lines, numbers right-aligned, no tiles */
.rm-roi{margin:22px 0 0;padding:0;border-top:2px solid var(--k)}
.rm-roi div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.rm-roi dt{font-size:16px;color:var(--soft)}
.rm-roi dd{margin:0;font:800 20px/1.2 var(--d);letter-spacing:-.02em;color:var(--k);font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-roi div:last-child dd{color:var(--u)}
.rm-roi-say{margin:12px 0 0!important;font:800 17px/1.4 var(--s)!important;color:var(--k)!important}
.rm-roi-say::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--y);box-shadow:0 0 0 1px #c8db2c;vertical-align:1px}
.rm-promise{margin-top:22px!important}

/* ===================================================================================
   SITE v6: every page in the landing page's world (14 Oct 2026, night). One light header and one menu, one footer,
   white pages, hairlines, pill buttons, sentence case. The old colour bands are flipped to light by remapping their
   tokens inside the band (violet ground -> white, white ink -> navy, lime accents -> violet).
   =================================================================================== */
:root{--rl:#e7e9f1;--soft:#4a5370}
body{background:#fff;color:var(--k)}
::selection{background:var(--y);color:var(--k)}
:focus-visible{outline:3px solid var(--u);outline-offset:3px;border-radius:8px}
.hair{display:none}

/* header: the landing's, on every page */
.top{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);color:var(--k);border-bottom:1px solid var(--rl)}
.top .in{height:68px}
.wm{color:var(--k);font-size:16px}
.wm .mark{color:var(--u)}
.top nav{gap:24px;font:600 15px/1 var(--s)}
.top nav a{color:var(--k);border-bottom:0;padding:8px 0}
.top nav a:hover{color:var(--u)}
.top nav a[aria-current=page]{color:var(--u);box-shadow:inset 0 -2px 0 var(--u)}
.top nav a.signin{color:var(--soft)}
.top .btn{background:var(--u)!important;border-color:var(--u)!important;color:#fff!important;border-radius:999px;padding:11px 20px}
.menu{border:1px solid var(--rl);border-radius:12px}
.menu i{background:var(--k);height:2px;border-radius:2px}
@media(max-width:1040px){.top nav{background:#fff;border-top:1px solid var(--rl)}.top nav a{border-bottom:1px solid #eef0f6;box-shadow:none}.top nav a[aria-current=page]{color:var(--u);box-shadow:none}}

/* footer: four labelled columns, the same everywhere */
footer{background:var(--k);color:#fff;border-top:0}
footer .in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,3fr);gap:40px;align-items:start;padding-top:56px;padding-bottom:56px;font:500 14px/1.5 var(--s)}
footer .fbrand{display:flex;flex-direction:column;gap:8px;color:rgba(255,255,255,.72)}
footer .fbrand b{font:800 18px/1.2 var(--d);letter-spacing:-.02em;color:#fff}
footer .links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;opacity:1}
footer .fcol{display:flex;flex-direction:column;gap:10px}
footer .fcol b{font:800 13px/1.2 var(--s);color:var(--y);margin-bottom:2px}
footer .fcol a{color:rgba(255,255,255,.82);text-decoration:none}
footer .fcol a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media(max-width:820px){footer .in{grid-template-columns:1fr}footer .links{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* dock: light, like the home page */
.dock{background:#fff;color:var(--k);border-top:1px solid var(--rl);box-shadow:0 -8px 24px rgba(11,21,51,.08)}
.dock small{font-size:13px}
.dock .btn{background:var(--u)!important;border-color:var(--u)!important;color:#fff!important;border-radius:999px}

/* colour bands become light: same markup, flipped tokens */
.page-head,.blue,section.close{--u:#fff;--w:#0B1533;--y:#4F46E5;--mutew:#4a5370;--cy:#4F46E5}
.black{--k:#fff;--w:#0B1533;--y:#4F46E5;--mutew:#4a5370;--cy:#4F46E5}
.yellow{--y:#fff}
.page-head,.blue,.black,.yellow,section.close{background:#fff!important;color:var(--k,#0B1533)}
.black{color:#0B1533}
.page-head{padding:clamp(48px,6vw,88px) 0 clamp(28px,3vw,40px);border-bottom:1px solid var(--rl)}
.page-head .crumb{display:none}
.page-head h1,.page-head .h1{font:800 clamp(34px,4.4vw,62px)/1.04 var(--d)!important;letter-spacing:-.04em!important;max-width:20ch;color:#0B1533}
.page-head h1 em{color:#4F46E5}
.page-head .lede{color:var(--soft);font-size:clamp(17px,1.35vw,19px)}
main section+section.blue,main section+section.black,main section+section.yellow{border-top:1px solid var(--rl)}

/* type: sentence case, display weight 800, calmer sizes */
main h1,main h2,main h3,main .h1,main .h2,main .h3{letter-spacing:-.03em}
main h2,main .h2{font-weight:800}
.sec-head{border-bottom:1px solid var(--rl)}
.sec-head h2{font-size:clamp(28px,3.2vw,44px)!important}
.lab{font:700 13px/1.35 var(--s);letter-spacing:0;color:var(--soft)}
.blue .lab,.black .lab,.page-head .lab{color:#4F46E5}

/* buttons: pills, violet for the action, white with a hairline for the second */
.btn{border-radius:999px;font-weight:800}
.btn,.btn.go,.btn.wh,.btn.kk{background:#4F46E5;border-color:#4F46E5;color:#fff}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(79,70,229,.25)}
.btn.gh{background:#fff;border:1px solid var(--rl);color:#0B1533}
.btn.gh:hover{border-color:#4F46E5;color:#4F46E5;box-shadow:none}

/* cards: whatever had a hard navy box now has a hairline and a soft corner */
main :is(.item,.pb,.vid,.proof a,.res a,.tldr-box,.pricebox,.pp-panel,.session-tease,.rcpt,.qa,.shot,.v-cards>*,.v-stats>*,.stats>*,.agenda>*,.three>*,.blk,.co,.sum,.me,.pq){border-radius:18px}
main .tldr,main .tldr-box{background:#fff}
main img{border-radius:inherit}

/* forms on the old pages, as on the home page */
.hform input[type=email]{border:1px solid var(--rl)!important;border-radius:999px;background:#fff;color:#0B1533}
.hform button{border-radius:999px;background:#4F46E5!important;color:#fff!important;border:0!important}
.hform .err,.close .err,.hero .err{color:#b42318}

/* cookie bar everywhere */
.ck{background:#fff;color:#0B1533;border:1px solid var(--rl);border-radius:16px;box-shadow:0 10px 28px rgba(11,21,51,.10);flex-direction:row;align-items:center;max-width:460px}
.ck p{color:var(--soft);font-size:13px;opacity:1}
.ckb .btn{padding:8px 14px;font-size:13px}
/* the last coloured blocks, flipped to white cards (found by scanning every page for dark or lime grounds) */
main :is(.hi,.pp-pitch,.cta-in,.mv.me,.tr.me,.rcpt,.tldr-box,.mk-add){--u:#fff;--k:#0B1533;--w:#0B1533;--y:#4F46E5;--mutew:#4a5370;background:#fff!important;color:#0B1533!important;border:1px solid var(--rl)!important;border-radius:18px}
main :is(.hi,.pp-pitch,.cta-in,.mv.me,.rcpt,.tldr-box,.mk-add) :is(p,span,li,small,dd,dt){color:inherit}
main :is(.hi,.pp-pitch,.cta-in,.mv.me,.rcpt) :is(.lab,em){color:#4F46E5!important}
main .tr.me{border-radius:14px}
.page-head .proof a,.blue .proof a,.black .proof a{background:#fff!important;color:#0B1533!important;border:1px solid var(--rl)!important;border-radius:14px}
.page-head .proof a>span>span{opacity:1;color:#4a5370}
main section.tight[style]{background:#fff!important;color:#0B1533!important}
/* no coloured side bars; the featured piece and featured makers on white */
.prose blockquote{border-left:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--rl)}
.mk-why li{border-left:0;padding-left:0;border-top:1px solid var(--rl);padding-top:14px}
.vs-guar{border-left:0;padding-left:0}
.feat{--k:#fff;--w:#0B1533;--y:#4F46E5;background:#fff!important;color:#0B1533;border:1px solid var(--rl)!important;border-radius:18px}
.feat:hover{background:#fff!important;border-color:#c9c6ff!important}
main [class*="mk-"][class*="feat"],main .mk-card.is-feat,main .mk-card.featured{background:#fff!important}
.mk-card{border-radius:18px}
.mk-card.is-featured{background:#fff!important;border-color:#c9c6ff}
.mk-feat{border:0;border-radius:999px;background:var(--y);color:var(--k);letter-spacing:0;font-size:12px}
.mk-badge{border:0;border-radius:999px;letter-spacing:0}
.mk-add{border:1px dashed #c9c6ff!important;background:#fff!important;border-radius:18px}
.mk-logo,.mk-initial{border-radius:12px}
/* review fixes (14 Oct, night) */
main .hi :is(span,small,p,b,dd,dt){color:inherit!important;opacity:1!important}
main .hi .lab{color:#4F46E5!important}
.page-head .updated{color:#4a5370!important}
.item>.no{min-width:0;overflow-wrap:anywhere}
.item{column-gap:28px}
.res{gap:16px;border:0!important;background:transparent}
.res a{border:1px solid var(--rl)!important;border-radius:18px;background:#fff;transition:border-color .15s,transform .2s cubic-bezier(.23,1,.32,1)}
.res a:hover{background:#fff;border-color:#c9c6ff!important;transform:translateY(-2px)}
.black .n,.band .n,.black span.n,.band span.n{color:#4F46E5!important}
.pq{border-left:0;padding-left:0}
main li{border-left-width:0}
.page-head .tldr{display:none}
.top nav a.signin{color:var(--k)}
.top nav a.navjoin{display:none}
@media(max-width:1040px){.top.open nav{min-height:calc(100dvh - 68px);align-content:start;background:#fff}.top nav a.navjoin{display:flex;justify-content:center;margin-top:16px;padding:14px 20px;border:0;border-radius:999px;background:var(--u);color:#fff}}
@media(min-width:601px){.item{grid-template-columns:150px 1fr}}
main .mv.me .ft b,main .mv .ft b{color:#0B1533!important}main .mv.me .ft b:last-child{color:#4F46E5!important}

/* ===================================================================================
   HOME v7 (14 Oct 2026, late). Designed on the canvas first, then built here. White ground, hairlines, one dark
   object (the workshop ticket), the 8 parts as a drawn route with the stuck sentence at each stop, real makers
   read live, the ROI as a receipt. Scoped to .v7; header, footer and dock come from the SITE v6 layer.
   =================================================================================== */
.v7{--line:#e6e8f2;--soft:#4a5370;--sh:0 1px 2px rgba(11,21,51,.05),0 10px 28px rgba(11,21,51,.07);--ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,5vw,56px);background:#fff;color:var(--k);font:500 17px/1.6 var(--s)}
.v7 ::selection{background:var(--y);color:var(--k)}
.v7 input{caret-color:var(--u)}
.v7 :focus-visible{outline:3px solid var(--u);outline-offset:3px;border-radius:10px}
.v7-in{max-width:1200px;margin:0 auto;padding-left:var(--gut)!important;padding-right:var(--gut)!important;box-sizing:border-box}
.v7 h1,.v7 h2,.v7 h3{font-family:var(--d);text-transform:none;color:var(--k)}
.v7 mark{background:none;color:inherit;box-shadow:inset 0 -.26em 0 var(--y)}
/* offer bar: white, a lime dot, no band */
.v7 .v7-offer{background:#fff;color:var(--k);border-bottom:1px solid var(--line);font:500 14px/1.5 var(--s);padding:10px 16px}
.v7 .v7-offer i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--y);border:1px solid var(--k);box-sizing:border-box;margin-right:8px;vertical-align:1px}
.v7 .v7-offer b{font-weight:700}
.v7 .v7-offer a{color:var(--u);font-weight:700;margin-left:4px}
/* hero */
.v7-hero{padding-top:clamp(36px,5vw,72px)!important;padding-bottom:clamp(56px,7vw,104px)!important}
.v7-h1{margin:0;font-weight:800;font-size:clamp(38px,7.2vw,104px);line-height:1.02;letter-spacing:-.045em}
.v7-h1>span{display:block}
.v7-h1 .v7-l2{color:var(--u)}
.v7-hero-row{display:flex;flex-wrap:wrap;gap:clamp(40px,6vw,88px);align-items:flex-start;margin-top:clamp(32px,4vw,56px)}
.v7-hero-l{flex:1 1 460px;min-width:0;max-width:600px}
.v7-lede{margin:0;font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--k);max-width:34em}
.v7 .v7-form{margin-top:28px;max-width:560px;border-color:#d5d8e6}
.v7-btn{font-weight:700;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s}
.v7-btn:hover{background:#4338ca}
.v7-fine{margin:14px 0 0 8px;font-size:14px;color:var(--soft)}
.v7-proof{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;font-size:15px;color:var(--soft)}
.v7-proof[hidden]{display:none}
.v7-proof b{color:var(--k)}
.v7-faces{display:flex}
.v7-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-left:-12px}
.v7-faces img:first-child{margin-left:0}
.v7-me{flex:1 1 380px;min-width:0;max-width:480px;margin:0 0 0 auto}
.v7-me>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:28px}
.v7-note{position:relative;margin:-96px 0 0 clamp(0px,3vw,40px);max-width:380px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 22px 18px;box-shadow:0 1px 2px rgba(11,21,51,.05),0 16px 40px rgba(11,21,51,.12)}
.v7-note p{margin:0;font-size:15.5px;line-height:1.55}
.v7-curve{display:block;width:100%;height:auto;margin-top:14px;font-family:var(--s)}
.v7-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--u)!important;font-weight:700;font-size:16px;text-decoration:none}
.v7-note .v7-arrow{margin-top:10px;font-size:14px}
.v7-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.v7-arrow:hover svg{transform:translateX(3px)}
.v7-arrow:hover{text-decoration:underline;text-underline-offset:4px}
/* quotes */
.v7-said{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v7-said-row{display:flex;flex-wrap:wrap}
.v7-said-row a{flex:1 1 300px;display:flex;flex-direction:column;gap:14px;padding:28px 28px 28px 0;color:var(--k);text-decoration:none}
.v7-said-row a:last-child{padding-right:0}
.v7-said-row q{font-size:18px;line-height:1.45;font-weight:600}
.v7-said-row a:hover q{color:var(--u)}
.v7-said-row span{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--soft)}
.v7-said-row img{border-radius:50%}
/* section heads */
.v7-sec{padding-top:clamp(80px,10vw,140px)!important}
.v7-head{display:flex;flex-wrap:wrap;gap:16px 48px;align-items:flex-end;justify-content:space-between}
.v7-head h2,.v7 .ch-faq-h{margin:0;font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.06;letter-spacing:-.035em}
.v7-head>h2{flex:1 1 420px}
.v7-head>p{margin:0;flex:0 1 400px;color:var(--soft)}
.v7-head>div{flex:1 1 420px}
.v7-head>div p{margin:14px 0 0;color:var(--soft)}
/* the road: numbered stops on one line */
.v7-road{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));row-gap:48px;counter-reset:part}
.v7-road li{counter-increment:part;position:relative;padding:64px 28px 0 0}
.v7-road li::before{content:counter(part);position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--k);border-radius:50%;background:#fff;box-sizing:border-box;font:700 16px/1 var(--d)}
.v7-road li::after{content:"";position:absolute;top:21px;left:44px;right:0;height:2px;background:var(--k)}
.v7-road h3{margin:0;font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.02em}
.v7-road p{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--soft)}
.v7-road q{display:block;margin-top:14px;font-size:15px;font-weight:600;color:var(--u)}
.v7-road li:hover::before{background:var(--y)}
/* makers wall */
.v7-wall{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px}
.v7-mk{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;color:var(--k)!important;text-decoration:none;background:#fff;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.v7-mk:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:#d5d8e6}
.v7-mk .lg{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);object-fit:contain;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font:700 17px/1 var(--d);color:var(--u);background:#fff}
.v7-mk .t{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.v7-mk b{font-size:16px}
.v7-mk small{font-size:14px;color:var(--soft)}
.v7-mk.big{flex:1 1 420px;align-items:flex-start;gap:20px;padding:24px;border-radius:22px;box-shadow:var(--sh)}
.v7-mk.big .lg{width:64px;height:64px;border-radius:16px;padding:4px}
.v7-mk.big .t{gap:6px}
.v7-mk.big b{font-size:19px}
.v7-mk.big .one{font-size:15px;line-height:1.5;color:var(--soft)}
.v7-mk .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v7-mk .fm{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--y);font:700 12.5px/1 var(--s)}
.v7-mk .by{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:14px;font-weight:600}
.v7-mk .by img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.v7-you{border:1.5px dashed var(--u)}
.v7-you .lg{background:var(--u);border-color:var(--u)}
.v7-you svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
/* the one dark object: the workshop ticket */
.v7-live{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px;padding:clamp(24px,3.4vw,44px);border-radius:28px;background:var(--k);color:#fff!important;text-decoration:none;transition:transform .3s var(--ease)}
.v7-live:hover{transform:translateY(-2px)}
.v7-date{flex:none;display:flex;align-items:baseline;gap:10px;font:700 22px/1 var(--d)}
.v7-date b{font-size:clamp(64px,8vw,104px);line-height:.9;letter-spacing:-.05em;color:var(--y)}
.v7-live-t{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:10px}
.v7-live-t small{font-size:14px;font-weight:600;color:var(--y)}
.v7-live-t b{font:700 clamp(22px,2.4vw,32px)/1.15 var(--d);letter-spacing:-.025em}
.v7-live-t span{font-size:16px;color:#c9cee0}
.v7-live-go{flex:none;display:inline-flex;align-items:center;height:52px;padding:0 24px;border-radius:999px;background:#fff;color:var(--k);font-weight:700;font-size:16px;transition:background-color .2s}
.v7-live:hover .v7-live-go{background:var(--y)}
/* playbooks: a ruled list */
.v7-pbs{list-style:none;margin:40px 0 0;padding:0;border-bottom:1px solid var(--line)}
.v7-pbs li{border-top:1px solid var(--line)}
.v7-pbs a{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;padding:26px 0;color:var(--k);text-decoration:none}
.v7-pbs .t{flex:1 1 320px;font:600 clamp(19px,2vw,26px)/1.25 var(--d);letter-spacing:-.02em;transition:color .2s}
.v7-pbs a:hover .t{color:var(--u)}
.v7-pbs .m{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;border:1px solid #d5d8e6;font-size:14px;font-weight:600;color:var(--soft)}
.v7-pbs a.free .m{border-color:var(--y);background:var(--y);color:var(--k);font-weight:700}
/* membership */
.v7-split{display:flex;flex-wrap:wrap;gap:48px clamp(40px,6vw,96px);align-items:flex-start}
.v7-price{flex:1 1 420px;min-width:0}
.v7-price h2{margin:0;font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.06;letter-spacing:-.035em}
.v7-big{margin:24px 0 0;display:flex;align-items:baseline;gap:8px;font:700 24px/1 var(--d)}
.v7-big b{font-size:clamp(72px,9vw,128px);line-height:.9;letter-spacing:-.06em;color:var(--u)}
.v7-terms{margin:18px 0 0;font-size:18px}
.v7-roi{margin:32px 0 0;padding:0;max-width:480px}
.v7-roi div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.v7-roi div:last-child{border-bottom:2px solid var(--k)}
.v7-roi dt{color:var(--soft)}
.v7-roi dd{margin:0;font-weight:700;text-align:right}
.v7-roi-say{margin:16px 0 0;font:700 20px/1.3 var(--d);letter-spacing:-.02em}
.v7-plan{flex:1 1 400px;min-width:0;border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3vw,40px);box-shadow:0 1px 2px rgba(11,21,51,.05),0 18px 48px rgba(11,21,51,.09);background:#fff}
.v7-plan-h{margin:0;font:700 22px/1.2 var(--d);letter-spacing:-.02em}
.v7-plan ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.v7-plan li{position:relative;padding-left:34px;font-size:16px;line-height:1.45}
.v7-plan li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--y) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230B1533' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.v7-plan li a{color:var(--u)}
.v7-wide{display:flex;width:100%;margin-top:28px;height:56px;box-sizing:border-box}
.v7-promise{display:flex;gap:14px;align-items:flex-start;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--soft)}
.v7-promise img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
.v7-promise b{color:var(--k)}
/* FAQ (built by build.py): heading left, ruled answers right */
.v7 .ch-faq{max-width:1200px;margin:0 auto;padding:clamp(80px,10vw,140px) var(--gut) 0;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(40px,6vw,96px);background:#fff}
.v7 .ch-faq-h{display:block;min-height:0;padding:0;background:none;grid-row:1/span 9;align-self:start}
.v7 .ch-q{grid-column:2;display:block;padding:22px 0;border-top:1px solid var(--line);background:#fff!important;color:var(--k)!important}
.v7 .ch-q:last-child{border-bottom:1px solid var(--line)}
.v7 .ch-q h3{margin:0;font:700 18px/1.4 var(--s);letter-spacing:0}
.v7 .ch-q p{margin:10px 0 0;font-size:17px;color:var(--soft);max-width:64ch}
/* close */
.v7-close{padding-top:clamp(96px,12vw,168px)!important;padding-bottom:clamp(96px,12vw,168px)!important;text-align:center;background:#fff!important}
.v7-close>img{display:block;margin:0 auto 28px}
.v7-close h2{margin:0 auto;max-width:900px;font-weight:800;font-size:clamp(36px,6vw,84px);line-height:1.02;letter-spacing:-.045em}
.v7-close>p{margin:20px auto 0;max-width:520px;font-size:18px;color:var(--soft)}
.v7-close .v7-form{margin:32px auto 0;text-align:left}
.v7-close .v7-fine{margin:16px 0 0}
/* phone */
@media(max-width:860px){
  .v7 .ch-faq{grid-template-columns:1fr}
  .v7 .ch-faq-h{grid-row:auto;margin-bottom:24px}
  .v7 .ch-q{grid-column:1}
  .v7-me{margin:0;max-width:none}
  .v7-note{margin:-72px 12px 0}
  .v7-road li{padding-right:0}
  .v7-road li::after{right:-16px}
}
@media(max-width:560px){
  .v7 .v7-form{flex-wrap:wrap;border-radius:26px}
  .v7 .v7-form input[type=email]{flex:1 1 100%}
  .v7 .v7-form .mc-btn{flex:1 1 100%}
  .v7-said-row a{padding-right:0}
  .v7-said-row a+a{border-top:1px solid var(--line)}
  .v7-live-go{width:100%;justify-content:center}
}
/* motion: the revenue line draws once; each section's parts rise once as they enter. Visible without script. */
@media(prefers-reduced-motion:no-preference){
  .v7-curve-l{stroke-dasharray:1;stroke-dashoffset:1;animation:v7draw 1.6s var(--ease) .5s forwards}
  .v7-curve-d{opacity:0;transform-origin:304px 12px;transform:scale(.4);animation:v7pop .5s var(--ease) 1.9s forwards}
  .v7 [data-rise].pre{opacity:0;transform:translateY(24px)}
  .v7 [data-rise].rise{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .v7-btn:active,.v7-live:active,.v7-mk:active{transform:scale(.98)}
}
@keyframes v7draw{to{stroke-dashoffset:0}}
@keyframes v7pop{to{opacity:1;transform:none}}
/* v7: win over the older .mc / #join-block rules */
.v7 .v7-form input[type=email]{border:0!important;box-shadow:none!important;background:transparent!important;height:52px;padding:0 20px;border-radius:999px}
.v7 .ch-faq{padding:clamp(80px,10vw,140px) var(--gut) 0!important}
.v7 .ch-faq-h{font:700 clamp(30px,4vw,52px)/1.06 var(--d)!important;letter-spacing:-.035em}
.v7 #join-block{display:block;padding:clamp(96px,12vw,168px) var(--gut)!important;text-align:center;background:#fff!important}
.v7 #join-block h2{margin:0 auto;font:800 clamp(36px,6vw,84px)/1.02 var(--d)!important;letter-spacing:-.045em;text-align:center}
.v7 #join-block .v7-fine{text-align:center;margin:16px auto 0;max-width:none}
@media(max-width:560px){.v7 .v7-form input[type=email]{height:50px!important;padding:0 18px!important}}
/* v7 round 2 (Impeccable critique A+B, taste inspect, copy review) */
.v7-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* hero: the proof peak above the laptop fold */
.v7-h1{font-size:clamp(32px,6.4vw,92px)}
.v7-hero-row{margin-top:clamp(24px,3vw,40px)}
.v7-me{max-width:400px}
.v7-fine{font-size:15px}
.v7-fine b{color:var(--k)}
/* flat buttons and form; a shadow only where something truly floats (the note over the photo) */
.v7 .v7-form,.v7 .v7-form:focus-within{box-shadow:none}
.v7 .v7-form:focus-within{border-color:var(--u);outline:3px solid rgba(79,70,229,.18);outline-offset:0}
.v7 .v7-btn,.v7 .v7-btn:hover{box-shadow:none;transform:none}
.v7-mk.big,.v7-mk:hover,.v7-plan{box-shadow:none}
.v7-mk:hover{border-color:var(--u)}
.v7-you{border-style:solid}
/* tap targets */
.v7 .v7-form input[type=email]{min-height:52px}
.v7 .v7-btn{min-height:52px}
.v7-arrow{min-height:44px}
/* the road: read the sentence first; one line per row, a vertical rail on phones; not clickable, so no hover */
.v7-road q{order:-1;margin:0 0 10px;font-size:18px;line-height:1.4;font-weight:600;color:var(--k)}
.v7-road q::before{content:"\201C"}.v7-road q::after{content:"\201D"}
.v7-road{quotes:none}
.v7-road li{display:flex;flex-direction:column}
.v7-road h3{font-size:20px;color:var(--u)}
.v7-road li:hover::before{background:#fff}
@media(min-width:861px){.v7-road{grid-template-columns:repeat(4,minmax(0,1fr))}.v7-road li:nth-child(4n)::after{right:28px}}
@media(max-width:860px){
  .v7-road{grid-template-columns:1fr;row-gap:0}
  .v7-road li{padding:0 0 36px 64px}
  .v7-road li::after{top:44px;bottom:0;left:21px;right:auto;width:2px;height:auto}
  .v7-road li:last-child::after{display:none}
}
/* playbooks: the list beside a real page from the free playbook */
.v7-head>div{flex:1 1 640px}
.v7-pb-row{display:flex;flex-wrap:wrap;gap:40px clamp(32px,5vw,72px);align-items:flex-start;margin-top:40px}
.v7-pb-row .v7-pbs{flex:1 1 440px;margin:0}
.v7-pbs .t{font-size:clamp(18px,1.7vw,22px)}
.v7-pb-fig{flex:1 1 420px;min-width:0;margin:0}
.v7-pb-fig img{display:block;width:100%;height:auto;border-radius:18px}
.v7-pb-fig figcaption{margin-top:12px;font-size:15px;color:var(--soft)}
/* workshop: title first */
.v7-live-t span{font-size:16px}
@media(max-width:560px){.v7-live-t b{font-size:20px}}
/* receipt: the guaranteed value above the rule, the conditional one below it */
.v7-roi .v7-roi-sum{border-bottom:2px solid var(--k);padding-top:14px}
.v7-roi .v7-roi-sum dt{color:var(--k);font:700 20px/1.3 var(--d);letter-spacing:-.02em}
.v7-roi div:last-child{border-bottom:2px solid var(--k)}
.v7-roi-maybe{margin:14px 0 0;max-width:480px;font-size:15px;color:var(--soft)}
/* close: his face, not the logo */
.v7-close-me{width:72px;height:72px;border-radius:50%;object-fit:cover}
/* fewer sizes */
.v7-note p{font-size:15px}
.v7-mk.big b{font-size:20px}
.v7-plan-h,.v7-date{font-size:24px}
.v7 .mc-btn.v7-btn,.v7 .mc-btn.v7-btn:hover{box-shadow:none!important}

/* ===================================================================================
   EXAMPLES (14 Oct 2026): swipe files of real pages from bootstrapped products. Same world as the v7 home:
   white, hairlines, Unbounded heads; the quoted first screen is the one object on each page.
   =================================================================================== */
.ex{padding-bottom:clamp(64px,8vw,120px)}
.ex .v7-in{padding-top:0}
.ex-head{padding-top:clamp(40px,6vw,88px)!important}
.ex-crumb{margin:0 0 18px;font-size:15px;font-weight:600;color:var(--soft)}
.ex-crumb a{color:var(--u)}
.ex-head h1{margin:0;max-width:20ch;font-weight:800;font-size:clamp(32px,5vw,64px);line-height:1.04;letter-spacing:-.04em}
.ex-lede{margin:20px 0 0;max-width:60ch;font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--k)}
.ex-lede a{color:var(--u)}
.ex-meta{margin:14px 0 0;font-size:15px;color:var(--soft)}
/* the set: one ruled row per page, the headline is the content */
.ex-list-wrap{margin-top:clamp(40px,5vw,64px)}
.ex-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.ex-list li{border-top:1px solid var(--line)}
.ex-list a{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) auto;gap:8px 32px;align-items:center;padding:24px 0;color:var(--k);text-decoration:none}
.ex-name{display:flex;flex-direction:column;line-height:1.35}
.ex-name b{font-size:17px}
.ex-name small{font-size:14px;color:var(--soft)}
.ex-h{font:600 clamp(18px,1.6vw,22px)/1.3 var(--d);letter-spacing:-.02em;transition:color .2s}
.ex-list a:hover .ex-h{color:var(--u)}
.ex-cta{justify-self:end;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid #d5d8e6;font-size:14px;font-weight:600;white-space:nowrap}
@media(max-width:760px){.ex-list a{grid-template-columns:1fr}.ex-cta{justify-self:start}}
.ex-why{margin-top:clamp(64px,8vw,104px)}
.ex-why h2,.ex-steal h2,.ex-facts h2,.ex-more h2{margin:0 0 18px;font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.03em}
.ex-why-b{max-width:68ch}
.ex-why-b p{margin:0 0 14px}
.ex-pats{margin:18px 0 0;font-size:15px;color:var(--soft)}
.ex-pats b{color:var(--k)}
/* the hub */
.ex-sets{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.ex-sets li{border-top:1px solid var(--line)}
.ex-sets a{display:flex;flex-direction:column;gap:6px;padding:28px 0;color:var(--k);text-decoration:none}
.ex-sets b{font:700 clamp(22px,2.4vw,30px)/1.15 var(--d);letter-spacing:-.025em}
.ex-sets a:hover b{color:var(--u)}
.ex-sets span{color:var(--soft)}
.ex-sets .ex-n{font-size:14px;font-weight:700;color:var(--k)}
/* one page: the first screen, quoted */
.ex-hero-copy{margin-top:clamp(36px,4vw,56px)}
.ex-shot{margin:0;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.ex-shot figcaption{padding:12px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--soft)}
.ex-shot figcaption a{color:var(--u);font-weight:600}
.ex-shot blockquote{margin:0;padding:clamp(28px,5vw,64px)}
.ex-shot-h{margin:0;max-width:22ch;font:800 clamp(28px,4vw,52px)/1.08 var(--d);letter-spacing:-.035em;color:var(--k)}
.ex-shot-s{margin:18px 0 0;max-width:56ch;font-size:clamp(17px,1.5vw,20px);color:var(--soft)}
.ex-shot-b{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.ex-shot-b span{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--k);color:#fff;font-weight:700}
.ex-shot-b span.alt{background:#fff;color:var(--k);border:1px solid #d5d8e6}
.ex-split{display:flex;flex-wrap:wrap;gap:48px clamp(40px,6vw,96px);margin-top:clamp(56px,7vw,96px)}
.ex-steal{flex:1 1 420px;min-width:0}
.ex-steal ol{margin:0;padding:0;list-style:none;counter-reset:s}
.ex-steal li{counter-increment:s;position:relative;padding:0 0 22px 52px;font-size:18px;line-height:1.5}
.ex-steal li::before{content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--d)}
.ex-facts{flex:1 1 360px;min-width:0}
.ex-facts dl{margin:0}
.ex-facts dl div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--line)}
.ex-facts dl div:last-child{border-bottom:1px solid var(--line)}
.ex-facts dt{color:var(--soft);flex:none}
.ex-facts dd{margin:0;font-weight:600;text-align:right}
.ex-facts dd a{color:var(--u)}
.ex-src{margin:16px 0 0;font-size:15px;color:var(--soft)}
.ex-src a{color:var(--u);font-weight:600}
.ex-more{margin-top:clamp(56px,7vw,96px)}
.ex-more ul{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.ex-more li{border-top:1px solid var(--line)}
.ex-more li a{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:6px 28px;padding:20px 0;color:var(--k);text-decoration:none}
.ex-more q{font:600 18px/1.3 var(--d);letter-spacing:-.02em}
.ex-more li a:hover q{color:var(--u)}
.ex-more p{margin:16px 0 0}
@media(max-width:760px){.ex-more li a{grid-template-columns:1fr}}
.ex-next{margin-top:clamp(48px,6vw,80px)}
.ex-next p{margin:0;padding:22px 24px;border-radius:20px;border:1px solid var(--line);max-width:760px}
.ex-next a{color:var(--u);font-weight:700}
.ex-data{margin-top:clamp(40px,5vw,64px)}
.ex-data h2,.ex-faq h2{margin:0 0 18px;font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.03em}
.ex-table{width:100%;max-width:760px;border-collapse:collapse;font-size:16px}
.ex-table th,.ex-table td{padding:12px 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.ex-table tr:last-child th,.ex-table tr:last-child td{border-bottom:1px solid var(--line)}
.ex-table th{font-weight:500;color:var(--soft);padding-right:24px}
.ex-table td{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ex-faq{margin-top:clamp(56px,7vw,96px);max-width:820px}
.ex-q{padding:18px 0;border-top:1px solid var(--line)}
.ex-q:last-child{border-bottom:1px solid var(--line)}
.ex-q h3{margin:0;font:700 18px/1.4 var(--s);letter-spacing:0}
.ex-q p{margin:8px 0 0;color:var(--soft)}
.ex-cmp{margin:16px 0 0;font-size:15px;line-height:1.55}
.ex-facts dd{max-width:62%}
.ex-facts .ex-note dd{font-weight:500;font-size:15px;text-align:left;color:var(--soft)}
.ex-facts dl div{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:4px 20px}
.ex-facts dd{max-width:none;text-align:left}
.ex-facts dd small{font-weight:500;color:var(--soft)}
@media(max-width:560px){.ex-facts dl div{grid-template-columns:1fr}}

/* EXAMPLES v2 (14 Oct 2026): built for skimmers. Screenshot + one blunt verdict first; pins on what to steal;
   everything else one tap away. */
.ex-top{padding-top:clamp(32px,5vw,72px)!important}
.ex-top h1{margin:0;max-width:18ch;font-weight:800;font-size:clamp(34px,5.6vw,76px);line-height:1.02;letter-spacing:-.045em}
.ex-one h1{max-width:20ch}
.ex-lede{margin:16px 0 0;font-size:clamp(18px,1.6vw,22px);color:var(--k)}
.ex-by{margin:16px 0 0;font-size:16px;color:var(--soft)}
.ex-by b{color:var(--k)}
.ex-by a{color:var(--u)}
/* filter chips */
.exf{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.exf-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #d5d8e6;background:#fff;color:var(--k);font:600 15px/1 var(--s);cursor:pointer;transition:background-color .2s,border-color .2s}
.exf-chip:hover{border-color:var(--k)}
.exf-chip[aria-pressed=true]{background:var(--k);border-color:var(--k);color:#fff}
/* the gallery */
.exg{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 24px}
.exg li[hidden]{display:none}
.exg a{display:flex;flex-direction:column;gap:12px;color:var(--k);text-decoration:none}
.exg .exs{border-radius:16px;transition:transform .35s var(--ease)}
.exg a:hover .exs{transform:translateY(-4px)}
.exg-t{display:flex;flex-direction:column;gap:2px}
.exg-t b{font-size:15px;color:var(--soft);font-weight:600}
.exg-t span{font:700 clamp(18px,1.5vw,21px)/1.25 var(--d);letter-spacing:-.02em}
.exg a:hover .exg-t span{color:var(--u)}
.exg-m{font-size:14px;color:var(--soft)}
.exg-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* a screenshot, with pins */
.exs{position:relative;display:block;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:#f4f5f9;aspect-ratio:1512/726}
.exs img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.exs-pin{position:absolute;border:3px solid var(--y);border-radius:10px;box-shadow:0 0 0 2px var(--k);pointer-events:none}
.exs-pin i{position:absolute;top:-16px;left:-16px;width:32px;height:32px;border-radius:50%;background:var(--y);border:2px solid var(--k);display:flex;align-items:center;justify-content:center;font:800 15px/1 var(--d);font-style:normal;color:var(--k)}
.ex-fig{margin:clamp(28px,4vw,48px) 0 0}
.ex-fig .exs{border-radius:24px}
.ex-fig figcaption{margin-top:10px;font-size:14px;color:var(--soft)}
.ex-fig figcaption a{color:var(--u);font-weight:600}
/* the two pins, said big */
.ex-pins{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px}
.ex-pins li{display:flex;gap:16px;align-items:flex-start}
.ex-pins i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--y);border:2px solid var(--k);display:flex;align-items:center;justify-content:center;font:800 17px/1 var(--d);font-style:normal}
.ex-pins span{display:flex;flex-direction:column;gap:2px;font:700 clamp(19px,1.8vw,24px)/1.25 var(--d);letter-spacing:-.02em}
.ex-pins small{font:600 14px/1.3 var(--s);letter-spacing:0;color:var(--soft)}
@media(max-width:700px){.ex-pins{grid-template-columns:1fr}}
/* price among the set */
.exp{margin-top:36px;max-width:640px}
.exp-h{margin:0 0 14px;font-size:16px;color:var(--soft)}
.exp-h b{font:800 24px/1 var(--d);color:var(--k);letter-spacing:-.02em;margin-right:4px}
.exp-track{position:relative;height:28px;border-bottom:2px solid var(--k)}
.exp-track i{position:absolute;bottom:-6px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#c9cee0}
.exp-track i.md{width:2px;height:22px;margin-left:-1px;bottom:0;border-radius:0;background:var(--k)}
.exp-track i.me{width:18px;height:18px;margin-left:-9px;bottom:-10px;background:var(--y);border:2px solid var(--k);z-index:1}
.exp-s{display:flex;justify-content:space-between;margin:12px 0 0;font-size:14px;color:var(--soft)}
/* progressive disclosure */
.ex-more-d{margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ex-more-d summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:22px 0;cursor:pointer;list-style:none;font:700 20px/1.2 var(--d);letter-spacing:-.02em}
.ex-more-d summary::-webkit-details-marker{display:none}
.ex-more-d summary::after{content:"+";margin-left:auto;font-size:26px;color:var(--u)}
.ex-more-d[open] summary::after{content:"\2212"}
.ex-more-d summary span{font:500 15px/1.4 var(--s);letter-spacing:0;color:var(--soft)}
.ex-more-b{padding:0 0 28px;max-width:820px}
.ex-dl{margin:0}
.ex-dl div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:4px 20px;padding:12px 0;border-top:1px solid var(--line)}
.ex-dl dt{color:var(--soft)}
.ex-dl dd{margin:0}
.ex-dl dd a{color:var(--u)}
@media(max-width:560px){.ex-dl div{grid-template-columns:1fr}}
.ex-more-b h2{margin:28px 0 12px;font-size:22px;letter-spacing:-.02em}
.ex-steal{margin:0;padding-left:22px}
.ex-steal li{margin:0 0 10px;line-height:1.5}
.ex-src{margin:16px 0 0;font-size:15px;color:var(--soft)}
.ex-src a{color:var(--u);font-weight:600}
.ex-like{margin-top:clamp(56px,7vw,96px)}
.ex-like h2,.exd h2,.ex-faq h2{margin:0;font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.03em}
.ex-like .exg{margin-top:24px}
.ex-like p{margin:20px 0 0}
/* the counted set, as charts */
.exd{margin-top:clamp(72px,9vw,120px)}
.exd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
@media(max-width:760px){.exd-grid{grid-template-columns:1fr}}
.exd-card{border:1px solid var(--line);border-radius:22px;padding:24px}
.exd-card h3{margin:0 0 16px;font:700 16px/1.3 var(--s);letter-spacing:0;color:var(--soft)}
.exb-row{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr) 28px;gap:12px;align-items:center;padding:6px 0;font-size:15px}
.exb-track{height:14px;border-radius:999px;background:#eef0f6;overflow:hidden}
.exb-fill{display:block;height:100%;border-radius:999px}
.exb-fill.v{background:var(--u)}.exb-fill.l{background:var(--y);box-shadow:inset 0 0 0 1px rgba(11,21,51,.25)}.exb-fill.k{background:var(--k)}
.exb-row b{text-align:right;font-variant-numeric:tabular-nums}
.exd-big p{margin:0;display:flex;flex-direction:column;gap:4px}
.exd-big b{font:800 clamp(48px,6vw,80px)/1 var(--d);letter-spacing:-.05em;color:var(--k)}
.exd-big b small{font-size:.45em;color:var(--soft);letter-spacing:-.02em}
.exd-big span{color:var(--soft)}
.ex-faq{margin-top:clamp(64px,8vw,104px);max-width:820px}
.ex-faq .ex-q{border-top:1px solid var(--line);padding:0}
.ex-faq .ex-q:last-child{border-bottom:1px solid var(--line)}
.ex-faq summary{padding:18px 0;cursor:pointer;font-weight:700;font-size:18px}
.ex-faq .ex-q p{margin:0 0 18px;color:var(--soft)}
.ex-faq h2{margin-bottom:16px}
.ex-next p{max-width:760px;padding:22px 24px;border-radius:20px;border:1px solid var(--line);margin:0}
.ex-next{margin-top:clamp(48px,6vw,80px)}
.ex-next b{color:var(--k)}
/* hub */
.exh{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.exh a{display:flex;flex-direction:column;gap:14px;color:var(--k);text-decoration:none}
.exh-t{display:flex;flex-direction:column;gap:4px}
.exh-t b{font:700 24px/1.15 var(--d);letter-spacing:-.025em}
.exh a:hover b{color:var(--u)}
.exh-t span{color:var(--soft)}
/* v7 round 3 (founder, 14 Oct: "too much text; people scroll and skim; 3 seconds"): one line per section,
   the big thing big, the rest one tap away */
.v7-lede{font-size:clamp(20px,1.9vw,26px);line-height:1.35;font-weight:600;max-width:24em}
.v7-note p.v7-n1,.v7-note p.v7-n2{margin:0;font-size:17px;line-height:1.3;color:var(--soft)}
.v7-note p b{display:inline;font:800 clamp(28px,2.6vw,36px)/1 var(--d);letter-spacing:-.04em;color:var(--k);margin-right:6px}
.v7-note p.v7-n2 b{color:var(--u)}
.v7-note p.v7-n2{margin-top:6px}
.v7-curve{margin:10px 0 6px}
/* the road: eight sentences, set big */
.v7-road q{font:700 clamp(20px,1.8vw,25px)/1.2 var(--d);letter-spacing:-.025em;margin:0 0 10px}
.v7-road h3{font:600 15px/1.3 var(--s);letter-spacing:0;color:var(--u)}
.v7-road li{padding-bottom:4px}
@media(max-width:860px){.v7-road li{padding-bottom:28px}}
.v7-head>p{flex:0 1 auto;font-size:20px;font-weight:600;color:var(--k)}
/* the swipe-file teaser */
.v7-ex{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.v7-ex a{display:flex;flex-direction:column;gap:12px;color:var(--k);text-decoration:none}
.v7-ex img{display:block;width:100%;height:auto;aspect-ratio:1512/726;object-fit:cover;object-position:top;border-radius:16px;border:1px solid var(--line);transition:transform .35s var(--ease)}
.v7-ex a:hover img{transform:translateY(-4px)}
.v7-ex b{font:700 clamp(18px,1.6vw,22px)/1.25 var(--d);letter-spacing:-.02em}
.v7-ex a:hover b{color:var(--u)}
/* membership: four ticks, the rest folded */
.v7-roi-maybe{font-size:16px;color:var(--k);font-weight:600}
.v7-all{margin-top:14px}
.v7-all summary{cursor:pointer;color:var(--u);font-weight:700;font-size:15px;list-style:none;min-height:44px;display:flex;align-items:center}
.v7-all summary::-webkit-details-marker{display:none}
.v7-all summary::after{content:"+";margin-left:8px}
.v7-all[open] summary::after{content:"\2212"}
.v7-all ul{margin:6px 0 0!important}
/* FAQ: closed, one tap each */
.v7 details.ch-q{padding:0!important}
.v7 details.ch-q summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;gap:16px}
.v7 details.ch-q summary::-webkit-details-marker{display:none}
.v7 details.ch-q summary::after{content:"+";margin-left:auto;font:700 24px/1 var(--s);color:var(--u)}
.v7 details.ch-q[open] summary::after{content:"\2212"}
.v7 details.ch-q>div{padding:0 0 20px}
.v7 details.ch-q p{margin:0}
.v7-mk.big .one{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* hero right (founder, 14 Oct: "too long"): one compact founder card, as tall as the left column */
.v7-me{flex:1 1 360px;max-width:440px;margin:0 0 0 auto;align-self:center}
.v7-note{margin:0!important;max-width:none;padding:24px 26px 20px;border-radius:24px;box-shadow:0 1px 2px rgba(11,21,51,.05),0 18px 44px rgba(11,21,51,.10)}
.v7-who{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.v7-who img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.v7-who span{display:flex;flex-direction:column;font-size:14px;color:var(--soft);line-height:1.35}
.v7-who b{font-size:16px;color:var(--k)}
@media(max-width:860px){.v7-me{max-width:none;margin:0}}
.v7-turn{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:var(--y);color:var(--k);font:700 15px/1.35 var(--s);display:inline-block}
.v7-note p.v7-n15{margin:6px 0 0;font-size:17px;line-height:1.3;color:var(--soft)}
.v7-note p.v7-n15 b{display:inline;font:800 clamp(24px,2.2vw,30px)/1 var(--d);letter-spacing:-.04em;color:var(--k);margin-right:6px}

/* HERO v8 (taste skill: type-only statement, "headline across two fields"). Builders on paper, makers on the
   violet field: the line between building and getting paid is the edge itself. No picture on the first screen. */
.v7-fields{margin:0;padding:0}
.v7-fi{display:block;max-width:1200px;margin:0 auto;padding:0 var(--gut);box-sizing:border-box}
.v7-fh{margin:0;font-family:var(--d);font-weight:800;font-size:clamp(32px,8.2vw,132px);line-height:.92;letter-spacing:-.05em}
.v7-fh>span{display:block}
.v7-f1{background:#fff;color:var(--k);padding-top:clamp(56px,9vw,128px);padding-bottom:clamp(14px,1.6vw,24px)}
.v7-f2{background:var(--u);color:#fff;padding-top:clamp(14px,1.6vw,24px)}
.v7-fh mark{background:none;color:var(--y);box-shadow:none}
.v7-f2-body{background:var(--u);color:#fff;padding:clamp(36px,4vw,56px) 0 clamp(56px,7vw,96px)}
.v7-f2-row{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;justify-content:space-between}
.v7-flede{margin:0;flex:1 1 360px;max-width:38ch;font-size:clamp(20px,1.7vw,24px);line-height:1.35;font-weight:600;color:#fff}
.v7-fjoin{flex:0 1 520px;min-width:0}
.v7-fields .v7-form{margin:0;max-width:none;background:#fff;border-color:#fff}
.v7-fields .v7-form:focus-within{outline:3px solid var(--y);outline-offset:2px;border-color:#fff}
.v7-fields .v7-btn{background:var(--y)!important;color:var(--k)!important}
.v7-fields .v7-btn:hover{background:#fff!important;outline:2px solid var(--k)}
.v7-ffine{margin:12px 0 0 10px;font-size:15px;color:#e4e3ff}
.v7-ffine b{color:#fff}
.v7-fields ::selection{background:var(--y);color:var(--k)}
.v7-fields .err{color:var(--y)!important}
/* the proof strip: the founder card laid flat */
.v7-proofstrip{padding-top:clamp(40px,5vw,64px)!important}
.v7-proofstrip .v7-note{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:16px 36px;align-items:center;margin:0!important;max-width:none;padding:24px 28px;border-radius:24px;box-shadow:none}
.v7-proofstrip .v7-who{margin:0}
.v7-proofstrip .v7-n1{grid-column:2}
.v7-proofstrip .v7-turn{grid-column:2;grid-row:2;margin:0;max-width:24ch}
.v7-proofstrip .v7-curve{grid-column:3;grid-row:1/span 2;margin:0;max-height:110px}
.v7-proofstrip .v7-n15{grid-column:4;grid-row:1;margin:0}
.v7-proofstrip .v7-n2{grid-column:4;grid-row:2;margin:0}
.v7-proofstrip .v7-arrow{grid-column:1;grid-row:2;margin:0;font-size:14px}
@media(max-width:900px){
  .v7-proofstrip .v7-note{grid-template-columns:1fr;gap:12px}
  .v7-proofstrip .v7-note>*{grid-column:1!important;grid-row:auto!important}
  .v7-proofstrip .v7-curve{max-height:none}
}
@media(max-width:560px){
  .v7-fjoin{flex-basis:100%}
  .v7-ffine{margin-left:4px}
}
.v7-fh{font-size:clamp(28px,6.9vw,104px)}
.v7-fh .v7-fi{max-width:1360px}
.v7-fields .mc-btn.v7-btn,.v7-fields .mc-btn.v7-btn:hover{box-shadow:none!important}
.v7 .mc-btn,.v7 .mc-btn:hover{box-shadow:none!important}
.v7-fh .v7-fi{max-width:1200px}
.v7-fh{font-size:clamp(28px,6.5vw,88px)}
.v7-fproof{display:flex;align-items:center;gap:12px;margin:18px 0 0 6px;font-size:15px;color:#e4e3ff}
.v7-fproof[hidden]{display:none}
.v7-fproof b{color:#fff}
.v7-fproof .v7-faces img{border-color:var(--u)}
.v7-fproof a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.ex-answer{margin:18px 0 0;max-width:68ch;font-size:17px;line-height:1.6;color:var(--soft)}

/* ===== MAKER BADGE ===== */
.mk-bdg{margin-top:48px;padding-top:32px;border-top:1px solid var(--rl)}
.mk-bdg h2{font:900 22px/1.2 var(--d);text-transform:none;margin-bottom:8px}
.mk-bdg>p{color:var(--k);max-width:60ch;margin-bottom:20px}
.mk-bdg-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mk-bdg-opt{display:flex;flex-direction:column;gap:12px;border:1px solid var(--rl);border-radius:14px;padding:20px}
.mk-bdg-opt.is-dark>img{background:#F4F5FA;border-radius:12px}
.mk-bdg-opt>img{align-self:flex-start;max-width:100%;height:auto}
.mk-bdg-opt textarea{width:100%;font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--k);border:1px solid var(--rl);border-radius:10px;padding:10px;resize:none;background:#fff}
.mk-bdg-copy{align-self:flex-start;font:700 14px/1 var(--s);color:var(--w);background:var(--u);border:0;border-radius:999px;padding:11px 16px;cursor:pointer;transition:transform .15s}
.mk-bdg-copy:active{transform:scale(.97)}
@media(max-width:720px){.mk-bdg-row{grid-template-columns:1fr}}

.v7-flede b{font-weight:800;color:#E4FF3C}
.v7-flede a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.v7-flede a:hover{color:#E4FF3C}
.v7-who .v7-soc{flex-direction:row;gap:8px;margin-top:6px}
.v7-soc a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--rl);border-radius:50%;color:var(--k);transition:color .15s,border-color .15s,transform .15s}
.v7-soc a:hover{color:#4F46E5;border-color:#4F46E5}
.v7-soc a:active{transform:scale(.94)}
.v7-soc svg{width:15px;height:15px;fill:currentColor}
.v7-flede{display:flex;flex-direction:column;gap:8px}
.v7-flede>span,.v7-flede>b{display:block}
.v7-flede .v7-fl1{font-size:.8em;font-weight:500;opacity:.9}
.v7-flede .v7-fl3{font-size:.8em;font-weight:500}

/* Proof strip, 17 Oct 2026: one message, aimed at the reader. The hook is Panche's own lesson turned to "you"
   ("Your product isn't the problem. Nobody knows it exists."), and his story is the proof beside it, in one short
   paragraph. Replaces the scattered numbers + timeline ("just numbers, many different things"). */
.pf{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px 48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px 40px}
.pf-h{margin:0;font:800 clamp(30px,3.3vw,46px)/1.08 var(--d);letter-spacing:-.04em;color:var(--k)}
.pf-h mark{display:inline;background:none;color:var(--u)}
.pf-me{display:flex;flex-direction:column;gap:14px;padding-left:32px;border-left:1px solid var(--line)}
.v7-proofstrip .pf-me .v7-who{margin:0}
.pf-proof{margin:0;font-size:17px;line-height:1.55;color:var(--soft)}
.pf-proof b{color:var(--k);font-weight:800}
.v7-proofstrip .pf-me .v7-arrow{grid-column:auto;grid-row:auto;margin:0;font-size:15px}
@media (max-width:860px){
  .pf{grid-template-columns:1fr;padding:24px 20px;gap:22px}
  .pf-me{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid var(--line)}
}

/* Hero, 17 Oct 2026: the promise is the headline ("Get to $120k a year with the playbook that got me mine.", Panche's
   own $10k MRR as a year), the old slogan shrinks to a kicker. Smaller than the 2-word slogan so it fits in 2+2 lines. */
.v7-fh-pb{font-size:clamp(30px,5.6vw,76px);line-height:.98}
.v7-fkick{display:block;margin:0 0 clamp(10px,1.2vw,16px);font:700 clamp(14px,1.3vw,18px)/1.2 var(--s);letter-spacing:0;color:var(--u)}
.v7-fh-pb .v7-f1{padding-top:clamp(32px,4.5vw,64px)}

/* Revenue chart, 17 Oct 2026 ("aggressive, WOW, dopamine when scrolling"): a navy band where the MRR line stays flat
   for four months, then shoots up while the number rolls $0 → $10,000. Markers only at the real points. */
.pf2{background:var(--k);color:#fff;padding:clamp(48px,7vw,96px) 0;overflow:hidden}
.pf2-in{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.pf2-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.pf2-who{display:flex;align-items:center;gap:12px;font:700 16px/1 var(--s);color:#C9CEDD}
.pf2-who img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--y)}
.pf2-num{margin:0;font:800 clamp(56px,11vw,168px)/.9 var(--d);letter-spacing:-.05em;color:var(--y);font-variant-numeric:tabular-nums}
.pf2-num small{font-size:.3em;color:#fff;letter-spacing:0;margin-left:.15em}
.pf2-chart{position:relative;margin-top:clamp(18px,3vw,36px);height:clamp(180px,26vw,320px)}
.pf2-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pf2-line{fill:none;stroke:var(--y);stroke-width:5;stroke-linecap:round}
.pf2-area{fill:rgba(228,255,60,.10)}
.pf2-marks{list-style:none;margin:0;padding:0}
.pf2-marks li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;padding-bottom:14px;font:600 13px/1.2 var(--s);color:#C9CEDD;white-space:nowrap}
.pf2-marks li::after{content:"";position:absolute;bottom:-7px;width:14px;height:14px;border-radius:50%;background:var(--k);border:3px solid var(--y)}
.pf2-marks b{font:800 clamp(18px,2.2vw,28px)/1 var(--d);color:#fff;letter-spacing:-.03em}
.pf2-marks .pf2-now{transform:translate(-100%,-100%);align-items:flex-end}
.pf2-marks .pf2-now::after{right:-7px;background:var(--y)}
.pf2-marks .pf2-now b{color:var(--y);font-size:clamp(24px,3vw,40px)}
.pf2-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(28px,4vw,44px)}
.pf2-btn{display:inline-flex;align-items:center;height:58px;padding:0 30px;border-radius:999px;background:var(--y);color:var(--k)!important;font:800 18px/1 var(--s);text-decoration:none;transition:transform .15s var(--ease)}
.pf2-btn:hover{transform:translateY(-2px) scale(1.02)}
.pf2-link{color:#fff!important;font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .pf2 .pf2-line{stroke-dasharray:1;stroke-dashoffset:1}
  .pf2 .pf2-area{opacity:0}
  .pf2 .pf2-marks li{opacity:0;translate:0 10px}
  .pf2.on .pf2-line{transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1);stroke-dashoffset:0}
  .pf2.on .pf2-area{transition:opacity .8s ease 1.6s;opacity:1}
  .pf2.on .pf2-marks li{transition:opacity .4s ease var(--d),translate .5s cubic-bezier(.34,1.56,.64,1) var(--d);opacity:1;translate:0 0}
  .pf2.on .pf2-now b{animation:pf2pop .6s cubic-bezier(.34,1.56,.64,1) 2.4s both}
}
@keyframes pf2pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
@media (max-width:640px){
  .pf2-marks li{font-size:11px}
  .pf2-marks li:nth-child(2){display:none}
}
.pf2-top{flex-direction:column;align-items:flex-start;gap:10px}
.pf2-num{min-height:.9em}
.pf2-rr{font:600 15px/1.3 var(--s);color:#C9CEDD;margin-top:-4px}

/* The payoff when the count lands: the number pops and glows, confetti bursts out of it (dopamine, 17 Oct). */
.pf2-num{position:relative;display:inline-block;transform-origin:left bottom}
.pf2-num.pop{animation:pf2land .7s cubic-bezier(.34,1.56,.64,1)}
.pf2-num.pop span{animation:pf2glow 1.8s ease-out}
@keyframes pf2land{0%{transform:scale(1)}35%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes pf2glow{0%{text-shadow:0 0 0 rgba(228,255,60,0)}25%{text-shadow:0 0 48px rgba(228,255,60,.75)}100%{text-shadow:0 0 0 rgba(228,255,60,0)}}
.pf2-boom{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.pf2-boom i{position:absolute;width:16px;height:10px;border-radius:3px;opacity:0;animation:pf2fly 1.6s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes pf2fly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--r)) scale(.6)}}
@media (prefers-reduced-motion:reduce){.pf2-boom{display:none}}
@media (max-width:640px){.pf2-marks .pf2-now{display:none}.pf2-chart{margin-top:30px}}

/* Bootstrapped OS block on the home page: the share image, linked to /bootstrapped-os */
.v7-os{display:block;max-width:860px;margin:28px auto 0;border:2px solid var(--k,#0B1533);border-radius:22px;overflow:hidden;transition:transform .15s}
.v7-os:hover{transform:translateY(-2px)}
.v7-os img{display:block;width:100%;height:auto}
.v7-os-note{max-width:860px;margin:14px auto 0;font-weight:600}
/* "As featured on Indie Hackers" under the hero lede, linking to the case study */
.v7-flede a.v7-ih{display:flex;align-items:center;gap:10px;margin-top:22px;width:max-content;font-size:14px;font-weight:600;color:rgba(255,255,255,.85);text-decoration:none}
.v7-flede a.v7-ih img{display:block;border-radius:4px}
.v7-flede a.v7-ih:hover{color:#fff}
.v7-flede a.v7-ih:hover span{text-decoration:underline}
/* What I got wrong: one lesson at a time from the founder's own mistakes, by topic */
.wl-box{max-width:860px;margin:28px auto 0;padding:28px;background:#fff;border:2px solid var(--k);border-radius:22px}
.wl-tabs{display:flex;flex-wrap:wrap;gap:8px}
.wl-tabs button{padding:10px 16px;border:2px solid var(--k);border-radius:999px;background:#fff;color:var(--k);font:700 15px/1 var(--s);cursor:pointer}
.wl-tabs button[aria-selected="true"]{background:var(--k);color:#fff}
.wl-list{margin:24px 0 0;padding:0;list-style:none}
.wl-list li{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start;padding:18px 0;border-top:1px solid rgba(11,21,51,.12)}
.wl-list li:first-child{border-top:0;padding-top:0}
.wl-n{grid-row:span 2;min-width:96px;padding:10px 0;border-radius:16px;background:var(--y);color:var(--k);font:800 34px/1 var(--d);text-align:center}
.wl-list h3{margin:4px 0 0;font:800 clamp(22px,2.4vw,28px)/1.2 var(--d);color:var(--k)}
.wl-list p{margin:0;font-size:18px;line-height:1.5}
.wl.js .wl-list li{display:none;border-top:0;padding:0}
.wl.js .wl-list li.on{display:grid;animation:wlIn .25s ease-out}
@keyframes wlIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wl.js .wl-list li.on{animation:none}}
.wl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}
.wl-next{padding:14px 22px;border:2px solid var(--k);border-radius:14px;background:var(--u);color:#fff;font:800 16px/1 var(--s);cursor:pointer;box-shadow:3px 3px 0 var(--k);transition:transform .12s}
.wl-next:hover{transform:translateY(-2px)} .wl-next:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--k)}
@media (max-width:640px){.wl-box{padding:20px}.wl-n{min-width:72px;font-size:26px}.wl-list li{column-gap:14px}}
/* Bootstrapped OS on the homepage: what it does, in three lines */
.v7-os-do{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:18px auto 0;padding:0;list-style:none}
.v7-os-do li{display:flex;flex-direction:column;gap:6px;padding:18px;border:2px solid var(--k);border-radius:18px;background:#fff}
.v7-os-do b{font:800 18px/1.2 var(--d);color:var(--k)}
.v7-os-do span{font-size:15px;line-height:1.45}
@media (max-width:720px){.v7-os-do{grid-template-columns:1fr}}
/* Bootstrapped OS: agent catalog */
.post .agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0 8px}
.post .agent{display:flex;flex-direction:column;gap:8px;padding:18px 16px;border:2px solid var(--k);border-radius:14px;background:var(--w)}
.post .agent .role{font:800 15px/1.2 var(--d);letter-spacing:-.02em;color:var(--k)}
.post .agent p{margin:0;font:500 14px/1.4 var(--s);color:var(--mute);flex:1}
.post .agent b{display:block;font:900 26px/1 var(--d);letter-spacing:-.04em;color:var(--u);background:none}
.post .agent .pr{font:600 12.5px/1.35 var(--s);color:var(--mute)}
.post .agents-note{font-size:13px;color:var(--mute)}
@media (max-width:860px){.post .agents{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.post .agents{grid-template-columns:1fr}}



/* Home: the road (where you start, how you grow). One row per step: the step, my number, what's free and what members get. */
.wy{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;border-top:1px solid var(--rl)}
.wy li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr);gap:20px 36px;padding:28px 0;border-bottom:1px solid var(--rl);align-items:start}
.wy-s{display:grid;grid-template-columns:44px 1fr;column-gap:14px}
.wy-n{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--k);border-radius:50%;font:700 16px/1 var(--d)}
.wy-s h3{margin:2px 0 4px;font:700 clamp(20px,1.8vw,24px)/1.15 var(--d);letter-spacing:-.02em}
.wy-s p{margin:0;font:500 15px/1.4 var(--s);color:var(--mute)}
.wy-p b{display:block;font:900 clamp(28px,3vw,40px)/1 var(--d);letter-spacing:-.04em;color:var(--u)}
.wy-p span{display:block;margin-top:8px;font:500 15px/1.4 var(--s)}
.wy-g{display:flex;flex-direction:column;gap:10px}
.wy-free{display:inline-block;font:700 15px/1.4 var(--s);color:var(--k);text-decoration:none;background:var(--y);border-radius:12px;padding:10px 14px}
a.wy-free:hover{transform:translateY(-1px)}
.wy-list b{font-weight:800}
.wy-m{font:600 14px/1.4 var(--s);color:var(--mute);padding-left:22px;position:relative}
.wy-m::before{content:"";position:absolute;left:2px;top:3px;width:12px;height:12px;border-radius:3px;background:var(--u)}
.wy-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px}
.wy-cta span{font:600 15px/1.4 var(--s);color:var(--mute)}
@media(max-width:900px){.wy li{grid-template-columns:1fr;gap:14px}.wy-p,.wy-g{padding-left:58px}}

/* Workshop player (home and /bootstrapped-os): one portrait video beside a chapter list, like an editor's timeline. */
.wsp{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;margin:clamp(24px,3vw,40px) 0 8px}
.wsp-stage{position:relative;border-radius:18px;overflow:hidden;background:var(--k);box-shadow:0 1px 0 var(--rl)}
.wsp-v{display:block;width:100%;height:auto;aspect-ratio:4/5;background:var(--k)}
.wsp-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.wsp-h{margin:0;font:700 13px/1.2 var(--s);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.wsp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:none}
.wsp-list li{margin:0;padding:0}
.wsp-list li::before{content:none}
.wsp-ch{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;align-items:center;padding:10px 12px;border:1px solid var(--rl);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.wsp-ch:hover{border-color:var(--k)}
.wsp-ch:focus-visible{outline:3px solid var(--u);outline-offset:2px}
.wsp-ch.on{border-color:var(--k);background:var(--y)}
.wsp-ch img{width:54px;height:68px;object-fit:cover;border-radius:8px;display:block}
.wsp-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.wsp-k{font:700 12px/1.2 var(--s);color:var(--mute);letter-spacing:.02em}
.wsp-ch.on .wsp-k{color:var(--k)}
.wsp-t b{font:700 17px/1.2 var(--d);letter-spacing:-.01em;color:var(--k)}
.wsp-t span:last-child{font:500 14px/1.35 var(--s);color:var(--k)}
.wsp-full{align-self:flex-start;font:700 15px/1.3 var(--s);color:var(--u)}
@media(max-width:820px){.wsp{grid-template-columns:1fr}.wsp-stage{max-width:420px;width:100%;margin:0 auto}}


/* Inside an article column: no bold-text highlight on chapter titles, and a narrower video so the list breathes */
.post .wsp{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px}
.wsp-t b{background:none!important;box-shadow:none!important;text-decoration:none!important;padding:0!important}
@media(max-width:820px){.post .wsp{grid-template-columns:1fr}}
.post ol.wsp-list{margin:0;padding:0}.post .wsp-list li{margin:0;padding:0}