/*
 * TenderBrief
 * Paper, ink and one red pencil. We read the notice and mark what matters, so the site looks like
 * a well-printed working document: English Caslon for anything you read, a newspaper grotesque for
 * facts and controls, red only where a person would have reached for a pencil.
 */

@font-face{font-family:"Libre Caslon Display"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text"; font-style:italic; font-weight:400; font-display:swap;
  src:url(/assets/fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text"; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --paper:#F3EEE4; --desk:#E7E0D1; --sheet:#FDFBF6;
  --ink:#1C1A16; --ink-2:#46413A; --ink-3:#6A6357;
  --rule:#D8CFBF; --rule-2:#C4B9A6;
  --red:#B4321F; --red-soft:#F3DDD3; --on-ink:#F6F2EA;
  --display:"Libre Caslon Display","Libre Caslon Text",Georgia,"Times New Roman",serif;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --lift:0 1px 1px rgba(45,32,12,.06),0 18px 40px -22px rgba(45,32,12,.45);
  --side:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --page:1120px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15120E; --desk:#0F0D0A; --sheet:#1D1914;
    --ink:#EFE8DB; --ink-2:#C4BAA9; --ink-3:#998F7E;
    --rule:#3A332A; --rule-2:#4E4538;
    --red:#EF7D61; --red-soft:#3C2219; --on-ink:#15120E;
    --lift:0 0 0 1px rgba(255,240,220,.05),0 24px 48px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15120E; --desk:#0F0D0A; --sheet:#1D1914;
  --ink:#EFE8DB; --ink-2:#C4BAA9; --ink-3:#998F7E;
  --rule:#3A332A; --rule-2:#4E4538;
  --red:#EF7D61; --red-soft:#3C2219; --on-ink:#15120E;
  --lift:0 0 0 1px rgba(255,240,220,.05),0 24px 48px -24px rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:24px}
body{
  margin:0; min-height:100vh; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.6 var(--sans); font-kerning:normal;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1,h2{font-family:var(--display); font-weight:400; letter-spacing:-.012em; text-wrap:balance}
h3{font-weight:600; font-size:1.0625rem; line-height:1.35}
img,svg{display:block; max-width:100%}
[hidden]{display:none !important}
a{color:inherit; text-decoration-line:underline; text-decoration-color:var(--red); text-decoration-thickness:1.5px; text-underline-offset:.22em}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:2.5px solid var(--red); outline-offset:3px; border-radius:2px}
::selection{background:var(--red-soft)}
.page{width:min(var(--page), 100% - 2 * var(--side)); margin-inline:auto}
.small{font-size:.9375rem}
.quiet{color:var(--ink-3)}
.nowrap{white-space:nowrap}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---------- Masthead: a wordmark over an Oxford rule (thick, then thin) ---------- */
.mast{position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:10px 28px; flex-wrap:wrap;
  padding:26px 0 14px; border-bottom:2.5px solid var(--ink); margin-bottom:6px}
.mast::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--ink)}
.wordmark{position:relative; display:inline-flex; align-items:baseline; font:400 1.875rem/1 var(--display); letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; padding-bottom:4px}
.wordmark em{font:italic 400 1.75rem/1 var(--serif); margin-left:1px}
.wordmark .mark-uline{position:absolute; right:-4px; bottom:-5px; width:58%; height:9px}
.wordmark:hover{text-decoration:none}
.mast-nav{display:flex; flex-wrap:wrap; gap:4px 24px; font-size:.9375rem; font-weight:500}
.mast-nav a{text-decoration:none; color:var(--ink-2); padding:6px 0}
.mast-nav a:hover{color:var(--ink); text-decoration:underline; text-decoration-color:var(--red)}
.mast-nav{align-items:center}
.mast-nav a.btn{color:var(--on-ink); padding:.55em 1em; min-height:40px; font-size:.9375rem}
.mast-nav a.btn:hover{color:var(--on-ink); text-decoration:none}
.mast-note{font:italic .9375rem/1.4 var(--serif); color:var(--ink-3)}

