/* BBNKS.org public site styles. Brand: black + red. */
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/russo-one-latin.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;src:url(/assets/fonts/oswald-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2')}
:root{
  --red:#ae2a2d; --red-d:#8a1f22; --red-l:#fbecec; --red-b:#d63a3a; --red-small:#e5484d;
  --black:#0c0c0c; --ink:#1c1c1e; --ink2:#52525b; --mute:#71717a;
  --line:#e4e4e7; --bg:#ffffff; --bg2:#f5f4f2; --ok:#15803d;
  --radius:14px; --shadow:0 12px 36px rgba(0,0,0,.12);
  --display:'Russo One', 'Arial Black', sans-serif;
  --head:'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--red)}
h1,h2,h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.01em;line-height:1.08;margin:0 0 .5em}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:.005em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.25rem}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.red{color:var(--red)}
.eyebrow{display:inline-block;font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:var(--red);font-weight:600;margin-bottom:.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--head);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;font-weight:600;
  padding:.9rem 1.4rem;border-radius:10px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .12s, background .15s, box-shadow .15s;line-height:1.1}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(174,42,45,.35)}
.btn-red:hover{background:var(--red-d)}
.btn-ghost{border-color:#fff;color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-dark{background:var(--black);color:#fff}
.btn-outline{border-color:var(--ink);color:var(--ink);background:#fff}
.btn-block{width:100%}
.btn[disabled]{background:#d4d4d8;color:#71717a;box-shadow:none;cursor:not-allowed}

/* header */
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.96);backdrop-filter:blur(6px);border-bottom:3px solid var(--red)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-family:var(--head);font-size:1.5rem;letter-spacing:.06em}
.brand img{height:48px;width:auto}
.topnav{display:flex;align-items:center;gap:1rem}
.topnav a.plain{color:#e4e4e7;text-decoration:none;font-weight:600;font-size:.95rem}
.topnav a.plain:hover{color:#fff}
.topnav .btn{padding:.6rem 1rem;font-size:.95rem}
@media(max-width:760px){.topnav a.plain.hide-sm{display:none}.brand span{display:none}}

/* referral banner */
.refbar{background:var(--red);color:#fff;text-align:center;padding:.65rem 1rem;font-weight:600}
.refbar b{font-family:var(--head);text-transform:uppercase;letter-spacing:.04em}
.refbar button{margin-left:.6rem;background:#fff;color:var(--red);border:0;border-radius:999px;padding:.3rem .8rem;font-weight:700;cursor:pointer;font-size:.85rem}

/* hero */
.hero{position:relative;background:radial-gradient(1000px 500px at 85% -10%,rgba(174,42,45,.45),transparent 60%),linear-gradient(160deg,#0b0b0c 0%,#1a1a1d 60%,#2a0a0b 100%);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:60px;background:linear-gradient(transparent,rgba(0,0,0,.25))}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding-top:56px;padding-bottom:64px;align-items:center;position:relative;z-index:1}
.hero p.lead{font-size:1.18rem;color:#e4e4e7;max-width:36rem}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.4rem 0 0}
.checks{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;grid-template-columns:1fr;gap:.6rem}
.checks li{display:flex;gap:.5rem;align-items:flex-start;font-weight:500;color:#f4f4f5}
.checks li::before{content:"";flex:0 0 20px;height:20px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;margin-top:2px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:36px}.checks{grid-template-columns:1fr}}

/* form card */
.card{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.formcard{border-top:6px solid var(--red)}
.formcard h3{font-size:1.5rem;margin-bottom:.2rem}
.formcard .sub{color:var(--mute);margin:0 0 1rem;font-size:.95rem}
.price-chip{display:inline-flex;align-items:baseline;gap:.4rem;background:var(--red-l);color:var(--red-d);border-radius:999px;padding:.25rem .8rem;font-weight:700;font-size:.9rem;margin-bottom:.8rem}
.price-chip s{color:var(--mute);font-weight:500}
.field{margin-bottom:.8rem}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.3rem;color:var(--ink2)}
.field label .opt{font-weight:400;color:var(--mute)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:480px){.row2{grid-template-columns:1fr}}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],input[type=date],input[type=url],select,textarea{
  width:100%;font:inherit;font-size:16px;padding:.75rem .85rem;border:1.5px solid #d4d4d8;border-radius:10px;background:#fff;color:var(--ink);transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(174,42,45,.15)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine{font-size:.78rem;color:var(--mute);margin:.7rem 0 0}
.errors{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:.7rem .9rem;margin-bottom:1rem;font-size:.92rem}

/* sections */
section{padding:72px 0}
.alt{background:var(--bg2)}
.dark{background:var(--black);color:#fff}
.center{text-align:center}
.section-head{max-width:720px;margin:0 auto 40px;text-align:center}
.section-head p{color:var(--ink2);font-size:1.08rem}
.dark .section-head p{color:#d4d4d8}
.dark .eyebrow,.hero .eyebrow{color:var(--red-small)}
.hero h1 .red,.dark .red{color:var(--red-b)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
@media(max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
.step{position:relative;padding:24px 24px 24px 80px;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}
.step .num{position:absolute;left:20px;top:22px;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--head);font-size:1.4rem;display:grid;place-items:center}
.step p{margin:0;color:var(--ink2)}

/* pricing */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
@media(max-width:760px){.prices{grid-template-columns:1fr}}
.price{border-radius:var(--radius);padding:28px;border:2px solid var(--line);background:#fff;position:relative}
.price.hot{border-color:var(--red);box-shadow:0 18px 40px rgba(174,42,45,.18)}
.price .tag{position:absolute;top:-14px;left:24px;background:var(--red);color:#fff;font-family:var(--head);text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;padding:.3rem .7rem;border-radius:6px}
.price .amt{font-family:var(--display);font-size:3.2rem;line-height:1;margin:.3rem 0}
.price .amt small{font-size:1.1rem;color:var(--mute)}
.price ul{padding-left:1.1rem;color:var(--ink2)}
.example{max-width:860px;margin:22px auto 0;text-align:center;color:var(--ink2)}

/* video */
.video{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:16px 4px}
.faq summary{cursor:pointer;font-weight:700;font-size:1.06rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink2);margin:.6rem 0 0}

/* final cta */
.final{background:linear-gradient(135deg,var(--red) 0%,#5e1517 100%);color:#fff}
.final .grid2{align-items:start}
.final p{color:#fde8eb;font-size:1.1rem}

/* footer */
footer{background:var(--black);color:#a1a1aa;padding:40px 0 90px;font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
footer a{color:#e4e4e7}
footer img{height:64px;width:auto;margin-bottom:8px}

/* mobile sticky CTA */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;padding:10px;background:rgba(11,11,12,.97);border-top:2px solid var(--red)}
.mobile-cta .btn{flex:1;padding:.8rem .6rem;font-size:1rem}
@media(max-width:760px){.mobile-cta{display:flex}}
@media(min-width:761px){footer{padding-bottom:40px}}

/* QR overlay */
.qr-overlay{position:fixed;inset:0;z-index:100;background:rgba(11,11,12,.96);display:none;align-items:center;justify-content:center;padding:20px}
.qr-overlay.open{display:flex}
.qr-box{background:#fff;border-radius:18px;padding:26px;text-align:center;max-width:420px;width:100%;border-top:8px solid var(--red)}
.qr-box .qr{margin:14px auto;width:min(300px,70vw)}
.qr-box .qr img,.qr-box .qr canvas,.qr-box .qr svg{width:100%;height:auto}
.qr-box h3{margin:0}
.qr-box p{color:var(--ink2);margin:.3rem 0}
.qr-close{position:absolute;top:16px;right:20px;color:#fff;background:none;border:0;font-size:2.2rem;cursor:pointer}

/* thank-you / simple pages */
.simple{min-height:70vh;display:flex;align-items:center;padding:48px 0;background:var(--bg2)}
.simple .card{max-width:640px;margin:0 auto;text-align:center}
.bigcheck{width:76px;height:76px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin:0 auto 16px}
.bigcheck svg{width:40px;height:40px;stroke:#fff}
.timeline{text-align:left;margin:22px 0;padding:0;list-style:none}
.timeline li{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.timeline li b{font-family:var(--head);color:var(--red);min-width:28px}

/* contract wizard */
.contract-page{background:var(--bg2);min-height:100vh;padding:28px 0 80px}
.contract-page .wrap{max-width:760px}
.progress{display:flex;gap:6px;margin:0 0 18px}
.progress span{flex:1;height:6px;border-radius:99px;background:#d4d4d8}
.progress span.on{background:var(--red)}
.step-title{font-family:var(--head);text-transform:uppercase;font-size:.85rem;letter-spacing:.1em;color:var(--mute)}
.wstep{display:none}
.wstep.active{display:block}
.wnav{display:flex;gap:10px;justify-content:space-between;margin-top:18px}
.wnav .btn{flex:1}
.terms{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:16px;background:#fff;font-size:.92rem}
.terms h4{font-family:var(--head);text-transform:uppercase;margin:1rem 0 .3rem;font-size:1rem;background:var(--black);color:#fff;padding:.3rem .6rem;border-radius:4px}
.terms h4:first-child{margin-top:0}
.cancel-box{border:2px solid var(--red);border-radius:8px;padding:10px;font-weight:700;text-align:center;font-size:.85rem;margin:12px 0}
.totals{background:var(--black);color:#fff;border-radius:12px;padding:16px 18px;margin-top:10px}
.totals div{display:flex;justify-content:space-between;padding:3px 0;color:#d4d4d8}
.totals div.grand{color:#fff;font-family:var(--head);font-size:1.5rem;border-top:1px solid #3f3f46;margin-top:6px;padding-top:8px}
.tier{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tier label{border:2px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;display:block;background:#fff}
.tier input{margin-right:6px;accent-color:var(--red)}
.tier label.sel{border-color:var(--red);background:var(--red-l)}
.tier b{font-family:var(--head);font-size:1.4rem;display:block}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{border:1.5px solid #d4d4d8;border-radius:999px;padding:.45rem .9rem;cursor:pointer;background:#fff;font-weight:600;font-size:.92rem}
.radios input{accent-color:var(--red)}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;margin:.6rem 0}
.checkline input{width:20px;height:20px;accent-color:var(--red);flex:0 0 auto;margin-top:2px}
details.more summary{cursor:pointer;font-weight:600;color:var(--red);margin:.4rem 0}

/* acknowledgment walkthrough */
.ack{border:2px solid var(--line);border-radius:14px;padding:18px;background:#fff;margin-bottom:12px;transition:border-color .2s, opacity .2s}
.ack .q{font-size:1.05rem;font-weight:600;margin-bottom:12px}
.ack .n{font-family:var(--head);color:var(--red);margin-right:.3rem}
.ack.locked{opacity:.45;pointer-events:none}
.ack.done{border-color:var(--ok);background:#f0fdf4}
.ack.done .agree{background:var(--ok);box-shadow:none}
.agree{position:relative;overflow:hidden}
.agree .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.25);width:0}
.ack-count{font-weight:700;color:var(--red)}

/* signature */
.sigpad{position:relative;border:2px dashed #a1a1aa;border-radius:12px;background:#fff;touch-action:none}
.sigpad canvas{width:100%;height:180px;display:block;border-radius:12px;cursor:crosshair}
.sigpad .hint{position:absolute;left:14px;bottom:10px;color:#a1a1aa;font-size:.85rem;pointer-events:none}
.sigpad .line{position:absolute;left:14px;right:14px;bottom:34px;border-top:1px solid #d4d4d8;pointer-events:none}
.sig-actions{display:flex;justify-content:flex-end;margin-top:4px}
.linkbtn{background:none;border:0;color:var(--red);font-weight:600;cursor:pointer;padding:4px}
.ack.done .agree[disabled]{background:var(--ok);color:#fff;opacity:1}


/* v6: conversion rewrite (SITE-RULES.md) */
.brand img{height:44px}
footer img{height:56px}
.topnav .tel{font-family:var(--head);font-size:1.05rem;letter-spacing:.03em}
@media(max-width:760px){.topnav .hide-sm{display:none}.brand img{height:38px}}
.sm-only{display:none !important}
@media(max-width:900px){.sm-only{display:flex !important}}
.hero h1{max-width:13ch}
.hero .checks li{font-size:1.05rem}
/* form */
.field input[aria-invalid],.field.has-err input,.field.has-err select{border-color:#dc2626}
.ferr{display:block;color:#b91c1c;font-size:.86rem;margin-top:.3rem;font-weight:500}
.formcard .next{margin:.75rem 0 0;font-size:.92rem;color:var(--ink2);text-align:center}
.formcard .fine{text-align:center}
/* proof strip */
.proof{background:var(--black);color:#fff;padding:44px 0 36px;border-top:1px solid #222}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.proof-grid b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4.5vw,3.2rem);line-height:1.05;color:#fff}
.proof-grid span{display:block;margin:.4rem auto 0;max-width:16rem;color:#d4d4d8;font-size:1rem}
.proof-grid div+div{border-left:1px solid #2a2a2d}
.fineprint{margin:24px auto 0;font-size:.8rem;color:#a1a1aa;text-align:center}
@media(max-width:760px){.proof-grid{grid-template-columns:1fr;gap:22px}.proof-grid div+div{border-left:0;border-top:1px solid #2a2a2d;padding-top:22px}}
/* problem */
.body-lg{font-size:1.15rem;color:var(--ink2);max-width:34rem}
.textlink{font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-weight:600;text-decoration:none;font-size:1.05rem}
.textlink:hover{text-decoration:underline}
.ill{margin:0}
.ill img{width:100%;height:auto;border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.18)}
/* steps */
.step h3{font-size:1.2rem}
/* price + protection */
.pp{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:940px;margin:0 auto;align-items:stretch}
.pp-price{background:var(--black);color:#fff;border-radius:var(--radius);padding:30px;border-top:6px solid var(--red)}
.pp-price .amt{font-family:var(--display);font-size:3rem;line-height:1.05;margin:0 0 .5rem}
.pp-price .amt small{display:block;font-family:var(--body);font-size:1rem;color:#d4d4d8;margin-top:.25rem}
.pp-price .amt-ref{font-size:2.2rem;color:var(--red-b);padding-top:1rem;border-top:1px solid #2a2a2d}
.pp-price .example{color:#d4d4d8;margin:1rem 0 0;font-size:1rem}
.pp-price .example b{color:#fff}.pp-price .example b.red{color:var(--red-b)}
.pp-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-content:center}
.pp-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:1.05rem;font-weight:500}
.pp-list li::before{content:"";flex:0 0 22px;height:22px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;margin-top:2px}
@media(max-width:760px){.pp{grid-template-columns:1fr}.pp-price .amt{font-size:2.5rem}}
/* final */
.final h2{color:#fff}
.final-tel{color:#fff;font-weight:700}
.final-small{font-size:.95rem !important}
.final-small a{color:#fde8eb}
.small-note{font-size:.95rem;color:var(--ink2)}
.final .card p{font-size:.92rem;color:var(--ink2)}
.final .card .fine{font-size:.78rem;color:var(--mute)}
.final .card .sub{color:var(--mute);font-size:.95rem}
@media(max-width:900px){.hero .ctas .btn{flex:1 1 auto}}
.pp-grid{grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto;gap:16px 32px}
@media(max-width:760px){.pp-grid{grid-template-columns:1fr}}


/* ==========================================================================
   v8: mobile pass (Apple HIG + mobile best practice)
   - every tap target 44pt or more, safe areas respected, 16px+ inputs
   - thumb-reach CTA bar that appears only when useful
   ========================================================================== */
:root{--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--bar-h:68px;--head-h:68px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none !important;animation:none !important}}
html.noscroll,html.noscroll body{overflow:hidden}
body{-webkit-tap-highlight-color:transparent;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.wrap{padding-left:max(20px,var(--safe-l));padding-right:max(20px,var(--safe-r))}
:focus-visible{outline:3px solid var(--red-b);outline-offset:3px;border-radius:6px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.btn{min-height:52px;border-radius:12px;touch-action:manipulation}
.btn svg{width:20px;height:20px;stroke:currentColor;flex:0 0 auto}
.btn:active{transform:scale(.98)}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=password],input[type=date],input[type=url],select,textarea{min-height:50px;border-radius:12px;-webkit-appearance:none;appearance:none}
select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right .85rem center/18px no-repeat;padding-right:2.6rem}
input::placeholder{color:#a1a1aa}
.field label{font-size:.9rem;padding:2px 0}

/* header: phone as a real button */
.topnav a.plain.tel{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 .9rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.22);color:#fff}
.topnav a.plain.tel:hover{border-color:#fff}
.topnav a.plain.tel svg{width:17px;height:17px;stroke:var(--red-small);fill:none;stroke-width:2.2}
.topbar .brand{min-height:44px}

/* referral bar */
.refbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .8rem;line-height:1.35;padding:.6rem max(16px,var(--safe-r)) .6rem max(16px,var(--safe-l))}
.refbar button{min-height:44px;padding:0 1.1rem;margin-left:0;font-size:.9rem}

/* links that sit on their own get a full tap area */
.textlink{display:inline-flex;align-items:center;min-height:44px}
.final-small a,footer a{display:inline-flex;align-items:center;min-height:44px}
.final-tel{display:inline-flex;align-items:center;min-height:44px}
.simple .card p a:not(.btn){display:inline-flex;align-items:center;min-height:44px}

/* FAQ rows: whole row is the target */
.faq details{padding:0 4px}
.faq summary{min-height:60px;align-items:center;padding:14px 0}
.faq summary::after{flex:0 0 28px;height:28px;border-radius:50%;background:var(--red-l);display:grid;place-items:center;font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq p{margin:0 0 18px}

/* illustration zoom */
.ill a{display:block;position:relative;border-radius:var(--radius);-webkit-touch-callout:none}
.zoom-hint{position:absolute;right:10px;bottom:10px;display:none;align-items:center;gap:.35rem;background:rgba(12,12,12,.78);color:#fff;font-size:.8rem;font-weight:600;padding:.4rem .7rem;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.zoom-hint svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2}
@media (hover:none){.zoom-hint{display:inline-flex}}
.zoom{position:fixed;inset:0;z-index:120;background:rgba(8,8,9,.97);display:none;flex-direction:column;justify-content:center}
.zoom.open{display:flex}
.zoom-scroll{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.zoom-scroll img{width:max(100vw,1000px);max-width:none;height:auto;margin:0 auto}
@media (orientation:landscape){.zoom-scroll img{width:100vw;max-height:100vh;object-fit:contain}}
.zoom-close{position:absolute;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,var(--safe-r));width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer}
.zoom-tip{color:#a1a1aa;text-align:center;font-size:.85rem;margin:14px 0 0}
@media (orientation:landscape),(min-width:1000px){.zoom-tip{display:none}}
.qr-close{top:max(12px,env(safe-area-inset-top,0px));right:max(12px,var(--safe-r));width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;line-height:1}

/* sticky thumb bar (shown by ui.js once the hero buttons scroll away) */
.mobile-cta{gap:10px;padding:10px max(12px,var(--safe-r)) calc(10px + var(--safe-b)) max(12px,var(--safe-l));background:rgba(12,12,12,.86);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -8px 30px rgba(0,0,0,.25);transform:translateY(110%);transition:transform .28s cubic-bezier(.2,.8,.2,1);will-change:transform}
html:not(.js) .mobile-cta,.mobile-cta.show{transform:none}
.mobile-cta .btn{min-height:52px;font-size:1.02rem}
.mobile-cta .btn-call,.hero .btn-call{flex:0 0 auto;padding:0 1.15rem;border-color:rgba(255,255,255,.35)}
.mobile-cta .btn-red{flex:1}
@media(max-width:760px){footer{padding-bottom:calc(var(--bar-h) + 40px + var(--safe-b))}}

/* contract wizard: bigger controls, sticky nav in thumb reach */
.radios label{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1rem}
.radios input{width:20px;height:20px;margin:0}
.checkline{padding:6px 0;cursor:pointer}
.checkline input{width:24px;height:24px;margin-top:0}
.tier label{min-height:44px}
.linkbtn{min-height:44px;padding:0 10px}
.wnav .btn{min-height:54px}

/* --------------------------- phones --------------------------- */
@media(max-width:760px){
  :root{--head-h:60px}
  body{font-size:16.5px}
  .topbar{border-bottom-width:2px;background:rgba(12,12,12,.9);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
  .topbar .wrap{height:var(--head-h)}
  .brand img{height:34px}
  .topnav a.plain.tel{padding:0 .8rem;font-size:.98rem}
  section{padding:56px 0}
  .section-head{margin-bottom:28px}
  h2{font-size:clamp(1.55rem,7vw,2rem)}

  /* hero: headline, proof checks and both buttons inside the first screen */
  .hero .wrap{padding-top:26px;padding-bottom:40px;gap:32px}
  .hero .eyebrow{font-size:.78rem;margin-bottom:.45rem}
  .hero h1{font-size:clamp(2.05rem,10.2vw,2.9rem);max-width:none;margin-bottom:.4em}
  .hero p.lead{font-size:1.06rem;line-height:1.5;margin:0}
  .checks{margin-top:1.1rem;gap:.5rem}
  .hero .checks li{font-size:.98rem;line-height:1.4}
  .hero .ctas{flex-wrap:nowrap;margin-top:1.4rem}
  .hero .ctas .btn-red{flex:1 1 auto}
  .hero .ctas .btn-call{flex:0 0 auto}

  /* form card: edge-to-edge feel, roomier fields */
  .card{padding:22px 18px;border-radius:18px}
  .formcard{border-top-width:5px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
  .formcard h3{font-size:1.4rem}
  .field{margin-bottom:.9rem}

  /* proof: compact rows, number left, label right */
  .proof{padding:34px 0 28px}
  .proof-grid{gap:0;text-align:left}
  .proof-grid div{display:grid;grid-template-columns:7.2rem 1fr;align-items:center;gap:14px;padding:16px 0}
  .proof-grid div+div{padding-top:16px}
  .proof-grid b{font-size:1.9rem}
  .proof-grid span{margin:0;max-width:none;font-size:.98rem}
  .fineprint{margin-top:14px;text-align:left}

  .body-lg{font-size:1.06rem}
  .grid2{gap:24px}
  #problem .ill{margin-top:4px}
  .step{padding:20px 18px 20px 72px}
  .step .num{left:16px;top:20px;width:40px;height:40px;font-size:1.25rem}
  .grid3{gap:12px}
  .pp-list li{font-size:1rem}
  #protection .btn{width:100%}
  .final h2{font-size:clamp(1.6rem,7.4vw,2.1rem)}
  footer .wrap{flex-direction:column;gap:18px}

  .contract-page{padding-top:20px}
  .wnav{position:sticky;bottom:0;z-index:5;margin:18px -20px 0;padding:12px 20px calc(12px + var(--safe-b));background:rgba(245,244,242,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .terms{max-height:58vh}
  .tier{grid-template-columns:1fr}
  .simple{padding:28px 0;min-height:auto}
  .simple .btn{width:100%}
}
@media(max-width:360px){
  .topnav a.plain.tel span{display:none}
  .topnav a.plain.tel{padding:0;width:44px;justify-content:center}
  .proof-grid div{grid-template-columns:6.2rem 1fr}
  .proof-grid b{font-size:1.65rem}
}
@media(max-width:760px){
  .hero h1 .red{display:block}
  .hero .ctas .btn{padding:0 1rem;font-size:1rem;letter-spacing:.03em;white-space:nowrap}
  .proof-grid div{grid-template-columns:8.6rem 1fr}
  .proof-grid b{font-size:1.75rem;white-space:nowrap}
}
@media(max-width:360px){.hero .ctas .btn-red{font-size:.92rem}.proof-grid div{grid-template-columns:7.4rem 1fr}.proof-grid b{font-size:1.5rem}}
html.noscroll .mobile-cta{transform:translateY(110%)}
/* referral bar: one compact row on phones so the hero buttons stay in the first screen */
@media(max-width:760px){
  .refbar{flex-wrap:nowrap;justify-content:space-between;text-align:left;gap:12px;padding-top:.45rem;padding-bottom:.45rem;font-size:.88rem}
  .refbar b{display:block;font-size:.95rem;line-height:1.2}
  .refbar-sub{font-weight:500;opacity:.92}
  .refbar button{flex:0 0 auto;white-space:nowrap}
}

/* video block (click to load) */
.watch{background:var(--black);color:#fff;padding:8px 0 56px}
.watch .section-head{margin-bottom:24px}
.watch h2{color:#fff}
.vids{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1040px;margin:0 auto}
.vids figure{margin:0}
.vids figcaption{margin-top:10px;text-align:center;font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:#d4d4d8}
.vplay,.vids video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.vplay{position:relative;padding:0;border:0;cursor:pointer}
.vplay img{width:100%;height:100%;object-fit:cover}
.vbtn{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--red);box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .15s}
.vbtn::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.vplay:hover .vbtn,.vplay:focus-visible .vbtn{transform:scale(1.08)}
.vplay:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:760px){.vids{grid-template-columns:1fr;gap:20px}}
@media(max-width:760px){.watch{padding:4px 0 48px}.vids figcaption{font-size:.88rem}.vbtn{width:64px;height:64px;margin:-32px 0 0 -32px}.vbtn::after{left:25px;top:19px;border-width:13px 0 13px 20px}}
.nowrap,a[href^="tel:"]{white-space:nowrap}
@media(max-width:760px) and (min-width:361px){.proof-grid div{grid-template-columns:9.4rem 1fr;gap:10px}}

/* v10: branded QR overlay (brand kit v2) */
.qr-overlay{background:radial-gradient(800px 500px at 85% -10%,rgba(174,42,45,.45),transparent 62%),rgba(12,12,12,.97)}
.qr-box{border-top:0;border-radius:26px;padding:24px 22px 20px;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.qr-box:before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--red),var(--red-b))}
.qr-box .qr-logo{height:38px;width:auto;margin:4px auto 6px}
.qr-box .qr{width:min(320px,72vw,52vh);margin:10px auto 12px}
.qr-box .qr svg{display:block;width:100%;height:auto}
.qr-box h3{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,4.6vw,1.45rem);line-height:1.15}
.qr-box p{margin:.35rem 0 0}
.qr-box .qr-url{font-size:.85rem;color:var(--mute)}

/* v12: Log in button in the header (brand v2) */
.topnav a.plain.login{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0 1rem;border-radius:999px;color:#fff;text-decoration:none;font-family:var(--head);font-weight:600;font-size:.98rem;letter-spacing:.02em;border:1.5px solid rgba(255,255,255,.28);white-space:nowrap}
.topnav a.plain.login svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.1}
.topnav a.plain.login:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:760px){
  .topnav{gap:.5rem}
  .topnav a.plain.login{padding:0 .8rem;font-size:.95rem}
}
@media(max-width:360px){
  .topnav a.plain.login{padding:0;width:44px;justify-content:center}
  .topnav a.plain.login span{display:none}
}
@media(max-width:400px){
  .topnav{gap:.4rem}
  .topbar .wrap{gap:.75rem}
  .topbar .brand img{max-width:58vw}
}
