/* Legal Rights Now: site.css (design system + shared components)
   Spec: plan/design-spec.md. Hooks and markup: plan/partials/README.md.
   Light only. Paper, graphite pencil, green pen, legal-pad yellow. */

/* ---------- 1. Fonts + tokens ---------- */
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-opsz-wght-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("../fonts/libre-franklin-wght-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#FAF9F5;--paper-2:#F1F0E9;--paper-3:#E7E5DA;--white:#FFFFFF;
  --pad:#FBF3CF;--pad-2:#F6E9AE;--pad-rule:#B9D0E2;--pad-margin:#E3A7A1;
  --marker:#F4D84E;--graphite:#2F3331;--graphite-2:#6E736F;
  --ink:#1A1D1B;--ink-2:#3C413E;--ink-3:#5B615D;
  --line:#DEDBD0;--line-2:#C9C5B6;--line-strong:#7B807A;
  --pine-800:#153A26;--pine-700:#1D4A31;--pine-600:#255C3E;--pine-500:#2F7350;
  --pine-200:#B9D4C2;--pine-100:#E3EEE6;--pine-050:#F1F6F2;
  --error:#B3261E;--error-100:#FBE9E7;--success:#1E6B45;

  --f-serif:"Newsreader","Iowan Old Style","Charter","Georgia",serif;
  --f-sans:"Libre Franklin","Franklin Gothic Medium","Arial Narrow",system-ui,sans-serif;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:136px;
  --section-y:clamp(64px,8vw,128px);
  --r-0:0;--r-1:2px;--r-2:4px;--r-3:6px;
  --sh-paper:0 1px 1px rgba(26,29,27,.06),0 10px 22px -14px rgba(26,29,27,.32);
  --sh-lift:0 1px 1px rgba(26,29,27,.05),0 16px 30px -18px rgba(26,29,27,.30);

  --max:1280px;--gut:16px;--gap:16px;
  --bleed:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));
  --hdr:64px;
  --ease-out:cubic-bezier(.22,.8,.28,1);
}
@media (min-width:600px){:root{--gut:24px;--gap:20px}}
@media (min-width:900px){:root{--gut:32px;--gap:24px;--hdr:72px}}
@media (min-width:1100px){:root{--gut:40px;--gap:28px}}
@media (min-width:1280px){:root{--gut:48px;--gap:32px}}

/* ---------- 2. Reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--f-sans);font-optical-sizing:auto;font-size:16.5px;line-height:1.62;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:17.5px}}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:520;text-wrap:balance}
h1,h2,h3,.serif{font-family:var(--f-serif);font-optical-sizing:auto}
em,i{font-style:normal;font-weight:600}
strong,b{font-weight:650;color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
hr{border:0;border-top:1px solid var(--line-2);margin:0}
[hidden]{display:none!important}
::selection{background:rgba(244,216,78,.55);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus,#255C3E);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* running-text links */
.prose a,.lk,.fine a,.src a,.cap a,.dek a,.disclaimer a,.consent a,.form-note a,.legal a,.note a,.res-list__desc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine-600);text-decoration-thickness:1.5px;text-underline-offset:.2em;transition:text-decoration-thickness .15s,color .15s}
.prose a:hover,.lk:hover,.fine a:hover,.src a:hover,.cap a:hover,.dek a:hover,.disclaimer a:hover,.consent a:hover,.form-note a:hover,.legal a:hover,.note a:hover{text-decoration-thickness:2.5px;color:var(--pine-700)}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:calc(var(--section-y) * .6)}
.section--paper2{background:var(--paper-2)}
.g12{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gap)}
@media (min-width:900px){.g12{grid-template-columns:repeat(12,minmax(0,1fr))}}
main{display:block}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--white);color:var(--ink);padding:10px 16px;border:2px solid var(--pine-600);border-radius:var(--r-2);font-weight:600;text-decoration:none;transition:top .15s}
.skip:focus{top:12px}

/* ---------- 4. Type helpers ---------- */
.t-hero{font-family:var(--f-serif);font-weight:540;font-size:clamp(34px,3.4vw + 20px,80px);line-height:1.03;letter-spacing:-.022em}
h1,.t-h1{font-weight:540;font-size:clamp(38px,3.4vw + 22px,76px);line-height:1.03;letter-spacing:-.02em;max-width:20ch}
h2,.t-h2{font-weight:520;font-size:clamp(31px,2.2vw + 21px,56px);line-height:1.07;letter-spacing:-.016em;max-width:24ch}
h3,.t-h3{font-weight:600;font-size:clamp(21px,.7vw + 17px,27px);line-height:1.2;letter-spacing:-.006em}
h4,.t-h4{font-family:var(--f-sans);font-weight:650;font-size:17.5px;line-height:1.3;color:var(--ink)}
.dek{font-family:var(--f-serif);font-weight:400;font-size:clamp(19px,.6vw + 16px,24px);line-height:1.42;color:var(--ink-2);max-width:40ch;margin:18px 0 0}
.label{font-family:var(--f-sans);font-weight:600;font-size:14px;line-height:1.3;letter-spacing:.01em;color:var(--ink-2);margin:0 0 10px}
.fine{font-size:14.5px;line-height:1.5;color:var(--ink-3);letter-spacing:.005em;margin:14px 0 0;max-width:52ch}
.src{font-size:14.5px;line-height:1.5;color:var(--ink-3);margin:8px 0 0}
.cap{font-size:14.5px;line-height:1.5;color:var(--ink-3);margin:0;padding-top:10px;max-width:46ch}
.cap::before{content:"";display:block;width:24px;height:1px;background:var(--line-2);margin-bottom:8px}
.measure{max-width:66ch}
.note-hand{font-family:var(--f-serif);font-weight:420;font-size:17px;line-height:1.4;color:var(--ink-2)}

/* ---------- 5. Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);transition:transform .35s var(--ease-out),box-shadow .2s}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header__bar{display:flex;align-items:center;gap:12px;min-height:var(--hdr)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none;margin-right:auto;min-height:44px}
.logo-mark{width:36px;height:36px;flex:none}
@media (min-width:600px){.logo-mark{width:40px;height:40px}}
.brand__name{font-family:var(--f-serif);font-weight:620;font-variation-settings:"opsz" 30;letter-spacing:-.012em;font-size:22px;line-height:1;white-space:nowrap}
@media (max-width:379px){.brand__name{font-size:19px}}
.brand__now{position:relative;display:inline-block}
.brand__ul{position:absolute;left:-2%;width:104%;bottom:-.2em;height:.32em;overflow:visible;pointer-events:none}
.brand__ul path{fill:none;stroke:var(--pine-600);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.m-on .brand__ul path{animation:lrn-pen .6s cubic-bezier(.6,.05,.3,1) .35s both}
.m-on .logo-mark .lm-hl{transform-box:fill-box;transform-origin:left center;animation:lrn-grow .4s ease-out .2s both}
.brand:hover .brand__ul path,.brand:focus-visible .brand__ul path{animation:lrn-pen .45s cubic-bezier(.6,.05,.3,1) both}
@keyframes lrn-pen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lrn-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* nav (no-JS: wraps as a row of links under the bar below 1100px) */
.site-nav{display:flex;align-items:center;gap:6px;position:relative}
.site-nav__list{list-style:none;display:flex;align-items:center;gap:2px;margin:0;padding:0}
.site-nav__list>li{position:relative}
/* the Guides panel is anchored to the nav (right edge = the CTA's right edge), not to the Guides item, so it never runs off-screen */
.site-nav__list>li.site-nav__guides{position:static}
.nav-link,.nav-guides{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;font-family:var(--f-sans);font-weight:550;font-size:15.5px;color:var(--ink);text-decoration:none;background:none;border:0;border-radius:var(--r-2)}
.nav-guides .chev{width:12px;height:12px;transition:transform .25s}
.nav-guides[aria-expanded="true"] .chev{transform:rotate(180deg)}
.ul-pen{position:absolute;left:10px;right:10px;bottom:7px;height:6px;width:calc(100% - 20px);overflow:visible;pointer-events:none}
.ul-pen path{fill:none;stroke:var(--pine-600);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s cubic-bezier(.6,.05,.3,1)}
a:hover>.ul-pen path,a:focus-visible>.ul-pen path,button:hover>.ul-pen path,[aria-current="page"]>.ul-pen path,.nav-guides[aria-expanded="true"]>.ul-pen path{stroke-dashoffset:0}
.site-header .hdr-cta{display:none}
.menu-btn{display:none}
@media (max-width:1099px){
  .site-header__bar{flex-wrap:wrap}
  .site-nav{order:3;width:100%;flex-wrap:wrap;padding:0 0 8px;margin-left:-12px}
  .site-nav__list{flex-wrap:wrap}
  .site-nav .nav-cta{margin-left:12px}
  .guides-menu{display:none!important}
  /* JS present: compact bar + Menu button */
  .js-nav .site-header__bar{flex-wrap:nowrap}
  .js-nav .site-nav{display:none}
  .js-nav .site-header .hdr-cta{display:inline-flex}
  .js-nav .menu-btn{display:inline-flex}
}
@media (max-width:559px){.js-nav .site-header .hdr-cta{display:none}}
@media (min-width:1100px){
  .site-nav{gap:10px}
  .site-nav .nav-cta{margin-left:10px}
  .menu{display:none!important}
}
.site-nav__contact{display:none}
@media (max-width:1099px){.site-nav__contact{display:block}}

