/*
Theme Name: Koku & Co.
Theme URI: https://kokuand.co
Author: Koku & Co.
Description: Bespoke classic theme for the Koku & Co. marketing site. Hand-coded templates, self-hosted Switzer, no page builder. Recreates the approved high-fidelity design.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: koku
*/

/* ============================================================
   Self-hosted fonts (Switzer)
   ============================================================ */
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Zodiak';src:url('assets/fonts/zodiak-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('assets/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Koku Mono = JetBrains Mono (Fontshare, same licence family as Switzer and
   Zodiak), the Label rung's face. Chosen 2026-07-25, closing the Brand Book's
   open item: section 07 named mono for Label but never picked a family, so the
   rung ran on a system stack that rendered differently on every machine.
   NOTE THE DELIBERATE ONE-STEP-UP MAPPING, it is not a typo. JetBrains Mono
   runs light next to SF Mono at the same nominal weight, and the Label rung is
   structural (kickers and section numbers holding their own against 28px
   headings), so each rung is mapped to the face one step heavier: the ~163
   call sites keep saying 600 and get the 700 file. That way no call site had
   to change and the shift lives in one place. 400 is declared because a few
   call sites set no weight at all and would otherwise fall on a face that does
   not exist and be resolved by luck. No 700 face is declared, so a future
   `font-weight:700` on this family gets nothing heavier than 600 already does. */
@font-face{font-family:'Koku Mono';src:url('assets/fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Koku Mono';src:url('assets/fonts/jetbrains-mono-600.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Koku Mono';src:url('assets/fonts/jetbrains-mono-700.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --paper:#FAFAF8;
  --ink:#1B2530;
  --band:#EDF1F6;
  --hair-strong:#D7DFE7;
  --hair-soft:#E3E9F0;
  --slate:#3D5A73;
  --slate-light:#9FB4C6;
  --spark:#1D5BE8;
  --spark-pressed:#1548BE;
  --spark-lift:#4D7DF2;
  --header-line:#EDF1F6;
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1240px;
  --pad:clamp(28px,5vw,72px);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:'Switzer',Helvetica,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--slate)}
img{max-width:100%;display:block}
::selection{background:rgba(29,91,232,.16)}

/* Grain overlay: fixed, full viewport, above content but non-interactive */
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================================================
   Keyframes (full set used across pages)
   ============================================================ */
@keyframes riseIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes maskUp{from{transform:translateY(120%)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes drawLine{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wipeRight{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes popIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes pulseLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* The kill switch is animation:none (not a shortened duration):
   scroll-driven view() timelines ignore duration, so only removing
   the animation actually kills them. Safe because every element's
   base style is its final visible state; hidden states live only
   in keyframes. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{position:relative}
.section--band{background:var(--band)}
.section--ink{background:var(--ink)}
.section-pad{padding-top:clamp(80px,9vw,116px);padding-bottom:clamp(80px,9vw,116px)}

/* Ghost section numeral (01..06) top-right of a section */
.ghost-num{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ghost-num span{position:absolute;top:18px;right:14px;font:700 clamp(150px,19vw,240px)/0.8 'Switzer',sans-serif;letter-spacing:-0.05em;color:transparent;-webkit-text-stroke:1.5px rgba(27,37,48,.1);user-select:none}
.section--ink .ghost-num span{-webkit-text-stroke-color:rgba(250,250,248,.12)}

/* ============================================================
   Wordmark
   ============================================================ */
.wordmark{display:inline-flex;align-items:baseline}
.wordmark .w{font:600 17px/1 'Switzer',sans-serif;letter-spacing:-0.01em}
.wordmark .amp{font:italic 400 21px/1 'Zodiak',serif;color:var(--slate);margin:0 3px 0 4px}

/* ============================================================
   Sticky header
   ============================================================ */
.site-header{position:sticky;top:0;z-index:70;background:rgba(250,250,248,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--header-line)}
.site-header__inner{max-width:var(--wrap);margin:0 auto;padding:16px var(--pad);display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.site-header__nav{display:flex;align-items:baseline;gap:26px;font:400 14.5px/1 'Switzer',sans-serif}
.site-header__nav a{color:rgba(27,37,48,.6)}
.site-header__nav a:hover{color:var(--slate)}
.site-header__nav a.is-current{font-weight:600;color:var(--ink);border-bottom:2px solid var(--slate);padding-bottom:3px}
.site-header__nav .nav-checkup{font-weight:500;color:var(--slate)}
.header-checkup-link{font:500 14.5px/1 'Switzer',sans-serif;color:var(--slate);text-decoration:underline;text-underline-offset:4px}
#scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--slate);transform:scaleX(0);transform-origin:left}

/* Below 760px the inline nav yields to a "Menu" text trigger + full-screen overlay */
.menu-toggle{display:none;align-items:center;min-height:44px;margin:-14px -14px -14px 0;padding:0 14px;background:none;border:0;cursor:pointer;font:500 14.5px/1 'Switzer',sans-serif;color:var(--slate)}
.menu-toggle:hover{color:var(--ink)}
@media (max-width:760px){
  .site-header__inner{padding-top:14px;padding-bottom:14px}
  .site-header__nav{display:none}
  .menu-toggle{display:inline-flex}
  /* Home hero: scroll cue + rotating badge are clutter on small screens.
     !important overrides the cue's inline display:flex (inline beats an id rule) */
  #scroll-cue,#hero-badge{display:none!important}
}

/* ============================================================
   Menu overlay (below 760px): paper panel over the header,
   under the grain (z 75, between header 70 and grain 80)
   ============================================================ */
.menu-overlay{position:fixed;inset:0;z-index:75;background:var(--paper);display:flex;flex-direction:column;overflow-y:auto}
.menu-overlay__bar{flex-shrink:0;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:14px var(--pad);border-bottom:1px solid var(--header-line)}
.menu-overlay__close{min-height:44px;margin:-14px -14px -14px 0;padding:0 14px;background:none;border:0;cursor:pointer;font:500 14.5px/1 'Switzer',sans-serif;color:var(--slate)}
.menu-overlay__close:hover{color:var(--ink)}
.menu-overlay__nav{flex:1;display:flex;flex-direction:column;padding:clamp(20px,5vh,44px) var(--pad) 32px}
.menu-overlay__item{overflow:hidden;border-bottom:1px solid var(--hair-soft)}
.menu-overlay__item a{display:block;padding:clamp(18px,3.4vh,26px) 0;font:500 clamp(30px,7vw,40px)/1.1 'Switzer',sans-serif;letter-spacing:-0.025em;color:var(--ink);animation:maskUp .85s var(--ease) both}
.menu-overlay__item:nth-child(1) a{animation-delay:.05s}
.menu-overlay__item:nth-child(2) a{animation-delay:.11s}
.menu-overlay__item:nth-child(3) a{animation-delay:.17s}
.menu-overlay__item:nth-child(4) a{animation-delay:.23s}
.menu-overlay__item:nth-child(5) a{animation-delay:.29s}
.menu-overlay__item a.is-current{font-weight:600;text-decoration:underline;text-decoration-color:var(--slate);text-decoration-thickness:2px;text-underline-offset:10px}
.menu-overlay__item--checkup{margin-top:auto;border-top:1px solid var(--hair-strong);border-bottom:0}
.menu-overlay__item--checkup a{color:var(--slate)}
.menu-overlay__arrow{display:inline-block;margin-left:14px;transition:transform .35s var(--ease)}
.menu-overlay__item--checkup a:hover .menu-overlay__arrow{transform:translateX(6px)}

/* ============================================================
   Single work case: the sidebar is sticky only while it sits
   beside the article. Once the columns stack (below the flex
   wrap point) a sticky sidebar would pin to the top and the
   article would scroll into it, so drop back to normal flow.
   !important overrides the inline position:sticky. It also
   moves after the article once stacked: the sidebar is a stat
   summary, not an entry point, so a reader landing straight on
   a case page should meet the headline and "The problem" first,
   not raw percentages with no story attached yet.
   ============================================================ */
@media (max-width:900px){
  .case-aside{position:static!important;top:auto!important;order:1}
}

/* ============================================================
   Kicker (numbered section eyebrow)
   ============================================================ */
.kicker{display:flex;align-items:baseline;gap:12px;font:600 11.5px/1 'Switzer',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--slate)}
.kicker .muted{color:rgba(27,37,48,.5)}
.section--ink .kicker{color:var(--slate-light)}
.section--ink .kicker .muted{color:rgba(250,250,248,.5)}

/* Headings */
.h1{margin:0;font:600 clamp(48px,6.4vw,88px)/1.02 'Switzer',sans-serif;letter-spacing:-0.034em;text-wrap:balance}
.h2{margin:22px 0 0;font:600 clamp(38px,4.8vw,64px)/1.06 'Switzer',sans-serif;letter-spacing:-0.03em;text-wrap:balance}
.section--ink .h2{color:var(--paper)}

/* Masked slide-up line wrapper for h1 */
.mask{display:block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em}
.mask > span{display:block}

/* Margin note / aside (Switzer italic, slate) */
.margin-note{font:italic 400 14px/1.65 'Switzer',sans-serif;color:var(--slate);text-wrap:pretty}
.section--ink .margin-note{color:var(--slate-light)}

/* Body copy */
.lede{font-size:18.5px;line-height:1.68;text-wrap:pretty}
.body{font-size:17px;line-height:1.7;text-wrap:pretty}

/* ============================================================
   Buttons / CTA links
   ============================================================ */
.btn-cta{background:var(--spark);color:var(--paper);font:600 16.5px/1 'Switzer',sans-serif;padding:17px 28px;border-radius:10px;display:inline-block;border:0;cursor:pointer;transition:transform .35s var(--ease),background .35s}
.btn-cta:hover{background:var(--spark-pressed);color:var(--paper);transform:translateY(-3px)}
.cta-link{font:500 17px/1.4 'Switzer',sans-serif;color:var(--spark);text-decoration:underline;text-underline-offset:4px}
.cta-link:hover{color:var(--spark-lift)}
.link-slate{color:var(--slate);text-decoration:underline;text-underline-offset:4px}
.link-slate:hover{color:var(--slate)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--paper)}
.site-footer__inner{max-width:var(--wrap);margin:0 auto;padding:42px var(--pad) 38px;display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap}
.site-footer .wordmark .w{font-size:15.5px}
.site-footer .wordmark .amp{font-size:19px}
.site-footer__tag{font-size:14px;color:rgba(27,37,48,.6);max-width:420px}
.site-footer__nav{display:flex;gap:22px;font-size:14px;flex-wrap:wrap}
.site-footer__copy{font-size:13px;color:rgba(27,37,48,.45)}

/* ============================================================
   Cursor follower dot
   ============================================================ */
#cursor-dot{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--slate);opacity:0;z-index:90;pointer-events:none;will-change:transform}

/* ============================================================
   Work index verb filter
   ============================================================ */
.verb-btn{background:transparent;color:var(--ink);border:1px solid rgba(27,37,48,.3)}
.verb-btn:hover{border-color:var(--slate);color:var(--slate)}
.verb-btn .verb-count{color:rgba(27,37,48,.45);margin-left:3px}
.verb-btn.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.verb-btn.is-active:hover{color:var(--paper);border-color:var(--ink)}
.verb-btn.is-active .verb-count{color:rgba(250,250,248,.55)}

/* ============================================================
   Contact form (Say hello page)
   ============================================================ */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font:600 12px/1.4 'Switzer',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.field label .opt{font-weight:400;letter-spacing:.02em;text-transform:none;color:rgba(27,37,48,.5)}
.field .hint{font-size:13.5px;line-height:1.5;color:rgba(27,37,48,.55);margin:-2px 0 0}
.field input,.field textarea{appearance:none;width:100%;background:var(--paper);border:1px solid var(--hair-strong);border-radius:10px;padding:13px 15px;font:400 16px/1.5 'Switzer',sans-serif;color:var(--ink);transition:border-color .25s,box-shadow .25s}
.field textarea{resize:vertical;min-height:150px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 3px rgba(61,90,115,.16)}
.field input::placeholder,.field textarea::placeholder{color:rgba(27,37,48,.35)}
/* Honeypot: visually removed; its label tells AT users to leave it empty */
.field--trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Brand Discovery (/brand-discovery/): unlisted client intake.
   Base markup shows every step (JS-off = one long scroll); the
   .js gate (added by brand-discovery.js) turns it into a
   non-linear page-turn wizard. Cobalt on .btn-cta only; every
   selected state (scale mark, checkbox, current nav row) is ink.
   ============================================================ */
.disc-desk{background:var(--band);padding:clamp(28px,5vw,64px) clamp(14px,4vw,40px)}
.disc-sheet{max-width:880px;margin:0 auto;background:var(--paper);border:1px solid var(--hair-strong);padding:clamp(32px,6vw,72px)}
.disc-mono{font:600 11px/1.4 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.disc-mono--onink{color:var(--slate-light)}
.disc-kicker{font:600 12px/1.4 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}

/* Cover */
.disc-cover__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(40px,8vw,90px)}
.disc-title{font:600 clamp(42px,5.5vw,76px)/1.02 'Switzer',sans-serif;letter-spacing:-0.034em;margin:14px 0 0}
.disc-title em{font-style:italic;color:var(--ink)}
.disc-lede{max-width:60ch;margin:24px 0 0;font-size:17px;line-height:1.62;color:rgba(27,37,48,.72);text-wrap:pretty}
.disc-save-note{margin:18px 0 0;font-size:13.5px;line-height:1.5;color:rgba(27,37,48,.55)}
.disc-error{margin:22px 0 0;padding:12px 15px;border:1px solid var(--hair-strong);background:var(--band);font-size:14.5px;line-height:1.6}

/* Navigator (the contents list = the wizard nav) */
.disc-nav{margin:clamp(32px,5vw,52px) 0;border-top:1px solid var(--hair-soft)}
.disc-nav__label{font:600 11px/1.4 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);padding:16px 0 10px}
.disc-nav__row{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair-soft);cursor:pointer;color:var(--ink);text-decoration:none}
.disc-nav__n{font:600 12px/1 'Koku Mono',ui-monospace,Menlo,monospace;color:var(--slate);min-width:26px}
.disc-nav__t{font:500 15px/1.4 'Switzer',sans-serif}
.disc-nav__row.is-active .disc-nav__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.disc-nav__row.is-answered .disc-nav__n::after{content:"·";margin-left:6px;color:var(--ink)}

/* Steps + questions */
.disc-module__head{display:flex;align-items:last baseline;gap:20px}
.disc-module__n{font:600 clamp(44px,7vw,62px)/1 'Switzer',sans-serif;color:var(--ink)}
.disc-module__title{font:600 30px/1.1 'Switzer',sans-serif;letter-spacing:-0.02em;margin:3px 0 0}
.disc-module__intro{max-width:62ch;margin:16px 0 0;font-size:15.5px;line-height:1.55;color:rgba(27,37,48,.68)}
.disc-qs{margin-top:30px}
.disc-q{padding:22px 0;border-top:1px solid var(--hair-soft)}
.disc-q__head{display:flex;gap:16px}
.disc-q__n{font:600 13px/1.6 'Koku Mono',ui-monospace,Menlo,monospace;color:var(--slate);min-width:34px}
.disc-q__prompt{font:600 19px/1.4 'Switzer',sans-serif;color:var(--ink);margin:0}
.disc-q__hint{font-size:14px;line-height:1.5;color:rgba(27,37,48,.55);margin:5px 0 0}
.disc-q__in{margin:14px 0 0 50px}
.disc-input{appearance:none;width:100%;background:var(--paper);border:1px solid var(--hair-strong);border-radius:10px;padding:13px 15px;font:400 16px/1.5 'Switzer',sans-serif;color:var(--ink);transition:border-color .25s,box-shadow .25s}
textarea.disc-input{resize:vertical;min-height:60px}
.disc-input:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 3px rgba(61,90,115,.16)}

/* Word grids */
.disc-words{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 4px}
.disc-word{flex:1 1 130px;min-width:120px;appearance:none;background:var(--paper);border:1px solid var(--hair-strong);border-radius:8px;padding:10px 12px;font:400 15px/1.4 'Switzer',sans-serif;color:var(--ink)}
.disc-word:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 3px rgba(61,90,115,.16)}
.disc-words__lead{margin:12px 0 4px}

/* Ruled tone/visual scales: a hairline with five stops, ink mark on select */
.disc-scale{border:0;margin:0 0 20px;padding:0;display:flex;align-items:center;gap:14px}
.disc-scale__legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.disc-scale__end{width:78px;flex-shrink:0}
.disc-scale__end:first-of-type{text-align:right}
.disc-scale__track{flex:1;display:flex;justify-content:space-between;align-items:center;position:relative;height:22px}
.disc-scale__track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair-strong)}
.disc-scale__stop{position:relative;z-index:1;cursor:pointer;padding:6px}
.disc-scale__stop input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.disc-scale__mark{display:block;width:10px;height:10px;border-radius:50%;background:var(--paper);border:1px solid var(--slate-light);transition:background .2s,border-color .2s,transform .2s}
.disc-scale__stop input:checked + .disc-scale__mark{background:var(--ink);border-color:var(--ink);transform:scale(1.25)}
.disc-scale__stop input:focus-visible + .disc-scale__mark{box-shadow:0 0 0 3px rgba(61,90,115,.3)}