/* ---------- Red pencil marks (inline SVG, stretched around the text they mark) ---------- */
.mark-ring,.mark-uline{position:absolute; max-width:none; overflow:visible; pointer-events:none; fill:none}
.mark-ring path,.mark-uline path{stroke:var(--red); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.ring{position:relative; display:inline-block; white-space:nowrap; isolation:isolate}
.ring .mark-ring{left:-.7em; top:-.5em; width:calc(100% + 1.45em); height:calc(100% + .95em)}
.uline{position:relative; display:inline-block; white-space:nowrap}
.uline .mark-uline{left:-2px; bottom:-.42em; width:calc(100% + 6px); height:.5em}
@media (prefers-reduced-motion: no-preference){
  .draw path{stroke-dasharray:1 1; stroke-dashoffset:1; animation:draw .9s cubic-bezier(.55,.1,.3,1) .35s forwards}
  .draw.late path{animation-delay:.8s}
  .draw.later path{animation-delay:1.25s}
  @keyframes draw{to{stroke-dashoffset:0}}
}

/* ---------- Buttons and links ---------- */
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:50px; padding:.8em 1.3em;
  font:600 1rem/1.2 var(--sans); letter-spacing:.005em; text-align:center; text-decoration:none; cursor:pointer;
  color:var(--on-ink); background:var(--ink); border:1.5px solid var(--ink); border-radius:2px;
  box-shadow:0 0 0 var(--red); transition:transform .14s ease, box-shadow .14s ease;
}
.btn:hover{text-decoration:none; transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--red)}
.btn:active{transform:none; box-shadow:0 0 0 var(--red)}
.btn.line{background:transparent; color:var(--ink)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.more{font-weight:600; text-decoration-thickness:2px}
.more::after{content:" \2192"; font-family:Arial, sans-serif}
button.linklike{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:1.5px; text-underline-offset:.22em}

/* ---------- Landing: hero ---------- */
.hero{display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.1fr); gap:clamp(36px, 5vw, 80px); align-items:center;
  padding:clamp(44px, 7vw, 104px) 0 clamp(56px, 8vw, 120px)}
.hero-copy{display:flex; flex-direction:column; gap:26px; min-width:0}
.kicker{font:italic 1.125rem/1.4 var(--serif); color:var(--red)}
.hero h1{font-size:clamp(2.6rem, 1.5rem + 4vw, 4.6rem); line-height:1.01}
.lede{font:400 1.1875rem/1.6 var(--serif); color:var(--ink-2); max-width:34em}
.sources{font-size:.875rem; color:var(--ink-3); max-width:36em; border-top:1px solid var(--rule); padding-top:14px}

/* The marked-up notice */
.notice{position:relative; margin:0; padding-right:184px; min-width:0}
.notice-sheet{position:relative; background:var(--sheet); box-shadow:var(--lift); padding:26px 28px 24px; transform:rotate(-1.1deg);
  font-size:.875rem; line-height:1.5; color:var(--ink-2)}
.notice-sheet::before{content:""; position:absolute; inset:7px; border:1px solid var(--rule); pointer-events:none}
.n-src{display:flex; justify-content:space-between; gap:12px; font-size:.75rem; color:var(--ink-3); padding-bottom:10px; border-bottom:1px solid var(--rule); margin-bottom:14px}
.n-buyer{font-weight:600; color:var(--ink)}
.n-title{font:400 1.375rem/1.2 var(--display); color:var(--ink); margin:2px 0 14px}
.n-fields{display:flex; flex-direction:column; border-top:1px solid var(--rule)}
.n-row{position:relative; display:grid; grid-template-columns:7.4rem minmax(0,1fr); gap:12px; padding:7px 0; border-bottom:1px solid var(--rule)}
.n-row dt{color:var(--ink-3)}
.n-row dd{color:var(--ink)}
.n-desc{margin-top:14px; font-size:.8125rem; color:var(--ink-3); line-height:1.55}
.mnote{position:absolute; left:calc(100% + 50px); top:3px; width:162px; font:italic .9375rem/1.35 var(--serif); color:var(--red); transform:rotate(1.1deg)}
.mnote::before{content:""; position:absolute; right:calc(100% + 8px); top:.72em; width:26px; height:1.5px; background:var(--red); border-radius:2px; transform:rotate(-6deg)}
.notice figcaption{margin:26px -120px 0 0; font:italic .9375rem/1.45 var(--serif); color:var(--ink-3); max-width:30em}

