:root{
  --navy:#16264d;--navy-deep:#0a142e;--gold:#e9a92b;--gold-dk:#a8721a;
  --ink:#141c33;--sub:#56637f;--line:#dfe5f0;--card:#ffffff;--bg:#f7f8fc;--tint:#eef2fb;--link:#2449a8;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:14px;--shadow:0 1px 2px rgba(18,30,64,.05),0 10px 30px rgba(18,30,64,.07);
}
@media(prefers-color-scheme:dark){:root{
  --ink:#e8ecf7;--sub:#a3b0cf;--line:#232f52;--card:#111a33;--bg:#0a1124;--tint:#131d3a;--link:#93b2ff;--gold:#f3c257;--gold-dk:#f3c257;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:740px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--card);padding:8px 12px;border-radius:8px;z-index:9}

/* header */
.top{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);letter-spacing:-.2px}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;border-radius:7px}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{color:var(--sub);font-size:15px;padding:7px 11px;border-radius:8px}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);background:var(--tint);text-decoration:none}
.nav a.get{background:var(--navy);color:#fff;font-weight:600;margin-left:6px}
.nav a.get:hover{background:var(--navy-deep)}
@media(prefers-color-scheme:dark){.nav a.get{background:var(--gold);color:#101830}.nav a.get:hover{background:#ffd27a}}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(1100px 480px at 85% -10%,rgba(233,169,43,.22),transparent 60%),linear-gradient(160deg,#0a142e 0%,#16264d 55%,#1d3266 100%);color:#fff}
canvas.globe{position:absolute;right:-170px;top:50%;transform:translateY(-50%);width:820px;height:820px;pointer-events:none;opacity:.95} .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center;padding-top:76px;padding-bottom:76px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5.2vw,58px);line-height:1.06;letter-spacing:-.8px;margin:14px 0 18px}
.hero p.lead{font-size:19px;line-height:1.6;color:#cfd8ee;max-width:560px;margin:0 0 28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:16px;padding:13px 22px;border-radius:999px;border:1px solid transparent}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--gold);color:#101830}.btn.primary:hover{background:#ffd27a}
.btn.ghost{border-color:rgba(255,255,255,.3);color:#fff}.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.dark{background:var(--navy);color:#fff}.btn.dark:hover{background:var(--navy-deep)}
.hero .fine{font-size:13.5px;color:#9fb0d6;margin-top:16px}
.panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:24px;backdrop-filter:blur(6px)}
.panel .row{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.panel .row:last-child{border-bottom:0}
.panel .ic{flex:0 0 36px;height:36px;border-radius:10px;background:rgba(233,169,43,.16);color:var(--gold);display:grid;place-items:center}
.panel b{display:block;font-size:15.5px}.panel span{font-size:14px;color:#b9c5e2;line-height:1.45;display:block}

/* sections */
section{padding:68px 0}
section.alt{background:var(--tint)}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dk)}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(27px,3.4vw,36px);line-height:1.15;letter-spacing:-.4px;margin:8px 0 12px}
h3{font-size:18px;margin:0 0 6px;letter-spacing:-.1px}
.lede{color:var(--sub);font-size:18px;max-width:660px;margin:0 0 30px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card p{margin:0;color:var(--sub);font-size:15.5px;line-height:1.55}
a.card{color:inherit;display:block;transition:transform .15s ease,border-color .15s ease}
a.card:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--gold)}
.card .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dk);margin-bottom:8px}
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;box-shadow:var(--shadow)}
.step:before{counter-increment:s;content:counter(s);font-family:var(--serif);font-size:30px;color:var(--gold-dk);display:block;line-height:1;margin-bottom:10px}
.step p{margin:0;color:var(--sub);font-size:15.5px;line-height:1.55}
.safety{border:1px solid var(--line);border-left:4px solid var(--gold);background:var(--card);border-radius:var(--radius);padding:22px 24px;font-size:16px}
.safety b{display:block;margin-bottom:6px}
.band{background:linear-gradient(160deg,#0a142e,#16264d);color:#fff;border-radius:22px;padding:44px 36px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band h2{margin:0 0 6px;color:#fff}.band p{margin:0;color:#c5d0ea}

/* article + docs */
.crumbs{font-size:14px;color:var(--sub);padding-top:26px}
.crumbs a{color:var(--sub)}
.doc{padding-top:18px;padding-bottom:72px}
.doc h1{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.6vw,46px);line-height:1.1;letter-spacing:-.6px;margin:12px 0 14px}
.doc .standfirst{font-size:20px;line-height:1.55;color:var(--sub);margin:0 0 20px}
.meta{font-size:14px;color:var(--sub);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:0 0 30px}
.doc h2{font-size:clamp(23px,2.8vw,29px);margin:44px 0 10px}
.doc h3{margin:28px 0 6px;font-size:19px}
.doc p,.doc li{font-size:17.5px;line-height:1.72}
.doc ul,.doc ol{padding-left:22px}
.doc li{margin:6px 0}
.callout{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin:24px 0;font-size:16.5px}
.callout b{color:var(--ink)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin:22px 0}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:560px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);background:var(--tint)}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;font-size:12.5px;font-weight:650;padding:3px 10px;border-radius:999px;background:var(--tint);border:1px solid var(--line);color:var(--sub);white-space:nowrap}
.pill.ok{color:#17663a;background:#e7f6ec;border-color:#c5e8d0}
.pill.warn{color:#8a5a00;background:#fdf3dc;border-color:#f3dfae}
@media(prefers-color-scheme:dark){.pill.ok{color:#8fe0ad;background:#12301f;border-color:#1f4a31}.pill.warn{color:#f3c257;background:#33270c;border-color:#4d3b12}}
.statelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:18px 0 0;padding:0;list-style:none}
.statelist a{display:flex;justify-content:space-between;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--ink);font-size:15.5px}
.statelist a:hover{border-color:var(--gold);text-decoration:none}
.statelist small{color:var(--sub)}
.postlist{display:grid;gap:16px}
.post h2{font-size:26px;margin:4px 0 8px}
.post p{margin:0;color:var(--sub)}
.faq h3{margin-top:26px}

footer{border-top:1px solid var(--line);padding:38px 0 54px;color:var(--sub);font-size:14.5px}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;margin-bottom:26px}
footer h4{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
footer a{color:var(--sub);display:block;padding:3px 0}
footer .legal{border-top:1px solid var(--line);padding-top:18px;font-size:13.5px;line-height:1.6}
@media(max-width:860px){ canvas.globe{width:620px;height:620px;right:-250px;top:auto;bottom:-230px;transform:none;opacity:.55} 
  .hero .wrap{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px}
  .grid,.grid.two,.steps{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  section{padding:50px 0}
  .nav a{padding:6px 8px;font-size:14.5px}
}
/* ---- synced with the iOS design system: ios/Casework/Views/Shared/Theme.swift + the colorsets ---- */
@font-face{font-family:"Nunito";src:url(/assets/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{
  --navy:#182a54;--navy-deep:#0a142e;--gold:#f2b63c;--gold-hi:#ffdf8e;--gold-dk:#855c00;--gold-wash:#fcf3dd;
  --ink:#16213f;--sub:#5b6a8c;--line:#e2e7f2;--card:#ffffff;--bg:#f6f8fd;--tint:#eef2fb;--link:#2a54b8;
  --serif:ui-rounded,"SF Pro Rounded","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--radius:14px;
  --shadow:0 1px 2px rgba(24,42,84,.05),0 8px 14px rgba(24,42,84,.10);
}
@media(prefers-color-scheme:dark){:root{
  --navy:#27457f;--navy-deep:#060b1a;--gold:#f6c659;--gold-dk:#f6c659;--gold-wash:#2c2512;
  --ink:#e9eefb;--sub:#9fb0d6;--line:#243156;--card:#121a33;--bg:#0b1226;--tint:#131d3a;--link:#8fb0ff;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 24px rgba(0,0,0,.35);
}}
h1,h2,.hero h1,.doc h1,.doc h2{font-weight:800;letter-spacing:-.02em}
h3,.brand{font-family:var(--serif);font-weight:700}
.btn{border-radius:var(--r-md)}
.btn.primary{background:linear-gradient(180deg,var(--gold-hi),#f2b63c);box-shadow:0 6px 14px rgba(242,182,60,.28)}
.btn.primary:hover{background:linear-gradient(180deg,#ffe9ad,#f6c659)}
.btn.dark,.nav a.get{background:linear-gradient(180deg,#22397a,#182a54);color:#fff;box-shadow:0 6px 10px rgba(24,42,84,.28);border-radius:var(--r-sm)}
.btn.ghost{border-radius:var(--r-md)}
.nav a{border-radius:var(--r-sm)}
.panel{border-radius:var(--r-lg)}
.band{border-radius:var(--r-lg)}
.ico{width:44px;height:44px;border-radius:12px;background:var(--gold-wash);color:var(--gold-dk);display:grid;place-items:center;margin-bottom:14px;box-shadow:inset 0 0 0 1px rgba(242,182,60,.5)}
.ico svg{width:22px;height:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.photo{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:7/4;background:var(--navy-deep);margin:0}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.steps.stack,.grid.one{grid-template-columns:1fr}
.steps.stack .step{display:grid;grid-template-columns:44px 1fr;column-gap:16px;padding:18px 20px}
.steps.stack .step:before{grid-row:1 / span 2;margin:0;align-self:start}
.steps.stack .step h3,.steps.stack .step p{grid-column:2}
.flow{display:block;width:100%;height:auto;margin-top:34px}
.flow text{font-family:var(--serif)}
.band.photo-bg{background:linear-gradient(90deg,rgba(10,20,46,.95) 0%,rgba(24,42,84,.78) 100%),url(/assets/photos/courthouse-1344.webp) center 30%/cover}
.doc .photo{margin:0 0 30px}
.photo.wide{aspect-ratio:21/9;margin:0 0 30px}
/* redesign pass 3: mirrors CWPlanCard (check-list points), the gold "active" pill and the outlined tonal button */
.pts{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.pts li{display:flex;gap:8px;align-items:flex-start;color:var(--ink);font-size:15px;line-height:1.4}
.pts svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--ok)}
.pill.gold{color:var(--gold-dk);background:color-mix(in srgb,var(--gold) 20%,transparent);border-color:transparent;font-weight:650}
.card.post,a.card{border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.split.head{margin-bottom:30px}
.split.head .lede{margin-bottom:0}
.post.card{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:center}
.post.card .photo{aspect-ratio:4/3;box-shadow:none;border-radius:var(--r-md)}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:24px}
  .flow{display:none}
  .post.card{grid-template-columns:1fr}
  .post.card .photo{aspect-ratio:7/4}
}

/* ---- redesign pass 2 (2026-11-11): mirrors ios/Casework/Views/Shared/CWDesign.swift + CWComponents.swift ---- */
:root{
  --accent:#182a54;--ok:#0a7333;--warn:#a35400;--info:#1a4fb0;--danger:#bd1f1f;
  --fill-top:#294785;--fill-bottom:#172954;
}
@media(prefers-color-scheme:dark){:root{
  --accent:#9eb8f5;--ok:#5cd685;--warn:#ffb857;--info:#8cb8ff;--danger:#ff807a;
  --fill-top:#4569cc;--fill-bottom:#304fa8;
  --shadow:none; /* like the app: no card shadow in dark, the hairline carries the edge */
}}
/* primary fill is lifted in dark so a filled button does not sink into the dark surface (cwFillTop/Bottom) */
.btn.dark,.nav a.get{background:linear-gradient(180deg,var(--fill-top),var(--fill-bottom));color:#fff}
.btn.dark:hover,.nav a.get:hover{background:linear-gradient(180deg,var(--fill-top),var(--fill-top))}
/* section header: the app's gold rule above the heading (CWRule + CWScreenHeader) */
.kicker:before{content:"";display:block;width:34px;height:3px;border-radius:99px;background:linear-gradient(135deg,#f7c759,#e6a129);margin-bottom:12px}
.ico{border-radius:var(--r-sm)}
/* step numerals: the app's monogram-avatar disc (navy gradient, gold hairline, white rounded numeral) */
.step:before{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#1c305e,#0a142e);color:#fff;
  font:800 16px/1 var(--serif);display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(242,182,60,.7);margin-bottom:12px}
/* stat strip (CWStatStrip): value over label in small hairline tiles */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-38px;position:relative;z-index:2}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow)}
.stat b{display:block;font:800 26px/1.15 var(--serif);color:var(--ink);letter-spacing:-.02em}
.stat span{display:block;font-size:14px;line-height:1.4;color:var(--sub);margin-top:3px}
section.tight{padding:0 0 8px}
/* status pills (BadgeView): status ink on a 14% tint of itself */
.pill.ok,.pill.warn,.pill.info,.pill.accent{border-color:transparent;font-weight:650}
.pill.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.pill.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.pill.info{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
.pill.accent{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* notice card (CWNotice / ProhibitedUseCard): icon, tinted fill, tinted hairline */
.safety{display:grid;grid-template-columns:38px 1fr;column-gap:16px;border:1px solid color-mix(in srgb,var(--danger) 25%,transparent);
  border-left-width:1px;background:color-mix(in srgb,var(--danger) 8%,var(--card));border-radius:var(--r-md);padding:20px 22px}
.safety .ni{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.safety .ni svg{width:19px;height:19px}
.safety b{color:var(--danger);font-family:var(--serif);font-size:17px}
/* FAQ as grouped rows (the app's inset-grouped card rows) */
.faqlist{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;margin-top:18px}
.faqlist details{border-bottom:1px solid var(--line)}
.faqlist details:last-child{border-bottom:0}
.faqlist summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:17px 20px;font-family:var(--serif);font-weight:700;font-size:17.5px;color:var(--ink)}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary:after{content:"";flex:0 0 9px;width:9px;height:9px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);transition:transform .15s ease;margin-right:4px}
.faqlist details[open] summary:after{transform:rotate(-135deg)}
.faqlist summary:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
.faqlist p{margin:0;padding:0 20px 18px;color:var(--sub);font-size:16.5px;line-height:1.65}
/* plan cards */
.plan{display:flex;flex-direction:column;gap:6px}
.plan .fee{font:800 30px/1.1 var(--serif);color:var(--ink);letter-spacing:-.02em}
.plan .fee small{font:500 14px var(--sans);color:var(--sub);letter-spacing:0}
.plan.best{border-color:var(--gold);box-shadow:var(--shadow),inset 0 0 0 1px rgba(242,182,60,.45)}
.plan .pill{align-self:flex-start;margin-bottom:6px}
@media(max-width:860px){
  .stats{grid-template-columns:1fr 1fr;margin-top:-26px}
  .safety{grid-template-columns:1fr;row-gap:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}a.card,.faqlist summary:after{transition:none}}