/* Secure Claims Group, shared stylesheet. Tokens: 08-design-system/tokens.json is the source of record.
   One accent (the logo sky blue), one dark ground, Figtree for everything read, Anton for the giant word only. */
/* Fonts, self hosted (see assets/fonts/README.md). Figtree is one variable file covering weights 400 to 800;
   the unicode ranges are the ones Google Fonts serves, so only the latin file loads for English pages. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* build.py inlines this file as critical CSS minus the blocks between "@defer" and "@end" markers, which hold
   sections that never sit in the first screen. Keep the markers on their own lines. */
:root{
  --canvas:#F6F9FB; --surface:#FCFDFE; --tint:#E6F5FB;
  --ink:#0E2740; --ink-soft:#46596B; --line:#D5E0E8;
  --accent:#74D8F7; --accent-ink:#0E2740; --accent-text:#0B7599;
  --ground-dark:#061A2E; --surface-dark:#0F2A44; --ink-on-dark:#EEF6FA; --soft-on-dark:#A9BFD0; --word-on-dark:#0F2E4C;
  --danger:#B3261E;
  --font-body:"Figtree","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --fs-s:.875rem; --fs-m:1rem; --fs-l:1.25rem; --fs-xl:1.5625rem;
  --fs-2xl:clamp(1.75rem,1.4rem + 1.4vw,2.44rem);
  --fs-3xl:clamp(2.1rem,1.5rem + 2.6vw,3.05rem);
  --fs-4xl:clamp(2.4rem,1.6rem + 3.6vw,3.8rem);
  --fs-giant:clamp(6rem,18vw,15rem);
  --r-s:10px; --r-m:20px; --r-l:28px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(6,26,46,.06),0 8px 24px rgba(6,26,46,.08);
  --shadow-2:0 2px 4px rgba(6,26,46,.08),0 24px 56px rgba(6,26,46,.12);
  --section:clamp(48px,6vw,128px);
  --gap:clamp(16px,2vw,32px);
  --shell:1200px;
  --callbar-h:60px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body);font-size:clamp(1rem,.95rem + .3vw,1.125rem);line-height:1.6;overflow-x:clip}
img,svg{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:var(--accent-text);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--accent)}
.skip{position:absolute;left:12px;top:-200px;z-index:2000;background:var(--accent);color:var(--accent-ink);font-weight:700;padding:12px 18px;border-radius:var(--r-pill);text-decoration:none;box-shadow:var(--shadow-2)}
.skip:focus,.skip:focus-visible{top:12px;outline:3px solid var(--ink);outline-offset:2px}
#main:focus{outline:none}
h1,h2,h3,h4{line-height:1.15;margin:0;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--fs-4xl);letter-spacing:-.02em;line-height:1.05}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-l);font-weight:700}
h4{font-size:var(--fs-m);font-weight:700}
p{margin:0;max-width:65ch;text-wrap:pretty}
ul,ol{margin:0;padding-left:1.2em;max-width:65ch}
li+li{margin-top:6px}
.lead{font-size:var(--fs-l);color:var(--ink-soft)}
/* House accent (Jeremy, 2026-09-23): the one point in a line that must stand out, like "Do you?" in the home H1.
   Light grounds use the text accent for contrast; dark grounds use the sky blue. One .hl per heading at most. */
.hl{color:var(--accent-text)}
.on-dark .hl,.hero .hl,.page-hero .hl{color:var(--accent)}
.shell{width:min(var(--shell),100% - 2*clamp(16px,4vw,40px));margin-inline:auto}
.narrow{width:min(760px,100%)}
section{padding-block:var(--section);scroll-margin-top:16px}
.stack>*+*{margin-top:16px}
.num{font-variant-numeric:tabular-nums lining-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:var(--fs-s);color:var(--ink-soft)}
.on-dark{background:var(--ground-dark);color:var(--ink-on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--ink-on-dark)}
.on-dark .lead,.on-dark .small{color:var(--soft-on-dark)}
.on-dark a:not(.btn){color:var(--accent)}
.tinted{background:var(--tint)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r-pill);font-weight:700;font-size:var(--fs-m);letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform 140ms var(--ease),background-color 140ms var(--ease),border-color 140ms var(--ease);white-space:nowrap;font-family:inherit}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (hover:hover){.btn-primary:hover{background:#8FE0F9;border-color:#8FE0F9}}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.on-dark .btn-secondary{color:var(--ink-on-dark);border-color:rgba(238,246,250,.5)}
@media (hover:hover){.btn-secondary:hover{border-color:currentColor}}
.btn-secondary:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:20px;height:20px;flex:none}

/* Icons (round three, 2026-09-24): one set, Lucide 1.48.0, inlined by build.py. One stroke width (2), round caps and
   joins, currentColor. Small marks sit in a round tinted disc; the large ones (120 px or more) sit centered in a tinted
   rounded square. No icon is framed any other way. */
.ico-disc{--d:48px;display:inline-grid;place-items:center;flex:none;width:var(--d);height:var(--d);border-radius:50%;background:var(--tint);color:var(--accent-text)}
.ico-disc svg{width:50%;height:50%}
.ico-frame{--f:200px;display:grid;place-items:center;flex:none;width:var(--f);max-width:100%;aspect-ratio:1;border-radius:var(--r-l);background:var(--tint);color:var(--accent-text)}
.ico-frame svg{width:clamp(120px,62%,168px);height:auto}
.ico-frame.fill{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.ico-frame.fill svg{width:clamp(120px,32%,192px)}
.how-thumb .ico-frame svg{width:128px}   /* kept in the critical block: sizing it late shifted the phone layout */
/* On a ground that is already the tint (cost, licensed, tinted bands) the square takes the raised surface instead, so
   it still reads as the same rounded square. */
.cost .ico-frame,.licensed .ico-frame,.tinted .ico-frame:not(.fill){background:var(--surface);box-shadow:var(--shadow-1)}

/* Header */
.site-header{background:var(--ground-dark);color:var(--ink-on-dark);position:relative;z-index:40}
.site-header .shell{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:80px;padding-block:10px}
.brand{display:inline-flex;align-items:center}
.brand img{width:120px;height:68px;object-fit:contain}
.nav{display:flex;align-items:center;gap:8px 28px}
.nav a:not(.btn){color:var(--ink-on-dark);text-decoration:none;font-weight:500;padding:8px 0}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--accent)}
@media (hover:hover){.nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:.3em}}
.nav .btn{margin-left:8px;min-height:44px;flex:none}
.menu-btn{display:none;background:none;border:1.5px solid rgba(238,246,250,.5);color:var(--ink-on-dark);border-radius:var(--r-pill);min-height:44px;padding:0 18px;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:899px){
  .nav a:not(.btn),.nav .btn{display:none}
  .menu-btn{display:inline-flex;align-items:center;gap:8px}
  .nav.open{position:absolute;left:0;right:0;top:100%;min-height:calc(100vh - 80px);min-height:calc(100svh - 80px);align-content:start;background:var(--ground-dark);display:grid;gap:0;padding:8px clamp(16px,4vw,40px) 20px;border-top:1px solid rgba(238,246,250,.12);box-shadow:var(--shadow-2)}
  .nav.open a:not(.btn){display:block;padding:14px 0;border-bottom:1px solid rgba(238,246,250,.1);font-size:var(--fs-l)}
  .nav.open .menu-btn{position:absolute;right:clamp(16px,4vw,40px);top:-62px}
  .nav.open .btn{display:inline-flex;margin:16px 0 0;justify-self:start}
}

