/* Back of House landing. Tokens copied from 33_client_deck/client.html (the drafting-table system). */
@font-face{font-family:"Archivo";src:url(fonts/archivo-wdth.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Kalam";src:url(fonts/kalam-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kalam";src:url(fonts/kalam-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F7F8F5; --ink:#18211C; --check:#E2ECDD; --rule:#6F9A7A; --red:#C3302A;
  --steel:#5D686C; --plate:#2A3033; --biro:#24346B; --hair:#D3D9D2; --check-ink:#4E6A55;
  --amber:#F5A800; --amber-ink:#18211C; --card:#FFFFFF; --wa:#ECE5DB; --wa-in:#D9F2C4; --wa-out:#FFFFFF;
  --shadow:0 12px 30px rgba(24,33,28,.14),0 1px 2px rgba(24,33,28,.12);
  --gut:clamp(16px,4.4vw,72px); --max:1320px; --amber-soft:#FCE3A0;
  --img-filter:brightness(1.07) contrast(1.12); --img-blend:multiply;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141B17; --ink:#E6ECE4; --check:#1F2B25; --rule:#5E8A6A; --red:#EF6B5F;
    --steel:#A2AEA8; --plate:#0E1311; --biro:#AFC0FF; --hair:#2C3832; --check-ink:#A9C4AF;
    --card:#1B241F; --wa:#1D2622; --wa-in:#2D4A2A; --wa-out:#25302B;
    --shadow:0 14px 34px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4);
    --img-filter:invert(.93) hue-rotate(180deg) contrast(1.8) brightness(1.02); --img-blend:screen;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141B17; --ink:#E6ECE4; --check:#1F2B25; --rule:#5E8A6A; --red:#EF6B5F;
  --steel:#A2AEA8; --plate:#0E1311; --biro:#AFC0FF; --hair:#2C3832; --check-ink:#A9C4AF;
  --card:#1B241F; --wa:#1D2622; --wa-in:#2D4A2A; --wa-out:#25302B;
  --shadow:0 14px 34px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4);
  --img-filter:invert(.93) hue-rotate(180deg) contrast(1.8) brightness(1.02); --img-blend:screen;
  color-scheme:dark;
}

*{box-sizing:border-box}
@media (max-width:480px){:root{--gut:16px}}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;
  font-size:clamp(17px,1.15vw,19px);line-height:1.5;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
::selection{background:color-mix(in srgb,var(--biro) 22%,transparent);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--biro);outline-offset:3px;border-radius:2px}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2{margin:0;font-stretch:125%;font-weight:800;letter-spacing:-.018em;line-height:1.04;text-wrap:balance}
h2{font-size:clamp(32px,4vw,58px);max-width:22ch}
p{margin:0;text-wrap:pretty}
b,strong{font-weight:750}
.hand{font-family:"Kalam",cursive;color:var(--biro)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:3px;border:2px solid var(--ink);
  background:var(--ink);color:var(--paper);font:inherit;font-weight:750;font-stretch:112%;font-size:17px;text-decoration:none;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),background-color .18s,color .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:transparent;color:var(--paper)}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}

/* top bar */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;padding:0 var(--gut);
  background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--hair)}
.brand{display:block;width:clamp(170px,17vw,240px)}
.lock-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lock-light{display:none}:root:not([data-theme="light"]) .lock-dark{display:block}}
:root[data-theme="dark"] .lock-light{display:none}:root[data-theme="dark"] .lock-dark{display:block}
.top nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-size:15px;font-weight:600}
.top nav a:not(.btn){text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent}
.top nav a:not(.btn):hover{border-bottom-color:var(--ink)}
@media (max-width:860px){.top nav a:not(.btn){display:none}}

/* shared section furniture */
.sec{padding:clamp(56px,8vw,120px) 0}
.sec-lg{padding:clamp(72px,10vw,150px) 0}
.no{display:block;color:var(--red);font-weight:700;font-stretch:112%;font-size:16px;margin-bottom:14px}
.intro{max-width:52ch;margin-top:22px;font-size:clamp(17px,1.3vw,20px);color:var(--ink)}
.foot-note{margin-top:28px;max-width:80ch;font-size:14.5px;line-height:1.45;color:var(--steel);font-stretch:92%}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.book .two{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media (max-width:900px){.book .two{grid-template-columns:1fr}}
.stamp{display:inline-block;color:var(--red);border:3px solid currentColor;border-radius:3px;padding:2px 12px;font-weight:900;font-stretch:125%;
  letter-spacing:.06em;transform:rotate(-6deg);font-size:22px;line-height:1.2;opacity:.9;pointer-events:none}
.num{font-family:"Kalam";font-weight:700;color:var(--biro);display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border:2px solid var(--biro);border-radius:50%;font-size:21px;line-height:1;background:var(--paper)}

/* guest check */
.chk{position:relative;background:var(--check);color:var(--ink);border-radius:2px;padding:24px 28px 28px;box-shadow:var(--shadow)}
.chk.torn{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:12px}
.chk.torn::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:11px;
  background:linear-gradient(-45deg,transparent 7px,var(--check) 7px) 0 0/14px 11px repeat-x,linear-gradient(45deg,transparent 7px,var(--check) 7px) 0 0/14px 11px repeat-x}
.chk .ch{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-bottom:2px solid var(--rule);padding-bottom:10px;margin-bottom:4px}
.chk .ch b{font-stretch:125%;font-weight:800;font-size:clamp(20px,1.6vw,24px);line-height:1.15}
.chk .serial{color:var(--red);font-weight:700;font-stretch:112%;font-size:16px;white-space:nowrap}
.ln{display:grid;grid-template-columns:1fr auto;gap:14px;border-bottom:1px solid var(--rule);align-items:center;min-height:52px;padding:6px 0}
.ln .it{font-size:16.5px;line-height:1.3}
.ln .it small{display:block;font-size:13.5px;color:var(--steel);margin-top:3px}
.ln .v{font-family:"Kalam";color:var(--biro);text-align:right;white-space:nowrap;font-size:24px;line-height:1.1}

/* ---------------- HERO ---------------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,56px);align-items:center;
  min-height:calc(100svh - 68px);max-width:1520px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--gut) clamp(40px,5vw,72px)}
.hero::before{content:"";position:absolute;inset:14px calc(var(--gut) / 2.4);border:1px solid var(--hair);pointer-events:none}
.hero-h{font-size:clamp(46px,6.3vw,104px);line-height:.98;letter-spacing:-.024em;max-width:9.5ch}
.hero-h .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero-h .w>span{display:inline-block}
.hero-line{margin-top:clamp(18px,2.2vw,28px);max-width:42ch;font-size:clamp(17px,1.3vw,20px);line-height:1.45}
.hero-line b{font-weight:750}
.hero-status{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--steel);max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.6vw,30px)}
.hero-facts{margin:clamp(22px,2.8vw,36px) 0 0;max-width:46ch;border-top:1px solid var(--hair)}
.hero-facts div{display:grid;grid-template-columns:78px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.4}
.hero-facts dt{font-family:"Kalam",cursive;color:var(--biro);font-size:18px;line-height:1.2;padding-top:1px}
.hero-facts dd{margin:0}
.hero-who{margin-top:16px;font-size:14.5px;color:var(--steel)}
.hero-plan{position:relative;margin:0}
.plan{display:block;width:100%;height:auto;overflow:visible}
.plan-note{position:absolute;left:4%;bottom:15%;font-size:clamp(17px,1.5vw,24px);transform:rotate(-4deg);margin:0}
.title-block{display:grid;grid-template-columns:1fr auto;max-width:330px;margin:10px 0 0 auto;border:1.5px solid var(--steel);font-size:12.5px;line-height:1.25;color:var(--ink);background:var(--paper)}
.title-block>span{padding:5px 9px;border-bottom:1px solid var(--hair)}
.title-block .tb-a{font-weight:800;font-stretch:112%;border-right:1px solid var(--hair)}
.title-block .tb-b{color:var(--steel)}
.title-block .tb-c{grid-column:1/-1;font-weight:700;font-size:14px}
.title-block .tb-d{border-bottom:0;border-right:1px solid var(--hair);color:var(--steel)}
.title-block .tb-e{border-bottom:0;color:var(--red);font-weight:700}
@media (max-width:900px){
  .hero-plan{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:12px}
  .hero-plan .plan{grid-column:1/-1}
  .plan-note{position:static;margin:8px 0 0 4px;font-size:19px;transform:rotate(-3deg);transform-origin:left bottom}
  .title-block{margin:10px 0 0;max-width:200px;font-size:10.5px}
  .title-block .tb-c{font-size:11.5px}
  .title-block>span{padding:3px 7px}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:32px;row-gap:22px}
  .hero-copy{display:contents}
  .hero-head{order:1}.hero-plan{order:2}.hero-body{order:3}
  .hero-h{max-width:none}
  .hero-line{margin-top:0}
  .hero::before{display:none}
}
/* under 640 the sheet is 360 px wide: labels, bubbles and rings scale up so the plan still reads */
@media (max-width:640px){
  svg.plan .room{font-size:44px}
  svg.plan .room.mid{font-size:30px}
  svg.plan .room-s{font-size:28px}
  svg.plan .room-s.wi{transform:translateX(-8px)}
  svg.plan .room-s.tiny,.plan .room-s.lg{display:none}
  svg.plan .room-s.sm{display:block}
  svg.plan .hand-s{font-size:34px}
  svg.plan .num-hand{font-size:46px;transform:translateY(8px)}
  svg.plan circle.bubble{r:32px}
  svg.plan .biro{stroke-width:3.6}
  svg.plan .ink-wall{stroke-width:2.4}
  svg.plan .ink-inner{stroke-width:2}
}

