/* TurtleFinvest — production stylesheet */
:root{
  --green:#4D7F73; --green-dk:#3C665D; --mint:#E2EFEA;
  --ink:#1B211D; --ink2:#414B45; --mut:#5F6A64; --mut2:#7B8480; --mut3:#9AA39D;
  --line:#E2EAE5; --line2:#E6ECE8; --line3:#F1F5F3; --hair:#D8E1DC;
  --soft:#F1F5F3; --alt:#FAFBFA;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --disp:'Poppins',var(--sans);
  --shadow:0 24px 48px -20px rgba(27,33,29,.3);
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--disp);font-weight:600;margin:0;text-wrap:pretty}
p{margin:0}
img,svg{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dk)}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;box-shadow:var(--shadow);z-index:200;font-weight:700}
.hp{position:absolute;left:-9999px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:928px}
em{font-style:normal;color:var(--green)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;padding:11px 20px;border-radius:9px;border:1.5px solid transparent;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{font-size:14.5px;padding:13.5px 24px}
.btn-p{background:var(--green);color:#fff}
.btn-p:hover{background:var(--green-dk);color:#fff}
.btn-s{background:#fff;color:var(--ink);border-color:var(--hair)}
.btn-s:hover{border-color:var(--green);color:var(--green-dk)}
.lnk{font-size:12.5px;font-weight:700;white-space:nowrap}

/* header */
.hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line3)}
.hdr-in{display:flex;align-items:center;gap:28px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:inherit}
.brand:hover{color:inherit}
.brand img{height:38px;width:auto;display:block;flex:0 0 auto}
.brand-name{display:block;font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.3px;line-height:1;color:var(--ink)}
.brand-sub{display:block;font-size:10px;font-weight:600;letter-spacing:.4px;color:var(--mut2);margin-top:3px}
.nav{flex:1;display:flex;justify-content:center;gap:28px}
.nav a{font-size:13.5px;font-weight:600;color:var(--ink2)}
.nav a:hover{color:var(--green)}
.nav a.is-active{color:var(--green);border-bottom:2px solid var(--green);padding-bottom:3px}
.hdr-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto}
.burger{display:none;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:#fff;align-items:center;justify-content:center;flex:0 0 auto}
.mnav{display:flex;flex-direction:column;border-top:1px solid var(--line3);background:#fff;padding:8px 24px 18px}
.mnav a{font-size:15px;font-weight:700;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line3)}
.mnav .mnav-cta{color:var(--green);font-size:14px;padding:16px 0 4px;border-bottom:0}

/* sections */
.sec{padding:76px 0}
.sec-tight{padding:0 0 84px}
.sec-soft{background:var(--soft)}
.sec-alt{background:var(--alt)}
.hero-sec{padding:44px 0 40px}
.split{display:grid;gap:48px;align-items:center}
.split-hero{grid-template-columns:1fr 1.08fr}
.split-why{grid-template-columns:.92fr 1.08fr;gap:52px}
.split-calc{grid-template-columns:.72fr 1.28fr;gap:44px;align-items:start}
.split-proc{grid-template-columns:1.1fr .9fr;gap:44px}
.split-tst{grid-template-columns:1.35fr .65fr;gap:32px;margin-top:28px;padding:0}
.split-contact{grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;color:var(--green)}
.copy h2{font-size:clamp(25px,3.6vw,34px);letter-spacing:-.9px;line-height:1.24;margin:14px 0 0}
.copy h2.h2-sm{font-size:clamp(23px,3.2vw,30px);letter-spacing:-.8px;margin:0}
.copy h2.h2-lg{font-size:clamp(27px,4vw,40px);letter-spacing:-1.1px;line-height:1.16}
.copy h2.mb{margin-bottom:30px}
.lede{font-size:14.5px;line-height:1.75;color:var(--mut);margin-top:16px;max-width:430px}
.secthead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.figure{border-radius:22px;overflow:hidden;background:var(--soft)}
.figure img{width:100%;height:auto}

/* hero */
.hero h1{font-size:clamp(32px,5vw,50px);line-height:1.16;letter-spacing:-1.2px}
.philosophy{margin:22px 0 0;padding:2px 0 2px 20px;border-left:2px solid var(--mint);max-width:440px}
.philosophy p{font-size:16px;line-height:1.65;color:var(--ink2);font-style:italic}
.philosophy cite{display:block;font-size:11.5px;font-style:normal;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--green);margin-top:12px}
.philosophy cite::before{content:"— "}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;max-width:470px}
.trust li{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;font-weight:600;color:var(--ink2);line-height:1.5}
.trust svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* why */
.checklist{display:flex;flex-direction:column;gap:15px;margin-top:26px}
.checklist li{display:flex;gap:12px;align-items:center;font-size:14px;font-weight:600;color:var(--ink)}
.tick{width:28px;height:28px;border-radius:8px;background:var(--mint);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tick svg{width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.checklist+.btn{margin-top:28px}
.figwrap{position:relative}
.goalcard{position:absolute;right:-14px;top:34px;width:238px;background:#fff;border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.goalcard-t{font-size:12.5px;font-weight:700}
.goalcard-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.goalcard .row{display:flex;justify-content:space-between;align-items:baseline}
.goalcard .row span{font-size:11.5px;font-weight:600;color:var(--ink2)}
.goalcard .row b{font-size:11px;font-weight:700;color:var(--green)}
.goalcard .bar{height:5px;border-radius:3px;background:var(--soft);margin-top:6px;overflow:hidden}
.goalcard .bar i{display:block;height:5px;border-radius:3px;background:var(--green)}
.goalcard-f{font-size:10.5px;font-weight:600;color:var(--mut2);line-height:1.5;margin-top:14px;padding-top:12px;border-top:1px solid var(--line3)}

/* calculators */
.calc{background:#fff;border:1px solid var(--line2);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.calc-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line3);padding:0 10px}
.calc-tabs button{font-size:13px;font-weight:600;padding:16px 14px;color:var(--mut2);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.calc-tabs button:hover{color:var(--ink2)}
.calc-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--green)}
.calc-body{display:grid;grid-template-columns:1.05fr .95fr}
.calc-inputs{padding:26px 28px}
.calc-inputs h3{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-.2px}
.calc-inputs>p{font-size:13px;color:var(--mut);line-height:1.6;margin-top:6px}
.fields{display:flex;flex-direction:column;gap:22px;margin-top:24px}
.fields .lab{font-size:12px;font-weight:600;color:var(--mut)}
.fields .val{font-size:19px;font-weight:700;letter-spacing:-.4px;margin-top:4px}
.fields .ends{display:flex;justify-content:space-between;margin-top:6px}
.fields .ends span{font-size:10.5px;font-weight:600;color:var(--mut3)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--line);outline:none;margin:12px 0 0;padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 1px 4px rgba(27,33,29,.28);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--green);border:3px solid #fff;cursor:pointer}
.calc-out{background:var(--soft);padding:26px 28px;display:flex;flex-direction:column}
.calc-out-l{font-size:12.5px;font-weight:600;color:var(--mut)}
.calc-out-v{font-family:var(--disp);font-size:clamp(26px,3.4vw,32px);font-weight:600;letter-spacing:-1.2px;color:var(--green-dk);margin-top:6px;line-height:1.1}
.calc-out-c{font-size:12.5px;color:var(--mut);margin-top:8px;line-height:1.6}
.chart{width:100%;height:120px;margin-top:20px}
.legend{display:flex;gap:16px;margin-top:6px}
.legend>span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--mut)}
.sw{display:block;width:14px;border-radius:2px}
.sw-a{height:2.6px;background:var(--green)}
.sw-b{height:2px;background:var(--mut3)}
.stats{display:flex;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--hair)}
.stats div{flex:1}
.stats p{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--mut2)}
.stats b{display:block;font-size:15px;font-weight:700;margin-top:4px}
.disc{font-size:10.5px;color:var(--mut2);line-height:1.55;margin-top:16px}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps li{text-align:center}
.disc-ic{width:60px;height:60px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto}
.disc-ic svg{width:26px;height:26px;fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step-n{display:block;font-size:12px;font-weight:700;color:var(--mut3);margin-top:12px}
.steps b{display:block;font-size:14.5px;font-weight:700;margin-top:4px;letter-spacing:-.2px}
.steps li>span:last-child{display:block;font-size:12.5px;color:var(--mut);line-height:1.6;margin-top:7px}

/* testimonials */
.tstgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tst{margin:0;background:#fff;border:1px solid var(--line2);border-radius:16px;padding:20px;display:flex;flex-direction:column}
.tst>svg{width:20px;height:20px;fill:none;stroke:#B7D0CA;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tst blockquote{margin:12px 0 0;font-size:13.5px;color:var(--ink2);line-height:1.7;flex:1;text-wrap:pretty}
.tst figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--line3)}
.tst figcaption b{display:block;font-size:13px;font-weight:700}
.tst figcaption span{display:block;font-size:11.5px;font-weight:600;color:var(--mut2);margin-top:2px}
.figure-sm{border-radius:20px}

/* insights */
.artgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.art{background:#fff;border:1px solid var(--line2);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.art img{width:100%;height:150px;object-fit:cover;background:var(--soft)}
.art>div{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.art-d{font-size:11px;font-weight:600;color:var(--mut3)}
.art h3{font-family:var(--sans);font-size:14.5px;font-weight:700;line-height:1.4;margin-top:8px;letter-spacing:-.2px;flex:1}
.art .lnk{margin-top:14px;align-self:flex-start}

/* faqs */
.faqs{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.faq{background:#fff;border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.faq>button{display:flex;align-items:center;gap:16px;width:100%;padding:17px 20px;background:none;border:0;text-align:left}
.faq>button>span{flex:1;font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:var(--ink);text-wrap:pretty}
.faq>button>i{width:24px;height:24px;border-radius:50%;background:var(--soft);color:var(--green);font-size:14px;font-weight:700;font-style:normal;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.faq>div{padding:0 20px 19px;font-size:13.5px;color:var(--mut);line-height:1.75;max-width:700px}

/* form */
.form{margin-top:28px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{position:relative;margin-top:14px}
.f2 .fld{margin-top:0}
.f2+.fld{margin-top:14px}
.fld>svg{position:absolute;left:14px;top:15px;width:17px;height:17px;pointer-events:none;fill:none;stroke:var(--mut3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;z-index:1}
select,textarea,input[type=text],input[type=email],input[type=tel]{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px 12px 40px;width:100%;outline:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237B8480' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
textarea{resize:vertical;line-height:1.6;font-weight:500}
select:focus,textarea:focus,input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(77,127,115,.16)}
input:user-invalid{border-color:#C2603F}
::placeholder{color:var(--mut3);font-weight:500}
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:16px;cursor:pointer;font-size:12.5px;color:var(--mut);line-height:1.5}
.consent input{width:16px;height:16px;accent-color:var(--green);margin:1px 0 0;flex:0 0 auto}
.form-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px}
.safe{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut2)}
.safe svg{width:15px;height:15px;fill:none;stroke:var(--mut2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* contact list */
.contactlist{display:flex;flex-direction:column;gap:20px;margin-top:28px;padding-left:26px;border-left:1px solid var(--line2)}
.contactlist li{display:flex;gap:14px;align-items:flex-start}
.cir{width:40px;height:40px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cir svg{width:19px;height:19px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contactlist b{display:block;font-size:14px;font-weight:700}
.contactlist a:not(.lnk),.contactlist em{display:block;font-size:13.5px;font-weight:600;color:var(--ink2);font-style:normal;margin-top:4px}
.contactlist a:not(.lnk):hover{color:var(--green)}
.contactlist small{display:block;font-size:12.5px;color:var(--mut2);margin-top:3px;line-height:1.6}
.contactlist .lnk{display:inline-block;font-size:13px;margin-top:7px}

/* assurance strip */
.assure{margin-top:44px;background:var(--soft);border-radius:18px;padding:24px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;align-items:center}
.assure li{display:flex;gap:12px;align-items:center}
.assure b{display:block;font-size:13px;font-weight:700}
.assure small{display:block;font-size:12px;color:var(--mut2);margin-top:3px}
.sq{width:42px;height:42px;border-radius:12px;background:var(--green);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sq svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.assure .ic{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* footer */
.ftr{background:#fff;border-top:1px solid var(--line3);padding-top:56px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:40px}
.frow{display:flex;align-items:center;gap:10px}
.fdesc{font-size:12.5px;color:var(--mut);line-height:1.75;margin-top:18px;max-width:330px}
.fh{font-size:12.5px;font-weight:700;color:var(--ink)}
.fcol{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.fcol a{font-size:12.5px;font-weight:500;color:var(--mut)}
.fcol a:hover{color:var(--green)}
.fcol-b{gap:9px;margin-top:16px}
.fcol-b a{font-weight:600}
.social{margin-top:14px;gap:8px}
.social a{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.social a:hover{border-color:var(--green)}
.social svg{width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fbottom{border-top:1px solid var(--line3);padding:20px 0 28px;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between}
.fbottom p{font-size:11.5px;font-weight:600;color:var(--mut2)}
.fbottom div{display:flex;flex-wrap:wrap;gap:12px 20px}
.fbottom a{font-size:11.5px;font-weight:600;color:var(--mut2)}
.fbottom a:hover{color:var(--green)}

/* whatsapp fab */
.wa{position:fixed;bottom:24px;right:24px;z-index:95;width:54px;height:54px;border-radius:50%;background:var(--green);box-shadow:0 12px 26px -10px rgba(27,33,29,.5);display:flex;align-items:center;justify-content:center;animation:waFloat .5s cubic-bezier(.2,.9,.3,1.2) .6s both}
.wa:hover{background:var(--green-dk)}
.wa svg{width:28px;height:28px}
@keyframes waFloat{from{transform:translateY(20px) scale(.85);opacity:0}to{transform:none;opacity:1}}

/* legal / thanks pages */
.doc{max-width:760px;margin:0 auto;padding:64px 24px 96px}
.doc h1{font-size:clamp(28px,4vw,40px);letter-spacing:-1.1px;line-height:1.18}
.doc h2{font-size:19px;letter-spacing:-.4px;margin-top:36px}
.doc p,.doc li{font-size:14.5px;color:var(--mut);line-height:1.8;margin-top:12px}
.doc ul{list-style:disc;padding-left:22px;margin-top:6px}
.doc .meta{font-size:12.5px;color:var(--mut2);margin-top:10px}
.center{text-align:center}

/* The brand lockup grew when the tagline replaced "Your Wealth Partner",
   pushing the nav past the wrap between 1000 and 1100px. It was already
   marginal at 1000px before that. Hide the nav earlier; the rest of the
   responsive layout still switches at 1000px. */
@media (max-width:1150px){
  .nav,.nav-cta{display:none}
  .burger{display:flex}
}
@media (max-width:1000px){
  .split,.split-hero,.split-why,.split-calc,.split-proc,.split-tst,.split-contact{grid-template-columns:1fr}
  .artgrid,.tstgrid,.steps,.ftr-grid,.assure{grid-template-columns:1fr 1fr}
  .calc-body{grid-template-columns:1fr}
  .goalcard{position:static;width:auto;margin-top:14px;box-shadow:none}
  .hero,.copy,.secthead{text-align:center}
  .secthead{flex-direction:column;align-items:center}
  .lede,.copy h2,.fdesc{margin-left:auto;margin-right:auto}
  .copy h2,.lede{max-width:620px}
  .philosophy{border-left:0;padding-left:0;padding-top:16px;border-top:2px solid var(--mint);max-width:520px;margin-left:auto;margin-right:auto}
  .ctarow,.form-cta{justify-content:center}
  .trust{max-width:600px;margin-left:auto;margin-right:auto;text-align:left}
  .checklist{align-items:stretch;width:max-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
  .form{text-align:left}
  .contactlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 28px;padding:0;border-left:0;text-align:left}
  .ftr-grid{text-align:center}
  .fcol{align-items:center}
  .frow,.social{justify-content:center}
  .fbottom{justify-content:center;text-align:center}
}
@media (max-width:640px){
  .brand img{height:30px}
  .sec{padding:56px 0}
  .sec-tight{padding:0 0 64px}
  .artgrid,.tstgrid,.steps,.ftr-grid,.assure,.f2{grid-template-columns:1fr}
  .calc-inputs,.calc-out{padding:22px 20px}
  .assure{padding:22px 20px}
}


/* =============================================================
   Article pages (blog/)
   Built strictly on design-system/tokens.css. Rules taken from
   BRAND.md and its shipping checklist:
     - zero gradients
     - one brand green; tints are steps of it. No blush/coral/pink,
       no blue, no amber, no bronze anywhere in the UI
     - semantic colours for status only (kept well under ~3% of area)
     - Poppins for display copy, Manrope for everything product
     - spacing on the 4px scale, radii from the named set
   Type roles below map 1:1 to the table in BRAND.md s2.
   ============================================================= */
.pwrap{max-width:var(--tw-content-max);margin:0 auto;padding:0 var(--tw-space-6)}

/* ---- hero band. Flat fill: gradients are out of system. ---- */
.phero{background:var(--tw-mist);border-bottom:1px solid var(--tw-border-soft)}
.phero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--tw-space-10);align-items:end;padding:var(--tw-space-10) var(--tw-space-6) 0}
.phead{padding-bottom:var(--tw-space-10)}
.pcrumb{display:flex;align-items:center;gap:var(--tw-space-2);font-size:12px;font-weight:600;color:var(--tw-muted);margin-bottom:var(--tw-space-4)}
.pcrumb a{color:var(--tw-muted)}
.pcrumb a:hover{color:var(--tw-primary)}
/* Overline: Manrope 800 / 11px / +3px / subtle (BRAND.md s2) */
.peyebrow{font-family:var(--tw-font-ui);font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--tw-subtle)}
/* Display: Poppins 600 (BRAND.md s2) */
.ptitle{font-family:var(--tw-font-display);font-size:clamp(30px,4.2vw,44px);font-weight:600;letter-spacing:-1px;line-height:1.09;margin:var(--tw-space-3) 0 0;max-width:22ch;color:var(--tw-ink)}
/* Body, one step up for the standfirst */
.pdek{font-size:15px;font-weight:500;line-height:24px;color:var(--tw-body);margin-top:var(--tw-space-4);max-width:52ch}
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tw-space-2) var(--tw-space-6);margin-top:var(--tw-space-6);font-size:12px;font-weight:700;color:var(--tw-subtle)}
.pmeta span{display:inline-flex;align-items:center;gap:var(--tw-space-2)}
.pmeta svg{width:16px;height:16px;fill:none;stroke:var(--tw-primary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.phero-fig{margin:0;align-self:end}
.phero-fig img{display:block;width:100%;height:auto}

/* ---- numbered section blocks ---- */
.pbody{padding:var(--tw-space-2) 0}
.pblk{display:grid;grid-template-columns:var(--tw-space-10) minmax(0,1fr);gap:0 var(--tw-space-4);padding:var(--tw-space-10) 0;border-top:1px solid var(--tw-rule)}
.pblk:first-child{border-top:0}
.pnum{font-family:var(--tw-font-ui);font-size:12px;font-weight:800;letter-spacing:.8px;color:var(--tw-primary);line-height:28px}
.pblk-in{min-width:0}
/* H2: Manrope 800 / 22 / 28 / -0.5px */
.pblk h2{font-family:var(--tw-font-ui);font-size:22px;font-weight:800;line-height:28px;letter-spacing:-.5px;color:var(--tw-ink)}
.pintro{font-size:14px;font-weight:500;line-height:22px;color:var(--tw-body);margin-top:var(--tw-space-3)}

/* ---- content columns ---- */
.pcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--tw-space-4) var(--tw-space-10);margin-top:var(--tw-space-4);align-items:start}
.pcols-w{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.pcols-n{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.pcols-1{grid-template-columns:minmax(0,1fr)}
.pcol{min-width:0}
/* Body: Manrope 500 / 14 / 22 */
.pcol p{font-size:14px;font-weight:500;line-height:22px;color:var(--tw-body);margin-top:var(--tw-space-3)}
.pcol > p:first-child{margin-top:0}
.pcol strong{color:var(--tw-ink);font-weight:700}

/* ---- figures ---- */
.pfig{margin:0;min-width:0}
.pfig img{display:block;width:100%;height:auto;border-radius:var(--tw-radius-inner)}
.pcap{font-size:12px;font-weight:500;line-height:18px;color:var(--tw-subtle);margin-top:var(--tw-space-2)}

/* Display flourish — replaces handwritten phrases baked into three mockup
   illustrations. Poppins, and never sharing a component with Manrope text. */
.pflourish{font-family:var(--tw-font-display);font-size:20px;font-weight:600;line-height:28px;letter-spacing:-.5px;color:var(--tw-primary);margin-top:var(--tw-space-3)}
.phero-fig .pflourish{text-align:right}

/* ---- quiet callout. sage-50 is the sanctioned quiet-banner tint. ---- */
.pnote{background:var(--tw-sage-50);border-radius:var(--tw-radius-tile);padding:var(--tw-space-3) var(--tw-space-4);margin-top:var(--tw-space-4);font-size:13px;font-weight:700;line-height:20px;color:var(--tw-green-700)}
.pnote-plain{background:var(--tw-mist);color:var(--tw-body);font-weight:600}

/* ---- tinted cards. Green/sage steps only — see BRAND.md s1. ---- */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--tw-space-3);margin-top:var(--tw-space-4)}
.pcard{border-radius:var(--tw-radius-inner);padding:var(--tw-space-4) var(--tw-space-3);text-align:center;border:1px solid transparent}
.pcard .ic{width:30px;height:30px;margin:0 auto var(--tw-space-3)}
/* Numeric: Manrope 800 / -1px. Manrope throughout the card — no mixing. */
.pcard b{display:block;font-family:var(--tw-font-ui);font-size:20px;font-weight:800;letter-spacing:-1px;line-height:26px;color:var(--tw-ink)}
.pcard b.big{font-size:15px;line-height:22px;letter-spacing:-.3px}
.pcard .lab{display:block;font-size:12px;font-weight:700;line-height:16px;color:var(--tw-body);margin-top:var(--tw-space-1)}
.pcard .sub{display:block;font-size:12px;font-weight:500;line-height:18px;color:var(--tw-muted);margin-top:var(--tw-space-2)}
.pcard .sub em{display:block;color:var(--tw-subtle);font-weight:600;margin-top:var(--tw-space-1);font-style:normal}
.t-plain{background:var(--tw-white);border-color:var(--tw-border)}
.t-quiet{background:var(--tw-mist);border-color:var(--tw-border-soft)}
.t-tint{background:var(--tw-sage-50);border-color:var(--tw-sage-200)}
.t-brand{background:var(--tw-green-50);border-color:var(--tw-green-300)}
/* status only, used sparingly */
.t-neg{background:var(--tw-error-bg);border-color:var(--tw-border)}

/* ---- data table (BRAND.md s6) ---- */
.ptbl{width:100%;border-collapse:collapse;margin-top:var(--tw-space-4);font-size:13px;border:1px solid var(--tw-border);border-radius:var(--tw-radius-inner);overflow:hidden}
.ptbl caption{caption-side:top;text-align:left;font-size:12px;font-weight:700;color:var(--tw-body);padding-bottom:var(--tw-space-2)}
.ptbl thead th{background:var(--tw-offwhite);font-family:var(--tw-font-ui);font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--tw-subtle)}
.ptbl th,.ptbl td{text-align:left;padding:var(--tw-space-3) var(--tw-space-4);border-bottom:1px solid var(--tw-rule);line-height:20px;vertical-align:top}
.ptbl tbody th{font-weight:700;color:var(--tw-ink)}
.ptbl td{color:var(--tw-body);font-weight:600}
.ptbl tbody tr:nth-child(even){background:var(--tw-offwhite)}
.ptbl tr:last-child th,.ptbl tr:last-child td{border-bottom:0}
.ptbl .num{white-space:nowrap;font-weight:800}
.pscroll{overflow-x:auto;margin-top:var(--tw-space-4);-webkit-overflow-scrolling:touch}
.pscroll .ptbl{margin-top:0;min-width:520px}

/* ---- worked example panel ---- */
.pexample{border:1px solid var(--tw-border);border-radius:var(--tw-radius-card);padding:var(--tw-space-4);background:var(--tw-white)}
.pexample .ptbl{margin-top:0;border:0}
.pexample h3{font-family:var(--tw-font-ui);font-size:16px;font-weight:800;line-height:22px;letter-spacing:-.3px;color:var(--tw-ink);margin-bottom:var(--tw-space-2)}

/* ---- step flow ---- */
.pflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--tw-space-4) var(--tw-space-3);margin-top:var(--tw-space-6)}
.pstep{position:relative;padding-right:var(--tw-space-2)}
.pstep .n{width:28px;height:28px;border-radius:var(--tw-radius-pill);background:var(--tw-primary);color:var(--tw-white);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:var(--tw-space-3)}
.pstep .t{display:block;font-size:13px;font-weight:700;line-height:18px;color:var(--tw-ink)}
.pstep .d{display:block;font-size:12px;font-weight:500;line-height:18px;color:var(--tw-muted);margin-top:var(--tw-space-1)}
.pstep::after{content:"";position:absolute;top:13px;left:36px;right:0;height:1px;background:var(--tw-border-strong)}
.pstep:last-child::after{display:none}

/* ---- icon flow ---- */
.piconflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--tw-space-4);margin-top:var(--tw-space-4);text-align:center}
.piconflow .ic{width:48px;height:48px;border-radius:var(--tw-radius-pill);background:var(--tw-green-50);display:flex;align-items:center;justify-content:center;margin:0 auto var(--tw-space-3)}
.piconflow .ic svg{width:24px;height:24px}
.piconflow .t{display:block;font-size:13px;font-weight:700;line-height:18px;color:var(--tw-ink)}
.piconflow .d{display:block;font-size:12px;font-weight:500;line-height:18px;color:var(--tw-muted);margin-top:var(--tw-space-1)}

/* ---- tick / cross lists ---- */
.plist{margin-top:var(--tw-space-3);display:grid;gap:var(--tw-space-2)}
.plist li{display:flex;gap:var(--tw-space-3);align-items:flex-start;font-size:13px;font-weight:600;line-height:20px;color:var(--tw-body)}
.plist .m{flex:0 0 auto;width:20px;height:20px;border-radius:var(--tw-radius-tile);display:flex;align-items:center;justify-content:center;margin-top:1px}
.plist .m svg{width:12px;height:12px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.plist .m-y{background:var(--tw-green-50)}
.plist .m-y svg{stroke:var(--tw-success)}
.plist .m-n{background:var(--tw-error-bg)}
.plist .m-n svg{stroke:var(--tw-error)}
.pbox{border-radius:var(--tw-radius-card);padding:var(--tw-space-4);border:1px solid transparent}
.pbox h3{font-family:var(--tw-font-ui);font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--tw-subtle);margin-bottom:var(--tw-space-1)}
.pbox.t-neg h3{color:var(--tw-error)}
.pbox.t-brand h3{color:var(--tw-green-700)}

/* ---- quote-style compare ---- */
.pquotes{display:grid;gap:var(--tw-space-2);margin-top:var(--tw-space-3)}
.pquotes li{font-size:13px;font-weight:600;line-height:20px;color:var(--tw-body);padding-left:var(--tw-space-3);border-left:2px solid var(--tw-border-strong)}

/* ---- numbered questions ---- */
.pqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:var(--tw-space-4);margin-top:var(--tw-space-6)}
.pq{display:flex;gap:var(--tw-space-3);align-items:flex-start}
.pq .n{flex:0 0 auto;width:28px;height:28px;border-radius:var(--tw-radius-pill);background:var(--tw-green-50);color:var(--tw-green-700);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pq p{font-size:13px;font-weight:600;line-height:20px;color:var(--tw-body)}

/* ---- key takeaways ---- */
.ptakes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--tw-space-4);margin-top:var(--tw-space-4)}
.ptake{display:flex;gap:var(--tw-space-3);align-items:flex-start}
.ptake .ic{flex:0 0 auto;width:36px;height:36px;border-radius:var(--tw-radius-pill);background:var(--tw-green-50);display:flex;align-items:center;justify-content:center}
.ptake .ic svg{width:20px;height:20px}
.ptake p{font-size:13px;font-weight:500;line-height:20px;color:var(--tw-body)}

/* ---- icons: 24px grid, 1.7px stroke, round caps, no fill (BRAND.md s5) ---- */
.pbody .i-s{fill:none;stroke:var(--tw-primary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- charts. tw-secondary is the sanctioned chart-series colour. ---- */
.pminis{display:grid;grid-template-columns:1fr 1fr;gap:var(--tw-space-4);margin-top:var(--tw-space-3)}
.pmini{border:1px solid var(--tw-border);border-radius:var(--tw-radius-inner);padding:var(--tw-space-3)}
.pmini h3{font-family:var(--tw-font-ui);font-size:12px;font-weight:800;letter-spacing:.4px;color:var(--tw-body);margin-bottom:var(--tw-space-2)}
.pmini svg{width:100%;height:auto;display:block}
.pmini p{font-size:12px;font-weight:500;line-height:18px;color:var(--tw-muted);margin-top:var(--tw-space-2)}
.ppanel{border-radius:var(--tw-radius-inner);padding:var(--tw-space-4);border:1px solid transparent}
.ppanel h3{font-family:var(--tw-font-ui);font-size:13px;font-weight:800;color:var(--tw-ink);margin-bottom:var(--tw-space-3)}
.ppanel img{border-radius:var(--tw-radius-tile);display:block;width:100%;height:auto}
.ppanel p{font-size:12px;font-weight:500;line-height:18px;color:var(--tw-muted);margin-top:var(--tw-space-3)}
.psvg{width:100%;height:auto;display:block}
.psvg text{font-family:var(--tw-font-ui)}
.psvg .s-lab{font-size:9px;font-weight:600;fill:var(--tw-subtle)}
.psvg .s-val{font-size:10px;font-weight:800;fill:var(--tw-ink)}
.psvg .s-tag{font-size:10px;font-weight:800;fill:var(--tw-green-700)}
.psvg .s-mid{font-size:8px;font-weight:800;fill:var(--tw-on-dark)}

/* ---- compliance ---- */
.pdisc{font-size:12px;font-weight:500;line-height:18px;color:var(--tw-subtle);margin-top:var(--tw-space-3)}
.priskbar{border-top:1px solid var(--tw-border-soft);margin-top:var(--tw-space-2);padding:var(--tw-space-6) 0 var(--tw-space-10)}
.priskbar p{font-size:12px;line-height:20px;color:var(--tw-muted);font-weight:500}
.priskbar p + p{margin-top:var(--tw-space-2)}

/* ---- closing band. Flat fill, no gradient. ---- */
.pend{background:var(--tw-green-50);border-top:1px solid var(--tw-green-300)}
.pend-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:var(--tw-space-6)}
.pend-mid{text-align:center;padding:var(--tw-space-10) 0}
.pend h2{font-family:var(--tw-font-display);font-size:clamp(20px,2.8vw,26px);font-weight:600;letter-spacing:-.6px;line-height:1.3;color:var(--tw-ink)}
.pend p{font-size:13px;font-weight:500;color:var(--tw-body);line-height:20px;margin:var(--tw-space-3) auto 0;max-width:60ch}
.pend .ctarow{display:flex;flex-wrap:wrap;gap:var(--tw-space-3);justify-content:center;margin-top:var(--tw-space-4)}
.pend img{display:block;width:100%;height:auto}
.pend-l,.pend-r{margin:0;align-self:end}

/* ---- next-article strip ---- */
.pnext{padding:var(--tw-space-10) 0 var(--tw-space-1)}
.pnext .secthead{margin-bottom:var(--tw-space-6)}

/* ---- blog index ---- */
.bhero{background:var(--tw-mist);border-bottom:1px solid var(--tw-border-soft);padding:var(--tw-space-10) 0;text-align:center}
.bhero h1{font-family:var(--tw-font-display);font-size:clamp(30px,4.2vw,44px);font-weight:600;letter-spacing:-1px;line-height:1.09;color:var(--tw-ink)}
.bhero p{font-size:15px;font-weight:500;line-height:24px;color:var(--tw-body);margin:var(--tw-space-4) auto 0;max-width:56ch}
.bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--tw-space-6);padding:var(--tw-space-10) 0 var(--tw-space-18)}
.bcard{display:flex;flex-direction:column;border:1px solid var(--tw-border);border-radius:var(--tw-radius-card);overflow:hidden;background:var(--tw-white);transition:border-color .15s,box-shadow .15s}
.bcard:hover{border-color:var(--tw-primary);box-shadow:var(--tw-elev-2)}
.bcard-img{background:var(--tw-mist);aspect-ratio:16/9;overflow:hidden}
.bcard-img img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.bcard-b{padding:var(--tw-space-4);display:flex;flex-direction:column;flex:1}
.bcard .kicker{font-family:var(--tw-font-ui);font-size:10px;font-weight:800;letter-spacing:2.4px;color:var(--tw-subtle);text-transform:uppercase}
.bcard h2{font-family:var(--tw-font-ui);font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:22px;margin-top:var(--tw-space-2)}
.bcard h2 a{color:var(--tw-ink)}
.bcard h2 a:hover{color:var(--tw-primary)}
.bcard .ex{font-size:13px;font-weight:500;line-height:20px;color:var(--tw-body);margin-top:var(--tw-space-2);flex:1}
.bcard .bmeta{font-size:12px;font-weight:600;color:var(--tw-subtle);margin-top:var(--tw-space-3)}

@media (max-width:880px){
  /* Stacked hero. Two things to get right here:
     - the 40px grid gap plus the figure's own margin left a 56px void
       between the meta row and the illustration; one gap is enough
     - the illustrations are only ~380px wide, so left-aligned in an
       800px band they sit marooned beside a slab of empty colour and
       the page reads as half-loaded. Centre them: at phone widths the
       figure fills the column anyway, so this only bites on tablets. */
  .phero-in{grid-template-columns:minmax(0,1fr);padding-top:var(--tw-space-6);gap:var(--tw-space-4)}
  .pend-in{padding:0 var(--tw-space-6)}
  .phead{padding-bottom:0}
  .ptitle{max-width:none}
  .phero-fig{max-width:420px;margin:0 auto}
  .phero-fig .pflourish{text-align:center}
  /* Centre the hero copy to match the centred illustration — ranging the text
     left against a centred image is what made the band look broken. This is
     also what the homepage already does with .hero/.copy on narrow screens. */
  .phead{text-align:center}
  .pcrumb,.pmeta{justify-content:center}
  .pdek{margin-left:auto;margin-right:auto}
  .pcols,.pcols-w,.pcols-n,.pminis{grid-template-columns:minmax(0,1fr)}
  .pstep::after{display:none}

  /* ---- stacked article body ----------------------------------------
     Once the columns collapse, every figure is narrower than the column
     it sits in, so left-aligning them strands a slab of empty space to
     the right and the page reads as broken. Centre the lot.
     Exceptions below follow the homepage's own mobile pattern: tick
     lists, quotes and table cells keep their text left-aligned and it
     is the block that gets centred, because centred ragged-both-edges
     text is markedly harder to read. */
  .pblk-in{text-align:center}
  .pfig{max-width:420px!important;margin-left:auto;margin-right:auto}
  .pcol p,.pintro,.pcap,.pdisc{margin-left:auto;margin-right:auto}
  .pcol p{max-width:62ch}
  .pstep .n,.ptake .ic,.pq .n{margin-left:auto;margin-right:auto}
  .pstep,.ptake,.pq{display:block}
  .pexample{text-align:center}

  /* blocks centred, contents still left-aligned */
  .plist,.pquotes{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
  .pscroll{text-align:left}
  .pend-in{grid-template-columns:minmax(0,1fr)}
  .pend-l,.pend-r{display:none}
}
@media (max-width:640px){
  .pwrap{padding:0 var(--tw-space-4)}
  .pblk{grid-template-columns:minmax(0,1fr);gap:0;padding:var(--tw-space-6) 0}
  .pnum{margin-bottom:var(--tw-space-1);line-height:20px}
  .pblk h2{font-size:20px;line-height:26px}
  /* Body (mobile): Manrope 500 / 13 / 20 */
  .pcol p,.pintro{font-size:13px;line-height:20px}
  .bgrid{padding:var(--tw-space-6) 0 var(--tw-space-10);gap:var(--tw-space-4)}
}