@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap");
/* ═══════════════════════════════════════════════════════════════════
   KNGX — rebuilt on the Headway (hw.online) page architecture.
   Section order, mega-menu shape, account-card set, instrument grid,
   market-pulse rows and footer column structure all follow theirs.
   Palette is their gold family; all wording, artwork and the KNGX
   mark are ours. No Headway logo, name or copy is reproduced.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Same geometry as hw.online; accent is dental mint green instead of yellow. */
  --gold:#2FDB6E; --gold-d:#14944A; --gold-l:#7AE9A3; --sand:#E6F9ED;
  --cta:#2FDB6E; --cta-h:#24C85F; --cta-ink:#0B1A10;
  --ink:#19191D; --ink-2:#262119; --ink-3:#3A3A3F;
  --paper:#fff; --s1:#F5F5F5; --s2:#EFEFEF; --page:#F3F3F3;
  --tx:#262119; --tx-2:rgba(38,33,25,.66); --tx-3:rgba(38,33,25,.44);
  --wt:#fff; --wt-2:rgba(255,255,255,.74); --wt-3:rgba(255,255,255,.52);
  --line:rgba(38,33,25,.10); --line-d:rgba(255,255,255,.14);
  --up:#12A150; --dn:#E5484D;
  --r:16px; --r-card:32px; --r-panel:56px; --r-sm:12px;
  --wrap:1248px; --pad:24px; --sec:56px;
  --fs:100%;
  --touch:40px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0}
html{font-size:var(--fs);scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--page);overflow-x:hidden;max-width:100%}
body{background:var(--page);color:var(--tx);overflow-x:hidden;
  font:400 16px/1.6 Satoshi,Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;background:var(--gold);color:var(--ink);padding:12px 18px;z-index:300;font-weight:600}
.skip:focus{left:0;top:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

h1,h2,h3,h4{font-weight:400;letter-spacing:-.02em;line-height:1.06;color:inherit}
h1{font-size:clamp(44px,6.4vw,90px);line-height:1.02}
h2{font-size:clamp(32px,4.4vw,60px);line-height:1.06}
h3{font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.015em;line-height:1.12}
h4{font-size:20px;font-weight:500;letter-spacing:-.012em}
p{color:var(--tx-2)}
.dark p,.dark .lead,.cta p,.cta .lead,.band p,.band .lead{color:var(--wt-2)}
.lead{font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:var(--tx-2);max-width:62ch}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);margin-bottom:16px}
.dark .eyebrow{color:var(--gold)}
.gold{color:var(--gold-d)}
.dark .gold{color:var(--gold)}

/* ── buttons: Headway's pill set ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 30px;
  border-radius:var(--r);border:1.5px solid transparent;background:var(--s2);color:var(--tx);
  font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn.pri{background:var(--cta);color:var(--cta-ink)}
.btn.pri:hover{background:var(--cta-h)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--s1)}
.dark .btn.ghost,.cta .btn.ghost,.band .btn.ghost,header .btn.ghost,.mnav .btn.ghost{border-color:var(--line-d);color:var(--wt)}
.dark .btn.ghost:hover,.cta .btn.ghost:hover,.band .btn.ghost:hover,header .btn.ghost:hover,.mnav .btn.ghost:hover{background:rgba(255,255,255,.09)}
.btn.sm{height:42px;padding:0 20px;font-size:14px}
.btn svg{width:17px;height:17px;flex:0 0 auto}

/* ── header + mega menu ──────────────────────────────────────────── */
header{position:sticky;top:0;z-index:100;background:rgba(11,13,18,.92);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-d);color:var(--wt);
  transition:background .25s var(--ease),border-color .25s var(--ease)}
/* landing: dark bar sits over the rounded hero panel */
body.floathead{padding-top:0}
body.floathead header{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none}
body.floathead header.stuck{background:rgba(25,25,29,.92);border-bottom-color:var(--line-d);backdrop-filter:saturate(160%) blur(14px)}
body.floathead main{padding-top:0}
.bar{display:flex;align-items:center;gap:18px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:#22C55E;
  text-shadow:0 0 8px rgba(34,197,94,.5),0 0 18px rgba(22,163,74,.32),0 1px 0 rgba(5,46,22,.2)}
.logo img{width:26px;height:26px}
.lang{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:12px;
  color:var(--wt-2);font-size:14px;font-weight:600;border:0;background:transparent;cursor:pointer}