/* Breadcrumb */
.crumbs{font-size:var(--fs-s);color:var(--soft-on-dark);margin-bottom:20px}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;max-width:none}
.crumbs li+li{margin:0}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.5}
.crumbs a{color:inherit}
.crumbs [aria-current]{color:var(--ink-on-dark)}
.light .crumbs{color:var(--ink-soft)}
.light .crumbs [aria-current]{color:var(--ink)}

/* Page hero (inner pages): the layered stage in a smaller frame */
.page-hero{background:var(--ground-dark);color:var(--ink-on-dark);padding-block:clamp(32px,4vw,64px) clamp(48px,6vw,96px);overflow:hidden;position:relative}
.page-hero .shell{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,4vw,64px);align-items:center}
.page-hero h1{color:var(--ink-on-dark)}
.page-hero h1 .q{color:var(--accent)}
.page-hero .lead{color:var(--soft-on-dark);max-width:48ch}
.page-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.page-hero .stage{position:relative;min-height:clamp(280px,32vw,420px);padding-bottom:clamp(40px,5vw,72px)}
.page-hero .btn-secondary{color:var(--ink-on-dark);border-color:rgba(238,246,250,.5)}
.word::before{content:attr(data-word)}
.page-hero .word{position:absolute;left:-.04em;bottom:-.14em;margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(5rem,14vw,11rem);line-height:1;letter-spacing:-.01em;color:var(--word-on-dark);text-transform:uppercase;user-select:none;pointer-events:none;z-index:0;max-width:none}
.page-hero .frame{position:relative;z-index:1;width:min(100%,520px);margin-left:auto;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;box-shadow:0 0 0 1px rgba(238,246,250,.08),var(--shadow-2)}
.page-hero .frame img{width:100%;height:100%;object-fit:cover}
.page-hero .frame.icon{background:var(--tint);display:grid;place-items:center;padding:8%}
.page-hero .frame.icon img{width:70%;height:auto;object-fit:contain;border-radius:var(--r-m)}
/* Round three: an AI generated hero photo says so under the frame (fire page), in the voice of the case cards. */
.page-hero .frame-note{position:relative;z-index:1;width:min(100%,520px);margin:10px 0 0 auto;font-size:var(--fs-s);color:var(--soft-on-dark);max-width:none}
.page-hero.plain .shell{grid-template-columns:1fr}
.page-hero.plain .stage{display:none}
@media (max-width:899px){
  .page-hero .shell{grid-template-columns:1fr}
  .page-hero .stage{min-height:0;margin-top:12px;padding-top:12vw}
  .page-hero .word{bottom:auto;top:0;font-size:22vw}
  .page-hero .frame{width:100%}
}

/* Two column prose block used on inner pages */
.split .shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.split.rev .shell{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.sticky{position:sticky;top:24px}
@media (max-width:899px){.split .shell,.split.rev .shell{grid-template-columns:1fr}.sticky{position:static}}

/* Miss list: what the insurer misses, with a small mark */
.miss{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:none}
.miss li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;background:var(--surface);border-radius:var(--r-s);padding:16px 18px;box-shadow:var(--shadow-1);margin:0}
.miss li b{display:block}
.miss li span{color:var(--ink-soft);font-size:var(--fs-s)}
.miss li svg{width:28px;height:28px;color:var(--accent-text)}
.doc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;max-width:none}
.doc li{display:flex;gap:10px;align-items:start;margin:0;color:var(--ink);font-size:var(--fs-m)}
.doc li::before{content:"";flex:none;width:18px;height:18px;margin-top:5px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2740' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
@media (max-width:640px){.doc{grid-template-columns:1fr}}

/* Statute card, license card */
.law{margin:0;background:var(--surface);border-radius:var(--r-s);padding:18px 20px;color:var(--ink-soft);font-size:var(--fs-s);line-height:1.55;box-shadow:var(--shadow-1)}
.law cite{display:block;font-style:normal;font-weight:700;color:var(--accent-text);margin-top:10px}
.lic{display:grid;gap:12px}
.lic div{background:var(--surface);border-radius:var(--r-s);padding:14px 18px;box-shadow:var(--shadow-1)}
.lic b{display:block}
.lic span{color:var(--ink-soft);font-size:var(--fs-s)}

/* Icon row: a damage type or a step with its icon */
.icon-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);max-width:none}
.icon-list li{margin:0}
.icon-list a{display:grid;gap:10px;text-decoration:none;color:var(--ink);padding:20px;border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-1);height:100%;transition:transform 160ms var(--ease)}
@media (hover:hover){.icon-list a:hover{transform:translateY(-3px)}}
.icon-list .ico-disc{--d:72px;color:var(--accent-text)}
.icon-list h3{font-size:var(--fs-l)}
.icon-list span{color:var(--ink-soft);font-size:var(--fs-s)}

/* FAQ accordion */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 4px;font-weight:700;font-size:var(--fs-m)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--accent-text),var(--accent-text)) center/100% 2px no-repeat,linear-gradient(var(--accent-text),var(--accent-text)) center/2px 100% no-repeat;transition:transform 260ms var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc .a{padding:0 4px 18px;color:var(--ink-soft);font-size:var(--fs-m)}
.acc .a p+p,.acc .a p+blockquote,.acc .a blockquote+p{margin-top:10px}
.acc .a .law{margin-top:10px}
@media (prefers-reduced-motion:no-preference){.acc details[open] .a{animation:acc-in 220ms var(--ease) both}}
@keyframes acc-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faq-group{margin-top:40px}
.faq-group h3{font-size:var(--fs-xl);margin-bottom:12px}
.faq-group+.faq-group{margin-top:48px}

/* Case cards: flip on click, tap, Enter or Space only (the card is a button); hover only lifts it. Keyboard reachable. The back holds the facts. Kept out of the deferred blocks
   because /results shows them in the first view (no layout shift when site.css swaps in). */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:40px}