/* Guides menu (1100+) */
.guides-menu{position:absolute;top:calc(100% + 6px);left:auto;right:0;z-index:60;width:660px;max-width:calc(100vw - 32px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--sh-paper);display:grid;grid-template-columns:minmax(0,1fr) 210px;overflow:hidden}
.gm-list{list-style:none;margin:0;padding:10px}
.gm-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;padding:10px 12px;border-radius:var(--r-2);text-decoration:none;color:var(--ink)}
.gm-row:hover,.gm-row:focus-visible{background:var(--paper)}
.gm-row .sk--mini{width:44px;height:44px}
.gm-row__t{display:block;font-family:var(--f-serif);font-weight:600;font-size:19px;line-height:1.2}
.gm-row__d{display:block;font-size:14.5px;line-height:1.4;color:var(--ink-3);margin-top:2px}
.gm-side{background:var(--paper-2);padding:22px 20px;display:flex;flex-direction:column;gap:14px;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.gm-side p{margin:0}

/* Menu button + mobile menu */
.menu-btn{align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 8px 0 10px;background:none;border:0;border-radius:var(--r-2);font-weight:600;font-size:15px;color:var(--ink)}
.menu-btn__icon{position:relative;width:20px;height:12px;display:inline-block}
.menu-btn__icon i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease-out),top .25s var(--ease-out)}
.menu-btn__icon i:first-child{top:1px}
.menu-btn__icon i:last-child{top:9px;right:4px}
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child{top:5px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child{top:5px;right:0;transform:rotate(-45deg)}
.menu{position:fixed;left:0;right:0;top:var(--hdr);bottom:0;z-index:49;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}
.menu__inner{padding-top:8px;padding-bottom:40px}
.menu__label{font-weight:600;font-size:14px;color:var(--ink-3);margin:16px 0 4px}
.menu__list{list-style:none;margin:0;padding:0}
.menu__list li{border-bottom:1px solid var(--line)}
.menu__guide{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 0;text-decoration:none;color:var(--ink);font-family:var(--f-serif);font-weight:540;font-size:clamp(23px,5.4vw,28px);line-height:1.15}
.menu__guide .sk--mini{width:40px;height:40px;flex:none}
.menu__plain{display:flex;align-items:center;min-height:56px;text-decoration:none;color:var(--ink);font-weight:600;font-size:18px}
.menu__cta{margin-top:24px;width:100%}
.menu__legal{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:22px;font-size:14.5px}
.menu__legal a{color:var(--ink-3);min-height:44px;display:inline-flex;align-items:center}
.menu-open{overflow:hidden}

/* ---------- 6. Buttons + links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:var(--r-2);font-family:var(--f-sans);font-weight:600;font-size:16px;line-height:1.1;letter-spacing:.005em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .12s;text-align:center}
.btn--primary{background:var(--pine-600);color:var(--white)}
.btn--primary:hover{background:var(--pine-700)}
.btn--primary:active{background:var(--pine-800);transform:scale(.98)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--line:hover{background:var(--paper-2)}
.btn--line:active{transform:scale(.98)}
.btn--sm{min-height:42px;padding:0 16px;font-size:15px}
.btn[disabled],.btn[aria-busy="true"]{opacity:.6;cursor:progress}
.btn .ar{width:18px;height:18px;flex:none;transition:transform .25s var(--ease-out)}
.btn:hover .ar,.btn:focus-visible .ar,.btn--link:hover .ar,.btn--link:focus-visible .ar{transform:translateX(4px)}
.ar path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn--link{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine-600);text-decoration-thickness:1.5px;text-underline-offset:.24em;transition:text-decoration-thickness .15s}
.btn--link:hover{text-decoration-thickness:2.5px}
.btn--link .ar{width:18px;height:18px;flex:none;transition:transform .25s var(--ease-out)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:24px}
@media (max-width:599px){.btn-row--stack .btn{width:100%}}
.spin{width:16px;height:16px;flex:none}
.spin path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;animation:lrn-spin 1s linear infinite}
@keyframes lrn-spin{0%{stroke-dashoffset:1}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}

/* ---------- 7. Section heads ---------- */
.sh{position:relative;padding-top:22px;margin-bottom:clamp(32px,4vw,56px)}
.sh::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2);transform-origin:left center}
.sh--norule{padding-top:0}.sh--norule::before{display:none}
.sh__num{display:block;font-family:var(--f-serif);font-weight:300;font-size:44px;line-height:.9;letter-spacing:-.02em;color:var(--pine-600);font-variant-numeric:lining-nums tabular-nums;margin-bottom:14px;position:relative;width:max-content}
.sh__num::after{content:"";position:absolute;left:2px;bottom:-8px;width:28px;height:2px;border-radius:2px;background:var(--pine-600);transform-origin:left center}
.sh .dek{margin-top:16px}
@media (min-width:900px){
  .sh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .sh__num{grid-column:1/span 1;font-size:clamp(48px,3vw + 26px,72px);margin:0;padding-top:.08em}
  .sh>h2,.sh>.sh__title{grid-column:2/span 8}
  .sh>.dek,.sh>.sh__aside{grid-column:2/span 7}
  .sh--split>.dek{grid-column:9/span 4;grid-row:1;align-self:end;margin:0}
  .sh--plain>h2,.sh--plain>.sh__title,.sh--plain>.dek{grid-column:1/span 9}
  .sh--split.sh--plain>h2{grid-column:1/span 7}
  .sh--split.sh--plain>.dek{grid-column:8/span 5}
}

/* ---------- 8. Sketches ---------- */
.sk{overflow:visible}
.sk path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sk .w1{stroke:var(--graphite);stroke-width:3.2}
.sk .w2{stroke:var(--graphite);stroke-width:2.2}
.sk .w3{stroke:var(--graphite);stroke-width:1.5}
.sk .rt{stroke:var(--graphite);stroke-width:2;opacity:.7}
.sk .h{stroke:var(--graphite-2);stroke-width:1.2}
.sk .g{stroke:var(--graphite-2);stroke-width:1;opacity:.8}
.sk .pen{stroke:var(--pine-600);stroke-width:3.4}
.sk .hl{stroke:var(--marker);stroke-width:20;opacity:.55;stroke-linecap:butt}
.sk--hero .w1{stroke-width:4.2}.sk--hero .w2{stroke-width:3}.sk--hero .w3{stroke-width:2}.sk--hero .rt{stroke-width:2.6}
.sk--hero .h{stroke-width:1.6}.sk--hero .g{stroke-width:1.4}.sk--hero .pen{stroke-width:5}
.sk--mini .w2{stroke-width:1.8}.sk--mini .w3{stroke-width:1.3}.sk--mini .rt{stroke-width:1.4}
.sk--clock .w2{stroke-width:1.7}.sk--clock .w3{stroke-width:1.2}
.sk--clip .w2{stroke-width:1.5}
.sk--beat .w1{stroke-width:3.4}.sk--beat .w2{stroke-width:2.4}.sk--beat .w3{stroke-width:1.7}.sk--beat .pen{stroke-width:3.6}
@media (max-width:599px){
  .sk--topic .w1{stroke-width:4.4}.sk--topic .w2{stroke-width:3.1}.sk--topic .w3{stroke-width:2.1}.sk--topic .h{stroke-width:1.6}.sk--topic .pen{stroke-width:4.6}
  .sk--beat .w1{stroke-width:4.6}.sk--beat .w2{stroke-width:3.3}.sk--beat .w3{stroke-width:2.3}.sk--beat .h{stroke-width:1.7}.sk--beat .pen{stroke-width:4.8}
  .sk--hero .w1{stroke-width:7.4}.sk--hero .w2{stroke-width:5.2}.sk--hero .w3{stroke-width:3.4}.sk--hero .rt{stroke-width:4.4}.sk--hero .h{stroke-width:2.6}.sk--hero .g{stroke-width:2.2}.sk--hero .pen{stroke-width:8}
}
.sk--topic,.sk--beat,.sk--small{width:100%;height:auto}
.sk--topic{aspect-ratio:600/450}
.sk--beat{aspect-ratio:640/440}
.sk--envelope{aspect-ratio:320/230}.sk--thanks{aspect-ratio:400/280}.sk--404{aspect-ratio:360/300}
.sk--clock{width:48px;height:48px}
.sk-move{transform-box:view-box}