/* plan linework */
.plan .ink{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.plan .ink-wall{stroke-width:2.1}
.plan .wall-ghost{stroke-width:.9;opacity:.45}
.plan .wall-in{stroke-width:1.6}
.plan .ink-inner{stroke-width:1.7}
.plan .ink-fix{stroke-width:1.15}
.plan .ink-furn{stroke-width:1.05}
.plan .ink.win{stroke-width:3.2;stroke:var(--steel)}
.plan .ink.dash{stroke-dasharray:.012 .012;stroke-width:1;stroke:var(--steel)}
.plan .hatch-line{stroke:var(--steel);stroke-width:.7;opacity:.55}
.plan .floor-tint{fill:var(--check)}
.plan .zone-fill{fill:var(--rule);opacity:0;transition:opacity .35s}
.plan .room{font:700 17px "Archivo",sans-serif;font-stretch:112%;fill:var(--ink)}
.plan .room-s{font:600 12.5px "Archivo",sans-serif;fill:var(--steel)}
.plan .hand-s{font:400 17px "Kalam",cursive;fill:var(--biro)}
.plan .room-s.sm{display:none}
.plan .biro{stroke:var(--biro);stroke-width:2.2;fill:none}
.plan .bubble{fill:var(--paper)}
.plan .num-hand{font:700 22px "Kalam",cursive;fill:var(--biro)}
.plan .mark a{cursor:pointer}
.plan .mark.is-off{opacity:0}
.plan .mark{transition:opacity .25s}
.plan .hit{fill:transparent;cursor:pointer;pointer-events:all}

/* draw-in initial state (JS adds .is-drawing; reduced motion never does) */
.js-motion .plan.is-drawing .ink{stroke-dasharray:1 1;stroke-dashoffset:1}
.js-motion .plan.is-drawing .ink.dash{stroke-dasharray:.012 .012;stroke-dashoffset:0;opacity:0}
.js-motion .plan.is-drawing .fills,.js-motion .plan.is-drawing .labels,.js-motion .plan.is-drawing .num-hand,.js-motion .plan.is-drawing .bubble{opacity:0}
.js-motion .hero-plan .title-block,.js-motion .hero-plan .plan-note{opacity:0}
.js-motion .hero-h .w>span{transform:translateY(105%)}
.js-motion .hero-line,.js-motion .hero-status,.js-motion .hero-cta,.js-motion .hero-facts,.js-motion .hero-who{opacity:0}

/* ---------------- No. 01 PROBLEM ---------------- */
.sheets{position:relative;margin:clamp(36px,5vw,64px) 0 0}
.sheets img{width:100%;mix-blend-mode:var(--img-blend);filter:var(--img-filter)}
.sheet-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.sheet-labels span{font-size:15px;color:var(--steel)}
.sheet-labels b{display:block;font-size:clamp(20px,2.2vw,32px);font-stretch:125%;font-weight:800;color:var(--ink);line-height:1.1}
.problem-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start;margin-top:clamp(40px,5vw,72px)}
.lede{font-size:clamp(23px,2.4vw,36px);line-height:1.3;font-stretch:108%;font-weight:600;letter-spacing:-.01em}
.costs{transform:rotate(1deg)}
.costs .ln{min-height:84px}
.costs .ln .v{font-size:clamp(30px,3vw,44px)}
.working{margin-top:28px;max-width:80ch}
.working summary{display:inline-block;cursor:pointer;font-size:14.5px;color:var(--steel);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;list-style:none}
.working summary::-webkit-details-marker{display:none}
.working summary:hover{color:var(--ink)}
.working[open] summary{color:var(--ink)}
.src{margin-top:14px;font-size:14px;color:var(--steel)}
@media (max-width:900px){.problem-row{grid-template-columns:1fr}.sheet-labels span{font-size:13px}}

/* ---------------- No. 02 LEAKS ---------------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end}
.sec-head .intro{margin-top:0}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}}
.leaks .rooms{margin-top:clamp(32px,4vw,52px)}
.leaks{background:linear-gradient(var(--paper),var(--paper))}
.leaks-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:8px}
.rooms{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.room-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 6px;border:1.5px solid var(--hair);border-radius:24px;background:var(--paper);
  color:var(--ink);font:inherit;font-size:15.5px;font-weight:650;cursor:pointer;transition:border-color .15s,background-color .15s}
.room-btn .num{width:30px;height:30px;font-size:17px;border-width:1.5px}
.room-btn:hover{border-color:var(--ink)}
.room-btn[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.room-btn[aria-selected="true"] .num{background:var(--paper)}
.leaks .plan{cursor:crosshair}
.leaks .plan .zone-fill.on{opacity:.22}
.leaks .plan .zone-fill.hov{opacity:.12}
.ticket-wrap{position:sticky;top:96px}
.ticket{min-height:520px}
.ticket .ch .serial{font-size:15px}
.ticket h3{margin:18px 0 8px;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--check-ink);font-stretch:112%}
.ticket ul{margin:0;padding:0;list-style:none}
.ticket ul li{position:relative;padding:4px 0 4px 22px;font-size:16px;line-height:1.38}
.ticket ul li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:6px;border-left:2px solid var(--biro);border-bottom:2px solid var(--biro);transform:rotate(-45deg)}
.ticket .f-title{font-size:18px;font-weight:800;font-stretch:108%;line-height:1.25;margin:2px 0 6px}
.ticket .tot{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);padding:10px 0;margin-top:6px}
.ticket .tot .lab{font-size:14px;line-height:1.3;color:var(--check-ink)}
.ticket .amt{font-family:"Kalam";font-weight:700;color:var(--biro);font-size:clamp(34px,3.2vw,46px);line-height:1;white-space:nowrap;padding:0 .12em}
:root[data-theme="dark"] .ticket .amt{color:#18211C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ticket .amt{color:#18211C}}
.ticket .conf{margin-top:8px;font-size:13.5px;color:var(--check-ink)}
.ticket .next{margin-top:14px;font-size:16px;line-height:1.4}
.ticket .next b{font-stretch:112%}
.ticket-stamp{position:absolute;right:18px;top:-14px}
.ticket .swap{transition:opacity .22s}
.ticket.is-swapping .swap{opacity:0}
@media (max-width:980px){
  .leaks-grid{grid-template-columns:1fr}
  .ticket-wrap{position:relative;top:0}
  .ticket{min-height:0}
  .rooms{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gut) * -1) 14px;padding:2px var(--gut) 6px;scrollbar-width:none}
  .rooms::-webkit-scrollbar{display:none}
  .room-btn{flex:none}
}

/* ---------------- No. 03 AUDIT ---------------- */
.nlist{list-style:none;margin:28px 0 0;padding:0}
.nlist li{display:grid;grid-template-columns:56px 1fr;align-items:start;padding:18px 0;border-top:1px solid var(--hair);font-size:clamp(19px,1.5vw,23px);line-height:1.35}
.nlist li .num{margin-top:-3px}
.nlist.big b{display:block;font-size:clamp(21px,1.7vw,26px);font-stretch:118%;font-weight:800;margin-bottom:4px}
.nlist.big li{font-size:clamp(17px,1.25vw,19px)}
.more{margin-top:14px;color:var(--steel);font-size:17px;max-width:44ch}
.page-fig{position:relative;margin:0}
.page{background:#fff;box-shadow:var(--shadow);transform:rotate(.8deg)}
.page-fig .stamp{position:absolute;right:6%;bottom:16%}
.page-fig figcaption,.drawing figcaption{margin-top:14px;font-size:14px;color:var(--steel)}

/* ---------------- No. 07 SPECIALISTS: a ledger, roles down, jobs across ---------------- */
.ledger{margin-top:clamp(28px,4vw,48px);border-top:2px solid var(--ink)}
.lg-head{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr));gap:0 clamp(14px,1.6vw,28px);padding:12px 0 10px;border-bottom:1px solid var(--hair);
  font-size:13px;font-weight:800;font-stretch:112%;letter-spacing:.02em;color:var(--check-ink)}
.lg-row{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr));gap:0 clamp(14px,1.6vw,28px);padding:22px 0 24px;border-bottom:1px solid var(--hair)}
.lg-row h3{margin:0;font-size:clamp(22px,1.9vw,28px);font-stretch:125%;font-weight:800;line-height:1.02;letter-spacing:-.015em}
.lg-row h3 .hand{display:block;margin-top:10px;font-size:18px;line-height:1.25;font-weight:400;font-stretch:100%;letter-spacing:0;max-width:22ch}
.lg-row dl{display:contents}
.lg-row dl>div{min-width:0}
.lg-row dt{display:none;font-size:12.5px;font-weight:800;font-stretch:112%;color:var(--check-ink);margin-bottom:3px}
.lg-row dd{margin:0;font-size:15.5px;line-height:1.4}
@media (max-width:980px){
  .lg-head{display:none}
  .lg-row{grid-template-columns:1fr;gap:14px;padding:20px 0}
  .lg-row dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
  .lg-row dt{display:block}
}
@media (max-width:560px){
  .lg-row{padding:18px 0;gap:10px}
  .lg-row h3 .hand{font-size:17px;margin-top:6px}
  .lg-row dl{grid-template-columns:1fr;gap:10px}
  .lg-row dd{font-size:15px}
}
.tag{display:inline-block;color:var(--red);border:1.5px solid currentColor;border-radius:2px;padding:0 6px;font-weight:700;font-size:12.5px;letter-spacing:.04em;line-height:1.55;transform:rotate(-2deg);margin-right:6px}

/* ---------------- No. 04 HOW: a two-lane ledger, printed in full ---------------- */
.how-cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:0 clamp(16px,2vw,32px);margin-top:clamp(28px,4vw,48px);padding-bottom:10px;border-bottom:2px solid var(--ink);
  font-weight:800;font-stretch:112%;font-size:19px;line-height:1.15}
.how-cols small{display:block;font-weight:500;font-size:13.5px;color:var(--steel);font-stretch:92%;margin-top:2px}
.steps{margin:0;padding:0;list-style:none}
.step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:0 clamp(16px,2vw,32px);border-bottom:1px solid var(--hair)}
.step .stg{grid-column:1/-1;font-family:"Kalam";font-weight:700;color:var(--biro);font-size:20px;line-height:1;padding:22px 0 0}
.step .hd{display:flex;align-items:center;gap:12px;padding:18px 0;font-weight:800;font-stretch:112%;font-size:19px;line-height:1.15}
.step .hd .num{width:34px;height:34px;font-size:19px}
.step .you,.step .us{padding:18px 0;font-size:16.5px;line-height:1.4;align-self:center}
.step .you{position:relative;padding:18px 16px;background:var(--check);align-self:stretch;display:flex;align-items:center}
.step .call{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:10px 0 12px;font-family:"Kalam";color:var(--biro);font-size:18px;border-top:1px dashed var(--hair)}
.step .dia{width:14px;height:14px;background:var(--paper);border:2px solid var(--biro);transform:rotate(45deg);flex:none}
.how .foot-note{margin-top:28px}
@media (max-width:720px){
  .how-cols{display:none}
  .steps{border-top:2px solid var(--ink);margin-top:26px}
  .step{grid-template-columns:1fr;gap:0}
  .step .stg{padding-top:18px}
  .step .hd{padding:14px 0 8px;font-size:18px}
  .step .you,.step .us{padding:10px 12px;align-self:auto;display:block;font-size:15.5px}
  .step .you::before{content:"You: ";font-weight:800}
  .step .us::before{content:"Us: ";font-weight:800}
  .step .us{border:1px solid var(--hair);border-top:0;margin-bottom:14px}
  .step .call{justify-content:flex-start;border-top:0;padding:0 0 14px}
}