.flip{perspective:1400px;min-height:340px;container-type:inline-size}
.flip button{all:unset;display:block;width:100%;height:100%;cursor:pointer;border-radius:var(--r-m)}
.flip button:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
.flip .inner{position:relative;display:grid;width:100%;height:100%;min-height:340px;transform-style:preserve-3d;transition:transform 560ms var(--ease)}
.flip.is-flipped .inner{transform:rotateY(180deg)}
.flip{transition:transform 140ms var(--ease)}
.flip .face{transition:box-shadow 140ms var(--ease)}
@media (hover:hover){.flip:not(.soon):hover{transform:translateY(-3px)}.flip:not(.soon):hover .face{box-shadow:var(--shadow-2)}}
@media (prefers-reduced-motion:reduce){.flip,.flip .inner{transition:none}.flip:not(.soon):hover{transform:none}}
/* Both faces share one grid cell, so the card grows to fit the longer face instead of clipping the back at narrow widths. */
.flip .face{grid-area:1/1;position:relative;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-m);overflow:hidden}
.flip .front{background:var(--surface-dark);color:var(--ink-on-dark);isolation:isolate}
.flip .front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.flip .front .scrim{position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,rgba(6,26,46,.94),rgba(6,26,46,0));z-index:1}
.flip .front .t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;display:grid;gap:4px}
.flip .front h3{color:var(--ink-on-dark);font-size:var(--fs-xl)}
.flip .front span{color:var(--soft-on-dark);font-size:var(--fs-s)}
.flip .front .turn{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(6,26,46,.7);color:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(238,246,250,.2)}
.flip .front .turn svg{width:18px;height:18px}
.flip .back{transform:rotateY(180deg);background:var(--ground-dark);color:var(--ink-on-dark);padding:24px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 0 0 1px rgba(238,246,250,.1)}
.flip .back dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:var(--fs-s)}
.flip .back dt{color:var(--soft-on-dark)}
.flip .back dd{margin:0;font-weight:700}
.flip .back .res{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(238,246,250,.14)}
.flip .back .res span{display:block;color:var(--soft-on-dark);font-size:var(--fs-s)}
.flip .back .res b{display:block;font-size:var(--fs-2xl);font-size:min(var(--fs-2xl),9.5cqi);line-height:1;letter-spacing:-.02em;font-weight:800}
.flip .back .res b.win{color:var(--accent)}
.flip .back .res b.lose{color:var(--soft-on-dark);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--danger)}
.flip .back p{color:var(--soft-on-dark);font-size:var(--fs-s);margin-top:12px}
.flip.soon .inner{transform:none !important}
.flip.soon .front{background:var(--tint);color:var(--ink);display:grid;place-items:center;text-align:center;padding:24px;border:1.5px dashed var(--line)}
.flip.soon .front h3{color:var(--ink);font-size:var(--fs-l)}
.flip.soon .front span{color:var(--ink-soft)}
.flip.soon .front .ico-disc{--d:96px;margin:0 auto 10px;color:var(--accent-text);background:var(--surface)}
.cases .note{grid-column:1/-1;color:var(--ink-soft);font-size:var(--fs-s);margin-top:8px}
@media (max-width:899px){.cases{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cases{grid-template-columns:1fr}.flip,.flip .inner{min-height:300px}.flip.soon,.flip.soon .inner{min-height:200px}}
.flip .front .rep{font-size:.75rem;letter-spacing:.02em;color:var(--soft-on-dark);margin-top:6px}
/* Case card face: the first number and the final number, readable without turning the card (steal row 4) */
.flip .front .face-nums{display:flex;align-items:flex-end;gap:12px;margin-top:10px;color:var(--ink-on-dark)}
.flip .front .face-nums>span:not(.to){display:grid;gap:2px}
.flip .front .face-nums small{font-size:.8125rem;color:var(--soft-on-dark);letter-spacing:.01em}
.flip .front .face-nums b{font-size:var(--fs-xl);font-weight:800;line-height:1;letter-spacing:-.01em;color:var(--ink-on-dark)}
.flip .front .face-nums>span:last-child b{color:var(--accent)}
.flip .front .face-nums .to{color:var(--soft-on-dark);font-size:var(--fs-s);padding-bottom:2px}
.flip .front .scrim{height:78%}

.cases-more{margin-top:28px}
.results-page .cases{margin-top:24px}
.results-page .cases-group{margin-top:clamp(48px,6vw,96px)}

/* @defer */
/* Reviews: a rail of quote cards, the first one larger */
.reviews .shell>.stack{max-width:60ch}
.rail{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-top:40px}
.review{margin:0;background:var(--surface);border-radius:var(--r-m);padding:26px 28px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:18px;position:relative}
.review .mark{font-family:var(--font-display);font-size:4rem;line-height:.6;color:var(--accent);height:.55em;display:block}
.review blockquote{margin:0;font-size:var(--fs-l);font-weight:500;line-height:1.45;max-width:none;flex:1}
.review figcaption{display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-size:var(--fs-s)}
.review .init{flex:none;width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--accent-text);font-weight:800;display:grid;place-items:center;font-size:var(--fs-s)}
.review figcaption b{color:var(--ink);display:block}
.review:first-child{grid-column:span 6;grid-row:span 3;background:var(--ground-dark);color:var(--ink-on-dark);padding:36px}
.review:first-child blockquote{font-size:var(--fs-2xl);font-weight:700;line-height:1.3}
.review:first-child figcaption{color:var(--soft-on-dark)}
.review:first-child figcaption b{color:var(--ink-on-dark)}
.review:first-child .init{background:var(--surface-dark);color:var(--accent)}
.review:nth-child(n+2){grid-column:7/13}
@media (max-width:560px){.review:first-child blockquote{font-size:var(--fs-l)}}
.reviews .where{margin-top:20px;color:var(--ink-soft);font-size:var(--fs-s)}
@media (max-width:899px){.review,.review:first-child,.review:nth-child(n+2),.review:nth-child(4){grid-column:1/-1;grid-row:auto}}


/* How it works: a scroll driven sequence (round three). The step in view is active: its number disc fills with the
   accent, its title is at full ink, the rail fills down to it and the frame on the right crossfades to its visual. The
   other steps rest: dimmed, outline disc. Desktop pins the stage; phones switch as each step crosses the middle of the
   screen. Reduced motion: all four at full ink, the states switch with no animation. No JavaScript: all four, frame one. */