/* ---------- 9. Paper objects ---------- */
.pad{position:relative;background-color:var(--pad);border-radius:var(--r-1);box-shadow:var(--sh-paper);padding:30px 22px 24px 58px;color:var(--ink-2);
  background-image:linear-gradient(var(--pad-2),var(--pad-2)),linear-gradient(90deg,transparent 40px,var(--pad-margin) 40px 41px,transparent 41px 44px,var(--pad-margin) 44px 45px,transparent 45px),repeating-linear-gradient(180deg,transparent 0 27px,var(--pad-rule) 27px 28px);
  background-size:100% 10px,100% 100%,100% 100%;background-repeat:no-repeat,no-repeat,repeat;background-position:0 0,0 0,0 12px}
@media (max-width:599px){.pad{padding-left:52px;background-image:linear-gradient(var(--pad-2),var(--pad-2)),linear-gradient(90deg,transparent 34px,var(--pad-margin) 34px 35px,transparent 35px 38px,var(--pad-margin) 38px 39px,transparent 39px),repeating-linear-gradient(180deg,transparent 0 27px,var(--pad-rule) 27px 28px)}}
.pad.is-lifted{box-shadow:var(--sh-lift)}
.pad h2,.pad h3{color:var(--ink)}
.pad p{line-height:28px}
.pad__clip{position:absolute;top:-16px;left:24px;width:22px;height:56px;z-index:2}
.pad--art{padding:16px 14px 10px 34px;background-image:linear-gradient(var(--pad-2),var(--pad-2)),linear-gradient(90deg,transparent 20px,var(--pad-margin) 20px 21px,transparent 21px 24px,var(--pad-margin) 24px 25px,transparent 25px),repeating-linear-gradient(180deg,transparent 0 23px,var(--pad-rule) 23px 24px);background-size:100% 8px,100% 100%,100% 100%}
.pad--art .sk{display:block}

/* ---------- 10. Home hero ---------- */
.hero{padding:14px 0 var(--section-y);overflow-x:clip;position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr)}
.hero__title{margin:0;max-width:26ch;position:relative;z-index:1}
.hero__note{margin:16px 0 18px;max-width:30ch;position:relative;z-index:3}
.hero__figure{margin:0 calc(-1 * var(--gut));position:relative}
.hero__cap{padding-inline:var(--gut)}
.hero__copy{margin-top:26px}
.hero__lead{font-family:var(--f-serif);font-weight:400;font-size:clamp(18.5px,.5vw + 16px,22px);line-height:1.45;color:var(--ink-2);margin:0;max-width:44ch}
.hero__toc{margin-top:36px}
@media (min-width:900px){
  .hero{padding-top:24px}
  .hero__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
  .hero__title{grid-column:1/span 11;grid-row:1}
  .hero__note{grid-column:9/-1;grid-row:2;justify-self:end;text-align:right;align-self:end;margin:30px 0 16px}
  .hero__figure{grid-column:5/-1;grid-row:3;margin:0 calc(-1 * var(--bleed)) 0 0}
  .hero__cap{padding-inline:0}
  .hero__copy{grid-column:1/span 4;grid-row:2/span 2;margin-top:32px;padding-right:8px}
}
.plate{position:relative;aspect-ratio:4/3;background:var(--white);overflow:hidden}
@media (min-width:900px){.plate{aspect-ratio:16/9}}
@media (min-width:1280px){.plate{aspect-ratio:16/8.2}}
.plate__layer{position:absolute;left:0;right:0;top:-4%;height:108%}
.plate__photo,.plate__photo img{position:absolute;inset:0;width:100%;height:100%}
.plate__photo img{object-fit:cover;object-position:50% 50%}
.plate .sk--hero{position:absolute;inset:0;width:100%;height:100%}
/* the finished "after wash" look (static, no JS, reduced motion) */
.sk--hero [data-k="room"],.sk--hero [data-k="person"],.sk--hero [data-k="table"]{opacity:.16}
.sk--hero [data-k="guides"],.sk--hero [data-k="shade"]{opacity:0}
.plate.is-sketching .sk--hero g{opacity:1}
.shade-sweep{fill:none;stroke:var(--graphite-2);stroke-width:30;stroke-linecap:round;stroke-linejoin:round;opacity:.28}

/* dot-leader contents list */
.toc-lead__label{font-weight:600;font-size:14px;color:var(--ink-3);margin:0 0 6px}
.toc-lead__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.toc-lead__list li{border-bottom:1px solid var(--line)}
.toc-lead__list a{display:flex;align-items:baseline;gap:10px;min-height:46px;padding:11px 0;text-decoration:none;color:var(--ink)}
.toc-lead__n{font-family:var(--f-serif);font-weight:500;font-size:15px;color:var(--pine-600);font-variant-numeric:lining-nums tabular-nums;width:22px;flex:none}
.toc-lead__t{font-weight:550;font-size:15.5px;line-height:1.3}
.toc-lead__dots{flex:1 1 auto;min-width:16px;border-bottom:1px dotted var(--line-strong);transform:translateY(-4px);opacity:.7}
.toc-lead__list .ar{width:16px;height:16px;flex:none;align-self:center;color:var(--ink-3);transition:transform .25s var(--ease-out),color .2s}
.toc-lead__list a:hover .ar,.toc-lead__list a:focus-visible .ar{transform:translateX(4px);color:var(--pine-600)}
.toc-lead__list a:hover .toc-lead__t{text-decoration:underline;text-decoration-color:var(--pine-600);text-underline-offset:.2em}
.toc-lead__list a[aria-current="true"] .toc-lead__t{color:var(--pine-700);font-weight:650}

/* ---------- 11. Marks (runtime pen marks; spec 12.6) ---------- */
.mk{position:relative;z-index:1;white-space:nowrap}
.mk[data-mark="circle"]{margin-inline:.22em}
/* long highlights may wrap (one marker stroke per line); never clip a phrase at phone width */
.mk[data-mark="highlight"]{white-space:normal}
.mk--u{text-decoration:underline;text-decoration-color:var(--pine-600);text-decoration-thickness:2px;text-underline-offset:.2em}
.mk--hl{background:linear-gradient(transparent 58%,rgba(244,216,78,.55) 58% 92%,transparent 92%)}
.js-marks .mk--u{text-decoration:none}
.js-marks .mk--hl{background:none}
.mk-host{position:relative}
.mk-layer{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.mk-layer--under{z-index:0}
.mk-layer path{fill:none;stroke:var(--pine-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-layer .mk-hl{stroke:var(--marker);opacity:.55;stroke-linecap:butt}
.mk-layer .mk-thin{stroke-width:2}

/* ---------- 12. Guides section (home): topic rows + sticky pad ---------- */
.topic-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.topic-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44%;column-gap:16px;padding:28px 0 32px;border-bottom:1px solid var(--line)}
.topic-row__num{grid-column:1/-1;font-family:var(--f-serif);font-weight:300;font-size:44px;line-height:.9;color:var(--pine-600);font-variant-numeric:lining-nums tabular-nums;position:relative;width:max-content;margin-bottom:12px;transition:transform .3s var(--ease-out)}
.topic-row__body{grid-column:1/-1}
.topic-row__title{font-weight:520;font-size:clamp(26px,1.2vw + 20px,36px);line-height:1.12;letter-spacing:-.012em;max-width:22ch}
.topic-row__desc{font-family:var(--f-serif);font-size:19px;line-height:1.45;color:var(--ink-2);margin:12px 0 4px;max-width:46ch}
.topic-row__pad{grid-column:2;grid-row:1;justify-self:end;width:100%;max-width:220px;transform:rotate(1.5deg);align-self:start;margin-bottom:18px}
.topic-row .note{margin-top:14px}
.topic-row__num,.topic-row__pad{grid-row:1}
.topic-row__num{align-self:start}
.topic-row__num{grid-column:1}
@media (min-width:600px){.topic-row{grid-template-columns:minmax(0,1fr) 240px}.topic-row__pad{max-width:240px}}
@media (min-width:900px){
  .topic-row{grid-template-columns:96px minmax(0,1fr) 300px;column-gap:var(--gap);padding:40px 0}
  .topic-row__num{grid-column:1;grid-row:1;font-size:56px;margin:0}
  .topic-row__body{grid-column:2;grid-row:1}
  .topic-row__pad{grid-column:3;grid-row:1;max-width:300px;transform:rotate(-1.2deg)}
  .topic-row:nth-child(even) .topic-row__pad{transform:rotate(1.4deg)}
  .topic-row:hover .topic-row__num{transform:translateX(6px)}
  .guides__grid.has-sticky{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--gap) * 2)}
  .has-sticky .topic-row{grid-template-columns:96px minmax(0,1fr)}
  .has-sticky .topic-row__pad{display:none}
}
@media (min-width:1100px){.has-sticky .topic-row{min-height:44vh;align-content:center}}
.guides__aside{display:none}
@media (min-width:900px){.has-sticky .guides__aside{display:block;position:relative}}
.pad--sticky{position:sticky;top:calc(50vh - 190px);padding:22px 18px 14px 50px;transform:rotate(-2deg)}
.pad--sticky .pad__faces{position:relative;aspect-ratio:600/450}
.pad__face{position:absolute;inset:0}
.pad__face .sk{width:100%;height:100%}
.pad__face:not(.is-active):not(.is-leaving){opacity:0;visibility:hidden}
.pad__caption{font-family:var(--f-serif);font-size:16px;line-height:28px;color:var(--ink-2);margin:6px 0 0;min-height:28px}

