:root{
  --navy:#152A5C; --navy-900:#0D1B3E; --navy-050:#EEF1F8;
  --red:#1E6E63; --red-dark:#14524A; /* calm teal accent — was AMANA red; red now reserved for logo & emergencies */ --gold:#E8A33D;
  --paper:#F8F9FB; --white:#fff; --ink:#17223B; --slate:#5A6478; --line:#E3E7EF;
  --radius:16px; --shadow:0 12px 32px rgba(13,27,62,.10);
  --disp:'Fraunces',serif; --body:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;line-height:1.1}
h2{font-size:clamp(27px,3.4vw,40px)}
.kick{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kick::before{content:"";width:26px;height:2px;background:var(--red)}
.sub{color:var(--slate);font-size:16.5px;max-width:62ch;margin-top:12px}
section{padding:84px 0}
@media(max-width:768px){section{padding:52px 0}}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}
.center .kick{justify-content:center}

.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:12px;border:2px solid transparent;cursor:pointer;transition:all .18s ease;font-family:var(--body)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(30,110,99,.32)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(21,42,92,.32)}
.btn-line{border-color:var(--navy);color:var(--navy)}
.btn-line:hover{background:var(--navy-050)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px)}
.wa{width:18px;height:18px;fill:currentColor;flex:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ===== mode visibility (no inline styles anywhere) ===== */
.p-only,.b-only{display:none!important}
body.m-personal .p-only{display:block!important}
body.m-business .b-only{display:block!important}
body.m-personal .p-only.as-grid,body.m-business .b-only.as-grid{display:grid!important}
body.m-personal .p-only.as-flex,body.m-business .b-only.as-flex{display:flex!important}
body.m-personal span.p-only,body.m-business span.b-only{display:inline!important}

.topbar{background:var(--navy-900);color:#C9D2E6;font-size:13px;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar b{color:#fff}.topbar a{color:var(--gold);font-weight:700}

nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;height:72px;gap:20px}
.logo-img{height:42px;width:auto;max-width:170px;object-fit:contain}
@media(max-width:760px){ .logo-img{height:36px;max-width:140px} }
.logo-fb{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--navy)}
.logo-fb span{color:var(--red)}
.nav-links{display:flex;gap:20px;font-size:14.5px;font-weight:600;margin-right:auto}
.nav-links a{padding:6px 0;border-bottom:2.5px solid transparent}
.nav-links a:hover,.nav-links a.on{border-color:var(--red);color:var(--navy)}
/* toggle — right of the page */
.mode{display:inline-flex;background:var(--navy-050);border:1px solid var(--line);border-radius:999px;padding:4px;gap:3px;margin-left:auto}
.mode button{font-family:var(--body);font-weight:800;font-size:13px;padding:8px 18px;border-radius:999px;border:none;background:transparent;color:var(--slate);cursor:pointer;transition:all .2s;white-space:nowrap}
.mode button.on{background:var(--navy);color:#fff}
body.m-business .mode button.on{background:var(--red)}
.nav-cta{display:flex;gap:9px}
.nav-cta .btn{padding:10px 16px;font-size:13.5px}
@media(max-width:1150px){.nav-links{display:none}.nav-links+.mode{margin-left:auto}}
@media(max-width:640px){.nav-cta{display:none}.mode{margin-left:auto}}

/* ===== HERO — full-bleed image banner, minimal copy ===== */
.hero{position:relative;min-height:76vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:linear-gradient(115deg,var(--navy-900),var(--navy))}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s ease}
.hero-ol{position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,27,62,.92) 0%,rgba(13,27,62,.62) 46%,rgba(13,27,62,.18) 100%)}
.hero-content{position:relative;z-index:2;width:100%;padding-bottom:64px;padding-top:120px}
.hero .kick{color:var(--gold)}.hero .kick::before{background:var(--gold)}
/* .hero-h1 is a visual heading, not a semantic one. The three mode heroes used to
   ship three competing <h1> tags on one page; only the Business hero is a real <h1>
   now, and these paragraphs are styled to look identical. */