.how{background:var(--ground-dark);color:var(--ink-on-dark)}
.how h2{color:var(--ink-on-dark)}
.how .lead{color:var(--soft-on-dark)}
.how-stage{margin-top:40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.how-rail{display:grid;gap:8px;counter-reset:step}
.how-step{border-top:1px solid rgba(238,246,250,.16);padding:16px 0}
.how-step h3{color:var(--ink-on-dark);display:flex;gap:14px;align-items:baseline;font-size:var(--fs-xl)}
.how-step h3::before{counter-increment:step;content:counter(step);font-size:var(--fs-s);font-weight:700;color:var(--accent);flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--accent);display:inline-grid;place-items:center;align-self:center}
.how-step p{color:var(--soft-on-dark);margin-top:8px;max-width:44ch}
.how-art{position:relative;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;background:var(--surface-dark);box-shadow:0 0 0 1px rgba(238,246,250,.08)}
.how-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A step without a photo fills the frame with the tint and one large icon, centered above the caption pill. */
.how-art .ico-frame.fill{position:absolute;inset:0;padding-bottom:40px}
.how-art .cap{position:absolute;left:18px;bottom:18px;z-index:2;background:rgba(6,26,46,.82);color:var(--ink-on-dark);padding:8px 14px;border-radius:var(--r-pill);font-size:var(--fs-s);font-weight:700}
.how-art .frame-i{position:absolute;inset:0}
html:not(.js) .how-art .frame-i:not(:first-child){display:none}
.js .how-art .frame-i{opacity:0}
.js .how-art .frame-i.on{opacity:1}
/* Transitions switch on only after the first state is set (site.js adds .how-ready), so nothing fades at page load. */
.how-ready .how-step h3::before{transition:background-color 200ms var(--ease),color 200ms var(--ease)}
.how-step.on h3::before{background:var(--accent);color:var(--accent-ink)}
/* Rest opacity .68 keeps the dimmed body text at 4.5:1 or better on the dark ground (computed, see proof). */
.js.motion .how-step{opacity:.68}
.js.motion .how-ready .how-step{transition:opacity 260ms var(--ease)}
.js.motion .how-step:not(.on) h3{color:var(--soft-on-dark)}
.js.motion .how-step.on{opacity:1}
.js.motion .how-art .frame-i{transform:scale(1.03)}
.js.motion .how-ready .how-art .frame-i{transition:opacity 360ms var(--ease),transform 560ms var(--ease)}
.js.motion .how-art .frame-i.on{transform:none}
/* Pinned (set by site.js only when the scene fits the screen): the wrapper is one screen tall and centers the
   heading and stage, so the pin holds the whole scene in the middle of the viewport. */
.how.is-pinned{padding-block:0}
.how.is-pinned .how-pin{min-height:100vh;min-height:100svh;display:grid;align-content:center;padding-block:32px}
/* Phones: one image per step, above its text; the caption sits under the art, never on it. */
.how-thumb{display:none;margin:0 0 14px}
.how-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-l)}
.how-thumb .ico-frame{width:100%;aspect-ratio:16/10}
.how-thumb figcaption{display:inline-block;margin-top:10px;background:var(--surface-dark);color:var(--ink-on-dark);padding:8px 14px;border-radius:var(--r-pill);font-size:var(--fs-s);font-weight:700}
/* Short laptop screens: a wider art frame so heading and stage fit one screen and the scene can still pin. */
@media (min-width:900px) and (max-height:820px){.how-stage{grid-template-columns:minmax(0,6fr) minmax(0,6fr);margin-top:24px}.how-rail{gap:4px}.how-step{padding:10px 0}.how-step p{margin-top:4px;font-size:var(--fs-m)}.how-art{aspect-ratio:16/10}}
@media (max-width:899px){.how-stage{grid-template-columns:1fr}.how-art{display:none}.how-thumb{display:block}.how-step{padding:20px 0}}

/* @end */
/* Form */
form{display:grid;gap:16px}
.field{display:grid;gap:6px}
label{font-weight:700;font-size:var(--fs-s)}
input,textarea,select{font:inherit;font-size:max(16px,1rem);color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-s);padding:12px 14px;width:100%}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}
textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The error line keeps its height while hidden, so an error that appears on blur never moves the submit button out
   from under a press that is already on its way (Jobs gate H1, 2026-09-23). */
.err{color:var(--danger);font-size:var(--fs-s);line-height:1.45;display:block;min-height:1.45em;visibility:hidden}
.field[aria-invalid="true"] .err{visibility:visible}
.field{gap:4px}
.field[aria-invalid="true"] input,.field[aria-invalid="true"] textarea{border-color:var(--danger)}
.form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:8px}
.form-actions .or{color:var(--ink-soft)}
/* @defer */
.form-msg:empty{display:none}
.form-msg{border-radius:var(--r-s);padding:14px 16px;font-size:var(--fs-m);line-height:1.5;background:var(--surface);box-shadow:var(--shadow-1)}
.form-msg:focus{outline:none}
.form-msg:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.form-msg.ok{background:var(--tint);box-shadow:none;color:var(--ink)}
.form-msg.bad{box-shadow:inset 0 0 0 1.5px var(--danger);color:var(--ink)}
.form-msg a{font-weight:700;white-space:nowrap}
form.is-sent .field,form.is-sent .form-actions,form.is-sent .step-1,form.is-sent .picked,form.is-sent .progress{display:none}
form.is-sent{align-content:start}
form[aria-busy="true"] button[type="submit"]{opacity:.7;cursor:progress}
.field[aria-invalid="true"] select{border-color:var(--danger)}
/* @end */
.assess .shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px)}
@media (max-width:899px){.assess .shell{grid-template-columns:1fr}}