/* ---------- Landing: editorial blocks (a rail label, then the content) ---------- */
.block{display:grid; grid-template-columns:minmax(0,13.5rem) minmax(0,1fr); gap:20px 56px; padding:clamp(56px, 8vw, 104px) 0; border-top:1px solid var(--rule-2)}
.rail{font:italic 1.0625rem/1.4 var(--serif); color:var(--ink-3); padding-top:.65em}
.block-main{display:flex; flex-direction:column; gap:30px; min-width:0}
.block h2{font-size:clamp(2rem, 1.4rem + 2vw, 3rem); line-height:1.06; max-width:18em}
.block-lede{font:400 1.125rem/1.6 var(--serif); color:var(--ink-2); max-width:38em}

/* How it works: a timetable */
.timetable{list-style:none; padding:0; border-top:2px solid var(--ink)}
.timetable li{display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:6px 32px; padding:22px 0 24px; border-bottom:1px solid var(--rule)}
.tt-when{font:italic 1.0625rem/1.4 var(--serif); color:var(--red); padding-top:1px}
.tt-what{display:flex; flex-direction:column; gap:6px; min-width:0}
.tt-what h3{font-size:1.1875rem}
.tt-what p{color:var(--ink-2); max-width:60ch}

/* Fees: a schedule with dotted leaders */
.fees{list-style:none; padding:0; border-top:2px solid var(--ink)}
.fee{display:grid; grid-template-columns:minmax(0,1fr) 13.5rem; gap:12px 40px; align-items:start; padding:24px 0 26px; border-bottom:1px solid var(--rule)}
.fee-line{grid-column:1 / -1}
.fee-body{display:flex; flex-direction:column; gap:8px; min-width:0}
.fee > .btn{width:100%; margin-top:2px}
.fee-line{display:flex; align-items:baseline; gap:14px}
.fee-line h3{font:400 1.75rem/1.1 var(--display); letter-spacing:-.01em}
.leader{flex:1 1 auto; min-width:28px; height:6px; align-self:flex-end; margin-bottom:.42em;
  background:radial-gradient(circle, var(--ink-3) 1.1px, transparent 1.6px) 0 50%/9px 6px repeat-x}
.fee-price{font:400 1.75rem/1.1 var(--display); white-space:nowrap}
.fee-price small{font:500 .9375rem var(--sans); color:var(--ink-3); margin-left:4px}
.fee p{color:var(--ink-2); max-width:62ch}
.fee .terms{font-size:.9375rem; color:var(--ink-3)}
.fees-note{font-size:.875rem; color:var(--ink-3); max-width:62ch}

/* Rules: two numbered lists */
.rules{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 48px}
.rules h3{font:italic 400 1.5rem/1.2 var(--serif); padding-bottom:12px; border-bottom:2px solid var(--ink); margin-bottom:6px}
.clauses{list-style:none; padding:0; counter-reset:cl}
.clauses li{position:relative; padding:12px 0 12px 2.1rem; border-bottom:1px solid var(--rule); counter-increment:cl; color:var(--ink-2)}
.clauses li::before{content:counter(cl) "."; position:absolute; left:0; top:12px; font:italic 1.0625rem/1.55 var(--serif); color:var(--red)}

/* Questions */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:18px 0; cursor:pointer; list-style:none;
  font:400 1.3125rem/1.35 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font:300 1.75rem/1 var(--sans); color:var(--red); transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2.5rem 22px 0; color:var(--ink-2); max-width:64ch}