.lang:hover{color:var(--wt);background:rgba(255,255,255,.07)}
nav.main{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1}
.nitem{position:relative}
.nitem>a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;font-size:15px;font-weight:600;color:var(--wt-2);transition:color .15s,background .15s}
.nitem>a:hover,.nitem:hover>a{color:var(--wt);background:rgba(255,255,255,.07)}
.nitem>a .cx{width:11px;height:11px;opacity:.6}
.mega{position:absolute;top:calc(100% + 10px);left:-14px;background:var(--paper);color:var(--tx);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.30);padding:26px;display:none;grid-auto-flow:column;gap:34px;min-width:max-content}
.nitem:hover .mega{display:grid}
.mcol{min-width:172px}
.mcol h5{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3);margin-bottom:12px}
.mcol a{display:block;padding:7px 0;font-size:14.5px;font-weight:600;color:var(--tx);transition:color .15s}
.mcol a:hover{color:var(--gold-d)}
.hact{display:flex;align-items:center;gap:10px;margin-left:auto}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;color:var(--wt);cursor:pointer;place-items:center}
.burger svg{width:24px;height:24px}
.mnav{display:none;background:var(--ink-2);border-top:1px solid var(--line-d);padding:18px var(--pad) 26px}
.mnav.on{display:block}
.mnav details{border-bottom:1px solid var(--line-d)}
.mnav summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:700;font-size:16px;color:var(--wt)}
.mnav summary::-webkit-details-marker{display:none}
.mnav .sub a{display:block;padding:9px 0 9px 14px;font-size:14.5px;color:var(--wt-2)}
.mnav .mcta{display:flex;gap:10px;margin-top:20px}
.mnav .mcta .btn{flex:1}

