/* Better Builds — homepage. Tokens lifted from "Better Builds Homepage v4.dc.html". */
:root{
/* Brand */
--navy:#1C2637; --navy-hi:#2A3849; --navy-ink:#2A3444;
--cream:#EDE8DE; --card:#FFFFFF; --card-warm:#F6F3EC;
--sand:#D8CBB4; --bronze:#8A7B5E; --bronze-deep:#5A5340;
/* --bronze is a decoration colour: at 3.39:1 on cream it fails AA for text at any size we
use it. --bronze-text is the same hue family, dark enough to read (4.98 on cream, 6.08
on white). Use --bronze for borders and rules, --bronze-text whenever it is type. */
--bronze-text:#6E6144;
--star:#D8A03A;
/* v7 radii — tighter and more product-like than v4's 18-36px */
--r-sm:10px; --r-btn:12px; --r-card:14px; --r-panel:16px;
/* Text */
--slate:#4B5464; --muted:#5A616E; /* was #646B79 — 4.39:1 on cream, just under AA */
--on-dark:#DDE2E8; --on-dark-2:#A8B0BE; --on-dark-3:#8A93A4; --on-dark-mid:#C2C9D4;
--on-dark-hi:#E3E7EC; --paper:#F6F3EC;
/* Semantic */
--ok-dark:#7FD1A8; --ok-light:#2E7D5B;
/* Lines */
--hair:rgba(28,38,55,.12); --hair-2:rgba(28,38,55,.16);
--hair-3:rgba(28,38,55,.25); --hair-4:rgba(28,38,55,.35);
--hair-on-dark:rgba(246,243,236,.14);
/* Type */
--display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--body:Archivo,Helvetica,Arial,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
/* Layout */
--wrap:1240px; --gut:5vw;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--navy);font-family:var(--body);
overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--display);letter-spacing:-.05em;font-weight:800;line-height:1.05}
p{margin:0}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--bronze-text)}
img{max-width:100%}
svg{display:block}
/* Focus — absent from the prototype, required in production */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
outline:3px solid var(--bronze); outline-offset:3px; border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--paper);
padding:12px 20px;z-index:100;border-radius:0 0 10px 0;font-family:var(--display);font-weight:700}
.skip:focus{left:0;color:var(--paper)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono)}
.lede{font-size:clamp(16px,1.7vw,19px);line-height:1.55}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--bronze-text)}
.eyebrow--dark{color:var(--sand)}
.h2{font-size:clamp(28px,3.8vw,48px)}
@keyframes bb-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes bb-pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* Unresolved content variables — must not reach production */
.var{font-family:var(--mono)}
.var[data-unset]{outline:2px dashed #C0392B;outline-offset:2px;background:rgba(192,57,43,.1);
padding:0 4px;border-radius:3px}
/* ---------- announce + header ---------- */
.announce{background:var(--navy);color:var(--sand)}
.announce .wrap{padding-top:9px;padding-bottom:9px;display:flex;flex-wrap:wrap;gap:8px 24px;
align-items:center;justify-content:space-between}
.announce span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em}
.announce a{color:var(--sand)}
.site-head{position:sticky;top:0;z-index:50;background:rgba(246,243,236,.92);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);
transition:box-shadow 200ms ease}
.site-head.is-stuck{box-shadow:0 10px 30px -22px rgba(28,38,55,.55)}
.progress{position:absolute;left:0;top:0;height:2px;width:0;background:var(--bronze);
transition:width 80ms linear}
.site-head .wrap{padding-top:13px;padding-bottom:13px;display:flex;align-items:center;
justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;min-height:44px} /* was 30px tall — under the touch-target minimum */
.brand span{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.05em}
.site-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.site-nav a:not(.btn){font-size:15px;color:var(--slate)}
/* Scoped with :not(.btn) because `.site-nav a` (0,1,1) outranks `.btn--navy` (0,1,0) and was
repainting the header CTA slate on navy — 1.99:1, the least readable thing on the site. */
.site-nav a:not(.btn):hover{color:var(--navy)}
.btn{display:inline-block;font-family:var(--display);font-weight:700;border-radius:var(--r-btn);
border:0;cursor:pointer;text-align:center;transition:transform 160ms ease,background 160ms ease,box-shadow 160ms ease}
.btn--navy{background:var(--navy);color:#fff;font-size:15px;padding:12px 22px}
.btn--navy:hover{transform:translateY(-1px);background:var(--navy-hi);color:var(--paper)}
.btn--sand{background:var(--sand);color:var(--navy);font-size:16px;padding:16px 30px}
.btn--sand:hover{transform:translateY(-2px);color:var(--navy)}
.btn--lg{font-size:17px;padding:17px 28px;display:block;width:100%}
.btn--hero{font-size:18px;padding:18px 36px}
/* ---------- hero ---------- */
.hero{padding-top:28px;padding-bottom:40px}
.panel{position:relative;background:var(--navy);border-radius:36px;overflow:hidden;
padding:clamp(30px,4.4vw,60px);box-shadow:0 40px 80px -44px rgba(28,38,55,.6)}
.panel__grid,.panel__glow{position:absolute;inset:0;pointer-events:none}
.panel__grid{background-image:linear-gradient(rgba(216,203,180,.055) 1px,transparent 1px),
linear-gradient(90deg,rgba(216,203,180,.055) 1px,transparent 1px);background-size:56px 56px}
.panel__glow{inset:auto auto auto auto;top:-240px;right:-160px;width:660px;height:660px;
border-radius:50%;background:radial-gradient(circle,rgba(216,203,180,.18) 0%,rgba(216,203,180,0) 68%)}
.hero__cols{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
gap:clamp(32px,4vw,52px);align-items:start}
.pill{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(216,203,180,.4);
border-radius:999px;padding:8px 16px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok-dark);
animation:bb-pulse 2.4s ease-in-out infinite}
.pill span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.hero h1{color:var(--paper);font-size:clamp(33px,4.4vw,56px);line-height:1.03;margin:22px 0 0;
text-wrap:balance}
.mark{background:var(--sand);color:var(--navy);padding:0 10px;border-radius:6px;
display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero__sub{color:var(--on-dark);max-width:540px;margin:22px 0 0}
.ticks{display:flex;flex-direction:column;gap:12px;margin:26px 0 0;padding:0;list-style:none;max-width:540px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--on-dark-hi)}
.ticks strong{color:#fff}
.tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(127,209,168,.16);
color:var(--ok-dark);display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:1px}
/* ---------- match form ---------- */
.matchcard{background:var(--card);border-radius:26px;padding:clamp(24px,2.6vw,32px);
box-shadow:0 30px 60px -30px rgba(0,0,0,.55);position:relative;overflow:hidden}
.matchcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--sand),var(--bronze))}
.matchcard h2{font-size:23px;letter-spacing:-.04em}
.matchcard__sub{font-size:14.5px;color:var(--slate);margin-top:6px;line-height:1.5}
.field{margin-top:22px;border:0;padding:0;min-width:0}
.field__label,.field legend{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);padding:0;display:block}
.chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-block;border:1px solid var(--hair-3);font-size:14px;padding:10px 16px;
border-radius:999px;cursor:pointer;transition:border-color 150ms ease,background 150ms ease,color 150ms ease}
.chip span:hover{border-color:var(--navy);background:rgba(28,38,55,.06)}
.chip input:checked+span{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.chip input:focus-visible+span{outline:3px solid var(--bronze);outline-offset:3px}
.row2{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:12px}
.input,.select{width:100%;margin-top:10px;border:1px solid var(--hair-3);border-radius:14px;
padding:15px 16px;font-size:15.5px;font-family:var(--body);color:var(--navy);background:var(--card);
transition:border-color 150ms ease}
.input::placeholder{color:var(--muted)}
.select{color:var(--muted);appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23646B79' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}
.select:valid{color:var(--navy)}
.input:hover,.select:hover{border-color:var(--navy)}
.submit{position:relative;overflow:hidden;background:var(--sand);color:var(--navy);
font-family:var(--display);font-weight:700;font-size:17px;padding:18px 28px;border:0;
border-radius:999px;width:100%;margin-top:20px;cursor:pointer;
transition:transform 160ms ease,box-shadow 160ms ease}
.submit:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(28,38,55,.5)}
.submit__sweep{position:absolute;top:0;bottom:0;width:40%;pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 100%);
animation:bb-sweep 3.6s ease-in-out infinite}
.submit span{position:relative}
.reassure{font-size:13px;color:var(--slate);margin-top:12px;text-align:center;line-height:1.5}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr));gap:10px;margin-top:20px;
border-top:1px solid rgba(28,38,55,.14);padding-top:18px}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.04em}
.stats small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--slate);
margin-top:3px;display:block}
/* ---------- regulators ---------- */
.regs{padding-bottom:64px}
.regs__inner{border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);padding:22px 0}
.regs ul{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0;padding:0;list-style:none;align-items:center}
.regs li{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--slate)}
/* ---------- collapse section ---------- */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,4vw,56px);
align-items:start}
.sec{padding-bottom:80px}
.bignum{font-family:var(--display);font-size:clamp(64px,9vw,116px);font-weight:800;
letter-spacing:-.06em;line-height:.9;margin:18px 0 0;font-variant-numeric:tabular-nums}
.collapse h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.04em;line-height:1.15;
margin:14px 0 0;max-width:520px}
.collapse p{color:var(--slate);margin-top:16px}
.collapse p:first-of-type{margin-top:22px}
.src{font-family:var(--mono);font-size:11px;color:var(--slate);margin-top:22px;line-height:1.6}
.stack{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.cost{background:var(--card);border-radius:20px;padding:24px 26px;display:flex;gap:16px;
align-items:flex-start;transition:transform 180ms ease,box-shadow 180ms ease}
.cost:hover{transform:translateY(-3px);box-shadow:0 16px 32px -22px rgba(28,38,55,.6)}
.cost b{display:block;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.03em}
.cost p{font-size:15px;line-height:1.55;color:var(--slate);margin-top:5px}
.cost--dark{background:var(--navy)}
.cost--dark b{color:var(--paper)}
.cost--dark p{color:var(--on-dark)}
.slot{border:1px dashed var(--hair-4);border-radius:20px;padding:22px 26px}
.slot__label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-text)}
.slot p{font-size:15px;line-height:1.55;color:var(--slate);margin-top:8px}
/* ---------- the check (dark) ---------- */
.check{position:relative;background:var(--navy);padding:clamp(56px,7vw,92px) 0;overflow:hidden}
.check__grid{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(216,203,180,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(216,203,180,.05) 1px,transparent 1px);background-size:64px 64px}
.check .wrap{position:relative}
.check h2{color:var(--paper);margin:16px 0 0}
.check__intro{max-width:780px}
.check__intro p{color:var(--on-dark);margin:16px 0 0}
.check__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
gap:clamp(24px,3vw,40px);margin-top:44px;align-items:start}
.point{background:rgba(246,243,236,.05);border:1px solid rgba(246,243,236,.14);border-radius:20px;
padding:24px 26px;display:flex;gap:18px;align-items:flex-start;transition:background 180ms ease}
.point:hover{background:rgba(246,243,236,.1)}
.point b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
letter-spacing:-.03em;color:var(--paper)}
.point p{font-size:15px;line-height:1.55;color:var(--on-dark-2);margin:8px 0 0}
.record{background:var(--card);border-radius:26px;padding:clamp(24px,2.6vw,34px);
box-shadow:0 30px 60px -34px rgba(0,0,0,.6)}
.record__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.record__head>span:first-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--navy);border-radius:999px;padding:6px 13px}
.badge span:last-child{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ok-dark)}
.badge .dot{width:6px;height:6px}
.record__who{display:flex;align-items:center;gap:14px;margin-top:22px}
.record__logo{width:54px;height:54px;border-radius:16px;background:var(--navy);display:flex;
align-items:center;justify-content:center;flex:none}
.record__who b{display:block;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.04em}
.record__who small{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px;display:block}
.record dl{margin:22px 0 0;display:grid;grid-template-columns:1fr auto}
.record dt,.record dd{padding:13px 0;border-top:1px solid rgba(28,38,55,.14);margin:0}
.record dt{font-size:14.5px;color:var(--slate)}
.record dd{font-family:var(--mono);font-size:13px;text-align:right}
.record dl>dt:last-of-type,.record dl>dd:last-of-type{border-bottom:1px solid rgba(28,38,55,.14)}
.yes{color:var(--ok-light)}
.record__foot{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:18px;line-height:1.6}
.countbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
background:rgba(246,243,236,.06);border:1px solid rgba(246,243,236,.16);border-radius:22px;
padding:24px 30px;margin-top:20px}
.countbar p{font-family:var(--mono);font-size:13.5px;color:var(--sand);line-height:1.6;margin:0}
/* ---------- comparison table ---------- */
.cmp{padding-top:clamp(56px,7vw,88px)}
.cmp__intro{max-width:700px}
.cmp__intro p{color:var(--slate);margin:16px 0 0}
.cmp__scroll{background:var(--card);border-radius:28px;padding:clamp(18px,2.2vw,28px);
overflow-x:auto;margin-top:32px;box-shadow:0 24px 50px -38px rgba(28,38,55,.7)}
table{border-collapse:collapse;width:100%;min-width:700px;text-align:left}
thead th{padding:14px 16px;font-family:var(--display);font-weight:700;font-size:16px;
letter-spacing:-.03em;color:var(--muted)}
thead td:first-child{width:26%}
tbody th{padding:16px;font-size:15px;font-weight:600;border-top:1px solid var(--hair);
font-family:var(--body)}
tbody td{padding:16px;font-size:15px;color:var(--muted);border-top:1px solid var(--hair)}
.col-bb{background:var(--navy);color:var(--paper);font-weight:600;border-top:0}
thead .col-bb{padding:16px;color:var(--paper);border-radius:16px 16px 0 0;vertical-align:bottom}
.col-bb__label{display:flex;align-items:center;gap:9px}
tbody tr:last-child .col-bb{border-radius:0 0 16px 16px;color:var(--sand)}
/* ---------- what you get ---------- */
.get__prose p{color:var(--slate);margin-top:16px}
.get__prose p:first-of-type{margin-top:18px}
.incl{background:var(--card);border-radius:26px;padding:clamp(26px,3vw,36px);
box-shadow:0 24px 50px -36px rgba(28,38,55,.7)}
.incl ul{display:flex;flex-direction:column;gap:14px;margin:20px 0 0;padding:0;list-style:none}
.incl li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.incl li::before{content:"✓";flex:none;color:var(--ok-light);font-size:15px;margin-top:1px}
.incl__price{border-top:1px solid var(--hair-2);margin-top:24px;padding-top:20px;display:flex;
align-items:baseline;justify-content:space-between;gap:16px}
.incl__price b{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.03em}
.incl__price span{font-family:var(--display);font-weight:800;font-size:clamp(38px,5vw,52px);
letter-spacing:-.05em;line-height:1}
/* ---------- build types ---------- */
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;margin-top:32px;
padding:0;list-style:none}
.type{background:var(--card);border-radius:20px;padding:26px;transition:transform 180ms ease,box-shadow 180ms ease}
.type:hover{transform:translateY(-4px);box-shadow:0 20px 40px -28px rgba(28,38,55,.6)}
.type b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
letter-spacing:-.03em;margin-top:16px}
.type p{font-size:15px;line-height:1.5;color:var(--slate);margin:8px 0 0}
.type--dark{background:var(--navy)}
.type--dark:hover{box-shadow:0 20px 40px -28px rgba(28,38,55,.8)}
.type--dark b{color:var(--paper)}
.type--dark p{color:var(--on-dark)}
.intro{max-width:700px}
.intro p{color:var(--slate);margin:16px 0 0}
/* ---------- testimonial slots ---------- */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;margin-top:28px;
padding:0;list-style:none}
.slots li{border:1px dashed var(--hair-4);border-radius:22px;padding:28px;min-height:180px;
display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.slots p{font-size:15px;line-height:1.55;color:var(--slate)}
/* ---------- money ---------- */
.money .panel{box-shadow:0 40px 80px -48px rgba(28,38,55,.8)}
.money__glow{position:absolute;bottom:-240px;left:-120px;width:560px;height:560px;border-radius:50%;
pointer-events:none;background:radial-gradient(circle,rgba(216,203,180,.16) 0%,rgba(216,203,180,0) 68%)}
.money__body{position:relative}
.money h2{font-size:clamp(30px,4vw,52px);margin:16px 0 0;color:var(--paper)}
.money__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
gap:clamp(24px,3vw,48px);margin-top:28px}
.money__cols p{color:var(--on-dark)}
.money__cols strong{color:var(--paper)}
.pull{border-left:3px solid var(--sand);padding-left:24px;margin-top:40px;max-width:820px}
.pull p{font-family:var(--display);font-size:clamp(20px,2.4vw,30px);line-height:1.3;
letter-spacing:-.04em;font-weight:600;color:var(--sand)}
/* ---------- promise ---------- */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(24px,3vw,44px);
align-items:center;background:var(--card);border-radius:30px;padding:clamp(30px,4vw,52px)}
.promise__badge{width:96px;height:96px;border-radius:50%;border:2px solid var(--bronze);display:flex;
flex-direction:column;align-items:center;justify-content:center;text-align:center}
.promise__badge b{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.05em;
line-height:1;color:var(--bronze-text)}
.promise__badge small{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--bronze-text);margin-top:4px}
.promise__l{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.promise h2{font-size:clamp(24px,3vw,36px);letter-spacing:-.045em;line-height:1.1}
.promise__r p{color:var(--slate)}
.promise__r p+p{margin-top:14px}
/* ---------- faq ---------- */
.faq__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px;margin-top:32px}
details{background:var(--card);border-radius:18px;padding:22px 26px;height:fit-content}
summary{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.03em;cursor:pointer;
list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
/* The hit area was the text line only — 22px tall on a phone. The negative margins cancel the
padding exactly, so nothing moves; the tappable region now fills the top of the card. */
margin:-22px -26px;padding:22px 26px;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-size:16px;color:var(--bronze-text);flex:none}
details[open] summary::after{content:"–"}
details p{font-size:15.5px;line-height:1.55;color:var(--slate);margin:14px 0 0}
/* ---------- final cta ---------- */
.final{padding-bottom:56px}
.final__inner{position:relative;background:var(--sand);border-radius:36px;
padding:clamp(40px,5.4vw,84px);text-align:center;overflow:hidden}
.final__grid{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(28,38,55,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(28,38,55,.05) 1px,transparent 1px);background-size:48px 48px}
.final__body{position:relative}
.final h2{font-size:clamp(30px,4vw,52px);text-wrap:balance}
.final p{font-size:clamp(16px,1.8vw,20px);line-height:1.5;color:var(--navy-ink);max-width:660px;
margin:20px auto 0}
.final .btn{margin-top:30px}
.final .btn:hover{box-shadow:0 16px 30px -14px rgba(28,38,55,.7)}
.final small{display:block;font-size:14px;color:var(--bronze-deep);margin-top:14px}
/* ---------- builders strip ---------- */
.bstrip{border:1px solid rgba(28,38,55,.2);border-radius:24px;padding:28px 32px;display:flex;
flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.bstrip p{font-size:17px;line-height:1.5;color:var(--navy-ink);max-width:680px}
.bstrip strong{font-family:var(--display);letter-spacing:-.02em}
.bstrip a{font-family:var(--display);font-weight:700;font-size:16px;color:var(--bronze-text);
display:inline-flex;align-items:center;min-height:44px}
.bstrip a:hover{color:var(--navy)}
/* ---------- footer ---------- */
.site-foot{position:relative;background:var(--navy);margin-top:16px;overflow:hidden;color:var(--on-dark)}
/* The footer painted a navy background but never set a text colour, so anything added to it
without its own colour rule inherits navy on navy and disappears. Nothing was visibly broken
because every child happened to set its own — this closes the trap. */
.site-foot__grid{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(216,203,180,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(216,203,180,.04) 1px,transparent 1px);background-size:64px 64px}
.site-foot .wrap{position:relative}
.foot__cols{padding-top:56px;padding-bottom:56px;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:32px}
.foot__cols h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--on-dark-3);font-weight:400;letter-spacing:.16em}
.foot__about p{font-size:14.5px;line-height:1.6;color:var(--on-dark-2);margin:16px 0 0;max-width:300px}
.foot__about .brand span{color:var(--paper);font-size:19px}
.foot__cols ul{display:flex;flex-direction:column;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.foot__cols a{font-size:15px;color:var(--on-dark)}
.foot__cols a:hover{color:var(--sand)}
.foot__base{padding-bottom:40px}
.foot__base div{border-top:1px solid var(--hair-on-dark);padding-top:20px;display:flex;
flex-wrap:wrap;gap:12px;justify-content:space-between;font-family:var(--mono);font-size:11.5px;
color:var(--on-dark-2)}
.foot__base span:first-child{letter-spacing:.08em}
/* ---------- reveal ---------- */
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(18px);
transition:opacity 620ms cubic-bezier(.22,.61,.36,1),transform 620ms cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
.js [data-reveal]{opacity:1;transform:none}
}
@media (max-width:760px){
.site-nav a:not(.btn){display:none}
.site-head .wrap{padding-top:10px;padding-bottom:10px}
.announce .wrap{justify-content:flex-start}
.record dl{grid-template-columns:1fr auto}
.bstrip,.countbar{flex-direction:column;align-items:flex-start}
}
/* ===================== MATCH FLOW ===================== */
.flow{min-height:100vh;display:flex;flex-direction:column;background:var(--cream)}
.flow__head{border-bottom:1px solid var(--hair)}
.flow__head .wrap{padding:16px var(--gut);display:flex;align-items:center;
justify-content:space-between;gap:16px}
.flow__save{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
.prog{height:3px;background:var(--hair);position:relative}
.prog__bar{height:100%;background:var(--navy);width:0;transition:width 320ms cubic-bezier(.22,.61,.36,1)}
.flow__body{flex:1;display:flex;align-items:flex-start;justify-content:center;
padding:clamp(28px,6vw,64px) var(--gut)}
.step{width:100%;max-width:680px}
.step[hidden]{display:none}
.step__no{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--bronze-text)}
.step h1{font-size:clamp(26px,3.6vw,40px);margin:12px 0 0;letter-spacing:-.045em;line-height:1.1}
.step__hint{font-size:16px;line-height:1.55;color:var(--slate);margin-top:12px;max-width:52ch}
.opts{display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.opts--2{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;background:var(--card);border:1px solid var(--hair-3);border-radius:16px;
padding:18px 22px;cursor:pointer;font-size:16.5px;line-height:1.4;
transition:border-color 140ms ease,background 140ms ease,transform 140ms ease}
.opt span small{display:block;font-size:14px;color:var(--slate);margin-top:4px}
.opt span:hover{border-color:var(--navy);transform:translateY(-1px)}
.opt input:checked+span{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.opt input:checked+span small{color:var(--on-dark)}
.opt input:focus-visible+span{outline:3px solid var(--bronze);outline-offset:3px}
.flow .input,.flow .select{max-width:420px;font-size:17px;padding:17px 18px;margin-top:28px}
.flow__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
margin-top:28px;max-width:560px}
.flow__grid .input{margin-top:8px;max-width:none}
.flow__grid label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted)}
.counting{display:flex;gap:10px;align-items:center;margin-top:26px;font-family:var(--mono);
font-size:12.5px;color:var(--slate);background:rgba(28,38,55,.05);border-radius:999px;
padding:9px 16px;width:fit-content}
.counting .dot{background:var(--ok-light)}
.nav{display:flex;gap:12px;align-items:center;margin-top:32px;flex-wrap:wrap}
.back{background:none;border:0;font:inherit;font-family:var(--display);font-weight:600;
font-size:15px;color:var(--slate);cursor:pointer;padding:10px 4px}
.back:hover{color:var(--navy)}
.next{background:var(--navy);color:var(--paper);border:0;font-family:var(--display);font-weight:700;
font-size:17px;padding:16px 32px;border-radius:999px;cursor:pointer;
transition:transform 160ms ease,background 160ms ease}
.next:hover{transform:translateY(-2px);background:var(--navy-hi)}
.next[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.err{color:#B23B2C;font-size:14px;margin-top:12px}
.privacy{font-size:13.5px;line-height:1.55;color:var(--slate);margin-top:20px;max-width:52ch}
.done{text-align:left;max-width:620px}
.done__mark{width:60px;height:60px;border-radius:50%;background:rgba(46,125,91,.12);
display:flex;align-items:center;justify-content:center;color:var(--ok-light);font-size:26px}
.done h1{margin-top:22px}
.done ol{margin:26px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:12px;
font-size:16px;line-height:1.55;color:var(--slate)}
.done ol strong{color:var(--navy)}
.done .note{margin-top:26px;padding:18px 22px;background:var(--card);border-radius:16px;
font-size:15px;line-height:1.55;color:var(--slate)}
.zero__mark{background:rgba(224,162,76,.16);color:#9A6A1E}
/* ===================== AREA PAGE ===================== */
.draft{background:#4A1410;color:#FFD9D2;border-bottom:3px solid #D96A5B;padding:16px 5vw;
font-family:var(--mono);font-size:13px;line-height:1.6}
.draft b{color:#FFB3A6;display:block;margin-bottom:6px;font-size:14px}
.draft ul{margin:8px 0;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.draft code{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:3px}
.draft span{display:block;margin-top:8px;color:#E5A79C}
.crumbs{padding-top:20px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;list-style:none;
font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:10px;color:var(--hair-4)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--navy)}
.crumbs [aria-current]{color:var(--navy)}
.area-hero{padding-top:26px;padding-bottom:10px;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(24px,4vw,48px);
align-items:start}
.area-hero h1{font-size:clamp(30px,4.2vw,52px);line-height:1.04}
.locator{font-family:var(--mono);font-size:12.5px;line-height:1.8;color:var(--slate);margin-top:14px}
.arch-tag{display:inline-block;background:var(--navy);color:var(--sand);border-radius:999px;
padding:3px 12px;margin-left:6px;letter-spacing:.06em;font-size:10.5px;text-transform:uppercase}
.area-cta{background:var(--card);border-radius:22px;padding:26px;
box-shadow:0 24px 50px -38px rgba(28,38,55,.7)}
.area-cta__count{font-size:16px;line-height:1.5;color:var(--slate);margin-bottom:16px}
.area-cta__count strong{font-family:var(--display);font-size:22px;letter-spacing:-.03em;
color:var(--navy);display:block}
.area-cta__disc{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.5}
/* The brief's closing step echoes the answers back before handing them to the mail client.
It reuses .facts so it looks like every other fact strip on the site. */
.brief-summary{margin:18px 0 4px}
.brief-summary:empty{display:none}
/* Flex rather than the grid .facts uses elsewhere. The number of answered questions varies, and an
auto-fit grid left a dead grey cell at the end of the last row whenever the count did not divide
by the column count. Letting the cells grow fills every row whatever the count. */
.brief-summary .facts{display:flex;flex-wrap:wrap}
.brief-summary .facts>div{flex:1 1 160px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px;
background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;
margin:26px 0 0}
.facts>div{background:var(--card);padding:16px 18px}
.fact-also{display:block;margin-top:4px;font-size:12px;color:var(--muted);line-height:1.35}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted)}
.facts dd{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--navy)}
.unver{font-family:var(--mono);font-size:10.5px;font-style:normal;color:#B23B2C;
border:1px dashed #B23B2C;border-radius:3px;padding:1px 5px;white-space:nowrap}
.bcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px;
margin:24px 0 0;padding:0;list-style:none}
.bcard{position:relative;background:var(--card);border-radius:20px;padding:24px 26px}
.bcard h3{font-size:19px;letter-spacing:-.03em;margin-top:6px}
.bcard__pick{position:absolute;top:18px;right:20px;display:flex;gap:7px;align-items:center;
font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);cursor:pointer}
.vbadge{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11.5px;
color:var(--ok-light);margin-top:10px;line-height:1.5}
.vdot{width:7px;height:7px;border-radius:50%;background:var(--ok-light);flex:none}
.bmeta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:16px 0 0;font-size:14px}
.bmeta dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);padding-top:2px}
.bmeta dd{margin:0;color:var(--slate)}
.empty-state{background:var(--card);border:1px dashed var(--hair-4);border-radius:20px;
padding:26px 28px;margin-top:24px;font-size:16px;line-height:1.6;color:var(--slate);max-width:70ch}
.empty-state strong{display:block;color:var(--navy);font-family:var(--display);font-size:18px;
letter-spacing:-.03em;margin-bottom:8px}
.empty-state .btn{margin-top:18px}
.topics{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;
font-size:15.5px;color:var(--slate)}
.conditions{max-width:68ch;font-size:16.5px;line-height:1.6;color:var(--slate);margin-top:20px}
.conditions h3,
/* Guides and rescue pages used to open with an h3 straight after the h1, which skips a level
for anyone navigating by headings. They are h2 now; this keeps them looking identical. */
.conditions h2{font-size:19px;margin:24px 0 8px;color:var(--navy);letter-spacing:-.03em}
.estates{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.estates li{background:var(--card);border:1px solid var(--hair);border-radius:999px;
padding:8px 16px;font-size:14.5px}
.nearby{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.nearby a{display:inline-block;background:var(--card);border:1px solid var(--hair);
border-radius:999px;padding:9px 18px;font-size:14.5px}
.nearby a:hover{border-color:var(--navy);color:var(--navy)}
/* ---------- builder profile ---------- */
.vstatus{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
letter-spacing:.14em;border-radius:999px;padding:6px 14px;margin-bottom:16px}
.vstatus.ok{background:rgba(46,125,91,.12);color:var(--ok-light)}
.vstatus.ok .vdot{background:var(--ok-light)}
.vstatus.pending{background:rgba(224,162,76,.16);color:#8A6118}
.vstatus.pending .vdot{background:#B8821F}
.vstatus.removed{background:rgba(178,59,44,.12);color:#B23B2C}
.vstatus.removed .vdot{background:#B23B2C}
.area-cta__count strong{margin-bottom:6px}
.facts dd.flagged{color:#B23B2C;font-weight:600}
.provenance{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--muted);
margin-top:14px;max-width:78ch}
.provenance a{color:var(--bronze-text)}
.step__q{font-family:var(--display);font-size:clamp(26px,3.6vw,40px);margin:12px 0 0;
letter-spacing:-.045em;line-height:1.1;font-weight:700}
.done .step__q{margin-top:22px}
.fee-rate{font-family:var(--mono);font-size:14px;color:var(--slate);margin-top:14px;
padding:12px 16px;background:var(--card);border-radius:10px;width:fit-content}
.xlink{margin:26px 0 0;padding:16px 20px;background:var(--card);border-radius:12px;
font-family:var(--display);font-weight:600;font-size:15.5px;width:fit-content;max-width:100%}
/* ===================== v7 DESIGN SYSTEM ===================== */
@keyframes bb-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* eyebrow with rule — v7's section signature */
.eyebrow--rule{display:inline-flex;align-items:center;gap:10px}
.eyebrow--rule::before{content:"";width:22px;height:1px;background:currentColor;display:inline-block}
/* hero with photography */
.v7hero{position:relative;background:var(--navy);overflow:hidden}
.v7hero__img{position:absolute;inset:-12% 0;background-size:cover;background-position:center 40%;
will-change:transform}
.v7hero__scrim{position:absolute;inset:0;
background:linear-gradient(90deg,rgba(20,28,42,.95) 0%,rgba(20,28,42,.86) 45%,rgba(20,28,42,.5) 100%)}
.v7hero__grid{position:absolute;inset:0;pointer-events:none;
background-image:linear-gradient(rgba(216,203,180,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(216,203,180,.05) 1px,transparent 1px);background-size:56px 56px}
.v7hero__inner{position:relative;max-width:var(--wrap);margin:0 auto;
padding:clamp(40px,5vw,80px) var(--gut) clamp(40px,5vw,72px);
display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:center}
.v7hero h1{color:#fff;font-size:clamp(32px,4.2vw,58px);line-height:1.02;letter-spacing:-.045em;
margin:22px 0 0;text-wrap:balance;max-width:14ch}
.v7hero h1 em{font-style:normal;color:var(--sand)}
.v7hero__sub{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--on-dark);
max-width:540px;margin:20px 0 0}
.v7ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:24px 0 0;padding:0;list-style:none}
.v7ticks li{display:flex;align-items:center;gap:8px;font-size:15px;color:#fff}
.v7ticks li::before{content:"✓";color:var(--ok-dark)}
/* dark section with photo + scrim */
.v7dark{position:relative;background:var(--navy);overflow:hidden}
.v7dark__img{position:absolute;inset:-15% 0;background-size:cover;background-position:center;
will-change:transform}
.v7dark__scrim{position:absolute;inset:0;background:rgba(20,28,42,.86)}
.v7dark__inner{position:relative;max-width:var(--wrap);margin:0 auto;
padding:clamp(56px,7vw,96px) var(--gut)}
.v7dark h2{color:#fff}
.v7dark p{color:var(--on-dark)}
/* ...but not inside a light card sitting on the dark section: on-dark text on a white card
measured 1.30:1. Scope the light-on-dark rule back out of the card. */
.v7dark .briefcard p,.v7dark .briefcard__sub,
.v7dark .record p,.v7dark .record__foot{color:var(--slate)}
/* regulator marquee */
.marquee{background:#fff;border-block:1px solid var(--hair);overflow:hidden}
.marquee__inner{max-width:var(--wrap);margin:0 auto;padding:18px var(--gut);
display:flex;gap:28px;align-items:center}
.marquee__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--bronze-text);flex:none}
.marquee__track{flex:1;min-width:0;overflow:hidden;position:relative;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__run{display:flex;gap:48px;align-items:center;width:max-content;
animation:bb-marquee 34s linear infinite;white-space:nowrap}
.marquee__run span{font-family:var(--display);font-weight:800;font-size:15px;
letter-spacing:-.03em;color:var(--slate)}
/* numbered step cards with imagery */
.v7steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
gap:18px;margin:44px 0 0;padding:0;list-style:none}
.v7step{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
transition:transform 180ms ease,box-shadow 180ms ease}
.v7step:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(28,38,55,.6)}
.v7step__img{height:180px;overflow:hidden;position:relative;background:#2E3B4F}
.v7step__img>span{position:absolute;inset:0;background-size:cover;background-position:center;
transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
.v7step:hover .v7step__img>span{transform:scale(1.06)}
.v7step__body{padding:24px 26px 26px}
.v7step__n{width:30px;height:30px;border-radius:8px;background:var(--navy);color:var(--sand);
font-family:var(--display);font-weight:800;font-size:14px;display:flex;align-items:center;
justify-content:center;flex:none}
.v7step__head{display:flex;align-items:center;gap:10px}
.v7step__head b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.035em}
.v7step p{font-size:15px;line-height:1.55;color:var(--slate);margin:12px 0 0}
/* stat band */
.v7stats{position:relative;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:28px;
max-width:var(--wrap);margin:0 auto;padding:clamp(48px,6vw,80px) var(--gut)}
.v7stat{border-left:2px solid var(--sand);padding-left:20px}
.v7stat b{display:block;font-family:var(--display);font-weight:800;
font-size:clamp(40px,5vw,60px);letter-spacing:-.05em;color:#fff;line-height:1;
font-variant-numeric:tabular-nums}
.v7stat span{display:block;font-size:14.5px;color:var(--on-dark-mid);margin-top:8px;line-height:1.45}
/* founder letter */
.letter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
gap:clamp(32px,5vw,72px);align-items:start}
.letter__aside{position:sticky;top:90px}
.letter__portrait{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:#2E3B4F;
background-size:cover;background-position:center}
.letter__body{max-width:640px}
.letter__body p{font-size:18px;line-height:1.6;color:var(--navy-ink);margin:16px 0 0}
.letter__body h3{font-size:22px;font-weight:700;letter-spacing:-.04em;margin:32px 0 0}
.letter__sign{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.03em;
margin-top:28px}
/* review cards */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
gap:16px;margin:40px 0 0;padding:0;list-style:none}
.review{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:26px 28px;
display:flex;flex-direction:column;gap:16px;
transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.review:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(28,38,55,.5);
border-color:var(--hair-3)}
.review--dark{background:var(--navy)}
.review.review--dark p{color:#E3E7EC} /* raised above `.review p`, which follows it and won at equal specificity (1.21:1) */
.review.review--dark .review__who b{color:#fff}
.review.review--dark .review__who span:not(.review__av){color:var(--on-dark-2)}
/* the avatar keeps navy-on-sand; it is a light chip even on the dark card */
.stars{color:var(--star);font-size:15px;letter-spacing:2px}
.review p{font-size:16px;line-height:1.6;color:var(--navy-ink);margin:0}
.review__who{display:flex;align-items:center;gap:12px;margin-top:auto}
.review__av{width:40px;height:40px;border-radius:50%;background:var(--sand);color:var(--navy);display:flex;
align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:14px;flex:none}
.review__who b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px}
.review__who span:not(.review__av){font-size:13px;color:var(--muted)}
/* :not(.review__av) because this rule follows .review__av and was repainting the initial */
.sample-note{font-family:var(--mono);font-size:15px;line-height:1.55;color:var(--bronze-text);margin:14px 0 0}
/* sticky bottom CTA */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--navy);
border-radius:var(--r-card);padding:12px 14px 12px 18px;display:flex;align-items:center;
justify-content:space-between;gap:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
transform:translateY(140%);opacity:0;
transition:transform 320ms cubic-bezier(.22,.61,.36,1),opacity 320ms ease}
.sticky-cta.is-in{transform:none;opacity:1}
.sticky-cta b{display:block;font-family:var(--display);font-weight:700;font-size:14.5px;color:#fff;
letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta small{display:block;font-size:12px;color:var(--on-dark-2);white-space:nowrap}
.sticky-cta a{flex:none;background:var(--sand);color:var(--navy);font-family:var(--display);
font-weight:700;font-size:14px;padding:11px 16px;border-radius:var(--r-sm)}
@media(min-width:900px){.sticky-cta{left:auto;right:20px;bottom:20px;max-width:420px}}
/* stagger */
.js [data-stagger]>*{opacity:0;transform:translateY(14px);
transition:opacity 520ms cubic-bezier(.22,.61,.36,1),transform 520ms cubic-bezier(.22,.61,.36,1)}
.js [data-stagger].is-in>*{opacity:1;transform:none}
.js [data-stagger].is-in>*:nth-child(2){transition-delay:70ms}
.js [data-stagger].is-in>*:nth-child(3){transition-delay:140ms}
.js [data-stagger].is-in>*:nth-child(4){transition-delay:210ms}
.js [data-stagger].is-in>*:nth-child(5){transition-delay:280ms}
.js [data-stagger].is-in>*:nth-child(6){transition-delay:350ms}
@media (prefers-reduced-motion:reduce){
.marquee__run,.sticky-cta{animation:none!important}
.js [data-stagger]>*{opacity:1;transform:none;transition:none}
.v7hero__img,.v7dark__img{transform:none!important}
}
/* ---- v7 components used by the homepage ---- */
.eyebrow--dark{color:var(--sand)}
.ok{color:var(--ok-dark)}
.briefcard{background:#fff;border-radius:var(--r-panel);padding:clamp(22px,2.4vw,30px);
box-shadow:0 40px 80px -30px rgba(0,0,0,.6);position:relative;overflow:hidden;
width:100%;box-sizing:border-box}
.briefcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--sand)}
.briefcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.briefcard__title{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.04em}
.briefcard__step{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
background:var(--card-warm);color:var(--navy);padding:6px 10px;border-radius:6px}
.briefcard__sub{font-size:14px;color:var(--slate);margin-top:6px;line-height:1.5}
.briefcard .chips{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:8px}
.briefcard .chip span{border-radius:var(--r-sm);padding:12px 14px;text-align:center;display:block}
.briefcard .input{border-radius:var(--r-sm);padding:14px;margin-top:8px}
.briefcard__marks{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
.briefcard__marks li{font-size:12.5px;color:var(--slate);display:flex;align-items:center;gap:6px}
.briefcard__marks li::before{content:"✓";color:var(--ok-light)}
.submit--navy{background:var(--navy);color:#fff;border-radius:var(--r-btn)}
.submit--navy:hover{background:var(--navy-hi)}
.btn--hero{font-size:16px;padding:16px 30px}
.point--v7{position:relative;display:block;text-align:center;background:rgba(246,243,236,.05);
border:1px solid rgba(246,243,236,.14);border-radius:var(--r-card);padding:26px 24px;
transition:background 180ms ease,transform 180ms ease}
.point--v7:hover{background:rgba(246,243,236,.1);transform:translateY(-4px)}
.point__ic{width:56px;height:56px;border-radius:14px;background:var(--sand);margin:0 auto;
display:flex;align-items:center;justify-content:center;color:#1C2637;--mark-cut:#D8CBB4}
.point__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
color:var(--sand);margin-top:18px}
.point--v7 b{display:block;font-family:var(--display);font-weight:700;font-size:18px;
letter-spacing:-.03em;color:#fff;margin-top:6px}
.point--v7 p{font-size:14.5px;line-height:1.55;color:var(--on-dark-2);margin:10px 0 0}
.checkphoto{border-radius:var(--r-card);overflow:hidden;min-height:320px;position:relative;
background:#2E3B4F;background-size:cover;background-position:center}
.checkphoto::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,28,42,0) 30%,rgba(20,28,42,.9) 100%)}
.checkphoto__body{position:absolute;left:26px;right:26px;bottom:24px;z-index:1}
.checkphoto__body b{display:block;font-family:var(--display);font-weight:700;font-size:22px;
letter-spacing:-.04em;color:#fff;line-height:1.15}
.checkphoto__body span{display:block;font-size:14.5px;color:var(--on-dark-mid);margin-top:8px;line-height:1.5}
.record--float{box-shadow:0 30px 60px -34px rgba(0,0,0,.6);border-radius:var(--r-card);
animation:bb-float 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.record--float{animation:none}}
.type--glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.type--glass b{color:#fff}
.type--glass p{color:var(--on-dark-mid)}
.type--glass:hover{background:rgba(255,255,255,.11)}
.promise__badge--v7{width:120px;height:120px;border-width:3px;position:relative;flex:none}
.promise__badge--v7::after{content:"";position:absolute;inset:7px;border-radius:50%;
border:1px dashed rgba(138,123,94,.6)}
.promise__badge--v7 b{font-size:32px}
.type{border-radius:var(--r-card)}
.v7hero .pill{background:rgba(28,38,55,.5);border-color:rgba(216,203,180,.45);color:var(--sand)}
/* Same trap as the footer: the pill sits on a dark scrim but inherited navy, so only its
explicitly-styled span was visible. */
/* ---------- process steps (service pages) ----------
These classes were used by build-services.js and never defined, so the list rendered with the
browser's own marker AND the custom number beside it: "1. 01". A vertical numbered list rather
than the homepage's image cards, because these steps have no imagery and are read in order. */
.steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:0;
counter-reset:none;color:var(--slate)}
.steps>li{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:0 0 26px;position:relative}
.steps>li:last-child{padding-bottom:0}
/* the connecting rule, drawn behind the number chips */
.steps>li::before{content:"";position:absolute;left:22px;top:34px;bottom:0;width:1px;
background:var(--hair-2)}
.steps>li:last-child::before{display:none}
.sn{position:relative;z-index:1;width:46px;height:34px;border-radius:999px;background:var(--card);
border:1px solid var(--hair-2);display:inline-flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--bronze-text)}
.steps>li>div{padding-top:4px;min-width:0}
.steps>li b{display:block;font-family:var(--display);font-weight:700;font-size:17px;
letter-spacing:-.03em;color:var(--navy)}
.steps>li p{margin:7px 0 0;font-size:15.5px;line-height:1.6;color:var(--slate)}
/* ---------- prose block ----------
A readable column for generated body content — region-hub findings, rescue-page bodies.
Matches .conditions so the two are interchangeable. */
.prose{max-width:68ch;font-size:16.5px;line-height:1.6;color:var(--slate)}
.prose>p{margin:0 0 14px}
.prose>p:last-child{margin-bottom:0}
.prose>ul.nearby{margin:0 0 16px}
.prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;
text-decoration-color:var(--hair-3)}
.prose a:hover{text-decoration-color:currentColor}
/* ---------- rule callout ----------
A stated commitment or rule worth lifting out of the running text. The inline styles on
/privacy/ set the accent; this supplies the shape. */
.rule-callout{border-radius:var(--r-panel);padding:18px 22px;font-size:16px;line-height:1.6;
color:var(--navy);max-width:68ch}
.rule-callout p{margin:0}
.rule-callout p+p{margin-top:10px}
.rule-callout strong{font-weight:700}
/* ---------- guide article ----------
Guides are the longest reading on the site and were the flattest: h1, lede, then an undivided
run of text. This gives them a head, a jump list and a section rhythm without dressing them up
as something they are not — they are reference pages, read partly and scanned mostly. */
.guide-head{padding-top:clamp(24px,4vw,40px);padding-bottom:clamp(20px,3vw,28px);
border-bottom:1px solid var(--hair)}
.guide-head .eyebrow{display:block}
.guide-head h1{margin-top:10px;max-width:20ch}
.guide-head .lede{color:var(--slate);margin-top:14px;max-width:66ch}
/* Mid-guide conversion block. Sits inside the prose, so it reads as an aside rather than a banner:
card ground, bronze rule on the leading edge, no full-bleed section. */
.midcta{margin:34px 0;padding:22px 24px 24px;background:var(--card);
border:1px solid var(--hair-4);border-left:3px solid var(--bronze);border-radius:12px}
.midcta__k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--bronze-text);margin:0}
.midcta__h{font-size:1.15rem;line-height:1.3;margin:8px 0 0;max-width:34ch}
.midcta p:not(.midcta__k){margin:10px 0 0;color:var(--slate);max-width:60ch}
.midcta .btn{margin-top:16px}
.bylines{margin-top:16px;font-family:var(--mono,ui-monospace,monospace);font-size:12px;
letter-spacing:.04em;text-transform:uppercase;color:var(--bronze-text)}
.bylines time{color:inherit}
.guide-toc{margin-top:26px;border-left:2px solid var(--bronze);padding:2px 0 2px 18px;
max-width:60ch}
.guide-toc__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--bronze-text);margin:0}
.guide-toc ol{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;
font-size:15.5px;color:var(--slate)}
.guide-toc a{color:var(--navy);text-decoration:none}
.guide-toc a:hover{color:var(--bronze-text);text-decoration:underline;text-underline-offset:3px}
.guide-body{padding-top:clamp(22px,3vw,30px)}
/* a hairline above each section gives the page a beat without adding furniture */
.guide-body .conditions h2{position:relative;padding-top:22px;margin-top:30px;font-size:21px}
.guide-body .conditions h2::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;
background:var(--bronze)}
.guide-body .conditions>h2:first-child{margin-top:0}
/* anchored headings must clear the sticky header when jumped to */
.guide-body h2[id]{scroll-margin-top:90px}
/* ---------- read-next cards ---------- */
.nextgrid{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px;
grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.nextgrid a{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--card);
border:1px solid var(--hair);border-radius:var(--r-card);padding:20px 22px;text-decoration:none;
transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.nextgrid a:hover{transform:translateY(-3px);border-color:var(--hair-3);
box-shadow:0 20px 38px -28px rgba(28,38,55,.55)}
.nextgrid__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--bronze-text)}
.nextgrid b{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.03em;
line-height:1.25;color:var(--navy)}
.nextgrid__d{font-size:14px;line-height:1.5;color:var(--slate)}
@media (prefers-reduced-motion:reduce){.nextgrid a:hover{transform:none}}
/* ---------- suits / does not suit ----------
Two outcomes read faster side by side than as two sentences in a paragraph, and the point of
the section is the comparison. Semantic colour only on the rule, so it still reads if colour
is not perceived. */
.fit{display:grid;gap:14px;margin-top:20px;
grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.fit__col{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);
padding:20px 22px;border-top:3px solid var(--hair-3)}
.fit__col--yes{border-top-color:var(--ok-light)}
.fit__col--no{border-top-color:var(--bronze)}
.fit__k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--bronze-text)}
.fit__col--yes .fit__k{color:var(--ok-light)}
.fit__col p{margin:9px 0 0;font-size:15.5px;line-height:1.6;color:var(--slate)}
/* headings inside a .prose block — the rescue state bodies are authored as raw /
, and the
reset zeroes heading margins, so without this they sit flush against the paragraph above. */
.prose h2{font-size:21px;margin:28px 0 10px;color:var(--navy);position:relative;padding-top:20px}
.prose h2::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;
background:var(--bronze)}
.prose>h2:first-child{margin-top:0;padding-top:0}
.prose>h2:first-child::before{display:none}
.prose h3{font-size:18px;margin:22px 0 8px;color:var(--navy)}
.prose strong{color:var(--navy)}
/* ---------- links in running text ----------
Global `a` is navy with no underline, which is right for nav, cards and buttons. Inside body
copy it is not: a navy link sitting in slate paragraph text is distinguishable only by a slight
darkening, which fails both the WCAG "not by colour alone" rule and the plainer test of whether
a reader can see it is a link. Underline them where they sit in prose, and nowhere else. */
.conditions a,.prose a,.lede a,.guide-body a,.fit p a,.steps p a,
details p a,.area-body a,.provenance a,.empty-state a,.sample-note a{
text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;text-decoration-color:var(--hair-3)}
.conditions a:hover,.prose a:hover,.lede a:hover,.guide-body a:hover,.fit p a:hover,
.steps p a:hover,details p a:hover,.area-body a:hover,.provenance a:hover,
.empty-state a:hover,.sample-note a:hover{text-decoration-color:currentColor}
/* ---------- paragraph rhythm in body copy ----------
The reset sets `p{margin:0}`, which is right as a baseline but was never restored inside the
text blocks. Every multi-paragraph passage on the site — guides, state hubs, service pages,
area bodies — ran its paragraphs together with no separation. This is the single largest
readability change in the design pass and it was invisible until the pages got long enough
to have several paragraphs in a row. */
.conditions>p{margin:0 0 15px}
.conditions>p:last-child{margin-bottom:0}
.conditions>ul,.conditions>ol{margin:0 0 15px}
.area-body>p{margin:0 0 15px}
.area-body>p:last-child{margin-bottom:0}
.fit__col p+p{margin-top:10px}