/* FinnishLine design system — Brand Guidelines v1.1 */
:root{
  --deep:#4F1964; --vivid:#7C2FB2; --yellow:#FFCF77; --plum:#1E0627;
  --lav:#E6AFFC; --white:#fff;
  --paper:#FBF4FE; --paper-2:#F4E7FB;
  --ink:#2A0C36; --ink-soft:#5B4166;
  --tape:rgba(255,207,119,.85);
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --shadow:0 18px 40px -22px rgba(79,25,100,.55);
  --shadow-lift:0 30px 60px -28px rgba(79,25,100,.6);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Montserrat,system-ui,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.baloo{font-family:'Baloo 2',Montserrat,sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.4rem,5.2vw,4.3rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:700;line-height:1.2}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.narrow{width:min(100% - 2.5rem,780px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--vivid);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:.8rem 1.2rem;border-radius:0 0 14px 0;z-index:99}
.skip:focus{left:0}
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(79,25,100,.05) 1px,transparent 1px);background-size:4px 4px}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--yellow);z-index:55;border-radius:0 3px 3px 0}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto;z-index:50}
.navbar{display:flex;align-items:center;gap:1.2rem;margin-top:.9rem;padding:.55rem .6rem .55rem 1.1rem;
  background:rgba(251,244,254,.8);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(124,47,178,.16);border-radius:999px;box-shadow:0 10px 30px -18px rgba(79,25,100,.5)}
.navbar .home{flex:none;line-height:0}
.navbar .mark{height:26px;width:auto;display:block}
nav{display:flex;gap:1.4rem;margin-left:auto;font-size:.88rem;font-weight:600}
nav a{text-decoration:none;color:var(--ink-soft);position:relative;padding:.2rem 0;white-space:nowrap}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;border-radius:3px;
  background:var(--yellow);transition:right .28s cubic-bezier(.2,.9,.3,1.4)}
nav a:hover::after,nav a:focus-visible::after,nav a[aria-current]::after{right:0}
nav a[aria-current]{color:var(--deep)}
.wa{display:inline-flex;align-items:center;gap:.5rem;background:var(--vivid);color:#fff;text-decoration:none;
  font-weight:700;font-size:.86rem;padding:.62rem 1.1rem;border-radius:999px;flex:none;
  box-shadow:0 8px 20px -10px rgba(124,47,178,.9);transition:transform .25s cubic-bezier(.2,.9,.3,1.5),box-shadow .25s}
.wa:hover{transform:translateY(-2px) scale(1.03)}
.wa svg{width:17px;height:17px;fill:currentColor;flex:none}
.burger{display:none;margin-left:auto;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{display:block;width:22px;height:2.5px;background:var(--deep);border-radius:2px;margin:4px 0}

/* ---------- sections ---------- */
section{position:relative}
section[id]{scroll-margin-top:110px}
.sec{padding:clamp(4rem,8vw,7rem) 0}
.sec-tight{padding:clamp(2.5rem,5vw,4rem) 0}
.sec-lav{background:var(--paper-2)}
.sec-deep{background:var(--deep);color:#fff}
.sec-deep h2,.sec-deep h3{color:#fff}
.sec-deep p{color:rgba(255,255,255,.84)}
.sec-head{max-width:58ch;margin-bottom:clamp(2.2rem,4.5vw,3.2rem)}
.sec-head p{color:var(--ink-soft);margin-top:1rem;font-size:1.03rem}
.kicker{font-family:'Baloo 2';font-weight:700;color:var(--vivid);font-size:1rem;margin-bottom:.35rem}
.sec-deep .kicker{color:var(--yellow)}

/* ---------- page hero ---------- */
.phero{padding:clamp(8.5rem,15vh,10.5rem) 0 clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:-40% -10% auto;height:150%;z-index:0;
  background:radial-gradient(42% 40% at 14% 24%,rgba(230,175,252,.7),transparent 62%),
             radial-gradient(34% 32% at 86% 6%,rgba(255,207,119,.5),transparent 60%)}
.phero .wrap{position:relative;z-index:2}
.phero p.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--ink-soft);max-width:52ch;margin-top:1.3rem}
.crumbs{font-size:.82rem;color:var(--ink-soft);margin-bottom:1rem;font-weight:600}
.crumbs a{text-decoration:none;color:var(--vivid)}
.crumbs span{opacity:.5;margin:0 .4rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:700;font-size:.94rem;
  padding:.88rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.5),box-shadow .25s,background .25s}