/* Checkbox groups */
.disc-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.disc-check{display:flex;align-items:center;gap:10px;cursor:pointer;font:400 15px/1.4 'Switzer',sans-serif}
.disc-check input{position:absolute;opacity:0;width:0;height:0}
.disc-check__box{width:18px;height:18px;flex-shrink:0;border:1px solid var(--hair-strong);border-radius:5px;background:var(--paper);transition:background .15s,border-color .15s}
.disc-check input:checked + .disc-check__box{background:var(--ink);border-color:var(--ink)}
.disc-check input:focus-visible + .disc-check__box{box-shadow:0 0 0 3px rgba(61,90,115,.3)}
.disc-check--other{grid-column:1/-1;gap:12px}
.disc-check--other .disc-input{max-width:280px}

/* The one dark card ("finish this sentence") */
.disc-brave{background:var(--ink);border-radius:4px;padding:clamp(24px,4vw,32px);margin-top:32px}
.disc-brave__line{font:500 clamp(20px,3vw,26px)/1.9 'Switzer',sans-serif;color:var(--paper);margin:14px 0 0}
.disc-brave__blank{appearance:none;background:transparent;border:0;border-bottom:1px solid var(--slate-light);color:var(--paper);font:italic 500 clamp(20px,3vw,26px)/1.4 'Switzer',sans-serif;min-width:160px;padding:0 8px}
.disc-brave__blank:focus{outline:none;border-bottom-color:var(--paper)}
.disc-brave__blank::placeholder{color:rgba(250,250,248,.4)}

/* Part divider */
.disc-divider{background:var(--ink);border-radius:4px;padding:clamp(32px,5vw,56px);margin:0 0 8px}
.disc-divider__h{font:600 clamp(40px,6vw,56px)/1 'Switzer',sans-serif;color:var(--paper);margin:14px 0 0}

/* Step nav + wizard gate */
.disc-stepnav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding-top:20px;border-top:1px solid var(--hair-soft)}
.disc-back{background:transparent;border:0;cursor:pointer;color:var(--slate);text-decoration:underline;text-underline-offset:4px;font:500 15px/1 'Switzer',sans-serif}
.js .disc-step{display:none}
.js .disc-step.is-active{display:block;animation:discIn .5s var(--ease) both}
@keyframes discIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Review read-back */
.disc-review__q{padding:14px 0;border-top:1px solid var(--hair-soft)}
.disc-review__label{font:600 13px/1.6 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--slate)}
.disc-review__val{font:400 16px/1.6 'Switzer',sans-serif;color:var(--ink);white-space:pre-wrap;margin:2px 0 0}

@media (max-width:720px){
  .disc-checks{grid-template-columns:1fr}
  .disc-q__in{margin-left:0}
  .disc-scale__end{width:64px}
}
@media (prefers-reduced-motion:reduce){
  .js .disc-step.is-active{animation:none}
}

/* ============================================================
   About page (The two of us): founder photo tilt
   (hover states can't be inline; base transform lives here too
   so the hover rule can override it)
   ============================================================ */
.about-photo{transition:transform .5s var(--ease)}
.about-photo--daniel{transform:rotate(-2.2deg)}
.about-photo--mel{transform:rotate(2deg)}
.about-photo:hover{transform:rotate(0deg) scale(1.02)}

/* ============================================================
   Home hero: the upturn (2026-07-15). One full-bleed line draws
   flat carrying the busywork as named ticks; the ticks file
   themselves onto a shelf and the freed half turns up in cobalt.
   The drawn stage is aria-hidden chart furniture. home-hero.js
   lays the geometry out AS the finished poster before any motion,
   so reduced motion and slow JS land on the complete composition;
   GSAP only adds the show.
   ============================================================ */
.hero{position:relative;overflow:hidden;min-height:max(calc(100vh - 54px),800px);background:var(--paper)}
#stage{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.tick{position:absolute;z-index:1;width:2.5px;border-radius:1.25px;background:var(--slate);pointer-events:none}
.tick .cw{position:absolute;bottom:100%;left:-1px;margin-bottom:6px;font:500 12.5px/1 'Switzer',sans-serif;color:var(--ink);white-space:nowrap}
#shelf-tag{position:absolute;z-index:1;pointer-events:none}
#hinge-tag{position:absolute;z-index:1;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#hinge-tag .stem{width:1.5px;height:14px;background:var(--slate-light);margin-left:1px}
#shelf-tag .txt,#hinge-tag .txt{font:600 11px/1 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.hero__inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:clamp(48px,8vh,92px) var(--pad) 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:2}
.hero-foot__inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) clamp(28px,4vh,40px);display:flex;align-items:flex-end;gap:24px}
.hero-foot__col{display:flex;flex-direction:column;gap:14px;max-width:620px}
/* the scroll cue lives in the foot row and centers itself in the
   free space between the paragraph column and the badge */
.hero-foot__cue{flex:1;display:flex;justify-content:center}
@media (max-width:900px){
  .hero{min-height:0}
  .hero__inner{padding-bottom:225px}
  .hero-foot{position:static}
  .hero-foot__inner{padding-top:0;padding-bottom:clamp(48px,7vh,64px)}
  .hero-foot__cue{display:none}
  .tick .cw{font-size:10.5px}
}

/* ============================================================
   Home diagnosis scene (ghost 01): the page's one pinned moment.
   At >=900 the chart stage sits sticky beside its flowing act;
   below 900 the scene stacks in source order and reads as two
   plain sections (sticky must not survive the stack, same trap
   as .case-aside).
   ============================================================ */
.diag{display:grid;grid-template-columns:minmax(0,1fr);gap:52px}
.diag__stage{background:var(--paper);border:1px solid var(--hair-strong);border-radius:16px;padding:clamp(20px,2.4vw,30px)}
@media (min-width:900px){
  .diag{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,84px);row-gap:clamp(76px,8vw,110px);align-items:start}
  /* act 2 mirrors act 1 (chart left, text right) so the scene
     alternates instead of running the same layout twice (Mel's
     left-heavy call, 2026-07-15); source order still stacks
     text-then-chart per act below 900 */
  .diag__act1{grid-column:1;grid-row:1}
  .diag__stage1{grid-column:2;grid-row:1;align-self:stretch}
  .diag__act2{grid-column:2;grid-row:2}
  .diag__stage2{grid-column:1;grid-row:2;align-self:stretch}
  .diag__stage{position:sticky;top:94px}
}