/* ---------- 13. Steps, ticks ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:18px;align-content:start;padding-bottom:34px}
.step:last-child{padding-bottom:0}
.step__num{position:relative;grid-row:1/span 3;width:52px;height:52px;display:grid;place-items:center;font-family:var(--f-serif);font-weight:500;font-size:30px;line-height:1;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.step__ring{position:absolute;left:-6px;top:-6px;width:64px;height:64px;overflow:visible;pointer-events:none}
.step__ring path,.step__arrow path{fill:none;stroke:var(--pine-600);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.step__arrow{position:absolute;left:18px;top:66px;width:20px;height:calc(100% - 76px);min-height:20px;overflow:visible;pointer-events:none}
.step__title{font-family:var(--f-serif);font-weight:600;font-size:clamp(21px,.7vw + 17px,26px);line-height:1.2;padding-top:10px;margin:0 0 8px}
.step p{margin:0;max-width:52ch}
@media (min-width:900px){
  .steps--row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
  .steps--row .step{grid-template-columns:minmax(0,1fr);padding-bottom:0;padding-right:8px}
  .steps--row .step__num{grid-row:auto;margin-bottom:22px}
  .steps--row .step__title{padding-top:0}
  .steps--row .step__arrow{left:72px;top:14px;width:calc(100% - 88px);height:24px;min-height:0}
}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:6px 0 6px 38px;line-height:1.5}
.ticks li+li{margin-top:4px}
.ticks__box{position:absolute;left:0;top:7px;width:24px;height:24px;overflow:visible}
.ticks__box .bx{fill:none;stroke:var(--graphite);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ticks__box .tk{fill:none;stroke:var(--pine-600);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html:not(.js-marks) .ticks li::before{content:"";position:absolute;left:0;top:7px;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 4.1c5.6-.4 11.6-.5 17.4-.2M20.4 3.6c.3 5.6.2 11.2-.1 16.9M20.6 20.3c-5.8.3-11.6.4-17.2.1M3.6 20.6c-.4-5.4-.5-11-.2-16.8' fill='none' stroke='%232F3331' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M6.5 12.4l3.6 3.9 8.4-10' fill='none' stroke='%23255C3E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}
@media (min-width:900px){.ticks--2col{columns:2;column-gap:var(--gap)}.ticks--2col li{break-inside:avoid}}
.ticks--facts{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:22px}
.ticks--facts li{font-weight:550;color:var(--ink);font-size:15.5px}
.ticks--facts li+li{margin-top:0}

/* ---------- 14. Facts band (home 03) + ruler ---------- */
.band-pad{position:relative;background-color:var(--pad);border-radius:var(--r-1);padding:clamp(36px,5vw,72px) clamp(18px,3vw,48px) clamp(36px,5vw,64px) clamp(52px,6vw,96px);
  background-image:linear-gradient(var(--pad-2),var(--pad-2)),linear-gradient(90deg,transparent calc(clamp(52px,6vw,96px) - 18px),var(--pad-margin) 0 calc(clamp(52px,6vw,96px) - 17px),transparent 0 calc(clamp(52px,6vw,96px) - 14px),var(--pad-margin) 0 calc(clamp(52px,6vw,96px) - 13px),transparent 0),repeating-linear-gradient(180deg,transparent 0 27px,var(--pad-rule) 27px 28px);
  background-size:100% 12px,100% 100%,100% 100%;background-repeat:no-repeat,no-repeat,repeat;background-position:0 0,0 0,0 14px}
@media (max-width:899px){.band-wrap{padding-inline:0}.band-pad{border-radius:0}}
.band-pad .sh::before{background:rgba(26,29,27,.18)}
.ruler{position:relative;margin:8px 0 46px;padding-top:56px}
.ruler__svg{display:block;width:100%;height:56px;overflow:visible}
.ruler__svg path{fill:none;stroke:var(--graphite);stroke-linecap:round;stroke-linejoin:round}
.ruler__svg .r-line{stroke-width:2.2}
.ruler__svg .r-tick{stroke-width:1.4}
.ruler__svg .r-ring{stroke:var(--pine-600);stroke-width:2.4}
.ruler__scale,.ruler__marks{list-style:none;margin:0;padding:0}
.ruler__scale li{position:absolute;bottom:-26px;transform:translateX(-50%);font-size:14px;color:var(--ink-3);white-space:nowrap}
.ruler__scale li:first-child{transform:none}
.ruler__scale li:last-child{transform:translateX(-100%)}
.ruler__marks li{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap}
.ruler__marks li.is-left{transform:translateX(-12%)}
.ruler__marks li.is-right{transform:translateX(-88%)}
.ruler__fig{display:block;font-family:var(--f-serif);font-weight:560;font-size:clamp(20px,1.2vw + 14px,32px);line-height:1;color:var(--pine-600);letter-spacing:-.01em;font-variant-numeric:lining-nums}
.ruler__what{display:block;font-size:13.5px;line-height:1.3;color:var(--ink-2);margin-top:4px}
@media (max-width:599px){.ruler__what{display:none}.ruler__marks li:nth-child(2) .ruler__fig{transform:translateY(-2px)}}
.ruler{padding-top:64px}
.ruler__ring{position:absolute;top:79px;width:44px;height:30px;margin-left:-22px;pointer-events:none}
.ruler__ring svg{width:100%;height:100%;overflow:visible}
.ruler__ring path{fill:none;stroke:var(--pine-600);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ruler__marks li.is-left{transform:translateX(-22%)}
.ruler__marks li.is-right{transform:translateX(-100%)}
@media (max-width:599px){.ruler__marks li:not(.is-up){top:30px}.ruler__ring{width:36px;margin-left:-18px}.ruler__ring[style*="left:100%"]{margin-left:-25px}}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:26px var(--gap)}
@media (min-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px calc(var(--gap) * 2)}}
.fact{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:10px;align-items:start}
.fact__n{font-family:var(--f-serif);font-weight:400;font-size:32px;line-height:1;color:var(--pine-600);font-variant-numeric:lining-nums tabular-nums}
.fact p{margin:0;color:var(--ink);line-height:28px}
.fact .src{margin-top:4px;line-height:1.5}
.band-note{margin-top:34px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.band-note .note-hand{color:var(--ink)}

/* ---------- 15. Splits + photos ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:32px var(--gap);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:repeat(12,minmax(0,1fr))}
  .split__media{grid-column:1/span 6}
  .split__text{grid-column:8/span 5}
  .split--rev .split__media{grid-column:7/span 6;grid-row:1}
  .split--rev .split__text{grid-column:1/span 5;grid-row:1}
}
.photo{position:relative;overflow:hidden;background:var(--paper-2);margin:0}
.photo>picture,.photo>img,.photo picture img{display:block;width:100%;height:100%;object-fit:cover}
.photo--43{aspect-ratio:4/3}.photo--45{aspect-ratio:4/3}.photo--219{aspect-ratio:21/9}
@media (min-width:900px){.photo--45{aspect-ratio:4/5}}
@media (max-width:599px){.photo--219{aspect-ratio:16/10}}
.photo--para picture,.photo--para>img{position:absolute;left:0;right:0;top:-7%;height:114%}
.photo--para picture img{height:100%}
.fig{margin:0}
@media (max-width:899px){.fig--bleed{margin-inline:calc(-1 * var(--gut))}.fig--bleed .cap{padding-inline:var(--gut)}}

/* ---------- 16. Notes, pull quotes ---------- */
.note{position:relative;font-family:var(--f-serif);font-weight:420;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:30ch;padding-left:20px;margin:12px 0 0}
.note::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:6px;border:2px solid var(--pine-600);border-right:0;border-radius:2px 0 0 2px;opacity:.9}
.js-marks .note[data-mark="bracket"]::before{display:none}
.note__mk{position:absolute;left:-2px;top:0;width:10px;height:100%;overflow:visible}
.note__mk path{fill:none;stroke:var(--pine-600);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pq{position:relative;margin:0;padding-left:30px;max-width:34ch}
.pq blockquote{margin:0;font-family:var(--f-serif);font-weight:420;font-size:clamp(26px,1.4vw + 20px,38px);line-height:1.25;color:var(--ink)}
.pq figcaption{font-size:14.5px;color:var(--ink-3);margin-top:12px}

/* ---------- 17. Resource list ---------- */
.res-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
@media (min-width:900px){.res-list--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}}
.res-list>li{border-bottom:1px solid var(--line)}
.res-list__a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 22px;column-gap:12px;padding:18px 10px 18px 0;text-decoration:none;color:var(--ink);transition:background-color .15s,padding .2s}
.res-list__a:hover,.res-list__a:focus-visible{background:var(--paper-2);padding-left:10px}
.res-list__pub{display:block;font-weight:600;font-size:14px;color:var(--ink-3);margin-bottom:3px}
.res-list__t{display:block;font-family:var(--f-serif);font-weight:560;font-size:20px;line-height:1.25}
.res-list__a:hover .res-list__t{text-decoration:underline;text-decoration-color:var(--pine-600);text-decoration-thickness:1.5px;text-underline-offset:.18em}
.res-list__desc{display:block;font-size:15.5px;line-height:1.5;color:var(--ink-2);margin-top:4px}
.res-list__dom{display:block;font-size:14px;color:var(--ink-3);margin-top:4px}
.res-list__a .ar{width:18px;height:18px;align-self:center;color:var(--ink-3);transition:transform .2s var(--ease-out),color .2s}
.res-list__a:hover .ar,.res-list__a:focus-visible .ar{transform:translate(2px,-2px);color:var(--pine-600)}