/* ---------------- No. 04 DAY: tap a moment, the thread plays ---------------- */
.day-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(32px,6vw,96px);align-items:center}
.chapters{margin:32px 0 0;display:grid;gap:0}
.chap{position:relative;display:block;width:100%;text-align:left;padding:14px 12px 14px 56px;border:0;border-top:1px solid var(--hair);background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background-color .2s}
.chap:hover{background:color-mix(in srgb,var(--check) 60%,transparent)}
.chap .cn{position:absolute;left:4px;top:16px;width:36px;height:36px;border:2px solid var(--biro);border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 20px/1 "Kalam",cursive;color:var(--biro);background:var(--paper);transition:background-color .2s,color .2s}
.chap .who{display:block;font-size:19px;line-height:1}
.chap b{display:block;margin-top:6px;font-size:clamp(18px,1.5vw,23px);font-stretch:112%;line-height:1.2}
.chap[aria-selected="true"]{background:var(--check)}
.chap[aria-selected="true"] .cn{background:var(--biro);color:var(--paper)}
.phone-wrap{position:relative}
.phone{position:relative;border-radius:34px;border:10px solid var(--plate);background:var(--wa);box-shadow:var(--shadow);overflow:hidden}
.screen{overflow:hidden}
.bar{background:var(--plate);color:#fff;font-weight:700;font-size:16px;padding:14px 18px 12px;display:flex;justify-content:space-between;align-items:center}
.bar span{font-weight:500;font-size:13px;opacity:.75}
.msgs{padding:14px 12px 4px;display:flex;flex-direction:column}
.m{background:var(--wa-out);border-radius:9px;padding:10px 12px;font-size:16px;line-height:1.38;margin-bottom:10px;max-width:90%;box-shadow:0 1px 1px rgba(0,0,0,.08);transition:opacity .35s,transform .35s}
.m.in{background:var(--wa-in);align-self:flex-end;max-width:80%}
.m .h{display:block;font-weight:800;font-size:13px;letter-spacing:.04em;margin:2px 0 4px}
.m .r{display:block;margin:4px 0}
.m i{display:block;margin-top:4px;color:var(--steel);font-size:14.5px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--red);margin-right:7px}
.s-paper{background:#fff;color:#18211C;padding:22px 20px}
.s-paper .t{font-family:Georgia,serif;font-weight:700;font-size:25px;color:#1F3B2D;line-height:1.1}
.s-paper .sub{font-size:13px;color:#5D686C;margin:4px 0 10px}
.s-paper .sec-h{font-size:12.5px;font-weight:800;letter-spacing:.08em;border-bottom:1.5px solid #1F3B2D;padding-bottom:4px;margin:14px 0 8px}
.s-paper .row{background:#F2F4EF;border-left:4px solid #1F3B2D;padding:9px 11px;font-size:16px;line-height:1.38;transition:opacity .35s,transform .35s}
.s-paper .row.cel{border-left-color:#5C78A8}
.s-paper .row.wr{border-left-color:#C3302A}
.day-stamp{position:absolute;right:-12px;top:-14px;z-index:3}
.day .foot-note{margin-top:40px}
/* without JS the three screens stack as cards */
.day:not(.js-play) .phone{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;display:grid;gap:24px}
.day:not(.js-play) .screen{border-radius:12px;box-shadow:var(--shadow);background:var(--wa);padding-bottom:6px}
.day:not(.js-play) .s-paper{background:#fff;border-radius:2px}
/* with JS: one phone, one screen at a time, newest message at the bottom */
.day.js-play .phone{height:560px}
.day.js-play .screen{position:absolute;inset:0;display:none}
.day.js-play .screen.on{display:block}
.day.js-play .s-owner .msgs,.day.js-play .s-kitchen .msgs{position:absolute;left:0;right:0;top:48px;bottom:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;padding-bottom:12px}
.day.js-play .msgs::-webkit-scrollbar{display:none}
.day.js-play [data-step].hide{display:none}
.day.js-play [data-step].wait{opacity:0;transform:translateY(12px)}
@media (max-width:900px){.day-grid{grid-template-columns:1fr}.phone-wrap{max-width:400px;margin:0 auto;width:100%}}
@media (max-width:640px){
  .chapters{grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
  .chap{border:1.5px solid var(--hair);border-radius:4px;padding:10px 10px 10px 46px;min-height:44px}
  .chap .cn{left:8px;top:10px;width:30px;height:30px;font-size:17px}
  .chap .who{font-size:16px}
  .chap b{font-size:15px;margin-top:3px}
  .day.js-play .phone{height:500px}
  .m{font-size:15px}
}

/* ---------------- No. 07 DATA / No. 08 COST ---------------- */
.data{background:var(--check)}
.data .no{color:var(--red)}
.pts{margin:28px 0 0}
.pts div{padding:18px 0;border-top:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.pts dt{font-size:clamp(20px,1.7vw,26px);font-stretch:118%;font-weight:800;line-height:1.15}
.pts dd{margin:4px 0 0;font-size:17.5px;line-height:1.4}
.drawing{margin:0}
.drawing img{mix-blend-mode:var(--img-blend);filter:var(--img-filter)}
.stop{transform:rotate(1deg);max-width:460px;justify-self:end}
.stop p{font-size:18px;line-height:1.42;padding:13px 0;border-bottom:1px solid var(--rule)}
.stop p:last-child{border-bottom:none}
@media (max-width:900px){.stop{justify-self:stretch;max-width:none}}

/* ---------------- No. 09 BOOK ---------------- */
.book{padding-bottom:clamp(80px,9vw,140px)}
.nx{margin:28px 0 0}
.nx div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--hair);font-size:clamp(18px,1.4vw,21px);line-height:1.42}
.nx dt{font-weight:800;font-stretch:112%}
.nx dd{margin:0}
.book-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.placeholder-note{margin-top:14px;font-family:"Kalam";color:var(--biro);font-size:19px;line-height:1.3;max-width:46ch;border-bottom:2.5px dashed var(--biro);padding-bottom:8px}
.placeholder-note.flash{animation:flash .9s ease-out}
@keyframes flash{0%{background:color-mix(in srgb,var(--biro) 18%,transparent)}100%{background:transparent}}
.sign{margin-top:30px;font-size:clamp(20px,1.7vw,26px);font-stretch:125%;font-weight:800}
@media (max-width:520px){.nx div{grid-template-columns:1fr;gap:4px}}

.foot{border-top:1px solid var(--hair);padding:28px 0 40px;font-size:14px;color:var(--steel)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.foot img{width:22px;height:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- No. 07 marketing (17 Oct) ---------- */
.mkt-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(28px,4vw,48px) 0 26px}
.mkt-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:start}
.mkt-panel[hidden]{display:none}
.mkt-list{list-style:none;margin:0;padding:0}
.mkt-list li{position:relative;padding:14px 0 14px 26px;border-top:1px solid var(--hair);font-size:clamp(18px,1.45vw,22px);line-height:1.4}
.mkt-list li:last-child{border-bottom:1px solid var(--hair)}
.mkt-list li::before{content:"";position:absolute;left:0;top:1.3em;width:13px;height:2.5px;background:var(--biro);border-radius:2px;transform:rotate(-8deg)}
.mkt-status{margin-top:16px;font-size:15px;line-height:1.9;color:var(--steel)}
.mkt-fig{position:relative;margin:0;min-width:0}
.mkt-fig figcaption{margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--steel)}
.mkt-paper{box-shadow:var(--shadow);border-radius:2px;transform:rotate(.6deg)}
.mkt-stamp{position:absolute;right:18px;bottom:52px;transform:rotate(-6deg);font-size:22px;opacity:.88}
.cal .ch{margin-bottom:12px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-grid .dow{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--check-ink);text-align:center;padding-bottom:4px}
.cal-day{min-height:50px;border:1px solid var(--rule);border-radius:2px;padding:4px 5px;display:flex;flex-direction:column;justify-content:space-between;background:transparent;font:inherit;color:var(--ink);text-align:left}
.cal-day.blank{border-color:transparent}
.cal-day .dn{font-family:"Kalam",cursive;color:var(--biro);font-size:15px;line-height:1}
.cal-day .pk{font-size:11.5px;font-weight:700;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.cal-day{cursor:pointer;border-width:1.5px}
button.cal-day.st-approved{background:var(--paper)}
button.cal-day.st-waiting{background:var(--paper);border-color:var(--biro);border-width:2px}
button.cal-day.st-draft{border-style:dashed}
button.cal-day.st-needs{border-style:dashed;border-color:var(--red)}
.pc-s.st-needs{color:var(--red)}
.pc-l b{margin-right:6px}
.roi .v{font-size:17px;font-weight:700;text-align:right;white-space:nowrap}
.roi .v small{display:block;font-size:12.5px;font-weight:400;color:var(--check-ink)}
.roi .head-r{font-stretch:118%;font-weight:800;font-size:clamp(22px,2vw,28px);margin:4px 0 2px}
.roi .settle{font-size:14px;line-height:1.45;color:var(--steel);margin:8px 0 0}
button.cal-day.on{outline:3px solid var(--biro);outline-offset:1px}
.post-card{margin-top:16px;border-top:2px solid var(--rule);padding-top:12px;min-height:220px}
.pc-h{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--check-ink)}
.pc-s.st-waiting{color:var(--biro)}
.pc-t{font-stretch:118%;font-weight:800;font-size:clamp(19px,1.5vw,22px);margin:6px 0 8px}
.pc-l{font-size:16px;line-height:1.42;margin:0 0 6px}
.pc-l b{display:inline-block;min-width:68px;font-weight:700;color:var(--check-ink)}
.pc-a{font-size:14.5px;color:var(--steel);margin:10px 0 8px;font-style:italic}
.roi .ln{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--rule);min-height:56px;padding:6px 0}
.roi .ln .it{font-size:17px;line-height:1.3}
.roi .ln .it small{display:block;font-size:13.5px;color:var(--check-ink)}
.roi .ln.tot{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.roi .ln.tot .it{font-weight:800;font-stretch:118%}
.roi .v.blank{font-family:"Kalam",cursive;color:var(--biro);font-size:26px;min-width:120px;text-align:right;border-bottom:2px dashed var(--biro);line-height:1.2}
.verdicts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px}
.verdicts span{border:1.5px solid var(--rule);border-radius:20px;padding:4px 12px;font-size:14px;font-weight:700}
.verdicts span.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.plat{font-size:14.5px;line-height:1.5;color:var(--steel)}
.mkt-link{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(16px,4vw,60px);margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:2px solid var(--rule)}
.mkt-link>b{font-stretch:112%;font-weight:800;font-size:clamp(19px,1.5vw,23px);line-height:1.25}
.mkt-link p{font-size:clamp(16px,1.3vw,19px);line-height:1.45}
.mkt-link p span{display:block;margin-bottom:6px}
@media (max-width:900px){.mkt-panel,.mkt-link{grid-template-columns:minmax(0,1fr)}
  .mkt-tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);padding:2px var(--gut) 6px;scrollbar-width:none}
  .mkt-tabs::-webkit-scrollbar{display:none}
  .mkt-tabs .room-btn{flex:none}}
@media (max-width:520px){.cal-day{min-height:42px;padding:3px}.cal-day .pk{font-size:9.5px}.cal{padding:18px 14px 22px}.roi{padding:20px 16px 24px}}
.mkt-paper{padding-bottom:64px}
@media (max-width:520px){
  .roi .ch{flex-direction:column;align-items:flex-start;gap:4px}
  .roi .v.blank{min-width:70px}
  .cal-day .pk{display:none}
  button.cal-day::after{content:"";display:block;height:4px;border-radius:2px;background:var(--biro)}
  button.cal-day.st-approved::after{background:var(--rule)}
}

.roi{padding-bottom:70px}
.roi .plat{margin-top:12px}
.mkt-fig .cal{padding-bottom:70px}

/* ---------- 18 Oct: shared frames ---------- */
.try{font-size:20px;line-height:1.2;margin:0 0 10px;transform:rotate(-1.5deg);transform-origin:left}
.dag{color:var(--red);font-weight:800}
.browser{position:relative;background:var(--card);border:1px solid var(--hair);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.bbar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--check);border-bottom:1px solid var(--hair);font-size:12.5px;color:var(--steel);white-space:nowrap;overflow:hidden}
.bbar i{width:9px;height:9px;border-radius:50%;background:var(--hair);flex:none}
.bbar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.browser img{width:100%}
.browser.scroll-x{overflow-x:auto;overscroll-behavior-x:contain}
.browser.scroll-x .bbar{position:sticky;left:0}
@media (max-width:700px){.browser.scroll-x img.wide{width:720px;max-width:none}}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--biro);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;min-height:24px}

/* ---------- No. 05 ONE SCREEN + sign the check ---------- */
.dash-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"pts fig" "sign fig";gap:clamp(24px,4vw,56px) clamp(28px,5vw,80px);margin-top:clamp(28px,4vw,48px);align-items:start}
.dash-pts{grid-area:pts;margin:0}
.dash-pts div{padding:14px 0;border-top:1px solid var(--hair)}
.dash-pts dt{font-size:clamp(19px,1.5vw,23px);font-stretch:118%;font-weight:800;line-height:1.15}
.dash-pts dd{margin:4px 0 0;font-size:16.5px;line-height:1.42}
.dash-fig{grid-area:fig;position:relative;margin:0}
.dash-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(12px,2vw,24px);margin-top:clamp(12px,2vw,20px);align-items:start}
.dash-panel{border-radius:8px;box-shadow:var(--shadow)}
.phone-mini{border:7px solid var(--plate);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#F7F8F5}
.dash-stamp{position:absolute;right:4%;bottom:62px}
.dash-fig figcaption{margin-top:14px;font-size:14px;color:var(--steel)}
.sign-wrap{grid-area:sign;position:relative}
.signcard{max-width:520px}
.signcard .ch b small{font-weight:500;font-size:15px;color:var(--check-ink);margin-left:6px;font-stretch:100%}
.signcard .f-title{font-size:19px;font-weight:800;font-stretch:108%;line-height:1.25;margin:10px 0 4px}
.signcard .ln{grid-template-columns:1fr;min-height:44px}
.signcard .tot{display:flex;align-items:center;gap:12px;padding:12px 0 4px}
.signcard .amt{font-family:"Kalam",cursive;font-weight:700;font-size:30px;line-height:1;color:var(--ink);padding:2px 8px}
.signcard.is-signed .amt{color:#18211C}
.signcard .lab{font-size:14.5px;color:var(--check-ink)}
.signcard .as{margin-top:12px;font-size:14px;color:var(--steel)}
.sign-act{display:flex;gap:10px;margin-top:12px}
.sign-act[hidden],.sign-no[hidden]{display:none}
.sign-no{margin-top:12px}
.sign-no label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.sign-no-row{display:flex;gap:8px}
.sign-no input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1.5px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.sign-out{margin-top:12px;font-size:16px;line-height:1.42;min-height:1px}
.sign-stamp{position:absolute;right:18px;top:-16px;font-size:24px;opacity:0;z-index:2}
.signcard.is-done .sign-stamp{opacity:.9}
@media (max-width:900px){
  .dash-grid{grid-template-columns:1fr;grid-template-areas:"pts" "fig" "sign"}
  .dash-pts{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
}
@media (max-width:560px){
  .dash-pts{grid-template-columns:1fr}
  .dash-pts div{padding:10px 0}
  .dash-pts dd{font-size:15.5px}
  .dash-row{grid-template-columns:1fr 1fr;gap:10px}
  .phone-mini{border-width:5px;border-radius:14px}
  .dash-stamp{font-size:18px;bottom:70px}
  .signcard{padding:20px 16px 22px}
}

/* ---------- No. 08 CONNECT ---------- */
.cx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"sys out" "keep out";gap:clamp(20px,3vw,40px) clamp(24px,4vw,64px);margin-top:clamp(28px,4vw,48px);align-items:start}
.cx-systems{grid-area:sys}.cx-out{grid-area:out}.cx-keep{grid-area:keep}
.plan .boh-t{font:800 26px "Archivo",sans-serif;font-stretch:112%;fill:var(--ink)}
.plan .boh-h{font:400 24px "Kalam",cursive;fill:var(--biro)}
.cx-row{padding:14px 0;border-top:1px solid var(--hair)}
.cx-h{font-size:clamp(17px,1.35vw,20px);font-weight:800;font-stretch:112%;line-height:1.2;margin-bottom:10px}
.cx-chips{display:flex;flex-wrap:wrap;gap:8px}
.cx-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--hair);border-radius:24px;background:var(--paper);color:var(--ink);font:inherit;font-size:15.5px;font-weight:650;cursor:pointer;transition:border-color .15s,background-color .15s}
.cx-chip:hover{border-color:var(--ink)}
.cx-chip .led{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--steel);flex:none;transition:background-color .2s,border-color .2s}
.cx-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cx-chip[aria-pressed="true"] .led{background:var(--rule);border-color:var(--rule)}
.cx-chip.k-photo[aria-pressed="true"] .led{background:transparent;border-color:var(--paper)}
.cx-out{position:sticky;top:96px}
.cx-plan{margin-bottom:6px}
.cx-plan .hit{pointer-events:none}
.cx-plan .zone-fill.on{opacity:.24}
.plan .flow{opacity:0;transition:opacity .3s}
.plan .flow.on{opacity:1}
.plan .boh-box{fill:var(--paper);stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.plan .flow-line{fill:none;stroke:var(--biro);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.plan .flow-dots{fill:none;stroke:var(--biro);opacity:.55;stroke-width:12;stroke-linecap:round;stroke-dasharray:1 30;animation:flow 1.1s linear infinite}
.plan .flow.mail .flow-dots{stroke:var(--steel)}
@keyframes flow{to{stroke-dashoffset:-31}}
.cx-ticket{margin-top:6px}
.cx-ticket h3{margin:14px 0 6px;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--check-ink);font-stretch:112%}
.cx-ticket ul{margin:0;padding:0;list-style:none}
.cx-ticket li{position:relative;padding:3px 0 3px 22px;font-size:16px;line-height:1.38}
.cx-ticket li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:6px;border-left:2px solid var(--biro);border-bottom:2px solid var(--biro);transform:rotate(-45deg)}
.cx-note{margin-top:8px;font-size:14px;line-height:1.4;color:var(--check-ink)}
.cx-catch{margin-top:12px;padding:10px 12px;border:1.5px dashed var(--rule);font-size:15px;line-height:1.42}
.cx-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cx-refuse,.cx-msg{margin-top:10px;font-size:15.5px;line-height:1.42}
.cx-status{margin-top:0;max-width:80ch;font-size:15px;line-height:1.6;color:var(--steel)}
.keep{margin-top:clamp(24px,3vw,40px);max-width:760px;transform:rotate(-.4deg)}
.keep dl{margin:6px 0 0}
.keep dl div{padding:10px 0;border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.42}
.keep dl div:last-child{border-bottom:0}
.keep dt{display:inline;font-weight:800}
.keep dd{display:inline;margin:0 0 0 4px}
@media (max-width:900px){.cx-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"sys" "out" "keep"}.cx-out{position:relative;top:0}}
@media (max-width:640px){.plan .boh-t{font-size:36px}.plan .boh-h{font-size:32px}}
@media (max-width:560px){
  .cx-row{padding:10px 0}
  .cx-chip{font-size:14.5px;padding:0 12px}
  .cx-ticket,.keep{padding:20px 16px 22px}
  .plan .flow-dots{stroke-width:18;stroke-dasharray:1 40;animation-name:flow2}
}
@keyframes flow2{to{stroke-dashoffset:-41}}
.mail-line{margin-top:14px;font-size:16px}
.mail-line a{font-weight:700}
@media (prefers-reduced-motion:reduce){.plan .flow-dots{animation:none}}