.hero h1,.hero .hero-h1{font-size:clamp(38px,5.6vw,66px);max-width:14ch;font-family:var(--disp);font-weight:500;letter-spacing:-.015em;line-height:1.1;margin:0}
.hero h1 em,.hero .hero-h1 em{font-style:italic;color:var(--gold)}
.hero .one{color:#D5DDEE;font-size:17px;margin:14px 0 22px;max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.chip{font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:rgba(13,27,62,.25);backdrop-filter:blur(6px);color:#fff;cursor:pointer;transition:all .16s;font-family:var(--body)}
.chip:hover{border-color:#fff}
.chip.active{background:var(--red);border-color:var(--red)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.gmini{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#D5DDEE}
.gmini b{color:#fff;font-size:15px}
.gmini .st{color:var(--gold)}
@media(max-width:768px){.hero{min-height:88vh}.hero-content{padding-bottom:48px}}

.trust{background:#fff;border-bottom:1px solid var(--line);padding:22px 0}
.trust .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.t{display:flex;flex-direction:column}
.t b{font-family:var(--disp);font-size:24px;color:var(--navy)}
.t b i{color:var(--red);font-style:normal}
.t span{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
@media(max-width:960px){.grid3,.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid3,.grid4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:all .2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:#c9d3e8}

.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:7px;transition:all .2s;cursor:pointer}
.pcard:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--navy)}
.pcard .ic{width:44px;height:44px;border-radius:12px;background:var(--navy-050);color:var(--navy);display:grid;place-items:center;font-size:21px;margin-bottom:4px}
.pcard b{font-size:15.5px;color:var(--navy)}
.pcard span{font-size:13px;color:var(--slate);flex:1}
.pcard .go{font-size:13px;font-weight:800;color:var(--red)}
.ptag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--navy-050);color:var(--navy)}
.ptag.fixed{background:#E8F5EC;color:#1B7A3D}

.stages{background:#fff}
.stage-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
@media(max-width:1000px){.stage-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stage-row{grid-template-columns:1fr}}
.stage{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);transition:all .2s;text-align:left}
.stage:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.stage img{aspect-ratio:4/3;object-fit:cover;width:100%}
.img-fb{display:none;place-items:center;background:linear-gradient(135deg,#23407f,#152A5C);color:#8FA0C9;font-weight:700;font-size:13px;letter-spacing:.08em;aspect-ratio:4/3}
.stage .in{padding:15px 16px 17px}
.stage .age{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--red);text-transform:uppercase}
.stage b{display:block;font-size:15px;color:var(--navy);margin:4px 0}
.stage span{font-size:12.5px;color:var(--slate)}

.tm{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:all .2s}
.tm:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.tm .av{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--navy),#23407f);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-size:26px;margin:0 auto 12px;border:3px solid var(--gold);position:relative;overflow:hidden}
.tm .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tm b{display:block;color:var(--navy);font-size:15.5px}
.tm .role{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:4px 0 8px;display:block}
.tm p{font-size:13px;color:var(--slate)}

.princ{background:var(--navy-900);color:#DCE3F2}
.princ .kick{color:var(--gold)}.princ .kick::before{background:var(--gold)}
.princ h2{color:#fff}.princ .sub{color:#9FAECB}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:900px){.pr-grid{grid-template-columns:1fr}}
.pr{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:24px}
.pr .n{font-family:var(--disp);font-style:italic;color:var(--gold);font-size:19px}
.pr h4{color:#fff;font-size:16px;margin:10px 0 6px}
.pr p{font-size:13.5px;color:#9FAECB}

.plans-row{display:flex;gap:16px;overflow-x:auto;padding:6px 4px 16px;scroll-snap-type:x proximity;cursor:grab;user-select:none}.plans-row.drag{cursor:grabbing;scroll-snap-type:none}.plans-row>.plan{min-width:272px;max-width:272px;flex:0 0 auto;scroll-snap-align:start}
.who-row{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.who-row>.card{min-width:250px;flex:0 0 auto;scroll-snap-align:start}
.rowlab{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:30px;text-align:left}
.rating-lock{display:inline-flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 22px;margin-top:22px}
.rating-lock .big{font-family:var(--disp);font-size:40px;color:var(--navy)}
.rating-lock .stars{color:var(--gold);letter-spacing:3px;font-size:16px}
.rating-lock small{display:block;color:var(--slate);font-size:12.5px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 18px}
.fch{font-size:13px;font-weight:700;padding:8px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-family:var(--body)}
.fch.active,.fch:hover{border-color:var(--red);color:var(--red);background:#E9F3F1}
.rev{display:flex;flex-direction:column;gap:11px}
.rev .top{display:flex;gap:12px;align-items:center}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800}
.rev .top b{display:block;font-size:14px}
.rev .stars{color:var(--gold);font-size:12px;letter-spacing:2px}
.rev p{font-size:14px;color:var(--slate);flex:1}
.rtag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red);background:#E9F3F1;padding:4px 10px;border-radius:999px}

.partners{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:48px 0}
.plogos{display:flex;gap:12px 14px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.plogo{font-weight:800;font-size:14.5px;padding:11px 20px;border-radius:12px;border:1px solid var(--line);background:var(--paper);letter-spacing:.02em}
.pimg{padding:9px 18px;display:inline-flex;align-items:center}
.pimg img{height:30px;width:auto;display:block}
/* Tokio Marine supply a stacked lockup (globe over wordmark). At the shared 30px
   row height its wordmark is unreadable, so this one gets extra height. Replace
   with the horizontal lockup when available and drop this rule. */
.pimg-stack{padding:4px 14px}
.pimg-stack img{height:46px}
.pl-liberty{color:#003DA5}.pl-kurnia{color:#C8102E}.pl-etiqa{color:#F2A900;background:#FFFBEF}.pl-sompo{color:#DA291C}.pl-aia{color:#D31145}.pl-po{color:#1B4F9C}.pl-tak{color:#00553F}.pl-myeg{color:#0072BC}
.p-note{text-align:center;font-size:12.5px;color:var(--slate);margin-top:18px}
.p-note b{color:var(--navy)}

.icard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:all .2s}
.icard:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.icard .in{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.icard .cat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.icard b{font-size:15.5px;color:var(--navy);line-height:1.35}
.icard time{font-size:12.5px;color:var(--slate)}
.icard .read{margin-top:auto;font-size:13px;font-weight:800;color:var(--navy)}

.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.faq summary{cursor:pointer;padding:17px 22px;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:21px;font-weight:400;transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 18px;color:var(--slate);font-size:14.5px;max-width:72ch}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:36px}
@media(max-width:860px){.faq-cols{grid-template-columns:1fr}}
.faq-group h3{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--red);display:inline-block;padding-bottom:6px;margin-bottom:18px}

.band{background:linear-gradient(115deg,var(--navy-900),var(--navy));color:#fff;text-align:center}
.band h2{color:#fff;max-width:24ch;margin:12px auto}
.band .sub{color:#9FAECB;margin:0 auto 28px}
.band em{color:var(--gold);font-style:italic}

.phero{background:linear-gradient(115deg,var(--navy-900),var(--navy));color:#fff;padding:60px 0 52px}
.phero .crumb{font-size:13px;color:#8FA0C9;margin-bottom:14px}
.phero .crumb a{color:var(--gold)}
.phero h1,.phero .hero-h1{font-size:clamp(30px,4.4vw,48px);font-family:var(--disp);font-weight:500;letter-spacing:-.015em;line-height:1.1;margin:0}
.phero .lead{color:#C9D2E6;font-size:17px;margin-top:14px;max-width:62ch}
.phero .hero-cta{margin-top:24px}
.phero em{color:var(--gold);font-style:italic}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;position:relative;transition:all .2s}
.plan:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.plan.pop{border-color:var(--red)}
.plan .flag{position:absolute;top:-13px;left:24px;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan h4{font-size:17px;color:var(--navy)}
.plan .who{font-size:13px;color:var(--slate);margin:2px 0 16px}
.plan .price{font-family:var(--disp);font-size:38px;color:var(--navy);line-height:1}
.plan .price small{font-family:var(--body);font-size:13px;color:var(--slate);font-weight:600}
.plan .perday{font-size:12.5px;color:var(--red);font-weight:700;margin:6px 0 18px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1}
.plan li{font-size:13.8px;color:var(--slate);display:flex;gap:9px}
.plan li::before{content:"✓";color:#1B7A3D;font-weight:800;flex:none}
.plan li b{color:var(--ink)}
.plan .btn{justify-content:center}
.illus{display:inline-flex;align-items:center;gap:8px;background:#FFF7E8;border:1px solid #F0DCAE;color:#8A6410;font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:10px;margin-top:18px}
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:28px;font-size:14px}
.tbl th{background:var(--navy);color:#fff;text-align:left;padding:13px 16px;font-size:13px;letter-spacing:.04em}
.tbl td{padding:12px 16px;border-top:1px solid var(--line);color:var(--slate)}
.tbl td:first-child{color:var(--ink);font-weight:600}
.check{color:#1B7A3D;font-weight:800}
.steps-num{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:860px){.steps-num{grid-template-columns:1fr}}
.snum{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.snum .n{font-family:var(--disp);font-style:italic;font-size:36px;color:var(--red);line-height:1}
.snum h4{margin:10px 0 6px;color:var(--navy);font-size:16px}
.snum p{font-size:14px;color:var(--slate)}

/* hotlines */
.hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px;max-width:840px}
@media(max-width:700px){.hgrid{grid-template-columns:1fr}}
.hotline{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px;transition:all .18s}
.hotline:hover{box-shadow:var(--shadow)}
.hotline .ic{width:42px;height:42px;border-radius:11px;background:#E9F3F1;color:var(--red);display:grid;place-items:center;font-size:18px;flex:none}
.hotline b{display:block;font-size:14.5px;color:var(--navy)}
.hotline a{font-size:16px;color:var(--red);font-weight:800;letter-spacing:.02em}
.hotline .hl-link{font-size:12.5px;color:var(--navy);font-weight:700}
.cl-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.phil{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:14px;padding:28px 30px;margin-top:32px}
.phil p{color:var(--slate);font-size:15px;margin-bottom:14px}
.phil p:last-child{margin-bottom:0}
.phil .pull{font-family:var(--disp);font-size:21px;color:var(--navy);line-height:1.4}
.commit{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:12px}
.commit li{display:flex;gap:11px;font-size:14.5px;color:var(--slate)}
.commit li::before{content:"—";color:var(--red);font-weight:800;flex:none}

/* AI assistant */
.ai{background:linear-gradient(115deg,var(--navy-900),var(--navy));color:#fff}
.ai .kick{color:var(--gold)}.ai .kick::before{background:var(--gold)}
.ai h2{color:#fff}.ai .sub{color:#9FAECB}
.ai-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:32px 28px;margin-top:36px;max-width:760px}
.ai-q{font-family:var(--disp);font-size:22px;margin-bottom:6px}
.ai-step{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.ai-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ai-opt{font-family:var(--body);font-weight:700;font-size:14px;padding:11px 20px;border-radius:12px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer;transition:all .16s}
.ai-opt:hover{border-color:var(--gold);color:var(--gold)}
.ai-opt.sel{background:var(--red);border-color:var(--red);color:#fff}
.ai-res{display:none;margin-top:8px}
.ai-res.show{display:block}
.ai-res .rec{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.18);font-size:14.5px;color:#DCE3F2}
.ai-res .rec::before{content:"✓";color:var(--gold);font-weight:800;flex:none}
.ai-note{font-size:11.5px;color:#8FA0C9;margin-top:18px;line-height:1.6}
.ai-back{background:none;border:none;color:#8FA0C9;font-size:13px;font-weight:700;cursor:pointer;margin-top:16px;font-family:var(--body);text-decoration:underline}

/* image-backed business product hero */
.bp-hero{position:relative;overflow:hidden;padding:96px 0 76px}
.bp-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bp-ol{position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,27,62,.94) 0%,rgba(13,27,62,.72) 52%,rgba(13,27,62,.34) 100%)}
/* ===== structured quote journey (SolarPro-style: Part 1 / 2 / 3) ===== */
.qj{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 30px;margin-top:36px;max-width:820px;box-shadow:var(--shadow)}
.qj-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.qj-tab{font-family:var(--body);font-weight:800;font-size:13.5px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--slate);cursor:pointer;transition:all .16s}
.qj-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.qj-part{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.qj-part .pn{width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.qj-part h4{font-size:16px;color:var(--navy)}
.qj-part span{font-size:12px;color:var(--slate)}
.qj-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.qj-grid{grid-template-columns:1fr}}
.qf label{display:block;font-size:12.5px;font-weight:800;color:var(--navy);letter-spacing:.03em}
.qf input,.qf select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:14.5px;margin-top:6px;background:#fff;color:var(--ink)}
.qf input:focus,.qf select:focus{border-color:var(--red);outline:none}
.qj-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.qj-checks{grid-template-columns:1fr}}
.qj-check{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--slate);cursor:pointer;transition:all .15s}
.qj-check:hover{border-color:var(--red)}
.qj-check input{margin-top:3px;accent-color:var(--red)}
.qj-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--slate);margin-top:22px;line-height:1.55}
.qj-consent input{margin-top:3px;accent-color:var(--red)}
.qj-decl{font-size:12.5px;color:var(--slate);margin-top:10px;padding-left:26px}
.qj .btn{margin-top:22px}
.qj-err{display:none;color:#B0121B;font-size:13px;font-weight:700;margin-top:12px}
.qj-err.show{display:block}

/* ===== legacy mode visibility ===== */
.l-only{display:none!important}
body.m-legacy .l-only{display:block!important}
body.m-legacy .l-only.as-grid{display:grid!important}
body.m-legacy .l-only.as-flex{display:flex!important}
body.m-legacy span.l-only{display:inline!important}
body.m-legacy .mode button.on{background:var(--gold);color:var(--navy-900)}
/* ===== one-question-at-a-time wizard ===== */
.wiz{background:#fff;border:1px solid var(--line);border-radius:22px;padding:44px 34px;margin-top:36px;max-width:640px;box-shadow:var(--shadow);text-align:center}
.wiz .wk{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.wiz .ws{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);margin-top:10px}
.wiz .dots{display:flex;gap:8px;justify-content:center;margin:14px 0 26px}
.wiz .dot{width:10px;height:10px;border-radius:50%;background:#D6DCE8;transition:background .2s}
.wiz .dot.done{background:var(--red)}
.wiz h3{font-family:var(--disp);font-weight:500;font-size:clamp(22px,3vw,30px);color:var(--navy);letter-spacing:-.01em;line-height:1.2;margin-bottom:22px}
.wiz .wopts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.wiz .wopt{font-family:var(--body);font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:all .15s}
.wiz .wopt:hover{border-color:var(--red);color:var(--red)}
.wiz .wopt.sel{background:var(--red);border-color:var(--red);color:#fff}
.wiz input[type=text],.wiz input[type=tel],.wiz input[type=email]{width:100%;max-width:400px;padding:15px 18px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15.5px;text-align:center}
.wiz input:focus{border-color:var(--red);outline:none}
.wiz .whelp{font-size:12.5px;color:var(--slate);margin-top:12px}
.wiz .wbtn{margin-top:24px}
.wiz .wback{display:inline-block;background:none;border:none;color:var(--slate);font-size:13px;font-weight:700;cursor:pointer;margin-top:18px;font-family:var(--body);text-decoration:underline}
.wiz .werr{display:none;color:#B0121B;font-size:13px;font-weight:700;margin-top:12px}
.wiz .werr.show{display:block}
.wiz .wthanks .tick{width:74px;height:74px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:34px;margin:6px auto 18px}
.wiz .wconsent{display:flex;gap:9px;align-items:flex-start;text-align:left;font-size:12.5px;color:var(--slate);max-width:400px;margin:18px auto 0;line-height:1.55}
.wiz .wconsent input{margin-top:2px;accent-color:var(--red)}
/* legacy product page bits */
.aia-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #D31145;color:#D31145;font-weight:800;font-size:12.5px;letter-spacing:.06em;padding:8px 16px;border-radius:999px;text-transform:uppercase}
.factrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media(max-width:760px){.factrow{grid-template-columns:1fr}}
.fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.fact b{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.fact span{font-size:15px;color:var(--navy);font-weight:700}
footer{background:var(--navy-900);color:#8FA0C9;padding:56px 0 106px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
.fgrid h5{color:#fff;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.fgrid a{display:block;padding:4px 0}
.fgrid a:hover{color:var(--gold)}
.flegal{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}

.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .18s}
.wa-float:hover{transform:scale(1.08)}
.wa-float .wa{width:27px;height:27px}
.mob-bar{position:fixed;bottom:0;left:0;right:0;z-index:65;display:none;background:#fff;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px}
.mob-bar .btn{flex:1;justify-content:center;padding:12px 8px;font-size:13.5px}
@media(max-width:768px){.mob-bar{display:flex}.wa-float{bottom:84px;right:16px}}

.page{display:none}.page.on{display:block}
.rv{opacity:1;transform:none}
html.js-reveal .rv{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
html.js-reveal .rv.in{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* ===== production additions ===== */
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0}.skip:focus{left:0}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}.burger span{display:block;width:22px;height:2.5px;background:var(--navy);margin:4.5px 0;border-radius:2px}
.avatar-init{width:72px;height:72px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;margin:0 auto 10px;font-family:'Plus Jakarta Sans',sans-serif}
.band-lite{background:#fff;padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:860px){.burger{display:block}
 #mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 20px 16px;box-shadow:0 12px 24px rgba(13,27,62,.08)}
 #mainnav.open{display:flex;flex-direction:column;gap:2px}
 #mainnav a{padding:10px 4px;border-bottom:1px solid var(--bg)}
 .nav .wrap{position:relative}
 .mode-toggle{width:100%;justify-content:center;margin-top:8px}}
img{max-width:100%}

/* faq search + privacy prose */
.faq-search{max-width:640px;margin:0 0 22px}
.faq-search input{width:100%;padding:14px 18px;border:1.5px solid var(--line);border-radius:14px;font:inherit;font-size:16px}
.faq-search input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(21,42,92,.12)}
.faq-none{color:var(--slate);font-size:14px;margin-top:10px}
.prose{max-width:760px}.prose h2{font-size:20px;margin:26px 0 8px;color:var(--navy)}.prose p{color:var(--slate);line-height:1.7;margin:0 0 12px}

/* ===== Insights article + featured ===== */
.post-hero{background:var(--navy-900);color:#fff;padding:64px 0 40px}
.post-hero .crumb{color:#9fb0d8;font-size:13px;margin-bottom:16px}
.post-hero .crumb a{color:var(--gold);text-decoration:none}
.post-cat{color:var(--gold);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.post-hero h1{font-family:Fraunces,serif;font-size:clamp(28px,4vw,42px);line-height:1.15;max-width:820px}
.post-meta{color:#9fb0d8;font-size:14px;margin-top:14px}
.post-body{max-width:1200px;padding:44px 24px 20px}
/* Article text sits in the SAME left-aligned column as the hero headline above it
   (820px starting at the page gutter), so an article reads like every other page
   instead of drifting into a floating centred block. */
.post-body > *{max-width:820px}
.post-body > .tablewrap{max-width:100%}
.post-body .lede{font-size:19px;line-height:1.65;color:var(--navy);font-weight:500;margin-bottom:26px}
.post-body h2{font-family:Fraunces,serif;font-size:24px;color:var(--navy);margin:34px 0 10px}
.post-body p{color:var(--slate);line-height:1.75;margin:0 0 14px;font-size:16.5px}
.post-body .callout{background:#f0f6f3;border-left:4px solid var(--teal,#1E6E63);border-radius:10px;padding:16px 20px;margin:22px 0;color:var(--navy);font-size:15.5px;line-height:1.6}
.post-body .btn{margin:8px 8px 8px 0}
.post-body .disclaimer{font-size:13px;color:#8895ad;margin-top:34px;border-top:1px solid var(--line);padding-top:18px}
.related-posts{background:var(--bg);padding:48px 0 8px}
.ins-featured{display:block;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-900) 100%);color:#fff;border-radius:20px;padding:34px 34px 30px;text-decoration:none;margin-bottom:8px;transition:transform .15s}
.ins-featured:hover{transform:translateY(-2px)}
.ins-featured-tag{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.ins-featured h2{font-family:Fraunces,serif;font-size:clamp(22px,3vw,30px);line-height:1.2;margin:0 0 10px;color:#fff}
.ins-featured p{color:#c7d2ee;font-size:16px;line-height:1.6;margin:0 0 14px;max-width:640px}
.ins-featured .read{color:var(--gold);font-weight:700;font-size:15px}

/* ============================================================
   MOBILE APP-LIKE LAYOUT — only applies at <=760px.
   Desktop (>760px) is completely unaffected by this block.
   ============================================================ */
@media(max-width:760px){

  /* --- remove the crowded bottom action bar; keep only floating WhatsApp --- */
  .mob-bar{display:none!important}
  .wa-float{width:52px;height:52px;bottom:16px;right:16px;z-index:80}

  /* --- tighter global rhythm (app feel) --- */
  .wrap{padding-left:18px;padding-right:18px}
  section{padding-top:30px;padding-bottom:30px}
  .band{padding:34px 0}
  h1,.hero-h1{font-size:30px!important;line-height:1.12}
  h2{font-size:22px!important}
  .kick{font-size:11px;letter-spacing:.1em}

  /* --- hero: readable, compact, text sits on a solid panel not on a face --- */
  .hero,.phero{min-height:auto}
  .hero .wrap,.phero .wrap{padding-top:26px;padding-bottom:26px}
  .hero h1,.phero h1{font-size:30px!important}
  .hero .sub,.phero .lead,.phero .sub{font-size:15px;line-height:1.5}
  /* darken hero image so white text is always legible on mobile */
  .hero::after,.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,27,62,.45),rgba(13,27,62,.78));z-index:0}
  .hero .wrap,.phero .wrap{position:relative;z-index:1}

  /* --- hero mode chips: even, tappable, tidy --- */
  .hero-cta{gap:8px}
  .chip{padding:12px 16px;font-size:13.5px;border-radius:24px;min-height:44px;display:inline-flex;align-items:center}
  .hero-cta .btn{width:100%;justify-content:center;margin-top:4px}

  /* --- product & feature cards: shorter images, less scrolling --- */
  .grid3,.grid4{gap:12px}
  .pcard{padding:16px}
  .pcard .ic{width:40px;height:40px;font-size:20px}
  .pcard b{font-size:15px}
  .pcard span{font-size:13.5px}
  /* feature "stage" cards (Beyond SOCSO / Your team / income): cap image height */
  .stage img,.stage .img-fb{height:150px!important;object-fit:cover}
  .stage .in{padding:14px 16px 16px}
  .stage .in b{font-size:16px}
  .stage .in span{font-size:13.5px;line-height:1.45}

  /* --- the 6-stat strip: 2 columns instead of a cramped row --- */
  .factrow,.stats,.statbar{grid-template-columns:1fr 1fr!important;gap:14px 10px}

  /* --- quote wizard: full width, comfortable tap targets --- */
  .wiz{padding:22px 16px}
  .wiz input,.wiz .opt{font-size:16px}  /* 16px stops iOS zoom-on-focus */
  .wbtn{width:100%}

  /* --- mode toggle in the menu: full-width pills --- */
  .mode-toggle{width:100%;justify-content:stretch;margin-top:6px}
  .mode-toggle .mt-btn{flex:1;text-align:center}

  /* --- PA Flex plan cards: swipe row already; make cards a touch smaller --- */
  .plans-row>.plan{min-width:240px;max-width:240px}

  /* --- article pages: comfortable reading --- */
  .post-hero{padding:40px 0 26px}
  .post-body{padding:26px 18px 10px}
  .post-body > *{max-width:100%}
  .post-body .lede{font-size:17px}
  .post-body h2{font-size:21px}

  /* --- footer: stack cleanly --- */
  .fgrid,.fcols{grid-template-columns:1fr 1fr;gap:22px 18px}
}

/* very small phones */
@media(max-width:380px){
  .factrow,.stats,.statbar{grid-template-columns:1fr!important}
  h1,.hero h1,.phero h1{font-size:26px!important}
}

/* ===== Business/Personal/Legacy product pages: consistent list styling ===== */
/* Both "covers" and "not covered" use the SAME left-aligned, plain layout so
   their bullets line up perfectly. The "not covered" gets a subtle heading and
   a soft tinted background band (not an indented card) for gentle distinction. */
.cols2{display:block}
.cols2 ul.cov, .cols2 ul.exc{margin:0 0 8px;padding-left:22px;list-style:disc}
.cols2 ul.cov li, .cols2 ul.exc li{margin:0 0 10px;line-height:1.6;color:var(--slate);padding-left:4px}
.cols2 h2{margin:0 0 14px}
/* "Typically not covered" — plain block, NOT an indented card. Bullets align
   with the covers list above. A left accent rule marks it as exclusions. */
.cols2 aside.card{background:transparent;border:0;border-radius:0;padding:0;margin:26px 0 0}
.cols2 aside.card>b{display:block;margin-bottom:12px;color:var(--navy);font-size:15px}
.cols2 aside.card ul.exc{margin:0;padding-left:22px}
/* the note line under the lists */
.cols2 .note,.cols2>p{margin-top:20px;color:var(--slate);line-height:1.6}

/* Industry chips (Retail / F&B / Offices ...) — pills with spacing */
.inds{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.chip-s{display:inline-block;background:#eef2f9;color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;line-height:1.2}

/* Pre-paint mode: <html data-boot-mode="..."> is set by an inline head script
   before the body renders, so navigating Home from Personal/Legacy shows the
   right sections immediately with no Business flash. Mirrors the body.m-* rules. */
html[data-boot-mode="personal"] .b-only{display:none!important}
html[data-boot-mode="personal"] .p-only{display:block!important}
html[data-boot-mode="personal"] .l-only{display:none!important}
html[data-boot-mode="legacy"] .b-only{display:none!important}
html[data-boot-mode="legacy"] .p-only{display:none!important}
html[data-boot-mode="legacy"] .l-only{display:block!important}
html[data-boot-mode="business"] .p-only{display:none!important}
html[data-boot-mode="business"] .l-only{display:none!important}
html[data-boot-mode="business"] .b-only{display:block!important}


/* ============================================================
   INSURANCE PAGE HERO, photograph on the right dissolving into
   the navy. Applies ONLY to /insurance/ (its Business, Personal
   and Future & Legacy views). Product pages are untouched.
   ============================================================ */
.ins-hero{position:relative;overflow:hidden}

/* Fallback for browsers without mask support: gentle full-bleed wash. */
.ins-hero .ins-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
  opacity:.26;z-index:0;
}

/* Modern browsers: a true fade. Masking the image makes its own pixels
   dissolve into the navy, which reads far cleaner than laying a grey
   gradient on top of it. */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .ins-hero .ins-hero-img{
    inset:auto;top:0;right:0;left:auto;bottom:auto;
    width:64%;height:100%;opacity:1;
    -webkit-mask-image:linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,.18) 24%,
      rgba(0,0,0,.42) 38%, rgba(0,0,0,.70) 54%, rgba(0,0,0,.90) 70%, rgba(0,0,0,1) 86%);
    mask-image:linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,.18) 24%,
      rgba(0,0,0,.42) 38%, rgba(0,0,0,.70) 54%, rgba(0,0,0,.90) 70%, rgba(0,0,0,1) 86%);
  }
}
.ins-hero .wrap{position:relative;z-index:2}
/* keep the heading and intro clear of the photograph on wide screens */
@media(min-width:761px){
  .ins-hero .crumb,.ins-hero h1,.ins-hero .lead{max-width:620px}
}
/* mobile: a side image is too narrow, so revert to a soft full-bleed */
@media(max-width:760px){
  .ins-hero .ins-hero-img{
    inset:0;left:0;right:auto;width:100%;opacity:.30;
    -webkit-mask-image:none;mask-image:none;
  }
  .ins-hero .crumb,.ins-hero h1,.ins-hero .lead{max-width:100%}
}

/* Team photographs (About page) — real portraits in the circular frames */
.tm .av{width:92px;height:92px}
.tm .av img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;border-radius:50%}

/* Footer wordmark — the reverse (white) brand logo on the navy footer. */
.footer-logo{
  display:block;
  height:34px;width:auto;
  max-width:100%;
}
/* Text fallback if the image ever fails to load. */
.footer-logo-fb{
  display:inline-block;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-weight:800;font-size:30px;letter-spacing:.02em;
  color:#fff;line-height:1;
}
@media(max-width:760px){ .footer-logo{height:30px} .footer-logo-fb{font-size:26px} }

/* Data tables inside articles (e.g. road tax price lists) */
.post-body .tablewrap{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:12px}
.post-body table.rt{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.post-body table.rt th{background:var(--navy);color:#fff;text-align:left;padding:11px 14px;font-weight:700;font-size:13.5px;white-space:nowrap}
.post-body table.rt td{padding:10px 14px;border-top:1px solid var(--line);color:var(--slate)}
.post-body table.rt tr:nth-child(even) td{background:#fafbfd}
.post-body h2[id]{scroll-margin-top:90px}

/* Footer address with pin, and social links */
footer .faddr{display:flex;gap:8px;align-items:flex-start;color:inherit;text-decoration:none;line-height:1.7}
footer .faddr .pin{flex:0 0 auto;line-height:1.5;font-size:14px;opacity:.9}
footer .faddr:hover span:last-child{text-decoration:underline}
.fsocial{display:flex;gap:14px;margin-top:14px}
.fsocial a{color:#c7d2ee;font-size:13.5px;text-decoration:none;border-bottom:1px solid rgba(199,210,238,.35);padding-bottom:1px}
.fsocial a:hover{color:#fff;border-color:#fff}

/* Article hero image */
.post-figure{margin:0 0 26px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.post-figure img{width:100%;height:auto;display:block}


/* ============================================================
   PRODUCT PAGE RHYTHM
   Scoped to product pages only (they are the pages that carry
   <body data-mode="...">), so the home, insurance and content
   pages keep their existing spacing.
   Fixes three measured problems:
     1. the hero button sat flush against the paragraph above it (0px gap)
     2. the three fact cards sat flush against "What this plan does" (0px gap)
     3. 84px section padding left large empty bands between blocks
   ============================================================ */
body[data-mode] .phero{padding:60px 0 36px}
body[data-mode] .phero .btn{margin-top:22px}
body[data-mode] main > section{padding:42px 0}
body[data-mode] main > section:first-of-type{padding-top:34px}
body[data-mode] .grid3{margin-bottom:32px}
body[data-mode] .cols2{margin-top:0}
@media(max-width:760px){
  body[data-mode] .phero{padding:34px 0 26px}
  body[data-mode] main > section{padding:28px 0}
  body[data-mode] .grid3{margin-bottom:24px}
}

/* ============================================================
   MOBILE HEADER FIXES
   ------------------------------------------------------------
   1. THE MENU DID NOT WORK AT ALL.
      #mainnav was position:absolute with top:100%. Its offsetParent was
      BODY, which is not positioned, so top:100% resolved against the
      initial containing block, i.e. the viewport. The panel opened at
      y = 800px on a 800px-tall screen: exactly one screen below the fold.
      Putting it back into normal document flow fixes it.
   2. THE MENU WAS ALSO EMPTY.
      .nav-links is display:none below 1150px and nothing re-enabled it
      inside the open panel, so even when found it held no links.
   ============================================================ */
@media(max-width:860px){
  #mainnav{position:static}
  #mainnav.open{display:block;padding:4px 20px 16px}
  #mainnav.open .nav-in{flex-direction:column;align-items:stretch;height:auto;gap:0;padding:0}
  #mainnav.open .nav-links{display:flex;flex-direction:column;gap:0;margin-right:0;width:100%}
  #mainnav.open .nav-links a{padding:13px 2px;border-bottom:1px solid var(--line);border-top:0}
  #mainnav.open .nav-links a:last-child{border-bottom:0}
  #mainnav.open .mode{width:100%;justify-content:center;margin:12px 0 0}
  #mainnav.open .logo-img{height:32px;max-width:140px;margin-bottom:6px}
}

/* Topbar: on a phone the full sentences wrapped to two cramped lines and
   only two small words were tappable. On mobile the whole line is one
   large tap target; desktop keeps the fuller wording. */
.tb-mob{display:none}
.tb-mob a{color:var(--gold);text-decoration:none;display:block;padding:2px 0}
.tb-mob a b{color:var(--gold);font-weight:700}
@media(max-width:860px){
  .tb-desk{display:none}
  .tb-mob{display:block}
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:2px}
}

/* On several pages the hero section painted over the burger button, so the
   tap landed on the hero instead of the menu. The nav panel already sits at
   z-index 60; the button needs to be lifted above the page content too. */
.burger{position:relative;z-index:70}

/* ============================================================
   STAGE 1 — MOBILE DENSITY  (phones only, 760px and below)
   ------------------------------------------------------------
   Measured before: the homepage ran 11,803px on a 390px phone,
   nearly 15 full screens. Product tiles and the team grid were
   over half of that. Nothing below changes desktop or iPad.
   ============================================================ */
.m-only-block{display:none}

@media(max-width:760px){

  /* ---- Section rhythm: 84px bands are desktop-scale ---- */
  main > section{padding:44px 0}
  .sub{font-size:15px;margin-top:10px}
  h2{font-size:24px}

  /* ---- Trust strip: a 2-up grid instead of five stacked rows ---- */
  .trust{padding:16px 0}
  .trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
  .trust .t{text-align:left}
  .trust .t b{font-size:22px}
  .trust .t span{font-size:11px}

  /* ---- Product tiles: 2 across, icon and name only.
          The description repeated what the page it links to already says,
          and it was forcing one tall card per row. ---- */
  .grid4.as-grid,.grid3.as-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .as-grid .pcard{padding:14px 12px;gap:6px;justify-content:flex-start}
  .as-grid .pcard .ic{width:34px;height:34px;font-size:17px;border-radius:10px;margin-bottom:2px}
  .as-grid .pcard b{font-size:14px;line-height:1.25}
  .as-grid .pcard span:not(.go){display:none}
  .as-grid .pcard .go{display:none}

  /* ---- Life-stage cards: 2 across, image and label.
          The body copy is the same story the product pages tell. ---- */
  .stage-row{grid-template-columns:1fr 1fr!important;gap:10px;margin-top:22px}
  .stage img,.stage .img-fb{height:96px!important}
  .stage .in{padding:10px 11px 12px}
  .stage .in b{font-size:13.5px;line-height:1.25;margin:3px 0 0}
  .stage .in span:not(.age){display:none}
  .stage .age{font-size:10px}

  /* ---- Homepage team: nine full bios is a page of its own.
          Collapse to a line and a link; /about/ keeps the full grid. ---- */
  .team-home{display:none}
  .m-only-block{display:block}
  .team-home-mob{color:var(--slate);font-size:15px;margin-top:14px}

  /* ---- The /about/ team grid stays, but 2-up and tighter ---- */
  .grid4 .tm{padding:16px 12px}
  .grid4 .tm .av{width:64px;height:64px;margin-bottom:9px}
  .grid4 .tm b{font-size:14px}
  .grid4 .tm .role{font-size:11px}
  .grid4 .tm p{font-size:12.5px;line-height:1.45}

  /* ---- Article cards ---- */
  .icard .in{padding:14px}
  .icard b{font-size:15px}

  /* ---- Partner logos: tighter strip ---- */
  .plogos{gap:8px 10px;margin-top:18px}
  .pimg{padding:7px 12px}
  .pimg img{height:24px}
  .pimg-stack img{height:36px}
}

/* On the narrowest phones the 2-up product grid still reads well,
   so keep it rather than falling back to a single column. */
@media(max-width:600px){
  .grid4.as-grid,.grid3.as-grid{grid-template-columns:1fr 1fr!important}
  .stage-row{grid-template-columns:1fr 1fr!important}
  .grid4 .tm{}
}

/* Remaining sub-44px tap targets on phones: the risk-wizard options and the
   claims-page category tabs. 44px is the minimum comfortable thumb target. */
@media(max-width:760px){
  .ai-opt,.opt,.wopt,.tab,.claim-tab,.qj-tab,.cl-tab,.seg button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}