/* ---------- 18. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;display:block;list-style:none;cursor:pointer;padding:20px 48px 20px 0;font-family:var(--f-serif);font-weight:560;font-size:20px;line-height:1.3;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--pine-700)}
.faq__plus{position:absolute;right:6px;top:50%;width:18px;height:18px;margin-top:-9px;overflow:visible}
.faq__plus path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.faq__plus .v{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease-out)}
.faq details[open] .faq__plus .v{transform:scaleY(0)}
.faq__a{padding:0 0 22px;max-width:62ch}
.faq__a p:last-child{margin-bottom:0}
.faq__a-wrap{overflow:hidden}
.faq-group+.faq-group{margin-top:48px}
.faq-group__h{font-family:var(--f-sans);font-weight:650;font-size:17.5px;color:var(--ink);margin:0 0 10px}
.faq [hidden],.faq-group[hidden]{display:none!important}
.tab-filter{display:flex;flex-wrap:wrap;gap:2px 6px;margin:0 0 28px;padding:0;border:0}
.tab-filter input{position:absolute;opacity:0;width:1px;height:1px}
.tab-filter label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-weight:600;font-size:15px;color:var(--ink-2);cursor:pointer}
.tab-filter label .ul-pen{left:8px;right:8px;width:calc(100% - 16px)}
.tab-filter input:checked+label{color:var(--ink)}
.tab-filter input:checked+label .ul-pen path{stroke-dashoffset:0}
.tab-filter input:focus-visible+label{outline:3px solid var(--pine-600);outline-offset:2px;border-radius:var(--r-2)}

/* ---------- 19. CTA block ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1fr);gap:28px var(--gap);align-items:center}
.cta__pad{transform:rotate(-1.5deg);padding-top:40px;padding-bottom:34px}
.cta__pad h2{font-size:clamp(28px,1.8vw + 20px,46px);max-width:18ch}
.cta__pad p{margin:14px 0 0;max-width:46ch;color:var(--ink-2)}
.cta__pad .btn-row{margin-top:26px}
.cta__pad .fine{color:var(--ink-2)}
.cta__note{max-width:30ch;padding-left:4px}
@media (min-width:900px){
  .cta{grid-template-columns:repeat(12,minmax(0,1fr))}
  .cta__pad{grid-column:1/span 7}
  .cta__note{grid-column:8/span 5;padding-left:24px}
}

/* ---------- 20. Page head, crumbs ---------- */
.page-head{padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--line);position:relative}
.page-head__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px var(--gap);align-items:end}
.page-head .label{margin-bottom:14px}
.page-head__photo{display:none}
@media (min-width:900px){
  .page-head__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .page-head__text{grid-column:1/span 7}
  .page-head__aside{grid-column:9/span 4}
}
@media (min-width:1100px){.page-head__photo{display:block;grid-column:8/-1;margin-right:calc(-1 * var(--bleed))}}
.page-head__photo .note{position:absolute;left:-12px;bottom:-56px;background:var(--paper);padding:6px 10px 6px 26px}
.page-head__photo .note::before{left:8px}
.crumbs{font-size:14.5px;color:var(--ink-3);margin:0 0 18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}
.crumbs a{color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.2em}
.crumbs a:hover{color:var(--ink);text-decoration-color:var(--pine-600)}
.crumbs [aria-current]{color:var(--ink-2)}

