/* ===========================================================================
sr22finder.com — site stylesheet
Structure is shared with the other properties in this portfolio; the palette
is not. This is a US filings site, so the chrome is a deep petrol blue with a
brick accent reserved for deadline/urgency copy, and the reading surface runs
slightly warmer than the UK build.
The diagram tokens (--d-*) at the bottom of this file are UNCHANGED from the
set that passed the dataviz contrast validator, and the CTA green is
unchanged for the same reason. Do not re-tint either.
=========================================================================== */
:root{
--ink:#10151c;
--ink-2:#39424f;
--ink-3:#5d6875;
--line:#dfe4ea;
--line-2:#eef1f5;
--paper:#ffffff;
--paper-2:#f7f8f7;
--paper-3:#eef2f1;
--navy:#123a4f;
--navy-2:#1b5470;
--accent:#9b2c2c; /* urgency / deadline */
--accent-soft:#fdf1ef;
--go:#0a6b4f; /* CTA */
--go-2:#0d8362;
--go-soft:#eefaf5;
--warn-bg:#fff8e6;
--warn-line:#e8cf8a;
--radius:6px;
--radius-lg:10px;
--shadow-1:0 1px 2px rgba(16,21,28,.06), 0 2px 8px rgba(16,21,28,.05);
--shadow-2:0 4px 16px rgba(16,21,28,.10);
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--serif:Georgia,"Times New Roman",Times,serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
--wrap:1120px;
--measure:70ch;
--stickyh:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{
margin:0;background:var(--paper);color:var(--ink);
font:400 17px/1.65 var(--sans);
-webkit-font-smoothing:antialiased;
overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:#18477e;text-underline-offset:2px}
a:hover{color:#0f3159}
h1,h2,h3,h4{line-height:1.22;margin:0 0 .5em;color:var(--ink);letter-spacing:-.012em}
h1{font-size:2.15rem;font-weight:800}
h2{font-size:1.55rem;font-weight:750;margin-top:2.2em}
h3{font-size:1.16rem;font-weight:700;margin-top:1.8em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.35em}
li{margin:.3em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
small{font-size:.86rem}
code{font:.9em var(--mono);background:var(--paper-3);padding:.1em .35em;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.measure{max-width:var(--measure)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid #2f6fd0;outline-offset:2px;border-radius:3px}
/* ---------------------------------------------------------------- sticky top
The contact form is the ONLY channel on this site. No phone number and no
mailto: anywhere — the endpoint comes from _authoring/siteconfig.py. */
.topbar{
position:sticky;top:0;z-index:100;background:var(--navy);color:#fff;
border-bottom:1px solid rgba(255,255,255,.12);
}
.topbar .wrap{display:flex;align-items:center;gap:14px;min-height:var(--stickyh)}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:800;letter-spacing:-.02em;
color:#fff;text-decoration:none;font-size:1.06rem;white-space:nowrap}
.brand span{font-weight:400;font-size:.74rem;color:#9fb3cd;letter-spacing:.06em;text-transform:uppercase}
.topnav{display:flex;gap:18px;margin-left:auto;align-items:center}
.topnav a{color:#cfdcec;text-decoration:none;font-size:.9rem;font-weight:500}
.topnav a:hover{color:#fff;text-decoration:underline}
/* Sticky-top CTA. There is no phone channel on this site — every CTA is an
in-page anchor to the case-review form. Do not add tel: or mailto: links. */
.btn-top{
margin-left:auto;
background:var(--go);color:#fff;border-radius:var(--radius);padding:9px 16px;
font-weight:730;font-size:.94rem;text-decoration:none;white-space:nowrap
}
.topnav + .btn-top{margin-left:0}
.btn-top:hover{background:var(--go-2);color:#fff}
/* -------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(105deg,rgba(18,36,61,.96) 0%,rgba(18,36,61,.86) 46%,rgba(18,36,61,.55) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:40px;padding-bottom:44px;
display:grid;grid-template-columns:1fr 430px;gap:40px;align-items:start}
.hero h1{color:#fff;font-size:2.5rem;margin-bottom:.35em}
.hero .sub{font-size:1.14rem;color:#d3dfee;max-width:56ch;margin-bottom:1.1em}
.hero .hook{
background:rgba(179,52,31,.18);border-left:4px solid var(--accent);
padding:14px 16px;border-radius:0 var(--radius) var(--radius) 0;
font-size:1rem;color:#f3dfd9;max-width:56ch;margin-bottom:1.2em
}
.hero .hook strong{color:#fff}
.hero-points{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.hero-points li{color:#c5d4e6;font-size:.92rem;display:flex;gap:7px;align-items:flex-start}
.hero-points li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
background:#4f9c82;margin-top:.52em}
/* --------------------------------------------------------------- deadline */
.deadline{
background:var(--accent-soft);border:1px solid #f0cec5;border-left:5px solid var(--accent);
border-radius:var(--radius);padding:16px 18px;margin:0 0 1.6em
}
.deadline .d-num{font-size:1.9rem;font-weight:800;color:var(--accent);line-height:1;display:block}
.deadline .d-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:#8c3a29;font-weight:700}
.deadline p{margin:.55em 0 0;font-size:.98rem;color:#4a2a23}
.deadline p:last-child{margin-bottom:0}
/* ------------------------------------------------------------------- form */
.formcard{
background:var(--paper);color:var(--ink);border:1px solid var(--line);
border-radius:var(--radius-lg);box-shadow:var(--shadow-2);overflow:hidden
}
.formcard.inline{box-shadow:var(--shadow-1);margin:2.4em 0}
.formcard .fc-head{background:var(--paper-2);border-bottom:1px solid var(--line);padding:15px 20px 13px}
.formcard .fc-head h2,.formcard .fc-head h3,.formcard .fc-head .fc-title{
margin:0 0 3px;font-size:1.12rem;font-weight:780;line-height:1.3}
.formcard .fc-head p{margin:0;font-size:.86rem;color:var(--ink-3)}
.formcard .fc-body{padding:18px 20px 20px}
.progress{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.progress .bar{flex:1;height:5px;background:var(--paper-3);border-radius:99px;overflow:hidden}
.progress .bar i{display:block;height:100%;width:14.3%;background:var(--go);border-radius:99px;
transition:width .25s ease}
.progress .pct{font-size:.74rem;color:var(--ink-3);font-weight:650;white-space:nowrap;
font-variant-numeric:tabular-nums}
.step{display:none}
.step.is-active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.step > legend,.step .q{
display:block;font-size:1.03rem;font-weight:700;margin:0 0 4px;padding:0;line-height:1.35}
.step .q-help{font-size:.85rem;color:var(--ink-3);margin:0 0 12px}
.choices{display:grid;gap:8px;margin:0 0 4px}
.choices.two{grid-template-columns:1fr 1fr}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
display:block;border:1.5px solid var(--line);border-radius:var(--radius);
padding:12px 14px;font-size:.97rem;font-weight:600;cursor:pointer;background:#fff;
transition:border-color .12s,background .12s
}
.choice span:hover{border-color:#a9bdd6;background:var(--paper-2)}
.choice input:checked + span{border-color:var(--go);background:var(--go-soft);
box-shadow:inset 0 0 0 1px var(--go)}
.choice input:focus-visible + span{outline:3px solid #2f6fd0;outline-offset:2px}
.field{margin:0 0 12px}
.field label{display:block;font-size:.85rem;font-weight:650;margin-bottom:5px;color:var(--ink-2)}
.field input,.field select,.field textarea{
width:100%;font:inherit;font-size:.97rem;padding:11px 12px;border:1.5px solid var(--line);
border-radius:var(--radius);background:#fff;color:var(--ink)
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#7ea3cf;outline:none;
box-shadow:0 0 0 3px rgba(47,111,208,.14)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.btn{
display:inline-block;width:100%;text-align:center;border:0;cursor:pointer;
background:var(--go);color:#fff;font:inherit;font-weight:750;font-size:1.03rem;
padding:14px 18px;border-radius:var(--radius);text-decoration:none;
transition:background .12s
}
.btn:hover{background:var(--go-2)}
.btn.secondary{background:transparent;color:var(--ink-3);font-weight:600;font-size:.88rem;
padding:9px;width:auto}
.btn.secondary:hover{background:transparent;color:var(--ink);text-decoration:underline}
.btnrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.btnrow .btn:not(.secondary){flex:1}
.assure{list-style:none;padding:0;margin:11px 0 0;display:grid;gap:4px}
.assure li{font-size:.8rem;color:var(--ink-3);display:flex;gap:6px;align-items:flex-start;margin:0}
.assure li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
background:#9fb1a9;margin-top:.55em}
.tcpa{
margin:12px 0 0;padding:11px 12px;background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--radius);font-size:.735rem;line-height:1.5;color:var(--ink-3)
}
.tcpa strong{color:var(--ink-2)}
.formdone{display:none;text-align:center;padding:10px 0}
.formdone.is-active{display:block}
.formdone h3{margin-top:0}
.formdone ol{text-align:left;max-width:40ch;margin:0 auto;font-size:.95rem}
/* short / repeat form */
.shortform{
background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:18px 20px;margin:2.4em 0
}
.shortform h3{margin:0 0 4px;font-size:1.08rem}
.shortform p{margin:0 0 12px;font-size:.9rem;color:var(--ink-3)}
.shortform form{display:flex;gap:8px;flex-wrap:wrap}
.shortform input{flex:1 1 170px;font:inherit;font-size:.97rem;padding:12px;border:1.5px solid var(--line);
border-radius:var(--radius)}
.shortform .btn{width:auto;flex:0 0 auto;padding:12px 20px}
/* ---------------------------------------------------------------- content */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;
padding-top:34px;padding-bottom:20px;align-items:start}
.sidebar{position:sticky;top:calc(var(--stickyh) + 18px)}
main :is(h2,h3){scroll-margin-top:76px}
.crumbs{font-size:.82rem;color:var(--ink-3);padding:12px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.crumbs li::after{content:"›";margin-left:6px;color:#aab4c0}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3)}
.trust-stack{
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:12px 0;margin:0 0 1.8em;font-size:.81rem;color:var(--ink-3);line-height:1.6
}
.trust-stack .row1{font-weight:650;color:var(--ink-2)}
.trust-stack .row1 b{color:var(--go)}
.toc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
padding:16px 18px;margin:0 0 2em}
.toc h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 9px;color:var(--ink-3)}
.toc ol{margin:0;padding-left:1.2em;font-size:.93rem}
.toc li{margin:.28em 0}
.takeaways{background:var(--paper-2);border-left:4px solid var(--navy);border-radius:0 var(--radius) var(--radius) 0;
padding:16px 20px;margin:0 0 2em}
.takeaways h2{margin:0 0 .5em;font-size:1.02rem;text-transform:uppercase;letter-spacing:.06em;color:var(--navy)}
.takeaways ul{margin:0;padding-left:1.15em;font-size:.96rem}
.callout{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius);
padding:14px 16px;margin:1.6em 0;font-size:.95rem}
.callout strong{display:block;margin-bottom:.25em}
.callout p:last-child{margin-bottom:0}
.factbox{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:1.6em 0;
background:#fff;box-shadow:var(--shadow-1)}
.factbox h3{margin:0 0 .5em;font-size:1rem}
.factbox p:last-child{margin-bottom:0}
.factbox .src{font-size:.78rem;color:var(--ink-3);margin-top:.7em}
table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92rem}
caption{caption-side:top;text-align:left;font-size:.83rem;color:var(--ink-3);padding-bottom:7px}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
thead th{background:var(--paper-3);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
color:var(--ink-2);font-weight:750}
tbody th{background:var(--paper-2);font-weight:700}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4em 0}
.tablewrap table{margin:0;min-width:540px}
.statute{border-left:3px solid var(--navy);background:var(--paper-2);padding:12px 16px;
margin:1.3em 0;font-size:.93rem;border-radius:0 var(--radius) var(--radius) 0}
.statute .cite{font-weight:750;display:block;margin-bottom:.3em;font-size:.88rem}
.statute blockquote{margin:0;font-family:var(--serif);font-size:.97rem;color:var(--ink-2)}
.statute .link{font-size:.8rem;margin-top:.5em;display:block}
.courtcard{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:1.2em 0;
background:#fff}
.courtcard h3{margin:0 0 .45em;font-size:1.05rem}
.courtcard dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:.92rem}
.courtcard dt{font-weight:700;color:var(--ink-2);white-space:nowrap}
.courtcard dd{margin:0}
details.faq{border-bottom:1px solid var(--line);padding:2px 0}
details.faq summary{cursor:pointer;padding:14px 26px 14px 0;font-weight:680;font-size:1.02rem;
list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:2px;top:12px;font-size:1.3rem;
color:var(--ink-3);font-weight:400;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 0 14px;font-size:.97rem;color:var(--ink-2)}
details.faq .a p:last-child{margin-bottom:0}
.linkgrid{list-style:none;padding:0;margin:1.2em 0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.linkgrid li{margin:0}
.linkgrid a{display:block;border:1px solid var(--line);border-radius:var(--radius);
padding:11px 13px;text-decoration:none;font-size:.93rem;font-weight:600;background:#fff}
.linkgrid a:hover{border-color:#a9bdd6;background:var(--paper-2)}
.linkgrid .meta{display:block;font-weight:400;font-size:.8rem;color:var(--ink-3);margin-top:2px}
.moreblock{border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;
margin:2.4em 0;background:var(--paper-2)}
.moreblock h2{margin:0 0 .6em;font-size:1.12rem}
.moreblock ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.moreblock li{margin:0;font-size:.95rem}
.moreblock .note{font-size:.82rem;color:var(--ink-3);margin:.9em 0 0}
.sources{font-size:.87rem;background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--radius);padding:16px 18px;margin:2.4em 0 0}
.sources h2{margin:0 0 .6em;font-size:1rem}
.sources ol{margin:0;padding-left:1.3em}
.sources li{margin:.35em 0;color:var(--ink-2)}
.todo{background:#fff4d6;border:1px dashed #d4a72c;border-radius:4px;padding:2px 6px;
font:.84em var(--mono);color:#7a5b09}
/* --------------------------------------------------------------- sidebar */
.side-card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px 18px;
margin:0 0 18px;background:#fff;box-shadow:var(--shadow-1)}
.side-card h2,.side-card h3{margin:0 0 .5em;font-size:1rem}
.side-card p{font-size:.9rem;margin:0 0 .8em}
.side-card p:last-child{margin-bottom:0}
.side-card ul{padding-left:1.15em;font-size:.9rem;margin:0}
.side-jump{display:block;text-align:center;background:var(--go);border-radius:var(--radius);
padding:13px;font-weight:750;font-size:1rem;color:#fff;text-decoration:none}
.side-jump:hover{background:var(--go-2);color:#fff}
.side-jump small{display:block;font-weight:400;font-size:.72rem;text-transform:uppercase;
letter-spacing:.06em;opacity:.8;margin-top:2px}
/* ----------------------------------------------------------- mobile sticky
Form CTA only — placement #4 of the four required form entry points.
No click-to-call button: this site has no phone channel. */
.mobile-cta{
display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
background:#fff;border-top:1px solid var(--line);
box-shadow:0 -3px 14px rgba(16,21,28,.13);
padding:9px 12px calc(9px + env(safe-area-inset-bottom));
gap:9px;align-items:center
}
.mobile-cta .m-note{flex:1 1 auto;font-size:.76rem;line-height:1.35;color:var(--ink-3)}
.mobile-cta .m-note b{display:block;color:var(--ink);font-size:.86rem;font-weight:700}
.mobile-cta .m-form{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
padding:13px 18px;border-radius:var(--radius);text-decoration:none;font-weight:750;
font-size:.95rem;background:var(--go);color:#fff}
.mobile-cta .m-form:hover{background:var(--go-2);color:#fff}
/* ------------------------------------------------------------------ footer */
.sitefoot{background:var(--navy);color:#b9c8da;margin-top:56px;font-size:.9rem}
.sitefoot .wrap{padding-top:34px;padding-bottom:30px}
.sitefoot a{color:#dbe6f2}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;margin-bottom:26px}
.foot-cols h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:#8ea3bd;
margin:0 0 .7em;font-weight:700}
.foot-cols ul{list-style:none;padding:0;margin:0}
.foot-cols li{margin:.36em 0}
.foot-brand{font-weight:800;color:#fff;font-size:1.05rem;margin-bottom:.4em;display:block}
.legalfoot{border-top:1px solid rgba(255,255,255,.10);padding-top:16px;font-size:.72rem;
line-height:1.55;color:#7f93ad}
.legalfoot p{margin:0 0 .7em}
.legalfoot p:last-child{margin-bottom:0}
/* ------------------------------------------------------------------ diagrams
Inline SVG figures (no image files, no JS). Every fill below was run through
the dataviz palette validator against THESE surfaces, not the validator's
defaults:
light categorical #1d4ed8 #c2410c #047857 vs #ffffff --pairs all PASS
dark categorical #3b82f6 #ea580c #059669 vs #0f1b2b --pairs all PASS
light severity ordinal #eb9468 #e0703c #c94b28 #b3341f --ordinal PASS
dark severity ordinal #c2451f #e0703c #ef8f63 #f6b795 --ordinal PASS
Text uses ink tokens only; --d-onfill / --d-onq1 are for labels that sit
inside a filled mark and both clear 4.5:1 on the fill they sit on.
The page itself has no dark theme, so the figure carries its own surface —
in dark mode it reads as an inverted panel, like the hero and the footer. */
.dgm{
--d-surface:#ffffff;
--d-plane:#f6f8fa;
--d-ink:#10151c;
--d-ink-2:#39424f;
--d-muted:#5d6875;
--d-grid:#e4e9ef;
--d-axis:#c3ccd6;
--d-s1:#1d4ed8;
--d-s2:#c2410c;
--d-s3:#047857;
--d-q1:#eb9468;
--d-q2:#e0703c;
--d-q3:#c94b28;
--d-q4:#b3341f;
--d-onfill:#ffffff;
--d-onq1:#10151c;
max-width:520px;margin:1.9em 0;padding:12px 12px 4px;
border:1px solid var(--line);border-radius:var(--radius-lg);
background:var(--d-surface);box-shadow:var(--shadow-1);
}
.dgm.dgm-lead{margin-top:0}
.dgm>svg{display:block;width:100%;height:auto;
font-family:var(--sans);font-variant-numeric:tabular-nums}
.dgm>svg text{paint-order:stroke fill}
.dgm figcaption{font-size:.83rem;line-height:1.5;color:var(--d-muted);
margin:10px 2px 0;padding-top:9px;border-top:1px solid var(--d-grid)}
.dgm .dgm-data{margin:8px 0 0}
.dgm .dgm-data summary{cursor:pointer;font-size:.8rem;font-weight:650;
color:var(--d-ink-2);padding:7px 2px;list-style:none;position:relative}
.dgm .dgm-data summary::-webkit-details-marker{display:none}
.dgm .dgm-data summary::before{content:"+ ";font-weight:400;color:var(--d-muted)}
.dgm .dgm-data[open] summary::before{content:"\2013 ";}
.dgm .dgm-data summary:hover{color:var(--d-ink)}
.dgm .dgm-data .tablewrap{margin:0 0 10px}
.dgm .dgm-data table{font-size:.82rem}
.dgm .dgm-data table caption{color:var(--d-muted)}
.dgm .dgm-data p{font-size:.8rem;color:var(--d-muted);margin:0 2px 10px}
@media (prefers-color-scheme:dark){
.dgm{
--d-surface:#0f1b2b;
--d-plane:#16273c;
--d-ink:#f2f6fb;
--d-ink-2:#cbd8e6;
--d-muted:#9db0c6;
--d-grid:#24354b;
--d-axis:#3a5170;
--d-s1:#3b82f6;
--d-s2:#ea580c;
--d-s3:#059669;
--d-q1:#c2451f;
--d-q2:#e0703c;
--d-q3:#ef8f63;
--d-q4:#f6b795;
--d-onfill:#0f1b2b;
--d-onq1:#f2f6fb;
border-color:#24354b;box-shadow:none;
}
.dgm .dgm-data th,.dgm .dgm-data td{border-color:var(--d-grid);color:var(--d-ink)}
.dgm .dgm-data thead th{background:#16273c;color:var(--d-ink-2)}
.dgm .dgm-data tbody th{background:#132234}
}
@media (max-width:760px){
.dgm{max-width:100%;padding:10px 10px 2px}
}
@media print{
.dgm{break-inside:avoid;box-shadow:none}
.dgm .dgm-data{display:none}
}
/* --------------------------------------------------------------- responsive */
@media (max-width:1040px){
.hero .wrap{grid-template-columns:1fr;gap:28px}
.layout{grid-template-columns:1fr;gap:32px}
.sidebar{position:static}
.foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
body{font-size:16px}
h1{font-size:1.72rem}
.hero h1{font-size:1.85rem}
h2{font-size:1.32rem}
.topnav{display:none}
.btn-top{margin-left:auto;padding:8px 13px;font-size:.88rem}
.hero .wrap{padding-top:26px;padding-bottom:30px}
.grid2{grid-template-columns:1fr}
.choices.two{grid-template-columns:1fr}
.mobile-cta{display:flex}
body{padding-bottom:70px}
.foot-cols{grid-template-columns:1fr;gap:20px}
.shortform form{flex-direction:column}
.shortform .btn{width:100%}
}
@media print{
.topbar,.mobile-cta,.formcard,.shortform,.sidebar{display:none!important}
}
/* ------------------------------------------------------------------ figures
Editorial photography. Generic scenes only — no identifiable people and no
named firms (_shared/BUILD-PLAYBOOK.md §6). */
figure.ph{margin:1.9em 0;padding:0}
figure.ph picture,figure.ph img{border-radius:var(--radius-lg)}
figure.ph figcaption{font-size:.83rem;line-height:1.5;color:var(--ink-3);margin-top:9px}
/* ---------------------------------------------------------------- hero aside
The hero carries two routes side by side: the qualifying form and the
three-field callback. Someone holding a deadline will not do six screens. */
.hero-aside{display:grid;gap:14px}
.hero-aside .formcard.compact .fc-body{padding:16px 18px 18px}
.formcard.compact .fc-head{padding:13px 18px 11px}
.altroute{font-size:.82rem;color:#c5d4e6;text-align:center;margin:0}
.altroute a{color:#fff}
.opt{font-weight:400;color:var(--ink-3)}
/* badge ticker — four claims, each of which has to be literally true */
.badges{list-style:none;padding:0;margin:1.1em 0 0;display:flex;flex-wrap:wrap;gap:7px 9px}
.badges li{margin:0;font-size:.78rem;font-weight:650;letter-spacing:.01em;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
color:#dce7f4;padding:6px 11px;border-radius:99px}
.badges.on-paper li{background:var(--paper-2);border-color:var(--line);color:var(--ink-2)}
/* neutrality note — our one structural advantage, stated once, without shouting */
.neutral{border-left:4px solid var(--go);background:var(--go-soft);padding:14px 16px;
border-radius:0 var(--radius) var(--radius) 0;margin:1.8em 0;font-size:.95rem}
.neutral strong{display:block;margin-bottom:.25em}
.neutral p:last-child{margin-bottom:0}
/* ------------------------------------------------------------------ calculator
The result is rendered before any form is shown. That is deliberate: a gated
calculator converts slightly better and is worth nothing as a citable asset,
and on this site the calculator IS the asset. */
.calc{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
box-shadow:var(--shadow-2);overflow:hidden;margin:0 0 2em}
.calc .calc-head{background:var(--paper-2);border-bottom:1px solid var(--line);padding:16px 20px 14px}
.calc .calc-head h2{margin:0 0 4px;font-size:1.18rem}
.calc .calc-head p{margin:0;font-size:.87rem;color:var(--ink-3)}
.calc .calc-body{padding:18px 20px 22px}
.calc-steps{display:flex;gap:6px;align-items:center;margin:0 0 16px}
.calc-steps span{flex:1;height:5px;border-radius:99px;background:var(--paper-3)}
.calc-steps span.on{background:var(--go)}
.calc-steps .lbl{flex:0 0 auto;font-size:.74rem;font-weight:650;color:var(--ink-3);
font-variant-numeric:tabular-nums}
.cstep{display:none}
.cstep.is-active{display:block;animation:fade .18s ease}
.cstep h3{margin:0 0 4px;font-size:1.03rem}
.cstep .why{font-size:.85rem;color:var(--ink-3);margin:0 0 13px}
.cstep .why b{color:var(--ink-2);font-weight:650}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 6px}
.checks label{display:flex;gap:9px;align-items:flex-start;border:1.5px solid var(--line);
border-radius:var(--radius);padding:10px 12px;font-size:.92rem;cursor:pointer;background:#fff}
.checks label:hover{border-color:#a9bdd6;background:var(--paper-2)}
.checks input{margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:#0a6b4f}
.checks input:checked ~ span{font-weight:650}
.calc .grid3{display:grid;grid-template-columns:1.4fr 1fr;gap:0 12px}
.calc .inline-sel{display:flex;gap:8px}
.calc .inline-sel input{flex:1 1 auto}
.calc .inline-sel select{flex:0 0 118px}
.calcnav{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.calcnav .btn{width:auto;flex:1}
.calcnav .btn.secondary{flex:0 0 auto}
.result{display:none}
.result.is-active{display:block}
.rtot{background:var(--navy);color:#fff;border-radius:var(--radius);padding:16px 18px;margin:0 0 16px}
.rtot .rlbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:#9fb3cd;font-weight:700}
.rtot .rnum{font-size:2.1rem;font-weight:800;line-height:1.1;display:block;margin:.15em 0;
font-variant-numeric:tabular-nums}
.rtot p{margin:.4em 0 0;font-size:.84rem;color:#c5d4e6}
.rpart{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 12px;overflow:hidden}
.rpart h4{margin:0;padding:10px 14px;background:var(--paper-2);border-bottom:1px solid var(--line);
font-size:.95rem}
.rpart h4 small{display:block;font-weight:400;color:var(--ink-3);font-size:.78rem;margin-top:1px}
.rpart table{margin:0;font-size:.9rem}
.rpart table td,.rpart table th{border-left:0;border-right:0;border-top:0}
.rpart table tr:last-child td,.rpart table tr:last-child th{border-bottom:0}
.rpart td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rpart tr.sum th,.rpart tr.sum td{background:var(--paper-2);font-weight:750}
.rnote{font-size:.83rem;color:var(--ink-3);margin:.9em 0 0}
.rflags{list-style:none;padding:0;margin:.8em 0 0;display:flex;flex-wrap:wrap;gap:6px}
.rflags li{margin:0;font-size:.76rem;background:var(--warn-bg);border:1px solid var(--warn-line);
border-radius:99px;padding:4px 10px;color:#6b5312}
.calc-cta{margin:18px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
background:var(--go-soft)}
.calc-cta h3{margin:0 0 .35em;font-size:1.02rem}
.calc-cta p{margin:0 0 .7em;font-size:.92rem}
.calc-cta .btn{width:auto;padding:12px 20px}
.calcerr{color:#a3291a;font-size:.85rem;margin:8px 0 0;font-weight:600}
@media (max-width:760px){
.checks{grid-template-columns:1fr}
.calc .grid3{grid-template-columns:1fr}
}
@media print{.calc-steps,.calcnav,.calc-cta{display:none!important}}
/* brand mark */
.brand{display:inline-flex;align-items:center;gap:.5rem}
.brandmark{flex:0 0 auto;display:block}
/* blog */
.kicker{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:#6b7a8d;
font-weight:700;margin:0 0 .35rem}
.postlist{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.9rem}
.postlist a{display:block;padding:1.05rem 1.2rem;border:1px solid var(--line);border-radius:10px;
text-decoration:none;color:var(--ink);font-weight:650;line-height:1.4;background:var(--paper)}
.postlist a:hover{border-color:#b9c4d2;background:#fbfcfd}
.postlist .kicker{display:block;margin-bottom:.35rem}
.postlist .meta{display:block;margin-top:.45rem;font-size:.82rem;font-weight:400;color:#6b7a8d}
.postnav{margin-top:2.4rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.9rem}
@media (prefers-color-scheme:dark){
.postlist a{background:#111a26;border-color:#26323f;color:#e7ecf2}
.postlist a:hover{background:#16202d}
}
/* compact definition list inside a factbox — used by the city pages for the
ONS / statutory-cap figures */
.minidl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:.4em 0 1em;font-size:.92rem}
.minidl dt{font-weight:700;color:var(--ink-2)}
.minidl dd{margin:0;font-variant-numeric:tabular-nums}
@media (max-width:520px){
.minidl{grid-template-columns:1fr;gap:2px 0}
.minidl dd{margin-bottom:.5em}
}
/* inline field hint — used where an input's semantics need one sentence */
.field .hint{font-size:.8rem;color:var(--ink-3);margin:5px 0 0;line-height:1.45}
/* ===========================================================================
sr22finder.com additions
Components this build introduces that the shared base did not have:
the one-step form's microcopy and error line, and the state checker.
=========================================================================== */
.microcopy{
margin:.55rem 0 0;font-size:.82rem;color:var(--ink-3);text-align:center;
}
.step-err{
margin:0 0 .75rem;padding:.6rem .75rem;border-radius:var(--radius);
background:var(--accent-soft);border:1px solid #e8b9b4;color:#7d2420;
font-size:.9rem;font-weight:600;
}
/* --- state checker ------------------------------------------------------ */
.statecheck{
margin:1.6rem 0;padding:1.1rem 1.2rem;border:1px solid var(--line);
border-radius:var(--radius-lg);background:var(--paper-2);
}
.statecheck h2,.statecheck h3{margin-top:0;font-size:1.12rem}
.statecheck p.sc-lede{margin:.2rem 0 .8rem;color:var(--ink-2);font-size:.95rem}
.statecheck select{
width:100%;max-width:22rem;padding:.6rem .7rem;font:inherit;
border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.statecheck select:focus{outline:2px solid var(--navy-2);outline-offset:1px}
.sc-out{margin-top:.95rem}
.sc-dl{
display:grid;grid-template-columns:minmax(8.5rem,auto) 1fr;gap:.35rem .9rem;
margin:0;font-size:.95rem;
}
.sc-dl dt{color:var(--ink-3);font-weight:650}
.sc-dl dd{margin:0;color:var(--ink)}
.sc-more{margin:.8rem 0 0;font-size:.92rem}
@media (max-width:540px){
.sc-dl{grid-template-columns:1fr;gap:.1rem .5rem}
.sc-dl dd{margin:0 0 .5rem}
}
/* --- statute card: as-of tag ------------------------------------------- */
.statute .asof{
display:inline-block;padding:.05rem .45rem;border-radius:999px;
background:var(--paper-3);color:var(--ink-3);font-size:.76rem;font-weight:650;
letter-spacing:.01em;
}
.statute .link{margin:.6rem 0 0;font-size:.8rem;color:var(--ink-3);word-break:break-all}
.statute .link a{color:var(--ink-3)}
/* --- limits table ------------------------------------------------------- */
.limits td.num,.limits th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.limits td.short{font-family:var(--mono);font-size:.92em;white-space:nowrap}
.limits tr.is-here td{background:var(--go-soft)}
/* --- mobile: the brand tagline is long on this site ---------------------
"SR-22 & interlock requirements by state" does not fit a phone header, and
because .brand is white-space:nowrap inside a flex row it was setting a
min-width on — which pushed the .layout grid's 1fr out past the
viewport and made every page horizontally scrollable at 390px. Hiding the
tagline (not the brand) is the fix; the already says what the page is. */
@media (max-width:820px){
.brand span{display:none}
.brand{min-width:0}
.topbar .wrap{gap:10px}
}
@media (max-width:420px){
.brand{font-size:1rem}
.btn-top{padding:8px 11px;font-size:.84rem}
}
/* --- grid min-width guard ------------------------------------------------
The base .layout is grid-template-columns:minmax(0,1fr) 340px, but the
<=1040px override collapses it to a bare `1fr` — and a bare 1fr track has
min-width:auto, so a grid item whose min-content width is large (a long
statute citation in a table cell, a bare URL in .statute .link) pushes the
track past the viewport instead of scrolling inside it. At 390px that made
every page horizontally scrollable and clipped the H1.
Restoring minmax(0,1fr) plus min-width:0 on the items is the fix. */
@media (max-width:1040px){
.layout{grid-template-columns:minmax(0,1fr)}
.layout > *{min-width:0}
}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table{min-width:100%}
/* ===========================================================================
MOBILE OVERFLOW SAFETY — 2026-09-20
실측: 라이브 사이트를 390px 뷰포트로 열었더니 scrollWidth 550px.
가로 스크롤이 생기면서 헤더가 잘렸다. 원인 3개를 여기서 잡는다.
1)
이 540px 로 페이지를 벌림 — 표 안에서 스크롤되게
2) .brand 안의 태그라인 이 안 숨겨짐
3) .btn-top 상단 CTA 가 화면 밖(right 551px)
이 블록은 파일 맨 끝에 있어야 캐스케이드에서 이긴다.
=========================================================================== */
@media (max-width: 760px) {
/* 표는 자기 안에서 가로 스크롤 — 페이지를 벌리지 않는다 */
table { display: block; width: 100%; max-width: 100%;
overflow-x: auto; -webkit-overflow-scrolling: touch; }
table caption { white-space: normal; }
/* 긴 URL·조문번호가 레이아웃을 벌리는 것 방지 */
pre, code { overflow-x: auto; max-width: 100%; }
img, svg, figure, picture, video { max-width: 100%; height: auto; }
}
@media (max-width: 620px) {
.brand > span { display: none; } /* 브랜드 태그라인 */
.btn-top { display: none; } /* 상단 CTA — 하단 스티키 CTA 가 대체한다 */
.brand { max-width: 100%; min-width: 0; }
}
/* --- 그리드 blowout 방지 ------------------------------------------------
CSS 그리드의 `1fr` 은 암묵적으로 min-width:auto(=min-content) 다.
.tablewrap table{min-width:540px} 같은 자식이 있으면 트랙이 540px 로 벌어지면서
모바일에서 페이지 전체가 넘친다. minmax(0,1fr) 이라야 실제로 줄어든다.
2026-09-20 실측: iso27001partners 부속서A 페이지 375px 뷰포트에서 scrollWidth 560px. */
.layout { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 900px) {
.layout { grid-template-columns: minmax(0, 1fr) !important; }
.layout > * { min-width: 0; }
}
@media (max-width: 760px) {
.tablewrap { max-width: 100%; overflow-x: auto; }
/* 래퍼가 있으면 표는 원래 폭을 유지하고 래퍼 안에서 스크롤한다 */
.tablewrap table { display: table; }
}