/* ============================================================
   Home sort beat (ghost 02): one stream of work in, three piles
   out. The branch diagram is aria-hidden chart furniture drawn
   at >=900, spanning the full wrap (its endpoints align with the
   lane centers because the SVG and the lane grid share one width
   and equal thirds); the stream's run-in continues past the wrap
   to the viewport's left edge. Below 900 the lanes stack and
   keep only their stems. The dashed "Runs on its own" rail
   marches its dashes forever (sortMarch): the automated lane is
   the only thing still moving after the sort show ends; the
   global reduced-motion kill covers it, and home-sort.js re-arms
   it when it freezes the reveals for the show.
   ============================================================ */
@keyframes sortMarch{to{stroke-dashoffset:-8}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sort-branches{display:none}
.sort-runin{display:none}
.sort-plumb{width:100%}
.sort-lanes{display:flex;flex-direction:column;gap:44px;margin:0 auto;width:100%}
.sort-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px}
/* the one chip long enough to unbalance its pile: inline-styled like
   its siblings below 900 (one line in the wrapping flow), folded to
   two lines inside the >=900 ledger (media-scoped, so it can't be
   inline; the 160px cap breaks after "day-to-day" with ~14px headroom
   at the measured Switzer width, and the tick pins to the first
   line's middle, 18px * 1.25 line box) */
.sort-chip--wrap{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:500;color:var(--slate);white-space:nowrap}
.sort-chip--wrap > span{width:16px;border-top:2.5px solid var(--slate);flex-shrink:0}
/* the lane stems. At >=900 each one is the last 20px of the plumbing
   dropping into its pile, standing vertical in its lane's own line
   treatment. Below 900 .sort-branches is hidden, which left the stems
   hanging off nothing and reading as stray marks, so they lie down
   into a short rule that reads as a deliberate marker above the label
   (Mel's call, 2026-07-25; the alternative was hiding them, which the
   chip ticks already make redundant). Media-scoped, so it cannot be
   inline, same reason as .sort-chip--wrap above. */
.sort-stem{display:block;width:28px;height:2px;border-radius:1px}
.sort-stem--concentrate{background:rgba(27,37,48,.4)}
.sort-stem--delegate{width:34px;height:2.5px;border-radius:1.25px;background:var(--slate)}
.sort-stem--automate{background:var(--slate-light)}
@media (min-width:900px){
  .sort-plumb{position:relative;margin-bottom:-4px;view-timeline:--sort-plumb}
  .sort-branches{display:block;width:100%}
  /* the stems stand back up: here they ARE the plumbing's last drop,
     so they keep the exact widths the SVG stems land on (2, 3, 2) */
  .sort-stem{width:2px;height:20px;border-radius:1px}
  .sort-stem--delegate{width:3px;height:20px;border-radius:1.5px}
  /* the run-in rides the plumb's own view timeline (its 2px box
     would make a self view() span nothing) and meets the SVG
     stream at its y, 30 of the 216 viewBox */
  .sort-runin{display:block;position:absolute;top:calc(100% * 30 / 216 - 1px);left:calc((100% - 100vw) / 2);width:calc((100vw - 100%) / 2);height:2px;border-radius:1px;background:var(--slate-light);transform-origin:left;animation:growX 1s cubic-bezier(.16,1,.3,1) both;animation-timeline:--sort-plumb;animation-range:entry 0% entry 10%}
  /* No column gap: the rail endpoints sit at exact sixths of the
     shared width, so the lanes must be exact thirds or the outer
     stems miss the drops by half the gap */
  .sort-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:start}
  /* piles read as ledger lists: left-aligned tick+word rows, the
     pile block itself centered in its lane. Mel tried centered
     rows for one deploy (2026-07-19) and reverted same day: the
     ledger stays, and the balance problem it had (the block
     centers on its widest row, so the long day-to-day outlier
     hung the shorter rows left of the label) is solved by
     folding that one chip to two lines instead (.sort-chip--wrap
     below) */
  .sort-chips{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:13px}
  .sort-chip--wrap{white-space:normal;max-width:160px;align-items:flex-start;line-height:1.25}
  .sort-chip--wrap > span{margin-top:10px}
}

/* ============================================================
   Home build beat (ghost 03): the "Marketing and websites" motif
   holds a full-page capture of our own shipped site, auto-
   scrolling in a seamless loop (the marquee's grammar, turned
   vertical: the column holds the capture twice and travels -50%).
   Hover pauses it; reduced motion holds the top frame. The long
   travel wants the slow duration, ~35px/s at card width.
   ============================================================ */
@keyframes miniLoop{to{transform:translateY(-50%)}}
.mini-frame{height:260px;overflow:hidden;border:1px solid var(--hair-strong);border-radius:8px;background:var(--paper)}
.mini-col{animation:miniLoop 90s linear infinite;will-change:transform}
.mini-frame:hover .mini-col{animation-play-state:paused}

/* ============================================================
   Home proof beat (ghost 04): contents-page rows. The rows carry
   their own evidence (title + excerpt); hover is the quiet tint
   only. Two hover-margin experiments were auditioned and cut
   (shape miniatures, then per-case stat cards); the record lives
   in COPY-DECISIONS, do not reintroduce without new cause.
   ============================================================ */
.toc-row{position:relative;transition:background .3s}
.toc-row:hover{background:rgba(61,90,115,.07)}

/* Utility */
.mono{font-family:'Koku Mono',ui-monospace,Menlo,monospace}
[hidden]{display:none!important}

/* ============================================================
   Design system (/design-system/): the system, componentized.
   Unlisted document like the Brand Book. The 18 specimens are
   ported from assets/playbook/*, which stays as the reference
   library. Every rule is scoped: the shared prelude to `.pb`,
   each specimen's own CSS to `#pb-<slug>`, because the source
   files reuse short names (.g, .card, .frame) with DIFFERENT
   meanings per component and define them as bare globals.
   The DS short custom props live on .pb, never :root, so they
   cannot touch the theme's --koku-* tokens.
   ============================================================ */
.pb{
  --base:#FAFAF8; --band:#EDF1F6; --ink:#1B2530;
  --accent:#3D5A73; --spark:#1D5BE8;
  --spark-press:#1548BE; --spark-lift:#4D7DF2;
  --accent-lt:#9FB4C6;
  --line:#DFE5EC; --line-soft:#E6EBF1;
  --ink-soft:#39434F; --muted:#656E7C;
  --s-4:4px; --s-8:8px; --s-16:16px; --s-24:24px;
  --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px;
  --col:1080px; --gutter:56px;
  background:var(--base);color:var(--ink);
  font-family:'Switzer',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.7;
}
/* Scoped reset: the specimens were authored standalone, where no
   element rules existed. Inside the theme, style.css's own rules
   would otherwise repaint them. */
.pb *{box-sizing:border-box}
.pb a{color:var(--accent);text-decoration:none}
/* The specimens set their own margins on every element they use, so no margin
   reset is needed here: adding one only removes spacing the source relied on.
   The button rule IS needed (UA buttons do not inherit font). */
.pb button{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
.pb img{max-width:100%;height:auto}
/* The cover's own list, not the specimens'. */
.pb-doc > section > ol{padding:0;list-style:none;margin:0}

.pb .amp{font-family:'Zodiak',Georgia,serif;font-style:italic;font-weight:400}
.pb .frame{padding:var(--s-48) var(--s-48) var(--s-32)}
.pb .frame.flush{padding:0}
.pb .note{max-width:760px;margin:var(--s-24) var(--s-48) var(--s-32);padding-top:var(--s-16);
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--muted)}
.pb .note b{color:var(--ink-soft);font-weight:600}
.pb .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pb .sec{padding:96px var(--gutter)}
.pb .sec.band{background:var(--band)}
.pb .sec.ink{background:var(--ink);color:#fff}
.pb .wrap{max-width:var(--col);margin:0 auto}
.pb .wm{font-weight:600;letter-spacing:-.03em;white-space:nowrap;color:var(--ink)}
.pb .wm .amp{font-size:1.25em;margin:0 .14em;color:var(--accent);letter-spacing:0}
.pb .wm.rev{color:#fff}
.pb .wm.rev .amp{color:var(--accent-lt)}
.pb .kicker{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;
        letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pb .h-display{font-size:56px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:0}
.pb .h1{font-size:40px;font-weight:600;letter-spacing:-.025em;line-height:1.15;margin:0}
.pb .h2{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0}
.pb .h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0}
.pb .lead{font-size:19px;line-height:1.5;color:var(--ink-soft);max-width:62ch}
.pb .body{font-size:16px;line-height:1.7;color:var(--ink-soft);max-width:68ch}
.pb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-.005em;
     padding:14px 26px;border-radius:8px;border:1px solid transparent;cursor:pointer;
     transition:background .14s,border-color .14s,color .14s}
.pb .btn-spark{background:var(--spark);color:#fff}
.pb .btn-spark:hover{background:var(--spark-press)}
.pb .btn-quiet{background:transparent;color:var(--ink);border-color:#C7D0DA}
.pb .btn-quiet:hover{border-color:var(--accent);color:var(--accent)}
.pb .btn-ghost{background:transparent;color:var(--accent);padding-left:0;padding-right:0}
.pb .btn-ghost:hover{color:var(--spark-lift)}
.pb .btn-sm{font-size:14px;padding:10px 18px;border-radius:7px}
.pb .btn-lg{font-size:17px;padding:17px 32px}
.pb .btn-onink{background:var(--spark);color:#fff}
.pb .btn-onink:hover{background:var(--spark-lift)}
.pb .card{background:var(--band);border:1px solid var(--line);border-radius:10px;padding:var(--s-32)}
.pb .card.on-band{background:var(--base)}
.pb .photo{background:var(--band);border:1px dashed #C2CCD7;border-radius:10px;
       display:flex;align-items:center;justify-content:center;text-align:center;
       font-size:11.5px;line-height:1.5;color:var(--muted);padding:12px}
/* ---- the specimens, each scoped to its own panel ---- */

/* --- buttons --- */
#pb-buttons.frame{padding:var(--s-48)}
#pb-buttons .rowlbl{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:var(--s-32) 0 12px}
#pb-buttons .r{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#pb-buttons .swatchrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
#pb-buttons .st{border:1px solid var(--line);border-radius:9px;padding:14px 16px;background:var(--band);min-width:180px}
#pb-buttons .st .k{font-size:12px;font-weight:600}
#pb-buttons .st .v{font-size:11px;color:var(--muted);letter-spacing:.05em;margin-top:2px}
#pb-buttons .onink{background:var(--ink);border-radius:10px;padding:var(--s-32);margin-top:12px}

/* --- checkup-block --- */
#pb-checkup-block.frame{padding:0}
#pb-checkup-block .ck{background:var(--band);border:1px solid var(--line);border-radius:14px;padding:var(--s-48);
      display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-48);align-items:center}
#pb-checkup-block .ck h2{margin:14px 0 0}
#pb-checkup-block .ck p{font-size:16px;line-height:1.7;color:var(--ink-soft);margin:14px 0 0;max-width:46ch}
#pb-checkup-block .ck .cta{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#pb-checkup-block .ck .u{font-size:13.5px;color:var(--muted)}
#pb-checkup-block .qs{background:var(--base);border:1px solid var(--line);border-radius:10px;padding:var(--s-24)}
#pb-checkup-block .qs .q{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:12px}
#pb-checkup-block .opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);
       border-radius:7px;font-size:13.5px;color:var(--ink-soft);margin-bottom:7px;background:var(--base)}
#pb-checkup-block .opt.sel{border-color:var(--accent);background:#EEF3F7;color:var(--ink)}
#pb-checkup-block .opt .b{width:13px;height:13px;border-radius:50%;border:1.5px solid #B9C4D0;flex:none}
#pb-checkup-block .opt.sel .b{border-color:var(--accent);border-width:4px}
#pb-checkup-block .qs .meta{font-size:11.5px;color:var(--muted);margin-top:12px}

/* --- cta-band --- */
#pb-cta-band.frame{padding:0}
#pb-cta-band .cta{padding:96px var(--gutter)}
#pb-cta-band .cta .wrap{max-width:var(--col);text-align:center}
#pb-cta-band .cta h2{font-size:44px;font-weight:600;letter-spacing:-.028em;line-height:1.12;margin:0 auto;max-width:20ch;color:#fff}
#pb-cta-band .cta p{font-size:17.5px;line-height:1.6;color:#B9C4D0;max-width:52ch;margin:20px auto 0}
#pb-cta-band .cta .b{margin-top:34px}
#pb-cta-band .cta .u{display:block;margin-top:16px;font-size:13.5px;color:#8D97A4}

/* --- faq --- */
#pb-faq.frame{padding:0}
#pb-faq .faq{margin-top:var(--s-48);max-width:820px}
#pb-faq .q{border-bottom:1px solid var(--line)}
#pb-faq .q summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;gap:16px;
             font-size:17.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
#pb-faq .q summary::-webkit-details-marker{display:none}
#pb-faq .q summary:after{content:"+";margin-left:auto;color:var(--accent);font-weight:400;font-size:22px;line-height:1}
#pb-faq .q[open] summary:after{content:"\2013"}
#pb-faq .q .a{font-size:15.5px;line-height:1.7;color:var(--ink-soft);padding:0 0 22px;max-width:64ch}

/* --- footer --- */
#pb-footer.frame{padding:0}
#pb-footer .ft{background:var(--ink);color:#B9C4D0;padding:var(--s-64) var(--gutter) var(--s-32)}
#pb-footer .ft .in{max-width:var(--col);margin:0 auto}
#pb-footer .ft .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s-48);padding-bottom:var(--s-48);
           border-bottom:1px solid #2B333D}
#pb-footer .ft h4{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;
         text-transform:uppercase;color:#6B7683;margin:0 0 16px}
#pb-footer .ft a{display:block;color:#B9C4D0;font-size:14.5px;padding:5px 0}
#pb-footer .ft a:hover{color:#fff}
#pb-footer .ft .meaning{font-size:14px;line-height:1.7;color:#8D97A4;max-width:40ch;margin:18px 0 0}
#pb-footer .ft .bottom{display:flex;align-items:center;gap:var(--s-24);padding-top:var(--s-24);font-size:12.5px;color:#6B7683;flex-wrap:wrap}
#pb-footer .ft .bottom .r{margin-left:auto;display:flex;gap:var(--s-24)}
#pb-footer .ft .bottom a{display:inline;font-size:12.5px;color:#8D97A4}

/* --- forms --- */
#pb-forms.frame{padding:0}
#pb-forms .fm{max-width:520px;margin-top:var(--s-32)}
#pb-forms .fld{margin-bottom:var(--s-24)}
#pb-forms label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
#pb-forms .hint{font-size:12.5px;color:var(--muted);margin-bottom:8px;font-weight:400}
#pb-forms input, #pb-forms select, #pb-forms textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--base);
    border:1px solid #C7D0DA;border-radius:8px;padding:13px 15px;outline:none;transition:border-color .14s,box-shadow .14s}
#pb-forms input:focus, #pb-forms select:focus, #pb-forms textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(61,90,115,.14)}
#pb-forms textarea{min-height:110px;resize:vertical;line-height:1.6}
#pb-forms .err input{border-color:#B4443A}
#pb-forms .errmsg{font-size:12.5px;color:#8E2F26;margin-top:6px}
#pb-forms .foot{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.6}

/* --- header --- */
#pb-header.frame{padding:0}
#pb-header .hdr{position:sticky;top:0;background:rgba(250,250,248,.88);backdrop-filter:blur(10px);
       border-bottom:1px solid var(--line);padding:0 var(--gutter)}