/* ── 1. hero — rounded panel, soft vertical bands, centred type ──── */
.herowrap{padding:88px 24px 0;max-width:1248px;margin:0 auto}
.hero{position:relative;color:#fff;text-align:center;overflow:hidden;
  border-radius:var(--r-panel);min-height:clamp(560px,78vh,720px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:72px 28px 140px;
  background:
    radial-gradient(42% 88% at 18% 50%, rgba(47,219,110,.55) 0%, rgba(47,219,110,0) 70%),
    radial-gradient(38% 90% at 82% 48%, rgba(20,148,74,.45) 0%, rgba(20,148,74,0) 72%),
    radial-gradient(55% 70% at 50% 110%, #1FA85A 0%, rgba(31,168,90,0) 60%),
    linear-gradient(105deg,#2A2E2C 0%,#3A4540 18%,#1E6B45 42%,#178A52 58%,#2A3A34 78%,#1C221F 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 14%,rgba(255,255,255,.04) 14% 15%,transparent 15% 28%);
  mix-blend-mode:soft-light;opacity:.55}
.hero > *{position:relative;z-index:1}
.hero h1{max-width:12ch;margin:0 auto 18px;font-weight:400;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(52px,8vw,92px);color:#fff}
.hero .lead{max-width:36ch;margin:0 auto 28px;color:rgba(255,255,255,.9);font-size:clamp(15px,1.6vw,18px);line-height:1.55}
.hero .btn.pri{min-width:168px;height:52px;font-size:16px;font-weight:600;border-radius:16px}
.awardlab{font-size:14px;font-weight:500;color:rgba(255,255,255,.88);margin-bottom:14px;letter-spacing:.01em}
.trophies{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin-bottom:28px}
.trophy{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);flex:0 0 auto}
.trophy svg{width:22px;height:22px;color:#E8FFF0}
.trophy.sm{width:36px;height:36px;opacity:.8}
.trophy.sm svg{width:18px;height:18px}

/* quick tiles sitting on the hero foot like hw.online */
.qtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:1248px;margin:-88px auto 18px;padding:0 24px;position:relative;z-index:2}
.qtile{display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:168px;padding:22px;border-radius:28px;background:#fff;
  box-shadow:0 10px 30px rgba(25,25,29,.08);transition:transform .18s var(--ease)}
.qtile:hover{transform:translateY(-3px)}
.qtile h4{font-size:18px;font-weight:500;color:var(--ink);line-height:1.25;max-width:12ch}
.qico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--sand);color:var(--gold-d);font-weight:700;font-size:15px;align-self:flex-end}
.qico.dark{background:var(--ink);color:#fff}
.qico.mint{background:linear-gradient(135deg,#DCF6E4,#2FDB6E);color:#0B1A10}

/* ── 2. awards strip ─────────────────────────────────────────────── */
.awards{background:var(--ink-2);color:var(--wt);padding:44px 0;border-top:1px solid var(--line-d)}
.awrap{display:flex;align-items:center;gap:38px;flex-wrap:wrap;min-width:0}
.abig{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:11ch}
.abig span{color:var(--gold);display:block}
.atrack{flex:1;min-width:0;display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.atrack::-webkit-scrollbar{display:none}
.badge{flex:0 0 auto;display:grid;place-items:center;text-align:center;min-width:132px;padding:14px 16px;
  border:1px solid var(--line-d);border-radius:14px;background:rgba(255,255,255,.04)}
.badge b{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em}
.badge i{display:block;font-style:normal;font-size:11px;color:var(--wt-3);margin-top:3px}

/* ── generic section ─────────────────────────────────────────────── */
section{padding:var(--sec) 0}
.dark{background:var(--ink);color:var(--wt)}
.tint{background:var(--s1)}
.shead{max-width:60ch;margin-bottom:48px}
.shead.mid{margin-left:auto;margin-right:auto;text-align:center}

/* ── 3. value props ──────────────────────────────────────────────── */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.fcard:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(0,0,0,.08)}
.fico{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--sand);color:var(--gold-d);margin-bottom:18px}
.fico svg{width:23px;height:23px}
.fcard h4{margin-bottom:8px}
.fcard p{font-size:14.5px}

/* ── 4. social proof ─────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;display:flex;flex-direction:column;gap:16px}
.stars{color:var(--gold-d);font-size:15px;letter-spacing:2px}
.tcard p{font-size:15px;color:var(--tx);flex:1}
.tmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.tmeta b{font-size:14px;font-weight:700}
.src{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}

/* ── 5. user-count band ──────────────────────────────────────────── */
.band{background:var(--ink);color:var(--wt);overflow:hidden}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split>*{min-width:0}
.split.rev>*:first-child{order:2}
.bigstat{font-size:clamp(46px,7vw,80px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--gold);margin-bottom:14px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.chip{padding:9px 18px;border:1px solid var(--line-d);border-radius:var(--r);font-size:13.5px;font-weight:700;color:var(--wt-2)}
.shot{border-radius:var(--r-card);overflow:hidden}
.shot img{width:100%;height:auto}

/* ── 6. account types ────────────────────────────────────────────── */
.acards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.acard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:30px;position:relative}
.acard.best{border-color:var(--gold);box-shadow:0 16px 44px rgba(62,207,107,.22)}
.tag{position:absolute;top:-11px;left:30px;background:var(--gold);color:#141414;font-size:11.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 13px;border-radius:var(--r)}
.acard h3{margin-bottom:4px}
.acard .sub{font-size:14px;color:var(--tx-2);margin-bottom:22px}
.spec{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
.spec li{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.spec li:last-child{border-bottom:0}
.spec span{color:var(--tx-2)}
.spec b{font-weight:700;text-align:right}
.acard .btn{width:100%}
.acard .btn+.btn{margin-top:9px}

/* ── 10. instruments grid ────────────────────────────────────────── */
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.itile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;transition:border-color .18s,transform .18s var(--ease)}
.itile:hover{border-color:var(--gold);transform:translateY(-2px)}
.itop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.isym{font-size:19px;font-weight:800;letter-spacing:-.02em}
.icls{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);
  background:var(--sand);padding:4px 10px;border-radius:var(--r)}
.irow{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-top:1px solid var(--line)}
.irow span{color:var(--tx-2)}
.irow b{font-weight:700}
.ilink{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14px;font-weight:700;color:var(--gold-d)}

/* ── 11. market pulse ────────────────────────────────────────────── */
.pulse{display:grid;gap:0;border:1px solid var(--line-d);border-radius:var(--r-card);overflow:hidden}
.prow{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:20px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line-d)}
.prow:last-child{border-bottom:0}
.ptime{font-size:13px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.prow h4{font-size:16px;font-weight:700}
.pmove{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.pmove.u{color:#37D67A}.pmove.d{color:#FF6B6E}

/* ── 12. news cards ──────────────────────────────────────────────── */
.ncard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.ncard .nimg{aspect-ratio:16/9;background:var(--s2) center/cover no-repeat}
.ncard .nbody{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.nmeta{font-size:12.5px;color:var(--tx-3);font-weight:600}
.ncard h4{font-size:17px}

/* ── CTA band ────────────────────────────────────────────────────── */
.cta{background:linear-gradient(135deg,#15181F 0%,#0B0D12 60%);color:var(--wt);text-align:center}
.cta h2{margin-bottom:16px}
.cta .lead{margin:0 auto 30px}

/* ── footer ──────────────────────────────────────────────────────── */
footer{background:var(--ink);color:var(--wt-2);padding:72px 0 40px;border-top:1px solid var(--line-d)}
.fgrid{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:34px;margin-bottom:52px}
.fcol h5{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--wt-3);margin-bottom:15px}
.fcol a{display:block;padding:6px 0;font-size:14px;color:var(--wt-2);transition:color .15s}
.fcol a:hover{color:var(--gold)}
.fbrand .logo{margin-bottom:14px}
.fbrand p{font-size:14px;color:var(--wt-3);max-width:30ch}
.social{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-d);border-radius:50%;color:var(--wt-2);transition:.15s}
.social a:hover{border-color:var(--gold);color:var(--gold)}
.social svg{width:16px;height:16px}
.risk{border-top:1px solid var(--line-d);padding-top:30px;font-size:13px;line-height:1.78;color:rgba(255,255,255,.66)}
.risk p+p{margin-top:12px}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:13px;color:var(--wt-3)}

/* ── responsive ──────────────────────────────────────────────────── */
@media(max-width:1080px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:28px}
}
@media(max-width:900px){
  .atrack{flex:0 0 100%;width:100%}
  .badge{min-width:112px}
  :root{--sec:64px}
  nav.main,.hact .btn.ghost{display:none}
  .burger{display:grid}
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev>*:first-child{order:0}
  .grid3,.acards,.igrid{grid-template-columns:1fr}
  .awrap{gap:22px}
  .abig{max-width:none}
  .prow{grid-template-columns:80px 1fr;row-gap:6px}
  .pmove{grid-column:2}
}
@media(max-width:560px){
  :root{
    --fs:93.75%;
    --pad:16px;
    --sec:40px;
    --r:12px;
    --r-card:20px;
    --r-panel:28px;
    --r-sm:10px;
  }
  .grid4{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  .btn{height:44px;padding:0 20px;font-size:14px;border-radius:12px}
  .btn.sm{height:var(--touch);padding:0 16px;font-size:13.5px}
  .bar{height:56px;gap:12px}
  .logo{font-size:16px;gap:8px}
  .logo img{width:22px;height:22px}
  .burger{width:var(--touch);height:var(--touch)}
  .herowrap{padding:68px 16px 0}
  .hero{min-height:clamp(400px,58vh,520px);padding:48px 18px 96px}
  .hero h1{font-size:clamp(36px,9.5vw,48px);margin-bottom:14px}
  .hero .lead{margin-bottom:20px;font-size:15px}
  .hero .btn.pri{min-width:148px;height:44px;font-size:15px;border-radius:12px}
  .awardlab{font-size:13px;margin-bottom:10px}
  .trophies{gap:10px;margin-bottom:20px}
  .trophy{width:36px;height:36px}
  .trophy.sm{width:30px;height:30px}
  .qtiles{margin:-56px auto 12px;padding:0 16px;gap:10px;grid-template-columns:1fr 1fr}
  .qtile{min-height:132px;padding:16px;border-radius:18px;gap:18px}
  .qtile h4{font-size:15px}
  .qico{width:42px;height:42px;border-radius:12px;font-size:13px}
  .awards{padding:32px 0}
  .abig{font-size:clamp(22px,5.5vw,28px)}
  h1{font-size:clamp(34px,8vw,52px)}
  h2{font-size:clamp(26px,6vw,40px)}
  h3{font-size:clamp(18px,4.5vw,24px)}
  h4{font-size:17px}
  .lead{font-size:15px}
  .phero{padding:clamp(40px,8vw,64px) 0 clamp(36px,6vw,52px)}
  .shead{margin-bottom:28px}
  .shead .lead{font-size:16px}
  .fcard{padding:20px}
  .panel,.hero{border-radius:var(--r-panel)}
  .panel{padding:28px 16px}
  .mnav summary{padding:12px 0;font-size:15px;min-height:var(--touch)}
  .mnav .mcta .btn{min-height:var(--touch)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══ INNER PAGES ═══════════════════════════════════════════════════ */
.phero{background:var(--ink);color:var(--wt);padding:clamp(56px,7vw,92px) 0 clamp(48px,6vw,72px)}
.phero h1{max-width:20ch;margin-bottom:18px}
.phero .lead{color:var(--wt-2)}
.pstats{display:flex;gap:40px;flex-wrap:wrap;margin-top:38px;padding-top:30px;border-top:1px solid var(--line-d)}
.pstat b{display:block;font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--gold);line-height:1.1}
.pstat span{display:block;font-size:13.5px;color:var(--wt-3);margin-top:4px}
.crumb{font-size:13px;color:var(--wt-3);margin-bottom:20px}
.crumb a{color:var(--wt-3)}.crumb a:hover{color:var(--gold)}

/* comparison tables — Headway's grouped-row pattern */
.tblwrap{border:1px solid var(--line);border-radius:var(--r-card);overflow-x:auto;background:var(--paper)}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px}
table.cmp th,table.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{background:var(--s1);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);white-space:nowrap}
table.cmp thead th:first-child{width:32%}
table.cmp td{color:var(--tx-2)}
table.cmp td:first-child{color:var(--tx);font-weight:600}
table.cmp td+td,table.cmp th+th{text-align:right;font-variant-numeric:tabular-nums}
table.cmp tr.grp td{background:var(--s2);font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--tx-3);padding:11px 20px}
table.cmp tr:last-child td{border-bottom:0}
table.cmp tbody tr:not(.grp):hover td{background:var(--s1)}
.yes{color:var(--up);font-weight:700}.no{color:var(--tx-3)}

/* accordion / FAQ */
.faq{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--gold-d);flex:0 0 auto;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .ans{padding:0 24px 22px;font-size:15px;color:var(--tx-2);max-width:76ch}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px;counter-increment:s}
.step::before{content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--sand);color:var(--gold-d);font-weight:800;font-size:16px;margin-bottom:16px}
.step h4{margin-bottom:7px}.step p{font-size:14.5px}

/* method rows */
.pay{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.paycard{border:1px solid var(--line);border-radius:var(--r-sm);padding:18px;background:var(--paper);text-align:center}
.paycard b{display:block;font-size:15px;font-weight:700;margin-bottom:5px}
.paycard span{font-size:12.5px;color:var(--tx-3)}

/* promo cards */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.pcard .ptop{padding:24px;background:var(--ink);color:var(--wt)}
.pcard .ptop h3{color:var(--wt)}
.chiprow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.tchip{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r);
  background:rgba(62,207,107,.18);color:var(--gold)}
.pcard .pbody{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.pcard .pbody p{font-size:14.5px;flex:1}

@media(max-width:900px){
  .steps,.pay,.pcards{grid-template-columns:1fr}
  .pstats{gap:26px}
  .pay{grid-template-columns:1fr 1fr}
}

/* ═══ CALCULATOR ════════════════════════════════════════════════════ */
.calc{display:grid;grid-template-columns:400px minmax(0,1fr);gap:28px;align-items:start}
.cpanel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);margin-bottom:8px}
.fld select,.fld input{width:100%;height:50px;padding:0 15px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--tx);font:600 15px/1 Manrope,sans-serif;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%231A1D23' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:38px}
.fld select:focus,.fld input:focus{outline:none;border-color:var(--gold)}
.cout{background:var(--ink);color:var(--wt);border-radius:var(--r-card);padding:30px;position:sticky;top:92px}
.cout h3{color:var(--wt);margin-bottom:4px}
.cout .csub{font-size:13.5px;color:var(--wt-3);margin-bottom:24px}
.ores{display:grid;gap:0}
.ores .orow{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line-d);font-size:15px}
.ores .orow:last-child{border-bottom:0}
.ores .orow span{color:var(--wt-2)}
.ores .orow b{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.ores .orow.hi{margin-top:8px;padding-top:20px;border-top:1px solid var(--line-d)}
.ores .orow.hi b{color:var(--gold);font-size:22px;letter-spacing:-.02em}
.cnote{font-size:12.5px;color:var(--wt-3);line-height:1.65;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-d)}
@media(max-width:980px){.calc{grid-template-columns:1fr}.cout{position:static}}

