/* Advolog — site design system, conforming to the locked design brief.
   Palette: ink / bone / brass; red reserved exclusively for crisis content.
   Type: Fraunces (display) + Inter (text) for EN; Hebrew display = Frank Ruhl
   Libre (RULED by Heela, 2026-08-02), Heebo for Hebrew text.
   Sharp corners everywhere. Hairline rules as the structural device. No filled
   cards. Dark sections (hero, "what it won't do", footer) are locked to ink.
   All fonts self-hosted (assets/fonts/) — the page makes zero external requests. */

@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/FrankRuhlLibre-500-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/FrankRuhlLibre-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/FrankRuhlLibre-600-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Frank Ruhl Libre';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/FrankRuhlLibre-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/Fraunces-500i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Fraunces-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Fraunces-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Heebo-400-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Heebo-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Heebo-500-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Heebo-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Heebo-600-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Heebo-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ink:#16140F; --bone:#F1EDE2; --paper:#FFFFFF;
  --brass:#C9A24B; --brass-text:#7E5D18;           /* AA on bone: 5.18:1 */
  --muted:#57503F; --dark-muted:#B3A995;
  --crisis:#9E3323; --crisis-dark:#E5836B;         /* red = crisis only */
  --hair:rgba(22,20,15,.22); --hair-dark:rgba(241,237,226,.24);
  --maxw:1120px; --pad:104px; --labelcol:260px;
  --fs-body:16.5px; --fs-small:14.5px; --fs-label:14px;
  --display-en:'Fraunces', Georgia, serif;
  --display-he:'Frank Ruhl Libre', serif;  /* FINAL — Heela's ruling, 2026-08-02 */
  --text-en:'Inter', -apple-system, "Segoe UI", Arial, sans-serif;
  --text-he:'Heebo', -apple-system, "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-scale="big"]{ --fs-body:18.5px; --fs-small:16px; --fs-label:15.5px; }

*{box-sizing:border-box; border-radius:0 !important;}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bone); color:var(--ink);
  font-size:var(--fs-body); line-height:1.65; font-family:var(--text-he);}
html[data-lang="en"] body{font-family:var(--text-en)}
html[data-lang="he"] .en{display:none !important}
html[data-lang="en"] .he{display:none !important}

h1,h2,h3,.display{font-family:var(--display-he); font-weight:500; line-height:1.14; margin:0;}
html[data-lang="en"] h1, html[data-lang="en"] h2, html[data-lang="en"] h3, html[data-lang="en"] .display{font-family:var(--display-en)}
em.accent{font-style:italic}

a{color:inherit; text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px}
p{margin:10px 0}
.small{font-size:var(--fs-small)}
.muted{color:var(--muted)}
ul,ol{margin:8px 0; padding-inline-start:22px}

.skip{position:absolute; inset-inline-start:-999px; top:0; background:var(--ink); color:var(--bone); padding:8px 14px; z-index:99;}
.skip:focus{inset-inline-start:8px}

/* ── mono kit ─────────────────────────────────────────── */
.mono{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase;}
.numlabel{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; color:var(--brass-text);}
.dark .numlabel{color:var(--brass)}
.tag{display:inline-block; border:1px solid var(--hair); padding:2px 10px; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.dark .tag{border-color:var(--hair-dark); color:var(--dark-muted)}
/* Hebrew utility copy stays in the readable text face; mono is for numerals and Latin labels. */
html[data-lang="he"] .mono, html[data-lang="he"] .tag, html[data-lang="he"] .numlabel{
  font-family:var(--text-he); letter-spacing:0; text-transform:none;
}

/* ── page grid ────────────────────────────────────────── */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{padding:var(--pad) 0}
.dark{background:var(--ink); color:var(--bone); position:relative;}
.dark .muted{color:var(--dark-muted)}
.onwhite{background:var(--paper)}

/* section header: number + rule + title */
.shead{display:grid; grid-template-columns:var(--labelcol) 1fr; gap:24px; align-items:baseline;
  border-top:1px solid var(--hair); padding-top:18px; margin-bottom:44px;}
.dark .shead{border-top-color:var(--hair-dark)}
.shead h2{font-size:clamp(26px,3.6vw,34px)}
@media(max-width:760px){ .shead{grid-template-columns:1fr; gap:6px} }

/* label-column split layout */
.split{display:grid; grid-template-columns:var(--labelcol) 1fr; gap:24px;}
@media(max-width:760px){ .split{grid-template-columns:1fr} }

/* list rows: 64 / 300 / 1fr on hairlines */
.rows{border-top:1px solid var(--hair)}
.dark .rows{border-top-color:var(--hair-dark)}
.row{display:grid; grid-template-columns:64px 300px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--hair); align-items:start;}
.dark .row{border-bottom-color:var(--hair-dark)}
.row h3{font-size:20.5px; line-height:1.3}
.row .ric{width:26px; height:26px; margin-top:2px}
.row .ric svg{display:block}
@media(max-width:860px){ .row{grid-template-columns:40px 1fr; } .row > :last-child{grid-column:2} }