#pb-header .hdr .in{max-width:var(--col);margin:0 auto;height:74px;display:flex;align-items:center;gap:var(--s-32)}
#pb-header .hdr nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-32)}
#pb-header .hdr nav a{font-size:15px;color:var(--ink-soft)}
#pb-header .hdr nav a:hover{color:var(--ink)}
#pb-header .hdr nav a.checkup{color:var(--accent);font-weight:500}
#pb-header .below{padding:var(--s-48) var(--gutter)}

/* --- hero --- */
#pb-hero.frame{padding:0}
#pb-hero .hero{padding:120px var(--gutter) 96px}
#pb-hero .hero .wrap{max-width:var(--col)}
#pb-hero .hero .kicker{display:block;margin-bottom:22px}
#pb-hero .hero h1{font-size:88px;font-weight:600;letter-spacing:-.034em;line-height:1.05;margin:0;max-width:15ch}
#pb-hero .hero p{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:56ch;margin:26px 0 0}
#pb-hero .hero .cta{display:flex;align-items:center;gap:20px;margin-top:38px}
#pb-hero .hero .cta .u{font-size:13.5px;color:var(--muted)}

/* --- how-it-works --- */
#pb-how-it-works.frame{padding:0}
#pb-how-it-works .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-16);margin-top:var(--s-48)}
#pb-how-it-works .step{background:var(--band);border:1px solid var(--line);border-radius:10px;padding:var(--s-24)}
#pb-how-it-works .step.dest{background:#E3EEF0;border-color:#A9C8CF}
#pb-how-it-works .step .n{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;color:var(--accent)}
#pb-how-it-works .step.dest .n{color:#2C606E}
#pb-how-it-works .step h3{margin:12px 0 8px;font-size:19px}
#pb-how-it-works .step p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0}
#pb-how-it-works .gate{display:flex;align-items:center;gap:11px;margin-top:var(--s-24);background:var(--ink);color:#F1F4F7;
        border-radius:9px;padding:14px 20px;font-size:14.5px}
#pb-how-it-works .gate b{color:#fff}

/* --- services-cards --- */
#pb-services-cards.frame{padding:0}
#pb-services-cards .g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-24);margin-top:var(--s-48)}
#pb-services-cards .g .c{background:var(--base);border:1px solid var(--line);border-radius:10px;padding:var(--s-32);display:flex;flex-direction:column}
#pb-services-cards .g .c .n{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;color:var(--accent)}
#pb-services-cards .g .c h3{margin:14px 0 10px}
#pb-services-cards .g .c p{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0}
#pb-services-cards .g .c .f{margin-top:auto;padding-top:var(--s-24);font-size:13.5px;color:var(--accent)}

/* --- team-grid --- */
#pb-team-grid.frame{padding:0}
#pb-team-grid .g{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-32);margin-top:var(--s-48)}
#pb-team-grid .p .photo{width:100%;height:260px;border-radius:12px;margin-bottom:20px}
#pb-team-grid .p h3{margin:0 0 4px;font-size:24px;letter-spacing:-.015em}
#pb-team-grid .p .role{font-size:13.5px;color:var(--accent);font-weight:500;margin-bottom:12px}
#pb-team-grid .p p{font-size:14.5px;line-height:1.65;color:var(--ink-soft);margin:0}

/* --- testimonial --- */
#pb-testimonial.frame{padding:0}
#pb-testimonial .t{display:grid;grid-template-columns:200px 1fr;gap:var(--s-48);align-items:center}
#pb-testimonial .t .photo{width:200px;height:200px;border-radius:12px}
#pb-testimonial .t blockquote{margin:0;font-size:26px;line-height:1.4;font-weight:500;letter-spacing:-.015em;color:var(--ink);max-width:26ch}
#pb-testimonial .t .who{margin-top:22px;font-size:14.5px;color:var(--ink-soft)}
#pb-testimonial .t .who b{color:var(--ink);font-weight:600}
#pb-testimonial .ph{border:1px dashed #D8A9A2;background:#FBF3F2;border-radius:9px;padding:13px 17px;
      margin-top:var(--s-32);font-size:13px;line-height:1.6;color:#8E2F26;max-width:760px}

/* --- trust-band --- */
#pb-trust-band.frame{padding:0}
#pb-trust-band .tb{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      padding:var(--s-32) var(--gutter)}
#pb-trust-band .tb .in{max-width:var(--col);margin:0 auto;display:flex;align-items:center;gap:var(--s-48);flex-wrap:wrap}
#pb-trust-band .tb .lbl{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;
           letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#pb-trust-band .tb .items{display:flex;gap:var(--s-32);flex-wrap:wrap;margin-left:auto}
#pb-trust-band .tb .i{font-size:14.5px;color:var(--ink-soft);display:flex;align-items:center;gap:9px}
#pb-trust-band .tb .i:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
#pb-trust-band .pad{padding:var(--s-48) var(--gutter)}

/* --- colour --- */
#pb-colour .amp{font-family:'Zodiak',Georgia,serif;font-style:italic;font-weight:400}
#pb-colour.frame{padding:var(--s-48) var(--s-48) var(--s-32)}
#pb-colour .frame.flush{padding:0}
#pb-colour .note{max-width:760px;margin:var(--s-24) var(--s-48) var(--s-32);padding-top:var(--s-16);
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--muted)}
#pb-colour .note b{color:var(--ink-soft);font-weight:600}
#pb-colour .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#pb-colour h1{font-size:40px;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
#pb-colour .sub{font-size:19px;color:var(--ink-soft);margin:0 0 var(--s-48);max-width:640px}
#pb-colour h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:var(--s-48) 0 var(--s-16)}
#pb-colour .sw{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-16)}
#pb-colour .sw .s{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--band)}
#pb-colour .sw .chip{height:104px;box-shadow:inset 0 0 0 1px rgba(27,37,48,.08)}
#pb-colour .sw .meta{padding:14px 16px 16px;background:var(--base)}
#pb-colour .sw .hex{font-size:12px;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums}
#pb-colour .sw .nm{font-size:17px;font-weight:600;margin:2px 0 5px}
#pb-colour .sw .role{font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
#pb-colour .bar{display:flex;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin-top:var(--s-16)}
#pb-colour .bar div{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:.04em}
#pb-colour .states{display:flex;gap:var(--s-16);margin-top:var(--s-16);flex-wrap:wrap}
#pb-colour .state{border:1px solid var(--line);border-radius:9px;padding:14px 16px;background:var(--band);min-width:210px}
#pb-colour .state .dot{width:100%;height:34px;border-radius:6px;margin-bottom:10px}
#pb-colour .state .k{font-size:12px;font-weight:600;color:var(--ink)}
#pb-colour .state .v{font-size:11.5px;color:var(--muted);letter-spacing:.05em}
#pb-colour .state .u{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.5}
#pb-colour table{width:100%;border-collapse:collapse;margin-top:var(--s-16);font-size:13.5px}
#pb-colour th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
     color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--ink)}
#pb-colour td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
#pb-colour td.r{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
#pb-colour .g{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:2px 8px;border-radius:4px}
#pb-colour .g.AAA{background:#DDEBE2;color:#1F5136}
#pb-colour .g.AA{background:#E3EEF0;color:#2C606E}
#pb-colour .g.fail{background:#F6DFDC;color:#8E2F26}
#pb-colour .rule{background:var(--band);border:1px solid var(--line);border-left:3px solid var(--spark);
        border-radius:9px;padding:16px 20px;margin-top:var(--s-24);font-size:14.5px;color:var(--ink-soft);max-width:820px}
#pb-colour .rule b{color:var(--ink)}
#pb-colour .derived{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-16);margin-top:var(--s-16)}
#pb-colour .derived .d{border:1px dashed #C9D2DC;border-radius:9px;padding:13px 15px;background:var(--base)}
#pb-colour .derived .d .sq{width:26px;height:26px;border-radius:5px;border:1px solid var(--line);margin-bottom:9px}
#pb-colour .derived .d .nm{font-size:13px;font-weight:600}
#pb-colour .derived .d .hx{font-size:11.5px;color:var(--muted);letter-spacing:.05em}
#pb-colour .derived .d .u{font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.45}