.btn-p{background:var(--deep);color:#fff;box-shadow:0 14px 30px -16px rgba(79,25,100,1)}
.btn-p:hover{transform:translateY(-3px)}
.btn-s{background:#fff;color:var(--deep);border-color:rgba(124,47,178,.25)}
.btn-s:hover{transform:translateY(-3px);background:var(--lav)}
.btn-y{background:var(--yellow);color:var(--plum);box-shadow:0 16px 34px -16px rgba(0,0,0,.5)}
.btn-y:hover{transform:translateY(-3px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:1.6rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid.quad{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.grid.quad{grid-template-columns:1fr}}
.card{position:relative;background:#fff;border-radius:var(--r-lg);padding:1.7rem 1.6rem 1.5rem;
  box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.9,.3,1.25),box-shadow .35s}
.card:hover{box-shadow:var(--shadow-lift)}
.card.taped::before{content:"";position:absolute;top:-13px;left:26px;width:84px;height:26px;background:var(--tape);
  border-radius:2px;rotate:-4deg;box-shadow:0 4px 9px -6px rgba(79,25,100,.6)}
.card .uni{font-size:.78rem;font-weight:700;color:var(--vivid)}
.card h3{color:var(--deep);margin:.35rem 0 .7rem}
.card p{font-size:.93rem;color:var(--ink-soft)}
.card a.more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-weight:700;font-size:.88rem;
  color:var(--vivid);text-decoration:none}
.card a.more:hover{text-decoration:underline}
.facts{list-style:none;margin:1rem 0 0;padding:0;font-size:.9rem}
.facts li{display:flex;gap:.6rem;padding:.42rem 0;border-top:1px dashed rgba(124,47,178,.2);color:var(--ink-soft)}
.facts li b{color:var(--ink);font-weight:600;min-width:104px;flex:none}
.badge{display:inline-block;font-size:.74rem;font-weight:700;padding:.28rem .7rem;border-radius:999px;
  background:var(--lav);color:var(--deep);margin-top:1rem}
.badge.warn{background:var(--yellow);color:var(--plum)}

/* ---------- prose ---------- */
.prose{font-size:1.03rem}
.prose h2{margin:2.6rem 0 .9rem;color:var(--deep)}
.prose h3{margin:2rem 0 .6rem;color:var(--deep)}
.prose p{max-width:70ch;color:var(--ink)}
.prose ul,.prose ol{max-width:68ch;padding-left:1.2rem;color:var(--ink)}
.prose li{margin:.4rem 0}
.prose a{color:var(--vivid);font-weight:600}
.prose blockquote{margin:1.8rem 0;padding:1.2rem 1.5rem;background:var(--paper-2);border-radius:var(--r-md);
  border-left:5px solid var(--yellow);font-size:.98rem}
.prose table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.93rem;background:#fff;
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow)}
.prose th{background:var(--deep);color:#fff;text-align:left;padding:.8rem 1rem;font-weight:700;font-size:.85rem}
.prose td{padding:.75rem 1rem;border-top:1px solid rgba(124,47,178,.14)}
.callout{background:#fff;border-radius:var(--r-md);padding:1.3rem 1.5rem;box-shadow:var(--shadow);margin:1.8rem 0}
.callout h4{color:var(--deep);margin-bottom:.4rem}
.callout p{margin:0;font-size:.94rem;color:var(--ink-soft)}
.callout.flag{border-left:6px solid var(--yellow)}

/* ---------- accordion ---------- */
.qa{max-width:76ch}
.q{border-bottom:1px solid rgba(124,47,178,.18)}
.q .qbtn{display:block;width:100%;background:none;border:0;padding:1.2rem 2.5rem 1.2rem 0;text-align:left;cursor:pointer;
  font-family:'Baloo 2';font-weight:700;font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--deep);position:relative}
.q .qbtn::after{content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2.6px solid var(--vivid);border-bottom:2.6px solid var(--vivid);rotate:45deg;transition:rotate .3s,margin-top .3s}
.q[data-open] .qbtn::after{rotate:-135deg;margin-top:-2px}
.q .a{overflow:hidden;height:0;transition:height .38s cubic-bezier(.2,.9,.3,1)}
.q .a>div{padding:0 0 1.4rem;color:var(--ink-soft);font-size:.97rem;max-width:64ch}
.q .a b{color:var(--deep)}

/* ---------- forms ---------- */
.form{position:relative;background:#fff;border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow-lift)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.4rem;color:var(--ink)}
.field .hint{font-weight:400;color:var(--ink-soft);font-size:.8rem}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:.96rem;color:var(--ink);
  padding:.8rem 1rem;border:2px solid rgba(124,47,178,.2);border-radius:var(--r-sm);background:var(--paper);
  transition:border-color .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--vivid);background:#fff;outline:none}
.field textarea{min-height:120px;resize:vertical}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#C0392B;background:#fff8f7}
.err{color:#C0392B;font-size:.8rem;font-weight:600;margin-top:.3rem;display:none}
.field.bad .err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.steps{display:flex;gap:.5rem;margin-bottom:1.8rem;flex-wrap:wrap}
.steps b{flex:1;min-width:60px;height:6px;border-radius:999px;background:var(--paper-2);transition:background .4s}
.steps b.on{background:var(--vivid)}
.steps b.done{background:var(--yellow)}
.step{display:none}
.step.on{display:block;animation:stepin .4s cubic-bezier(.2,.9,.3,1)}
@keyframes stepin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.step-head{font-family:'Baloo 2';font-weight:700;font-size:1.3rem;color:var(--deep);margin-bottom:.3rem}
.step-sub{font-size:.88rem;color:var(--ink-soft);margin-bottom:1.5rem}
.formmsg{margin-top:1rem;padding:1rem 1.2rem;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;display:none}
.formmsg.ok{display:block;background:var(--lav);color:var(--deep)}
.formmsg.no{display:block;background:#fdecea;color:#943126}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative;display:inline-flex;align-items:center;gap:.45rem;background:var(--paper);border:2px solid rgba(124,47,178,.2);
  border-radius:999px;padding:.5rem 1rem;font-size:.86rem;font-weight:600;cursor:pointer;transition:.2s}
.chip:hover{border-color:var(--vivid)}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip.on{background:var(--vivid);border-color:var(--vivid);color:#fff}

/* ---------- filters ---------- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.fbtn{background:#fff;border:2px solid rgba(124,47,178,.2);border-radius:999px;padding:.5rem 1.1rem;
  font-family:inherit;font-size:.86rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.2s}
.fbtn:hover{border-color:var(--vivid)}
.fbtn[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.empty{padding:3rem 1rem;text-align:center;color:var(--ink-soft);font-size:.95rem}

/* ---------- sticky notes / stats ---------- */
.notes{display:flex;flex-direction:column;gap:1.1rem}
.pnote{background:var(--yellow);border-radius:var(--r-sm);padding:1.15rem 1.3rem;box-shadow:0 12px 26px -18px rgba(79,25,100,.9)}
.pnote:nth-child(1){rotate:-1.2deg}
.pnote:nth-child(2){background:var(--lav);rotate:.8deg}
.pnote:nth-child(3){background:#fff;rotate:.5deg}
.pnote .big{font-family:'Baloo 2';font-weight:800;font-size:1.7rem;color:var(--plum);line-height:1;display:block}
.pnote p{margin:.35rem 0 0;font-size:.86rem;color:#40213F;font-weight:500}

/* ---------- cost ranges ---------- */
.chart{background:#fff;border-radius:var(--r-lg);padding:2rem 1.9rem 1.4rem;box-shadow:var(--shadow)}
.ranges{display:flex;flex-direction:column;gap:1.5rem;margin:1.6rem 0 1.2rem}
.rg-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.5rem}
.rg-name{font-weight:600;font-size:.92rem}
.rg-num{font-family:'Baloo 2';font-weight:800;color:var(--deep);font-size:1.02rem;white-space:nowrap}
.rg-track{position:relative;height:16px;border-radius:999px;background:var(--paper-2)}
.rg-fill{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--vivid),var(--deep));
  left:var(--a);width:0;transition:width 1.1s cubic-bezier(.2,.9,.3,1) var(--d,0s)}
.rg.mark .rg-fill{background:var(--yellow)}
.rg-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-soft);margin-top:.9rem;
  border-top:1px dashed rgba(124,47,178,.2);padding-top:.6rem}
.chart-note{font-size:.78rem;color:var(--ink-soft);border-top:1px dashed rgba(124,47,178,.2);padding-top:.9rem;margin:1.1rem 0 0}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.pill{font-size:.78rem;font-weight:600;background:var(--paper);border:1.5px solid rgba(124,47,178,.18);
  padding:.4rem .8rem;border-radius:999px;color:var(--ink-soft)}
.pill b{color:var(--deep)}

/* ---------- checklist ---------- */
.check{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;
  background:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,4vw,2.8rem);box-shadow:var(--shadow-lift)}