/* Closing band (inverted) */
.closer{background:var(--ink); color:var(--on-ink); padding:clamp(56px, 8vw, 96px) 0; margin-top:clamp(24px, 4vw, 48px)}
.closer .page{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px 64px; align-items:end}
.closer h2{font-size:clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); line-height:1.04}
.closer p{font:400 1.125rem/1.6 var(--serif); opacity:.86; max-width:34em; margin-top:18px}
.closer .btn{background:var(--on-ink); color:var(--ink); border-color:var(--on-ink)}
.closer .btn.line{background:transparent; color:var(--on-ink)}
.closer a:not(.btn){color:var(--on-ink)}

/* ---------- Footer ---------- */
.foot{padding:40px 0 48px; font-size:.875rem; color:var(--ink-3)}
.foot .page{position:relative; display:grid; grid-template-columns:minmax(0,13.5rem) minmax(0,1fr) auto; gap:20px 56px; padding-top:26px; border-top:2.5px solid var(--ink)}
.foot .page::before{content:""; position:absolute; left:0; right:0; top:3px; height:1px; background:var(--ink)}
.foot .wordmark{font-size:1.375rem}
.foot .wordmark em{font-size:1.3125rem}
.foot-legal{display:flex; flex-direction:column; gap:8px; max-width:68ch}
.foot nav{display:flex; flex-direction:column; gap:6px; font-weight:500}
.foot nav a{color:var(--ink-2)}
.foot .optout{grid-column:2 / -1}

/* ---------- Brief page: a memo on a sheet, on a desk ---------- */
body.desk{background:var(--desk)}
.strip{display:flex; align-items:center; justify-content:space-between; gap:10px 24px; flex-wrap:wrap; padding:20px 0}
.strip .wordmark{font-size:1.5rem}
.strip .wordmark em{font-size:1.4375rem}
.strip-r{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 20px; font-size:.9375rem; color:var(--ink-2)}
.sample-note{font:italic 1rem/1.4 var(--serif); color:var(--red)}
.sheet{position:relative; max-width:860px; margin:0 auto; background:var(--sheet); box-shadow:var(--lift);
  padding:clamp(28px, 6vw, 68px) clamp(20px, 7vw, 80px) clamp(32px, 5vw, 60px)}
.doc-kind{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; padding-bottom:18px; border-bottom:2.5px solid var(--ink); position:relative}
.doc-kind::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--ink)}
.doc-kind p:first-child{font:400 clamp(1.9rem, 1.4rem + 2vw, 2.6rem)/1 var(--display)}
.doc-kind p:last-child{font:italic .9375rem/1.3 var(--serif); color:var(--ink-3)}
.memo{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 22px; margin:26px 0 0; font-size:.9375rem}
.memo dt{color:var(--ink-3)}
.memo dd{font-weight:500; min-width:0; overflow-wrap:anywhere}
.doc-title{margin:34px 0 0; display:flex; flex-direction:column; gap:10px}
.doc-title h1{font-size:clamp(2rem, 1.45rem + 2.3vw, 3rem); line-height:1.06}
.doc-title p{font:400 1.125rem/1.5 var(--serif); color:var(--ink-2)}
.keyfacts{margin-top:30px; border-top:2px solid var(--ink)}
.kf{display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:4px 20px; padding:11px 0; border-bottom:1px solid var(--rule)}
.kf dt{color:var(--ink-3); font-size:.9375rem; padding-top:1px}
.kf dd{min-width:0; overflow-wrap:anywhere}
.kf.closes dd{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 26px; font-weight:600}
.left{font:italic 400 1rem/1.3 var(--serif); color:var(--red)}
.dsec{margin-top:42px; display:flex; flex-direction:column; gap:14px; min-width:0}
.dsec h2{display:flex; align-items:baseline; gap:14px; font-size:1.75rem; line-height:1.15}
.dsec h2 .no{flex:none; font:italic 400 1.125rem/1 var(--serif); color:var(--red); min-width:1.1em}
.dsec > *:not(h2){margin-left:calc(1.1em + 14px)}
.prose,.dlist{font:400 1.0625rem/1.65 var(--serif); color:var(--ink)}
.dlist{list-style:none; padding:0; display:flex; flex-direction:column; gap:8px}
.dlist li{position:relative; padding-left:1.25rem}
.dlist li::before{content:""; position:absolute; left:0; top:.78em; width:.55rem; height:1.5px; background:var(--ink-3)}
.dsec-pair{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 40px}
.dsec-pair .dsec > *:not(h2){margin-left:0}
.cite{font-size:.9375rem; color:var(--ink-2); border-left:2px solid var(--rule-2); padding:2px 0 2px 14px}
.cite b{font-weight:600; color:var(--ink)}
.draftline{position:relative; font:italic 400 1.25rem/1.55 var(--serif); color:var(--ink); padding:4px 0 4px 22px; border-left:3px solid var(--red)}
.aside{font-size:.9375rem; color:var(--ink-3); max-width:58ch}
.colophon{margin-top:46px; padding-top:14px; border-top:1px solid var(--rule); font:italic .9375rem/1.5 var(--serif); color:var(--ink-3)}