/* ---------- 21. Forms ---------- */
.review{padding-top:clamp(36px,5vw,72px)}
.review__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px var(--gap);align-items:start}
@media (min-width:900px){
  .review__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .review__main{grid-column:1/span 7}
  .review__aside{grid-column:9/span 4;padding-top:18px}
}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--sh-paper);padding:24px 18px}
@media (min-width:600px){.form-card{padding:28px 26px}}
@media (min-width:900px){.form-card{padding:36px 34px}}
.form-card__h{font-size:clamp(26px,1.2vw + 20px,34px);margin:0}
.form-note{font-size:14.5px;color:var(--ink-3);margin:8px 0 0}
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:22px var(--gap);margin-top:26px}
@media (min-width:600px){.form .row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gap)}}
@media (min-width:600px) and (max-width:899px),(min-width:1100px){.form .row-2--wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px var(--gap)}}
.form .row-2,.form .row-2--wide{display:grid;gap:22px var(--gap)}
.field{display:flex;flex-direction:column;min-width:0}
.field__label,.fieldset__legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-weight:600;font-size:15.5px;line-height:1.35;color:var(--ink);margin:0 0 8px;padding:0}
.field__hint{font-weight:450;font-size:14px;color:var(--ink-3)}
.field__req{font-weight:600;font-size:14px;color:var(--pine-700)}
.field__help{font-size:14.5px;line-height:1.5;color:var(--ink-3);margin:8px 0 0}
.input,.select,.textarea{display:block;width:100%;min-height:52px;padding:0 14px;background:var(--white);border:1.5px solid var(--line-strong);border-radius:var(--r-2);font-size:16px;line-height:1.4;color:var(--ink);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.textarea{padding:12px 14px;min-height:160px;resize:vertical;line-height:1.55}
.select{padding-right:42px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.2 4.6c1.6 1.7 3 3.3 4.7 5 1.7-1.8 3.2-3.4 4.9-5.2' fill='none' stroke='%231A1D1B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center/14px 14px;cursor:pointer}
.input::placeholder,.textarea::placeholder{color:#767C77;opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-2)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--pine-600)}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--error)}
.field__error{display:flex;gap:6px;align-items:flex-start;font-size:14.5px;font-weight:550;line-height:1.45;color:var(--error);margin:8px 0 0}
.field__error svg{width:14px;height:14px;flex:none;margin-top:3px}
.field__error svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.field__live{font-size:14.5px;font-weight:550;color:var(--pine-700);margin:8px 0 0}
.counter-row{display:flex;justify-content:space-between;gap:4px 16px;align-items:flex-start}
@media (max-width:599px){.counter-row{flex-direction:column;align-items:stretch}.counter-row .counter{text-align:right;margin-top:2px}}
.counter{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;margin:8px 0 0;flex:none}
.counter.is-near{color:var(--ink);font-weight:700}
.counter.is-max{color:var(--error);font-weight:700}
fieldset.fieldset{border:0;margin:0;padding:0;min-width:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:360px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice label{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border:1.5px solid var(--line-strong);border-radius:var(--r-2);background:var(--white);font-weight:600;cursor:pointer;transition:background-color .15s,border-color .15s}
.choice label:hover{border-color:var(--ink-2)}
.choice__tk{width:18px;height:18px;flex:none}
.choice__tk path{fill:none;stroke:var(--pine-600);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .25s ease-out}
.choice input:checked+label{background:var(--pine-100);border-color:var(--pine-600)}
.choice input:checked+label .choice__tk path{stroke-dashoffset:0}
.choice input:focus-visible+label{outline:3px solid var(--pine-600);outline-offset:3px}
.has-error .choice label{border-color:var(--error)}
.consent{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-3);padding:18px 18px 16px}
.consent__h{float:left;width:100%;padding:0;font-family:var(--f-sans);font-weight:650;font-size:16.5px;color:var(--ink);margin:0}
.consent__h+*{clear:both}
.consent__intro{font-size:14.5px;color:var(--ink-3);margin:4px 0 14px}
.cb{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:8px 0;cursor:pointer}
.cb+.cb{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.cb input{position:absolute;left:0;top:8px;width:22px;height:22px;margin:0;opacity:0;cursor:pointer}
.cbox{position:relative;width:22px;height:22px;margin-top:1px;border:1.5px solid var(--line-strong);border-radius:var(--r-1);background:var(--white);transition:background-color .15s,border-color .15s}
.cbox svg{position:absolute;inset:2px;width:15px;height:15px;overflow:visible}
.cbox path{fill:none;stroke:var(--white);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .25s ease-out}
.cb input:checked+.cbox{background:var(--pine-600);border-color:var(--pine-600)}
.cb input:checked+.cbox path{stroke-dashoffset:0}
.cb input:focus-visible+.cbox{outline:3px solid var(--pine-600);outline-offset:3px}
.cb__text{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.consent__after{font-size:14px;color:var(--ink-3);margin:12px 0 0}
.form__submit{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.form__submit .btn{min-width:220px}
@media (max-width:599px){.form__submit .btn{width:100%}}
.form__submit .fine{margin:0}
.form-status{font-size:15px;line-height:1.5;color:var(--error);font-weight:550;margin:0}
.form-status a{color:var(--error)}
.error-summary{background:var(--error-100);border-left:3px solid var(--error);border-radius:0 var(--r-2) var(--r-2) 0;padding:16px 18px;margin-top:22px}
.error-summary:focus{outline:3px solid var(--error);outline-offset:3px}
.error-summary__h{font-family:var(--f-sans);font-weight:700;font-size:16.5px;color:var(--ink);margin:0 0 6px}
.error-summary ul{margin:0;padding-left:20px}
.error-summary a{color:var(--error);font-weight:550;text-decoration:underline;text-underline-offset:.18em}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.aside-block+.aside-block{margin-top:32px}
.aside-pad{transform:rotate(-1deg);padding-top:34px}
.aside-pad h2{font-size:22px;line-height:1.25;font-weight:600;margin:0 0 6px}
.aside-pad ul{margin:0;padding-left:18px}
.aside-pad li{line-height:28px}
.aside-pad p{margin:10px 0 0}
.plain-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.plain-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.plain-list strong{display:block;font-weight:650;color:var(--ink)}
.aside-h{font-family:var(--f-serif);font-weight:600;font-size:22px;line-height:1.25;margin:0 0 12px}

/* ---------- 22. Pinned story (case-review #what-happens) ---------- */
.story__steps{list-style:none;margin:0;padding:0;display:grid;gap:40px}
.story__step{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.story__fig{background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);padding:12px}
.story__num{display:inline-grid;place-items:center;position:relative;width:44px;height:44px;font-family:var(--f-serif);font-weight:500;font-size:24px;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;margin-bottom:6px}
.story__num .step__ring{left:-6px;top:-6px;width:56px;height:56px}
@media (max-width:899px){.story__num{margin-bottom:12px}}
.story__text h3{font-size:clamp(21px,.7vw + 17px,26px);margin:0 0 8px}
.story__text p{margin:0;max-width:48ch}
.story__stage{display:none}
@media (min-width:600px) and (max-width:899px){.story__step{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:center}}
@media (min-width:900px){
  .story__step{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center}
  .story.is-pinned .story__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;min-height:min(640px,calc(100vh - 120px))}
  .story.is-pinned .story__steps{grid-column:1/span 5;gap:22px;position:relative;padding-left:28px}
  .story.is-pinned .story__step{grid-template-columns:minmax(0,1fr)}
  .story.is-pinned .story__fig{display:none}
  .story.is-pinned .story__text{transition:color .3s}
  .story.is-pinned .story__text h3{font-size:22px;color:var(--ink-3);transition:color .3s}
  .story.is-pinned .story__text p{font-size:16px;color:var(--ink-3);transition:color .3s}
  .story.is-pinned .story__step.is-active h3{color:var(--ink)}
  .story.is-pinned .story__step.is-active p{color:var(--ink-2)}
  .story.is-pinned .story__stage{display:block;grid-column:6/-1;position:relative;aspect-ratio:16/11;background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);padding:18px}
  .story__stage .sk--beat{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px)}
  .story__progress{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
  .story__progress i{position:absolute;inset:0;background:var(--pine-600);border-radius:2px;transform-origin:top center;transform:scaleY(0)}
}
.story__more{display:grid;grid-template-columns:minmax(0,1fr);gap:28px var(--gap);margin-top:clamp(48px,6vw,88px)}
@media (min-width:900px){.story__more{grid-template-columns:repeat(2,minmax(0,1fr))}}
.story__more h3{font-size:22px;margin:0 0 8px}
.story__more p{margin:0;max-width:52ch}

/* ---------- 23. Guide layout (builders: see README) ---------- */
.ghero{padding:clamp(20px,3vw,40px) 0 clamp(56px,7vw,104px);overflow-x:clip}
.ghero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px var(--gap)}
.ghero__meta{font-size:14.5px;color:var(--ink-3);margin:18px 0 0;max-width:60ch}
.ghero__media{position:relative;margin:8px calc(-1 * var(--gut)) 34px}
.ghero__media .photo{aspect-ratio:4/3}
.ghero__pad{position:absolute;right:var(--gut);bottom:-34px;width:58%;max-width:330px;transform:rotate(2deg)}
@media (min-width:900px){
  .ghero__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
  .ghero__text{grid-column:1/span 7;padding-bottom:12px}
  .ghero__media{grid-column:8/-1;margin:0 calc(-1 * var(--bleed)) 0 0}
  .ghero__media .photo{aspect-ratio:4/5}
  .ghero__pad{right:auto;left:-18%;bottom:-40px;width:66%;max-width:360px;transform:rotate(-2.5deg)}
}
.general-note{font-size:14.5px;color:var(--ink-3);padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0}
.doc{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--gap)}
@media (min-width:900px){
  .doc{grid-template-columns:minmax(0,7fr) minmax(24px,1fr) minmax(0,4fr)}
  .doc__main{grid-column:1}
  .doc__side{grid-column:3;grid-row:1}
}
.doc__main>section{padding-top:clamp(48px,6vw,88px)}
.doc__main>section:first-child{padding-top:0}
.doc__main .sh{margin-bottom:28px}
@media (min-width:900px){
  .doc__main .sh{display:block}
  .doc__main .sh__num{position:absolute;left:-1px;top:22px;font-size:44px}
  .doc__main .sh{padding-left:84px}
  .doc__main .sh::before{left:0}
}
.doc__main h3{margin:28px 0 10px}
.doc__main p,.doc__main li{max-width:66ch}
.side-sticky{position:sticky;top:calc(var(--hdr) + 24px)}
.toc{font-size:15px}
.toc__label{font-weight:600;font-size:14px;color:var(--ink-3);margin:0 0 6px}
.toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:flex;align-items:baseline;gap:10px;padding:9px 0;min-height:44px;text-decoration:none;color:var(--ink-2);line-height:1.35}
.toc a span:first-child{font-family:var(--f-serif);color:var(--pine-600);width:20px;flex:none;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:650}
.toc-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 8px}
.toc-details>summary{min-height:52px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
.toc-details>summary::-webkit-details-marker{display:none}
.toc-details>summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:400;color:var(--ink-2)}
.toc-details[open]>summary::after{content:"\2013"}
.toc-details .toc ol{border-top:0}
@media (min-width:900px){.toc-details{display:none}}
@media (max-width:899px){.doc__side .toc{display:none}}
.para{position:relative}
@media (min-width:1100px){
  .doc--notes .para{display:grid;grid-template-columns:minmax(0,1fr)}
  .doc--notes .para>.note{position:absolute;left:calc(100% + 13% + var(--gap));width:min(30ch,36%);top:4px;margin:0}
}
.signs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.signs li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line)}
.signs li::before{content:"";position:absolute;left:4px;top:24px;width:14px;height:2px;border-radius:2px;background:var(--pine-600);transform:rotate(-4deg)}
.deadlines{display:grid;gap:0;margin-top:12px}
.deadline{position:relative;max-width:560px;padding-top:40px}
.deadline+.deadline{margin-top:-12px}
.deadline:nth-child(3n+1){transform:rotate(-1.5deg)}
.deadline:nth-child(3n+2){transform:rotate(.8deg);margin-left:clamp(0px,4vw,48px)}
.deadline:nth-child(3n){transform:rotate(-.6deg)}
.deadline .sk--clock{position:absolute;right:16px;top:16px;width:44px;height:44px}
.deadline__label{font-weight:600;font-size:14px;color:var(--ink-2);margin:0;line-height:28px}
.deadline__fig{display:inline-block;position:relative;font-family:var(--f-serif);font-weight:560;font-size:clamp(40px,2.4vw + 28px,64px);line-height:1;color:var(--pine-600);letter-spacing:-.02em;font-variant-numeric:lining-nums;margin:2px 0 10px}
.deadline p{color:var(--ink);margin:0}
.deadline .src{line-height:1.5;margin-top:8px}
.deadline__state{font-size:14.5px;color:var(--ink-2);margin-top:8px!important}
.photo-band{margin-top:clamp(48px,6vw,88px)}
.topic-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px var(--gap)}
@media (min-width:600px){.topic-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.topic-card{position:relative;display:block;height:100%;min-height:150px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-3);padding:22px 96px 22px 20px;text-decoration:none;color:var(--ink);transition:border-color .2s}
.topic-card:hover,.topic-card:focus-visible{border-color:var(--line-strong)}
.topic-card__tab{position:absolute;left:14px;top:-14px;height:26px;padding:0 10px;display:inline-flex;align-items:center;background:var(--paper-2);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-1) var(--r-1) 0 0;font-family:var(--f-serif);font-size:14.5px;color:var(--pine-600);font-variant-numeric:tabular-nums}
.topic-card__t{display:block;font-family:var(--f-serif);font-weight:600;font-size:21px;line-height:1.2}
.topic-card__d{display:block;font-size:15px;line-height:1.45;color:var(--ink-3);margin-top:6px}
.topic-card .sk--mini{position:absolute;right:16px;bottom:16px;width:64px;height:64px}