/* --- logo --- */
#pb-logo .amp{font-family:'Zodiak',Georgia,serif;font-style:italic;font-weight:400}
#pb-logo.frame{padding:var(--s-48) var(--s-48) var(--s-32)}
#pb-logo .frame.flush{padding:0}
#pb-logo .note{max-width:760px;margin:var(--s-24) var(--s-48) var(--s-32);padding-top:var(--s-16);
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--muted)}
#pb-logo .note b{color:var(--ink-soft);font-weight:600}
#pb-logo .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#pb-logo h1{font-size:40px;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
#pb-logo .sub{font-size:19px;color:var(--ink-soft);margin:0 0 var(--s-48);max-width:660px}
#pb-logo h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:var(--s-48) 0 var(--s-16)}
#pb-logo .wm{font-weight:600;letter-spacing:-.03em;white-space:nowrap;color:var(--ink)}
#pb-logo .wm .amp{font-size:1.25em;margin:0 .14em;color:var(--accent);letter-spacing:0}
#pb-logo .wm.rev{color:#FFFFFF}
#pb-logo .wm.rev .amp{color:var(--accent-lt)}
#pb-logo .stageA{background:var(--band);border:1px solid var(--line);border-radius:10px;padding:var(--s-48);display:flex;justify-content:center}
#pb-logo .stageB{background:var(--ink);border-radius:10px;padding:var(--s-48);display:flex;justify-content:center}
#pb-logo .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16)}
#pb-logo .cap{font-size:11.5px;color:var(--muted);letter-spacing:.05em;margin-top:9px;text-align:center}
#pb-logo .marks{display:flex;gap:var(--s-32);align-items:center;background:var(--band);border:1px solid var(--line);
         border-radius:10px;padding:var(--s-32) var(--s-48)}
#pb-logo .mk-c{width:74px;height:74px;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
#pb-logo .mk-c .amp{font-family:'Zodiak',serif;font-style:italic;font-weight:400;font-size:38px;color:#fff;position:relative;top:.02em}
#pb-logo .mk-s{width:74px;height:74px;border-radius:18px;border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;background:var(--base)}
#pb-logo .mk-s .amp{font-family:'Zodiak',serif;font-style:italic;font-weight:400;font-size:38px;color:var(--accent);position:relative;top:.02em}
#pb-logo .mk-sm{display:flex;gap:14px;align-items:flex-end;margin-left:auto}
#pb-logo .mk-sm .u{display:flex;flex-direction:column;align-items:center;gap:7px}
#pb-logo .mk-sm .u .lbl{font-size:10.5px;color:var(--muted)}
#pb-logo .dot{border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center}
#pb-logo .dot .amp{font-family:'Zodiak',serif;font-style:italic;font-weight:400;color:#fff;line-height:1}
#pb-logo table{width:100%;border-collapse:collapse;margin-top:var(--s-16);font-size:13.5px}
#pb-logo th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
     color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--ink)}
#pb-logo td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft);font-variant-numeric:tabular-nums}
#pb-logo td:first-child{color:var(--ink);font-weight:500}
#pb-logo tr:last-child td{border-bottom:none}
#pb-logo .clear{position:relative;display:inline-block;padding:38px;border:1px dashed #C2CCD7;border-radius:8px;background:var(--base)}
#pb-logo .donts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-16);margin-top:var(--s-16)}
#pb-logo .dont{border:1px solid #E8D5D2;background:#FBF3F2;border-radius:9px;padding:14px 16px}
#pb-logo .dont .x{font-size:13px;color:#8E2F26;font-weight:700}
#pb-logo .dont .t{font-size:13px;color:var(--ink-soft);margin-top:5px;line-height:1.5}

/* --- spacing --- */
#pb-spacing .amp{font-family:'Zodiak',Georgia,serif;font-style:italic;font-weight:400}
#pb-spacing.frame{padding:var(--s-48) var(--s-48) var(--s-32)}
#pb-spacing .frame.flush{padding:0}
#pb-spacing .note{max-width:760px;margin:var(--s-24) var(--s-48) var(--s-32);padding-top:var(--s-16);
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--muted)}
#pb-spacing .note b{color:var(--ink-soft);font-weight:600}
#pb-spacing .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#pb-spacing h1{font-size:40px;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
#pb-spacing .sub{font-size:19px;color:var(--ink-soft);margin:0 0 var(--s-48);max-width:660px}
#pb-spacing h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:var(--s-48) 0 var(--s-16)}
#pb-spacing .st{display:grid;grid-template-columns:64px 1fr 150px 1fr;gap:var(--s-24);align-items:center;
      padding:11px 0;border-bottom:1px solid var(--line)}
#pb-spacing .st:last-of-type{border-bottom:none}
#pb-spacing .st .px{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
#pb-spacing .st .viz{height:22px;background:var(--spark);opacity:.16;border-radius:3px}
#pb-spacing .st .nm{font-size:13.5px;font-weight:600;color:var(--ink)}
#pb-spacing .st .use{font-size:13px;color:var(--ink-soft)}
#pb-spacing .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16);margin-top:var(--s-16)}
#pb-spacing .g{background:var(--band);border:1px solid var(--line);border-radius:9px;padding:15px 19px}
#pb-spacing .g .h{font-size:15px;font-weight:600}
#pb-spacing .g .b{font-size:13px;line-height:1.6;color:var(--ink-soft);margin-top:4px}
#pb-spacing .rule{background:var(--band);border:1px solid var(--line);border-left:3px solid var(--spark);
        border-radius:9px;padding:16px 20px;margin-top:var(--s-24);font-size:15px;color:var(--ink-soft);max-width:820px}
#pb-spacing .rule b{color:var(--ink)}
#pb-spacing .page{margin-top:var(--s-16);border:1px solid var(--line);border-radius:10px;background:var(--band);
        padding:var(--s-24);display:flex;gap:0;align-items:stretch;height:120px}
#pb-spacing .page .gut{width:56px;background:repeating-linear-gradient(45deg,#D6DEE7 0 6px,transparent 6px 12px);border-radius:4px}
#pb-spacing .page .colm{flex:1;background:var(--base);border:1px solid var(--line);border-radius:4px;
        display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);letter-spacing:.05em}

/* --- type --- */
#pb-type .amp{font-family:'Zodiak',Georgia,serif;font-style:italic;font-weight:400}
#pb-type.frame{padding:var(--s-48) var(--s-48) var(--s-32)}
#pb-type .frame.flush{padding:0}
#pb-type .note{max-width:760px;margin:var(--s-24) var(--s-48) var(--s-32);padding-top:var(--s-16);
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--muted)}
#pb-type .note b{color:var(--ink-soft);font-weight:600}
#pb-type .eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#pb-type h1{font-size:40px;font-weight:600;letter-spacing:-.025em;margin:0 0 6px}
#pb-type .sub{font-size:19px;color:var(--ink-soft);margin:0 0 var(--s-48);max-width:660px}
#pb-type h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:var(--s-48) 0 var(--s-16)}
#pb-type .row{display:grid;grid-template-columns:1fr 220px;gap:var(--s-32);align-items:baseline;
       padding:var(--s-24) 0;border-bottom:1px solid var(--line)}
#pb-type .row:last-of-type{border-bottom:none}
#pb-type .spec{font-size:11.5px;line-height:1.6;color:var(--muted);letter-spacing:.03em;
        font-variant-numeric:tabular-nums;text-align:right}
#pb-type .spec b{display:block;color:var(--ink-soft);font-weight:600;letter-spacing:0;font-size:12px}
#pb-type .samp{color:var(--ink);overflow:hidden}
#pb-type .measure{max-width:66ch;font-size:16px;line-height:1.7;color:var(--ink-soft)}
#pb-type .rule{background:var(--band);border:1px solid var(--line);border-left:3px solid var(--accent);
        border-radius:9px;padding:16px 20px;margin-top:var(--s-24);font-size:14.5px;color:var(--ink-soft);max-width:820px}
#pb-type .rule b{color:var(--ink)}
#pb-type .exc{display:flex;gap:var(--s-32);align-items:center;background:var(--band);border:1px solid var(--line);
       border-radius:10px;padding:var(--s-24) var(--s-32);margin-top:var(--s-16)}
#pb-type .wm{font-weight:600;letter-spacing:-.03em;white-space:nowrap;font-size:48px}
#pb-type .wm .amp{font-size:1.25em;margin:0 .14em;color:var(--accent);letter-spacing:0}
#pb-type .exc .t{font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
#pb-type .exc .t b{color:var(--ink)}

/* The accordion. Plain <details>/<summary>: no JS, and it degrades
   to fully-expanded content when JS is off or when printing. */
.pb-doc{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.pb-group{margin-top:var(--s-64)}
.pb-group__label{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:12px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding-bottom:var(--s-16);border-bottom:1px solid var(--line)}
.pb-item{border-bottom:1px solid var(--line)}
.pb-item__sum{display:flex;gap:22px;align-items:baseline;padding:22px 0;cursor:pointer;
  list-style:none;transition:opacity .18s}
.pb-item__sum::-webkit-details-marker{display:none}
.pb-item__sum:hover{opacity:.62}
.pb-item__sum:focus-visible{outline:2px solid var(--spark);outline-offset:3px;border-radius:4px}
.pb-item__n{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:13px;
  letter-spacing:.12em;color:var(--accent);flex:none;width:26px}
.pb-item__t{font-size:clamp(19px,2.2vw,24px);line-height:1.15;font-weight:600;
  letter-spacing:-.02em;color:var(--ink);flex:none;width:min(42vw,270px)}
.pb-item__s{font-size:15px;line-height:1.5;color:var(--muted);flex:1}
.pb-item__mark{margin-left:auto;flex:none;color:var(--accent);font-size:19px;
  line-height:1;transition:transform .2s}
.pb-item[open] .pb-item__mark{transform:rotate(45deg)}
/* The specimen sits in its own framed ground so it reads as an exhibit,
   not as page furniture. */
/* The specimen frame scrolls rather than clips. Several specimens have real
   fixed geometry (the header nav, the 88px hero line) that cannot reflow into a
   phone width, and they are exhibits: showing them at their true size behind a
   scroll is honest, where `overflow:hidden` would silently cut them off. The
   page itself never scrolls sideways, which is the rule that matters. */
.pb-spec{border:1px solid var(--line);border-radius:var(--s-8);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  margin:0 0 var(--s-32);background:var(--base)}
.pb-note{max-width:760px;margin:var(--s-24) 0 var(--s-32);padding-top:var(--s-16);
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--muted)}
.pb-note b{color:var(--ink-soft);font-weight:600}

/* Narrow screens. The specimens were drawn at 1240px against a 1080
   column, so every fixed grid in them has to collapse (CLAUDE.md:
   no horizontal overflow at 375px). Listed explicitly, because these
   are class grids, not inline-style grids. */
