/* Stylesheet for /guides/ and every guide page under it. Lines up to the GUIDE
   PAGES banner are landing/index.html's stylesheet, copied so the two surfaces
   cannot drift apart; edit that file first, then re-copy. Guide-only rules are
   namespaced under body.guide so the copied half stays identical.
   Every url() here is root-relative: a guide lives one directory down. */
/* Paper direction, 2 September 2026. Warm paper, near-black ink, one ember accent for
   actions, four flat block colours that each mean one thing (a pillar or a channel).
   No gradient, no glass, no blur, no glow, no illustration. Colour never sits behind
   body copy except as a full section block with ink on it, measured at AA or better.
   `html.plain` strips the blocks: the ember-only variant kept one class away for a split test. */
:root{
  --paper:#F7F4EE; --card:#FFFDF9; --tint:#F1ECE3;
  --line:#E3DDD1; --line-2:#CFC7B8;
  --ink:#171511; --ink-2:#4B463D; --muted:#6F695D;
  --accent:#A93A1E; --accent-2:#8E2F17;
  --sage:#DFEBD8; --sage-ink:#1E5A34;
  --rose:#F5DDE3; --rose-ink:#8A2A4B;
  --butter:#F5E8BF; --butter-ink:#6E4B00;
  --sky:#DCE6F2; --sky-ink:#1F3F6E;
  --wa:#DCF8C6; --wa-ink:#0B1A0F; --wa-meta:#3E6644;
  --hook-tint:#FFF3EC;
  --shadow:0 1px 2px rgba(60,48,30,.06),0 12px 32px -12px rgba(60,48,30,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Source Serif 4","Source Serif 4 Fallback","Source Serif 4 Fallback Android",Georgia,serif;
  --text:"Hanken Grotesk","Hanken Grotesk Fallback","Hanken Grotesk Fallback Android",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--text);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}
p{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 max(28px,env(safe-area-inset-left)) 0 max(28px,env(safe-area-inset-right))}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--butter)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(40px,4.3vw,60px);line-height:1.04;letter-spacing:-.022em;max-width:13ch;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:500}
.sh{font-size:clamp(30px,3.2vw,44px);line-height:1.06;max-width:22ch;text-wrap:balance}
.label{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;color:var(--muted);margin-bottom:14px}
main{counter-reset:sec}
main>section>.label::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) "  ·  ";color:var(--accent)}
.dek{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:46ch;margin-top:14px}
.sh-row{display:grid;gap:14px}
@media (min-width:900px){.sh-row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}.sh-row .dek{margin-top:0}}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em}

/* buttons: pills, always */
.btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--line-2);
  font-size:15px;font-weight:500;line-height:1;white-space:nowrap;color:var(--ink);background:transparent;cursor:pointer;
  transition:background .13s var(--ease),border-color .13s var(--ease),transform .08s}