/* Blog */
.posts{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);margin-top:40px}
.post-card{grid-column:span 4;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink);background:var(--surface);border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-1);transition:transform 160ms var(--ease)}
@media (hover:hover){.post-card:hover{transform:translateY(-3px)}}
.post-card .cover{aspect-ratio:16/9;background:var(--tint);overflow:hidden}
.post-card .cover img{width:100%;height:100%;object-fit:cover}
.post-card .cover-icon{display:grid}
.post-card .cover-icon .ico-frame.fill svg{width:clamp(96px,28%,140px)}
.post-card .body{padding:0 22px 22px;display:grid;gap:8px}
.post-card h3{font-size:var(--fs-l)}
.post-card h2{font-size:var(--fs-2xl)}
.post-card .meta{color:var(--ink-soft);font-size:var(--fs-s);display:flex;gap:12px;flex-wrap:wrap}
.post-card .cat{color:var(--accent-text);font-weight:700;font-size:var(--fs-s)}
.post-card p{color:var(--ink-soft);font-size:var(--fs-m)}
.post-card.feature{grid-column:span 12;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0}
.post-card.feature .cover{aspect-ratio:16/10;height:100%}
.post-card.feature .body{padding:32px;align-content:center}
.post-card.soon{border:1.5px dashed var(--line);background:transparent;box-shadow:none}
.post-card.soon .cover{display:grid;place-items:center;color:var(--ink-soft);font-size:var(--fs-s)}
@media (max-width:899px){.post-card,.post-card.feature{grid-column:1/-1;grid-template-columns:1fr}.post-card.feature .cover{aspect-ratio:16/9}}
.article{padding-block:clamp(40px,5vw,72px) var(--section)}
.article .shell{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,80px)}
.prose{max-width:68ch;font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:var(--fs-2xl);margin-top:1.8em}
.prose h3{font-size:var(--fs-xl);margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose .law{margin-top:1.2em}
.prose img{border-radius:var(--r-m)}
.byline{display:flex;align-items:center;gap:14px;color:var(--ink-soft);font-size:var(--fs-s);margin-top:20px;flex-wrap:wrap}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.byline b{color:var(--ink);display:block}
.aside{display:grid;gap:24px;align-content:start;position:sticky;top:24px;align-self:start}
@media (max-width:899px){.aside{position:static}}
.aside .box{background:var(--surface);border-radius:var(--r-m);padding:22px;box-shadow:var(--shadow-1)}
.aside .box h2{font-size:var(--fs-l);margin-bottom:10px}
.aside .box ul{list-style:none;padding:0;display:grid;gap:10px}
.aside .box li{margin:0}
.aside .box a{color:var(--ink);text-decoration:none;font-weight:500}
.aside .box a:hover{text-decoration:underline}
.aside .cta{background:var(--ground-dark);color:var(--ink-on-dark)}
.aside .cta h2{color:var(--ink-on-dark)}
.aside .cta p{color:var(--soft-on-dark);font-size:var(--fs-s)}
.aside .cta .btn{margin-top:14px}
/* @defer */
.share{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.share a{font-size:var(--fs-s)}
.related{padding-top:0}
.related .posts{margin-top:24px}
/* @end */
.article-hero{background:var(--ground-dark);color:var(--ink-on-dark);padding-block:clamp(32px,4vw,64px)}
.article-hero .shell{max-width:min(var(--shell),100% - 2*clamp(16px,4vw,40px))}
.article-hero h1{max-width:22ch;font-size:var(--fs-3xl)}
.article-hero .cat{color:var(--accent);font-weight:700;font-size:var(--fs-s);text-decoration:none;display:inline-block;margin-bottom:14px}
.article-hero .byline{color:var(--soft-on-dark)}
.article-hero .byline b{color:var(--ink-on-dark)}
.cover-wide{width:min(var(--shell),100% - 2*clamp(16px,4vw,40px));margin:-40px auto 0;position:relative;z-index:2;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--shadow-2);aspect-ratio:21/9;background:var(--surface)}
.cover-wide img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){.article .shell{grid-template-columns:1fr}.cover-wide{aspect-ratio:16/9;margin-top:-24px}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px)}
.contact-grid .ways{display:grid;gap:12px}
.contact-grid .ways div{background:var(--surface);border-radius:var(--r-s);padding:16px 18px;box-shadow:var(--shadow-1)}
.contact-grid .ways b{display:block;font-size:var(--fs-s);color:var(--ink-soft);font-weight:500}
.contact-grid .ways a,.contact-grid .ways span{font-weight:700;color:var(--ink);text-decoration:none;font-size:var(--fs-l)}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr}}

/* Footer */
footer{border-top:1px solid var(--line);padding:48px 0 calc(48px + var(--callbar-h) + env(safe-area-inset-bottom,0px));font-size:var(--fs-s);color:var(--ink-soft)}
footer .shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr);gap:var(--gap)}
footer img{width:150px;height:84px;object-fit:contain}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:none}
footer li{margin:0}
footer a{color:var(--ink)}
footer .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:8px;display:grid;gap:8px}
@media (max-width:899px){footer .shell{grid-template-columns:1fr 1fr}footer .shell>div:first-child{grid-column:1/-1}}
@media (min-width:900px){footer{padding-bottom:48px}}

/* Call bar: fixed, never hidden, nothing above it */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;height:calc(var(--callbar-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:800;font-size:1.125rem;letter-spacing:.01em;box-shadow:0 -1px 0 rgba(6,26,46,.12),0 -8px 24px rgba(6,26,46,.12)}
.callbar svg{width:22px;height:22px;margin-right:10px}
.callbar:focus-visible{outline:3px solid var(--ink);outline-offset:-5px}
@media (min-width:900px){.callbar{display:none}}
/* Phones: anything scrolled into view (a focused field, the submit button) stops above the fixed call bar, not under it. */
@media (max-width:899px){html{scroll-padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom,0px) + 16px)}}
.cookie{position:fixed;left:0;right:0;bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom,0px));z-index:900;background:var(--surface);color:var(--ink);border-top:1px solid var(--line);font-size:var(--fs-s);padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.cookie[hidden]{display:none}
@media (min-width:900px){.cookie{bottom:0}}
.cookie button{font:inherit;font-weight:700;background:none;border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:6px 14px;min-height:36px;cursor:pointer;color:var(--ink)}

/* Print */
@media print{.callbar,.cookie,.menu-btn{display:none}}

/* Home hero: the layered stage (also documented in 08-design-system/SYSTEM.html) */
.hero{background:var(--ground-dark);color:var(--ink-on-dark);padding-block:clamp(32px,5vw,80px) clamp(64px,8vw,120px);overflow:hidden;position:relative}
.hero .shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero h1{color:var(--ink-on-dark)}
.hero .lead{color:var(--soft-on-dark);max-width:44ch}
.hero .promise{font-weight:700;font-size:var(--fs-l);color:var(--ink-on-dark)}
.hero .promise em{color:var(--accent)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.stage{position:relative;min-height:clamp(360px,44vw,560px)}
.stage .word{position:absolute;left:0;bottom:0;margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-giant);line-height:1;letter-spacing:-.01em;color:var(--word-on-dark);text-transform:uppercase;user-select:none;pointer-events:none;z-index:0;max-width:none}
/* Round two (craft line 7, Jobs no list 5): the word sits fully below the photo on desktop, never sliced by it, and is
   not shown on phones, where the stacked photo would cut it in half. */
/* Round three (Jeremy, 2026-09-24): the word reads SECURE CLAIMS, one line, same face and color. The stage is a size
   container, so the word scales to the stage width (Anton sets these 13 characters 5.6 em wide; 17.6cqi leaves a hair
   of room) and never wraps or runs past the photo's right edge. */
@media (min-width:900px){.hero .stage{container-type:inline-size}.stage .word{font-size:min(clamp(5rem,10.5vw,9.5rem),17.6cqi);white-space:nowrap}}
.frame{position:relative;z-index:1;width:min(100%,640px);margin-left:auto;aspect-ratio:16/10;border-radius:var(--r-l);overflow:hidden;box-shadow:0 0 0 1px rgba(238,246,250,.08),var(--shadow-2)}
.frame img{width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .hero .shell{grid-template-columns:1fr}
  .stage{min-height:0;margin-top:16px;padding-top:15vw;padding-bottom:12px}
  .frame{width:100%}
  .stage .word{display:none}
  .stage{padding-top:0}
}

/* Hero chips (batch two, steal row 8): three sourced facts under the call button. */
.chips{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;max-width:none}
.chips li{margin:0;display:flex;align-items:center;gap:8px;font-size:var(--fs-s);font-weight:700;color:var(--soft-on-dark)}
.chips li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2740' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}