/* ---------- 24. Legal pages ---------- */
.legal-head{padding:clamp(24px,4vw,48px) 0 clamp(28px,4vw,48px)}
.legal-head h1{border-top:2px solid var(--ink);padding-top:22px;max-width:22ch}
.legal-head .eff{font-size:14.5px;color:var(--ink-3);margin:14px 0 0}
.legal{font-size:16.5px;line-height:1.72;color:var(--ink-2);max-width:70ch}
.legal h2{font-size:clamp(25px,1vw + 20px,32px);line-height:1.2;margin:48px 0 14px;max-width:none}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:20px;margin:28px 0 8px}
.legal ul,.legal ol{padding-left:22px;margin:0 0 1em}
.legal li{margin:0 0 .4em}
.legal strong{color:var(--ink)}
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:51;pointer-events:none}
.progress i{position:absolute;inset:0;background:var(--pine-600);transform-origin:left center;transform:scaleX(0)}

/* ---------- 25. Disclaimer + footer ---------- */
.disclaimer{border:1px solid var(--line-2);border-radius:var(--r-1);padding:18px 20px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.disclaimer p{margin:0}
.disclaimer p+p{margin-top:8px}
.disclaimer--full{font-size:16px;line-height:1.65;padding:24px 26px}
.disclaimer--full h2{font-size:22px;margin:0 0 10px}
.site-footer{background:var(--paper-2);border-top:2px solid var(--ink);padding:40px 0 24px;font-size:15px;color:var(--ink-2);margin-top:0}
@media (min-width:600px){.site-footer{padding:64px 0 32px}}
.footer__top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--gap)}
.footer__brand{grid-column:1/-1}
.footer__brand .logo-mark{width:46px;height:46px}
.footer__brand .brand__name{font-size:25px}
.footer__tag{font-family:var(--f-serif);font-size:18px;line-height:1.45;color:var(--ink-2);margin:16px 0 4px;max-width:30ch}
.footer__col h2{font-family:var(--f-sans);font-weight:650;font-size:15px;line-height:1.3;color:var(--ink);margin:0 0 8px}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0;color:var(--ink-2);text-decoration:none;font-size:15px;line-height:1.35}
.footer__col a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pine-600);text-underline-offset:.2em}
.footer__col--last{grid-column:1/-1}
@media (min-width:600px){.footer__col--last{grid-column:auto}.footer__top{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.footer__top{grid-template-columns:4fr 3fr 2fr 3fr}.footer__brand{grid-column:auto}}
.footer__disc{margin-top:40px}
.footer__bottom{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line-2);font-size:14px;line-height:1.5;color:var(--ink-3)}
.footer__bottom address{font-style:normal}
.footer__bottom a{color:var(--ink-3)}
.footer__bottom a:hover{color:var(--ink)}

/* ---------- 25b. Page-specific bits (home + case review) ---------- */
.how__close{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--line-2)}
.how__close .note-hand{margin:0;color:var(--ink);font-size:19px;max-width:44ch}
.how__close .btn-row{margin:0;align-items:center}
.faq-teaser__head{margin-bottom:28px}
@media (min-width:900px){.faq-teaser__head{grid-column:1/span 4;margin:0}.faq-teaser__head h2{font-size:clamp(31px,1.6vw + 20px,46px)}.faq-teaser__list{grid-column:6/-1}}
.review-reminder{margin:clamp(32px,4vw,48px) 0 clamp(40px,5vw,64px);max-width:70ch}
.page-head--review .page-head__photo{position:relative;align-self:stretch;display:none}
@media (min-width:1100px){.page-head--review .page-head__photo{display:block}}
.page-head--review .photo{aspect-ratio:auto;height:100%;min-height:320px;max-height:460px}
.page-head--review .page-head__photo .note{position:absolute;left:-28px;bottom:-22px;margin:0;background:var(--paper);padding:8px 14px 8px 30px;box-shadow:var(--sh-paper);transform:rotate(-2deg)}
.page-head--review .page-head__photo .note::before{left:12px;top:10px;bottom:10px}
.page-head--review .fine{margin-top:18px}
.plain-list a{color:var(--ink)}
.aside-block .btn--link{margin-top:10px}
.aside-block .note{margin-top:18px}
.cta-sec{padding-bottom:clamp(64px,8vw,120px)}
.cta__note{font-size:19px}
/* below 900 the margin note (and its arrow) gives way to a plain hand line directly under the button */
.cta__pad .cta__inline{display:none;margin:12px 0 0;font-size:18px;color:var(--ink)}
@media (max-width:899px){.cta__note{display:none}.cta__pad .cta__inline{display:block}}
.hero__note{font-size:clamp(17px,.4vw + 15px,20px);color:var(--ink)}
.guides .sh{margin-bottom:clamp(24px,3vw,40px)}

/* ---------- 26. Motion states ---------- */
.m-pending [data-intro]{opacity:0}
.pad__face.is-leaving{visibility:visible;z-index:2}
.nav-guides.is-section>.ul-pen path{stroke-dashoffset:0}
.sh::before{transition:transform .9s cubic-bezier(.65,0,.35,1)}
.sh__num::after{transition:transform .45s cubic-bezier(.3,.7,.3,1) .55s}
.m-on .sh:not(.is-in)::before,.m-on .sh:not(.is-in) .sh__num::after{transform:scaleX(0)}
.m-static *,.m-static *::before,.m-static *::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.sk path,.mk-layer path{will-change:auto}

/* ===== BEGIN builder A: guide pages ===== */
/* ---------- 27. Guide pages (builder A, appended 2026-10-11) ----------
   Layout: TOC column on the left at 900+, margin-note column on the right at 1100+ (notes never collide with the sticky TOC).
   Hooks used: .doc--guide, .wide, .inshort, .law-list, .lit, .keep, [data-tabs], .story.mdl, [data-wash] */
cite{font-style:normal}
.ghero__label{margin:0 0 14px}
.ghero__note{margin-top:22px;width:fit-content}
@media (max-width:599px){.ghero__note{display:none}}
.ghero__note.has-arrow{padding-left:0}
.ghero__note.has-arrow::before{display:none}
.ghero .crumbs{margin-bottom:22px}
@media (min-width:900px) and (max-width:1023px){.ghero__pad{left:-4%;width:60%}}