@media (max-width:900px){
  #pb-how-it-works .steps{grid-template-columns:repeat(2,1fr)}
  #pb-services-cards .g{grid-template-columns:1fr}
  #pb-team-grid .g{grid-template-columns:1fr}
  #pb-colour .sw{grid-template-columns:repeat(3,1fr)}
  #pb-colour .derived{grid-template-columns:repeat(2,1fr)}
  #pb-logo .donts{grid-template-columns:repeat(2,1fr)}
  #pb-testimonial .t{grid-template-columns:1fr;gap:var(--s-24)}
  #pb-spacing .st{grid-template-columns:56px 1fr;row-gap:var(--s-8)}
}
@media (max-width:760px){
  .pb-doc{padding:0 var(--s-24)}
  .pb-item__sum{flex-wrap:wrap;gap:10px 16px}
  .pb-item__t{width:auto;flex:1 1 auto}
  .pb-item__s{flex:1 1 100%;padding-left:48px}
  .pb .sec{padding:var(--s-48) var(--s-24)}
  /* Tighten only the specimens that carry their own padding: 48px of inset on a
     375px screen wastes a quarter of the width. The flush ones set
     `#pb-<slug>.frame{padding:0}` (a same-element rule, since the id sits on the
     .frame div itself) and must stay edge-to-edge, so they are left out here.
     Each selector needs its own id to outrank that rule: an [id^=] attribute
     selector counts as a class and loses to it. */
  #pb-buttons.pb-inset,
  #pb-colour.pb-inset,
  #pb-logo.pb-inset,
  #pb-spacing.pb-inset,
  #pb-type.pb-inset{padding:var(--s-24)}
  .pb .note{margin-left:var(--s-24);margin-right:var(--s-24)}
  .pb .h-display{font-size:38px}
  .pb .h1{font-size:30px}
  .pb .h2{font-size:23px}
}
@media (max-width:640px){
  #pb-how-it-works .steps{grid-template-columns:1fr}
  #pb-colour .sw{grid-template-columns:repeat(2,1fr)}
  #pb-colour .derived{grid-template-columns:1fr}
  #pb-logo .two{grid-template-columns:1fr}
  #pb-logo .donts{grid-template-columns:1fr}
  #pb-spacing .grid2{grid-template-columns:1fr}
  /* catch-all for inline-style grids inside any specimen */
  .pb [style*="grid-template-columns"]{grid-template-columns:1fr!important}
}
@media print{ .pb-item{break-inside:avoid} }

/* ============================================================
   Playbook  (/koku-playbook/)
   The internal operating playbook. Scoped to .kpb throughout: the
   Design system page already owns .pb and ~340 rules under it, so a
   shared prefix would collide with shipped styles.
   Type maps onto the Ch07 rungs: Label = .mono 12px uppercase, Body
   = 16, Heading 3 = 20, Heading 2 = 28.
   ============================================================ */
.kpb{--kpb-measure:68ch;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 120px}

/* Cover */
.kpb-cover{min-height:82vh;display:flex;flex-direction:column;justify-content:space-between;padding:52px 0 46px}
.kpb-cover__top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.kpb-wm{display:inline-flex;align-items:baseline;text-decoration:none}
.kpb-wm__n{font:600 17px/1 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.kpb-wm__amp{font:italic 400 21px/1 'Zodiak',serif;color:var(--slate);margin:0 3px 0 4px}
.kpb-tag{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(27,37,48,.5)}
.kpb-cover__mid{padding:64px 0}
.kpb-h1{font:600 clamp(42px,5.5vw,76px)/1.02 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-.034em;margin:0 0 28px;max-width:16ch}
.kpb-h1__amp{font:italic 400 1.24em/1 'Zodiak',serif;color:var(--slate)}
.kpb-thesis{font-size:19px;line-height:1.6;max-width:60ch;color:var(--ink);margin:0 0 32px}
.kpb-claims{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.kpb-claims li{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.kpb-claims li::before{content:"";display:inline-block;width:14px;height:1px;background:var(--slate-light);vertical-align:middle;margin-right:10px}
.kpb-cover__foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--hair-soft);padding-top:20px}
.kpb-cover__foot p{margin:0;font-size:13px;color:rgba(27,37,48,.55);max-width:44ch}

/* Section rail */
.kpb-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px 28px;padding:44px 0 72px;border-bottom:1px solid var(--hair-soft);margin-bottom:24px}
.kpb-rail__lbl{display:block;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);margin-bottom:14px}
.kpb-rail__grp a{display:block;font-size:15px;line-height:1.5;padding:3px 0;color:var(--ink)}
.kpb-rail__grp a:hover{color:var(--spark)}
.kpb-rail__grp b{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;color:var(--slate-light);margin-right:9px}

/* Sections */
.kpb-s{padding:76px 0;border-bottom:1px solid var(--hair-soft);scroll-margin-top:24px}
.kpb-s__head{margin-bottom:28px}
.kpb-s__num{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--spark)}
.kpb-s__grp{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);margin-left:14px}
.kpb-s__t{font:600 clamp(30px,3.4vw,44px)/1.1 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-.028em;margin:14px 0 0}
.kpb-s p{max-width:var(--kpb-measure);font-size:16px;line-height:1.62}
.kpb-lede{font-size:18px!important;line-height:1.6!important;color:var(--ink)}
.kpb-h3{font:600 20px/1.3 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-.01em;margin:44px 0 14px}
.kpb-note{background:var(--band);border-radius:10px;padding:18px 22px;font-size:15.5px!important;line-height:1.6!important;max-width:var(--kpb-measure)}
.kpb-pull{border-left:2px solid var(--spark);padding-left:22px;font-size:17.5px!important;line-height:1.55!important;margin:32px 0}
.kpb-gate{background:rgba(29,91,232,.06);border:1px solid rgba(29,91,232,.18);border-radius:10px;padding:18px 22px;font-size:15.5px!important;line-height:1.6!important;max-width:var(--kpb-measure)}
.kpb-gate::before{content:"\26D4";margin-right:10px}

/* Cards */
.kpb-cards{display:grid;gap:18px;margin:28px 0}
.kpb-cards--2{grid-template-columns:repeat(2,1fr)}
.kpb-cards--3{grid-template-columns:repeat(3,1fr)}
.kpb-card{border:1px solid var(--hair-strong);border-radius:12px;padding:24px}
.kpb-card--mark{border-color:rgba(29,91,232,.3);background:rgba(29,91,232,.03)}
.kpb-card--no{background:var(--band)}
.kpb-card__k{display:block;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);margin-bottom:12px}
.kpb-card h3{font:600 22px/1.25 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-.016em;margin:0 0 10px}
.kpb-card p{font-size:15px!important;line-height:1.58!important;margin:0 0 10px}
.kpb-card__f{display:block;font-size:13px;color:var(--slate);margin-top:12px}
.kpb-card__em{color:var(--ink);font-weight:500}
.kpb-card__big{font-size:17px!important;line-height:1.5!important;font-weight:500}
.kpb-card__note{font-size:13.5px!important;color:rgba(27,37,48,.55);margin:-6px 0 12px!important}
.kpb-ul,.kpb-ol{margin:0;padding-left:20px}
.kpb-ul li,.kpb-ol li{font-size:15px;line-height:1.58;margin-bottom:8px;max-width:var(--kpb-measure)}

/* Definition rows */
.kpb-defs{margin:24px 0;max-width:var(--kpb-measure)}
.kpb-defs dt{font-weight:600;font-size:16px;line-height:1.5;margin-top:20px}
.kpb-defs dd{margin:6px 0 0;font-size:16px;line-height:1.62;color:rgba(27,37,48,.82)}
.kpb-defs--gate dt{color:var(--spark);font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* Map flow */
.kpb-flow{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;margin:28px 0}
.kpb-flow__col{flex:1 1 170px;border:1px solid var(--hair-strong);border-radius:12px;padding:20px}
.kpb-flow__col--dest{border-color:rgba(29,91,232,.3);background:rgba(29,91,232,.03)}
.kpb-flow__k{display:block;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);margin-bottom:12px}
.kpb-flow__col ul{list-style:none;margin:0;padding:0}
.kpb-flow__col li{font-size:15px;line-height:1.6;font-weight:500}
.kpb-flow__col p{font-size:13.5px!important;color:rgba(27,37,48,.6);margin:10px 0 0!important}
.kpb-flow__ar{align-self:center;color:var(--slate-light);font-size:18px}

/* Phases */
.kpb-phases{list-style:none;counter-reset:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0;padding:0}
.kpb-phases li{border-top:2px solid var(--spark);padding-top:14px}
.kpb-phases__n{display:block;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--spark);margin-bottom:8px}
.kpb-phases p{font-size:14.5px!important;line-height:1.55!important;margin:0}

/* Red flags */
.kpb-flags{border:1px solid var(--hair-strong);border-radius:12px;padding:22px;margin:24px 0;max-width:var(--kpb-measure)}
.kpb-flags__k{display:block;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);margin-bottom:14px}
.kpb-flags ul{margin:0;padding-left:20px}
.kpb-flags li{font-size:15px;line-height:1.58;margin-bottom:10px}

/* Rules list */
.kpb-rules{margin:20px 0;padding-left:0;list-style:none;max-width:var(--kpb-measure)}
.kpb-rules li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;margin-bottom:13px}
.kpb-rules li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--slate-light)}

/* Pricing table */
.kpb-tablewrap{overflow-x:auto;margin:24px 0}
.kpb-table{border-collapse:collapse;width:100%;min-width:560px}
.kpb-table th{text-align:left;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);padding:0 16px 12px 0;border-bottom:1px solid var(--hair-strong)}
.kpb-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--hair-soft);font-size:15px;line-height:1.5;vertical-align:top}
.kpb-table td:nth-child(2){font-weight:600;white-space:nowrap}
.kpb-table td:last-child{color:rgba(27,37,48,.72);font-size:14px}
.kpb-table__k{display:inline-block;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-light);margin-left:8px}

/* Templates: toolbar + accordion */
.kpb-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:32px 0 8px}
.kpb-expand{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--ink);border:0;border-radius:999px;padding:11px 20px;cursor:pointer;transition:background .2s var(--ease)}
.kpb-expand:hover{background:var(--spark)}
.kpb-toolbar__hint{font-size:13px;color:rgba(27,37,48,.55);max-width:44ch}
.kpb-tgroup{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);margin:36px 0 0;padding-top:20px;border-top:1px solid var(--hair-soft)}
.kpb-tlist{margin-top:4px}
.kpb-t{border-bottom:1px solid var(--hair-soft)}
.kpb-t__sum{list-style:none;cursor:pointer;padding:16px 0;display:flex;align-items:baseline;gap:16px}
.kpb-t__sum::-webkit-details-marker{display:none}
.kpb-t__sum::after{content:"+";margin-left:auto;color:var(--spark);font-size:20px;line-height:1}
.kpb-t[open] .kpb-t__sum::after{content:"\2013"}
.kpb-t__sum:hover .kpb-t__title{color:var(--spark)}
.kpb-t__num{font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;color:var(--slate-light);flex:0 0 auto}
.kpb-t__title{font-size:16.5px;font-weight:500;line-height:1.4}
.kpb-t__body{padding:4px 0 28px 39px;max-width:74ch}
.kpb-t__ref{display:block;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--slate);margin-bottom:16px;line-height:1.6}
.kpb-t__body p{font-size:15.5px!important;line-height:1.62!important;margin:0 0 14px;max-width:none!important}
.kpb-t__subj{padding-bottom:12px;border-bottom:1px solid var(--hair-soft)}
.kpb-t__sign{color:var(--slate)}
.kpb-t__why{font-size:13.5px!important;line-height:1.6!important;color:rgba(27,37,48,.6);border-left:2px solid var(--hair-strong);padding-left:14px;margin-top:18px!important}

/* Colophon */
.kpb-colophon{padding:56px 0 0}
.kpb-colophon p{font-size:13.5px;line-height:1.7;color:rgba(27,37,48,.55);max-width:78ch;margin:0 0 10px}

/* The password gate */
.kpb-gateway{max-width:var(--wrap);margin:0 auto;padding:52px var(--pad) 120px;min-height:70vh;display:flex;flex-direction:column}
.kpb-gateway__box{margin:auto;max-width:440px;width:100%;text-align:left}
.kpb-gateway__box h1{font:600 clamp(34px,4vw,52px)/1.05 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-.03em;margin:14px 0 16px}
.kpb-gateway__box p{font-size:16px;line-height:1.62;color:rgba(27,37,48,.75);margin:0 0 26px}
.kpb-gateway label{display:block;font-family:'Koku Mono',ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-light);margin-bottom:10px}
.kpb-gateway__row{display:flex;gap:10px}
.kpb-gateway input{flex:1 1 auto;min-width:0;font-family:'Switzer',Helvetica,Arial,sans-serif;font-size:16px;color:var(--ink);background:transparent;border:1px solid var(--hair-strong);border-radius:999px;padding:13px 20px;transition:border-color .2s var(--ease)}
.kpb-gateway input:focus{outline:none;border-color:var(--spark);box-shadow:0 0 0 3px rgba(29,91,232,.14)}
.kpb-gateway button{font-family:'Switzer',Helvetica,Arial,sans-serif;font-size:15px;font-weight:500;color:var(--paper);background:var(--spark);border:0;border-radius:999px;padding:13px 28px;cursor:pointer;transition:background .2s var(--ease)}
.kpb-gateway button:hover{background:var(--spark-pressed)}
.kpb-gateway__foot{font-size:13.5px!important;color:rgba(27,37,48,.5)!important;margin:22px 0 0!important}