/* course / article list */
.clist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ccard{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);padding:26px;display:flex;flex-direction:column;gap:12px}
.clevel{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);background:var(--sand);padding:4px 10px;border-radius:var(--r);align-self:flex-start}
.ccard p{font-size:14.5px;flex:1}
.cmeta{font-size:12.5px;color:var(--tx-3);font-weight:600}
@media(max-width:900px){.clist{grid-template-columns:1fr}}

/* tier table for partners */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tier{border:1px solid var(--line);border-radius:var(--r-card);padding:24px;background:var(--paper);text-align:center}
.tier b{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin-bottom:10px}
.tier .amt{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;color:var(--gold-d);line-height:1}
.tier span{display:block;font-size:13px;color:var(--tx-2);margin-top:8px}
@media(max-width:900px){.tiers{grid-template-columns:1fr 1fr}}

.hero .btn.ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.10)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.20)}
@media(max-width:560px){.hero{border-radius:0 0 var(--r-panel) var(--r-panel)}}

/* ═══ APP DOWNLOAD BAND ═════════════════════════════════════════════ */
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.store{display:inline-flex;align-items:center;gap:11px;height:56px;padding:0 20px;border-radius:14px;
  border:1px solid var(--line-d);background:rgba(255,255,255,.07);color:var(--wt);transition:background .18s var(--ease)}