/* ── topbar ───────────────────────────────────────────── */
.topbar{position:sticky; top:0; z-index:20; background:var(--bone); border-bottom:1px solid var(--hair);}
.topbar .inner{max-width:var(--maxw); margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:8px 22px; flex-wrap:wrap;}
.brand{font-family:var(--display-en); font-weight:600; font-size:19px; text-decoration:none; letter-spacing:.01em;}
.brand .sub{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-inline-start:8px;}
html[data-lang="he"] .brand .sub{font-family:var(--text-he); letter-spacing:0; text-transform:none;}
.topnav{display:flex; gap:4px 20px; flex-wrap:wrap; margin-inline-start:auto; align-items:center;}
.topnav a{text-decoration:none; font-size:14.5px; border-bottom:2px solid transparent; padding:2px 0;}
.topnav a:hover{border-bottom-color:var(--brass)}
.tbtn{border:1px solid var(--ink); background:transparent; color:var(--ink); padding:5px 12px; font-size:13.5px; cursor:pointer; font-family:inherit;}
.tbtn:hover{background:var(--ink); color:var(--bone)}

/* ── buttons ──────────────────────────────────────────── */
.btn{display:inline-block; padding:13px 24px; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; font-family:inherit; border:1px solid transparent; letter-spacing:.01em;}
.btn.ink{background:var(--ink); color:var(--bone);}
.btn.ink:hover{background:#2A2619}
.btn.brass{background:var(--brass); color:var(--ink); border-color:var(--brass);}
.btn.brass:hover{background:#D5B269}
.btn.line{background:transparent; color:inherit; border-color:currentColor;}
.btn.line:hover{background:rgba(127,116,90,.12)}
.btn:focus-visible,.tbtn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:0; border-bottom:1px solid var(--hair-dark);}
.hero .inner{max-width:var(--maxw); margin:0 auto; padding:96px 28px 84px; position:relative;}
.heroart{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.heroart svg{width:100%; height:100%; display:block; object-fit:cover;}
.hero .content{position:relative;}
.hero h1{font-size:clamp(38px,6.4vw,76px); max-width:20ch;}
.hero .sub{font-size:clamp(17px,2vw,19.5px); max-width:62ch; margin:26px 0 34px; line-height:1.7;}
.hero .ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero .under{margin-top:20px; max-width:62ch;}

/* ── tiers strip ─────────────────────────────────────── */
.tiers{display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--hair); border-inline-end:none; margin:18px 0 6px; width:fit-content;}
.tier{padding:8px 18px; border-inline-end:1px solid var(--hair); font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; color:var(--brass-text);}

/* ── loop bracket (steps 3–5) ─────────────────────────── */
.loopwrap{position:relative; padding-inline-start:26px; margin-top:0;}
.loopwrap::before{content:""; position:absolute; inset-inline-start:0; top:12px; bottom:12px; width:12px;
  border:1.5px solid var(--brass); border-inline-end:none;}
.looplabel{color:var(--brass-text); font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; margin:14px 0 0; padding-inline-start:26px;}
html[data-lang="he"] .looplabel{font-family:var(--text-he); letter-spacing:0;}

/* ── demo panels ─────────────────────────────────────── */
.demo{border:1px solid var(--hair); background:var(--paper); padding:26px 30px; position:relative;}
.demo .tag{position:absolute; top:-11px; inset-inline-start:24px; background:var(--paper);}
.demo blockquote{margin:0; padding:0}
.demo .turn{margin:13px 0; max-width:70ch}
.demo .who{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--brass-text); display:block; margin-bottom:2px;}
html[data-lang="he"] .demo .who{font-family:var(--text-he); letter-spacing:0; text-transform:none;}
.demo .prep h4{font-family:inherit; font-size:16px; margin:14px 0 4px}
.demo ol{padding-inline-start:20px}
.demo .why{color:var(--muted); font-size:.9em}
.democap{color:var(--muted); font-size:var(--fs-small); margin:12px 4px 34px;}