@media (max-width:900px){
  .kpb-cards--3,.kpb-phases{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .kpb-cards--2,.kpb-cards--3,.kpb-phases{grid-template-columns:1fr}
  .kpb-flow__ar{display:none}
  .kpb-s{padding:56px 0}
  .kpb-t__body{padding-left:0}
  .kpb-gateway__row{flex-direction:column}
  .kpb-gateway input,.kpb-gateway button{width:100%}
}
@media print{
  .kpb-rail,.kpb-toolbar{display:none}
  .kpb-t__body{display:block!important}
}

/* ============================================================
   Work plates
   The nine case artifacts, ported from the mockup plates
   (docs/The Work/koku-work-mockups-SHARE.html) and translated into
   the locked system rather than adopted: the source runs a bone and
   teal palette, a serif display face, and sets almost everything in
   mono. Here the palette is the Koku tokens, mono is held to the
   Label rung, numeric payloads take the off-ladder data sizes
   (42 hero / 28 secondary, the tool result panels' pair), and prose
   sits on the Switzer rungs.
   EVERY selector is scoped to .kpl: the source declares bare
   `table`, `th`, `td`, `pre`, `.nav`, `.bar`, `.pane` as globals.
   Do not unscope one, and do not reuse `.pb` (the design system).
   Quantitative fills run an ink -> slate -> slate-light ramp; spark
   never fills a resting surface, and no hue carries meaning.
   ============================================================ */
.kpl{margin:0;display:flex;flex-direction:column;gap:12px}
.kpl-frame{border:1px solid var(--hair-strong);border-radius:10px;overflow:hidden;background:var(--paper)}
.kpl-cap{margin:0;font:400 13.5px/1.6 'Switzer',Helvetica,Arial,sans-serif;color:rgba(27,37,48,.55);text-wrap:pretty}

/* Label rung */
.kpl-kick,.kpl-fk,.kpl-flag,.kpl-tb,.kpl-nav a,.kpl-bar__t,.kpl-bar__r,.kpl-tbl th,.kpl-kpi__k,.kpl-rstep span,.kpl-sg,.kpl-note{font-family:'Koku Mono',ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.16em}
.kpl-kick{font-size:11px;font-weight:600;color:var(--slate);margin:0 0 22px}
.kpl-note{font-size:10px;font-weight:500;color:rgba(27,37,48,.4);letter-spacing:.14em;margin:4px 0 12px}

/* Numeric payload: off-ladder data sizes, Switzer, never mono */
.kpl-fig{margin:0;font:700 42px/1 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-0.035em;font-variant-numeric:tabular-nums}
.kpl-fig--s{font-size:28px;letter-spacing:-0.03em}
.kpl-fig small{font:500 18px/1 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-0.01em;color:rgba(27,37,48,.5)}
.kpl-sub{margin:9px 0 0;font-size:13.5px;line-height:1.5;color:rgba(27,37,48,.6);max-width:34ch}

/* Editorial cut: the specimen sits on faint graph paper */
.kpl-ed{padding:30px 32px 28px;position:relative;
  background-image:linear-gradient(var(--hair-soft) 1px,transparent 1px),linear-gradient(90deg,var(--hair-soft) 1px,transparent 1px);
  background-size:22px 22px;background-position:-1px -1px}
.kpl-ed>*{position:relative}
.kpl-rule{height:1px;background:var(--hair-strong);margin:22px 0;border:0}
.kpl-trio{display:flex;gap:30px;flex-wrap:wrap}
.kpl-lin{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0}
.kpl-lin .k{font-size:14.5px;line-height:1.45;color:rgba(27,37,48,.62)}
.kpl-lin .v{font:500 14.5px/1.4 'Switzer',Helvetica,Arial,sans-serif;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

/* Product cut */
.kpl-pr{display:flex;flex-direction:column}
.kpl-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--band);border-bottom:1px solid var(--hair-strong)}
.kpl-bar__t{font-size:10.5px;font-weight:600;color:rgba(27,37,48,.62)}
.kpl-bar__r{margin-left:auto;font-size:9.5px;font-weight:500;color:rgba(27,37,48,.42)}
.kpl-tabs{display:flex;gap:6px;padding:9px 14px;border-bottom:1px solid var(--hair-soft);flex-wrap:wrap}
.kpl-tb{font-size:10px;font-weight:500;padding:3px 8px;border:1px solid var(--hair-strong);color:rgba(27,37,48,.6);background:var(--paper)}
.kpl-tb.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.kpl-cols{display:flex;min-height:0}
.kpl-nav{width:118px;flex:none;border-right:1px solid var(--hair-soft);padding:9px 0}
.kpl-nav a{display:block;padding:5px 12px;font-size:10px;font-weight:500;color:rgba(27,37,48,.6);cursor:default}
.kpl-nav a.on{color:var(--ink);box-shadow:inset 2px 0 0 var(--slate)}
.kpl-pane{flex:1;padding:16px;min-width:0}

/* Redaction: solid bars, never a blur, never a stand-in name */
.kpl-rd{display:inline-block;height:10px;border-radius:1px;background:var(--ink);opacity:.86;vertical-align:-1px}
.kpl-rd--t{height:8px;opacity:.28}
.kpl-rd--big{height:15px}
.kpl-fld{display:flex;align-items:center;gap:9px;padding:5px 0}
.kpl-fk{font-size:9.5px;font-weight:500;color:rgba(27,37,48,.45);width:62px;flex:none;letter-spacing:.12em}

/* Marks */
.kpl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);margin:0 0 14px}
.kpl-kpi{background:var(--paper);padding:10px 11px;display:flex;flex-direction:column;gap:5px;min-width:0}
.kpl-kpi__k{font-size:9px;font-weight:500;color:rgba(27,37,48,.45);letter-spacing:.12em;line-height:1.35}
.kpl-tbl{width:100%;border-collapse:collapse}
.kpl-tbl th{text-align:left;font-size:9px;font-weight:500;color:rgba(27,37,48,.45);letter-spacing:.12em;padding:0 8px 7px 0;border-bottom:1px solid var(--ink)}
.kpl-tbl td{padding:8px 8px 8px 0;border-bottom:1px solid var(--hair-soft);font-size:13px;color:rgba(27,37,48,.68);vertical-align:middle}
.kpl-tbl td.n{text-align:right;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
/* Status flags. No hue, so weight carries the reading, and the convention
   is ONE thing across every plate: darkest is what the operator is meant to
   look at, not what is "good". So an untouched lead and an off-target
   verdict are the loud ones, and a reached lead and an on-target verdict
   are quiet. The names say focus/plain/quiet rather than on/off precisely
   so nobody re-reads them as positive/negative and inverts a plate.
   Rectangular on purpose: pill radius belongs to real controls. */
.kpl-flag{display:inline-block;font-size:9px;font-weight:500;padding:3px 7px;letter-spacing:.12em;white-space:nowrap;line-height:1.1}
.kpl-flag--focus{background:var(--ink);color:var(--paper)}
.kpl-flag--plain{border:1px solid var(--hair-strong);color:rgba(27,37,48,.6);padding:2px 6px}
.kpl-flag--quiet{background:var(--band);color:rgba(27,37,48,.45)}
.kpl-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}

/* Funnel + ranking bars: ink -> slate -> slate-light, no hue */
.kpl-fn{display:flex;flex-direction:column;gap:4px}
.kpl-fs{display:flex;align-items:center;gap:11px}
.kpl-fb{height:22px;background:rgba(27,37,48,.8);flex:none}
.kpl-fb--2{background:var(--slate)}
.kpl-fb--3{background:var(--slate-light)}
.kpl-fl{font-size:13px;color:rgba(27,37,48,.62)}
.kpl-fv{font:500 13.5px/1 'Switzer',Helvetica,Arial,sans-serif;margin-left:auto;font-variant-numeric:tabular-nums}
.kpl-brow{display:flex;align-items:center;gap:12px;padding:5px 0}
.kpl-bk{width:56px;flex:none}
.kpl-btr{flex:1;height:10px;background:var(--band)}
.kpl-bfl{height:100%;background:var(--slate)}

/* Rail: the absolute line is the only positioned sibling; it is inset
   by half a step at each end so it can never reach past the diamonds. */
.kpl-rail{position:relative;margin:16px 0 6px;--n:5}
.kpl-rline{position:absolute;top:4px;left:calc(50% / var(--n));right:calc(50% / var(--n));height:1px;background:rgba(27,37,48,.22)}
.kpl-rsteps{position:relative;display:flex}
.kpl-rstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.kpl-rstep i{width:9px;height:9px;background:var(--paper);border:1.5px solid var(--ink);flex:none;transform:rotate(45deg)}
.kpl-rstep.on i{background:var(--ink)}
.kpl-rstep.m i{border-color:var(--slate-light)}
.kpl-rstep span{font-size:9px;font-weight:500;color:rgba(27,37,48,.55);line-height:1.5;text-align:center;letter-spacing:.1em}

/* Mail + panels */
.kpl-mail{border:1px solid var(--hair-soft);background:var(--paper)}
.kpl-mh{padding:8px 12px;border-bottom:1px solid var(--hair-soft);background:var(--band)}
.kpl-mb{padding:13px;font-size:14px;line-height:1.75;color:rgba(27,37,48,.7)}
.kpl-mb p{margin:0 0 10px}
.kpl-mb p:last-child{margin:0}
.kpl-sg{font-size:9.5px;font-weight:500;color:rgba(27,37,48,.45);letter-spacing:.12em;line-height:1.6}
.kpl-slk{border:1px solid var(--hair-soft);border-left:2px solid var(--slate);background:var(--paper);padding:11px 13px}
.kpl-slk__t{font:600 15px/1.3 'Switzer',Helvetica,Arial,sans-serif;letter-spacing:-0.01em;margin-bottom:8px}
.kpl-slk__l{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(27,37,48,.68);padding:3px 0}
.kpl-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft)}
.kpl-tc{background:var(--paper);padding:11px;min-height:62px}
.kpl-tc__n{font:500 14px/1.35 'Switzer',Helvetica,Arial,sans-serif}
.kpl-tc__t{font-size:12.5px;line-height:1.45;color:rgba(27,37,48,.5);margin-top:4px}
.kpl-tc.on{background:var(--ink)}
.kpl-tc.on .kpl-tc__n{color:var(--paper)}
.kpl-tc.on .kpl-tc__t{color:rgba(250,250,248,.6)}
.kpl-card{border:1px solid var(--hair-soft);background:var(--paper);padding:11px 12px;margin-bottom:7px}
.kpl-card--hot{border-left:2px solid var(--slate)}
.kpl-card__top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.kpl-card__time{font:500 14px/1 'Switzer',Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums}
.kpl-card__body{font-size:13px;line-height:1.6;color:rgba(27,37,48,.68)}
.kpl-card__body b{color:var(--ink);font-weight:600}
.kpl-verdict{display:grid;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft)}
.kpl-verdict__r{background:var(--paper);padding:11px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.kpl-verdict__n{font:500 14px/1.35 'Switzer',Helvetica,Arial,sans-serif}
.kpl-verdict__t{font-size:12.5px;line-height:1.45;color:rgba(27,37,48,.5);margin-top:3px}
.kpl-ask{border:1px solid var(--hair-soft);background:var(--paper);padding:11px 13px;font-size:14.5px;line-height:1.55;color:rgba(27,37,48,.7)}
.kpl-arrow{margin:12px 0;text-align:center;font-size:15px;color:rgba(27,37,48,.4)}

/* The one code specimen. NOT Koku Mono: the Label rung's face must not
   become a code face, and code cannot be set in Switzer either, so real
   code takes a generic system monospace. Ruling in docs/COPY-DECISIONS.md
   (2026-07-27). Do not "fix" this to 'Koku Mono'. */
.kpl-pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7;
  background:var(--paper);border:1px solid var(--hair-soft);padding:12px;margin:0;overflow-x:auto;color:rgba(27,37,48,.7)}