.store:hover{background:rgba(255,255,255,.15)}
.store svg{width:24px;height:24px;flex:0 0 auto}
.store b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.store span{display:block;font-size:11px;color:var(--wt-3);letter-spacing:.02em}
.appshot{display:grid;place-items:center}
.appshot img{max-width:320px;width:100%;border-radius:26px}
@media(max-width:900px){.stores .store{flex:1 1 100%}}


/* ═══ MOTION ════════════════════════════════════════════════════════ */
/* slow drift across the hero gradient, like theirs */
.hero::after{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(34% 26% at 76% 66%, rgba(120,255,180,.14), transparent 70%);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03)}
}

/* hero content settles in on load */
.hero .awardlab,.hero .laurel,.hero h1,.hero .lead,.hero .hcta,.hero .hnote{
  opacity:0;transform:translateY(16px);animation:riseIn .72s cubic-bezier(.22,.61,.36,1) forwards}
.hero .awardlab{animation-delay:.05s}
.hero .laurel   {animation-delay:.14s}
.hero h1        {animation-delay:.22s}
.hero .lead     {animation-delay:.34s}
.hero .hcta     {animation-delay:.44s}
.hero .hnote    {animation-delay:.54s}
@keyframes riseIn{to{opacity:1;transform:none}}

/* the centre trophy breathes */
.trophy{animation:bob 3.6s ease-in-out infinite}
.trophy:nth-child(2){animation-delay:.4s}
.trophy:nth-child(3){animation-delay:.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* scroll reveals */
.rv{opacity:0;transform:translateY(24px);
    transition:opacity .66s cubic-bezier(.22,.61,.36,1),transform .66s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}

/* stats strip glides on its own, pausing when you touch it */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.atrack.auto{overflow:hidden}
.atrack.auto .mq{display:flex;gap:12px;animation:marquee 26s linear infinite;will-change:transform}
.atrack.auto:hover .mq{animation-play-state:paused}

/* the primary button gets a soft pulse ring on the hero only */
.hero .btn.pri{position:relative}
.hero .btn.pri::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(62,207,107,.55);animation:ring 3s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(62,207,107,.5)}70%{box-shadow:0 0 0 16px rgba(62,207,107,0)}100%{box-shadow:0 0 0 0 rgba(62,207,107,0)}}

@media(prefers-reduced-motion:reduce){
  .hero::after,.trophy,.atrack.auto .mq,.hero .btn.pri::after{animation:none!important}
  .hero .awardlab,.hero .laurel,.hero h1,.hero .lead,.hero .hcta,.hero .hnote{opacity:1;transform:none;animation:none}
  .rv{opacity:1;transform:none;transition:none}
}