/* ── starter block ───────────────────────────────────── */
.starterbox pre{border:1px solid var(--hair); background:var(--paper); padding:22px 24px; max-height:430px; overflow:auto; white-space:pre-wrap; font-family:inherit; font-size:15px; line-height:1.7; margin:0;}
.copybar{display:flex; gap:14px; align-items:center; margin-top:14px; flex-wrap:wrap;}
.promptdetails{border:0; padding:0; margin:16px 0 0;}
.promptdetails summary{width:fit-content; font-size:var(--fs-small); font-weight:500; text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:3px;}
.promptdetails summary::before{font-size:var(--fs-label);}
.promptdetails[open] summary{margin-bottom:12px;}

/* ── paths grid ──────────────────────────────────────── */
.paths{display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--hair); border-inline-end:none;}
.path{border-inline-end:1px solid var(--hair); padding:22px 20px 26px;}
.path .glyph{height:30px; margin-bottom:14px; color:var(--brass-text)}
.path h3{font-size:19px; margin-bottom:2px}
.path .en-name{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px;}
@media(max-width:1020px){ .paths{grid-template-columns:repeat(2,1fr)} .path:nth-child(-n+4){border-bottom:1px solid var(--hair)} }
@media(max-width:560px){ .paths{grid-template-columns:1fr} .path{border-bottom:1px solid var(--hair)} .path:last-child{border-bottom:none} }

/* ── wont-do (dark) ──────────────────────────────────── */
#wont .row h3{font-size:19.5px}
#wont .crisis h3{color:var(--crisis-dark)}
#wont .crisis strong{color:var(--crisis-dark)}
.darkart{position:absolute; inset-inline-end:0; bottom:0; width:340px; max-width:45%; opacity:.85; pointer-events:none;}

/* ── two ways in ─────────────────────────────────────── */
.ways{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--hair); border-inline-end:none;}
.way{border-inline-end:1px solid var(--hair); padding:30px 30px 34px; background:var(--paper);}
.way h3{font-size:22px; margin-bottom:10px}
.more-help-title{font-size:22px; margin:40px 0 14px;}
.compact-rows .row{padding:18px 0;}
@media(max-width:860px){ .ways{grid-template-columns:1fr} .way{border-bottom:1px solid var(--hair)} .way:last-child{border-bottom:none} }

/* ── FAQ ─────────────────────────────────────────────── */
details{border-bottom:1px solid var(--hair); padding:16px 0;}
.faqrows{border-top:1px solid var(--hair)}
summary{cursor:pointer; font-weight:600; font-size:17px; list-style:none; display:flex; gap:14px; align-items:baseline;}
summary::before{content:"+"; font-family:var(--mono); color:var(--brass-text); font-size:16px;}
details[open] summary::before{content:"–"}
details > div{margin:8px 0 4px; max-width:72ch}
details .crisis-a{color:var(--crisis)}

/* ── tables ──────────────────────────────────────────── */
.tblwrap{overflow-x:auto; border:1px solid var(--hair);}
table{border-collapse:collapse; width:100%; font-size:15px; background:var(--paper);}
th,td{border-bottom:1px solid var(--hair); padding:12px 16px; text-align:start; vertical-align:top;}
th{font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--bone);}
tr:last-child td{border-bottom:none}

/* ── forms (form.html) ───────────────────────────────── */
label{display:block; font-weight:600; margin:18px 0 4px;}
.hint{color:var(--muted); font-size:14px; margin:0 0 6px;}
input[type=text],textarea,select{width:100%; background:var(--paper); color:var(--ink); border:1px solid var(--hair); padding:11px 13px; font-size:15.5px; font-family:inherit;}
textarea{min-height:96px; resize:vertical}
fieldset{border:1px solid var(--hair); padding:8px 18px 14px; margin:18px 0;}
legend{font-weight:700; padding:0 8px}
.radio{display:flex; gap:9px; align-items:flex-start; margin:8px 0; font-weight:400;}
.radio input{margin-top:5px; accent-color:var(--brass-text);}