/* The two step assessment, section two (batch two, steal rows 1 and 2). Without JavaScript the tiles and the step
   counter stay hidden and the form is the one step form. With it, step 1 is the five tiles, step 2 the fields. */
.start{background:var(--canvas);padding-block:clamp(40px,5vw,96px)}
.start .shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.start h2{font-size:var(--fs-3xl)}
.start-call{font-weight:700}
.start-call a{white-space:nowrap}
.form-card{background:var(--surface);border-radius:var(--r-l);padding:clamp(20px,3vw,36px);box-shadow:var(--shadow-2);align-content:start;position:relative}
.progress{font-size:var(--fs-s);font-weight:700;color:var(--accent-text);letter-spacing:.01em}
html:not(.js) .progress,html:not(.js) .step-1{display:none}
html:not(.js) .js-only,.js .no-js{display:none}
.site-header.instant,.site-header.instant *{transition:none!important}
/* A tap on a tile moves to step 2: a short slide and fade, driven by the tap (input is the clock). */
@media (prefers-reduced-motion:no-preference){.js [data-steps].stepped .step:not([hidden]){animation:step-in 240ms cubic-bezier(.22,1,.36,1) both}}
@keyframes step-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:16px}
.step[hidden]{display:none}
.step legend{font-weight:800;font-size:var(--fs-xl);line-height:1.2;padding:0;margin-bottom:16px}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kind{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 18px;border-radius:var(--r-m);background:var(--canvas);border:1.5px solid var(--line);font-weight:700;font-size:var(--fs-m);line-height:1.25;color:var(--ink);cursor:pointer;transition:border-color 140ms var(--ease),background-color 140ms var(--ease),transform 140ms var(--ease)}
.kind .ico-disc{--d:44px}
.kind-wide{grid-column:1/-1}
@media (hover:hover){.kind:hover{border-color:var(--accent-text);background:var(--tint)}.kind:hover .ico-disc{background:var(--surface)}}
.kind[aria-pressed="true"] .ico-disc{background:var(--surface)}
.kind:active{transform:translateY(1px)}
.kind:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.kind[aria-pressed="true"]{border-color:var(--accent-text);background:var(--tint)}
.picked{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;background:var(--tint);border-radius:var(--r-s);padding:0 14px;min-height:48px;font-size:var(--fs-s)}
.picked[hidden]{display:none}
.link-btn{all:unset;cursor:pointer;color:var(--accent-text);font-weight:700;text-decoration:underline;text-underline-offset:.15em;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.link-btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:4px}
/* Desktop only (round two, fix 6): the empty space beside the form card carries what happens after the call. Phones
   skip it so the tiles stay close to the top. */
.start-next{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:var(--fs-m)}
.start-next .ico-frame{--f:170px}
@media (max-width:899px){.start .shell{grid-template-columns:1fr}.start-next{grid-template-columns:170px 1fr;margin-top:14px;padding-top:14px;font-size:var(--fs-s)}}
@media (max-width:899px){.cost{padding-bottom:24px}.how{padding-top:24px}}
@media (max-width:420px){.kinds{grid-template-columns:1fr}.kind{min-height:64px}}

/* Desktop header (steal row 9): sticky; it is 88 px in flow and 64 px on screen once the page scrolls (moved up 24 px). The shrink is a transform,
   so nothing under it moves (no layout shift). Phones keep the call bar instead. */
.btn-quiet{background:transparent;color:var(--ink-on-dark);border-color:rgba(238,246,250,.5)}
@media (hover:hover){.btn-quiet:hover{border-color:var(--ink-on-dark)}}
@media (min-width:900px){
  .site-header{position:sticky;top:0;transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
  .site-header .shell{transition:transform 200ms var(--ease)}
  .site-header .brand img{transition:transform 200ms var(--ease);transform-origin:left center}
  .site-header.is-stuck{transform:translateY(-24px);box-shadow:0 1px 0 rgba(238,246,250,.08),0 12px 32px rgba(6,26,46,.35)}
  .site-header.is-stuck .shell{transform:translateY(12px)}
  .site-header.is-stuck .brand img{transform:scale(.72)}
  section{scroll-margin-top:80px}
}
@media (min-width:900px) and (max-width:1199px){.nav{gap:8px 16px}.nav .btn{padding:0 16px;margin-left:0}.site-header .shell{gap:16px}}
@media (min-width:900px) and (max-width:979px){.nav a:not(.btn){font-size:var(--fs-s)}}
@media (prefers-reduced-motion:reduce){.site-header,.site-header .shell,.site-header .brand img{transition:none}}
/* Lenis smooth scroll (on only when motion is allowed and the library loaded) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* Gap: the bar pair */
.gap .shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:end}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);align-items:end;height:clamp(240px,30vw,360px);padding-top:24px}
.bar{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bar .fill{border-radius:var(--r-s) var(--r-s) 0 0;transform-origin:bottom;background:var(--line)}
.bar-pa .fill{background:var(--accent)}
.bar .v{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1;margin-bottom:10px}
.bar .k{color:var(--ink-soft);font-size:var(--fs-s);margin-top:10px;line-height:1.35;border-top:1px solid var(--line);padding-top:10px}
.gap .source{color:var(--ink-soft);font-size:var(--fs-s);margin-top:12px}
@media (max-width:899px){.gap .shell{grid-template-columns:1fr}.bars{height:220px}}

/* Cost */
.cost{background:var(--tint)}
.cost .shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.cost .caps{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:24px}
.cap .n{display:block;font-size:var(--fs-4xl);font-weight:800;line-height:1;letter-spacing:-.02em}
.cap .l{display:block;color:var(--ink-soft);margin-top:8px;font-size:var(--fs-s);line-height:1.4}
@media (max-width:899px){.cost .shell{grid-template-columns:1fr}}

/* What we handle: the photo tiles */
.handle .intro{max-width:30ch;font-size:var(--fs-3xl);font-weight:800;line-height:1.15;letter-spacing:-.01em}
.intro .w{display:inline-block}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(180px,auto);gap:var(--gap);margin-top:40px}
.tile{position:relative;display:flex;align-items:flex-end;border-radius:var(--r-m);overflow:hidden;text-decoration:none;color:var(--ink-on-dark);background:var(--surface-dark);min-height:240px;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 200ms var(--ease)}
/* Round three: the four photos come from different cameras (and the fire one is generated). One identical light grade
   on all four, never a per tile treatment: a touch less saturation, a touch more contrast. */