.ring{position:relative;width:150px;height:150px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:13;stroke-linecap:round}
.ring .t{stroke:var(--paper-2)}
.ring .v{stroke:var(--vivid);transition:stroke-dashoffset .55s cubic-bezier(.2,.9,.3,1.2),stroke .4s}
.ring.done .v{stroke:var(--yellow)}
.ring .pct{position:absolute;inset:0;display:grid;place-items:center;font-family:'Baloo 2';font-weight:800;font-size:1.9rem;color:var(--deep)}
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:.6rem}
.item{position:relative;display:flex;align-items:center;gap:.75rem;background:var(--paper);border:2px solid transparent;
  border-radius:var(--r-sm);padding:.75rem .9rem;cursor:pointer;font-size:.9rem;font-weight:500;transition:.25s}
.item:hover{transform:translateY(-2px);border-color:rgba(124,47,178,.25)}
.item input{position:absolute;opacity:0;pointer-events:none}
.box{width:22px;height:22px;flex:none;border-radius:7px;border:2.4px solid rgba(124,47,178,.4);display:grid;place-items:center;
  transition:background .25s,border-color .25s,transform .25s cubic-bezier(.2,.9,.3,1.8)}
.box svg{width:12px;height:12px;stroke:#fff;stroke-width:3.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .3s .05s}
.item.on{background:var(--lav);font-weight:600}
.item.on .box{background:var(--vivid);border-color:var(--vivid);transform:scale(1.1)}
.item.on .box svg{stroke-dashoffset:0}
.check-msg{margin:1.1rem 0 0;font-size:.9rem;color:var(--ink-soft);min-height:1.6em}

/* ---------- ticker ---------- */
.ticker{background:var(--deep);color:#fff;padding:.95rem 0;overflow:hidden}
.ticker-track{display:flex;gap:2.6rem;width:max-content;animation:slide 34s linear infinite;
  font-weight:600;font-size:.92rem;white-space:nowrap}
.ticker-track span{display:inline-flex;align-items:center;gap:2.6rem;color:rgba(255,255,255,.92)}
.ticker-track span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- final CTA + footer ---------- */
.final{background:linear-gradient(135deg,var(--deep),var(--vivid));color:#fff;text-align:center;
  padding:clamp(4rem,8vw,6.5rem) 0;position:relative;overflow:hidden}
.final::after{content:"";position:absolute;width:520px;height:520px;right:-140px;bottom:-220px;
  background:radial-gradient(circle,rgba(255,207,119,.35),transparent 62%)}
.final .wrap{position:relative;z-index:2}
.final h2{max-width:17ch;margin-inline:auto}
.final p{color:rgba(255,255,255,.86);max-width:46ch;margin:1.2rem auto 2.1rem}
.final .fine{font-size:.79rem;color:rgba(255,255,255,.62);margin:1.8rem auto 0;max-width:54ch}
.float-arrow{position:absolute;width:150px;opacity:.13;left:5%;bottom:14%;rotate:-8deg}
footer{background:var(--plum);color:rgba(255,255,255,.72);padding:3.5rem 0 6rem;font-size:.88rem}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
footer h4{font-family:'Baloo 2';font-weight:700;color:#fff;font-size:1rem;margin:0 0 .8rem}
footer a{text-decoration:none;color:rgba(255,255,255,.72);display:block;padding:.22rem 0;transition:color .2s}
footer a:hover{color:var(--yellow)}
.f-mark{height:26px;width:auto;margin-bottom:1rem}
.f-bot{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.5)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.9,.3,1),transform .7s cubic-bezier(.2,.9,.3,1)}
.pop{opacity:0;transform:scale(.94) translateY(14px)}
.pop.in{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.9,.3,1.4),transform .55s cubic-bezier(.2,.9,.3,1.4)}

