:root{
  --green:#1E9E4A; --green-d:#15803D; --green-dd:#0E5C2C; --green-l:#EAF7EE; --green-l2:#F4FBF6;
  --ink:#15201A; --body:#5A6560; --line:#E4EAE6; --white:#fff;
  --p-green:#DCF2E3; --p-blue:#DDEBF8; --p-yellow:#FBEFD0; --p-pink:#FAE0E4;
  --la:'Plus Jakarta Sans',system-ui,sans-serif;
  --si:'Noto Sans Sinhala','Plus Jakarta Sans',system-ui,sans-serif;
  --r:16px; --shadow:0 2px 14px rgba(21,32,26,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--si);color:var(--ink);background:var(--white);line-height:1.75;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.wrap{max-width:74rem;margin:0 auto;padding:0 1.25rem}
a{color:var(--green-d);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--green-d);outline-offset:3px}
h1,h2,h3{line-height:1.35;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,5.6vw,3.1rem);font-weight:800;line-height:1.25}
h2{font-size:clamp(1.45rem,3.6vw,2.1rem)}
h3{font-size:1.05rem}
p{margin:0 0 1.1em}
.num{font-family:var(--la);font-variant-numeric:tabular-nums}
.accent{color:var(--green)}
.script{font-family:'Caveat',cursive;font-size:1.5rem;color:var(--green-d);line-height:1.25;transform:rotate(-4deg);display:inline-block}

/* header */
header.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:1.25rem;min-height:4.25rem}
.logo{font-family:var(--la);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;
  text-decoration:none;color:var(--ink);line-height:1}
.logo span{color:var(--green)}
.logo small{display:block;font-size:.6rem;font-weight:500;color:var(--body);letter-spacing:.02em;margin-top:2px}
.topnav{display:none;gap:1.15rem;margin-inline-start:1.25rem;font-size:.9rem;white-space:nowrap}
.topnav a{text-decoration:none;color:var(--ink);padding:.35rem 0;white-space:nowrap;
  border-bottom:2px solid transparent}
.topnav a:hover,.topnav a[aria-current]{border-bottom-color:var(--green);color:var(--green-d)}
.top-right{margin-inline-start:auto;display:flex;align-items:center;gap:.75rem}
.langsw{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  font-family:var(--la);font-size:.78rem;font-weight:600}
.langsw a{padding:.25rem .6rem;text-decoration:none;color:var(--body)}
.langsw a[aria-current]{background:var(--green);color:#fff}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:#fff;
  text-decoration:none;padding:.72rem 1.4rem;border-radius:999px;font-weight:600;
  border:0;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--green-d);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--green-l2);color:var(--ink);border-color:var(--green)}
.btn-sm{padding:.5rem 1.05rem;font-size:.92rem}
@media(min-width:64rem){.topnav{display:flex}}
@media(min-width:78rem){.topnav{gap:1.5rem;font-size:.95rem}}
@media(max-width:80rem){.top-right .btn{display:none}}
@media(max-width:30rem){.top-right .btn{display:none}.logo{font-size:1.25rem}}
@media(max-width:26rem){.hero-btns .btn{flex:1 1 100%;justify-content:center}}

/* mobile nav */
.mnav{border-bottom:1px solid var(--line);background:var(--green-l2)}
.mnav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;overflow-x:auto;
  scrollbar-width:none;font-size:.93rem}
.mnav ul::-webkit-scrollbar{display:none}
.mnav a{display:block;padding:.65rem 0;text-decoration:none;color:var(--ink);white-space:nowrap}
@media(min-width:64rem){.mnav{display:none}}

/* hero */
.hero{padding:3rem 0 2.5rem;background:
  radial-gradient(120% 90% at 85% 0%, var(--green-l) 0%, rgba(255,255,255,0) 62%)}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:62rem){.hero-grid{grid-template-columns:1.05fr .95fr;gap:3rem}}