/* Scoring: print-style hatching instead of tints */
.score{display:flex; flex-direction:column; gap:12px}
.score-bar{display:flex; gap:3px; height:22px}
.score-bar i,.score-key i{display:block; background:var(--ink)}
.score-bar i{min-width:4px}
.score-bar i:nth-child(2),.score-key li:nth-child(2) i{background:repeating-linear-gradient(-45deg, var(--ink) 0 1.6px, transparent 1.6px 5.5px); box-shadow:inset 0 0 0 1.5px var(--ink)}
.score-bar i:nth-child(3),.score-key li:nth-child(3) i{background:radial-gradient(circle, var(--ink) 1.1px, transparent 1.5px) 0 0/5px 5px; box-shadow:inset 0 0 0 1.5px var(--ink)}
.score-bar i:nth-child(4),.score-key li:nth-child(4) i{background:repeating-linear-gradient(0deg, var(--ink) 0 1.4px, transparent 1.4px 5px); box-shadow:inset 0 0 0 1.5px var(--ink)}
.score-bar i:nth-child(n+5),.score-key li:nth-child(n+5) i{background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink)}
.score-key{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px 22px; font-size:.9375rem; color:var(--ink-2)}
.score-key li{display:flex; align-items:center; gap:8px}
.score-key i{width:16px; height:12px; flex:none}
.score-key b{font-weight:600; color:var(--ink)}

/* Next step, under the sheet */
.next{max-width:860px; margin:28px auto 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:24px 44px;
  padding:clamp(26px, 4vw, 40px) 0; border-top:2.5px solid var(--ink); position:relative}
.next::before{content:""; position:absolute; left:0; right:0; top:3px; height:1px; background:var(--ink)}
.next h2{font-size:clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem); line-height:1.06}
.next-copy{display:flex; flex-direction:column; gap:14px}
.next-copy p{font:400 1.0625rem/1.6 var(--serif); color:var(--ink-2)}
.next-act{display:flex; flex-direction:column; gap:14px; align-items:stretch}
.next-act .btn{justify-content:space-between}
.next-act .btn::after{content:"\2192"; font-family:Arial, sans-serif; font-weight:400}
.next-act p{font-size:.9375rem; color:var(--ink-2)}
body.desk .foot .page{max-width:860px}