/* ── guides ──────────────────────────────────────────── */
.gnav{display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--hair); border-inline-end:none; width:fit-content; margin:20px 0;}
.gnav a{padding:9px 20px; border-inline-end:1px solid var(--hair); text-decoration:none; font-size:14.5px;}
.gnav a:hover{background:var(--paper)}
.guide{padding:64px 0 0}
.guide h2{font-size:clamp(24px,3vw,30px); border-bottom:1px solid var(--hair); padding-bottom:10px; margin-bottom:20px;}
.guide h3{font-size:19px; margin:26px 0 8px}
.shot{border:1px dashed var(--hair); padding:12px 16px; color:var(--muted); font-size:14px; margin:12px 0;}
.shot img{max-width:100%; border:1px solid var(--hair); display:block; margin:8px auto;}
pre.block{border:1px solid var(--hair); background:var(--paper); padding:14px 16px; overflow:auto; white-space:pre-wrap; font-family:inherit; font-size:14.5px;}
.notice{border:1px solid var(--hair); border-inline-start:3px solid var(--brass); padding:13px 18px; margin:16px 0; background:var(--paper);}
.notice.crisis{border-inline-start-color:var(--crisis)}

/* ── video slots ─────────────────────────────────────── */
.vslots{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--hair); border-inline-end:none;}
.vslot{border-inline-end:1px solid var(--hair); padding:26px 22px; text-align:center; color:var(--muted);}
.vslot .ph{font-family:var(--mono); font-size:22px; color:var(--brass-text); margin-bottom:8px;}
@media(max-width:760px){ .vslots{grid-template-columns:1fr} .vslot{border-bottom:1px solid var(--hair)} .vslot:last-child{border-bottom:none} }

/* ── footer (dark, locked) ───────────────────────────── */
footer{background:var(--ink); color:var(--bone); padding:64px 0 40px; border-top:1px solid var(--hair-dark);}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr; gap:40px;}
footer a{text-decoration-color:var(--brass)}
footer .muted{color:var(--dark-muted)}
footer .crisisline{color:var(--crisis-dark); margin-top:18px;}
footer .personal{font-family:var(--display-he); font-style:italic; font-size:18px; margin:14px 0;}
html[data-lang="en"] footer .personal{font-family:var(--display-en)}
footer .links{display:flex; gap:4px 18px; flex-wrap:wrap; margin-top:10px;}
@media(max-width:760px){ footer .cols{grid-template-columns:1fr} }

#toast{position:fixed; bottom:18px; inset-inline-start:18px; background:var(--ink); color:var(--bone); border:1px solid var(--brass); padding:10px 18px; font-size:14.5px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:40;}

/* censor page canvas */
#cwrap{border:1px solid var(--hair); background:var(--paper); padding:10px; touch-action:none; margin:12px 0;}
#cv{max-width:100%; display:block; margin:0 auto; cursor:crosshair;}

@media print{.topbar,.ctas,#toast,.copybar{display:none}}
/* crisis-resource links keep the crisis color (never brass) — tap-to-call / open */
.crisisline a, #wont .crisis a, .crisis-a a{ color:inherit; text-decoration-color:currentColor; text-underline-offset:2px; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} }
@media(max-width:760px){
  :root{--pad:64px}
  .topbar .inner{padding:10px 20px; gap:7px 14px;}
  .brand .sub{display:none;}
  .topnav{width:100%; margin-inline-start:0; gap:6px 12px; justify-content:space-between;}
  .topnav a{font-size:14px;}
  .tbtn{padding:4px 10px;}
  .hero .inner{padding:64px 20px 56px}
  .wrap{padding:0 20px}
}

/* ── §04 flow figure + §07 prep figure — figure treatment (design pass) ── */
.flowfig{margin:44px 0 6px; overflow-x:auto;}
.flowfig svg{width:100%; min-width:760px; display:block;}

.prepfig{max-width:472px; margin-inline:auto; margin-top:34px; padding:0;}
.prepfig img{width:100%; display:block; border:0; margin:0;}
.prepfig figcaption{border-top:1px solid var(--hair); padding:11px 14px; margin:0;}

/* screenshots: one frame, caption below the rule (guides.html figures) */
.shot.screen{padding:0;}
.shot.screen img{width:100%; border:0; margin:0;}
.shot.screen figcaption{border-top:1px solid var(--hair); padding:11px 14px; margin:0;}
.shot.screen.detail{max-width:62%; margin-inline-start:0;}