/* ============ Learn: course + lesson pages ============ */
.clevel.big{display:inline-block;margin-bottom:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(62,207,107,.16);color:var(--gold-l);border:1px solid rgba(62,207,107,.32)}
.pbar{margin-top:18px;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;max-width:520px}
.pbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold-d),var(--gold));transition:width .45s cubic-bezier(.2,.7,.3,1)}
.lwrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start}
.ltoc{position:sticky;top:96px}
.ltoc h5{margin:0 0 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ltoc ol{list-style:none;margin:0;padding:0}
.ltoc li{margin:0}
.ltoc a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:9px;text-decoration:none;color:var(--ink-2);font-size:14.5px;line-height:1.35;border-left:2px solid transparent;transition:background .18s,color .18s,border-color .18s}
.ltoc a:hover{background:rgba(62,207,107,.08);color:var(--ink)}
.ltoc a.on{background:rgba(62,207,107,.12);color:var(--ink);border-left-color:var(--gold);font-weight:600}
.ltoc .ln{font-variant-numeric:tabular-nums;font-size:11.5px;font-weight:700;color:var(--ink-3);flex:none}
.ltoc li.done a .ln::after{content:"\2713";margin-left:4px;color:var(--gold-d)}
.ltoc li.done a{color:var(--ink-3)}
.lmain{min-width:0}
.lesson{scroll-margin-top:110px;padding:26px 0 30px;border-bottom:1px solid var(--line)}
.lesson:first-child{padding-top:0}
.lhead .ln{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-d)}
.lhead h3{margin:6px 0 14px;font-size:clamp(21px,2.6vw,27px);line-height:1.22;letter-spacing:-.015em}
.lbody p{margin:0 0 14px;font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.lbody p:last-child{margin-bottom:0}
.lbody code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;padding:2px 6px;border-radius:5px;background:rgba(62,207,107,.12);color:var(--gold-d)}
.lbody strong{color:var(--ink)}
.lbody a{color:var(--gold-d);text-decoration:underline;text-underline-offset:2px}
.takeaway{margin-top:18px;padding:15px 18px;border-radius:12px;background:var(--sand);border:1px solid rgba(62,207,107,.35);border-left:3px solid var(--gold)}
.takeaway b{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-d);margin-bottom:5px}
.takeaway p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink);font-weight:500}
.ldone{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-size:14px;color:var(--ink-2);user-select:none;transition:background .18s,border-color .18s,color .18s}
.ldone:hover{border-color:var(--gold);color:var(--ink)}
.ldone input{accent-color:var(--gold);width:16px;height:16px;cursor:pointer}
.lesson.done .lhead h3{color:var(--ink-3)}
.lesson.done .ldone{background:rgba(62,207,107,.12);border-color:rgba(62,207,107,.45);color:var(--gold-d)}
.lnav{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:32px}
.lnav .btn{flex:1 1 220px;justify-content:center;text-align:center}
.ccard{position:relative;display:block;text-decoration:none;color:inherit}
a.ccard:hover{border-color:var(--gold);transform:translateY(-2px)}
.ccard .cgo{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-weight:700;font-size:14px;color:var(--gold-d)}
.ccard .cbar{margin-top:12px;height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.ccard .cbar i{display:block;height:100%;width:0;background:var(--gold);border-radius:99px;transition:width .4s}
@media(max-width:900px){
  .lwrap{grid-template-columns:1fr;gap:26px}
  .ltoc{position:static;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
  .ltoc ol{max-height:none}
}

/* ============ Glossary ============ */
.gtools{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.ginput{width:100%;max-width:420px;padding:12px 16px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:15.5px}
.ginput:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(62,207,107,.18)}
.gchips{display:flex;flex-wrap:wrap;gap:6px}
.gchip{padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:all .16s}
.gchip:hover{border-color:var(--gold);color:var(--ink)}
.gchip.on{background:var(--gold);border-color:var(--gold);color:var(--cta-ink)}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.gitem{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card);transition:border-color .18s,transform .18s}
.gitem:hover{border-color:var(--gold)}
.gitem h4{margin:0 0 7px;font-size:16.5px;letter-spacing:-.01em}
.gitem p{margin:0;font-size:14.6px;line-height:1.62;color:var(--ink-2)}
.gnone{margin-top:24px;color:var(--ink-3)}
/* ============ How to start: numbered steps ============ */
.nsteps{counter-reset:ns;display:grid;gap:16px}
.nstep{counter-increment:ns;position:relative;padding:20px 22px 20px 68px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.nstep::before{content:counter(ns,decimal-leading-zero);position:absolute;left:20px;top:18px;font-size:17px;font-weight:800;color:var(--gold-d);font-variant-numeric:tabular-nums}
.nstep h4{margin:0 0 8px;font-size:18px;letter-spacing:-.012em}
.nstep p{margin:0 0 10px;font-size:15.4px;line-height:1.66;color:var(--ink-2)}
.nstep p:last-child{margin-bottom:0}
.nstep .btn{margin-top:4px}
/* ============ Webinars ============ */
.wlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.wcard{display:flex;flex-direction:column;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .18s,transform .18s}
.wcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.wcard .wwhen{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d)}
.wcard h4{margin:8px 0 8px;font-size:18px;letter-spacing:-.012em}
.wcard p{margin:0 0 14px;font-size:15px;line-height:1.62;color:var(--ink-2);flex:1}
.wcard .wmeta{display:flex;gap:14px;font-size:13px;color:var(--ink-3);margin-bottom:14px;flex-wrap:wrap}
.wlive{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#B91C1C}
.wlive::before{content:"";width:7px;height:7px;border-radius:99px;background:#DC2626;animation:wpulse 1.6s ease-in-out infinite}
@keyframes wpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.wlive::before{animation:none}}

/* ============ Instrument detail pages ============ */
table.spec{display:table;width:100%;border-collapse:collapse;margin:0;gap:0;font-size:15px}
table.spec th,table.spec td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{font-weight:600;color:var(--ink-2);width:42%;white-space:nowrap}
table.spec td{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
table.spec tr:nth-child(odd){background:rgba(62,207,107,.045)}
.fine{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--ink-3);max-width:74ch}
.ilist{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:80ch}
.ilist li{position:relative;padding:15px 18px 15px 46px;border:1px solid var(--line);border-radius:13px;background:var(--card);font-size:15.4px;line-height:1.62;color:var(--ink-2)}
.ilist li::before{content:"";position:absolute;left:19px;top:22px;width:9px;height:9px;border-radius:99px;background:var(--gold)}
.itiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
a.itile{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit;padding:18px 20px}
a.itile b{font-size:17px;letter-spacing:-.01em}
a.itile span{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--gold-d)}
a.itile i{font-style:normal;font-size:13.4px;color:var(--ink-3);line-height:1.45}
.fgrid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
/* ============ Converter ============ */
.conv{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(150px,1.2fr) auto minmax(150px,1.2fr);gap:12px;align-items:end;max-width:820px}
.conv .cfield{display:flex;flex-direction:column;gap:6px}
.conv label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.conv input,.conv select{padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:16px}
.conv input:focus,.conv select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(62,207,107,.18)}
.swapbtn{padding:12px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--gold-d);cursor:pointer;font-size:18px;line-height:1;height:46px}
.swapbtn:hover{border-color:var(--gold)}
.cresult{margin-top:26px;padding:22px 24px;border-radius:16px;background:var(--sand);border:1px solid rgba(62,207,107,.35)}
.cresult b{display:block;font-size:clamp(26px,4vw,36px);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.cresult span{font-size:14px;color:var(--ink-2)}
@media(max-width:640px){.conv{grid-template-columns:1fr}.swapbtn{width:100%}}
.symlink{color:var(--gold-d);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(62,207,107,.4)}
.symlink:hover{border-bottom-color:var(--gold)}
table.cal{display:table;width:100%;border-collapse:collapse;font-size:14.8px}
table.cal th,table.cal td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.cal thead th{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;white-space:nowrap}
table.cal tbody tr:hover{background:rgba(62,207,107,.05)}
table.cal td:first-child,table.cal td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.imp{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.imp.high{background:rgba(220,38,38,.14);color:#B91C1C}
.imp.medium{background:rgba(217,119,6,.15);color:#B45309}
.imp.low{background:rgba(62,207,107,.16);color:var(--gold-d)}
a.wcard{text-decoration:none;color:inherit}

/* ══════════════════════════════════════════════════════════════════
   Headway page architecture — 1200px content inside 56px-radius
   panels, 32px sub-cards, 16px buttons, light-weight display type.
   ══════════════════════════════════════════════════════════════════ */
.wrap{max-width:1248px}
main > section{padding:0;margin:0 auto 16px;max-width:1248px}
main > section > .wrap{padding:0 24px}
/* the big rounded panel every Headway band sits in */
.panel{border-radius:var(--r-panel);padding:72px 64px;position:relative;overflow:hidden}
.panel.lt{background:var(--s1)}
.panel.dk{background:var(--ink);color:var(--wt)}
.panel.dk h1,.panel.dk h2,.panel.dk h3,.panel.dk h4{color:var(--wt)}
.panel.dk p{color:var(--wt-2)}
.panel.ph{padding:0;background:var(--ink)}
/* hero panel is defined above; keep later rules from fighting it */
.hero{border-radius:var(--r-panel)}
.hero h1{font-weight:400}
.hero .lead{font-size:clamp(15px,1.6vw,18px)}
.hero .btn{min-width:168px}
/* buttons — Headway shape */
.btn{border-radius:16px;font-weight:500;font-size:16px;padding:14px 26px;letter-spacing:0}
.btn.sm{border-radius:12px;padding:10px 18px;font-size:14.5px}
.btn.pri{background:var(--cta);color:var(--cta-ink)}
.btn.pri:hover{background:var(--cta-h)}
/* section heads — big, light, centred like theirs */
.shead{text-align:center;max-width:760px;margin:0 auto 44px}
.shead h2{margin-bottom:14px}
.shead .lead{font-size:18px;color:var(--tx-2)}
.shead .eyebrow{display:inline-block;margin-bottom:14px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--gold-d)}
.panel.dk .shead .eyebrow{color:var(--gold-l)}
/* sub-cards */
.fcard,.acard,.ncard,.itile,.tcard,.pcard,.ccard,.gitem,.wcard,.step,.nstep{border-radius:var(--r-card)}
.fcard{background:var(--paper);padding:28px;border:0;box-shadow:0 1px 2px rgba(38,33,25,.05)}
.panel.lt .fcard{background:#fff}
.panel.dk .fcard{background:rgba(255,255,255,.06);box-shadow:none}
/* the thin strip band (awards / logos) */
.strip{border-radius:var(--r-card);background:var(--s1);padding:34px 0;overflow:hidden}
@media(max-width:900px){
  .panel{padding:40px 20px;border-radius:32px}
  .hero{min-height:auto;padding:52px 18px;border-radius:32px}
  main > section{margin-bottom:10px}
}
@media(max-width:560px){
  .panel{padding:28px 16px;border-radius:var(--r-panel)}
}

/* ── landing page components (Headway layout, KNGX green) ── */
.hlabel{display:inline-block;margin-bottom:26px;font-size:14px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.82);padding:8px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.28)}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mqi{display:flex;gap:52px;width:max-content;animation:mqs 42s linear infinite}
.mqx{white-space:nowrap;font-size:15px;font-weight:500;color:var(--tx-2)}
.mqx::before{content:"★";margin-right:10px;color:var(--gold-d)}
@keyframes mqs{to{transform:translateX(-50%)}}
.tiles4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ticon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--sand);
  color:var(--gold-d);font-weight:700;font-size:18px;margin-bottom:16px}