/* ---------- Questionnaire ---------- */
.formhead{display:flex; flex-direction:column; gap:16px; padding:clamp(36px, 6vw, 72px) 0 8px; max-width:760px}
.formhead h1{font-size:clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); line-height:1.03}
.formhead .lede{max-width:none}
.formwrap{max-width:760px; padding-bottom:24px; min-width:0}
.intake-grid{display:grid; grid-template-columns:minmax(0,760px) minmax(270px,1fr); gap:24px clamp(32px, 5vw, 72px); align-items:start}
.aside-panel{position:sticky; top:24px; margin-top:28px; padding:22px 24px 24px; background:var(--sheet); box-shadow:var(--lift); display:flex; flex-direction:column; gap:12px}
.aside-panel h2{font-size:1.5rem; line-height:1.15}
.aside-panel .clauses li{font-size:.9375rem; padding-top:10px; padding-bottom:10px}
.aside-panel .clauses li::before{top:10px}
form.q{display:flex; flex-direction:column; gap:0; counter-reset:qs; margin-top:28px}
.q-sec{display:flex; flex-direction:column; gap:16px; min-width:0; padding:30px 0 34px; border-top:1px solid var(--rule-2)}
fieldset{border:0; margin:0; padding:0; min-width:0}
.q-sec > h2,.q-set > legend{display:flex; align-items:baseline; gap:14px; font:400 1.75rem/1.15 var(--display); letter-spacing:-.01em; padding:0}
.q-set > legend{float:left; width:100%; margin:30px 0 0}
.q-set > legend + .q-sec{clear:both; border-top:0; padding-top:16px}
.q-set{border-top:1px solid var(--rule-2)}
.q-sec > h2::before,.q-set > legend::before{counter-increment:qs; content:counter(qs); flex:none; font:italic 400 1.125rem/1 var(--serif); color:var(--red); min-width:1.1em}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.lab{font-weight:600; font-size:1rem}
.req{margin-left:8px; font:italic 400 .9375rem var(--serif); color:var(--red)}
.q input[type="text"],.q input[type="email"],.q input[type="tel"],.q input[type="number"],.q select,.q textarea{
  display:block; width:100%; min-width:0; font:400 1rem/1.4 var(--sans); color:var(--ink); background:var(--sheet);
  border:1.5px solid var(--rule-2); border-radius:2px; padding:11px 12px; transition:border-color .12s ease;
}
.q input:hover,.q select:hover,.q textarea:hover{border-color:var(--ink-3)}
.q input:focus-visible,.q select:focus-visible,.q textarea:focus-visible{outline:2.5px solid var(--red); outline-offset:1px; border-color:var(--ink)}
.q textarea{min-height:108px; line-height:1.55; resize:vertical}
.q input[readonly]{background:transparent; border-style:dashed; color:var(--ink-2)}
.q [aria-invalid="true"]{border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red)}
.err{color:var(--red); font-size:.9375rem; font-weight:500}
.note{font-size:.9375rem; color:var(--ink-3)}
.cols-2,.cols-3,.checks{display:grid; gap:18px 24px}
.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.checks{grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 24px}
.check{display:flex; align-items:flex-start; gap:12px; min-width:0; padding:7px 0; cursor:pointer}
.check input{flex:none; width:19px; height:19px; margin:2px 0 0; accent-color:var(--ink)}
.contracts{display:flex; flex-direction:column; gap:18px}
.contract{background:var(--sheet); border:1px solid var(--rule); box-shadow:var(--lift); padding:22px 22px 18px}
.contract > legend{float:left; width:100%; font:italic 400 1.125rem var(--serif); color:var(--red); margin-bottom:14px}
.contract-in{clear:both; display:flex; flex-direction:column; gap:16px}
.contract-foot{display:flex; justify-content:flex-end}
.link-btn{font:inherit; font-size:.9375rem; color:var(--ink-2); background:none; border:0; padding:6px 0; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.22em}
.msg{padding:16px 18px; border:1.5px solid var(--rule-2); border-left-width:4px; background:var(--sheet)}
.msg.ok{border-color:var(--ink); border-left-color:var(--red); font:400 1.375rem/1.45 var(--serif); margin:clamp(36px, 6vw, 72px) 0 24px; max-width:760px}
.msg.bad{border-color:var(--red); color:var(--ink)}
.msg:focus{outline:none}
.nb{white-space:nowrap}
.check.auto{padding:14px 16px; background:var(--sheet); border:1.5px solid var(--rule-2); border-left:4px solid var(--red); margin:2px 0 4px; color:var(--ink-2)}
.check.auto b{font-weight:600; color:var(--ink)}
.opt{margin-left:8px; font:italic 400 .9375rem var(--serif); color:var(--ink-3)}
.prefilled{font:italic 1rem/1.45 var(--serif); color:var(--red)}
.q-sub{display:flex; flex-direction:column; gap:16px}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* ---------- Legal pages and short notices ---------- */
.doc{max-width:760px; padding:clamp(36px, 6vw, 72px) 0 32px; display:flex; flex-direction:column; gap:10px}
.doc h1{font-size:clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); line-height:1.03; margin-bottom:8px}
.doc .lede{margin-bottom:12px}
.doc section{counter-increment:doc; padding:24px 0 22px; border-top:1px solid var(--rule-2); display:flex; flex-direction:column; gap:12px}
.doc{counter-reset:doc}
.doc h2{display:flex; align-items:baseline; gap:14px; font-size:1.625rem; line-height:1.15}
.doc h2::before{content:counter(doc); flex:none; font:italic 400 1.0625rem/1 var(--serif); color:var(--red); min-width:1.1em}
.doc section > *:not(h2){margin-left:calc(1.1em + 14px)}
.doc p,.doc li{color:var(--ink-2); max-width:66ch}
.doc ul{padding-left:1.1em; display:flex; flex-direction:column; gap:8px}
.doc li::marker{color:var(--red)}
.doc b{color:var(--ink); font-weight:600}
.notfound{max-width:760px; padding:clamp(48px, 9vw, 120px) 0 clamp(48px, 7vw, 96px); display:flex; flex-direction:column; gap:22px}
.notfound h1{font-size:clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height:1.03}

