/* Getting Justice Now – generated by scripts/build.py */

:root{--brand:#3B2A8C;--brand-2:#5B3FC4;--brand-dark:#1A1240;--accent:#F4A261;--accent-hover:#F7B987;--accent-ink:#1A1240;
--glow-1:rgba(244,162,97,.38);--glow-2:rgba(91,63,196,.55);--tag-on-dark:#FFC9A0;
--bg:#FAF8FF;--surface:#fff;--ink:#1C1733;--muted:#4E4866;--line:#E4DFF3;--soft:#F1EDFB;
--head:'Playfair Display',Georgia,'Times New Roman',serif;--body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--radius:22px}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-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:'Playfair Display';font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/fonts/playfair-display-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}
.site h1,.site h2{letter-spacing:-.015em;font-weight:700}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.site img{max-width:100%;height:auto;display:block}
.site a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:1px}
.site a:not(.btn):not(.logo):not(.navlink):not(.footer-logo){text-decoration:underline}
.site a:hover{color:var(--brand-2)}
.site h1,.site h2,.site h3{font-family:var(--head);color:inherit;line-height:1.12;margin:0 0 .5em;text-wrap:balance}
.site h1{font-size:clamp(2.3rem,5.2vw,4rem)}
.site h2{font-size:clamp(1.85rem,3.6vw,2.75rem)}
.site h3{font-size:1.15rem;font-family:var(--body);font-weight:700;letter-spacing:0;line-height:1.3}
.site p{margin:0 0 1em;text-wrap:pretty}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.narrow{width:min(860px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:10px 14px;z-index:200;border-radius:8px}
.skip:focus{left:10px;top:10px}
#about-abuse,#lawsuits,#eligibility,#signs,#how,#support,#faq,#start{scroll-margin-top:120px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top disclaimer ---------- */
.topbar{background:var(--brand-dark);color:#ECE8FA;font-size:12.5px;line-height:1.5;position:relative;z-index:2}
.topbar p{margin:0;padding:8px 0}
@media (max-width:600px){.topbar{font-size:11.5px;line-height:1.45}.topbar p{padding:7px 0}}
.btn-slide{white-space:normal}

/* ---------- glass pill navbar (21st Glassmorphism Navigation) ----------
   Fixed, centered, ~80% width. Glass values: rgba(255,255,255,.15), blur(10px),
   1px rgba(255,255,255,.5) border, 30px radius, soft shadow.
   White label text sits on a darkened hero scrim so it clears WCAG AA.
   After the hero, .is-solid uses an opaque light surface and ink text.
   Site UI stays at z-index <= 80 so the LeadBot widget (much higher) is never covered. */
/* The wrap is a zero-height sticky strip in normal flow right under the disclaimer, so the pill starts
   below the disclaimer and docks 10px from the top once the disclaimer scrolls away (no JS positioning).
   The hero reserves room for it via --nav-h (real bar height, set by main.js; CSS fallback below). */
.gnav-wrap{position:sticky;z-index:70;top:0;height:0;display:flex;justify-content:center;align-items:flex-start;pointer-events:none;padding:0 10px}
.gnav{pointer-events:auto;position:relative;margin-top:10px;width:min(80vw,1200px);display:flex;align-items:center;gap:8px;
  padding:8px 8px 8px 22px;border-radius:30px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 8px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25);transition:background .3s,border-color .3s,box-shadow .3s,color .3s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.gnav{background:rgba(20,13,52,.92)}}
.gnav .logo{display:flex;align-items:center;text-decoration:none;margin-right:auto;min-width:0}
.gnav .logo svg,.gnav .logo img{height:36px;width:auto}
.gnav .logo .on-light{display:none}
.gnav-links{display:flex;align-items:center;gap:2px}
.gnav-end{display:flex;align-items:center;gap:8px;flex:none}
.gnav-links a.navlink{position:relative;color:#fff;font-weight:600;font-size:15.5px;text-decoration:none;padding:9px 14px;border-radius:999px;transition:background .2s,color .2s}
.gnav-links a.navlink:hover{background:rgba(255,255,255,.16);color:#fff}
.gnav-links a.navlink::after{content:"";position:absolute;left:50%;top:-9px;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--accent);transform:translateX(-50%) scaleX(0);transition:transform .25s;box-shadow:0 0 14px 3px var(--glow-1)}
.gnav-links a.navlink:hover::after,.gnav-links a.navlink.active::after,.gnav-links a.navlink[aria-current="true"]::after{transform:translateX(-50%) scaleX(1)}
.gnav .btn{padding:11px 18px;font-size:15px;min-height:44px}
.gnav.is-solid{background:#fff;border-color:rgba(26,18,64,.14);box-shadow:0 10px 30px rgba(15,20,40,.12)}
.gnav.is-solid .logo .on-dark{display:none}
.gnav.is-solid .logo .on-light{display:block}
.gnav.is-solid .gnav-links a.navlink{color:var(--ink)}
.gnav.is-solid .gnav-links a.navlink:hover{background:var(--soft);color:var(--ink)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;place-items:center;padding:0;flex:none}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s,top .2s,background .2s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0}
.nav-toggle .bars::before{top:-5px}
.nav-toggle .bars::after{top:5px}
.gnav.is-open .nav-toggle .bars{background:transparent}
.gnav.is-open .nav-toggle .bars::before{top:0;transform:rotate(45deg)}
.gnav.is-open .nav-toggle .bars::after{top:0;transform:rotate(-45deg)}
.gnav.is-solid .nav-toggle{color:var(--ink);border-color:rgba(20,32,58,.16);background:rgba(255,255,255,.7)}
@media (max-width:980px){
  /* one clean row: brand left (never shrinks or gets covered), compact CTA + menu button right */
  .gnav-wrap{padding:0 8px}
  .gnav{width:100%;padding:6px 6px 6px 12px}
  .gnav .logo{flex:none;min-width:auto}
  .gnav .logo svg,.gnav .logo img{height:30px}
  .gnav .btn{padding:9px 14px;font-size:14px;min-height:42px;white-space:nowrap}
  .nav-toggle{display:grid;order:2}
  .gnav.is-docked:not(.is-solid){background:rgba(20,13,52,.92)}
  .gnav-links{display:none}
  .gnav.is-open .gnav-links{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:calc(100% + 8px);padding:8px;gap:2px;border-radius:22px;background:#140d34;border:1px solid rgba(255,255,255,.40);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.35)}
  .gnav.is-open .gnav-links a.navlink{color:#fff;padding:12px 14px;font-size:16px}
  .gnav.is-open .gnav-links a.navlink::after{display:none}
  .gnav.is-solid.is-open .gnav-links{background:#fff;border-color:rgba(20,32,58,.12)}
  .gnav.is-solid.is-open .gnav-links a.navlink{color:var(--ink)}
  .gnav.is-solid.is-open .gnav-links a.navlink:hover{background:var(--soft)}
}
/* very narrow screens: the hero already has a large CTA, so drop the bar CTA. main.js also adds
   .is-tight if the brand and buttons would ever collide (e.g. enlarged system text). */
@media (max-width:399px){.gnav .nav-cta{display:none}}
.gnav.is-tight .nav-cta{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:999px;padding:15px 26px;min-height:48px;font:700 16px/1.2 var(--body);text-decoration:none;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s,color .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary,.site .btn--primary,.site .btn--primary:hover{color:var(--accent-ink)}
.btn--primary{background:var(--accent);box-shadow:0 10px 30px -6px var(--glow-1),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn--glass,.site .btn--glass,.site .btn--glass:hover{color:#fff}
.btn--glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn--glass:hover{background:rgba(255,255,255,.2)}
.btn--block{width:100%;white-space:normal;text-align:center}
.btn--lg{padding:17px 30px;font-size:17px}
.btn[aria-busy=true]{opacity:.75;cursor:progress}
/* animated slide button (21st Gradient CTA Banner) */
.btn-slide{position:relative;padding:6px 64px 6px 28px;height:56px;overflow:hidden;transition:padding .5s,background .2s}
.btn-slide .knob{position:absolute;right:6px;top:6px;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;transition:right .5s,transform .5s}
.btn-slide:hover{padding:6px 28px 6px 64px}
.btn-slide:hover .knob{right:calc(100% - 50px);transform:rotate(-45deg)}

/* ---------- hero (21st Gradient Hero, over a photo) ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--brand-dark)}
.hero-bg{position:absolute;inset:0;z-index:-3;background:var(--brand-dark);overflow:hidden}
.hero-bg picture{position:absolute;inset:0;display:block}
.hero .hero-bg img,.page-head .hero-bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(to bottom,rgba(14,9,38,.75) 0px,rgba(14,9,38,.3) 150px,transparent 240px),linear-gradient(100deg,rgba(18,12,46,.94) 0%,rgba(18,12,46,.84) 50%,rgba(18,12,46,.62) 100%),linear-gradient(to top,rgba(18,12,46,.9),transparent 42%)}
@media (max-width:960px){.hero-shade{background:linear-gradient(to bottom,rgba(18,12,46,.88),rgba(18,12,46,.84) 60%,rgba(18,12,46,.94))}}
.hero-glow{position:absolute;z-index:-1;border-radius:100%;filter:blur(70px);pointer-events:none}
.hero-glow.g1{left:-18%;bottom:-38%;width:80%;height:80%;background:radial-gradient(ellipse at center,var(--glow-2) 0%,transparent 70%)}
.hero-glow.g2{right:-12%;top:-20%;width:55%;height:70%;background:radial-gradient(ellipse at center,var(--glow-1) 0%,transparent 70%);opacity:.7}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);gap:56px;align-items:center;padding:max(118px,calc(var(--nav-h,64px) + 54px)) 0 88px;min-height:min(880px,100svh)}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .72s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}
  .hero-copy>*:nth-child(3){animation-delay:.12s}
  .hero-copy>*:nth-child(4){animation-delay:.16s}
  .hero-copy>*:nth-child(5){animation-delay:.22s}
  .hero-copy>*:nth-child(6){animation-delay:.28s}
  .agent-card{animation:rise .8s cubic-bezier(.2,.7,.2,1) .1s both}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:700;color:#fff;background:rgba(26,18,64,.8);border:1px solid rgba(255,255,255,.30);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 40px rgba(0,0,0,.12);margin-bottom:22px}
.badge svg{width:16px;height:16px;color:var(--accent)}
.hero h1{color:#fff;line-height:1.04}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:#F4F1FF;max-width:36em;margin-top:18px}
.hero .tagline{font-weight:700;color:var(--tag-on-dark,var(--accent));font-size:1.06rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}
.assure{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.assure li{display:flex;align-items:center;gap:7px;font-size:14px;color:#fff;padding:6px 12px;border-radius:999px;background:rgba(26,18,64,.75);border:1px solid rgba(255,255,255,.16)}
.assure svg{width:15px;height:15px;color:var(--accent)}
@media (max-width:960px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:20px;padding:calc(var(--nav-h,58px) + 26px) 0 56px;min-height:0}.hero h1{font-size:clamp(2.05rem,8.2vw,2.65rem)}.hero .lead{margin-top:12px}.hero-ctas{margin:16px 0 12px}.badge{margin-bottom:16px}}

/* ---------- agent card ---------- */
.agent-card{position:relative;background:rgba(255,255,255,.96);color:var(--ink);border-radius:28px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.6),0 0 0 9px rgba(255,255,255,.10);display:flex;flex-direction:column;min-height:470px}
.agent-card__head{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.agent-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;flex:none;position:relative;box-shadow:0 8px 20px -6px var(--glow-2)}
.agent-avatar svg{width:30px;height:30px}
.agent-avatar::after{content:"";position:absolute;right:1px;bottom:2px;width:14px;height:14px;border-radius:50%;background:#1fae5b;border:2.5px solid #fff;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,174,91,.6)}70%{box-shadow:0 0 0 9px rgba(31,174,91,0)}100%{box-shadow:0 0 0 0 rgba(31,174,91,0)}}
.agent-card__title{font-weight:800;font-size:1.12rem;margin:0}
.agent-card__status{margin:0;font-size:14px;color:var(--muted)}
.agent-card__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.agent-card__body p{margin:0}
.agent-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.agent-steps li{display:flex;gap:12px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:600;font-size:15.5px}
.agent-steps .n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.agent-note{font-size:13px;color:var(--muted);line-height:1.5}
.agent-fallback{font-size:14px;background:#FFF6E0;border:1px solid #F0D58C;border-radius:12px;padding:10px 12px;color:#5a4300}
.agent-card .btn{margin-top:auto}

/* ---------- state band ---------- */
.state-band{position:relative;z-index:3;margin-top:-30px}
.state-band .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding:16px 24px;text-align:center;font-size:16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px -18px rgba(15,20,40,.30)}
.state-band svg{width:20px;height:20px;color:var(--brand);flex:none}
.state-band a{font-weight:800}
@media (max-width:760px){.state-band .inner{border-radius:20px}}

/* ---------- sections ---------- */
.section{padding:96px 0}
.section--alt{background:var(--surface);border-block:1px solid var(--line)}
.section-head{max-width:780px;margin-bottom:40px}
.section-head.center{margin-inline:auto;text-align:center}
.kicker{display:inline-block;text-transform:uppercase;letter-spacing:.18em;font-size:12.5px;font-weight:800;color:var(--brand-2);margin-bottom:12px}
.muted{color:var(--muted)}
@media (max-width:900px){.section{padding:68px 0}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- bento (21st Feature Bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(250px,auto);gap:18px}
.bento > *{border-radius:var(--radius);position:relative;overflow:hidden}
.b-hero{grid-column:span 2;grid-row:span 2;color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:flex-end;min-height:520px;background:var(--brand-dark)}
.b-hero picture,.b-hero img.bg{position:absolute;inset:0;width:100%;height:100%}
.b-hero img.bg{object-fit:cover;transition:transform .9s}
.b-hero:hover img.bg{transform:scale(1.04)}
.b-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,10,40,.95) 0%,rgba(16,10,40,.9) 50%,rgba(16,10,40,.72) 82%,rgba(16,10,40,.45))}
@media (max-width:620px){.b-hero::after{background:linear-gradient(to top,rgba(16,10,40,.95),rgba(16,10,40,.86) 75%,rgba(16,10,40,.7))}}
.b-hero > .content{position:relative;z-index:1;max-width:620px}
.b-hero h2{color:#fff}
.b-hero p{color:#fff}
.live{align-self:flex-start;color:#fff;display:inline-flex;align-items:center;gap:8px;background:#2b2156;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:700;margin-bottom:14px}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--glow-1);animation:pulse 2.4s infinite}
.b-tile{padding:28px;color:#fff;display:flex;flex-direction:column;gap:16px;background:linear-gradient(140deg,var(--brand-2),var(--brand) 60%,var(--brand-dark))}
.b-tile::before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);filter:blur(28px);pointer-events:none}
.b-tile.alt{background:linear-gradient(140deg,#2a2150,#140e30)}
.b-tile .ico{width:50px;height:50px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center;position:relative;color:var(--tag-on-dark)}
.b-tile .ico svg{width:24px;height:24px}
.b-tile h3{color:#fff;font-size:1.2rem;margin:0 0 6px;position:relative}
.b-tile p{margin:0;color:#fff;font-size:15px;line-height:1.55;position:relative}
.bento-note{margin:18px 0 0;max-width:70ch}
.b-cta{all:unset;box-sizing:border-box;cursor:pointer;padding:30px;border-radius:var(--radius);background:linear-gradient(140deg,#120c2e,#2b2156);color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.b-cta:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.b-cta .chip{color:#fff;align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:6px 12px;border-radius:999px}
.b-cta .arrow{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;transition:transform .35s,background .35s}
.b-cta .arrow svg{width:20px;height:20px}
.b-cta:hover .arrow{transform:rotate(-45deg);background:var(--accent);color:var(--accent-ink)}
.b-cta .t{font-family:var(--head);font-size:1.7rem;font-weight:700;line-height:1.15;margin-top:40px;max-width:12ch}
.sources{font-size:15px;color:var(--muted);margin-top:22px}
.sources ol{margin:.4em 0 0;padding-left:1.2em}
.sources li{margin:2px 0}
.sources a{display:inline-block;padding:8px 0;line-height:1.35}
@media (max-width:960px){.bento{grid-template-columns:1fr 1fr}.b-hero{grid-column:span 2;grid-row:auto;min-height:440px}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.b-hero{grid-column:auto;padding:28px;min-height:420px}}

/* ---------- how it works (21st How It Works Steps) ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;list-style:none;padding:0;margin:0}
.steps::before{content:"";position:absolute;left:16.6%;right:16.6%;top:34px;height:2px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}
.steps li{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.step-circle{position:relative;z-index:1;width:68px;height:68px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);box-shadow:0 10px 30px -12px rgba(15,20,40,.35)}
.step-circle svg{width:28px;height:28px}
.step-circle .no{position:absolute;top:-6px;right:-6px;min-width:26px;height:26px;border-radius:999px;background:var(--brand);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 6px;font-variant-numeric:tabular-nums}
.steps p{color:var(--muted);margin:0;max-width:30ch}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:30px}.steps::before{left:33px;right:auto;top:34px;bottom:34px;width:2px;height:auto;background:var(--line)}.steps li{flex-direction:row;text-align:left;align-items:flex-start;gap:18px}.steps li > div{padding-top:6px}}
.callout{margin-top:56px;border-radius:var(--radius);padding:30px 34px;background:var(--soft);border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.callout > div{max-width:640px}
.callout h3{font-size:1.35rem;margin:0 0 6px}
.callout p{margin:0}
.sources .fine{margin:0}

/* ---------- features with image ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev > :first-child{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:30px}.split.rev > :first-child{order:0}}
.photo{border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:0 30px 60px -28px rgba(15,20,40,.45)}
.photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.photo .tag{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(26,18,64,.92);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:8px 14px;font-size:14px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.photo .tag svg{width:16px;height:16px}
.feat{display:grid;gap:14px;list-style:none;padding:0;margin:0}
.feat li{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.section--alt .feat li{background:var(--bg)}
.feat li:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(15,20,40,.35)}
.feat .ico{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand-2),var(--brand))}
.feat .ico svg{width:24px;height:24px}
.feat h3{margin:2px 0 4px}
.feat p{margin:0;color:var(--muted);font-size:15.5px}
.notice{background:var(--soft);border-left:4px solid var(--brand);border-radius:12px;padding:16px 18px;font-size:15.5px}

/* ---------- FAQ (21st FAQ 3) ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 48px 22px 4px;font-weight:700;font-size:1.08rem;position:relative;transition:color .2s}
.faq summary:hover{color:var(--brand-2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 4px 22px;color:var(--muted)}
.faq .a p:last-child{margin:0}
.help{margin-top:34px;border-radius:20px;padding:22px 24px;display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line)}
.help svg{width:26px;height:26px;color:var(--brand);flex:none;margin-top:3px}
.help p{margin:0}

/* ---------- CTA card (21st Gradient CTA Banner) ---------- */
.cta-wrap{padding:24px 0 96px}
.cta-card{position:relative;isolation:isolate;overflow:hidden;border-radius:32px;border:1px solid var(--line);min-height:400px;display:flex;align-items:center;justify-content:center;text-align:center;padding:64px 24px;background:var(--surface)}
.cta-card::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:30%;height:80%;border-radius:999px;filter:blur(60px);background:linear-gradient(90deg,var(--glow-2) 10%,rgba(255,255,255,.2) 55%,var(--glow-1) 90%)}
.cta-card h2{max-width:18ch;margin-inline:auto}
.cta-card p{max-width:620px;margin:0 auto 26px;color:var(--muted)}

/* ---------- footer (21st Agency Footer) ---------- */
.footer{background:var(--brand-dark);color:#DED8F0;font-size:15px;padding:72px 0 30px}
.site .footer a{color:#fff;text-underline-offset:3px}
.site .footer a.footer-logo{text-decoration:none}
.site .footer a:hover{text-decoration:underline}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
@media (max-width:960px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
.footer-logo{display:inline-block;margin-bottom:16px}
.footer-logo svg,.footer-logo img{height:40px;width:auto}
.footer .f-title{font-weight:800;color:#fff;margin:0 0 14px;font-size:15px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer p{margin:0 0 .9em}
.f-legal{margin-top:46px;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:12px;font-size:13.5px;color:#D2CBE8}
.f-legal strong{color:#fff;letter-spacing:.08em}
.copy{text-align:center;margin-top:22px;font-size:13px;color:#C8C0E2}


/* ---------- eligibility ---------- */
.elig-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;padding:48px;border-radius:32px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(26,18,64,.45)}
.elig-head h2{margin-bottom:.4em}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line);font-size:16px}
.checks .ico{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;margin-top:1px}
.checks .ico svg{width:16px;height:16px}
@media (max-width:900px){.elig-card{grid-template-columns:1fr;gap:26px;padding:28px 22px}}

/* ---------- warning signs + safety ---------- */
.signs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sign{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.sign .ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--brand);background:var(--soft);border:1px solid var(--line)}
.sign .ico svg{width:22px;height:22px}
.sign h3{margin:2px 0 4px}
.sign p{margin:0;color:var(--muted);font-size:15.5px}
@media (max-width:960px){.signs{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.signs{grid-template-columns:1fr}}
.safety{margin-top:48px;align-items:stretch}
.safety-card{border-radius:var(--radius);padding:32px;background:var(--brand-dark);color:#fff}
.safety-card h3{display:flex;align-items:center;gap:10px;font-size:1.35rem;color:#fff;margin:0 0 14px}
.safety-card h3 svg{width:26px;height:26px;color:var(--accent);flex:none}
.safety-card ol{margin:0;padding-left:1.3em;display:grid;gap:12px}
.safety-card li{color:#fff}
.site .safety-card a{color:#FFD5B5}
.site .safety-card a:hover{color:#fff}
@media (max-width:620px){.safety-card{padding:24px 20px}}
.sources{font-size:15px;color:var(--muted);margin-top:22px}

/* ---------- inner pages ---------- */
.page-head{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:max(140px,calc(var(--nav-h,64px) + 60px)) 0 56px;background:var(--brand-dark)}
.page-head .hero-bg{opacity:.55}
.page-head h1{color:#fff;margin:0 0 8px;font-size:clamp(2.1rem,4.5vw,3.2rem)}
.page-head p{color:#fff;margin:0}
.legal{padding:56px 0 80px}
.legal h2{font-size:1.55rem;margin-top:1.8em}
.legal h3{margin-top:1.4em}
.legal ul,.legal ol{padding-left:1.3em;margin:0 0 1em}
.legal li{margin-bottom:.35em}
.legal table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:15px;background:var(--surface)}
.legal th,.legal td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.legal th{background:var(--soft)}
.table-scroll{overflow-x:auto}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 22px;font-size:15px}
.toc ol{margin:.4em 0 0}
.center{text-align:center}
.e404{padding:150px 0 110px}
.e404 a:not(.btn){color:#fff}
.e404 .badge{margin-inline:auto}
.e404 .btn{margin:8px}
.fine{font-size:14px;color:var(--muted)}

/* LeadBot legibility: the bot's body colour is semi-transparent (set in the LeadBot dashboard). In the Wix iframe it sat on a
   plain background; here the hero photo would show through. Give it the same neutral backing it had on Wix.
   This does not touch the LeadBot snippet or its behaviour. */
.leadforms-form-body-wrapper{background-color:#999}
/* The bot's answer tiles use a mid-grey (#8B8988) under white labels (3.5:1). Darken only that fill so the labels meet WCAG AA (5.4:1). */
.leadforms-answer{background-color:#6B6968!important}