/* ================= 19 Oct 2026: creative-director pass (CREATIVE_DIRECTION_2026-10-19.md) =================
   Motion verbs: ink, write, print, tear, stamp, fill. Everything below starts from a complete, visible default;
   the hidden start states only apply under .js-motion, which site.js removes for reduced motion or missing GSAP. */
:root{--ease:cubic-bezier(.16,1,.3,1);--pen:cubic-bezier(.45,.05,.55,.95);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px}

/* sheet number + drafting rule that inks across as the section enters */
.no{display:flex;align-items:center;gap:var(--s4)}
.no::after{content:"";flex:1;max-width:220px;height:1px;background:currentColor;opacity:.55;transform-origin:left center;transition:transform 1s var(--pen)}
.js-motion [data-sheet]:not(.is-in) .no::after{transform:scaleX(0)}

/* header: which sheet you are on, and a biro rule that follows the page */
.top{isolation:isolate}
.top-rule{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--biro);transform-origin:left center;transform:scaleX(0);opacity:.85;pointer-events:none;will-change:transform}
.sheet-ind{margin-right:auto;margin-left:var(--s5);padding-left:var(--s5);border-left:1px solid var(--hair);font-size:13px;font-stretch:92%;color:var(--steel);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.sheet-n{display:inline-block;overflow:hidden;height:1.25em;vertical-align:bottom;font-weight:600;color:var(--ink)}
.sheet-n>span{display:block;line-height:1.25em}
.sheet-n.roll>span{animation:roll .32s var(--ease)}
@keyframes roll{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:1100px){.sheet-ind{display:none}}

/* highlighter: amber behind money found, nowhere else */
.fill{position:relative;isolation:isolate;color:#18211C}
.fill::before{content:"";position:absolute;z-index:-1;left:-.12em;right:-.12em;top:.12em;bottom:.02em;background:var(--amber);
  transform:skewX(-6deg) scaleX(1);transform-origin:left center;transition:transform .55s var(--ease)}
.fill.is-pending{color:inherit}
.fill.is-pending::before{transform:skewX(-6deg) scaleX(0);transition-duration:.2s}
.ticket .amt.fill{color:#18211C}

/* No. 02: four stations, one biro line through them */
.flow4{--g:clamp(20px,3vw,48px);position:relative;margin-top:clamp(36px,5vw,64px)}
.flow4 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--g)}
.flow4 li{position:relative;padding-top:var(--s1)}
.flow4 .num{position:relative;z-index:1;width:44px;height:44px;font-size:24px}
.flow4 b{display:block;margin-top:var(--s5);font-size:clamp(28px,2.8vw,42px);font-stretch:125%;font-weight:800;line-height:1.05;letter-spacing:-.015em}
.flow4 p{margin-top:var(--s3);font-size:17px;line-height:1.45;max-width:30ch}
.flow4-line{position:absolute;left:22px;top:6px;width:calc((100% + var(--g)) * .75);height:40px;overflow:visible;pointer-events:none}
.flow4-line path{fill:none;stroke:var(--biro);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media (max-width:720px){
  .flow4 ol{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
  .flow4-line{display:none}
  .flow4 .num{width:34px;height:34px;font-size:19px}
  .flow4 b{margin-top:var(--s3);font-size:24px}
  .flow4 p{font-size:15px;margin-top:var(--s2)}
}

/* No. 03: every check, by area (folded, so the phone page stays short) */
.try-in{display:inline-block;font-size:1.15em;transform:rotate(-2deg);margin-right:4px}
.every summary{font-size:15px}
.every-dl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5);margin:var(--s5) 0 0}
.every-dl dt{font-size:20px;font-stretch:118%;font-weight:800;padding-bottom:var(--s2);border-bottom:2px solid var(--rule)}
.every-dl dd{margin:0}
.every-dl ul{list-style:none;margin:0;padding:0}
.every-dl li{position:relative;padding:var(--s2) 0 var(--s2) 20px;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.4}
.every-dl li::before{content:"";position:absolute;left:0;top:1.05em;width:11px;height:2px;background:var(--biro);transform:rotate(-8deg)}
@media (max-width:980px){.every-dl{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.every-dl{grid-template-columns:1fr}}

/* desktop only: a drafting crosshair over Sheet 01, with a title-block readout */
.xhair{display:none}
@media (hover:hover) and (pointer:fine){
  .hero-plan .xhair{display:block;position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
  .hero-plan.is-aiming .xhair{opacity:1}
  .xh-x,.xh-y{position:absolute;left:0;top:0;background:var(--biro);opacity:.3;will-change:transform}
  .xh-x{width:100%;height:1px}
  .xh-y{height:100%;width:1px}
  .xh-l{position:absolute;left:0;top:0;padding:2px 7px;border:1px solid var(--steel);background:var(--paper);font-size:12px;font-stretch:90%;line-height:1.4;color:var(--ink);white-space:nowrap;will-change:transform;font-variant-numeric:tabular-nums}
  .xh-l b{color:var(--red);font-weight:700;margin-left:6px}
}

/* No. 06: the signature writes itself */
.signcard .as{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.sig{flex-basis:100%;min-height:44px;font-size:32px;line-height:1.3;color:var(--biro);transform:rotate(-3deg);transform-origin:left;border-bottom:1px dashed var(--steel);
  clip-path:inset(-10px 100% -10px 0);transition:clip-path .7s var(--pen)}
.signcard.is-signed .sig{clip-path:inset(-10px -10px -10px 0)}

/* No. 09: refused, stamped across the reading ticket */
.cx-ticket .refused{position:absolute;right:22px;top:64px;font-size:24px}

/* No. 10: a biro rule follows the scroll down the ledger; the two decisions stamp when reached */
.steps{position:relative}
.steps-prog{position:absolute;left:16px;top:22px;bottom:22px;width:2px;background:var(--biro);opacity:.5;transform-origin:top center;pointer-events:none}
.step .hd .num{position:relative;z-index:1}
.step .stg{padding-left:48px}
.step .dia{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.js-motion .step:not(.is-in) .dia{transform:rotate(45deg) scale(0)}
@media (max-width:720px){.steps-prog{display:none}.step .stg{padding-left:0}}

/* buttons: ink fills the ghost from the left; primaries are magnetic on desktop (site.js) */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:right center;transition:transform .35s var(--ease)}
.btn-ghost:hover::before{transform:scaleX(1);transform-origin:left center}
.btn:active{transform:translateY(1px) scale(.985)}
@media (max-width:720px){.what{padding-top:var(--s5)}}

/* ---------- 19 Oct overnight: No. 09 everything in one place; No. 04 sample box ---------- */
.audit .smpl{margin-top:var(--s5);max-width:60ch;padding:14px 16px;border:1.5px dashed var(--rule);font-size:15.5px;line-height:1.5}
.op-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(36px,5vw,64px)}
.op-colhd,.op-rows li{display:grid;grid-template-columns:150px minmax(0,1.6fr) minmax(170px,.8fr);gap:var(--s5)}
.op-colhd{margin:0 0 var(--s2);font-size:13px;color:var(--steel);font-stretch:92%}
.op-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--hair)}
.op-rows li{padding:var(--s4) 0;border-top:1px solid var(--hair);align-items:start}
.op-rows b{font-size:clamp(20px,1.7vw,26px);font-stretch:118%;font-weight:800;line-height:1.15}
.op-rows p{font-size:17px;line-height:1.45}
.op-tools{margin:0}
.op-tools div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.op-tools dt{font-size:14.5px;color:var(--steel);font-stretch:92%}
.op-tools dd{margin:0;font-family:"Kalam",cursive;color:var(--biro);font-size:20px;line-height:1.3;white-space:nowrap}
.oneplace .cx-status{margin-top:var(--s5)}
.op-not{transform:rotate(.8deg)}
.op-not p{padding:12px 0;border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.42}
.op-not p:last-child{border-bottom:0}
@media (max-width:900px){.op-grid{grid-template-columns:minmax(0,1fr)}.op-not{transform:none}}
@media (max-width:640px){
  .op-colhd{display:block}
  .op-colhd span:not(:last-child){display:none}
  .op-rows li{grid-template-columns:minmax(0,1fr);gap:var(--s1);padding:var(--s3) 0}
  .op-rows p{font-size:15.5px}
  .op-tools{display:flex;flex-wrap:wrap;gap:2px var(--s4)}
  .op-tools div{gap:6px}
  .op-tools dt{font-size:13.5px}
  .op-tools dd{font-size:18px}
  .op-not p{font-size:15.5px;padding:10px 0}
}
/* write: the biro prices write themselves in, left to right, row by row (reduced motion: no js-motion, so shown at once) */
.js-motion .oneplace .op-v{clip-path:inset(-6px -6px -6px 0);transition:clip-path .5s var(--pen);transition-delay:calc(var(--i,0) * 90ms + 250ms)}
.js-motion .oneplace:not(.is-in) .op-v{clip-path:inset(-6px 100% -6px 0)}

/* ================= 19 Oct 2026 (day): feature-coverage restructure. New: No. 04 money row + claim, No. 05 service mode,
   No. 06 payslip, No. 07 host stand, No. 08 dealt idea, No. 09 owner home, No. 10 trust check, No. 14 capability index.
   Same tokens; amber only behind money found (the claimed retro). Hidden start states only under JS classes. */
.pts dt{font-size:clamp(19px,1.5vw,23px)}
.pts dd{font-size:16.5px}
.shots{margin-top:var(--s6)}
.shots summary{font-size:15px}
.shots-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);margin-top:var(--s5);align-items:start}
.shots-grid.one{grid-template-columns:minmax(0,1fr);max-width:980px}
.shots-grid figure{margin:0}
@media (max-width:760px){.shots-grid{grid-template-columns:minmax(0,1fr)}}

