@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@400;500;600;700;800;900&family=Permanent+Marker&family=Playfair+Display:wght@600;700;800;900&display=swap');
/* Wealth Marketing AI, US personal injury / MVA law firm offer LP (/lawyers). Cloned from /coaches (itself from real-estate-e). Palette: deep navy ink, warm ivory paper, one wine accent. No gold. */
*{box-sizing:border-box}
:root{
  /* warm ivory base, deep navy ink, single wine accent, muted slate for negatives */
  --paper:#F7F4EE; --paper2:#EEE9DF; --ink:#0B1F3A; --ink2:#34465E; --mut:#6B7A8F; --line:rgba(11,31,58,.12);
  --hi:#8C2F39; --hi-deep:#6E222B;
  --cta:#8C2F39; --cta-d:#5C1B22; --cta-l:#A64451;
  --dark:#0B1F3A; --dark2:#FFFFFF; --dark3:#EEE9DF;
  --pop:#7A8699;
  --gold:140,47,57;
  --disp:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:840px}
a{color:inherit}
img{max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:0;line-height:1.1;margin:0;text-transform:none}
/* EMPHASIS */
.hl{background:var(--hi);color:#fff;padding:.04em .18em;border-radius:.1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hy{color:var(--hi)}
.hg{color:var(--hi)}
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hi);display:inline-flex;gap:8px;align-items:center}
.eyebrow .ico{width:16px;height:16px}
svg.ic{width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* promo + logo bars */
.promo{background:var(--cta);color:#fff;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px}
.promo .flash{display:inline-block;animation:flash 1.8s steps(1) infinite}
.top{background:rgba(247,244,238,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:11px 22px}
.top .logo{justify-self:start}
.top .tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:flex;gap:7px;align-items:center}
.top .tag .live{width:8px;height:8px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(var(--gold),.2);animation:blink 1.8s ease-in-out infinite}
.top .btn{padding:9px 18px;font-size:14px;border-radius:10px;justify-self:end}
@media(max-width:640px){.top .tag{display:none}.top .wrap{justify-content:space-between}}
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--sans);font-weight:800;font-size:17px;letter-spacing:.06em;color:var(--ink);text-transform:uppercase}
.logo .mk{color:var(--hi)}
@media(max-width:600px){.logo{font-size:14px;gap:6px}.top .dia{width:20px;height:20px}}
.dia{width:24px;height:24px;flex:none;color:var(--hi)}

