/* ServiceAgreement.org v1.0 - "the annotated contract". Own design system (SPEC 4): paper + graphite ink + oxblood seal,
   highlighter wash on clauses that cost or bind you. Libre Caslon Text (OFL) + Manrope (OFL), self-hosted. */
@font-face{font-family:"SA Caslon";src:url(/assets/fonts/caslon-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SA Caslon";src:url(/assets/fonts/caslon-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"SA Caslon";src:url(/assets/fonts/caslon-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"SA Manrope";src:url(/assets/fonts/manrope-var.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --paper:#f7f4ee; --sheet:#fffdf8; --ink:#1f1d1a; --ink2:#4a4640; --ink3:#77716a; --rule:#ddd5c8; --rule2:#ebe5da;
  --seal:#7b1e2b; --seal2:#5e1520; --sealbg:#f6e9e6; --mark:rgba(255,226,110,.6); --markline:#e9c93f;
  --clear:#2f5d3a; --clearbg:#e8f0e6; --watch:#8a5a00; --watchbg:#fff4cf; --ask:#2d4a7a; --askbg:#e7edf7;
  --serif:"SA Caslon","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"SA Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:4px; --w:1180px; --gut:clamp(18px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);font-feature-settings:"tnum" 0;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto}
a{color:var(--seal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--seal2);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--seal);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.3rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.small{font-size:.86rem;color:var(--ink2)}
.muted{color:var(--ink3)}
.num{font-variant-numeric:tabular-nums lining-nums}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:20}
.skip:focus{left:8px;top:8px}
.eyebrow{font:700 .74rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--seal);margin:0 0 14px}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink2);max-width:40em}
.page{max-width:var(--w);margin:0 auto;padding:clamp(28px,5vw,64px) var(--gut)}
.narrow{max-width:760px}
.display{font-size:clamp(2rem,4vw,3rem)}

/* ---- preview ribbon: reads like a footnote at the head of the page */
.ribbon{background:var(--seal);color:#fbeee9;font-size:.84rem;line-height:1.4}
.ribbon .in{max-width:var(--w);margin:0 auto;padding:8px var(--gut);display:flex;gap:6px 18px;flex-wrap:wrap;align-items:baseline}
.ribbon b{font-weight:700;letter-spacing:.04em}
.ribbon a{color:#fff}

/* ---- masthead */
.mast{background:var(--sheet);border-bottom:1px solid var(--rule)}
.mast .in{max-width:var(--w);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand .glyph{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--seal);color:#f7f4ee;font:700 1.35rem/1 var(--serif);box-shadow:inset 0 0 0 3px var(--seal),inset 0 0 0 4px rgba(255,255,255,.35)}
.brand .word{font:400 1.32rem/1 var(--serif);letter-spacing:.005em}
.brand .word i{font-style:normal;color:var(--ink3)}
.nav{display:flex;gap:4px;align-items:center}
.nav a{color:var(--ink2);text-decoration:none;font-weight:600;font-size:.93rem;padding:9px 12px;border-radius:var(--r)}
.nav a:hover{color:var(--ink);background:var(--rule2)}
.nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--seal);border-radius:0}
.nav a.cta{background:var(--ink);color:var(--paper);margin-left:8px;border-radius:999px;padding:9px 18px}
.nav a.cta:hover{background:var(--seal)}
.menu{display:none}
@media (max-width:900px){
  .nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;font-weight:700;font-size:.92rem;padding:9px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--paper)}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .menu .drop{position:absolute;right:0;top:calc(100% + 8px);background:var(--sheet);border:1px solid var(--rule);box-shadow:0 18px 40px rgba(31,29,26,.16);border-radius:8px;min-width:240px;padding:8px;z-index:10}
  .menu .drop a{display:block;padding:11px 12px;color:var(--ink);text-decoration:none;font-weight:600;border-radius:var(--r)}
  .menu .drop a:hover{background:var(--rule2)}
}