.btn:hover{background:var(--card);border-color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.paper:hover{background:#fff}
.btn:active{transform:translateY(1px)}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn .arw{width:14px;height:11px;flex:none}
.cta-note{font-size:13.5px;line-height:1.5;color:var(--muted)}

/* nav */
.bar{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.bar-in{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;line-height:1;display:flex;align-items:center;gap:8px}
.brand .mark .mk{flex:none;width:19px;height:19px;fill:var(--accent)}
.brand .role{font-size:13px;color:var(--muted)}
.bar-nav{margin-left:auto;display:flex;gap:26px;font-size:15px;color:var(--ink-2)}
.bar-nav a:hover{color:var(--accent)}
@media (max-width:899px){.bar-nav{display:none}.bar .btn{margin-left:auto}}

/* hero */
main{overflow:visible}
html,body{overflow-x:clip} /* the bands run edge to edge; the page still cannot scroll sideways */
.hero{display:grid;gap:36px;padding:56px 0 0;align-items:center}
.hello{font-size:15px;color:var(--accent);font-weight:500;margin:0 0 18px}
.hero-copy>p.lede{margin:24px 0 0;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:40ch}
.cta-row{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
@media (min-width:900px){.hero{grid-template-columns:minmax(0,9fr) minmax(0,13fr);gap:44px;padding:84px 0 0}.stage{margin-right:-28px}}

/* the product frame: the beat, as it is */
.frame{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;font-size:14px;line-height:1.5}
.frame-top{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);min-width:0}
.frame-top b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.frame-top .date{color:var(--muted);font-size:13px;white-space:nowrap}
.frame-top .stops{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;flex:none}
.frame-top .stops b{font-family:var(--mono);font-weight:500;color:var(--accent);font-size:12px}
.chans{display:flex;gap:6px;margin-left:6px}
.chan{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.chan i{width:7px;height:7px;border-radius:999px;background:currentColor}
.chan.wa{background:var(--sage);color:var(--sage-ink)}
.chan.ig{background:var(--rose);color:var(--rose-ink)}
.chan.dim{background:transparent;border:1px solid var(--line-2);color:var(--muted)}
.chan.dim i{background:var(--line-2)}
.cols{display:grid;grid-template-columns:1fr}
.col{padding:16px 18px}
.col+.col{border-top:1px solid var(--line)}
.col-h{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.venue{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.015em;line-height:1.1;margin:0}
.venue-sub{font-size:13px;color:var(--muted);margin:3px 0 10px}
.found{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.found+.found{margin-top:6px}
.msg{font-size:15px;line-height:1.55}
.hook{border-left:3px solid var(--accent);background:var(--hook-tint);padding:9px 12px;border-radius:0 8px 8px 0;margin:8px 0 12px}
.hook .tag{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.bubble{background:var(--wa);border-radius:12px 2px 12px 12px;padding:10px 12px;color:var(--wa-ink)}
.bubble .tick{display:block;text-align:right;font-family:var(--mono);font-size:11px;color:var(--wa-meta);margin-top:6px}
.checks{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12px;line-height:1.6}
.checks li{display:flex;gap:8px;color:var(--ink-2)}
.checks li::before{content:"\2713";color:var(--sage-ink);flex:none}
.frame-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:var(--card)}
.frame-foot .note{font-size:12.5px;color:var(--muted);margin-right:auto}
.chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:500;border:1px solid var(--line-2);color:var(--ink);background:transparent}
.chip.go{background:var(--accent);border-color:var(--accent);color:#fff}
.chip kbd{font-family:var(--mono);font-size:11px;font-weight:500;width:18px;height:18px;border-radius:999px;display:grid;place-items:center;border:1px solid currentColor;opacity:.75}
.demo-after{font-size:13.5px;color:var(--muted);margin:14px 0 0}
@media (min-width:900px){.cols{grid-template-columns:29fr 43fr 28fr}.col+.col{border-top:0;border-left:1px solid var(--line)}}
@media (max-width:899px){.chans{display:none}.stage{margin:0 -12px}.found-col .found{display:none}.found-col .venue-sub{margin-bottom:0}.stops .left{display:none}}
@media (max-width:480px){.frame-foot{flex-wrap:wrap}.frame-foot .note{width:100%;margin-bottom:6px}}

/* the hero works once: the draft types, the checks tick, Approve lights. The static page is the final state. */
html.typing .t{position:relative;display:block}
html.typing .t .ghost{visibility:hidden}
html.typing .t .live{position:absolute;left:0;top:0;right:0}
html.typing .checks li{opacity:.3;transform:translateX(-3px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
html.typing .checks li.on{opacity:1;transform:none}
html.typing .chip.go{background:transparent;border-color:var(--line-2);color:var(--ink);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
html.typing .chip.go.on{background:var(--accent);border-color:var(--accent);color:#fff}
.caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-.15em;margin-left:1px;animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,45%{opacity:1}55%,100%{opacity:0}}

/* trust strip */
.trust{margin-top:44px;display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.trust div{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:14px;color:var(--ink-2)}
.trust div+div{border-top:1px solid var(--line)}
.trust svg{flex:none;color:var(--ink)}
@media (min-width:900px){.trust{grid-template-columns:repeat(3,1fr)}.trust div+div{border-top:0;border-left:1px solid var(--line)}}

/* sections */
section{padding-top:112px}
/* Sections alternate between the paper and a full-width band in one of the page's own colours: tint for a change of subject, sky for the rules (Control), butter for pricing (Close). The band runs edge to edge and its content stays on the page's grid. Each section label counts, so the page can be read down like a table of contents. */
.band{margin-top:112px;padding:88px calc(50vw - 50%) 96px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.band+section{padding-top:112px}
.band-tint{background:var(--tint)}
.band-sky{background:var(--sky)}
.band-butter{background:var(--butter)}
.band .note,.band .dek{color:var(--ink-2)}
.close{margin-top:112px}
@media (max-width:899px){section{padding-top:72px}.band{margin-top:72px;padding-top:56px;padding-bottom:64px}.close{margin-top:72px}}
html.plain .band{background:transparent;padding-top:0;padding-bottom:0}
@media (max-width:899px){section{padding-top:80px}}

/* the month: three numbers, serif, hairlines, no tiles */
.tiles{margin-top:40px;display:grid}
.tile{padding:26px 0 24px}
.tile b{display:block;font-family:var(--display);font-weight:500;font-size:56px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tile b i{font-style:italic;font-size:26px;color:var(--ink-2);margin-left:6px}
.tile span{display:block;margin-top:10px;font-size:15px;color:var(--ink-2);max-width:30ch}
.tiles-src{margin-top:14px;font-size:13px;color:var(--muted);max-width:70ch}
@media (min-width:900px){.tiles{grid-template-columns:repeat(3,1fr);gap:40px}.tile{border-bottom:0}}

/* the founder's note: the one place the serif carries body copy */
.note{max-width:62ch;margin-top:24px;font-family:var(--display);font-size:20px;line-height:1.55;color:var(--ink)}
.note p+p{margin-top:18px}
.note-row{display:grid;gap:40px}
.bench{display:block;width:100%;height:auto}
@media (min-width:900px){.note-row{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:end}}
.note .punch{font-style:italic;color:var(--accent);margin-top:26px}
.sig{margin-top:28px;font-family:var(--text);font-size:14px;color:var(--ink-2)}
.sig b{display:block;font-weight:600;color:var(--ink)}

/* the beat, as a row of stops */
.road{margin-top:36px;padding:18px 0 14px;display:flex;align-items:center;flex-wrap:wrap;row-gap:10px}
.stop{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);white-space:nowrap;padding-right:24px;position:relative}
.stop::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--sage-ink);flex:none}
.stop.ahead{color:var(--muted)}
.stop.ahead::before{background:transparent;border:1.5px solid var(--line-2)}
.stop.here{color:var(--ink);font-weight:500}
.stop.here::before{background:var(--accent);box-shadow:0 0 0 4px var(--hook-tint)}
.road-left{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
@media (max-width:899px){.road-left{width:100%;margin:6px 0 0}}

/* pillars: one flat block each, one coloured word each */
.pgrid{display:grid;gap:16px;margin-top:36px}
.pillar{border-radius:22px;padding:30px 28px 28px;min-height:300px;display:flex;flex-direction:column}
.pillar .tag{align-self:flex-start;font-family:var(--mono);font-size:11.5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.6);color:var(--p-ink)}
.pillar h3{font-size:30px;line-height:1.08;margin:18px 0 14px}
.pillar h3 span{color:var(--p-ink)}
.pillar ul{margin:0;padding:0;list-style:none;color:var(--ink-2);font-size:15px;line-height:1.5;max-width:36ch}
.pillar li{padding-left:16px;position:relative;margin-bottom:8px}
.pillar li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:999px;background:var(--p-ink);opacity:.7}
.p-sage{background:var(--sage);--p-ink:var(--sage-ink)}
.p-rose{background:var(--rose);--p-ink:var(--rose-ink)}
.p-butter{background:var(--butter);--p-ink:var(--butter-ink)}
.p-sky{background:var(--sky);--p-ink:var(--sky-ink)}
.pillar .row{margin-top:auto;padding-top:22px;display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:900px){.pgrid{grid-template-columns:repeat(3,1fr)}}

/* the reply thread: real WhatsApp colour on her side, paper on theirs */
.convo{display:grid;gap:36px;margin-top:36px;align-items:start}
.convo-copy p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:48ch}
.convo-copy p+p{margin-top:16px}
.convo-copy b{color:var(--ink);font-weight:600}
.phone{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;max-width:440px;justify-self:end;width:100%}
.phone-top{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.phone-top .av{width:34px;height:34px;border-radius:999px;background:var(--butter);color:var(--butter-ink);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:15px}
.phone-top b{display:block;font-size:15px;font-weight:600}
.phone-top span{display:block;font-size:12.5px;color:var(--muted)}
.thread{padding:16px 16px 6px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.bub{max-width:88%;padding:10px 12px;border-radius:12px;font-size:14.5px;line-height:1.45}
.bub.in{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-top-left-radius:2px}
.bub.out{align-self:flex-end;background:var(--wa);color:var(--wa-ink);border-top-right-radius:2px}
.bmeta{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.bub.out .bmeta{color:var(--wa-meta)}
.qblock{display:block;margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.7);font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--ink)}
.qblock.doc::before{content:"PDF";display:inline-block;font-size:10px;padding:1px 6px;border-radius:4px;background:var(--ink);color:#fff;margin-right:8px;letter-spacing:.04em}
.thread-note{padding:10px 16px 14px;font-size:12px;color:var(--muted);background:var(--paper)}
@media (min-width:900px){.convo{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px}}

/* the rules: one sky block, three facts on paper cards, the ledger in mono */
.rules{margin-top:36px}
.assure{display:grid;gap:12px}
.assure-item{background:var(--card);border-radius:14px;padding:20px 22px}
.assure-item b{display:block;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--sky-ink)}
.assure-item span{display:block;margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ledgerbox{margin-top:12px;background:var(--card);border-radius:14px;padding:18px 22px}
.lb-t{font-size:13px;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between}
.lb-t i{font-style:normal;font-family:var(--mono);font-size:11px}
.lrow{display:flex;gap:14px;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink-2);padding:5px 0;border-top:1px solid var(--line)}
.lrow time{color:var(--muted);flex:none}
.lrow b{font-weight:500;color:var(--sky-ink)}
@media (min-width:900px){.assure{grid-template-columns:repeat(3,1fr)}}

/* her terms: a hiring table, dotted leaders */
.terms{margin:36px 0 0;max-width:720px}
.terms-row{display:grid;gap:40px}
.cafe{display:block;width:100%;height:auto}
@media (min-width:900px){.terms-row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}.cafe{margin-bottom:6px}}
.trow{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.trow dt{color:var(--muted);flex:none}
.trow .lead{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
.trow dd{margin:0;font-family:var(--display);font-size:18px;text-align:right}
.trow dd i{font-style:italic;color:var(--ink-2);font-size:15px;margin-left:6px}

/* pricing: the pilot card on butter, scale on paper */
.price{display:grid;gap:16px;margin-top:36px}
.pcard{border-radius:22px;padding:30px 28px;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card)}
.pcard.win{border-color:var(--butter-ink)}
.pcard h3{font-size:22px}
.pnum{margin-top:14px;font-family:var(--display);font-size:40px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pnum i{font-style:italic;font-size:18px;color:var(--ink-2);margin-left:6px;letter-spacing:0}
.pmeta{margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--butter-ink)}
.band-butter .kind,.band-butter .pcard{background:var(--card)}
.pcard:not(.win) .pmeta{color:var(--muted)}
.pcard ul{margin:20px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pcard li{padding-left:18px;position:relative;margin-bottom:9px}
.pcard li::before{content:"\2713";position:absolute;left:0;color:var(--ink)}
.pcard li b{color:var(--ink);font-weight:600}
.pcard .btn{margin-top:auto;align-self:flex-start}
.pcard ul+.btn{margin-top:26px}
.punit{margin-top:18px;font-size:14px;line-height:1.55;color:var(--muted);max-width:74ch}
.punit b{color:var(--ink-2);font-weight:600}
@media (min-width:900px){.price{grid-template-columns:7fr 5fr}}

/* faq: rows, not cards */
.faq{margin-top:28px}
.faq-item{display:grid;gap:8px;padding:22px 0;border-bottom:1px solid var(--line)}
.faq-item b{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.faq-item span{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
@media (min-width:900px){.faq-item{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px}}

/* who: kinds as pills */
.kinds{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.still-wrap{margin:44px 0 0;overflow:hidden}
.still{display:block;width:100%;height:auto}
@media (max-width:899px){.still-wrap{margin:36px calc(50% - 50vw) 0}.still{width:170%;margin-left:-35%}}
.kind{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2);background:var(--card)}

/* close: the one loud field */
.close{margin-top:104px;background:var(--accent);color:#fff;border-radius:26px;padding:56px 32px;text-align:center}
.close h2{font-size:clamp(34px,4vw,54px);line-height:1.04;max-width:16ch;margin:0 auto}
.close p{margin:18px auto 0;font-size:17px;line-height:1.6;max-width:52ch;color:rgba(255,255,255,.88)}
.close .btn{margin-top:28px}
.close .cta-note{display:block;margin-top:12px;color:rgba(255,255,255,.7)}
@media (max-width:899px){.close{margin-top:80px;padding:44px 22px}}

/* footer */
footer{margin-top:40px;padding:26px 0 40px;border-top:1px solid var(--line);display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
footer .brand .mark{font-size:18px}
footer .brand .mark .mk{width:12px;height:12px}
.f-legal{display:flex;gap:18px}
.f-legal a:hover{color:var(--accent)}
.f-wa{margin-left:auto;color:var(--ink);font-weight:500}
.f-wa:hover{color:var(--accent)}

/* one entrance, on the whole page, once */
.rise{animation:rise .26s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise,.caret{animation:none}}

/* the plain variant: paper everywhere, ember only. Not shipped; one class away. */
html.plain .p-sage,html.plain .p-rose,html.plain .p-butter,html.plain .p-sky,html.plain .rules,html.plain .pcard.win{background:var(--card);border:1px solid var(--line);--p-ink:var(--ink)}
html.plain .pillar .tag{background:var(--tint)}
html.plain .assure-item,html.plain .ledgerbox{border:1px solid var(--line)}
html.plain .assure-item b,html.plain .lrow b,html.plain .pmeta{color:var(--ink)}


/* one conversation, two channels */
.lane{margin-top:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:24px 24px 26px}
.lane-h{display:flex;gap:6px 18px;align-items:baseline;flex-wrap:wrap;margin-bottom:20px}
.lane-h b{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.lane-h span{font-size:15px;color:var(--ink-2)}
.lane-track{display:grid;grid-template-columns:1fr 1fr;gap:18px 0;position:relative}
.lane-stop{position:relative;padding-right:18px}
.lane-stop i{display:block;width:15px;height:15px;border-radius:999px;border:2px solid var(--card);background:var(--line-2);box-shadow:0 0 0 1px var(--line-2);position:relative;z-index:1}
.lane-stop.wa i{background:var(--sage-ink);box-shadow:0 0 0 1px var(--sage-ink)}
.lane-stop.ig i{background:var(--rose-ink);box-shadow:0 0 0 1px var(--rose-ink)}
.lane-stop.end i{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.lane-stop b{display:block;margin-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.lane-stop span{display:block;margin-top:4px;font-size:14px;color:var(--ink-2);max-width:22ch}
@media (min-width:900px){.lane{margin-top:16px;padding:26px 28px 28px}.lane-track{grid-template-columns:repeat(4,1fr)}.lane-track::before{content:"";position:absolute;left:8px;right:8px;top:7px;height:1px;background:var(--line-2)}}

/* a display picture on the thread */
.phone-top img.av{object-fit:cover;padding:0;border:1px solid var(--line);background:var(--paper)}

/* the panel beside the ledger */
.panelbox .lrow time{min-width:74px}
.tiles.proof{margin-top:44px}

/* the two devices: the overview on a laptop, the beat in a hand */
.devices{margin-top:36px;display:grid;gap:24px;align-items:start}
.laptop{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;font-size:12.5px;line-height:1.45}
.lt-bar{display:flex;justify-content:center;padding:8px;border-bottom:1px solid var(--line);color:var(--muted);background:var(--paper)}
.lt-app{display:grid;grid-template-columns:150px 1fr;min-height:380px}
.lt-rail{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:var(--card)}
.lt-brand{font-family:var(--display);font-weight:600;font-size:16px;display:flex;align-items:center;gap:6px;margin-bottom:12px}
.lt-brand svg{width:12px;height:12px;fill:var(--accent)}
.lt-rail span{padding:6px 8px;border-radius:7px;color:var(--ink-2);display:flex;align-items:center}
.lt-rail span.on{background:var(--tint);color:var(--ink);font-weight:500}
.lt-rail span i{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--accent)}
.lt-main{padding:18px 22px;background:var(--paper)}
.lt-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.lt-h b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.lt-h span{color:var(--muted);font-size:11.5px}
.lt-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.lt-hero b{display:block;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.lt-hero span{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}
.lt-hero .lt-go{flex:none;display:inline-block;white-space:nowrap;background:var(--accent);color:#fff;border-radius:999px;padding:7px 12px;margin:0;font-weight:500;font-size:12px}
.lt-line{margin:12px 0 10px;font-size:12px;color:var(--ink-2)}
.lt-line b{color:var(--ink);font-family:var(--mono);font-weight:500}
.lt-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:8px}
.lt-card p{color:var(--ink-2);font-size:12px;margin-top:4px}
.lt-label{display:block;font-size:11px;color:var(--muted)}
.lt-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:12px}
.lt-row:first-of-type{border-top:0;margin-top:2px}
.lt-row b{font-weight:600}
.lt-row .mono{margin-left:auto;color:var(--muted);font-size:11px}
.lt-row .chan{height:18px;font-size:10.5px;padding:0 7px}
.handset{background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;font-size:12.5px;line-height:1.45;max-width:320px;justify-self:center;width:100%;display:flex;flex-direction:column}
.hs-top{display:flex;align-items:center;gap:6px;padding:14px 16px 10px;font-family:var(--display);font-weight:600;font-size:15px;border-bottom:1px solid var(--line)}
.hs-top svg{width:11px;height:11px;fill:var(--accent)}
.hs-top .mono{margin-left:auto;font-size:11px;color:var(--muted)}
.hs-body{padding:12px 14px 14px;background:var(--paper);flex:1}
.hs-label{display:block;font-size:11px;color:var(--muted);margin:10px 0 4px}
.hs-label:first-child{margin-top:0}
.hs-venue{display:block;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em;line-height:1.1}
.hs-sub{display:block;font-size:11.5px;color:var(--muted);margin:2px 0 6px}
.hs-body p{color:var(--ink-2);font-size:12px}
.hs-body .hook{margin:0 0 8px;font-size:12px}
.hs-body .bubble{font-size:12px}
.hs-checks{margin-top:10px;font-size:11px}
.hs-bar{display:flex;gap:6px;padding:10px 12px 14px;border-top:1px solid var(--line);background:var(--card)}
.hs-bar .chip{height:30px;padding:0 10px;font-size:12px;flex:1;justify-content:center}
.hs-bar .chip.go{flex:1.4}
@media (min-width:900px){.devices{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:32px}.handset{justify-self:end}}
@media (max-width:899px){.lt-app{grid-template-columns:1fr;min-height:0}.lt-rail{display:none}.lt-hero{flex-direction:column;align-items:flex-start}.lt-main{padding:16px}}

/* Motion on the product pictures only: each piece arrives as it scrolls into
   view, once, in the order a person would read it. Nothing loops, nothing
   glows, and under reduced motion everything is simply there. */
.arrive [data-step]{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.arrive.in [data-step]{opacity:1;transform:none}
.arrive.in [data-step="1"]{transition-delay:.05s}.arrive.in [data-step="2"]{transition-delay:.2s}.arrive.in [data-step="3"]{transition-delay:.35s}
.arrive.in [data-step="4"]{transition-delay:.5s}.arrive.in [data-step="5"]{transition-delay:.65s}.arrive.in [data-step="6"]{transition-delay:.8s}
.lane-track [data-step] i{transform:scale(.4);transition:transform .45s var(--ease)}
.arrive.in .lane-track [data-step] i{transform:none}
.lt-hero .lt-go{transition:background .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.arrive [data-step]{opacity:1;transform:none;transition:none}.lane-track [data-step] i{transform:none}}

.band-hero{margin-top:0;padding-top:0;padding-bottom:0;background:var(--paper)}
.band-hero>.hero{padding-bottom:8px}

/* The close carries the film: dark footage from the edge of space under a
   deep-blue wash, white words on it. Optional the same way the hero's is:
   no files, and the block is ember as before. */
.close{position:relative;overflow:hidden;isolation:isolate}
.close>*:not(.close-film){position:relative;z-index:1}
.close-film{position:absolute;inset:0;z-index:0}
.close-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.close-wash{position:absolute;inset:0;background:rgba(20,34,58,.38)}
/* With a film, the block grows so the words sit on the dark upper sky and the horizon light shows under the button. */
.close:has(.close-video){padding:64px 32px 132px}
.close-video{width:118%;height:auto;min-height:100%;left:-9%;top:0;object-position:50% 0}
@media (max-width:899px){.close:has(.close-video){padding:56px 24px 104px}.close-wash{background:rgba(20,34,58,.62)}.close-video{width:100%;height:132%;left:0;top:0;object-fit:cover;object-position:50% 0}}
.close:has(.close-video) .btn.paper{background:var(--paper);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.close-video{display:none}.close-film{background:url("/img/close.jpg") center/cover no-repeat}}
html.plain .close-film{display:none}

/* ============================================================================
   GUIDE PAGES ONLY. Namespaced under body.guide so the copied half above stays
   byte-identical to landing/index.html's and a diff shows only real drift.
   ============================================================================ */
body.guide .crumb{padding-top:26px;font-size:13.5px;color:var(--muted)}
body.guide .crumb a:hover{color:var(--accent)}
body.guide .crumb span{margin:0 8px}
body.guide .guide-hero{padding:22px 0 0}
body.guide .guide-hero h1{max-width:20ch;font-size:clamp(34px,3.8vw,52px)}
body.guide .guide-hero .dek{font-size:19px;line-height:1.6;max-width:58ch;margin-top:20px}
body.guide .byline{margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
body.guide .byline a{text-decoration:underline;text-underline-offset:3px}
body.guide .byline a:hover{color:var(--accent)}
body.guide .guide{margin-top:26px}
body.guide .guide p{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:64ch}
body.guide .guide p+p{margin-top:18px}
body.guide .guide h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.015em;color:var(--ink);margin:36px 0 10px}
body.guide .scene{display:block;width:100%;height:auto;margin-top:40px}
body.guide .tpl{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
body.guide .tpl:first-of-type{border-top:0;padding-top:0}
body.guide .tpl-h{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
body.guide .tpl-h h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--ink);margin:0}
body.guide .tpl-when{font-family:var(--mono);font-size:12px;color:var(--muted)}
body.guide .tpl-body{margin-top:16px;display:grid;gap:18px;align-items:start}
body.guide .tpl .bubble{white-space:pre-line;font-size:15px;line-height:1.6}
body.guide .bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:46ch}
body.guide .copy{height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);
  font-family:var(--text);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;
  transition:border-color .13s var(--ease),background .13s var(--ease)}
body.guide .copy:hover{border-color:var(--ink)}
body.guide .copy.done{background:var(--sage);border-color:var(--sage);color:var(--sage-ink)}
body.guide .tpl-why{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:52ch}
@media (min-width:900px){body.guide .tpl-body{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:44px}}
/* .close .btn already sets margin-top:28px; inside the row that stacks on the row's own. */
body.guide .close .cta-row{margin-top:28px;justify-content:center}
body.guide .close .cta-row .btn{margin-top:0}
body.guide .close .talk{display:inline-block;margin-top:16px;font-size:14.5px;color:rgba(255,255,255,.86);
  text-decoration:underline;text-underline-offset:3px}
body.guide .close .talk:hover{color:#fff}
/* Five links plus the wordmark overflow a 375px row without this. */
body.guide .f-legal{flex-wrap:wrap;row-gap:8px}

/* the index: one row per guide */
body.guide .glist{margin-top:36px;border-top:1px solid var(--line)}
body.guide .gitem{display:grid;gap:10px;padding:26px 0;border-bottom:1px solid var(--line)}
body.guide .gitem h2{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.015em;margin:0}
body.guide .gitem h2 a:hover{color:var(--accent)}
body.guide .gitem p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:60ch;margin:8px 0 0}
body.guide .gitem time{font-family:var(--mono);font-size:12px;color:var(--muted)}
@media (min-width:900px){body.guide .gitem{grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:40px;align-items:baseline}
  body.guide .gitem time{text-align:right}}
@media (min-width:900px){body.guide .tiles.two{grid-template-columns:repeat(2,1fr)}}

/* ============================================================================
   GUIDE DOCUMENT LAYOUT. body.guide.guide-doc only, so the three older guides
   keep the landing anatomy above untouched. A guide reads like a document: one
   68ch reading column on the 1160px grid, a quiet contents rail beside it, no
   full-width bands, no section counters, no display headings inside the article.
   ============================================================================ */
body.guide-doc .gd-grid{display:grid;gap:0;padding:4px 0 0}
body.guide-doc .gd-grid>*{min-width:0}
body.guide-doc section{padding-top:0}
@media (min-width:900px){
  body.guide-doc .gd-grid{grid-template-columns:minmax(0,68ch) minmax(0,224px);justify-content:start;gap:0 64px;align-items:start}
  body.guide-doc .gd-head{grid-column:1;grid-row:1}
  body.guide-doc .gd-body{grid-column:1;grid-row:2}
  body.guide-doc .gd-toc{grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:88px}
}

/* the masthead: kicker, title, byline, the quotable answer */
body.guide-doc .gd-kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--accent);margin:0 0 14px}
body.guide-doc .gd-head h1{font-family:var(--display);font-weight:600;font-size:clamp(29px,3.4vw,36px);
  line-height:1.18;letter-spacing:-.018em;max-width:26ch;text-wrap:balance}
body.guide-doc .gd-head .byline{margin-top:14px}
body.guide-doc .gd-brief{margin-top:26px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:20px 22px}
body.guide-doc .gd-brief p{margin:0;font-family:var(--display);font-size:18.5px;line-height:1.55;color:var(--ink)}
body.guide-doc .gd-brief .gd-brief-h{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* contents: the rail on desktop, an inline list under the brief on a phone */
body.guide-doc .gd-toc{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
body.guide-doc .gd-toc-h{margin:0 0 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
body.guide-doc .gd-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
body.guide-doc .gd-toc li{counter-increment:toc;display:flex;gap:10px;font-size:14.5px;line-height:1.45;padding:5px 0}
body.guide-doc .gd-toc li::before{content:counter(toc);font-family:var(--mono);font-size:12px;color:var(--muted);flex:none;padding-top:2px}
body.guide-doc .gd-toc a{color:var(--ink-2)}
body.guide-doc .gd-toc a:hover{color:var(--accent)}
@media (min-width:900px){
  body.guide-doc .gd-toc{margin-top:0;padding-top:0;border-top:0;max-width:26ch}
  body.guide-doc .gd-toc.gd-rail{border-left:1px solid var(--line);padding-left:26px}
}

/* body copy */
body.guide-doc .gd-body{padding-top:8px}
body.guide-doc .gd-body h2{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.22;
  letter-spacing:-.015em;color:var(--ink);margin:56px 0 14px;scroll-margin-top:88px}
body.guide-doc .gd-body h3{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);margin:30px 0 8px}
body.guide-doc .gd-body p{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0}
body.guide-doc .gd-body p+p{margin-top:16px}
body.guide-doc .gd-body ul{margin:12px 0 0;padding-left:20px;list-style:disc}
body.guide-doc .gd-body li{font-size:17px;line-height:1.6;color:var(--ink-2);margin-top:7px}
body.guide-doc .gd-body li::marker{color:var(--line-2)}
body.guide-doc .gd-body h3+p,body.guide-doc .gd-body ul+p{margin-top:14px}
body.guide-doc .gd-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
body.guide-doc .gd-body a:hover{color:var(--accent-2)}
body.guide-doc .gd-note{margin-top:18px;font-size:15.5px;line-height:1.6;color:var(--muted)}

/* the rules she keeps: a term list, not a grid of cards */
body.guide-doc .gd-defs{margin:16px 0 0}
body.guide-doc .gd-defs dt{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin-top:18px}
body.guide-doc .gd-defs dd{margin:5px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}

/* end matter: a slim callout, the author, the sibling guides */
body.guide-doc .gd-end{margin-top:64px;max-width:68ch}
body.guide-doc .gd-cta{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);padding:26px 0 28px}
body.guide-doc .gd-cta h2{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.015em;margin:0}
body.guide-doc .gd-cta p{margin:12px 0 0;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
body.guide-doc .gd-links{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:16px}
body.guide-doc .gd-links a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:4px}
body.guide-doc .gd-links a:hover{color:var(--accent-2)}
body.guide-doc .gd-cta .gd-note{margin-top:16px;font-size:14.5px}
body.guide-doc .gd-cta .gd-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
body.guide-doc .gd-author{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
body.guide-doc .gd-author b{display:block;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em}
body.guide-doc .gd-author b a{text-decoration:underline;text-underline-offset:3px}
body.guide-doc .gd-author b a:hover{color:var(--accent)}
body.guide-doc .gd-author span{display:block;margin-top:6px;font-size:15px;line-height:1.6;color:var(--ink-2)}
body.guide-doc .gd-more{margin-top:34px}
body.guide-doc .gd-more h2{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
body.guide-doc .gd-more ul{margin:0;padding:0;list-style:none}
body.guide-doc .gd-more li{border-top:1px solid var(--line);padding:14px 0}
body.guide-doc .gd-more a{font-family:var(--display);font-size:17.5px;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
body.guide-doc .gd-more a:hover{color:var(--accent)}
body.guide-doc footer{margin-top:48px}

/* ------------------------------------------------------------------
   TOOL PAGE LAYOUT. body.guide-doc.tool-doc: the tool above the fold at the
   full column width, a short row of notes under it, no brief box and no
   contents rail. Guides explain; a tool page gets out of the way.
------------------------------------------------------------------ */
body.tool-doc .gd-grid{grid-template-columns:minmax(0,1fr)}
body.tool-doc .gd-head{max-width:68ch}
body.tool-doc .gd-dek{margin:14px 0 0;font-size:18.5px;line-height:1.55;color:var(--ink-2)}
body.tool-doc .gd-dek a{text-decoration:underline;text-underline-offset:3px}
body.tool-doc .gd-dek a:hover{color:var(--accent)}
body.tool-doc .tool{margin-top:28px;display:grid;gap:18px;align-items:start}
@media (min-width:900px){body.tool-doc .tool{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px}}
body.tool-doc .tool-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px 24px;min-width:0}
body.tool-doc .tool-card h2{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:0 0 4px}
body.tool-doc .tool-card .sub{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:50ch}
body.tool-doc .notes{margin-top:40px;display:grid;gap:28px 40px;border-top:1px solid var(--line-2);padding-top:26px}
@media (min-width:900px){body.tool-doc .notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.tool-doc .notes h2{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
body.tool-doc .notes p{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0}
body.tool-doc .notes p+p{margin-top:10px}
body.tool-doc .notes ul{margin:0;padding-left:18px;list-style:disc}
body.tool-doc .notes li{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin-top:6px}
body.tool-doc .notes li::marker{color:var(--line-2)}
body.tool-doc .notes a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
body.tool-doc .notes ol.wts{margin:0;padding:0;list-style:none}
body.tool-doc .notes ol.wts li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;line-height:1.45;padding:6px 0;border-top:1px solid var(--line);margin:0}
body.tool-doc .notes ol.wts li:first-child{border-top:0;padding-top:0}
body.tool-doc .notes ol.wts b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted);flex:none}
body.tool-doc .gd-end{margin-top:48px}
body.tool-doc .notes ul+p{margin-top:12px}
@media (min-width:900px){body.tool-doc .notes.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:96ch}}
body.tool-doc .notes .gd-defs{margin:0}
body.tool-doc .notes .gd-defs dt{font-size:15.5px;margin-top:12px}
body.tool-doc .notes .gd-defs dt:first-child{margin-top:0}
body.tool-doc .notes .gd-defs dd{font-size:15px;line-height:1.55;margin-top:3px}
body.tool-doc .notes dl+p{margin-top:14px}