/* buttons */
.btn{font-family:var(--sans);font-weight:800;font-size:16px;border-radius:12px;padding:15px 26px;border:0;cursor:pointer;text-decoration:none;display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:transform .16s,box-shadow .16s,background .16s}
.btn.solid{background:linear-gradient(180deg,var(--cta-l),var(--cta));color:#fff;box-shadow:0 7px 0 var(--cta-d),0 14px 30px rgba(var(--gold),.28)}
.btn.solid:hover{transform:translateY(-2px);background:linear-gradient(180deg,#B3565F,var(--cta-l));box-shadow:0 9px 0 var(--cta-d),0 18px 40px rgba(var(--gold),.4)}
.btn.solid:active{transform:translateY(4px);box-shadow:0 3px 0 var(--cta-d)}
.btn.big{font-size:clamp(16px,2.2vw,21px);padding:19px 34px;border-radius:14px;letter-spacing:.01em}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;border:2px solid rgba(var(--gold),.45);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:rgba(var(--gold),.1)}
.btn small{font-weight:600;font-size:12px;opacity:.92;display:block}
.cta-pulse{position:relative}
.cta-pulse:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(var(--gold),.5);animation:ctapulse 2.2s ease-out infinite;pointer-events:none}
.arrow-down{display:block;margin:14px auto 0;width:32px;height:32px;color:var(--hi);animation:bounce 1.4s infinite}
.guarantee{display:inline-flex;gap:9px;align-items:center;background:rgba(var(--gold),.1);border:1px solid rgba(var(--gold),.35);color:var(--hi-deep);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:999px;margin-top:14px}

/* hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:44px 0 30px;background:var(--paper)}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0}
.hero:before{width:540px;height:540px;background:rgba(var(--gold),.14);top:-190px;left:-130px;animation:blob 15s ease-in-out infinite}
.hero:after{width:480px;height:480px;background:rgba(var(--gold),.10);top:-120px;right:-130px;animation:blob 17s ease-in-out infinite reverse}
.hero .wrap{position:relative;z-index:1}
.pre{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.8);border:1px solid rgba(var(--gold),.4);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);box-shadow:0 4px 14px rgba(11,31,58,.08)}
.pre .d{width:8px;height:8px;border-radius:50%;background:var(--hi);animation:blink 1.6s infinite}
.hero h1{font-size:clamp(29px,6vw,66px);line-height:1.16;margin:16px auto 0;max-width:17ch}
.hero h1 .hl{padding:.01em .14em;border-radius:.08em}
.hero .lede{font-size:clamp(16px,2vw,21px);color:var(--ink2);max-width:52ch;margin:18px auto 0;font-weight:500;line-height:1.5}
.hero .lede b{font-weight:800;color:var(--ink)}

/* VSL */
.vsl{position:relative;max-width:760px;margin:26px auto 0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#0C1719;
  border:1px solid rgba(var(--gold),.4);box-shadow:0 24px 60px rgba(11,31,58,.20)}
.vsl iframe,.vsl video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vsl .poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;
  background:radial-gradient(560px 320px at 50% 34%,rgba(var(--gold),.28),transparent 60%),linear-gradient(180deg,#0B1F3A,#061226)}
.vsl .play{width:82px;height:82px;border-radius:50%;background:var(--cta);display:grid;place-items:center;box-shadow:0 12px 40px rgba(var(--gold),.6)}
.vsl .poster:hover .play{transform:scale(1.08);transition:transform .2s}
.vsl .play:after{content:"";margin-left:6px;border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent #fff}
.vsl .plabel{color:#fff;font-weight:800;letter-spacing:.03em;font-size:14px}
.vsl .ring{position:absolute;width:82px;height:82px;border-radius:50%;border:3px solid var(--cta);opacity:.5;animation:ctapulse 2.4s ease-out infinite;pointer-events:none}
.soundon{display:inline-flex;gap:8px;align-items:center;background:var(--cta);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin:14px auto 0}

/* opt-in */
.optin{max-width:520px;margin:24px auto 0;background:var(--dark2);border:1px solid rgba(var(--gold),.32);border-radius:18px;padding:26px 22px;box-shadow:0 18px 46px rgba(11,31,58,.10)}
.optin h3{font-family:var(--disp);font-weight:800;font-size:clamp(24px,4vw,32px);text-align:center;line-height:1.1;color:var(--ink)}
.optin .sub{font-size:14.5px;color:var(--mut);text-align:center;margin-top:8px;font-weight:600}
.field{display:block;margin-top:13px;text-align:left}
.field>span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.field input{width:100%;margin-top:6px;font:inherit;font-size:16px;font-weight:600;padding:14px 15px;border-radius:11px;border:2px solid rgba(var(--gold),.28);background:#FFFFFF;color:var(--ink)}
.field input::placeholder{color:#98A2B3}
.field input:focus{outline:0;border-color:var(--cta);box-shadow:0 0 0 4px rgba(var(--gold),.18)}
.optin .btn.solid{width:100%;margin-top:18px}
.scarcity{font-size:13px;color:var(--ink2);text-align:center;margin-top:14px;font-weight:700;display:flex;gap:8px;align-items:center;justify-content:center}
.scarcity .dot{width:8px;height:8px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px rgba(var(--gold),.18)}
.rating{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;margin:18px auto 0;font-weight:700;color:var(--ink2);font-size:14px}
.stars{color:var(--hi);font-size:17px;letter-spacing:2px}

/* spots-left scarcity meter */
.spots{max-width:420px;margin:20px auto 0;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:12px;padding:12px 16px;text-align:left}
.spots .lab{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.spots .lab b{color:var(--hi)}
.spots .track{height:9px;border-radius:99px;background:rgba(11,31,58,.06);margin-top:8px;overflow:hidden;border:1px solid var(--line)}
.spots .fill{height:100%;width:60%;border-radius:99px;background:linear-gradient(90deg,var(--cta),var(--cta-l))}

/* trust strip */
.trusted{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}
.trusted .lab{text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.logos{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:center}
.tsig{display:inline-flex;align-items:center;gap:10px;color:var(--ink2)}
.tsig .tic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--gold),.12);border:1px solid rgba(var(--gold),.3);color:var(--hi);flex:none}
.tsig .tic svg{width:18px;height:18px}
.tsig b{font-weight:800;font-size:14.5px;color:var(--ink);letter-spacing:.01em}
.tsig span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-top:2px}

/* sections */
section{padding:60px 0}
.sec-eye{margin-bottom:14px;display:inline-flex}
.center{text-align:center}
.center .sec-p,.center .eyebrow,.center .sec-eye{margin-left:auto;margin-right:auto}
.sec-h{font-size:clamp(28px,4.6vw,48px);line-height:1.1;max-width:24ch}
.center .sec-h{margin-left:auto;margin-right:auto}
.sec-p{color:var(--mut);max-width:58ch;margin-top:16px;font-size:17px;line-height:1.55}
.light{background:var(--paper)}.light2{background:var(--paper2)}
.dark{background:var(--paper);color:var(--ink);border-top:1px solid var(--line)}
.dark .sec-p{color:var(--mut)}.dark .sec-h,.dark h2,.dark h3{color:var(--ink)}
/* the one dramatic dark band (the dream); brighter teal scoped inside */
.popbg{position:relative;background:linear-gradient(135deg,#0B1F3A,#061226);color:#fff;overflow:hidden;--hi:#E3B7BB;--hi-deep:#F2DADC}
.popbg .hl{color:#0B1F3A}
.popbg:before{content:"";position:absolute;inset:0;background:radial-gradient(760px 420px at 50% -4%,rgba(var(--gold),.30),transparent 62%);pointer-events:none}
.popbg .wrap{position:relative;z-index:1}
.popbg .sec-p{color:rgba(255,255,255,.9)}
.sec-cta{margin-top:34px;display:flex;justify-content:center}

/* problem crossed list */
.tried{display:grid;gap:11px;max-width:560px;margin:26px auto 0;text-align:left}
.tried li{list-style:none;display:flex;gap:13px;align-items:center;font-size:16px;font-weight:600;padding:14px 18px;border-radius:12px;background:rgba(11,31,58,.04);border:1px solid rgba(11,31,58,.10);color:var(--ink2)}
.tried li .ic{color:var(--pop);flex:none;width:22px;height:22px}
.tried li s{text-decoration:line-through;text-decoration-color:rgba(122,134,153,.8);opacity:.9}
.ceiling{font-family:var(--disp);font-weight:800;font-size:clamp(22px,4vw,38px);line-height:1.15;text-align:center;max-width:22ch;margin:32px auto 0;color:var(--ink)}

/* dream (inside .popbg dark band) */
.dream{font-family:var(--disp);font-weight:800;font-size:clamp(26px,4.8vw,46px);line-height:1.14;max-width:20ch;margin:0 auto;text-align:center;color:#fff}
.statrow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:30px auto 0}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(var(--gold),.32);border-radius:14px;padding:18px 26px;min-width:150px}
.sn{font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.4vw,46px);color:var(--hi);line-height:1}
.sl{font-size:13px;font-weight:700;color:rgba(255,255,255,.88);margin-top:8px}

/* animated pipeline */
.pipe{max-width:960px;margin:36px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;position:relative}
@media(max-width:720px){.pipe{grid-template-columns:repeat(2,1fr)}}
.pstep{position:relative;background:var(--dark2);border:1px solid var(--line);border-radius:14px;padding:18px 14px 16px;text-align:center;
  animation:stepglow 4.4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.pstep .pic{width:44px;height:44px;margin:0 auto 10px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--gold),.1);color:var(--ink2);transition:.3s;
  animation:iconpop 4.4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.pstep .pic svg{width:22px;height:22px}
.pstep .pt{font-weight:800;font-size:13px;color:var(--ink);letter-spacing:.01em}
.pstep .pn{position:absolute;top:8px;left:10px;font-family:var(--disp);font-weight:700;font-size:13px;color:rgba(var(--gold),.5)}
.pstep.end{background:linear-gradient(180deg,var(--cta-l),var(--cta));border-color:var(--cta);animation:none}
.pstep.end .pic{background:rgba(255,255,255,.2);color:#fff;animation:none}
.pstep.end .pt,.pstep.end .pn{color:#fff}
@keyframes stepglow{0%,64%,100%{border-color:var(--line);box-shadow:0 2px 10px rgba(11,31,58,.06)}12%,26%{border-color:var(--cta);box-shadow:0 10px 26px rgba(var(--gold),.24)}}
@keyframes iconpop{0%,64%,100%{background:rgba(var(--gold),.1);color:var(--ink2);transform:scale(1)}12%,26%{background:var(--cta);color:#fff;transform:scale(1.08)}}

/* comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;margin:28px auto 0;text-align:left}
@media(max-width:680px){.vs{grid-template-columns:1fr}}
.vscard{border-radius:16px;padding:24px 22px;border:1px solid var(--line);background:var(--dark2);position:relative}
.vscard h4{font-family:var(--disp);font-weight:800;font-size:22px;margin:0 0 6px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.vscard .tagx{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px}
.vscard.old{background:rgba(11,31,58,.04);opacity:.96}.vscard.old h4{color:var(--mut)}.vscard.old .tagx{color:var(--pop)}
.vscard.new{border-color:rgba(var(--gold),.5);box-shadow:0 14px 40px rgba(var(--gold),.14)}.vscard.new h4{color:var(--hi)}.vscard.new .tagx{color:var(--hi-deep)}
.vscard ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.vscard li{display:flex;gap:11px;font-size:15.5px;font-weight:600;color:var(--ink2);align-items:flex-start}
.vscard li .ic{flex:none;width:20px;height:20px;margin-top:1px}
.vscard.old li .ic{color:var(--pop)}.vscard.new li .ic{color:var(--hi)}
.vsmark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px}
.vscard.old .vsmark{background:rgba(122,134,153,.16);color:var(--pop);animation:flyaway 2.8s ease-in infinite}
.vscard.new .vsmark{background:rgba(var(--gold),.18);color:var(--hi);animation:comein 2.6s ease-out infinite}

/* proof insight cards */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px;text-align:left}
@media(max-width:760px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--dark2);border:1px solid var(--line);border-radius:16px;padding:24px 24px 22px;position:relative;overflow:hidden}
.pcard:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cta-l),var(--cta))}
.pcard .picn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--gold),.12);border:1px solid rgba(var(--gold),.28);color:var(--hi);margin-bottom:14px}
.pcard .picn svg{width:22px;height:22px}
.pcard p{color:var(--ink2);font-size:16px;font-weight:500;line-height:1.5}
.pcard p b{color:var(--ink);font-weight:800}
.pcard.feat{grid-column:1/-1;background:linear-gradient(135deg,#F1EBDF,#E7DFCF)}
.pcard.ph{border-style:dashed;border-color:rgba(var(--gold),.4);background:transparent;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.pcard.ph:before{display:none}
.pcard.ph .phtag{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hi);margin-bottom:10px}
.pcard.ph .phstars{color:rgba(var(--gold),.5);font-size:18px;letter-spacing:3px;margin-bottom:8px}
.pcard.ph p{color:var(--mut);font-size:14px}

/* CTA band (closing accent-washed panel) */
.band{text-align:center}
.band .sec-h{margin:0 auto;max-width:20ch}
section.band{background:radial-gradient(720px 320px at 50% 0,rgba(var(--gold),.14),transparent 62%),var(--paper2)}

/* sticky mobile CTA + float */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;padding:10px 14px;background:rgba(247,244,238,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.sticky-cta .btn{width:100%}
@media(max-width:760px){.sticky-cta{display:block}body{padding-bottom:78px;overflow-x:hidden}}
@media(max-width:760px){
  .top{display:none}
  .promo{position:sticky;top:0;z-index:60;font-size:11px;line-height:1.35;padding:9px 14px}
}
.float{position:fixed;right:20px;bottom:20px;z-index:45}
@media(max-width:760px){.float{display:none}}

footer{background:var(--paper2);border-top:1px solid var(--line);padding:40px 0 48px;color:var(--mut);font-size:13px;text-align:center}
footer .wrap{display:flex;flex-direction:column;gap:12px;align-items:center}
footer .logo{color:var(--ink)}
footer .fine{font-size:11.5px;color:var(--mut);max-width:70ch;line-height:1.6}

/* ============ MOTION GRAPHICS ============ */
/* hero floating proof chips */
.floatchips{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.chip{position:absolute;display:inline-flex;gap:7px;align-items:center;background:rgba(255,255,255,.92);border:1px solid rgba(var(--gold),.35);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--ink2);box-shadow:0 8px 24px rgba(11,31,58,.10);white-space:nowrap;opacity:0;animation:chipfloat 10s ease-in-out infinite}
.chip .cd{width:9px;height:9px;border-radius:50%;background:var(--cta);flex:none;box-shadow:0 0 8px rgba(var(--gold),.7)}
@keyframes chipfloat{0%{opacity:0;transform:translateY(30px) scale(.9)}14%,78%{opacity:.98}100%{opacity:0;transform:translateY(-70px) scale(1)}}
@media(max-width:760px){.floatchips{display:none}}

/* hand-drawn napkin sketch (problem) , cool/minimal: ink + slate + teal only */
.sketch{max-width:560px;margin:34px auto 0;background:#FFFFFF;border:1px solid #E4DDD0;border-radius:18px;padding:26px 22px 20px;box-shadow:0 22px 55px rgba(11,31,58,.10);position:relative}
.sketch .tape{position:absolute;top:-9px;left:50%;width:90px;height:20px;margin-left:-45px;background:rgba(140,47,57,.85);border:1px solid rgba(0,0,0,.06);transform:rotate(-2deg);box-shadow:0 2px 6px rgba(0,0,0,.14)}
.sketchsvg{width:100%;height:auto;display:block}
.sketchsvg .ink{stroke:#0B1F3A;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sketchsvg .ink2{stroke:#0B1F3A;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sketchsvg .gink{stroke:var(--hi-deep)}
.sketchsvg .rink{stroke:var(--pop)}
.sketchsvg .lead{fill:var(--pop)}
.sketchsvg .hand{font-family:"Caveat",cursive;font-weight:700}
.sketchsvg .hand.r{fill:var(--pop)}.sketchsvg .hand.g{fill:var(--hi-deep)}
.sketch.in .drip{animation:drop 2.6s ease-in infinite}
.sketch-cap{font-family:"Permanent Marker",cursive;color:#0B1F3A;font-size:clamp(18px,3.4vw,25px);text-align:center;margin-top:12px;line-height:1.3}
.sketch-cap u{text-decoration-color:var(--hi-deep);text-decoration-thickness:3px;text-underline-offset:3px}
.sketch-cap .circ{position:relative;white-space:nowrap}
.sketch-cap .circ:after{content:"";position:absolute;inset:-7px -12px;border:3px solid var(--pop);border-radius:47% 53% 50% 50%/62% 55% 45% 40%;transform:rotate(-4deg);pointer-events:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drop{0%{transform:translateY(-6px);opacity:0}12%{opacity:1}68%{opacity:1}100%{transform:translateY(48px);opacity:0}}

/* animated calendar filling with bookings (the dream, inside dark band) */
.calanim{max-width:340px;margin:6px auto 26px;background:rgba(255,255,255,.08);border:1px solid rgba(var(--gold),.32);border-radius:18px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.calhdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.calhdr i{font-style:normal;display:flex;gap:5px}
.calhdr i b{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);display:block}
.calgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.cell{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.1);position:relative}
.cell .chk{position:absolute;inset:0;border-radius:8px;background:var(--hi);display:grid;place-items:center;opacity:0;animation:cellfill 7s ease-in-out infinite;animation-delay:calc(var(--c)*.19s)}
.cell .chk svg{width:58%;height:58%;stroke:#0B1F3A;stroke-width:3.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes cellfill{0%,4%{opacity:0;transform:scale(.5)}10%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.5)}}

/* conveyor feeding the machine */
.conveyor{position:relative;height:44px;max-width:960px;margin:8px auto -8px;overflow:hidden}
.conveyor .rail{position:absolute;top:50%;left:70px;right:70px;height:2px;transform:translateY(-50%);background:repeating-linear-gradient(90deg,rgba(var(--gold),.5) 0 9px,transparent 9px 18px)}
.conveyor .cdot2{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--cta);transform:translateY(-50%);box-shadow:0 0 12px rgba(var(--gold),.7);animation:convey 3s linear infinite}
@keyframes convey{from{left:64px}to{left:calc(100% - 70px)}}
.conveyor .clab{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);background:var(--paper2);padding:0 6px}
.conveyor .clab.l{left:0}.conveyor .clab.r{right:0}

/* comparison motion accents */
@keyframes flyaway{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:.35;transform:translate(10px,-14px) rotate(12deg)}}
@keyframes comein{0%{opacity:0;transform:translateY(14px)}55%,100%{opacity:1;transform:translateY(0)}}

/* hand-drawn arrow */
.darrow{color:var(--hi)}
.darrow path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
.darrow.in path{animation:draw 1.4s ease-out forwards}

/* motion */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.anim{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.07s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.38s}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes ctapulse{0%{box-shadow:0 0 0 0 rgba(var(--gold),.5)}100%{box-shadow:0 0 0 24px rgba(var(--gold),0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes flash{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.1)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* ============================================================
   QUIZ FUNNEL (variation E) , replaces the VSL + opt-in form.
   Minimal teal, matches E. Step 1 captures + saves the lead.
   ============================================================ */
.quiz{max-width:560px;margin:26px auto 0;background:var(--dark2);border:1px solid rgba(var(--gold),.32);border-radius:20px;padding:24px 24px 22px;box-shadow:0 22px 55px rgba(11,31,58,.12);text-align:left;position:relative;overflow:hidden}
.quiz .qtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.qbadge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--hi);background:rgba(var(--gold),.1);border:1px solid rgba(var(--gold),.28);padding:5px 11px;border-radius:999px}
.qbadge .dot{width:7px;height:7px;border-radius:50%;background:var(--cta);box-shadow:0 0 8px rgba(var(--gold),.6)}
.qcount{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.qtitle{font-family:var(--disp);font-weight:800;font-size:clamp(21px,3.2vw,27px);line-height:1.12;color:var(--ink);margin:2px 0 14px}
.qprog{height:6px;border-radius:99px;background:rgba(11,31,58,.07);overflow:hidden;margin-bottom:20px}
.qprog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cta),var(--cta-l));width:20%;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.qstep{animation:qin .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes qin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qq{font-family:var(--disp);font-weight:800;font-size:clamp(18px,2.6vw,23px);line-height:1.2;color:var(--ink);margin-bottom:4px}
.qsub{font-size:13.5px;color:var(--mut);font-weight:600;margin-bottom:16px}
.qopts{display:grid;gap:10px}
.qopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;font-size:15.5px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:15px 16px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.qopt:hover{border-color:var(--cta);background:rgba(var(--gold),.05)}
.qopt:active{transform:scale(.99)}
.qopt .qtick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:.15s}
.qopt:hover .qtick{border-color:var(--cta)}
.qopt.sel{border-color:var(--cta);background:rgba(var(--gold),.08)}
.qopt.sel .qtick{background:var(--cta);border-color:var(--cta)}
.qopt.sel .qtick:after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.qfield{display:block;margin-top:12px;text-align:left}
.qfield>span{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);margin-bottom:5px}
.qfield input{width:100%;font:inherit;font-size:16px;font-weight:600;padding:13px 15px;border-radius:11px;border:2px solid rgba(var(--gold),.28);background:#fff;color:var(--ink)}
.qfield input::placeholder{color:#98A2B3}
.qfield input:focus{outline:0;border-color:var(--cta);box-shadow:0 0 0 4px rgba(var(--gold),.16)}
.qerr{color:#DC2626;font-size:12.5px;font-weight:700;margin-top:8px;min-height:16px}
.qnav{display:flex;align-items:center;gap:12px;margin-top:18px}
.qback{background:none;border:0;color:var(--mut);font:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:8px 4px;display:inline-flex;align-items:center;gap:6px}
.qback:hover{color:var(--ink)}
.qback svg{width:16px;height:16px}
.qnext{flex:1}
.qnote{font-size:12px;color:var(--mut);font-weight:600;text-align:center;margin-top:13px;display:flex;gap:7px;align-items:center;justify-content:center;line-height:1.4}
.qnote svg{width:15px;height:15px;color:var(--hi);flex:none}
/* result screens */
.qresult{text-align:center;animation:qin .4s cubic-bezier(.2,.7,.2,1) both}
.qresult .qicn{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:4px auto 16px;background:rgba(var(--gold),.12);border:1px solid rgba(var(--gold),.35);color:var(--hi)}
.qresult .qicn svg{width:30px;height:30px}
.qresult h3{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.6vw,30px);line-height:1.12;color:var(--ink);margin-bottom:10px}
.qresult p{font-size:15px;color:var(--ink2);font-weight:500;line-height:1.5;max-width:42ch;margin:0 auto 18px}
.qresult p b{color:var(--ink);font-weight:800}
/* premium paid waitlist */
.qwait .qribbon{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--hi);margin-bottom:10px}
.qwait .qribbon svg{width:14px;height:14px}
.qperks{display:grid;gap:10px;max-width:380px;margin:16px auto 20px;text-align:left;padding:0}
.qperks li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:600;color:var(--ink2)}
.qperks li svg{width:19px;height:19px;color:var(--hi);flex:none;margin-top:1px}
.qwait .qprice{display:inline-flex;align-items:baseline;gap:8px;margin:2px 0 4px;justify-content:center}
.qwait .qprice b{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,40px);color:var(--ink);line-height:1}
.qwait .qprice s{color:var(--mut);font-weight:700;font-size:18px;text-decoration-color:rgba(122,134,153,.7)}
.qwait .qprice span{font-size:13px;font-weight:700;color:var(--mut)}

/* ===== scroll offset so a CTA jump never hides the top of the quiz behind the sticky bar ===== */
#quiz{scroll-margin-top:88px}
@media(max-width:760px){#quiz{scroll-margin-top:64px}}

/* ===== hero mini value-flow: what we actually do, ad to sale (steps light up in sequence) ===== */
.flowwrap{margin:18px auto 0;max-width:560px;text-align:center}
.flowlab{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.flowrow{display:flex;flex-wrap:wrap;gap:7px 5px;align-items:center;justify-content:center}
.flowstep{display:inline-flex;align-items:center;gap:7px;background:rgba(var(--gold),.07);border:1px solid rgba(var(--gold),.24);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:.01em;animation:flowpulse 5s ease-in-out infinite;animation-delay:calc(var(--f,0)*.55s)}
.flowstep .fico{width:15px;height:15px;color:var(--hi);flex:none;display:grid;place-items:center}
.flowstep .fico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.flowstep.end{background:var(--cta);border-color:var(--cta);color:#fff;animation:none}
.flowstep.end .fico{color:#fff}
.flowarr{color:var(--hi);font-weight:900;font-size:13px;opacity:.55}
@keyframes flowpulse{0%,66%,100%{border-color:rgba(var(--gold),.24);background:rgba(var(--gold),.07);transform:translateY(0)}12%,22%{border-color:var(--cta);background:rgba(var(--gold),.15);transform:translateY(-1px)}}

/* premium framing line under the quiz-page title */
.qframe{font-size:13px;font-weight:500;color:var(--ink2);line-height:1.5;margin:5px 0 16px}
.qframe b{color:var(--ink);font-weight:800}

/* ===== Navy + wine brand: the top bar is navy, the accent stays wine ===== */
:root{--red:#B42318;--red-d:#912018;--redbg:#FDECEC}
.promo{background:var(--ink)}
.spots .fill{background:linear-gradient(90deg,var(--cta),var(--cta-l))}

/* ============================================================
   DESKTOP HERO: two-column so the quiz is fully visible on load
   (no scroll). Copy on the left, quiz card on the right. Below
   1000px it falls back to the existing stacked single column, so
   mobile is unchanged. HTML/markup is untouched , pure reflow.
   ============================================================ */
@media(min-width:1000px){
  .hero{padding:30px 0 24px}
  .hero .wrap{max-width:1160px;display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center;text-align:left}
  .hero .wrap>*{grid-column:1;margin-left:0;margin-right:0}
  .hero .wrap h1{max-width:18ch;text-align:left;font-size:clamp(32px,3.2vw,48px);margin:12px 0 0}
  .hero .wrap .lede{max-width:48ch;text-align:left;margin:14px 0 0}
  .hero .flowwrap{margin:14px 0 0;text-align:left}
  .hero .flowrow{justify-content:flex-start}
  .hero .wrap #quiz{grid-column:2;grid-row:1 / -1;align-self:center;margin:0;width:100%;max-width:none}
  .hero .darrow{display:none}
}

/* ============================================================
   /lawyers specifics (on top of the cloned base)
   ============================================================ */
.hero h1{max-width:22ch}
@media(min-width:1000px){
  /* The cloned desktop grid gives the quiz card grid-row:1 / -1, but with no explicit rows that spans
     only row 1, so the headline fell below the fold. Declare the six left-column rows explicitly
     (pre, h1, lede, flow, terms pill, core line) so the card spans them all and the copy sits beside it. */
  .hero .wrap{grid-template-rows:repeat(6,auto);align-items:center}
  .hero .wrap h1{max-width:22ch;font-size:clamp(30px,2.9vw,44px)}
  .hero .wrap .coreline{margin-top:14px}
}
.coreline{font-family:var(--disp);font-weight:800;font-size:clamp(17px,2.2vw,22px);color:var(--ink);margin:20px auto 0;max-width:34ch;line-height:1.3}
.coreline .hy{color:var(--hi)}
@media(min-width:1000px){.hero .coreline{margin-left:0;text-align:left}}
/* terms grid: the deal, said plainly */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:32px auto 0;text-align:left}
@media(max-width:820px){.terms{grid-template-columns:1fr}}
.term{background:var(--dark2);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;position:relative;overflow:hidden}
.term:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--cta-l),var(--cta))}
.term .tk{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hi);margin-bottom:8px}
.term .tv{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3vw,30px);line-height:1.05;color:var(--ink)}
.term p{color:var(--ink2);font-size:14.5px;font-weight:500;line-height:1.5;margin-top:8px}
.term.ph{border-style:dashed;border-color:rgba(var(--gold),.45);background:transparent}
.term.ph:before{display:none}
.term.ph .tv{font-size:18px;color:var(--hi)}
/* Spanish wedge: the searches people actually type */
.eskw{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:22px auto 0;max-width:760px}
.eskw .kw{display:inline-flex;gap:8px;align-items:center;background:var(--dark2);border:1px solid rgba(var(--gold),.3);border-radius:999px;padding:8px 15px;font-weight:700;font-size:13.5px;color:var(--ink)}
.eskw .kw i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hi)}
/* proof: sourced build facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:960px;margin:28px auto 0}
@media(max-width:820px){.facts{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.facts{grid-template-columns:1fr}}
.fact{background:var(--dark2);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;text-align:left}
.fact .fn{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.6vw,36px);color:var(--hi);line-height:1}
.fact .fl{font-size:13.5px;font-weight:600;color:var(--ink2);margin-top:8px;line-height:1.45}
.srcnote{font-size:12px;color:var(--mut);font-weight:600;max-width:70ch;margin:18px auto 0;line-height:1.55}
/* quiz page nurture result */
.qresult .qlinks{display:flex;flex-direction:column;gap:10px;align-items:center}

/* ============================================================
   FAQ: plain answers. Text mirrors the FAQPage JSON-LD in <head>.
   ============================================================ */
.faq{max-width:780px;margin:28px auto 0;text-align:left;display:grid;gap:10px}
.fq{background:var(--dark2);border:1px solid var(--line);border-radius:14px;padding:0 18px;box-shadow:0 8px 24px rgba(15,26,28,.05)}
.fq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;font-family:var(--disp);font-weight:800;font-size:17px;line-height:1.3;color:var(--ink)}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(var(--gold),.45);color:var(--hi);display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:16px;line-height:1}
.fq[open] summary::after{content:"\2212"}
.fq .fa{padding:0 0 18px;color:var(--ink2);font-size:15px;line-height:1.6}
.fq .fa a{color:var(--hi);font-weight:700}