/* No. 04: money row and the claim */
.money-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);margin-top:clamp(40px,5vw,72px);align-items:start}
.money-pts{margin:0}
.claim-wrap{position:relative}
.claim{max-width:560px}
.claim .ch b small{font-weight:500;font-size:15px;color:var(--check-ink);margin-left:6px;font-stretch:100%}
.claim .ln{min-height:60px}
.claim .ln .it small{color:var(--check-ink)}
.claim .ln .v{font-size:22px}
.claim .lost .v s{color:var(--steel);text-decoration-thickness:1.5px}
.claim .lost .it{color:var(--steel)}
.claim .amt{font-family:"Kalam",cursive;font-weight:700;font-size:26px;padding:0 6px}
.claim .amt.fill:not(.is-pending){color:#18211C}
.claim-act{margin-top:14px}
.claim-act[hidden]{display:none}
.claim-out{margin-top:12px;font-size:15.5px;line-height:1.45;min-height:1px}
.claim-stamp{position:absolute;right:18px;top:-16px;font-size:22px;opacity:0;z-index:2}
.claim.is-done .claim-stamp{opacity:.9}
@media (max-width:900px){.money-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.claim{padding:20px 16px 22px}.claim .ln .v{font-size:19px}}

/* No. 05: service mode on the phone. The phone goes dark; Sign and Say no sit in the thumb zone */
.s-service{background:#1E2427;color:#E6ECE4;padding:20px 18px 0;height:100%}
.phone.is-service{background:#1E2427}
.sv-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13px;font-weight:700;letter-spacing:.03em;color:#A2AEA8}
.sv-quiet{font-weight:500;letter-spacing:0;text-align:right;max-width:13ch;line-height:1.3}
.sv-time{font-stretch:125%;font-weight:800;font-size:58px;line-height:1;margin:6px 0 14px;letter-spacing:-.02em}
.sv-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid #39434A;padding-top:10px}
.sv-kpi span{display:block;font-size:12px;color:#A2AEA8}
.sv-kpi b{display:block;font-size:22px;font-stretch:118%;font-weight:800;line-height:1.15}
.sv-kpi small{display:block;font-size:11.5px;color:#A2AEA8;line-height:1.25}
.sv-now{margin:14px 0 6px;font-size:13px;font-weight:800;color:#A2AEA8;letter-spacing:.04em}
.sv-card{border:1px solid #4A555C;border-radius:6px;background:#141A1C;padding:12px 14px}
.sv-k{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#A2AEA8}
.sv-k span{color:#EF6B5F;font-weight:700}
.sv-t{font-stretch:118%;font-weight:800;font-size:18px;line-height:1.2;margin:6px 0 4px}
.sv-r{font-size:13.5px}
.sv-line{padding:9px 0;border-bottom:1px solid #39434A;font-size:14.5px}
.sv-more{margin-top:10px;font-size:13px;color:#A2AEA8}
.sv-bar{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.5fr;gap:8px;padding:10px 12px 14px;background:#151A1C;border-top:1px solid #39434A}
.sv-bar span{display:flex;align-items:center;justify-content:center;min-height:46px;border:1.5px solid #E6ECE4;border-radius:4px;font-weight:800;font-size:16px}
.sv-bar .on{background:#E6ECE4;color:#18211C}
.day:not(.js-play) .s-service{border-radius:12px;position:relative;padding-bottom:84px}
.day.js-play .s-service.on{display:block}
.day-copy .sign-wrap{margin-top:var(--s6)}

/* No. 06: the payslip writes itself */
.people-grid{align-items:start}
.slip-wrap{position:relative}
.slip{max-width:540px}
.slip .ch b small{font-weight:500;font-size:15px;color:var(--check-ink);margin-left:6px;font-stretch:100%}
.slip-meta{font-size:13.5px;color:var(--check-ink);margin:6px 0 4px}
.slip .ln{min-height:50px}
.slip .ln .it small{color:var(--check-ink)}
.slip .ln .v{font-size:23px;min-width:110px}
.slip .ln.sub .it,.slip .ln.tot .it{font-weight:800;font-stretch:118%}
.slip .ln.sub{border-top:2px solid var(--rule)}
.slip .ln.tot{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.slip .ln.tot .v{font-size:30px}
.slip-check{margin-top:10px;font-size:14.5px;color:var(--check-ink)}
.slip-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.slip-act [hidden]{display:none}
.slip-act button:disabled{opacity:.4;cursor:not-allowed}
.slip-out{margin-top:12px;font-size:15.5px;line-height:1.45;min-height:1px}
.slip-stamp{position:absolute;right:18px;top:-16px;font-size:22px;opacity:0;z-index:2}
.slip.is-certified .slip-stamp{opacity:.9}
.slip.js-slip.is-blank .w{color:transparent;background:linear-gradient(transparent 82%,color-mix(in srgb,var(--biro) 45%,transparent) 82%,color-mix(in srgb,var(--biro) 45%,transparent) 88%,transparent 88%)}
@media (max-width:560px){.slip{padding:20px 16px 22px}.slip .ln .v{font-size:20px;min-width:90px}.slip .ln.tot .v{font-size:25px}}

/* No. 07: the host stand */
.hs-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(32px,4vw,56px);align-items:start}
.hs-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--steel);padding-bottom:8px;border-bottom:1px solid var(--hair);margin-bottom:12px}
.hs-top b{color:var(--ink);font-size:17px}
.hs-plan{display:block;width:100%;height:auto;overflow:visible}
.hs-plan .hs-wall{fill:none;stroke:var(--ink);stroke-width:.42;stroke-linejoin:round;stroke-linecap:round}
.hs-plan .hs-wall.thin{stroke-width:.2;stroke:var(--steel)}
.hs-plan .hs-room{font:600 2.1px "Archivo",sans-serif;fill:var(--steel)}
.hs-t .shape{fill:var(--paper);stroke:var(--ink);stroke-width:1.3;vector-effect:non-scaling-stroke;transition:fill .25s}
.hs-t.st-seated .shape{fill:var(--check);stroke:var(--rule)}
.hs-t.st-held .shape{fill:var(--paper);stroke:var(--biro);stroke-dasharray:4 3}
.hs-id{font:800 2.2px "Archivo",sans-serif;font-stretch:112%;fill:var(--ink);text-anchor:middle}
.hs-who{font:400 2.1px "Kalam",cursive;fill:var(--biro);text-anchor:middle}
.hs-t.pickable{cursor:pointer}
.hs-t.pickable .shape{stroke:var(--biro);stroke-width:2.6;fill:color-mix(in srgb,var(--biro) 8%,var(--paper))}
.hs-t.pickable:hover .shape,.hs-t.pickable:focus .shape{fill:color-mix(in srgb,var(--biro) 18%,var(--paper))}
.hs-t:focus{outline:none}
.hs-t.pickable:focus-visible .shape{stroke-width:3.4}
.hs-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13.5px;color:var(--steel)}
.hs-key .k::before{content:"";display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:-1px;border:1.5px solid var(--ink);background:var(--paper)}
.hs-key .seated::before{background:var(--check);border-color:var(--rule)}
.hs-key .held::before{border-color:var(--biro);border-style:dashed}
.hs-side{position:relative}
.hs-ticket{min-height:210px}
.hs-ticket .f-title{font-size:18px;font-weight:800;font-stretch:108%;line-height:1.3;margin:10px 0 6px}
.hs-n{font-size:15px;line-height:1.45;color:var(--check-ink)}
.hs-free{list-style:none;margin:6px 0 8px;padding:0}
.hs-free li{padding:6px 0;border-bottom:1px solid var(--rule);font-size:15px}
.hs-free b{font-stretch:112%;margin-right:6px}
.hs-act{margin-top:14px}
.hs-stamp{position:absolute;right:18px;top:-14px;font-size:22px;z-index:2;opacity:0}
.hs-stamp:not(:empty){opacity:.9}
.guest-pts{margin-top:var(--s6)}
@media (max-width:980px){.hs-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.hs-plan .hs-room{font-size:2.8px}.hs-id{font-size:2.6px}.hs-who{font-size:2.5px}.hs-ticket{padding:20px 16px 22px;min-height:0}}

/* No. 08: deal the next idea */
.deal{display:grid;gap:var(--s5)}
.idea h3{margin:12px 0 4px;font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--check-ink);font-stretch:112%}
.idea ul{list-style:none;margin:0;padding:0}
.idea li{position:relative;padding:3px 0 3px 18px;font-size:15.5px;line-height:1.4}
.idea li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:2px;background:var(--biro);transform:rotate(-8deg)}
.idea p{font-size:16px;line-height:1.45}
.idea .id-slot{font-family:"Kalam",cursive;color:var(--biro);font-size:20px;margin:8px 0 6px}
.idea .id-h{margin-top:12px;font-size:14px;color:var(--steel);line-height:1.45}
.deal.js-deal{display:block;position:relative}
.deal.js-deal .idea{display:none}
.deal.js-deal .idea.on{display:block}
.deal-act{margin-top:var(--s5)}

/* No. 09: the owner's home beside the not-done card */
.op-side{display:grid;gap:var(--s6);align-content:start}
.op-home{margin:0}
.op-home figcaption{margin-top:10px;font-size:14px;color:var(--steel)}

/* No. 10: the trust check */
.trust-fig{margin:var(--s6) 0 var(--s5);display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:var(--s5);align-items:center;max-width:760px}
.trust-fig img{border-radius:10px;box-shadow:var(--shadow);background:#F7F8F5}
.trust-fig figcaption{font-size:16px;line-height:1.5}
.trust-fig figcaption b{display:block;font-size:clamp(19px,1.5vw,23px);font-stretch:118%;font-weight:800;margin-bottom:6px}
.trust-fig .tag{margin:8px 6px 0 0}
@media (max-width:560px){.trust-fig{grid-template-columns:minmax(0,1fr)}.trust-fig img{max-width:280px}}

/* No. 14: everything inside, folded */
.inside-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);margin-top:clamp(32px,4vw,56px);align-items:start}
.fams{border-top:2px solid var(--ink)}
.fam{border-bottom:1px solid var(--hair)}
.fam summary{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:14px 0;cursor:pointer;list-style:none;min-height:56px}
.fam summary::-webkit-details-marker{display:none}
.fam summary b{font-size:clamp(20px,1.8vw,27px);font-stretch:125%;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.fam summary .cnt{font-family:"Kalam",cursive;color:var(--biro);font-size:18px;white-space:nowrap}
.fam summary .cnt::after{content:"+";display:inline-block;margin-left:10px;font-family:"Archivo",sans-serif;font-weight:700;color:var(--ink);transition:transform .2s var(--ease)}
.fam[open] summary .cnt::after{transform:rotate(45deg)}
.fam summary:hover b{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em}
.fam ul{list-style:none;margin:0 0 var(--s4);padding:0 0 0 60px;columns:2;column-gap:var(--s6)}
.fam li{position:relative;break-inside:avoid;padding:6px 0 6px 18px;border-bottom:1px solid var(--hair);font-size:15.5px;line-height:1.38}
.fam li::before{content:"";position:absolute;left:0;top:.95em;width:10px;height:2px;background:var(--biro);transform:rotate(-8deg)}
.fam li .tag{font-size:11px;margin:0 0 0 6px}
.notyet{transform:rotate(.6deg)}
.notyet h3{margin:14px 0 4px;font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--check-ink);font-stretch:112%}
.notyet ul{list-style:none;margin:0;padding:0}
.notyet li{position:relative;padding:7px 0 7px 18px;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.38}
.notyet li::before{content:"";position:absolute;left:0;top:1em;width:10px;height:2px;background:var(--red)}
@media (max-width:900px){.inside-grid{grid-template-columns:minmax(0,1fr)}.notyet{transform:none}}
@media (max-width:640px){.fam ul{columns:1;padding-left:0}.fam summary{grid-template-columns:40px minmax(0,1fr) auto}}

/* 19 Oct (day), fixes after the 390 px recording: sign card after the phone on small screens; host plan scrolls on a phone */
.day-grid{grid-template-areas:"copy phone" "sign phone"}
.day-copy{grid-area:copy}.phone-wrap{grid-area:phone}.day-grid>.sign-wrap{grid-area:sign;margin-top:0}
@media (max-width:900px){.day-grid{grid-template-areas:"copy" "phone" "sign"}}
.deal-stamp{bottom:auto;top:-14px;right:14px}
.hs-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
@media (max-width:640px){.hs-scroll .hs-plan{width:620px;max-width:none}.hs-plan .hs-room{font-size:2.1px}.hs-id{font-size:2.2px}.hs-who{font-size:2.1px}}
@media (max-width:640px){
  .s-service{padding:16px 14px 0}
  .sv-time{font-size:44px;margin:4px 0 10px}
  .sv-kpi b{font-size:19px}
  .sv-now{margin:10px 0 4px}
  .sv-card{padding:9px 11px}
  .sv-t{font-size:15.5px;margin:4px 0 2px}
  .sv-line{padding:6px 0;font-size:13.5px}
  .sv-more{margin-top:6px}
  .sv-bar{padding:8px 10px 10px}.sv-bar span{min-height:44px}
}
@media (max-width:640px){.day.js-play .phone{height:548px}}
.try{margin-left:1px}
/* reserve room for status lines that arrive after an animation, so nothing below moves */
.slip-out,.claim-out{min-height:4.4em}
.try{max-width:calc(100% - 6px)}
.hs-ticket{min-height:236px}

/* ================= 19 Oct 2026 (late): "The pass", brought in from 38_dashboard v6 (research/cd_2026-10-19/DIRECTION.md) =================
   1. The rail: checks waiting for a person hang from a stainless bar; the spike counts what was dealt with.
   2. Printed vs biro: anything code worked out is printed type; biro is only a person (a signature, a reason, a note).
   3. Paper by day, stainless at night: No. 05 goes dark in service, and only the checks stay lit (paper).
   Motion (emil-design-eng): UI under 300 ms, ease-out, transform/opacity/clip-path only; the hold to sign is deliberate (600 ms). */
:root{--pass:#0F1412;--pass-2:#161D1A;--pass-3:#212A26;--pass-ink:#E6ECE4;--pass-dim:#8A9690;--pass-rule:#2C3832;
  --ease-out:cubic-bezier(.23,1,.32,1)}

/* motion retimed to the UI budget */
.fill::before{transition:transform .22s var(--ease-out)}
.fill.is-pending::before{transition-duration:.15s}
.btn-ghost::before{transition:transform .2s var(--ease-out)}
.btn:active{transform:scale(.97)}
.m{transition:opacity .24s var(--ease-out),transform .24s var(--ease-out)}
.no::after{transition-duration:.7s}

/* printed values on every check (the kitchen printer), not biro */
.chk .ln .v{font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;font-weight:650;color:var(--ink);font-size:18px;line-height:1.2;font-variant-numeric:tabular-nums lining-nums}
.costs .ln .v{font-size:clamp(26px,2.6vw,38px);font-stretch:112%;font-weight:800}
.claim .ln .v,.slip .ln .v{font-size:18px}
.slip .ln.tot .v{font-size:24px;font-weight:800;font-stretch:112%}
.chk .amt{font-family:"Archivo",system-ui,sans-serif;font-stretch:112%;font-weight:800;font-variant-numeric:tabular-nums lining-nums}
.ticket .amt{font-size:clamp(28px,2.6vw,38px);color:var(--ink)}
.claim .amt{font-size:20px}
.slip.js-slip.is-blank .w{background:linear-gradient(transparent 82%,color-mix(in srgb,var(--steel) 45%,transparent) 82%,color-mix(in srgb,var(--steel) 45%,transparent) 88%,transparent 88%)}

/* a check hangs from a short stretch of rail */
.chk.hang{margin-top:16px}
.chk.hang::before{content:"";position:absolute;left:-10px;right:-10px;top:-12px;height:8px;border-radius:2px;background:var(--plate)}

/* No. 03: found, signed, banked, drawn as three steps on one rule */
.fsb{margin-top:clamp(48px,6vw,88px)}
.fsb-h{font-size:clamp(19px,1.6vw,24px);font-stretch:112%;line-height:1.3;max-width:60ch}
.fsb-h span{display:inline-block;color:var(--steel);font-size:15px;font-stretch:100%}
.fsb-strip{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.fsb-strip li{position:relative;padding:var(--s5) var(--s5) var(--s5) 0}
.fsb-strip li+li{padding-left:var(--s5);border-left:1px solid var(--hair)}
.fsb-strip li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:-8px;width:12px;height:12px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);background:var(--paper)}
.fsb-n{display:block;font-size:clamp(52px,6vw,92px);font-stretch:125%;font-weight:800;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.fsb-strip b{display:block;margin-top:10px;font-size:clamp(20px,1.7vw,26px);font-stretch:118%;font-weight:800}
.fsb-strip small{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:var(--steel)}
.fsb .amt.fill{color:#18211C;font-weight:800;font-family:inherit;padding:0 2px}
.fsb-pts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4) var(--s7);margin:var(--s5) 0 0;border-top:1px solid var(--hair);padding-top:var(--s4)}
.fsb-pts dt{font-weight:800;font-stretch:112%;font-size:18px}
.fsb-pts dd{margin:4px 0 0;font-size:16px;line-height:1.45}
@media (max-width:720px){
  .fsb-strip li{padding:var(--s4) var(--s2) var(--s4) 0}
  .fsb-strip li+li{padding-left:var(--s3)}
  .fsb-strip b{font-size:18px}
  .fsb-strip small{font-size:13.5px}
  .fsb-pts{grid-template-columns:minmax(0,1fr)}
}

/* No. 05: the rail, the spike, and the check you take off it */
.rail{margin:var(--s3) 0 0}
.rail-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px}
.rail-head b{font-size:16px;font-stretch:112%;font-weight:750}
.spike{display:inline-flex;align-items:baseline;gap:6px;font-size:13.5px;color:var(--steel);font-variant-numeric:tabular-nums}
.spike i{display:inline-block;width:2px;height:15px;background:var(--ink);position:relative;top:3px}
.spike i::before{content:"";position:absolute;left:-4px;bottom:0;width:10px;height:2px;background:var(--ink)}
.spike [data-k]{color:var(--ink);font-weight:700}
.rail-bar{height:8px;margin-top:8px;border-radius:2px;background:var(--plate)}
.stubs{list-style:none;margin:-3px 0 0;padding:0 10px;display:flex;gap:8px;min-height:38px}
.stub{position:relative;padding:6px 10px 8px;background:var(--check);color:var(--ink);font-size:12.5px;font-weight:650;font-stretch:100%;white-space:nowrap;box-shadow:0 4px 10px rgba(24,33,28,.12);transition:opacity .2s var(--ease-out)}
.stub b{color:var(--red);font-weight:750;margin-right:2px}
.stub::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:5px;background:linear-gradient(-45deg,transparent 3px,var(--check) 3px) 0 0/8px 5px repeat-x,linear-gradient(45deg,transparent 3px,var(--check) 3px) 0 0/8px 5px repeat-x}
.stub.is-up{opacity:.38}
.stub .back{display:block;font-weight:500;font-size:11px;color:var(--check-ink)}
.day-grid>.sign-wrap .signcard{margin-top:var(--s4)}
.signcard .ch{align-items:center}
.signcard .area{font-size:14px;font-weight:600;color:var(--check-ink)}
.signcard .now{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:2px;background:var(--ink);color:var(--check);font-size:12px;font-weight:700}
.signcard .tot{border-top:2px solid var(--rule);margin-top:6px;justify-content:space-between}
.signcard .tot .lab{font-weight:750;font-size:15px;color:var(--ink)}
.signcard .amt{font-size:26px;color:var(--ink);padding:0 6px}
.signcard .waiting{margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--check-ink)}
.signcard .as{display:grid;grid-template-columns:1fr auto;gap:0 10px;margin-top:12px;padding-top:8px;border-top:1.5px dotted var(--check-ink);font-size:13px;color:var(--check-ink)}
.signcard .sig{grid-column:1/-1;font-size:30px;min-height:42px;border-bottom:0;margin-top:2px;transform:rotate(-3deg);transform-origin:left;
  clip-path:inset(-10px 100% -10px 0);transition:clip-path .15s var(--ease-out)}
.signcard.is-holding .sig{clip-path:inset(-10px -10px -10px 0);transition:clip-path .6s linear}
.signcard.is-signed .sig{clip-path:inset(-10px -10px -10px 0);transition:none}
.sign-act{flex-wrap:wrap;align-items:center;gap:10px 14px}
.btn.hold{touch-action:none;user-select:none;-webkit-user-select:none}
.btn.hold .hold-ink{position:absolute;inset:0;z-index:-1;background:var(--biro);transform:scaleX(0);transform-origin:left center;transition:transform .15s var(--ease-out)}
.signcard.is-holding .hold-ink{transform:scaleX(1);transition:transform .6s linear}
.signcard .linkbtn{color:var(--ink);font-size:15px;min-height:40px}
.signcard .why{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule);font-size:14px;line-height:1.45;color:var(--check-ink)}
.signcard .why[hidden]{display:none}
.signcard .reason{margin-top:6px;font-size:22px;line-height:1.25;transform:rotate(-1.5deg);transform-origin:left}
.signcard .reason:empty{display:none}
.signcard.is-signed .sign-stamp{color:var(--biro);transform:rotate(-7deg)}
.signcard.is-no .sign-stamp{color:var(--ink)}
.day-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s6);margin-top:clamp(48px,6vw,80px)}
@media (max-width:900px){.day-pts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.stub{padding:5px 7px 7px;font-size:11.5px}.stubs{padding:0 4px;gap:5px}}

/* No. 05 at night: stainless, quiet, and only the checks lit (they stay paper, a physical object) */
.day.is-night{--paper:var(--pass);--ink:var(--pass-ink);--steel:var(--pass-dim);--hair:var(--pass-rule);--check:var(--pass-3);--check-ink:#A9C4AF;
  --biro:#AFC0FF;--red:#EF6B5F;--plate:#3A4740;--rule:#5E8A6A;background:var(--pass);color:var(--pass-ink)}
.day.is-night .chk,.day.is-night .stub{--check:#E2ECDD;--ink:#18211C;--steel:#5D686C;--rule:#6F9A7A;--check-ink:#4E6A55;--biro:#24346B;--red:#C3302A;--paper:#F7F8F5;--hair:#D3D9D2;color:#18211C}
.day.is-night .chk{box-shadow:0 18px 40px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4)}
.day.is-night .chap[aria-selected="true"] .cn{color:var(--pass)}
.day.is-night .working summary{color:var(--pass-dim)}

/* the phone in service: the same night, one lit check, the thumb bar */
.s-service{background:var(--pass);color:var(--pass-ink);padding:16px 16px 0}
.phone.is-service{background:var(--pass);border-color:#0B0F0D}
.sv-top{color:var(--pass-dim);font-weight:700;letter-spacing:0}
.sv-who{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.ini{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1.5px solid #AFC0FF;border-radius:50%;color:#AFC0FF;font-size:12px;font-weight:700}
.sv-time{font-weight:200;font-stretch:125%;font-size:62px;line-height:1;margin:6px 0 2px;letter-spacing:-.02em}
.s-service .sv-quiet{max-width:none;text-align:left;font-size:12px;font-weight:500;color:var(--pass-dim);margin:0 0 10px}
.sv-kpi{border-top:1px solid var(--pass-rule)}
.sv-kpi span,.sv-kpi small{color:var(--pass-dim)}
.sv-now{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 0 0;font-size:14px;font-weight:750;letter-spacing:0;color:var(--pass-ink)}
.sv-now span{font-size:11.5px;font-weight:500;color:var(--pass-dim)}
.sv-rail{height:6px;margin-top:6px;border-radius:2px;background:var(--pass-3)}
.s-service .sv-card{position:relative;margin:-2px 6px 14px;padding:10px 12px 12px;border:0;border-radius:0;background:#E2ECDD;color:#18211C;box-shadow:0 12px 26px rgba(0,0,0,.55)}
.s-service .sv-card::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:7px;background:linear-gradient(-45deg,transparent 5px,#E2ECDD 5px) 0 0/10px 7px repeat-x,linear-gradient(45deg,transparent 5px,#E2ECDD 5px) 0 0/10px 7px repeat-x}
.s-service .sv-k{color:#4E6A55;font-size:11.5px;border-bottom:2px solid #6F9A7A;padding-bottom:4px}
.s-service .sv-k span{color:#C3302A}
.s-service .sv-t{font-size:17px;margin:6px 0 2px}
.s-service .sv-r{font-size:13px;font-weight:600}
.sv-w{font-size:11.5px;line-height:1.35;color:#4E6A55;margin-top:3px}
.s-service .sv-line{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--pass-rule);font-size:13.5px;color:var(--pass-dim)}
.s-service .sv-line b{color:var(--pass-ink);font-weight:650}
.s-service .sv-bar{background:var(--pass-2);border-top:1px solid var(--pass-rule)}
.s-service .sv-bar span{border-color:var(--pass-ink);color:var(--pass-ink)}
.s-service .sv-bar .on{background:#E2ECDD;border-color:#E2ECDD;color:#18211C}
@media (max-width:640px){.sv-time{font-size:48px}.s-service .sv-t{font-size:15.5px}.sv-w{font-size:11px}.s-service .sv-line{padding:5px 0;font-size:12.5px}}
.browser.is-night{background:var(--pass);border-color:var(--pass-rule)}
.browser.is-night .bbar{background:var(--pass-2);color:var(--pass-dim)}

/* No. 06: score the rota you already have */
.rota{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(56px,7vw,104px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--hair)}
.rota h3{margin:0;font-size:clamp(26px,2.6vw,40px);font-stretch:125%;font-weight:800;letter-spacing:-.015em;line-height:1.05;max-width:16ch;text-wrap:balance}
.rota-copy>p:first-of-type{margin-top:var(--s4);font-size:17.5px;line-height:1.5;max-width:48ch}
.rota-chk{margin-top:var(--s7);max-width:520px}
.rota-chk .ch b small{font-weight:500;font-size:15px;color:var(--check-ink);margin-left:6px;font-stretch:100%}
.rota-chk .ln{min-height:50px}
.rota-chk .ln .it small{color:var(--check-ink)}
.rota-chk .tot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);padding:10px 0;margin-top:6px}
.rota-chk .tot .lab{font-weight:800;font-stretch:118%}
.rota-chk .tot .v{font-size:22px;font-weight:800;font-stretch:112%}
.rota-note{margin-top:var(--s4);font-size:14.5px;line-height:1.45;color:var(--steel);max-width:52ch}
.rota-fig{position:relative;margin:0}
.rota-fig .page{transform:rotate(-.6deg)}
.rota-fig .page.flat{transform:none;margin-top:var(--s4)}
.rota-fig>.stamp{position:absolute;right:5%;top:-14px;z-index:2}
.rota-fig figcaption{margin-top:16px;font-size:14px;color:var(--steel)}
@media (max-width:900px){.rota{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.rota-chk{padding:20px 16px 22px}.rota-chk .ln .v{font-size:16px}}

/* No. 07: host stand marks as in 38 v6: state by the mark, not by colour */
.hs-t.st-seated .shape{stroke:var(--ink)}
.hs-t.st-held .shape{stroke:var(--ink)}
.hs-t.st-needs .shape{fill:var(--ink);stroke:var(--ink)}
.hs-t.st-needs .hs-id,.hs-t.st-needs .hs-who{fill:var(--paper)}
.hs-key .seated::before{border-color:var(--ink)}
.hs-key .held::before{border-color:var(--ink)}
.hs-key .needs::before{background:var(--ink)}

/* No. 10: printed by us, signed by a person */
.record-fig{margin:clamp(40px,5vw,64px) 0 0}
.record-fig figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--steel);max-width:80ch}
.record-fig figcaption b{color:var(--ink);font-stretch:112%}
/* the check must not move under a held finger: no re-centring as status lines come and go */
.day-grid>.sign-wrap{align-self:start}
.signcard .sign-out{min-height:4.4em}

/* No. 04: the strip sits under the money row; the signatures in it are people, so biro */
.leaks .fsb{margin-top:clamp(48px,6vw,80px)}
.fsb .who{font-size:1.2em;line-height:1}
.fsb-strip small .amt.fill{font-size:1.15em}

/* No. 10: read-only line under the trust check */
.cx-ro{margin-top:var(--s4);font-size:16.5px;line-height:1.45;max-width:60ch}
.cx-ro b{font-stretch:112%}

/* No. 11: your data stays yours, and every decision is signed */
.yours-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(28px,4vw,48px)}
.yours-list{margin-top:0}
.yours-side{position:relative}
.egress{max-width:520px}
.egress .ch b small{font-weight:500;font-size:15px;color:var(--check-ink);margin-left:6px;font-stretch:100%}
.egress .f-title{font-size:19px;font-weight:800;font-stretch:108%;line-height:1.25;margin:12px 0 4px}
.egress .ln{min-height:56px}
.egress .ln .it small{color:var(--check-ink)}
.egress .ln .v{font-size:16px;color:var(--red)}
.egress .tot{display:grid;grid-template-columns:1fr auto;align-items:center;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);padding:10px 0;margin-top:6px}
.egress .tot .lab{font-weight:800;font-stretch:118%}
.egress .tot .v{font-size:26px;font-weight:800;font-stretch:112%}
.eg-stamp{position:absolute;right:18px;top:-6px;z-index:2}
@media (max-width:900px){.yours-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.egress{padding:20px 16px 22px}}
/* the stub of the check you hold is drawn as taken down: dashed outline, full-contrast type */
.stub.is-up{opacity:1;background:transparent;box-shadow:none;outline:1.5px dashed var(--check-ink);outline-offset:-1.5px;color:var(--ink)}
.stub.is-up::after{display:none}
.day.is-night .stub.is-up{color:var(--pass-ink);outline-color:var(--pass-dim)}
.day.is-night .stub.is-up b{color:#EF6B5F}
.signcard .sign-out{min-height:2.9em}
@media (min-width:901px){.day-grid>.phone-wrap{align-self:start;position:sticky;top:96px}}
.rota-chk.hang{margin-top:var(--s7)}
.ticket-stamp{top:4px}
.eg-stamp{top:auto;bottom:34px;right:28px}
.rota-note{margin-top:var(--s5)}
@media (max-width:560px){.chk.hang::before{left:-6px;right:-6px}}
@media (max-width:480px){
  .fsb-strip{grid-template-columns:minmax(0,1fr)}
  .fsb-strip li,.fsb-strip li+li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:var(--s3);padding:var(--s4) 0;border-left:0;border-bottom:1px solid var(--hair)}
  .fsb-strip li:not(:last-child)::after{display:none}
  .fsb-n{grid-row:span 2;font-size:56px}
  .fsb-strip b{margin-top:2px}
}
.eg-stamp{position:relative;top:auto;bottom:auto;right:auto;display:inline-block;margin:6px 0 0 12px}
/* after the 38 v6.1 wiring: real screens beside the drawn strip, rota panel, connections, egress */
.fsb-fig{margin:var(--s5) 0 0}
.fsb-fig figcaption,.rota-fig figcaption{margin-top:10px;font-size:14px;color:var(--steel)}
.cx-keep .shots{margin-top:var(--s4)}
.yours .shots{margin-top:var(--s4)}
.rota-fig .page.flat+.page.flat{margin-top:var(--s4)}

/* ---------- 19 Oct 2026 17:10, plain-language rebuild (REPORT_2026-10-19_plain.md) ---------- */
/* No. 02 who does what: who does each station, in biro above the verb */
.who .intro{max-width:60ch}
.flow4 .who-by{display:block;margin-top:var(--s4);font-size:19px;line-height:1.1}
.flow4 .who-by+b{margin-top:4px}
.who-then{margin-top:clamp(28px,4vw,48px);max-width:70ch;font-size:clamp(17px,1.3vw,19px);line-height:1.45;border-top:1px solid var(--hair);padding-top:var(--s4)}
@media (max-width:720px){.flow4 .who-by{margin-top:var(--s3);font-size:16px}}
/* No. 03 how it works: the three stages above the ledger */
.stages{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.stages li{border-top:2px solid var(--ink);padding-top:var(--s4)}
.stages .num{width:40px;height:40px;font-size:22px}
.stages b{display:block;margin-top:var(--s3);font-size:clamp(22px,2vw,30px);font-stretch:125%;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.stages p{margin-top:var(--s2);font-size:17px;line-height:1.45;max-width:36ch}
.how-sub{margin-top:clamp(36px,5vw,64px);font-size:17px;color:var(--steel)}
.how-sub+.how-cols{margin-top:12px}
@media (max-width:900px){.stages{grid-template-columns:minmax(0,1fr)}}
/* No. 04 what it does: six outcomes, one plain line per feature */
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,52px) clamp(20px,3vw,48px);margin-top:clamp(32px,4vw,56px)}
.out{border-top:2px solid var(--ink);padding-top:var(--s4);display:flex;flex-direction:column}
.out h3{display:flex;align-items:center;gap:12px;font-size:clamp(21px,1.7vw,25px);font-stretch:118%;font-weight:800;line-height:1.15}
.out h3 .num{width:36px;height:36px;font-size:20px}
.out h3 a{color:inherit;text-decoration:none}
.out h3 a:hover,.out h3 a:focus-visible{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em}
.out ul{list-style:none;margin:var(--s3) 0 0;padding:0;flex:1}
.out li{position:relative;padding:8px 0 8px 18px;border-bottom:1px solid var(--hair);font-size:16.5px;line-height:1.4}
.out li::before{content:"";position:absolute;left:0;top:1.05em;width:10px;height:2px;background:var(--biro);transform:rotate(-8deg)}
.out li .tag{margin-right:6px}
.out-go{display:inline-block;margin-top:var(--s3);font-family:"Kalam",cursive;color:var(--biro);font-size:18px;text-decoration:none}
.out-go::after{content:" \2193"}
.out-go:hover,.out-go:focus-visible{text-decoration:underline}
@media (max-width:1100px){.outs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.outs{grid-template-columns:minmax(0,1fr)}.out li{font-size:16px}}
/* No. 11 reputation and search (60_reputation, in build) */
.rep-grid{align-items:start}
.rep-side{position:relative;padding-top:var(--s5)}
.rep-chk{max-width:520px}
.rep-chk .ch b small{font-weight:500;font-size:15px;color:var(--check-ink);margin-left:6px;font-stretch:100%}
.rep-chk .ln{min-height:54px}
.rep-chk .ln .it small{color:var(--check-ink)}
.rep-chk .ln .v{font-size:16px;white-space:nowrap}
.rep-chk .tot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);padding:10px 0;margin-top:6px}
.rep-chk .tot .lab{font-weight:800;font-stretch:118%}
.rep-chk .tot .v{font-size:16px;font-weight:800;color:var(--red);white-space:nowrap}
.rep-stamp{display:inline-block;margin:10px 0 0 12px}
@media (max-width:560px){.rep-chk{padding:20px 16px 22px}.rep-chk .ln .v,.rep-chk .tot .v{white-space:normal;text-align:right}}
/* No. 17 the full list: one fold, closed by default */
.inside-all{margin-top:clamp(28px,4vw,48px);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.inside-all>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:18px 0;min-height:64px;cursor:pointer;list-style:none}
.inside-all>summary::-webkit-details-marker{display:none}
.inside-all>summary .ia-l{font-size:clamp(21px,1.8vw,27px);font-weight:800;font-stretch:125%;letter-spacing:-.01em}
.inside-all>summary .ia-n{font-size:19px;white-space:nowrap}
.inside-all>summary .ia-n::after{content:"+";display:inline-block;margin-left:10px;font-family:"Archivo",sans-serif;font-weight:700;color:var(--ink);transition:transform .2s var(--ease)}
.inside-all[open]>summary .ia-n::after{transform:rotate(45deg)}
.inside-all>summary:hover .ia-l{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em}
.inside-all .inside-grid{margin-top:var(--s3);padding-bottom:var(--s5)}
/* No. 16: the street sketch gets its sign, lettered in pencil (SVG strokes, not a font) */
.street-art{position:relative}
.street-art img{display:block;width:100%;height:auto}
.street-sign{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.street-sign .ink{stroke:var(--ink);opacity:.9}
.street-sign .ghost{stroke:var(--ink);opacity:.35}
.js-motion .book:not(.is-in) .street-sign{clip-path:inset(0 100% 0 0)}
.js-motion .book .street-sign{transition:clip-path .6s var(--pen) .25s}