.kpl-kw{color:var(--slate)}
.kpl-str{color:rgba(27,37,48,.5)}

/* Fixed geometry that cannot reflow scrolls inside its own frame, the
   same call .pb-spec makes: overflow:hidden would clip it instead. */
.kpl-scroll{overflow-x:auto}

@media (max-width:760px){
  .kpl-ed{padding:24px 20px}
  .kpl-fig{font-size:34px}
  .kpl-fig--s{font-size:24px}
  .kpl-kpis{grid-template-columns:repeat(2,1fr)}
  .kpl-tiles{grid-template-columns:repeat(2,1fr)}
  .kpl-nav{width:96px}
  .kpl-trio{gap:22px}
  /* A key and its value both run long here, so the ledger row becomes a
     stack rather than two squeezed columns. */
  .kpl-lin{flex-direction:column;align-items:flex-start;gap:2px}
  .kpl-lin .v{text-align:left}
  /* Lets the console pane narrow enough to fit without scrolling. */
  .kpl-verdict__r{flex-direction:column;align-items:flex-start;gap:7px}
}

/* ============================================================
   The Checkup (standalone instrument, /the-checkup/)
   Scoped to .ckt / .ckt-*. Base markup is the no-JS long scroll;
   .is-js turns it into one question per screen. Anything stateful
   or breakpoint-dependent lives here rather than inline.
   ============================================================ */
.ckt-jsonly[hidden]{display:none}
#ckt-intro{margin:6px 0 10px}
.ckt.is-js .ckt-q{display:none}
.ckt.is-js .ckt-q.is-current{display:block}

.ckt-progress{display:flex;flex-direction:column;gap:10px;margin:8px 0 26px;max-width:720px}
.ckt-progress span#ckt-count{font:600 12px/1 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.ckt-progress__track{display:block;height:2px;background:var(--hair-soft);border-radius:1px;overflow:hidden}
#ckt-bar{display:block;height:100%;width:10%;background:var(--slate);transition:width .35s var(--ease)}

.ckt-q{margin:0 0 34px;padding:26px 0 0;border:0;border-top:1px solid var(--hair-strong);max-width:720px;scroll-margin-top:96px}
.ckt.is-js .ckt-q{border-top:0;padding-top:6px;margin-bottom:0}
.ckt-q__legend{display:flex;align-items:baseline;gap:16px;padding:0}
.ckt-q__num{font:400 12px/1 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--slate-light)}
.ckt-q__title{font:600 clamp(22px,3.4vw,28px)/1.3 'Switzer',sans-serif;letter-spacing:-0.02em;text-wrap:balance}
.ckt-q__title:focus{outline:none}

.ckt-note{margin:12px 0 0;max-width:620px;font-size:13.5px;line-height:1.6;color:rgba(27,37,48,.55)}

.ckt-mode{display:flex;gap:8px;margin:16px 0 0}
.ckt-mode__chip input{position:absolute;opacity:0;width:1px;height:1px}
.ckt-mode__chip span{display:inline-block;cursor:pointer;font:500 13.5px/1 'Switzer',sans-serif;color:var(--ink);background:transparent;border:1px solid rgba(27,37,48,.3);border-radius:999px;padding:9px 16px;transition:border-color .25s,background .25s,color .25s}
.ckt-mode__chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ckt-mode__chip input:focus-visible+span{outline:2px solid var(--spark);outline-offset:2px}

.ckt-opts{display:flex;flex-direction:column;gap:10px;margin:20px 0 0;max-width:620px}
.ckt-opt{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--paper);border:1px solid var(--hair-strong);border-radius:10px;cursor:pointer;transition:border-color .25s,background .25s}
.ckt-opt:hover{border-color:var(--slate)}
.ckt-opt input{position:absolute;opacity:0;width:1px;height:1px}
.ckt-opt__dot{flex:none;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--slate-light);background:var(--paper);box-sizing:border-box;transition:border .2s}
.ckt-opt input:checked~.ckt-opt__dot{border:5px solid var(--slate)}
.ckt-opt input:checked~.ckt-opt__label{font-weight:600}
.ckt-opt:has(input:checked){border-color:var(--slate);background:var(--band)}
.ckt-opt input:focus-visible~.ckt-opt__dot{outline:2px solid var(--spark);outline-offset:2px}
.ckt-opt__label{font-size:16px;line-height:1.45}

.ckt-free{margin:20px 0 0;max-width:620px;display:flex;flex-direction:column;gap:8px}
.ckt-free label{font-size:15px;line-height:1.5}
.ckt-free label span{color:rgba(27,37,48,.5)}
.ckt-free input{font:400 16px/1.5 'Switzer',sans-serif;color:var(--ink);background:var(--paper);border:1px solid var(--hair-strong);border-radius:10px;padding:12px 14px}
.ckt-free input:focus{outline:2px solid var(--spark);outline-offset:1px;border-color:var(--spark)}
.ckt-free__note{margin:0;font-size:13.5px;line-height:1.55;color:rgba(27,37,48,.55)}

.ckt-val{margin:16px 0 0;max-width:620px;font-size:14.5px;line-height:1.6;border-radius:10px;padding:12px 16px}
.ckt-val.is-block{color:#8A2B2B;background:rgba(138,43,43,.07);border:1px solid rgba(138,43,43,.25)}
.ckt-val.is-warn{color:var(--slate);background:var(--band);border:1px solid var(--hair-strong)}

.ckt-btn{appearance:none;cursor:pointer;display:inline-block;background:var(--spark);color:var(--paper);border:0;border-radius:10px;padding:17px 28px;font:600 16.5px/1 'Switzer',sans-serif;transition:transform .35s var(--ease),background .35s}
.ckt-btn:hover{background:var(--spark-pressed);color:var(--paper);transform:translateY(-3px)}
.ckt-btn:disabled{opacity:.55;cursor:default;transform:none}
.ckt-btn--ghost{background:transparent;color:var(--ink);border:1px solid rgba(27,37,48,.3)}
.ckt-btn--ghost:hover{background:transparent;color:var(--slate);border-color:var(--slate);transform:none}
.ckt-btn--ghost:disabled{opacity:.35}
.ckt-navrow{display:flex;gap:12px;margin:28px 0 0}

/* ---- the read ---- */
.ckt-r{max-width:720px;scroll-margin-top:96px}
.ckt-kicker{display:block;font:600 12px/1.4 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.ckt-r__reflect{margin:10px 0 0;font-size:16px;line-height:1.65;color:var(--slate)}
.ckt-r__h{margin:18px 0 0;font:600 clamp(24px,3.4vw,28px)/1.3 'Switzer',sans-serif;letter-spacing:-0.02em;text-wrap:balance}
.ckt-r__body{margin:16px 0 0;font-size:17px;line-height:1.7;text-wrap:pretty}
.ckt-r__cap{margin:14px 0 0;max-width:620px;font-size:13.5px;line-height:1.6;color:rgba(27,37,48,.55)}
.ckt-r__block{margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--hair-soft)}
.ckt-r__block .ckt-r__body{margin-top:12px}

/* Numeric payloads take the data-display pair (42 hero / 28 secondary),
   the same carve-out the tool result panels use. Not a type rung. */
.ckt-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;margin:24px 0 0}
.ckt-fig{background:var(--band);border:1px solid var(--hair-strong);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.ckt-fig__k{font:600 11px/1.4 'Koku Mono',ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.ckt-fig__v{font:700 28px/1.1 'Switzer',sans-serif;letter-spacing:-0.025em;overflow-wrap:break-word}
.ckt-fig--hero .ckt-fig__v{font-size:42px;letter-spacing:-0.03em}
.ckt-fig__l{font-size:13px;line-height:1.5;color:rgba(27,37,48,.6)}
.ckt-fig--muted{border-style:dashed;background:var(--paper)}

.ckt-split{margin:16px 0 0;max-width:620px}
.ckt-split__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;font-size:15px}
.ckt-split__band{font:400 12px/1 'Koku Mono',ui-monospace,Menlo,monospace;color:rgba(27,37,48,.55)}
.ckt-split__bar{display:block;height:9px;border-radius:4.5px;background:var(--band);border:1px solid var(--hair-soft);overflow:hidden}
.ckt-split__fill{display:block;height:100%;border-radius:4.5px}
.ckt-split__fill.is-ink{background:rgba(27,37,48,.82)}
.ckt-split__fill.is-slate{background:var(--slate)}
.ckt-split__fill.is-light{background:var(--slate-light)}

.ckt-r__cta{margin:40px 0 0;background:var(--ink);border-radius:16px;padding:clamp(26px,3.4vw,38px)}
.ckt-r__cta .ckt-kicker{color:var(--slate-light)}
.ckt-r__cta h2{margin:14px 0 0;font:600 clamp(22px,3vw,28px)/1.25 'Switzer',sans-serif;letter-spacing:-0.02em;color:var(--paper);text-wrap:balance}
.ckt-r__cta p{margin:14px 0 0;font-size:16px;line-height:1.7;color:rgba(250,250,248,.8);text-wrap:pretty}
.ckt-r__cta .ckt-btn{margin-top:22px}
.ckt-r__soft{margin:40px 0 0;background:var(--band);border:1px solid var(--hair-strong);border-radius:16px;padding:clamp(26px,3.4vw,38px)}
.ckt-r__soft h2{margin:0;font:600 clamp(22px,3vw,28px)/1.25 'Switzer',sans-serif;letter-spacing:-0.02em}
.ckt-r__soft p{margin:12px 0 0;font-size:16px;line-height:1.7;text-wrap:pretty}

.ckt-r__keep{margin:26px 0 0;border:1px solid var(--hair-strong);border-radius:16px;padding:clamp(24px,3vw,32px)}
.ckt-r__keep p{margin:12px 0 0;font-size:16px;line-height:1.65;max-width:560px;text-wrap:pretty}
.ckt-keep__row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;max-width:560px}
.ckt-keep__row input{flex:1 1 240px;min-width:0;font:400 16px/1.5 'Switzer',sans-serif;color:var(--ink);background:var(--paper);border:1px solid var(--hair-strong);border-radius:10px;padding:12px 14px}
.ckt-keep__row input:focus{outline:2px solid var(--spark);outline-offset:1px;border-color:var(--spark)}
.ckt-keep__row .ckt-btn{padding:14px 22px;font-size:15px}
#ckt-keep-note{margin:12px 0 0;font-size:14px;line-height:1.55;color:#8A2B2B}
#ckt-keep-note.is-sent{color:var(--slate)}
.ckt-hp{position:absolute;left:-9999px}

.ckt-r__privacy{margin:26px 0 0;max-width:620px;font-size:13.5px;line-height:1.6;color:rgba(27,37,48,.55)}
.ckt-r__edit{appearance:none;background:none;border:0;padding:0;margin:20px 0 0;cursor:pointer;font:500 14px/1.5 'Switzer',sans-serif;color:var(--slate);text-decoration:underline;text-underline-offset:3px}

@media (max-width:760px){
  .ckt-navrow{flex-wrap:wrap}
  .ckt-fig--hero .ckt-fig__v{font-size:34px}
}