/* ---- buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 .98rem/1 var(--sans);padding:15px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--seal);border-color:var(--seal);color:#fff}
.btn.seal{background:var(--seal);border-color:var(--seal)}
.btn.seal:hover{background:var(--seal2);border-color:var(--seal2)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.small{padding:10px 16px;font-size:.88rem}
.btn .arr{font-family:var(--serif);font-size:1.1em}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
button.link{background:none;border:0;padding:0;color:var(--seal);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- home: hero with an annotated example agreement */
.hero{max-width:var(--w);margin:0 auto;padding:clamp(36px,6vw,88px) var(--gut) clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{margin-bottom:.35em}
.hero h1 em{font-style:italic;color:var(--seal)}
.hero .actions{margin-top:28px}
.hero .assure{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.88rem;color:var(--ink2);padding:0;list-style:none}
.hero .assure li::before{content:"§ ";color:var(--seal);font-family:var(--serif)}
@media (max-width:900px){.hero{grid-template-columns:1fr}}

.contract{position:relative;background:var(--sheet);border:1px solid var(--rule);box-shadow:0 1px 0 var(--rule),0 30px 60px -30px rgba(31,29,26,.35);padding:34px 34px 28px;display:grid;grid-template-columns:minmax(0,1fr) 170px;margin:0;gap:0 22px;font-family:var(--serif)}
.contract::before{content:"";position:absolute;inset:8px -8px -8px 8px;background:var(--rule2);z-index:-1;border:1px solid var(--rule)}
.contract .tag{grid-column:1/-1;display:flex;justify-content:space-between;font:700 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:16px}
.contract .cl{font-size:.98rem;line-height:1.62;color:var(--ink2);margin:0 0 12px}
.contract .cl b{font-weight:700;color:var(--ink)}
.contract mark{background:linear-gradient(transparent 12%,var(--mark) 12%,var(--mark) 88%,transparent 88%);color:var(--ink);padding:0 2px}
.contract .note{font:600 .84rem/1.4 var(--sans);color:var(--seal);border-left:2px solid var(--seal);padding:2px 0 2px 10px;margin:0 0 12px;align-self:start}
.contract .note small{display:block;font-size:.8rem;color:var(--ink3);font-weight:500;letter-spacing:0}
.contract .ref{font:700 .7rem/1 var(--sans);vertical-align:super;color:var(--seal)}
@media (max-width:560px){.contract{grid-template-columns:1fr;padding:22px 20px}.contract .note{margin-top:-4px}}

.band{border-top:1px solid var(--rule)}
.band.sheet{background:var(--sheet)}
.band.dark{background:#1f1d1a;color:#ece6db;border:0}
.band.dark h2{color:#fff}
.band.dark a{color:#ffd3c9}
.band .page{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.sec-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px 64px;align-items:end;margin-bottom:40px}
.sec-head p{margin:0;color:var(--ink2)}
.band.dark .sec-head p{color:#c9c1b4}
@media (max-width:800px){.sec-head{grid-template-columns:1fr}}

/* four big figures (Schwab-style plain numerals) */
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.figs>div{padding:22px 20px 20px 0;border-right:1px solid var(--rule)}
.figs>div+div{padding-left:20px}
.figs>div:last-child{border-right:0}
.figs dt{font:700 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.figs dd{margin:0;font:400 clamp(1.7rem,3.2vw,2.6rem)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}
.figs dd small{display:block;font:500 .82rem/1.4 var(--sans);color:var(--ink2);margin-top:10px}
.figs .hot dd{color:var(--seal)}
@media (max-width:760px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}.figs>div:nth-child(2){border-right:0}.figs>div:nth-child(3){padding-left:0}.figs>div:nth-child(n+3){border-top:1px solid var(--rule)}}

/* table of contents of the worksheet */
.toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.toc li{padding:22px 18px 8px 0;border-right:1px solid var(--rule)}
.toc li+li{padding-left:18px}
.toc li:last-child{border-right:0}
.toc .pn{font:400 2.2rem/1 var(--serif);color:var(--seal);display:block;margin-bottom:10px}
.toc b{display:block;font-family:var(--serif);font-weight:400;font-size:1.2rem;margin-bottom:8px}
.toc span{font-size:.88rem;color:var(--ink2)}
@media (max-width:980px){.toc{grid-template-columns:1fr 1fr}.toc li{border-right:0;border-bottom:1px solid var(--rule);padding:18px 0!important}}
@media (max-width:520px){.toc{grid-template-columns:1fr}}

.cool{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.cool .clock{border:1px solid #3d3933;padding:24px;font-family:var(--serif)}
.cool .clock ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.cool .clock li{border:1px solid #3d3933;padding:12px 4px;font:600 .8rem/1.3 var(--sans);color:#c9c1b4}
.cool .clock li b{display:block;font:400 1.5rem/1.1 var(--serif);color:#fff;margin-bottom:4px}
.cool .clock li.off{opacity:.5;text-decoration:line-through}
.cool .clock li.end{border-color:#ffd3c9;color:#ffd3c9}
.cool .clock p{font:500 .82rem/1.5 var(--sans);color:#a59d91;margin:14px 0 0}
@media (max-width:800px){.cool{grid-template-columns:1fr}}

/* plans */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--ink);background:var(--sheet)}
.plan{padding:32px}
.plan+.plan{border-left:1px solid var(--ink);background:#fff}
.plan h3{font-size:1.6rem;margin-bottom:6px}
.plan .price{font:400 2.6rem/1 var(--serif);margin:14px 0 4px}
.plan .price small{font:500 1rem var(--sans);color:var(--ink2)}
.plan .alt{font-size:.92rem;color:var(--ink2);margin-bottom:18px}
.plan ul{list-style:none;padding:0;margin:0 0 22px}
.plan li{padding:9px 0 9px 26px;border-top:1px solid var(--rule2);position:relative}
.plan li::before{content:"§";position:absolute;left:2px;color:var(--seal);font-family:var(--serif)}
.stamp{display:inline-block;font:700 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--seal);border:1.5px solid var(--seal);padding:7px 10px;border-radius:3px;transform:rotate(-2deg)}
@media (max-width:760px){.plans{grid-template-columns:1fr}.plan+.plan{border-left:0;border-top:1px solid var(--ink)}.plan{padding:24px}}

/* ---- the Reader: parts with a contents rail */
.reader>*{min-width:0}
fieldset{min-width:0}
.reader{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.rail{position:sticky;top:20px;font-size:.92rem}
.rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.rail li a{display:block;padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink2);text-decoration:none}
.rail li a:hover{color:var(--ink);border-left-color:var(--ink3)}
.rail li a.on{color:var(--ink);border-left-color:var(--seal);font-weight:700}
.rail .rn{font-family:var(--serif);color:var(--seal);margin-right:8px}
.rail .note{margin-top:22px;padding:16px;background:var(--sheet);border:1px solid var(--rule);font-size:.84rem;color:var(--ink2)}
.progress{display:none}
@media (max-width:900px){
  .reader{grid-template-columns:1fr}
  .rail{display:none}
  .progress{display:flex;position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule);margin:0 calc(-1 * var(--gut)) 18px;padding:10px var(--gut);gap:6px;overflow-x:auto}
  .progress a{flex:0 0 auto;font:700 .78rem/1 var(--sans);padding:8px 11px;border:1px solid var(--rule);border-radius:999px;color:var(--ink2);text-decoration:none;background:var(--sheet)}
  .progress a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
}
.part{background:var(--sheet);border:1px solid var(--rule);margin:0 0 26px;padding:clamp(20px,3vw,36px);scroll-margin-top:70px}
.part>legend{float:left;width:100%;padding:0;margin:0 0 18px;font-family:var(--serif)}
.part>legend .pn{display:block;font:700 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--seal);margin-bottom:8px}
.part>legend span.t{font-size:1.7rem}
.part>legend+*{clear:both}
.q{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:8px 28px;padding:18px 0;border-top:1px solid var(--rule2)}
.q:first-of-type{border-top:0}
.q .why{font-size:.83rem;line-height:1.5;color:var(--ink3);border-left:2px solid var(--rule);padding-left:12px;align-self:start}
.q .why b{display:block;font:700 .66rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
@media (max-width:700px){.q{grid-template-columns:1fr}.q .why{order:2}}
label.lab,.lab{display:block;font-weight:700;font-size:.98rem;margin:0 0 8px}
.hint{display:block;font-weight:400;font-size:.85rem;color:var(--ink3);margin-top:2px}
input[type=text],input[type=date],input[type=number],select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #bdb3a4;border-radius:var(--r);padding:12px 13px;min-height:48px}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:2px solid var(--mark);outline-offset:0}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline>input{flex:1 1 140px;min-width:0}
.inline>select{flex:1 1 180px;min-width:0}
.money{position:relative;flex:1 1 140px;min-width:0}
.money::before{content:"$";position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink3)}
.money input{padding-left:26px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #cfc6b8;border-radius:999px;background:#fff;font-size:.92rem;cursor:pointer;line-height:1.25}
.choices label:hover{border-color:var(--ink)}
.choices input{accent-color:var(--seal);margin:0}
.choices label:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--paper)}
.dep[hidden]{display:none}
.err{color:#9a1c1c;font-weight:700;font-size:.9rem;margin-top:6px}
.alert{border:1px solid #d9a6a6;background:#fbefef;color:#7d1717;padding:14px 18px;margin:0 0 22px;border-radius:var(--r)}
.okmsg{border:1px solid #b9d0b9;background:#eef5ec;color:#1f4a28;padding:14px 18px;margin:0 0 22px;border-radius:var(--r)}
.submitbar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--paper) 30%);padding:26px 0 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* ---- term sheet */
.ts-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:22px;margin-bottom:0}
.ts-head h1{margin:0}
.ts-head .meta{color:var(--ink2);font-size:.95rem}
.dateline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:28px 0;background:var(--sheet);border:1px solid var(--rule)}
.dateline>div{padding:20px 22px;border-right:1px solid var(--rule)}
.dateline>div:last-child{border-right:0}
.dateline .k{font:700 .7rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.dateline .v{font:400 1.45rem/1.2 var(--serif);margin-top:8px}
.dateline .key{background:var(--sealbg)}
.dateline .key .v{color:var(--seal)}
@media (max-width:760px){.dateline{grid-template-columns:1fr}.dateline>div{border-right:0;border-bottom:1px solid var(--rule)}.dateline>div:last-child{border-bottom:0}}
.ts-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:36px}
@media (max-width:960px){.ts-grid{grid-template-columns:1fr}}
.clauses{counter-reset:cl;list-style:none;margin:0;padding:0}
.clause{counter-increment:cl;display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 14px;padding:20px 0;border-top:1px solid var(--rule)}
.clause::before{content:"§" counter(cl);font:400 1.15rem/1.4 var(--serif);color:var(--ink3)}
.clause .cn{font:700 .7rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.clause h3{font-size:1.2rem;margin:0 0 6px}
.clause p{margin:0 0 8px;color:var(--ink2);font-size:.96rem}
.clause .askq{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.02rem;margin-top:10px}
.clause .askq b{font-family:var(--sans);font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--seal);margin-right:8px}
.clause.watch h3 span{background:linear-gradient(transparent 14%,var(--mark) 14%,var(--mark) 90%,transparent 90%)}
.lvl{display:inline-block;font:800 .75rem/1 var(--sans);letter-spacing:.14em;padding:5px 8px;border-radius:2px}
.lvl.clear{background:var(--clearbg);color:var(--clear)}
.lvl.watch{background:var(--watchbg);color:var(--watch);border:1px solid var(--markline)}
.lvl.ask{background:var(--askbg);color:var(--ask)}
sup.fn a{font:700 .7rem/1 var(--sans);text-decoration:none;margin-left:2px}
.tally{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.tally span{font-size:.88rem;font-weight:600}
aside.side>section{background:var(--sheet);border:1px solid var(--rule);padding:22px;margin-bottom:20px}
aside.side h2{font-size:1.3rem}
table.leave{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
table.leave th,table.leave td{text-align:right;padding:8px 6px;border-bottom:1px solid var(--rule2)}
table.leave th:first-child,table.leave td:first-child{text-align:left}
table.leave thead th{font:700 .68rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--ink)}
.priceline{border-left:3px solid var(--seal);padding:12px 16px;background:var(--sealbg);font-size:.92rem;margin:18px 0}
.legal{font-size:.84rem;color:var(--ink3);border-top:1px solid var(--rule);padding-top:14px;margin-top:22px}
.linkbox{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.linkbox input{flex:1 1 260px;font-family:ui-monospace,Consolas,monospace;font-size:.85rem;min-width:0}

/* ---- compare (Apple-style aligned columns) */
.cmp-wrap{overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:0 var(--gut)}
table.cmp{width:100%;border-collapse:collapse;min-width:560px}
table.cmp th,table.cmp td{padding:16px 14px;border-bottom:1px solid var(--rule);vertical-align:top;text-align:left}
table.cmp thead th{font:400 1.25rem/1.2 var(--serif);border-bottom:2px solid var(--ink);padding-top:0}
table.cmp thead th small{display:block;font:500 .82rem/1.4 var(--sans);color:var(--ink3);margin-top:4px}
table.cmp tbody th{font:700 .72rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);width:180px}
table.cmp td.big{font:400 1.5rem/1.1 var(--serif);font-variant-numeric:tabular-nums lining-nums}
table.cmp td.best{color:var(--clear)}
.picker{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}

/* ---- shelf list */
.shelf-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.shelf-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:center}
.shelf-list h3{margin:0;font-size:1.3rem}
.shelf-list h3 a{color:var(--ink);text-decoration:none}
.shelf-list h3 a:hover{color:var(--seal)}
.shelf-list .d{font-size:.9rem;color:var(--ink2)}
.shelf-list .d b{color:var(--seal)}
@media (max-width:600px){.shelf-list li{grid-template-columns:1fr}}

/* cooling-off result */
.verdict{border:1px solid var(--ink);background:var(--sheet);padding:26px;margin:0 0 28px}
.verdict .big{font:400 clamp(1.6rem,3vw,2.2rem)/1.15 var(--serif);margin:6px 0 12px}
.verdict.likely{border-top:6px solid var(--clear)}
.verdict.partly{border-top:6px solid var(--markline)}
.verdict.no{border-top:6px solid var(--ink3)}
.verdict .dl{font:400 clamp(1.8rem,4vw,2.8rem)/1 var(--serif);color:var(--seal);margin:10px 0}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.checks{display:grid;gap:10px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.45}
.checks input{margin-top:4px;accent-color:var(--seal);width:18px;height:18px;flex:0 0 18px}
.radios{display:grid;gap:8px}
.radios label{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid #cfc6b8;border-radius:var(--r);background:#fff;cursor:pointer;line-height:1.4}
.radios label:has(input:checked){border-color:var(--ink);box-shadow:inset 3px 0 0 var(--seal)}
.radios input{margin-top:3px;accent-color:var(--seal)}

/* prose pages */
.prose{max-width:720px}
.prose h2{margin-top:1.6em}
.prose li{margin-bottom:.4em}
ol.srcs{padding-left:1.4em}
ol.srcs li{padding:8px 0;border-bottom:1px solid var(--rule2)}

/* utilities (no inline styles: the CSP forbids them) */
.mt{margin-top:14px}.mt2{margin-top:34px}.mt-s{margin-top:8px!important}
.on-dark{color:#ffb3a5}.soft{color:#c9c1b4}
.h3{font-size:1.35rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.inline-form{display:inline}

/* footer */
.foot{background:#1f1d1a;color:#c9c1b4;margin-top:0}
.foot .in{max-width:var(--w);margin:0 auto;padding:48px var(--gut) 36px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot a{color:#f2ebe0;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot h2{font:700 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8f877b;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot .stmt{font-size:.88rem;line-height:1.6}
.foot .stmt .word{font:400 1.25rem/1 var(--serif);color:#fff;display:block;margin-bottom:12px}
.foot .base{grid-column:1/-1;border-top:1px solid #3d3933;padding-top:18px;font-size:.84rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){.foot .in{grid-template-columns:1fr}}

@media print{
  .ribbon,.mast,.foot,.actions,.submitbar,.no-print,.progress,.rail{display:none!important}
  body{background:#fff;font-size:11pt}
  .page{padding:0}
  .part,aside.side>section,.dateline{border-color:#999;break-inside:avoid}
  .clause{break-inside:avoid}
  a{color:#000;text-decoration:none}
  .packet-item{break-after:page}
}

/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the dark footer, on the public pages only (the controllers opt in). The
   label and the reserved height are on the <ins>, so when tag.js (or ae-size.js) hides a slot it cannot fill, the label,
   the reserved space and the space below go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones
   (300x250). Every ad page ends with its own .page bottom padding on the paper, and the footer has no top margin, so the
   space below the slot sits on the <ins>. display stays in this file and is never !important: tag.js hides a slot with
   style.display='none'. */
.ae-slot{padding:0 var(--gut)}
.ae-slot ins.adengine{display:block;max-width:728px;min-height:110px;margin:0 auto clamp(40px,6vw,56px);text-align:center;text-decoration:none}
.ae-slot ins.adengine::before{content:"Advertisement";display:block;margin-bottom:4px;font:700 11px/16px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.ae-slot ins.adengine a{display:inline-block;vertical-align:top}
.ae-slot:has(> ins.adengine[style*="none"]){display:none}
@media (max-width:767px){.ae-slot ins.adengine{max-width:300px;min-height:270px}}
@media print{.ae-slot{display:none}}