.hero p.lede{font-size:1.08rem;color:var(--body);max-width:34rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 2rem}
.pills{display:flex;flex-wrap:wrap;gap:1.5rem 2rem}
.pill{display:flex;align-items:center;gap:.65rem;font-size:.9rem;line-height:1.35}
.pill i{width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;flex:none}
.pill b{display:block;font-weight:600}
.pill span{color:var(--body);font-size:.82rem}

/* hero card visual */
.shot{position:relative}
.shot-card{background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 12px 40px rgba(21,32,26,.10);padding:1.35rem;max-width:24rem;margin-inline:auto}
.shot-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:.85rem;border-bottom:1px solid var(--line);margin-bottom:.9rem}
.shot-head b{font-size:.95rem}
.shot-head em{font-style:normal;font-family:var(--la);font-size:.7rem;font-weight:600;
  background:var(--p-green);color:var(--green-dd);padding:.2rem .6rem;border-radius:999px}
.shot-row{display:grid;grid-template-columns:1fr auto;gap:.15rem .8rem;padding:.7rem 0;
  border-bottom:1px solid var(--line)}
.shot-row:last-of-type{border-bottom:0}
.shot-row b{font-family:var(--la);font-size:.95rem;font-weight:700}
.shot-row .apr{font-family:var(--la);font-weight:800;font-size:1.05rem;color:#B03A22;text-align:end}
.shot-row small{grid-column:1/-1;font-size:.72rem;color:var(--body)}
.shot-bar{grid-column:1/-1;height:3px;border-radius:2px;background:#EFEDE8;margin-top:.35rem;overflow:hidden}
.shot-bar i{display:block;height:100%;background:#B03A22}
.script-tag{position:absolute;top:-1.5rem;inset-inline-end:.5rem}
@media(max-width:62rem){.script-tag{display:none}}

/* feature band */
.band{background:var(--green-l2);border-radius:26px;padding:2.75rem 1.5rem;margin:1rem 0 3.5rem;text-align:center}
.band > p{color:var(--body);max-width:44rem;margin-inline:auto}
.feats{display:grid;gap:2rem;margin-top:2.25rem}
@media(min-width:44rem){.feats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68rem){.feats{grid-template-columns:repeat(4,1fr)}}
.feat i{width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;margin:0 auto .9rem}
.feat h3{margin-bottom:.35rem}
.feat p{font-size:.9rem;color:var(--body);margin:0}

/* rates */
.sec{padding:1rem 0 3rem}
.sec-head{margin-bottom:.5rem}
.sec-head p{color:var(--body);max-width:46rem}
.eyebrow{font-family:var(--la);font-size:.78rem;font-weight:700;color:var(--green-d);
  letter-spacing:.04em;margin-bottom:.55rem}

.alert{display:flex;gap:.9rem;background:#FFF8F5;border:1px solid #F2D2C6;
  border-radius:var(--r);padding:1rem 1.15rem;margin:1.25rem 0;font-size:.94rem}
.alert svg{flex:none;margin-top:.25rem}
.alert p{margin:0}
.alert strong{color:#B03A22}

.rates{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  box-shadow:var(--shadow);margin-top:1.5rem}
.rate{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;padding:1.25rem 1.35rem;
  border-bottom:1px solid var(--line);align-items:start}
.rate:last-child{border-bottom:0}
.rate:hover{background:var(--green-l2)}
.rname{font-family:var(--la);font-weight:700;font-size:1.08rem}
.rname em{display:block;font-style:normal;font-family:var(--si);font-weight:400;
  font-size:.79rem;color:var(--body);margin-top:.1rem}
.rapr{font-family:var(--la);font-weight:800;font-size:1.4rem;text-align:end;line-height:1.15;white-space:nowrap}
.rapr small{display:block;font-family:var(--si);font-weight:400;font-size:.68rem;color:var(--body)}
.hi{color:#B03A22}.mid{color:#9A6B10}
.rmeta{grid-column:1/-1;font-size:.87rem;color:var(--body)}
.rbar{grid-column:1/-1;height:4px;border-radius:2px;background:#EFEDE8;overflow:hidden;margin-top:.15rem}
.rbar i{display:block;height:100%}
.rbar i.hi{background:#B03A22}.rbar i.mid{background:#9A6B10}
.chk{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--green-d);font-weight:500}
.chk.pend{color:#9A6B10}
.chk::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ract{grid-column:1/-1;margin-top:.6rem}

.eg{background:var(--green-l);border-radius:var(--r);padding:1.35rem 1.5rem;margin:2rem 0}
.eg h3{margin:0 0 .7rem}
.eg dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.5rem;margin:0;font-size:.95rem}
.eg dt{color:var(--body)}
.eg dd{margin:0;font-family:var(--la);font-weight:700}

/* categories */
.cats{display:grid;gap:1.1rem;margin-top:1.75rem}
@media(min-width:44rem){.cats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68rem){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{border:1px solid var(--line);border-radius:var(--r);padding:1.35rem;background:#fff;
  text-decoration:none;color:inherit;display:block;transition:border-color .15s,box-shadow .15s}
.cat:hover{border-color:var(--green);box-shadow:var(--shadow)}
.cat i{width:2.75rem;height:2.75rem;border-radius:12px;display:grid;place-items:center;margin-bottom:.85rem}
.cat h3{margin-bottom:.25rem}
.cat p{font-size:.88rem;color:var(--body);margin:0}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--green-d),var(--green-dd));border-radius:26px;
  padding:3rem 1.75rem;color:#fff;position:relative;overflow:hidden;margin:1rem 0 0}
.cta-band .eyebrow{color:#A9E5BE}
.cta-band h2{color:#fff;max-width:22ch}
.cta-band p{color:#CFEEDA;max-width:44ch}
.cta-band .btn{background:#fff;color:var(--green-dd)}
.cta-band .btn:hover{background:#EAF7EE;color:var(--green-dd)}
.skyline{position:absolute;inset-inline-end:0;bottom:0;opacity:.3;pointer-events:none;
  width:min(30rem,55%);height:auto}
@media(max-width:52rem){.skyline{opacity:.16;width:80%}}

/* footer */
footer{background:#fff;border-top:1px solid var(--line);margin-top:4rem;padding:3rem 0 2.5rem}
.fcols{display:grid;gap:2rem}
@media(min-width:48rem){.fcols{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.fcols h4{font-family:var(--la);font-size:.95rem;margin:0 0 .75rem;font-weight:700}
.fcols ul{list-style:none;margin:0;padding:0;font-size:.9rem}
.fcols li{margin-bottom:.4rem}
.fcols a{color:var(--body);text-decoration:none}
.fcols a:hover{color:var(--green-d);text-decoration:underline}
.fabout{font-size:.88rem;color:var(--body);max-width:26rem}
.legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--body)}
.legal p{max-width:82ch;margin-bottom:.7em}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem;top:.5rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- page types added by generator ---------- */
.crumb{font-size:.85rem;color:var(--body);margin:1.15rem 0 0}
.crumb a{color:var(--body);text-decoration:none}
.crumb a:hover{color:var(--green-d);text-decoration:underline}

.pagehead{padding:1.5rem 0 .5rem}
.pagehead h1{max-width:22ch}
.pagehead .lede{font-size:1.06rem;color:var(--body);max-width:56ch;margin:0}

.prose{max-width:52rem}
.prose h2{margin-top:2.5rem}
.prose h3{margin-top:1.75rem}
.prose p,.prose li{max-width:64ch}
.prose ul,.prose ol{padding-inline-start:1.3rem}
.prose li{margin-bottom:.45rem}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--green-l);padding:.1em .4em;border-radius:4px}

.fineprint{font-size:.86rem;color:var(--body)}

.spec{margin:1.25rem 0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:12rem 1fr;gap:1rem;padding:.8rem 0;
  border-bottom:1px solid var(--line);font-size:.96rem}
.spec dt{color:var(--body);margin:0}
.spec dd{margin:0}
@media(max-width:34rem){.spec div{grid-template-columns:1fr;gap:.1rem}}

.pros-cons{display:grid;gap:1.5rem;margin:1.25rem 0}
@media(min-width:44rem){.pros-cons{grid-template-columns:1fr 1fr}}
.pros-cons h3{margin-top:0;font-size:1rem}
.pros-cons ul{margin:.4rem 0 0}

details{border-bottom:1px solid var(--line);padding:.9rem 0}
details summary{cursor:pointer;font-weight:600;list-style:none;position:relative;
  padding-inline-end:1.75rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;inset-inline-end:.3rem;top:.55rem;
  width:.5rem;height:.5rem;border-inline-end:2px solid var(--green-d);
  border-bottom:2px solid var(--green-d);transform:rotate(45deg)}
details[open] summary::after{transform:rotate(-135deg);top:.75rem}
details p{margin:.7rem 0 0;color:var(--body)}

.authorbox{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.25rem 0;margin:3rem 0 0;font-size:.93rem}
.authorbox strong{display:block}
.authorbox p{color:var(--body);margin:.3rem 0 0}

.lnk{display:inline-block;margin-inline-start:.9rem;font-size:.9rem;color:var(--green-d)}
.rname a{color:inherit;text-decoration:none}
.rname a:hover{text-decoration:underline}

.calc{border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;margin:1.5rem 0;
  background:#fff;box-shadow:var(--shadow);max-width:36rem}
.calc label{display:block;font-size:.9rem;color:var(--body);margin-bottom:.4rem}
.calc-field{margin-bottom:1.25rem}
.calc input[type=number]{width:100%;padding:.6rem .7rem;font:inherit;font-family:var(--la);
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.calc input[type=range]{width:100%;accent-color:var(--green)}
.calc-out{border-top:1px solid var(--line);margin-top:1.25rem;padding-top:1.25rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1rem}
.calc-out span{display:block;font-size:.82rem;color:var(--body)}
.calc-out strong{font-family:var(--la);font-size:1.35rem;font-weight:800;color:var(--green-dd)}

.alert-note{background:var(--green-l);border-inline-start:3px solid var(--green-d);
  border-radius:0 8px 8px 0;padding:.9rem 1.15rem;margin:1.25rem 0;font-size:.95rem}
.alert-note p{margin:0;max-width:66ch}

/* ---------- hero loan selector ---------- */
.picker{background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 12px 40px rgba(21,32,26,.10);padding:1.4rem;max-width:25rem;margin-inline:auto}
.picker-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem}
.picker-head b{font-size:.98rem;line-height:1.35}
.picker-head em{font-style:normal;font-family:var(--la);font-size:.68rem;font-weight:700;
  background:var(--p-green);color:var(--green-dd);padding:.22rem .6rem;border-radius:999px;
  white-space:nowrap}

.pick-field{margin-bottom:1.1rem}
.pick-field label{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  font-size:.86rem;color:var(--body);margin-bottom:.35rem}
.pick-field output{font-family:var(--la);font-weight:800;font-size:1.02rem;color:var(--ink)}
.pick-field input[type=range]{width:100%;accent-color:var(--green);margin:0}
.pick-scale{display:flex;justify-content:space-between;font-family:var(--la);
  font-size:.68rem;color:var(--body);margin-top:.15rem}

.pick-results{border-top:1px solid var(--line);padding-top:.35rem}
.pr{padding:.75rem 0;border-bottom:1px solid var(--rule-soft,#EAE7DF)}
.pr:last-child{border-bottom:0}
.pr-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.pr-name{font-family:var(--la);font-weight:700;font-size:.98rem;color:var(--ink);
  text-decoration:none}
.pr-name:hover{text-decoration:underline}
.pr-go{background:var(--green);color:#fff!important;text-decoration:none;font-size:.78rem;
  font-weight:600;padding:.35rem .8rem;border-radius:999px;white-space:nowrap;flex:none}
.pr-go:hover{background:var(--green-d)}
.pr-mid{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin-top:.25rem;flex-wrap:wrap}
.pr-apr{font-family:var(--la);font-weight:800;font-size:1.05rem}
.pr-apr.hi{color:#B03A22}
.pr-apr.mid{color:#9A6B10;font-size:.82rem;font-weight:600}
.pr-tot{font-size:.8rem;color:var(--body)}
.pr-tot b{font-family:var(--la);color:var(--ink);font-size:.92rem}
.pr-note{font-size:.72rem;color:var(--body);margin-top:.15rem;line-height:1.45}
.pr-none{font-size:.88rem;color:var(--body);padding:1rem 0;margin:0}
.pick-note{font-size:.72rem;color:var(--body);margin:.9rem 0 0;line-height:1.5;
  padding-top:.8rem;border-top:1px solid var(--line)}
@media(max-width:62rem){.picker{max-width:100%}}



/* ---------- content page layout ---------- */
.layout{display:block;margin-top:.5rem}
.layout .prose{max-width:44rem}
@media(min-width:68rem){
  .layout.has-toc{display:grid;grid-template-columns:minmax(0,1fr) 15rem;
    gap:4rem;align-items:start}
  .layout.has-toc .prose{max-width:none}
}

.toc{display:none}
@media(min-width:68rem){
  .toc{display:block;position:sticky;top:6rem;font-size:.88rem}
  .toc h2{font-family:var(--la);font-size:.75rem;font-weight:700;letter-spacing:.04em;
    color:var(--body);margin:0 0 .75rem;padding-bottom:.6rem;
    border-bottom:1px solid var(--line)}
  .toc ul{list-style:none;margin:0;padding:0}
  .toc li{margin-bottom:.1rem}
  .toc a{display:block;padding:.32rem 0 .32rem .75rem;color:var(--body);
    text-decoration:none;border-inline-start:2px solid var(--line);line-height:1.45}
  .toc a:hover{color:var(--green-d);border-inline-start-color:var(--green)}
}

/* headings get scroll offset so the sticky header does not cover them */
.prose h2{scroll-margin-top:6.5rem}

/* tighten the page header so it reads as a unit with the body */
.pagehead{padding:1.25rem 0 .25rem}
.pagehead h1{max-width:20ch;margin-bottom:.4rem}
.pagehead .lede{max-width:52ch}

/* first heading in the prose should not double the gap under the lede */
.prose > h2:first-child{margin-top:1.5rem}

/* ================= hero banner ================= */
/* The selector lives INSIDE the band so it is usable on landing, without
   scrolling, at every width. The artwork's subject sits on the right, so the
   card takes the empty left side rather than covering her. */

.hero-band{position:relative;background:#1C073E;padding:0 0 1.5rem}
.hero-pic{
  height:clamp(6.5rem,22vw,9rem);
  background:#2A0E5E url('/assets/img/hero-mobile.jpg') no-repeat 60% 18%;
  background-size:cover;
}
.hero-inner{position:relative;z-index:1;padding-top:1.15rem}
.hero-copy{color:#fff}
.hero-copy h1{color:#fff;font-size:clamp(1.45rem,5.4vw,2.1rem);margin-bottom:.3em;line-height:1.3}
.hero-copy h1 .accent{color:#5EEAA0}
.hero-copy .lede{color:#DDD3F7;font-size:.95rem;max-width:40ch;margin-bottom:1.1rem}

/* compact card so the sliders clear the fold on a phone */
.hero-inner .picker{margin:0;max-width:none;padding:1.15rem}
.hero-inner .picker-head{padding-bottom:.75rem;margin-bottom:.9rem}
.hero-inner .pick-field{margin-bottom:.9rem}
.hero-inner .pr{padding:.6rem 0}
.hero-inner .pr-note{margin-top:.1rem}
.hero-inner .pick-note{margin-top:.75rem;padding-top:.65rem}
.pr-more{display:block;padding:.7rem 0 .1rem;font-size:.85rem;font-weight:600;
  color:var(--green-d);text-decoration:none}
.pr-more:hover{text-decoration:underline}

@media(min-width:64rem){
  /* The band is as tall as the card, roughly 2:1 or taller, while the artwork
     is 2.98:1. Using it as a full-band `cover` background zooms the subject to
     an absurd scale, so it becomes a right-hand panel with its own box and a
     soft fade into the purple. */
  /* The artwork keeps close to its own 1.68:1 shape and is centred vertically,
     rather than being stretched to fill a portrait-shaped full-height panel —
     that is what was blowing the subject up to a face close-up. Purple fills
     above and below, and the photo's own background is the same purple, so the
     seam disappears under a soft fade. */
  .hero-pic{
    display:block;position:absolute;right:0;top:50%;
    transform:translateY(-50%);
    width:56%;height:min(100%,31rem);
    background:url('/assets/img/hero-side.jpg') no-repeat 54% center;
    background-size:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 15%,#000 42%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 15%,#000 42%);
  }
  .hero-pic::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,#24094D 0%,rgba(36,9,77,0) 14%,rgba(28,7,62,0) 84%,#1C073E 100%);
  }
  .hero-band{
    background:
      radial-gradient(70% 120% at 12% 18%, #3A1580 0%, rgba(58,21,128,0) 60%),
      linear-gradient(135deg,#2A0E5E 0%,#1C073E 62%,#24094D 100%);
    padding:0;overflow:hidden;
  }
  .hero-inner{
    display:grid;grid-template-columns:25.5rem minmax(0,1fr);
    gap:0 3rem;align-content:center;
    padding:2.5rem 1.25rem 3rem;
  }
  .hero-copy{grid-column:1;max-width:25.5rem}
  .hero-copy h1{max-width:14ch}
  .hero-inner .picker{grid-column:1;box-shadow:0 18px 50px rgba(14,3,36,.45)}
}
@media(min-width:80rem){
  .hero-inner{grid-template-columns:27rem minmax(0,1fr)}
  .hero-copy{max-width:27rem}
  .hero-inner .picker{padding:1.4rem}
  .hero-pic{width:58%}
}

/* trust pills now sit below the band */
.hero-under{padding:1.75rem 0 .5rem}
.hero-under .pills{display:grid;gap:1.1rem}
@media(min-width:44rem){
  .hero-under .pills{grid-template-columns:repeat(3,1fr);gap:1.5rem}
}

/* ---------- content page layout ---------- */
.layout{display:block;margin-top:.5rem}
.layout .prose{max-width:44rem}
@media(min-width:68rem){
  .layout.has-toc{display:grid;grid-template-columns:minmax(0,1fr) 15rem;
    gap:4rem;align-items:start}
  .layout.has-toc .prose{max-width:none}
}

.toc{display:none}
@media(min-width:68rem){
  .toc{display:block;position:sticky;top:6rem;font-size:.88rem}
  .toc h2{font-family:var(--la);font-size:.75rem;font-weight:700;letter-spacing:.04em;
    color:var(--body);margin:0 0 .75rem;padding-bottom:.6rem;
    border-bottom:1px solid var(--line)}
  .toc ul{list-style:none;margin:0;padding:0}
  .toc li{margin-bottom:.1rem}
  .toc a{display:block;padding:.32rem 0 .32rem .75rem;color:var(--body);
    text-decoration:none;border-inline-start:2px solid var(--line);line-height:1.45}
  .toc a:hover{color:var(--green-d);border-inline-start-color:var(--green)}
}

/* headings get scroll offset so the sticky header does not cover them */
.prose h2{scroll-margin-top:6.5rem}

/* tighten the page header so it reads as a unit with the body */
.pagehead{padding:1.25rem 0 .25rem}
.pagehead h1{max-width:20ch;margin-bottom:.4rem}
.pagehead .lede{max-width:52ch}

/* first heading in the prose should not double the gap under the lede */
.prose > h2:first-child{margin-top:1.5rem}

/* ================= hero banner ================= */
/* The selector lives INSIDE the band so it is usable on landing, without
   scrolling, at every width. The artwork's subject sits on the right, so the
   card takes the empty left side rather than covering her. */

.hero-band{position:relative;background:#1C073E;padding:0 0 1.5rem}
.hero-pic{
  height:clamp(6.5rem,22vw,9rem);
  background:#2A0E5E url('/assets/img/hero-mobile.jpg') no-repeat 60% 18%;
  background-size:cover;
}
.hero-inner{position:relative;z-index:1;padding-top:1.15rem}
.hero-copy{color:#fff}
.hero-copy h1{color:#fff;font-size:clamp(1.45rem,5.4vw,2.1rem);margin-bottom:.3em;line-height:1.3}
.hero-copy h1 .accent{color:#5EEAA0}
.hero-copy .lede{color:#DDD3F7;font-size:.95rem;max-width:40ch;margin-bottom:1.1rem}

/* compact card so the sliders clear the fold on a phone */
.hero-inner .picker{margin:0;max-width:none;padding:1.15rem}
.hero-inner .picker-head{padding-bottom:.75rem;margin-bottom:.9rem}
.hero-inner .pick-field{margin-bottom:.9rem}
.hero-inner .pr{padding:.6rem 0}
.hero-inner .pr-note{margin-top:.1rem}
.hero-inner .pick-note{margin-top:.75rem;padding-top:.65rem}
.pr-more{display:block;padding:.7rem 0 .1rem;font-size:.85rem;font-weight:600;
  color:var(--green-d);text-decoration:none}
.pr-more:hover{text-decoration:underline}

@media(min-width:64rem){
  /* The band is as tall as the card, roughly 2:1 or taller, while the artwork
     is 2.98:1. Using it as a full-band `cover` background zooms the subject to
     an absurd scale, so it becomes a right-hand panel with its own box and a
     soft fade into the purple. */
  /* The artwork keeps close to its own 1.68:1 shape and is centred vertically,
     rather than being stretched to fill a portrait-shaped full-height panel —
     that is what was blowing the subject up to a face close-up. Purple fills
     above and below, and the photo's own background is the same purple, so the
     seam disappears under a soft fade. */
  .hero-pic{
    display:block;position:absolute;right:0;top:50%;
    transform:translateY(-50%);
    width:56%;height:min(100%,31rem);
    background:url('/assets/img/hero-side.jpg') no-repeat 54% center;
    background-size:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 15%,#000 42%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 15%,#000 42%);
  }
  .hero-pic::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,#24094D 0%,rgba(36,9,77,0) 14%,rgba(28,7,62,0) 84%,#1C073E 100%);
  }
  .hero-band{
    background:
      radial-gradient(70% 120% at 12% 18%, #3A1580 0%, rgba(58,21,128,0) 60%),
      linear-gradient(135deg,#2A0E5E 0%,#1C073E 62%,#24094D 100%);
    padding:0;overflow:hidden;
  }
  .hero-inner{
    display:grid;grid-template-columns:25.5rem minmax(0,1fr);
    gap:0 3rem;align-content:center;
    padding:2.5rem 1.25rem 3rem;
  }
  .hero-copy{grid-column:1;max-width:25.5rem}
  .hero-copy h1{max-width:14ch}
  .hero-inner .picker{grid-column:1;box-shadow:0 18px 50px rgba(14,3,36,.45)}
}
@media(min-width:80rem){
  .hero-inner{grid-template-columns:27rem minmax(0,1fr)}
  .hero-copy{max-width:27rem}
  .hero-inner .picker{padding:1.4rem}
  .hero-pic{width:58%}
}

/* trust pills now sit below the band */
.hero-under{padding:1.75rem 0 .5rem}
.hero-under .pills{display:grid;gap:1.1rem}
@media(min-width:44rem){
  .hero-under .pills{grid-template-columns:repeat(3,1fr);gap:1.5rem}
}

/* selector panel, lifted to overlap the banner edge */
.hero-panel{position:relative;z-index:2;margin-top:1.5rem;display:grid;gap:1.5rem}
@media(min-width:48rem){.hero-panel{margin-top:-3.5rem}}
@media(min-width:68rem){
  .hero-panel{grid-template-columns:25rem minmax(0,1fr);gap:3rem;align-items:start;
    margin-top:-4.5rem}
}
.hero-panel .picker{max-width:none;margin:0}
.hero-aside{display:flex;align-items:center}
.hero-aside .pills{display:grid;gap:1.25rem}
@media(min-width:48rem) and (max-width:68rem){
  .hero-aside .pills{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
}
@media(min-width:68rem){.hero-aside{padding-top:5.5rem}}