.tile img{filter:saturate(.86) contrast(1.05) brightness(.97)}
@media (hover:hover){.tile:hover img{transform:scale(1.03)}}
.tile .scrim{position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,rgba(6,26,46,.92),rgba(6,26,46,0));z-index:1}
.tile .t{position:relative;z-index:2;padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.tile h3{color:var(--ink-on-dark);font-size:var(--fs-xl)}
.tile span{color:var(--soft-on-dark);font-size:var(--fs-s)}
.tile .ic{position:absolute;top:16px;right:16px;z-index:2;--d:56px;color:var(--accent-text);box-shadow:var(--shadow-1)}
.tile-storm{grid-column:span 5;grid-row:span 2}
.tile-water{grid-column:span 7}
.tile-fire{grid-column:span 3}
.tile-mold{grid-column:span 4}
@media (max-width:899px){
  .tiles{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .tile{min-height:200px}
  .tile-storm{grid-column:1/-1;grid-row:auto;min-height:260px}
  .tile-water,.tile-mold,.tile-fire{grid-column:auto}
  .tile-water,.tile-fire{min-height:280px}   /* round three: the two half tiles keep their text below the badge */
  .tile-mold{grid-column:1/-1}
}

/* @defer */
/* Doubts */
.doubts .shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px)}
.doubt h2{font-size:var(--fs-2xl)}
.doubt .law{margin-top:16px}
@media (max-width:899px){.doubts .shell{grid-template-columns:1fr}}
.faq-home{padding-top:0}
.faq-home .shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gap)}
.faq-home .art{margin-top:16px}
@media (max-width:899px){.faq-home .shell{grid-template-columns:1fr}}

/* Florida insurance news (round three): the one declared ambient element (RULES.md rule 9, Jeremy's exception of
   2026-09-17). The list is printed twice and the track slides left by exactly one copy, so the loop has no seam. It
   moves only with JavaScript and motion allowed (html.motion), by transform, at about 50 px a second (site.js sets
   --mq-dur from the measured width). Hover or focus inside it pauses it; the button pauses it for good (WCAG 2.2.2).
   Reduced motion or no JavaScript: a still row that scrolls sideways, the copy hidden, no button. */
.news-art{margin-bottom:8px}   /* the large icon above the heading, as in the doubts, so the news screen keeps a visual */
.marquee{margin-top:32px}
.mq-bar{display:none;justify-content:flex-end;margin-bottom:12px}
.motion .mq-bar{display:flex}
.mq-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-s);font-weight:700;cursor:pointer;transition:border-color 140ms var(--ease)}
.mq-toggle svg{width:16px;height:16px;flex:none;color:var(--accent-text)}
@media (hover:hover){.mq-toggle:hover{border-color:var(--accent-text)}}
.mq-toggle:active{transform:translateY(1px)}
.mq-toggle .mq-when-on,.mq-toggle .mq-when-off{display:inline-flex;align-items:center;gap:8px}
.mq-toggle .mq-when-off,.marquee.is-paused .mq-toggle .mq-when-on{display:none}
.marquee.is-paused .mq-toggle .mq-when-off{display:inline-flex}
.mq-view{position:relative;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 0 20px;scrollbar-width:thin}   /* relative: the screen reader only spans (absolute) stay inside the row, not past the page edge */
.mq-track{display:flex;width:max-content}
.mq-list{list-style:none;margin:0;padding:0 24px 0 0;display:flex;align-items:flex-start;gap:24px;max-width:none}
.mq-copy{display:none}
.motion .mq-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.motion .mq-copy{display:flex}
.motion .mq-track{animation:mq var(--mq-dur,75s) linear infinite}
.motion .mq-view:hover .mq-track,.motion .mq-view:focus-within .mq-track,.motion .marquee.is-paused .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}
/* A keyboard visitor inside the row gets the still, scrollable row, so the focused story is never off screen. */
.motion .marquee.is-kb .mq-view{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.motion .marquee.is-kb .mq-track{animation:none}
.motion .marquee.is-kb .mq-copy{display:none}
.mq-item{flex:none;width:380px;margin:0;background:var(--surface);border-radius:var(--r-m);padding:22px 22px 24px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:12px}
.mq-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--fs-s);font-weight:700;color:var(--accent-text);max-width:none}
.mq-kicker .ico-disc{--d:40px}
.mq-kicker time{color:var(--ink-soft);font-weight:500;font-variant-numeric:tabular-nums;margin-left:auto}
.mq-item h3{font-size:var(--fs-l);line-height:1.3}
.mq-item h3 a{color:var(--ink);text-decoration:none}
.mq-item h3 a::after{content:" \2197";color:var(--accent-text);font-weight:700}
@media (hover:hover){.mq-item h3 a:hover{text-decoration:underline;text-decoration-color:var(--accent-text)}}
.mq-item .means{color:var(--ink-soft);font-size:var(--fs-m);padding-top:12px;border-top:1px solid var(--line)}
.news-note{margin-top:12px;color:var(--ink-soft);font-size:var(--fs-s)}
@media (max-width:640px){.mq-item{width:290px}}

/* Licensed */
.licensed{background:var(--tint)}
/* Mirrors More questions above it: there the art and heading sit left with the list right; here the list sits left
   and the heading with its art sits right (900 px up). Phones keep reading order: heading, then the list. */
.licensed .shell{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--gap);align-items:start}
.licensed .shell>.stack{order:2}
.licensed .lic{order:1}
.licensed .art{margin-top:16px}
@media (max-width:899px){.licensed .shell{grid-template-columns:1fr}.licensed .shell>.stack,.licensed .lic{order:0}}


/* Cost graphic (batch two): 100 cents, the fee cap shown in the last rows. The radio picks the claim type; :has()
   switches the marks with no JavaScript. */
.cost .shell{align-items:start}
.costviz{margin:0;background:var(--surface);border-radius:var(--r-l);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-1);display:grid;gap:16px}
.cv-zero{font-weight:700;color:var(--ink-soft)}
.cv-zero b{font-size:var(--fs-3xl);color:var(--ink);font-weight:800;letter-spacing:-.02em;margin-right:6px}
.cv-mode{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.cv-mode legend{font-size:var(--fs-s);font-weight:700;color:var(--ink-soft);margin-bottom:8px;padding:0}
.cv-mode label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1.5px solid var(--line);font-size:var(--fs-s);cursor:pointer;background:var(--canvas)}
.cv-mode input{width:18px;height:18px;margin:0;accent-color:var(--accent-text);padding:0}
.cv-mode label:has(input:checked){border-color:var(--accent-text);background:var(--tint)}
.cv-mode label:has(input:focus-visible){outline:2px solid var(--accent-text);outline-offset:2px}
.cv-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:center}
.cents{width:100%;max-width:300px}
.cents .c{fill:var(--accent);stroke:var(--ink);stroke-width:1.5;transition:fill 200ms var(--ease)}
.costviz:not(:has(input[value="emergency"]:checked)) .cents .f20,.costviz:has(input[value="emergency"]:checked) .cents .f10{fill:var(--surface);stroke:var(--ink-soft);stroke-dasharray:3 2.2}
.cv-key{display:grid;gap:16px}
.cv-key .k{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:var(--fs-s);color:var(--ink-soft);line-height:1.45}
.cv-key b{display:block;font-size:var(--fs-2xl);color:var(--ink);line-height:1.05;letter-spacing:-.02em;margin-bottom:2px}
.cv-key .sw{width:20px;height:20px;border-radius:50%;margin-top:6px;border:1.5px solid var(--ink)}
.k-yours .sw{background:var(--accent)}
.k-fee .sw{background:var(--surface);border:1.5px dashed var(--ink-soft)}
.m-e{display:none}
.costviz:has(input[value="emergency"]:checked) .m-e{display:inline}
.costviz:has(input[value="emergency"]:checked) .m-n{display:none}
.costviz figcaption{font-size:var(--fs-s);color:var(--ink-soft);border-top:1px solid var(--line);padding-top:12px}
@media (max-width:560px){.cv-body{grid-template-columns:1fr}.cents{max-width:240px}}
/* Phones (round two, craft line 1): heading, then the cents graphic, then the prose, so the graphic shows in the first
   screen of the section above the call bar. */