/* doc grid: TOC left (900+), notes right (1100+) */
@media (min-width:900px){
  .doc--guide{--toc-w:176px;--cg:calc(var(--gap) * 1.6);grid-template-columns:var(--toc-w) minmax(0,1fr);column-gap:var(--cg)}
  .doc--guide>.doc__side{grid-column:1;grid-row:1}
  .doc--guide>.doc__main{grid-column:2;grid-row:1}
}
@media (min-width:1100px){
  .doc--guide{--toc-w:176px;--notes-w:200px;--cg:calc(var(--gap) * 1.4);grid-template-columns:var(--toc-w) minmax(0,1fr) var(--notes-w)}
  .doc--guide.doc--notes .para>.note{left:calc(100% + var(--cg));width:var(--notes-w);max-width:none;top:6px}
  .doc--guide .wide{margin-right:calc(-1 * (var(--notes-w) + var(--cg)))}
}
@media (min-width:1280px){.doc--guide{--toc-w:196px;--notes-w:226px}}
.doc--guide.section{padding-top:clamp(36px,4.5vw,64px)}
.doc--guide .toc a{font-size:14.5px}
.side-cta{margin-top:16px;font-size:15px}
.doc--guide .doc__main>section:first-of-type{padding-top:clamp(44px,5vw,72px)}

/* "In short" */
.inshort{border-top:2px solid var(--ink);padding-top:16px;margin:0}
.inshort__h{font-family:var(--f-sans);font-weight:650;font-size:15px;line-height:1.3;letter-spacing:0;color:var(--ink);margin:0 0 4px;max-width:none}
.inshort__list{list-style:none;margin:0;padding:0}
.doc__main .inshort__list li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;padding:14px 0;border-bottom:1px solid var(--line);max-width:none}
.inshort__n{font-family:var(--f-serif);font-weight:400;font-size:26px;line-height:1;color:var(--pine-600);font-variant-numeric:lining-nums tabular-nums;padding-top:2px}
.doc__main .inshort__list p{margin:0;font-family:var(--f-serif);font-size:clamp(18px,.4vw + 16px,20px);line-height:1.45;color:var(--ink);max-width:58ch}

/* running lists */
.law-list{list-style:none;margin:0 0 1.1em;padding:0}
.law-list li{position:relative;padding-left:26px;margin:0 0 .75em}
.law-list li::before{content:"";position:absolute;left:3px;top:.8em;width:13px;height:1.7px;border-radius:2px;background:var(--graphite);transform:rotate(-7deg)}
.after-list{font-size:15.5px;line-height:1.55;color:var(--ink-3);margin-top:16px}
.doc__main .signs li,.doc__main .plain-list li{max-width:none}
.doc__main .plain-list{margin:4px 0 24px}
.doc__main .plain-list li{font-size:16px}
.doc__main .src{max-width:66ch}
.doc__main .deadlines{margin:26px 0 34px}
.doc__main .steps{margin-top:6px}
.faq-more{margin:18px 0 0}

/* current litigation list (product guide) */
.lit{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line-2)}
.doc__main .lit__item{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 22px;padding:22px 0 24px;border-bottom:1px solid var(--line);max-width:none}
.lit__no{margin:0;font-family:var(--f-serif);font-weight:500;font-size:15px;line-height:1.15;color:var(--pine-600);font-variant-numeric:lining-nums tabular-nums}
.lit__no br{display:none}
@media (min-width:600px){.doc__main .lit__item{grid-template-columns:72px minmax(0,1fr)}.lit__no{font-size:21px;padding-top:4px}.lit__no br{display:inline}}
.doc__main .lit__h{font-size:clamp(20px,.5vw + 17px,23px);line-height:1.25;margin:0 0 8px}
.lit__body p{margin:0 0 8px}
.lit__body .src{margin-top:4px}
.lit__after{margin-top:20px}

/* documents to keep: list + a pad with the drawing */
.keep{display:grid;grid-template-columns:minmax(0,1fr);gap:34px var(--gap);align-items:start}
.keep__aside{position:relative}
.keep__pad{width:min(92%,400px);margin-left:auto;transform:rotate(1.4deg);padding-top:22px}
.keep__pad .sk--ev{width:100%;height:auto}
.keep__note{margin:22px 0 0 8px}
@media (min-width:600px){
  .keep{grid-template-columns:minmax(0,1fr) minmax(0,40%)}
  .keep__list{grid-column:1;grid-row:1}
  .keep__aside{grid-column:2;grid-row:1;position:sticky;top:calc(var(--hdr) + 40px)}
  .keep__pad{width:100%}
}
@media (min-width:1100px){.doc--guide .keep{margin-right:calc(-1 * (var(--notes-w) + var(--cg)));grid-template-columns:minmax(0,1fr) minmax(0,44%);column-gap:calc(var(--gap) * 1.6)}}

/* situation tabs (consumer guide); without JS every panel shows with its heading */
.tabs__panel+.tabs__panel{margin-top:44px}
.tabs__panel>.tabs__h{margin-top:0}
.tabs__list{display:flex;flex-wrap:wrap;gap:0 2px;margin:0 0 28px;border-bottom:1px solid var(--line)}
.tabs__tab{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:0 12px 4px;background:none;border:0;border-radius:var(--r-2) var(--r-2) 0 0;font-family:var(--f-sans);font-weight:600;font-size:15px;line-height:1.25;color:var(--ink-2);cursor:pointer;text-align:left}
.tabs__tab:hover{color:var(--ink);background:var(--paper-2)}
.tabs__tab[aria-selected="true"]{color:var(--ink)}
.tabs__tab .ul-pen{left:10px;right:10px;width:calc(100% - 20px);bottom:6px}
.tabs__tab[aria-selected="true"] .ul-pen path{stroke-dashoffset:0}
.tabs__tab:focus-visible{outline:3px solid var(--pine-600);outline-offset:-3px}
.tabs.is-on .tabs__panel+.tabs__panel{margin-top:0}
.tabs.is-on .tabs__panel[hidden]{display:none!important}
.tabs.is-on .tabs__h{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.tabs__panel:focus-visible{outline:3px solid var(--pine-600);outline-offset:6px;border-radius:var(--r-2)}

/* MDL story (product guide): core [data-story] pinning, h4 step titles */
.mdl{margin:30px 0 10px}
.mdl .story__steps{gap:36px}
.mdl .story__text h4{font-family:var(--f-serif);font-weight:600;font-size:clamp(20px,.6vw + 17px,24px);line-height:1.22;color:var(--ink);margin:0 0 6px}
.mdl .story__text p{margin:0}
.mdl .story__text .mk{white-space:normal}
@media (min-width:900px){
  .story.mdl.is-pinned .story__body{min-height:min(560px,calc(100vh - 150px))}
  .story.mdl.is-pinned .story__text h4{font-size:19px;color:var(--ink-3);transition:color .3s}
  .story.mdl.is-pinned .story__step.is-active h4{color:var(--ink)}
  .story.mdl.is-pinned .story__text .mk{white-space:nowrap}
}

/* photo band "wash": pencil frame + shading, then the photo is shaded in (JS only; no JS = plain photo) */
.photo.is-washing{background:var(--white)}
.wash-sk{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.wash-sk path{fill:none;stroke:var(--graphite);stroke-linecap:round;stroke-linejoin:round}
.wash-sk .wf{stroke-width:2.2}
.wash-sk .wg{stroke:var(--graphite-2);stroke-width:1.1;opacity:.7}
.wash-sk .wh{stroke:var(--graphite-2);stroke-width:1.2;opacity:.75}
.wash-sk .shade-sweep{stroke:var(--graphite-2);stroke-width:34;opacity:.26}

.doc__main .deadline__fig{margin:8px 0 12px}
/* shared fix: .ul-pen uses pathLength + vector-effect:non-scaling-stroke; Chrome then applies the dash pattern in screen
   space, so on underlines wider than ~98px (tabs, FAQ filters) the tail of the hidden dash showed. The svg is 6px tall
   (no vertical scaling), so dropping the vector effect keeps the same 2px stroke. */
.ul-pen path{vector-effect:none}
/* related guides */
.related .sh{margin-bottom:34px}
.related .topic-cards{padding-top:14px}
/* ---------- end 27 ---------- */
/* ===== END builder A: guide pages ===== */

/* footer: Facebook page link (2026-10-11) */
.footer__social{display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;font-size:.95rem;color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.footer__social:hover{text-decoration-thickness:2px}
.footer__fb{flex:none;color:#1D4A31}