@media(max-width:1040px){nav{gap:1rem;font-size:.83rem}}
@media(max-width:940px){
  .f-grid{grid-template-columns:1fr 1fr}
  .check{grid-template-columns:1fr;justify-items:center;text-align:center}
  .items{text-align:left}
  .two{grid-template-columns:1fr}
}
@media(max-width:820px){
  nav{display:none}
  .burger{display:block}
  nav.open{display:flex;position:absolute;top:76px;left:1.25rem;right:1.25rem;flex-direction:column;gap:.4rem;
    background:#fff;padding:1.1rem 1.4rem;border-radius:20px;box-shadow:0 22px 44px -22px rgba(79,25,100,.6);margin:0}
  .wa span{display:none}
  .wa{padding:.62rem .8rem}
  .f-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.pop{opacity:1;transform:none}
}

/* ================= home: 3D hero ================= */
.hero{position:relative;padding:clamp(8.5rem,16vh,11rem) 0 clamp(3rem,7vw,5.5rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;z-index:0;
  background:radial-gradient(46% 40% at 12% 18%,rgba(230,175,252,.75),transparent 62%),
             radial-gradient(38% 34% at 88% 8%,rgba(255,207,119,.6),transparent 60%),
             radial-gradient(50% 44% at 72% 78%,rgba(124,47,178,.18),transparent 66%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.eyebrow{display:inline-block;font-weight:700;font-size:.82rem;line-height:1.5;color:var(--deep);
  background:#fff;border:1.5px solid rgba(124,47,178,.2);padding:.4rem .95rem;border-radius:999px;
  margin-bottom:1.3rem;box-shadow:0 6px 16px -12px rgba(79,25,100,.8)}
.eyebrow b{color:var(--vivid)}
h1 .swap{display:inline-block;position:relative;color:var(--vivid)}
h1 .swap::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.07em;height:.22em;
  background:var(--yellow);border-radius:.11em;z-index:-1;transform:scaleX(0);transform-origin:left;
  animation:hl .9s .7s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes hl{to{transform:scaleX(1)}}
.lede{font-size:clamp(1rem,1.3vw,1.18rem);color:var(--ink-soft);max-width:36ch;margin-top:1.3rem}

/* 3D stage */
.stage{position:relative;aspect-ratio:1/.92;min-height:340px;border-radius:var(--r-lg);overflow:hidden;
  cursor:grab;touch-action:pan-y}
.stage:active{cursor:grabbing}
.stage canvas{display:block;width:100%;height:100%}
.stage .hint{position:absolute;left:50%;bottom:14px;translate:-50% 0;font-size:.74rem;font-weight:600;
  color:var(--deep);background:rgba(255,255,255,.82);backdrop-filter:blur(8px);padding:.4rem .9rem;
  border-radius:999px;pointer-events:none;opacity:0;transition:opacity .5s;white-space:nowrap}
.stage.ready .hint{opacity:1}
.stage .fallback{position:absolute;inset:0;display:grid;place-items:center;padding:2rem}
.stage .fallback img{width:min(58%,230px);filter:drop-shadow(0 20px 34px rgba(79,25,100,.34))}

/* floating stickers */
.stickers{position:absolute;inset:0;z-index:1;pointer-events:none}
.sticker{position:absolute;width:var(--s,68px);filter:drop-shadow(0 12px 22px rgba(79,25,100,.34))}
.s1{top:15%;left:3%;--s:70px}
.s2{top:64%;left:1.5%;--s:50px}
.spark{position:absolute;width:var(--s,14px);height:var(--s,14px);opacity:.9}
.spark::before{content:"";position:absolute;inset:0;background:var(--c,var(--yellow));
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.p1{top:24%;left:33%;--s:18px}
.p2{bottom:18%;left:13%;--s:12px;--c:var(--vivid)}

/* ================= route rail ================= */
.route{position:relative;display:grid;grid-template-columns:120px 1fr;gap:2.5rem}
.rail{position:relative}
.rail svg{position:sticky;top:120px;width:100%;height:min(58vh,430px);overflow:visible}
.rail path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rail .bg{stroke:rgba(124,47,178,.16);stroke-width:9}
.rail .fg{stroke:var(--vivid);stroke-width:9}
.rail .head{opacity:0;transition:opacity .4s}
.stops{display:flex;flex-direction:column;gap:1rem}
.stop{background:#fff;border-radius:var(--r-md);padding:1.4rem 1.6rem;box-shadow:var(--shadow);
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;border-left:6px solid var(--lav);
  transition:border-color .4s,transform .4s cubic-bezier(.2,.9,.3,1.3)}
.stop.on{border-left-color:var(--yellow);transform:translateX(6px)}
.stop .n{width:38px;height:38px;border-radius:13px;background:var(--lav);color:var(--deep);display:grid;
  place-items:center;font-family:'Baloo 2';font-weight:800;font-size:1.05rem;transition:.4s}
.stop.on .n{background:var(--deep);color:var(--yellow)}
.stop h3{color:var(--deep);font-size:1.15rem}
.stop p{margin:.3rem 0 0;font-size:.94rem;color:var(--ink-soft)}
.money{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start}

@media(max-width:940px){
  .hero-grid,.money{grid-template-columns:1fr}
  .route{grid-template-columns:64px 1fr;gap:1.2rem}
  .stage{order:-1;min-height:300px}
}
@media(max-width:700px){.s1,.s2{display:none}}

/* ================= colour accents ================= */
.card{--accent:var(--lav);--accent-soft:rgba(230,175,252,.34)}
.card.c1{--accent:var(--yellow);--accent-soft:rgba(255,207,119,.4)}
.card.c2{--accent:var(--lav);--accent-soft:rgba(230,175,252,.4)}
.card.c3{--accent:var(--vivid);--accent-soft:rgba(124,47,178,.22)}
.card.acc{overflow:hidden}
.card.acc::after{content:"";position:absolute;top:-70px;right:-70px;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft) 0%,transparent 68%);z-index:0;pointer-events:none}
.card.acc>*{position:relative;z-index:1}
.card.acc .uni{color:var(--deep)}
.card.bar{border-top:5px solid var(--accent)}

.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(38px);opacity:.55}
.blob.b1{width:340px;height:340px;background:var(--lav);top:-90px;left:-70px}
.blob.b2{width:280px;height:280px;background:var(--yellow);bottom:-110px;right:6%;opacity:.42}
.blob.b3{width:220px;height:220px;background:rgba(124,47,178,.35);top:38%;right:-60px}
.sec>.wrap{position:relative;z-index:1}
.sec-sun{background:linear-gradient(170deg,#FFF6E6 0%,var(--paper) 62%)}
.sec-dawn{background:linear-gradient(160deg,var(--paper-2) 0%,#FFF3E2 100%)}

/* ================= hero deck (replaces the 3D stage) ================= */
.deck{position:relative;aspect-ratio:1/.94;min-height:390px}
.deck svg.zig{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.deck svg.zig path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.deck svg.zig{opacity:.5}
.deck svg.zig .z-bg{stroke:rgba(124,47,178,.1);stroke-width:14}
.deck svg.zig .z-fg{stroke:url(#zgrad);stroke-width:14;stroke-dasharray:var(--zl,600);stroke-dashoffset:var(--zl,600);
  animation:zdraw 1.5s .35s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes zdraw{to{stroke-dashoffset:0}}
.deck svg.zig .z-head{opacity:0;animation:zpop .5s 1.7s cubic-bezier(.2,.9,.3,1.7) forwards}
@keyframes zpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}

.dcard{position:absolute;width:60%;max-width:270px;background:#fff;border-radius:22px;padding:1.05rem 1.15rem;
  box-shadow:0 26px 50px -26px rgba(79,25,100,.62);transform-origin:50% 100%;
  opacity:0;animation:deal .8s cubic-bezier(.2,.9,.3,1.25) forwards}
@keyframes deal{from{opacity:0;transform:translateY(46px) scale(.9) rotate(0)}to{opacity:1}}
.dcard .dhead{display:flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:.55rem}
.dcard .dot{width:9px;height:9px;border-radius:50%;flex:none}
.dcard .dtitle{font-family:'Baloo 2';font-weight:800;font-size:1.02rem;line-height:1.15;color:var(--deep)}
.dcard .dsub{font-size:.72rem;color:var(--ink-soft);margin-top:.2rem}
.dcard .drow{display:flex;justify-content:space-between;align-items:flex-end;margin-top:.85rem;
  padding-top:.6rem;border-top:1px dashed rgba(124,47,178,.24)}
.dcard .dbig{font-family:'Baloo 2';font-weight:800;font-size:1.35rem;line-height:1;color:var(--plum)}
.dcard .dtag{font-size:.64rem;font-weight:700;padding:.2rem .55rem;border-radius:999px}

.d1{left:0;top:6%;--r:-9deg;animation-delay:.15s}
.d2{right:0;top:30%;--r:5deg;animation-delay:.35s}
.d3{left:8%;bottom:4%;--r:-3deg;animation-delay:.55s}
.d1,.d2,.d3{transform:rotate(var(--r))}
.dcard.offer{background:linear-gradient(160deg,#fff 60%,#F7E9FF)}
.dcard.permit{background:linear-gradient(160deg,#FFF4DF 0%,#fff 70%)}
.dcard.pass{background:linear-gradient(155deg,var(--deep),#3A1049);color:#fff}
.dcard.pass .dtitle{color:#fff}
.dcard.pass .dsub{color:rgba(255,255,255,.66)}
.dcard.pass .dbig{color:var(--yellow)}
.dcard.pass .drow{border-top-color:rgba(255,255,255,.24)}
.dcard.pass::after{content:"";position:absolute;left:0;right:0;top:52%;border-top:2px dashed rgba(255,255,255,.28)}
.deck .seal{position:absolute;right:4%;bottom:5%;width:76px;height:76px;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center;text-align:center;font-family:'Baloo 2';font-weight:800;font-size:.62rem;
  line-height:1.1;color:var(--plum);box-shadow:0 16px 30px -16px rgba(79,25,100,.8);rotate:-12deg;
  opacity:0;animation:zpop .5s 1.15s cubic-bezier(.2,.9,.3,1.7) forwards}

/* ================= blog / stories ================= */
.blog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.rss{display:inline-flex;align-items:center;gap:.5rem;font-size:.83rem;font-weight:700;color:var(--vivid);
  text-decoration:none;background:#fff;border:2px solid rgba(124,47,178,.2);padding:.5rem 1rem;border-radius:999px}
.rss:hover{background:var(--lav);border-color:var(--vivid)}
.tagcloud{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0 0}
.tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;background:#fff;
  border:2px solid rgba(124,47,178,.16);border-radius:999px;padding:.35rem .8rem;color:var(--ink-soft);
  cursor:pointer;font-family:inherit;transition:.2s}
.tag:hover{border-color:var(--vivid);color:var(--deep)}
.tag i{font-style:normal;font-size:.68rem;background:var(--paper-2);color:var(--deep);border-radius:999px;
  padding:.05rem .4rem;font-weight:800}
.tag[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.tag[aria-pressed=true] i{background:var(--yellow);color:var(--plum)}
.count{font-size:.82rem;font-weight:700;color:var(--ink-soft);margin:1.6rem 0 1rem}
.posts{display:grid;gap:1.4rem}
.post{display:grid;grid-template-columns:200px 1fr;gap:1.6rem;background:#fff;border-radius:var(--r-lg);
  padding:1.4rem;box-shadow:var(--shadow);text-decoration:none;color:inherit;align-items:center;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.post .thumb{aspect-ratio:4/3;border-radius:var(--r-md);display:grid;place-items:center;overflow:hidden;position:relative}
.post .thumb svg{width:46%;height:auto}
.post.t2 .thumb .zz{stroke:var(--plum)}
.post.t2 .thumb .hd{fill:var(--vivid)}
.post.t1 .thumb{background:linear-gradient(150deg,var(--deep),var(--vivid))}
.post.t2 .thumb{background:linear-gradient(150deg,var(--yellow),#FFE7BD)}
.post.t3 .thumb{background:linear-gradient(150deg,var(--lav),#F6DEFF)}
.post h3{color:var(--deep);margin-bottom:.4rem}
.post p{font-size:.92rem;color:var(--ink-soft);margin:0 0 .8rem}
.ptags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.8rem}
.ptags span{font-size:.7rem;font-weight:700;color:var(--vivid);background:var(--paper-2);
  padding:.2rem .55rem;border-radius:999px}
.pmeta{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.78rem;color:var(--ink-soft);font-weight:600;align-items:center}
.pmeta .who{display:inline-flex;align-items:center;gap:.45rem}
.pmeta .av{width:24px;height:24px;border-radius:50%;background:linear-gradient(140deg,var(--vivid),var(--deep));
  color:#fff;display:grid;place-items:center;font-size:.62rem;font-weight:800;font-family:'Baloo 2'}
.post.soon{opacity:.7;pointer-events:none}
.post.soon .thumb{background:var(--paper-2)}

@media(max-width:820px){
  .post{grid-template-columns:1fr;gap:1rem}
  .post .thumb{aspect-ratio:16/7}
}
@media(max-width:940px){.deck{min-height:340px;max-width:460px;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){
  .dcard,.deck .seal{opacity:1;animation:none}
  .deck svg.zig .z-fg{stroke-dashoffset:0;animation:none}
  .deck svg.zig .z-head{opacity:1;animation:none}
}

/* ================= WhatsApp emphasis ================= */
.wa{font-size:.95rem;padding:.8rem 1.4rem;gap:.6rem}
.wa svg{width:20px;height:20px}
.btn-wa{background:#25D366;color:#0B3D1F;border-color:#25D366;
  box-shadow:0 14px 30px -14px rgba(37,211,102,.85)}
.btn-wa:hover{transform:translateY(-3px);background:#1FBE5B;color:#062f16}
.btn-wa svg{width:20px;height:20px;fill:currentColor}
.final .btn-y{font-size:1.08rem;padding:1.05rem 2rem}
.final .btn-y svg{width:22px;height:22px}

/* floating WhatsApp bubble */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:58;display:inline-flex;align-items:center;gap:.6rem;
  background:#25D366;color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;
  padding:.85rem 1.3rem;border-radius:999px;box-shadow:0 16px 34px -12px rgba(0,0,0,.42);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.5),box-shadow .25s}
.wa-float:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 22px 40px -12px rgba(0,0,0,.5)}
.wa-float svg{width:24px;height:24px;fill:currentColor;flex:none}
.wa-float::before{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid #25D366;
  opacity:.55;animation:waping 2.6s ease-out infinite}
@keyframes waping{0%{transform:scale(.96);opacity:.55}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
@media(max-width:820px){
  .wa-float{right:14px;bottom:14px;padding:.9rem 1rem}
  .wa-float span{display:none}
  .wa-float svg{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){.wa-float::before{animation:none;opacity:0}}

/* funds table rows read as an amount list */
.facts li span{margin-left:auto;text-align:right;font-weight:600;color:var(--ink)}

/* ================= key facts strip (extractable summary) ================= */
.facts-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));gap:1rem;margin:0}
.fact{background:#fff;border-radius:var(--r-md);padding:1.1rem 1.25rem;box-shadow:var(--shadow);
  border-top:4px solid var(--lav)}
.fact:nth-child(3n+1){border-top-color:var(--yellow)}
.fact:nth-child(3n+3){border-top-color:var(--vivid)}
.fact dt{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--vivid)}
.fact dd{margin:0}
.fact .fact-big{font-family:'Baloo 2';font-weight:800;font-size:1.3rem;line-height:1.15;color:var(--deep);margin:.3rem 0 .35rem}
.fact .fact-sub{font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.facts-note{font-size:.78rem;color:var(--ink-soft);margin:1.2rem 0 0;text-align:center}

/* ===================== testimonials ===================== */
.tdeck{position:relative;display:flex;align-items:center;gap:.6rem;margin-top:2rem}
.tviewport{overflow:hidden;flex:1;border-radius:var(--r-lg)}
.ttrack{display:flex;transition:transform .5s cubic-bezier(.22,.9,.3,1)}
.tcard{flex:0 0 100%;margin:0;background:#fff;border-radius:var(--r-lg);padding:2.2rem 2.4rem;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.tcard::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--yellow)}
.tcard:nth-child(3n+2)::before{background:var(--lav)}
.tcard:nth-child(3n+3)::before{background:var(--vivid)}
.t-quote blockquote{margin:0;font-size:1.06rem;line-height:1.72;color:var(--ink)}
.t-quote blockquote::before{content:"\201C";font-family:'Baloo 2';font-size:3.2rem;line-height:0;
  color:var(--yellow);vertical-align:-.35em;margin-right:.18em}
.t-by{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem}
.t-by strong{display:block;font-family:'Baloo 2';font-size:1.08rem;color:var(--deep)}
.t-line{display:block;font-size:.84rem;color:var(--ink-soft);line-height:1.4}
.av{position:relative;display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:50%;background:var(--deep);color:#fff;font-family:'Baloo 2';font-weight:800;
  font-size:1.05rem;overflow:hidden;letter-spacing:.02em}
.av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-disc{margin:.9rem 0 0;font-size:.78rem;color:var(--ink-soft);font-style:italic}
.t-nav{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--deep);font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .18s,transform .18s}
.t-nav:hover{background:var(--deep);color:#fff;transform:scale(1.06)}
.tdots{display:flex;justify-content:center;gap:.45rem;margin-top:1.1rem}
.t-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#C9AEDA;
  cursor:pointer;transition:width .25s,background .25s}
.t-dot.on{width:26px;border-radius:5px;background:var(--deep)}
.twall{list-style:none;padding:0;margin:2.6rem 0 0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.t-pill{background:rgba(255,255,255,.72);border:1px solid rgba(79,25,100,.1);
  border-radius:var(--r-md);padding:1rem 1.15rem}
.t-pill span{display:block;font-size:.95rem;line-height:1.5;color:var(--deep)}
.t-pill em{display:block;margin-top:.45rem;font-size:.8rem;font-style:normal;color:var(--ink-soft)}
@media(max-width:720px){
  .tcard{padding:1.6rem 1.4rem}
  .t-quote blockquote{font-size:1rem}
  .t-nav{display:none}
}

/* ===================== CTAs ===================== */
.trustline{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:center;margin:.85rem 0 0;
  font-size:.79rem;color:var(--ink-soft)}
.trustline span{display:inline-flex;align-items:center;gap:.34rem}
.trustline span::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;
  background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E0627' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.btn-row.center{justify-content:center}
.btn-row.center + .trustline{justify-content:center}
.hero-second{margin:.7rem 0 0;font-size:.9rem}
.hero-second a{color:var(--vivid);font-weight:600}

.btn-wa{background:#25D366;color:#06301A;border-color:#25D366}
.btn-wa:hover{background:#1FBE5B;border-color:#1FBE5B;color:#06301A}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff}

.cta-inline{padding:0;margin:3.2rem 0}
.cta-inline-in{display:grid;grid-template-columns:1.15fr .85fr;gap:1.8rem;align-items:center;
  background:linear-gradient(135deg,#4F1964,#7C2FB2);color:#fff;border-radius:var(--r-lg);
  padding:2.1rem 2.3rem}
.cta-inline h3{font-family:'Baloo 2';font-size:1.55rem;line-height:1.18;margin:0 0 .5rem;color:#fff}
.cta-inline p{margin:0;color:#E6AFFC;font-size:.97rem;line-height:1.6}
.cta-inline-act{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.cta-inline-act .btn{width:100%;justify-content:center}
.cta-inline .trustline{color:rgba(255,255,255,.76);margin-top:.3rem}

.cta-voice{margin:1.9rem auto 0;max-width:46ch}
.cta-voice blockquote{margin:0;font-size:1rem;line-height:1.6;color:#fff;opacity:.94}
.cta-voice figcaption{margin-top:.5rem;font-size:.82rem;color:var(--yellow)}

/* sticky two-choice action bar — phones only, replaces the lone bubble */
.actionbar{display:none}
@media(max-width:760px){
  .cta-inline-in{grid-template-columns:1fr;padding:1.6rem 1.4rem}
  .wa-float{display:none !important}
  .actionbar{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;position:fixed;
    left:0;right:0;bottom:0;z-index:60;padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
    border-top:1px solid rgba(79,25,100,.12)}
  .actionbar .btn{width:100%;justify-content:center;padding:.78rem .6rem;font-size:.92rem}
  body{padding-bottom:4.6rem}
}

/* Any icon inside a button is an icon, not an illustration. Sizing it on the
   button variant meant a new variant (.btn-ghost) rendered it full-size. */
.btn svg{width:20px;height:20px;flex:none;fill:currentColor}
.btn{white-space:nowrap}
@media(max-width:520px){.btn{white-space:normal}}

/* university links inside programme cards stay quiet until hovered */
.card .uni a,.kicker a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(124,47,178,.3)}
.card .uni a:hover,.kicker a:hover{color:var(--vivid);border-bottom-color:var(--vivid)}

/* A card that is itself a link should not look like body-copy link text. */
a.card{text-decoration:none;color:inherit;display:block}
a.card h3{color:var(--deep)}
a.card p{color:var(--ink-soft)}
a.card .more{color:var(--vivid);font-weight:600;margin-bottom:0}
a.card:hover h3{color:var(--vivid)}

/* ===================== legal pages ===================== */
.wrap-legal{max-width:760px}
.wrap-legal h1{margin-bottom:.6rem}
.legal-date{font-size:.84rem;color:var(--ink-soft);margin:.4rem 0 1.4rem}
.legal-banner{background:#FFF6E2;border:1px solid #F2D79B;border-left:5px solid var(--yellow);
  border-radius:var(--r-md);padding:1rem 1.2rem;font-size:.9rem;line-height:1.6;margin:0 0 1.8rem;
  color:#5A4512}
.legal-nav{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.8rem}
.legal-nav a{font-size:.82rem;font-weight:600;padding:.4rem .8rem;border-radius:999px;
  background:#F3ECF8;color:var(--deep);text-decoration:none;border:1px solid transparent}
.legal-nav a:hover{background:#E9DCF4}
.legal-nav a.on{background:var(--deep);color:#fff}
.legal-toc{margin:0 0 2.4rem;padding-left:1.2rem;color:var(--ink-soft);font-size:.92rem;
  columns:2;column-gap:2rem}
.legal-toc li{margin:.25rem 0;break-inside:avoid}
.legal-toc a{color:var(--vivid);text-decoration:none}
.legal-toc a:hover{text-decoration:underline}
.legal-sec{margin:0 0 2.4rem;scroll-margin-top:100px}
.legal-sec h2{font-family:'Baloo 2';font-size:1.38rem;color:var(--deep);margin:0 0 .7rem;
  line-height:1.25}
.legal-sec p{margin:0 0 .9rem;line-height:1.72}
.legal-list{margin:0 0 1rem;padding-left:1.15rem}
.legal-list li{margin:.45rem 0;line-height:1.65}
.legal-table-wrap{overflow-x:auto;margin:0 0 1.1rem}
.legal-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
.legal-table th{text-align:left;background:#F3ECF8;color:var(--deep);font-weight:700;
  padding:.6rem .8rem;border-bottom:2px solid #E2D2EE}
.legal-table td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:top;
  line-height:1.55}
.legal-table tr:last-child td{border-bottom:0}
.legal-foot{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--ink-soft)}
@media(max-width:620px){.legal-toc{columns:1}}

/* ===================== mobile polish ===================== */
@media(max-width:760px){
  /* The floating arrow stickers crowd the hero on a phone and sit over the
     headline and the CTAs. They are decoration, so they go. */
  .stickers,.hero .sticker{display:none !important}
  .float-arrow{width:92px;opacity:.09;left:auto;right:-10px;bottom:6%}

  .hero{padding-top:1.4rem}
  .hero h1{font-size:clamp(2.1rem,9.2vw,2.9rem);line-height:1.08;letter-spacing:-.015em}
  .hero .lede{font-size:1rem;line-height:1.6}
  .hero .btn-row{flex-direction:column;align-items:stretch;gap:.55rem}
  .hero .btn-row .btn{width:100%;justify-content:center}
  .trustline{justify-content:flex-start;gap:.3rem .7rem;font-size:.76rem}
  .hero-second{text-align:left}

  /* section rhythm: less air between blocks, so a phone scroll is shorter */
  .sec{padding-block:2.6rem}
  .h2,.sec-head h2{font-size:clamp(1.6rem,6.8vw,2.1rem);line-height:1.15}
  .lede{font-size:.98rem}

  /* tables and wide blocks must never push the page sideways */
  .facts-strip{gap:.7rem}
  .fact{padding:.95rem 1.05rem}
  .legal-table{font-size:.85rem}

  /* forms are the point of the page on a phone — give them room */
  .form .row{grid-template-columns:1fr}
  .chip-row{gap:.4rem}
  .chip{font-size:.86rem;padding:.5rem .8rem}

  footer{padding-bottom:7rem}
  .f-grid{gap:1.6rem}
}
@media(max-width:420px){
  .wrap{padding-inline:16px}
  .tcard{padding:1.3rem 1.1rem}
  .actionbar .btn{font-size:.86rem;padding:.74rem .4rem}
}

/* The hero grid kept its two columns on phones, so each column stayed wider than
   the wrap and every child overflowed to the right by ~28px. Collapse it, and let
   grid children shrink (min-width:auto is the default that causes the overflow). */
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-grid>*{min-width:0}
}
@media(max-width:760px){
  /* the nav pill lost its icon when WhatsApp was removed, leaving an empty circle */
  .wa span{display:inline !important}
  .wa{padding:.58rem 1rem;font-size:.86rem}
  /* keep the decorative card deck inside the viewport */
  .deck{max-width:100%;transform:scale(.88);transform-origin:top center;margin-top:-.5rem}
}

@media(max-width:760px){
  /* The sticky action bar already offers Contact Us, so the header pill is a
     duplicate — and at this width it ran past the right edge. */
  header .wa{display:none}
  .deck{transform:scale(.8);margin-top:-1rem;margin-bottom:-2rem}
}

/* ============================================================
   RESPONSIVE LAYER
   One fluid gutter and one fluid section rhythm, applied everywhere,
   instead of per-breakpoint patches.
   ============================================================ */

:root{
  --gutter: clamp(1rem, 4.2vw, 2rem);      /* 16px at 320 → 32px at 760+ */
  --sec-y:  clamp(2.4rem, 7vw, 5rem);      /* vertical rhythm for sections */
  --card-p: clamp(1.1rem, 3.6vw, 1.8rem);  /* interior padding of cards */
  --gap:    clamp(.8rem, 2.6vw, 1.5rem);
}

.wrap{padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.grid{gap:var(--gap)}

/* Nothing may push the page sideways. Decorative blurs, marquees and wide
   tables are the usual culprits, and a stray one is a broken page on a phone. */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%}
.blobs,.stickers{overflow:hidden}

/* Long unbroken strings (emails, URLs, references) must wrap rather than widen. */
body{overflow-wrap:break-word}
a[href^="mailto:"],a[href^="tel:"],code{overflow-wrap:anywhere}

/* Any table that is not already in a scroll wrapper gets one. */
.sec table:not(.legal-table){display:block;width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.sec table:not(.legal-table) tbody{display:table;width:100%;min-width:420px}
.legal-table-wrap{max-width:100%}

/* Media and embeds never exceed their column. */
img,svg,video,iframe{max-width:100%;height:auto}

/* Grid and flex children default to min-width:auto, which is what lets a long
   word or a wide child blow out the track. */
.grid>*,.hero-grid>*,.two>*,.f-grid>*{min-width:0}

/* ---------- readable type on small screens ---------- */
/* Nothing below 12px: several labels were rendering at 10–11.8px, which is
   under the comfortable minimum on a phone and fails most accessibility reviews. */
@media(max-width:860px){
  .badge,.dtag,.dsub,.fact dt,.t-line,.hint,.fine,.legal-date,.facts-note,
  .trustline,.crumbs,.f-bot,.t-pill em{font-size:max(12px,.78rem)}
  .eyebrow,.kicker{font-size:max(12px,.8rem)}
}

/* ---------- phones ---------- */
@media(max-width:620px){
  .two,.form .row,.f-grid{grid-template-columns:1fr}
  .card{padding:var(--card-p)}
  .btn{padding:.8rem 1.25rem}
  .sec-head{margin-bottom:1.4rem}
  .sec-head p,.lede{max-width:none}
  h1{font-size:clamp(1.95rem,8.6vw,2.7rem);line-height:1.1}
  .h2,.sec-head h2,section h2{font-size:clamp(1.5rem,6.4vw,2rem);line-height:1.18}
  h3{font-size:clamp(1.1rem,4.8vw,1.3rem)}
  p,li{font-size:.97rem;line-height:1.68}
  .facts-strip,.grid{gap:.75rem}
  .tdots{margin-top:.9rem}
  .legal-toc{columns:1}
  .f-grid{gap:1.5rem}
  footer{padding-top:2.4rem}
}

/* ---------- very small phones (320–360) ---------- */
@media(max-width:360px){
  :root{--gutter:14px}
  .btn{font-size:.9rem;padding:.75rem 1rem}
  .actionbar{gap:.4rem;padding:.5rem .55rem calc(.5rem + env(safe-area-inset-bottom))}
  .actionbar .btn{font-size:.82rem;padding:.72rem .3rem}
  .chip{font-size:.84rem;padding:.45rem .7rem}
  .av{width:44px;height:44px;font-size:.95rem}
  .t-quote blockquote::before{font-size:2.4rem}
}

/* ---------- tablets: two columns rather than one wide one ---------- */
@media(min-width:621px) and (max-width:1024px){
  .grid.quad,.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{gap:2rem}
}

/* ---------- landscape phones: the hero must not fill the screen ---------- */
@media(max-height:520px) and (orientation:landscape){
  .hero{padding-top:1rem;padding-bottom:1.5rem}
  .deck{display:none}
  .actionbar{position:static}
  body{padding-bottom:0}
}

/* A 10px label is unreadable on a phone held at arm's length and fails most
   accessibility reviews. 12px is the floor everywhere, at every width. */
.badge,.fact dt,.rg-scale,.stage .hint,.ptags span,
.dcard .dsub,.dcard .dtag,.t-pill em,.legal-date,.facts-note{font-size:max(12px,.74rem)}
.dcard .dtag{font-size:max(12px,.68rem);padding:.22rem .6rem}
.dcard .dsub{font-size:max(12px,.74rem)}
.av{font-size:max(13px,1rem)}

/* ---------- the fixed header must never sit on the hero ----------
   The mobile rhythm pass dropped the hero's top padding to 1.4rem, but the
   header is position:fixed and ~73px tall, so the eyebrow and the first line
   of the headline were underneath it. Clear the header, then add the gutter. */
@media(max-width:760px){
  .hero{padding-top:calc(4.6rem + var(--gutter))}
}

/* Below ~420px the decorative card deck collapses into an overlapping pile of
   unreadable fragments. It carries no information the copy does not, so it goes
   rather than shrinking further. */
@media(max-width:420px){
  .deck{display:none}
  .hero-grid{gap:0}
}

/* The count badge inside a blog filter tag was 10.88px at every width. */
.tag i{font-size:max(12px,.72rem)}

/* The byline monogram on blog cards was 9.92px inside a 24px circle. Two
   letters at 12px need a slightly larger circle. */
.pmeta .av{width:27px;height:27px;font-size:max(12px,.68rem)}

/* On a narrow phone the label and the figure fight over one line, so the label
   wraps to two or three words. Stack them instead. */
@media(max-width:400px){
  .rg-top{flex-direction:column;align-items:flex-start;gap:.15rem;margin-bottom:.45rem}
  .rg-name{font-size:.95rem}
}

/* ---------- tablet header and hero decoration ----------
   The nav pill lost its icon when WhatsApp was removed, so hiding its label on
   tablets left an empty purple blob. There is room for the words at this width
   — the nav itself is already a burger. */
@media(max-width:820px){
  .wa span{display:inline}
  .wa{padding:.6rem 1.05rem}
}
/* The arrow stickers are positioned as a percentage of the hero, so they only
   sit in the left margin while the viewport is wider than the 1180px wrap plus
   room for them. Below that they land on the eyebrow and the primary button. */
@media(max-width:1199px){
  .stickers,.hero .sticker,.hero .spark{display:none !important}
}

/* On a narrow phone a label plus a right-aligned value leaves the value two or
   three words per line. Stack them and read left-to-right instead. */
@media(max-width:420px){
  .facts li{flex-direction:column;gap:.1rem;padding:.5rem 0}
  .facts li b{min-width:0}
  .facts li span{margin-left:0;text-align:left}
}


/* ---- inline SVG logos (static build: no image files) ---- */
.fl-sprite{position:absolute;width:0;height:0;overflow:hidden}
svg.mark,svg.f-mark{display:block}
svg.sticker,svg.float-arrow{display:block}
svg.sticker{width:var(--s,68px);height:var(--s,68px)}
.post .thumb svg{width:46%;height:auto}