@media (max-width:899px){.cost .shell{display:flex;flex-direction:column;gap:24px}.cost .shell>.stack{display:contents}.cost .shell>.stack>h2{order:0}.cost .costviz{order:1}.cost .shell>.stack>:not(h2){order:2}.cost .shell>.stack>*+*{margin-top:0}}
@media (prefers-reduced-motion:reduce){.cents .c{transition:none}}

/* "Read the law": statute quotes behind a disclosure */
.law-more{margin-top:20px}
.law-more summary{cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;color:var(--accent-text);list-style:none}
.law-more summary::-webkit-details-marker{display:none}
.law-more summary::before{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform 200ms var(--ease)}
.law-more[open] summary::before{transform:rotate(45deg)}
@media (hover:hover){.law-more summary:hover{text-decoration:underline;text-underline-offset:.2em}}
.law-more summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:no-preference){.law-more[open] .law{animation:acc-in 220ms var(--ease) both}}
@media (prefers-reduced-motion:reduce){.law-more summary::before{transition:none}}
.law-more .law+.law{margin-top:12px}
.law-more .law:first-of-type{margin-top:8px}

/* Large icons beside the doubts, FAQ, licensed and closing band (round three: Lucide in the tinted square) */
svg.draw{display:block;height:auto}
.doubt-art{margin-bottom:8px}

/* Reviews: the job photo inside the big quote card */
.review-strip{width:calc(100% + 56px);max-width:none;margin:-26px -28px 0;height:120px;object-fit:cover;border-radius:var(--r-m) var(--r-m) 0 0}
.review-photo{margin:-8px -8px 4px;border-radius:var(--r-m);overflow:hidden;position:relative}
.review-photo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.review-photo p{position:absolute;left:12px;bottom:12px;background:rgba(6,26,46,.82);color:var(--ink-on-dark);font-size:var(--fs-s);padding:6px 12px;border-radius:var(--r-pill);max-width:calc(100% - 24px)}
@media (max-width:560px){.review-photo{margin:-8px -8px 0}.review-photo p{position:static;background:none;padding:8px 2px 0;color:var(--soft-on-dark);border-radius:0;max-width:none}}


/* How it works: the rail line that draws as the steps advance */
/* The progress rail: a quiet track from the first disc to the last, and an accent fill that grows to the active
   disc (site.js sets the track's ends and the fill's scale). Transform only, so nothing reflows. */
.how-railwrap{position:relative}
.how-track{position:absolute;left:13px;top:24px;width:2px;height:calc(100% - 48px);background:rgba(238,246,250,.16);pointer-events:none}
.how-fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.js.motion .how-ready .how-fill{transition:transform 360ms var(--ease)}
.how-railwrap .how-step{padding-left:44px}
.how-railwrap .how-step h3{margin-left:-44px;gap:16px}
.how-step h3::before{background:var(--ground-dark);position:relative;z-index:1}
.how-step.on h3::before{background:var(--accent);color:var(--accent-ink)}
@media (max-width:899px){.how-track{display:none}.how-railwrap .how-step{padding-left:0}.how-railwrap .how-step h3{margin-left:0;gap:14px}}

/* Closing call band: links up to the one form */
.closer .shell{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,4vw,64px);align-items:center}
.closer-art{--f:200px}
@media (max-width:640px){.closer .shell>.closer-art{order:0}}
.closer .actions{margin-top:24px}
@media (max-width:640px){.closer .shell{grid-template-columns:1fr}}
/* @end */
/* Utilities */
.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:899px){.cols-3{grid-template-columns:1fr}}
.photo-card{border-radius:var(--r-m);overflow:hidden;box-shadow:0 0 0 1px rgba(238,246,250,.08);background:var(--surface-dark)}
.photo-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.photo-card p{padding:12px 16px;color:var(--soft-on-dark);font-size:var(--fs-s);max-width:none}

/* Phones: a framed icon closes the cost text, so every phone screen holds a visual at least 120 px tall (craft critic round two, line 1; round three moved it to Lucide). Desktop is unchanged. */
.cost-settle{display:none}
@media (max-width:899px){.cost .shell>.stack>.cost-settle{display:grid;--f:180px;margin:0;order:1}}
/* Desktop: a little less air between news and FAQ keeps the FAQ drawing inside the screen after the copy pass. */
@media (min-width:900px){#news{padding-bottom:calc(var(--section) - 30px)}#faq{padding-top:calc(var(--section) - 30px)!important}}

/* Generated photos say so (house rule: no AI image reads as real work). */
.tile .ai-note{position:absolute;top:12px;right:12px;z-index:2;font-size:12px;line-height:1;padding:5px 8px;border-radius:99px;background:rgba(6,26,46,.72);color:var(--ink-on-dark)}
/* News: the big icon sits beside the heading on desktop, so the news screen keeps its visual next to the cards. */
@media (min-width:900px){.news .stack{display:grid;grid-template-columns:1fr auto;column-gap:32px;align-items:center}.news .stack .news-art{grid-column:2;grid-row:1 / span 2}.news .stack h2,.news .stack .lead{grid-column:1}}
@media (min-width:900px){.faq-home .stack{display:flex;flex-direction:column}.faq-home .stack .ico-frame{order:-1;margin:0 0 20px}}
/* FAQ and Licensed: the icon leads its heading at every width, so the screens around them keep a visual. */
.faq-home .stack{display:flex;flex-direction:column}
.faq-home .stack .ico-frame{order:-1;margin:0 0 20px}
.licensed .shell>.stack{display:flex;flex-direction:column}.licensed .shell>.stack .ico-frame{order:-1;margin:0 0 20px}
/* Phones: the footer signs off with a full size logo, so the last screen holds a visual too. */
@media (max-width:640px){footer img{width:222px;height:124px}}