.fcard h4{margin-bottom:8px}
.fcard.big{padding:0;overflow:hidden;background:var(--paper)}
.fcard.big img{width:100%;height:190px;object-fit:cover}
.fcard.big h3,.fcard.big p,.fcard.big .mlink{padding:0 26px}
.fcard.big h3{margin:22px 0 8px}
.fcard.big p{margin-bottom:14px}
.fcard.big .mlink{display:block;padding-bottom:26px}
.mlink{color:var(--gold-d);font-weight:500;font-size:15px}
.showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:64px}
.sc-img img{width:100%;max-width:340px;margin:0 auto;border-radius:26px}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:52px}
.revgrid .fcard{padding:26px}
.revgrid p{margin-bottom:14px;font-size:15.5px;line-height:1.65}
.revgrid b{font-size:14px;font-weight:500;color:var(--wt-3)}
.approw{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:rgba(255,255,255,.06);border-radius:var(--r-card);padding:40px}
.approw img{width:100%;border-radius:20px}
.fcard.acc{display:flex;flex-direction:column;padding:30px;text-decoration:none;transition:transform .2s var(--ease)}
.fcard.acc:hover{transform:translateY(-3px)}
.fcard.acc .pill{align-self:flex-start;padding:6px 14px;border-radius:999px;background:var(--sand);
  color:var(--gold-d);font-size:13px;font-weight:700;margin-bottom:18px}