/* ---------- Narrower screens ---------- */
@media (max-width: 1120px){
  .notice{padding-right:0}
  .mnote{position:static; display:block; width:auto; margin-top:3px; transform:none; font-size:.875rem}
  .mnote::before{display:none}
  .notice figcaption{margin-right:0}
}
@media (max-width: 900px){
  .intake-grid{grid-template-columns:minmax(0,1fr)}
  .aside-panel{position:static; order:-1; margin:8px 0 4px}
  .hero{grid-template-columns:minmax(0,1fr)}
  .notice-sheet{transform:rotate(-.6deg)}
  .block{grid-template-columns:minmax(0,1fr); gap:10px}
  .rail{padding-top:0}
  .closer .page{grid-template-columns:minmax(0,1fr); align-items:start}
  .foot .page{grid-template-columns:minmax(0,1fr) auto}
  .foot .page > :first-child{grid-column:1 / -1}
  .foot .optout{grid-column:1 / -1}
  .next{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 640px){
  body{font-size:1rem}
  .mast{padding-top:18px}
  .mast-nav{gap:2px 18px; font-size:.875rem}
  .timetable li,.kf,.n-row{grid-template-columns:minmax(0,1fr); gap:2px}
  .rules,.dsec-pair,.cols-2,.cols-3,.checks{grid-template-columns:minmax(0,1fr)}
  .fee-line h3,.fee-price{font-size:1.4375rem}
  .fee{grid-template-columns:minmax(0,1fr)}
  .mast-nav a.btn{display:none}
  .dsec > *:not(h2),.doc section > *:not(h2){margin-left:0}
  .faq details p{padding-right:0}
  .foot .page{grid-template-columns:minmax(0,1fr)}
  .notice-sheet{padding:22px 18px 20px}
  .sheet{box-shadow:var(--lift)}
  .memo{grid-template-columns:max-content minmax(0,1fr); gap:4px 14px}
}

/* ---------- Print: the brief on one or two clean pages ---------- */
@media print{
  :root{--paper:#fff; --desk:#fff; --sheet:#fff; --ink:#000; --ink-2:#222; --ink-3:#555; --rule:#bbb; --rule-2:#999; --red:#B4321F; color-scheme:light}
  body{font-size:10.5pt}
  .strip,.next,.foot,.noprint{display:none !important}
  .sheet{box-shadow:none; padding:0; max-width:none}
  .draw path{animation:none; stroke-dashoffset:0}
  a{text-decoration:none}
  .dsec,.kf,.cite,.draftline{break-inside:avoid}
  @page{margin:16mm 16mm 18mm}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}