.fcard.acc b{font-size:38px;font-weight:400;letter-spacing:-.02em;line-height:1}
.fcard.acc > span:not(.pill):not(.mlink){font-size:13.5px;color:var(--tx-3);margin-bottom:14px}
.fcard.acc p{flex:1;margin-bottom:16px}
.fcard.acc.best{outline:2px solid var(--gold)}
.ctarow{text-align:center;margin-top:36px}
.campaign,.learnband{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:64px}
.campaign{background:linear-gradient(135deg,#DCF6E4 0%,#A7E9BF 55%,#6FDA95 100%);color:var(--ink)}
.campaign h2,.learnband h2{margin-bottom:16px}
.campaign p,.learnband p{margin-bottom:26px;font-size:17px}
.campaign img,.learnband img{width:100%;border-radius:26px}
.fcard.news{padding:0;overflow:hidden;text-decoration:none;display:block;transition:transform .2s var(--ease)}
.fcard.news:hover{transform:translateY(-3px)}
.fcard.news img{width:100%;height:180px;object-fit:cover}
.fcard.news .nmeta{display:block;padding:20px 24px 0;font-size:13px;color:var(--tx-3)}
.fcard.news h4{padding:8px 24px 0}
.fcard.news p{padding:8px 24px 26px}
.finalcta{text-align:center;padding:88px 40px}
.finalcta h2{margin-bottom:16px}
.finalcta .lead{max-width:52ch;margin:0 auto 30px}
.finalcta .hcta{justify-content:center}
@media(max-width:1000px){
  .tiles4{grid-template-columns:1fr 1fr}
  .tiles3,.revgrid{grid-template-columns:1fr}
  .showcase,.campaign,.learnband,.approw{grid-template-columns:1fr;padding:44px 26px}
  .showcase{gap:32px}
}
@media(max-width:560px){
  .tiles4{grid-template-columns:1fr 1fr;gap:12px}
  .tiles4 .fcard{padding:18px 16px}
  .tiles4 .ticon{width:36px;height:36px;border-radius:11px;font-size:15px;margin-bottom:11px}
  .tiles4 h4{font-size:16px}
  .tiles4 p{font-size:13.5px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){ .mqi{animation:none} }

/* ── mobile performance: blur and heavy compositing are the main cause of
   scroll jank on phones. Drop the backdrop filters below 900px, promote only
   the marquee, and stop the reveal animations from thrashing layout. ── */
@media (max-width:900px){
  header,body.floathead header.stuck{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    background:rgba(11,13,18,.96)}
  .trophy,.laurel span{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  .fcard,.acard,.ncard,.itile,.gitem,.wcard{box-shadow:none}
  .panel{contain:layout paint}
}
.mqi{will-change:transform}
.rv{will-change:opacity,transform}
.rv.in{will-change:auto}
img{content-visibility:auto}
.panel.dk,.panel.lt{contain:layout style}