/* fc-theme-v1: dark styles follow the Light / Dark / System choice */
/* FirstClick Digital Skills — 2026 */
:root{
--ink:#0a1420;--ink-2:#16283a;--muted:#5b7286;--line:#dfe6ee;--bg:#f6f8fb;--card:#fff;
--navy:#0b2239;--navy-2:#143c63;--sky:#2e86de;--sky-soft:#e8f1fb;--bronze:#b7791f;--bronze-soft:#fbf1df;
--good:#12704a;--focus:#2e86de;
--r:16px;--r-lg:26px;
--sh-1:0 1px 2px rgba(11,34,57,.06);
--sh-2:0 6px 20px rgba(11,34,57,.08);
--sh-3:0 20px 50px rgba(11,34,57,.14);
--max:1100px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#eef4fa;--ink-2:#cfe0ef;--muted:#9db0c2;--line:#22323f;--bg:#080e15;--card:#101a24;--navy:#0d2a45;--navy-2:#1b4d7d;--sky:#63a7ea;--sky-soft:#12283d;--bronze:#d9a54e;--bronze-soft:#2a2113;--good:#5cc79a;--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 8px 24px rgba(0,0,0,.45);--sh-3:0 24px 60px rgba(0,0,0,.55)}}:root[data-theme="dark"]{--ink:#eef4fa;--ink-2:#cfe0ef;--muted:#9db0c2;--line:#22323f;--bg:#080e15;--card:#101a24;--navy:#0d2a45;--navy-2:#1b4d7d;--sky:#63a7ea;--sky-soft:#12283d;--bronze:#d9a54e;--bronze-soft:#2a2113;--good:#5cc79a;--sh-1:0 1px 2px rgba(0,0,0,.4);--sh-2:0 8px 24px rgba(0,0,0,.45);--sh-3:0 24px 60px rgba(0,0,0,.55)}
*{box-sizing:border-box}
html{font-size:106.25%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
a{color:var(--sky)}
img{max-width:100%}
svg{max-width:100%}
.logo svg,.siteLogo svg{flex:0 0 auto;width:54px;height:46px}
@media(max-width:520px){.logo svg,.siteLogo svg{width:46px;height:40px}}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--card);padding:10px 16px;border-radius:10px;z-index:99}

/* ---------- header ---------- */
header.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:14px;padding:10px 20px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.02em;white-space:nowrap;font-size:1.3rem;line-height:1.02}
.logo small{display:block;font-weight:500;font-size:.7rem;color:var(--muted);letter-spacing:0}
nav.main{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.main a{text-decoration:none;color:var(--ink-2);padding:9px 13px;border-radius:99px;font-size:.92rem;font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
nav.main a:hover{background:var(--sky-soft);color:var(--navy)}
nav.main a[aria-current="page"]{color:var(--sky)}
nav.main a.cta{background:var(--navy);color:#fff;box-shadow:var(--sh-2)}
nav.main a.cta:hover{background:var(--navy-2);color:#fff}
nav.main a.cta2{border:1.5px solid var(--line)}
.menuToggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);font-weight:700}
@media(max-width:900px){
 .menuToggle{display:block}
 nav.main{position:fixed;inset:64px 0 auto 0;background:var(--card);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:2px;padding:12px 16px 18px;box-shadow:var(--sh-3);display:none}
 nav.main.open{display:flex}
 nav.main a{padding:14px 12px;border-radius:12px;font-size:1rem}
 nav.main a.cta,nav.main a.cta2{text-align:center;justify-content:center;margin-top:6px}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 46px;background:radial-gradient(1100px 520px at 88% -8%,var(--sky-soft),transparent 60%),radial-gradient(760px 420px at -10% 10%,var(--bronze-soft),transparent 55%)}
.hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:26px 26px;opacity:.5;pointer-events:none;mask-image:linear-gradient(180deg,#000,transparent 75%)}
.hgrid{display:grid;gap:28px;align-items:center;position:relative;z-index:1}
@media(min-width:880px){.hgrid{grid-template-columns:1.06fr .94fr;gap:40px}}
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);color:var(--navy);border-radius:99px;padding:7px 15px;font-size:.82rem;font-weight:700;box-shadow:var(--sh-1)}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--bronze);display:inline-block}
h1{font-size:clamp(2.1rem,5.6vw,3.4rem);line-height:1.04;letter-spacing:-.03em;margin:.45em 0 .3em;font-weight:800}
h1 em{font-style:normal;color:var(--sky);position:relative;white-space:nowrap}
h1 em:after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--bronze);opacity:.35;border-radius:99px}
.lead{font-size:1.14rem;color:var(--muted);max-width:46ch;margin:0 0 22px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:.88rem;color:var(--muted)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:17px;height:17px;fill:var(--good);flex:0 0 auto}
.heroCard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-3)}
.heroCard img{display:block;border-radius:var(--r);width:100%}
.floatChip{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:var(--sh-2);font-size:.82rem;font-weight:700;display:flex;align-items:center;gap:8px}
.floatChip b{color:var(--sky)}
.fc-a{left:-14px;bottom:26px}
.fc-b{right:-10px;top:24px}
@media(max-width:560px){.fc-a{left:6px;bottom:10px}.fc-b{right:6px;top:10px}}

/* ---------- strips & sections ---------- */
.alertstrip{background:var(--navy);color:#fff;font-size:.93rem}
.alertstrip .wrap{padding:12px 20px;display:flex;gap:10px;align-items:flex-start}
.alertstrip a{color:#fff;text-underline-offset:3px}
.alertstrip .dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--bronze);margin-top:8px;box-shadow:0 0 0 4px rgba(183,121,31,.25)}
main{padding:10px 0 20px}
section.blk{padding:44px 0}
section.blk+section.blk{border-top:1px solid var(--line)}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;font-weight:800;color:var(--sky);margin:0 0 6px}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 .4em;font-weight:800}
h3{font-size:1.06rem;margin:0 0 .3em;font-weight:700;letter-spacing:-.01em}
p{margin:.6em 0}
.sub{color:var(--muted);max-width:58ch}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}

/* ---------- cards ---------- */
.grid{display:grid;gap:16px;margin-top:22px}
@media(min-width:700px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-1);transition:transform .18s ease,box-shadow .18s ease}
.card.hov:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.card .pic{background:var(--sky-soft);border-radius:12px;padding:10px;margin:-4px 0 14px}
.card .pic img{display:block;border-radius:8px}
.num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--navy);color:#fff;font-weight:800;margin-bottom:10px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-1)}
.stat b{display:block;font-size:1.9rem;line-height:1;letter-spacing:-.02em;color:var(--navy);font-weight:800}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stat b{color:var(--sky)}}:root[data-theme="dark"] .stat b{color:var(--sky)}
.stat span{font-size:.84rem;color:var(--muted);display:block;margin-top:7px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:14px 26px;border-radius:14px;font-weight:700;text-decoration:none;border:2px solid transparent;background:var(--navy);color:#fff;box-shadow:var(--sh-2);transition:transform .15s,background .15s}
.btn:hover{background:var(--navy-2);transform:translateY(-1px)}
.btn.alt{background:var(--bronze)}
.btn.alt:hover{background:#9c660f}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--card);border-color:var(--sky);color:var(--sky)}
.btn.block{width:100%;margin-top:12px}
.btn svg{width:18px;height:18px;fill:currentColor}

/* ---------- panels ---------- */
.panel{border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-2);background:linear-gradient(140deg,var(--navy),var(--navy-2));color:#fff;position:relative;overflow:hidden}
.panel:after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.06)}
.panel h2{color:#fff;margin-bottom:.2em}
.panel p{color:rgba(255,255,255,.82);max-width:54ch}
.panel .btn{background:#fff;color:var(--navy)}
.panel .btn:hover{background:var(--bronze-soft)}
.panel.soft{background:var(--bronze-soft);color:var(--ink)}
.panel.soft h2{color:var(--ink)}
.panel.soft p{color:var(--muted)}
.panel.soft .btn{background:var(--navy);color:#fff}

/* ---------- lists, prices, steps ---------- */
.price{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line);align-items:flex-start}
.price:first-of-type{border-top:none}
.price b{white-space:nowrap;font-size:1.02rem}
.free{color:var(--good);font-weight:800}
.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.steps li{counter-increment:s;display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-1)}
.steps li:before{content:counter(s);flex:0 0 34px;height:34px;border-radius:11px;background:var(--sky-soft);color:var(--navy);font-weight:800;display:grid;place-items:center}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .steps li:before{color:var(--sky)}}:root[data-theme="dark"] .steps li:before{color:var(--sky)}
.note{background:var(--bronze-soft);border:1px solid color-mix(in srgb,var(--bronze) 35%,transparent);padding:16px 18px;border-radius:var(--r);margin-top:22px}
.tick{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.tick li{display:flex;gap:11px;align-items:flex-start}
.tick svg{width:20px;height:20px;fill:var(--good);flex:0 0 auto;margin-top:2px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--sky);font-weight:800}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--muted);margin-bottom:0}

/* ---------- forms ---------- */
input,textarea,select{width:100%;font:inherit;padding:14px;border-radius:13px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);min-height:54px}
input:focus,textarea:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 4px var(--sky-soft)}
label{display:block;font-weight:700;margin:16px 0 7px}

/* ---------- footer ---------- */
footer{background:var(--card);border-top:1px solid var(--line);margin-top:30px;padding:36px 0 40px}
.fgrid{display:grid;gap:26px}
@media(min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 .7em}
.flist{display:grid;gap:2px}
.flist a{display:block;padding:7px 0;text-decoration:none;color:var(--ink-2);font-size:.94rem}
.flist a:hover{color:var(--sky)}
.social{display:flex;gap:10px;margin:12px 0 0}
.social a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--navy);color:#fff}
.social a:hover{background:var(--sky)}
.social svg{width:21px;height:21px;fill:currentColor}
.fine{font-size:.85rem;color:var(--muted)}
.legalbar{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}

/* mobile sticky call to action */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none}
.stickycta .btn{width:100%;min-height:50px}
@media(max-width:700px){.stickycta{display:block}body{padding-bottom:78px}}

/* reveal */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion:reduce){.rv,.rv.in{opacity:1;transform:none;transition:none}.card.hov:hover{transform:none}}

/* course detail expander */
.more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.more summary{cursor:pointer;list-style:none;font-weight:700;color:var(--sky);display:flex;align-items:center;gap:8px;min-height:44px}
.more summary::-webkit-details-marker{display:none}
.more summary:after{content:"›";transform:rotate(90deg);font-size:1.3rem;line-height:1;margin-left:auto;transition:transform .2s}
.more[open] summary:after{transform:rotate(-90deg)}
.moreBody{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.more h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:16px 0 8px}
.lessonList{margin:0;padding-left:1.25em;display:grid;gap:7px;color:var(--ink2);font-size:.95rem}
.lessonList li::marker{color:var(--sky);font-weight:700}
.fine{font-size:.85rem;color:var(--muted)}

/* --- hover and focus life --- */
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:color-mix(in srgb,var(--sky) 40%,var(--line))}
.card .pic{overflow:hidden}
.card .pic img{transition:transform .35s ease}
.card:hover .pic img{transform:scale(1.04)}
.stat{transition:transform .18s ease,box-shadow .18s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.steps li{transition:transform .18s ease,box-shadow .18s ease}
.steps li:hover{transform:translateX(3px);box-shadow:var(--sh2)}
.steps li:hover:before{background:var(--navy);color:#fff}
.price{transition:background .18s ease;border-radius:10px;padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
.price:hover{background:var(--sky-soft)}
.tick li{transition:transform .15s ease}
.tick li:hover{transform:translateX(3px)}
.faq details{transition:background .18s ease;border-radius:10px;padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px}
.faq details:hover{background:var(--card)}
.faq summary:hover{color:var(--sky)}
.flist a{transition:transform .15s ease,color .15s ease}
.flist a:hover{transform:translateX(3px)}
.social a{transition:transform .18s ease,background .18s ease}
.social a:hover{transform:translateY(-3px)}
.heroCard{transition:transform .3s ease,box-shadow .3s ease}
.heroCard:hover{transform:translateY(-4px)}
.heroCard:hover .floatChip{transform:translateY(-2px)}
.floatChip{transition:transform .3s ease}
.kicker{transition:box-shadow .2s ease}
.kicker:hover{box-shadow:var(--sh2)}
.more summary:hover{text-decoration:underline;text-underline-offset:3px}
a{transition:color .15s ease}
.alertstrip a:hover{opacity:.85}
.panel .btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.card:hover,.stat:hover,.steps li:hover,.heroCard:hover{transform:none}}

.logo svg{transition:transform .25s ease}
.logo:hover svg{transform:rotate(-3deg) scale(1.05)}
.bar .wrap{padding:12px 20px}
@media(max-width:520px){.logo{font-size:1.12rem}.logo svg{width:46px;height:40px}}
.siteLogo{font-size:1.3rem;gap:12px;letter-spacing:-.02em}
.siteLogo small{font-weight:600;font-size:.72rem;color:var(--sky);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.siteLogo svg{transition:transform .25s ease}
.siteLogo:hover svg{transform:rotate(-3deg) scale(1.05)}

/* spot the scam */
.spotTop{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}
.msgBubble{background:var(--sky-soft);border-radius:18px 18px 18px 6px;padding:18px;font-size:1.02rem;line-height:1.5;min-height:96px}
.spotBtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.spotBtns .btn{width:100%;max-width:none;margin:0}
.fb{padding:14px 16px;border-radius:14px;margin-top:12px}
.fb.good{background:#e4f4ec;border:1px solid rgba(18,112,74,.35)}
.fb.bad{background:#fbeae8;border:1px solid rgba(163,48,42,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fb.good{background:#11291f;border-color:rgba(92,199,154,.4)}:root:not([data-theme="light"]) .fb.bad{background:#2d1917;border-color:rgba(239,139,128,.4)}}:root[data-theme="dark"] .fb.good{background:#11291f;border-color:rgba(92,199,154,.4)}:root[data-theme="dark"] .fb.bad{background:#2d1917;border-color:rgba(239,139,128,.4)}
/* before / after */
.baCard p{margin:.35em 0 .9em}
.baTag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.baTag.before{background:var(--bronze-soft);color:var(--bronze)}
.baTag.after{background:var(--sky-soft);color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .baTag.after{color:var(--sky)}}:root[data-theme="dark"] .baTag.after{color:var(--sky)}
/* alerts list */
.alertItem{border-left:4px solid var(--bronze);padding:4px 0 4px 16px;margin:18px 0}
.alertItem h3{margin-bottom:.2em}
.alertItem .when{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
/* flyer */
.flyer{background:#fff;color:#0b2239;border:1px solid var(--line);border-radius:18px;padding:34px;text-align:center;box-shadow:var(--sh2)}
.flyer h2{font-size:1.9rem;margin:.2em 0}
.flyer .qr{width:190px;height:190px;margin:18px auto 8px;display:block}
.flyer ul{text-align:left;max-width:420px;margin:14px auto}
@media print{header.bar,footer,.stickycta,.noprint{display:none!important}.flyer{border:none;box-shadow:none;padding:0}body{background:#fff}}

.founder{text-align:center}
.fPhoto{width:96px;height:96px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(140deg,var(--navy),var(--sky));color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.6rem;box-shadow:var(--sh2)}
.founder blockquote{margin:0;font-size:1.06rem;line-height:1.55;color:var(--ink)}
.founder blockquote p{margin:0}

/* ---- dark header bar ---- */
header.bar,.siteBar{background:linear-gradient(120deg,#08192b 0%,#0b2239 45%,#123a5f 100%);border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:none}
header.bar .wrap,.siteBar .in{padding:14px 20px}
.logo,.siteLogo{color:#fff}
.logo small,.siteLogo small{color:#8fc4f2}
.logoMark{width:52px;height:44px;flex:0 0 auto;transition:transform .25s ease}
.logo:hover .logoMark,.siteLogo:hover .logoMark{transform:rotate(-3deg) scale(1.05)}
nav.main a,.siteNav a{color:rgba(255,255,255,.86)}
nav.main a:hover,.siteNav a:hover{background:rgba(255,255,255,.12);color:#fff}
nav.main a[aria-current="page"],.siteNav a.on{color:#fff;background:rgba(255,255,255,.16)}
nav.main a.cta,.siteNav a.go{background:var(--bronze);color:#150e02;box-shadow:0 6px 18px rgba(183,121,31,.35)}
nav.main a.cta:hover,.siteNav a.go:hover{background:#d08f27;color:#150e02}
nav.main a.cta2{border:1.5px solid rgba(255,255,255,.35);color:#fff}
nav.main a.cta2:hover{background:rgba(255,255,255,.14)}
.menuToggle,.siteMenu{border-color:rgba(255,255,255,.35);color:#fff}
@media(max-width:900px){nav.main{background:#0b2239}nav.main a{color:#fff}}
@media(max-width:820px){.siteNav{background:#0b2239}.siteNav a{color:#fff}}
footer .logo,footer .logo small{color:var(--ink)}
footer .logo small{color:var(--muted)}
.hero{padding-top:44px}

nav.main{gap:2px}
nav.main a{padding:9px 11px;font-size:.89rem}
@media(min-width:901px) and (max-width:1200px){nav.main a{padding:8px 9px;font-size:.85rem}.logo{font-size:1.15rem}}
.hero{background:linear-gradient(180deg,#0b2239 0,#0b2239 86px,transparent 86px),radial-gradient(1000px 460px at 85% 0,var(--sky-soft),transparent 62%),radial-gradient(700px 380px at -5% 12%,var(--bronze-soft),transparent 58%),var(--bg)}
.hero:after{mask-image:linear-gradient(180deg,transparent 90px,#000 140px,transparent 78%)}

/* ---- 2026 nav: no pill backgrounds, animated underline ---- */
nav.main a,.siteNav a{position:relative;background:none!important;border-radius:0;padding:10px 14px;color:rgba(255,255,255,.82);overflow:visible}
nav.main a:hover,.siteNav a:hover{background:none!important;color:#fff}
nav.main a:not(.cta):not(.cta2):after,.siteNav a:not(.go):after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sky),var(--bronze));transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.65,0,.35,1)}
nav.main a:not(.cta):not(.cta2):hover:after,nav.main a[aria-current="page"]:after,.siteNav a:not(.go):hover:after,.siteNav a.on:after{transform:scaleX(1)}
nav.main a[aria-current="page"],.siteNav a.on{color:#fff;background:none!important}
nav.main a:not(.cta):not(.cta2):hover,.siteNav a:not(.go):hover{transform:translateY(-1px)}
nav.main a{transition:color .2s ease,transform .2s ease}
/* call to action: soft glass button with a light sweep */
nav.main a.cta,.siteNav a.go{position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,var(--bronze),#d69a33);color:#160f03;box-shadow:0 8px 22px rgba(183,121,31,.34);padding:11px 18px}
nav.main a.cta:after,.siteNav a.go:after{content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .55s ease}
nav.main a.cta:hover:after,.siteNav a.go:hover:after{left:140%}
nav.main a.cta2{border:1px solid rgba(255,255,255,.28);border-radius:12px;color:#fff;padding:10px 16px;transition:border-color .2s,background .2s}
nav.main a.cta2:hover{border-color:var(--sky);background:rgba(46,134,222,.18)!important}
@media(max-width:900px){nav.main a:after{display:none}nav.main a:hover{transform:none}nav.main a{padding:14px 12px;border-radius:10px}nav.main a:hover{background:rgba(255,255,255,.1)!important}}

/* fit the bar on medium screens, and drop the leftover dark band under the header */
.hero{background:radial-gradient(1000px 460px at 85% -5%,var(--sky-soft),transparent 62%),radial-gradient(700px 380px at -5% 8%,var(--bronze-soft),transparent 58%),var(--bg);padding-top:52px}
.hero:after{mask-image:linear-gradient(180deg,#000,transparent 76%)}
@media(min-width:901px) and (max-width:1330px){
 nav.main a{padding:9px 9px;font-size:.84rem}
 nav.main a:not(.cta):not(.cta2):after{left:9px;right:9px}
 nav.main a.cta{padding:10px 14px}
 nav.main a.cta2{padding:9px 12px}
 .logo{font-size:1.1rem}.logo small{font-size:.66rem}
 .logoMark{width:44px;height:38px}
}
@media(min-width:901px) and (max-width:1120px){.logo small{display:none}}

/* steady nav: identical metrics whatever the state */
nav.main a,.siteNav a{font-weight:600;letter-spacing:0;line-height:1.2;transform:none!important}
nav.main a:hover,.siteNav a:hover{font-weight:600}
nav.main a[aria-current="page"],.siteNav a[aria-current="page"]{font-weight:600;color:#fff}
nav.main a:not(.cta):not(.cta2):after,.siteNav a:not(.cta):not(.cta2):after{height:3px;bottom:2px;background:linear-gradient(90deg,var(--sky),var(--bronze))}
nav.main a[aria-current="page"]:after,.siteNav a[aria-current="page"]:after{transform:scaleX(1)}

nav.main a:not(.cta):not(.cta2),.siteNav a:not(.cta):not(.cta2){padding-bottom:12px}
nav.main a:not(.cta):not(.cta2)::after,.siteNav a:not(.cta):not(.cta2)::after{content:"";display:block;position:absolute;left:10px;right:10px;bottom:5px;height:3px;border-radius:3px;background:linear-gradient(90deg,#63a7ea,#e3a63f);transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.65,0,.35,1);opacity:1}
nav.main a:not(.cta):not(.cta2):hover::after,.siteNav a:not(.cta):not(.cta2):hover::after{transform:scaleX(1)}
nav.main a[aria-current="page"]::after,.siteNav a[aria-current="page"]::after{transform:scaleX(1)!important}
nav.main a[aria-current="page"],.siteNav a[aria-current="page"]{color:#fff!important}

/* how it works: expandable steps */
.stepList{display:grid;gap:12px}
.stepRow{display:block;padding:18px 20px;transition:border-color .2s,box-shadow .2s}
.stepRow.open{border-color:var(--sky);box-shadow:var(--sh2)}
.stepRow:before{float:left;margin-right:16px}
.stepBody{overflow:hidden}
.stepBody strong{display:block;font-size:1.06rem;letter-spacing:-.01em}
.stepBody .sub{margin:.25em 0 .4em}
.readMore{font-weight:700;padding:4px 0;min-height:36px;text-decoration:none}
.readMore:hover{text-decoration:underline;text-underline-offset:3px}
.stepDetail{clear:both;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);animation:slideIn .28s ease}
.stepDetail p{color:var(--ink2);font-size:.97rem}
.stepDetail p strong{color:var(--ink)}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.detailBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.detailBtns .btn{margin-top:0;min-height:48px;padding:11px 20px;max-width:none;width:auto}
@media (prefers-reduced-motion:reduce){.stepDetail{animation:none}}

/* steps: clean block layout, number on its own line */
.stepList li{display:block!important;padding:18px 20px}
.stepList li:before{float:none!important;display:inline-grid!important;margin:0 0 10px 0!important;width:34px;height:34px}
.stepList .stepBody{overflow:visible;display:block}
.stepList .stepDetail{clear:none}
@media(min-width:620px){
 .stepList li{display:grid!important;grid-template-columns:34px 1fr;column-gap:16px;row-gap:0}
 .stepList li:before{margin:0!important;grid-row:1}
 .stepList .stepBody{grid-column:2}
 .stepList .stepDetail{grid-column:2}
}

/* read more reads as a link, not a box */
.readMore{background:none;border:none;color:var(--sky);padding:2px 0;min-height:32px}
.readMore:hover{color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .readMore:hover{color:#fff}}:root[data-theme="dark"] .readMore:hover{color:#fff}

/* eight items plus two buttons: tighten from 1400 down */
@media(min-width:901px) and (max-width:1400px){
 nav.main a,.siteNav a{padding:9px 8px;font-size:.83rem}
 nav.main a:not(.cta):not(.cta2)::after,.siteNav a:not(.go):not(.cta):not(.cta2)::after{left:8px;right:8px}
 nav.main a.cta,.siteNav a.cta{padding:10px 13px;font-size:.83rem}
 nav.main a.cta2,.siteNav a.cta2{padding:9px 11px;font-size:.83rem}
 .logo,.siteLogo{font-size:1.05rem}
 .logoMark{width:42px;height:36px}
 .logo small,.siteLogo small{font-size:.62rem}
}
@media(min-width:901px) and (max-width:1150px){.logo small,.siteLogo small{display:none}}

/* courses: even cards, even artwork */
.grid.levels{display:grid;gap:16px;align-items:start}
@media(min-width:700px){.grid.levels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.grid.levels{grid-template-columns:repeat(3,1fr)}}
.grid.levels .card{display:flex;flex-direction:column}
.card .pic{aspect-ratio:16/10;display:grid;place-items:center;padding:14px;overflow:hidden;background:var(--sky-soft);border-radius:12px}
.card .pic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.grid.levels .price{align-items:flex-start}
.grid.levels .fine{margin-top:auto}
.more[open] .lblOpen{display:none}
.more:not([open]) .lblShut{display:none}
.closeInside{margin-top:16px;width:auto;min-height:46px;padding:10px 20px}

/* courses: equal-height tiles, aligned rows */
.grid.levels{align-items:stretch}
.grid.levels .card{height:100%;display:flex;flex-direction:column}
.grid.levels .card .pic{flex:0 0 auto}
.grid.levels .card .price{flex:0 0 auto;min-height:92px}
.grid.levels .card .price>span{display:block}
.grid.levels .card>p.fine{flex:1 0 auto;margin-bottom:6px}
.grid.levels .more{margin-top:auto}
/* an open tile grows downward without stretching its neighbours */
.grid.levels .card:has(details[open]){align-self:start}

/* help search */
.helpSearch{margin:18px 0 6px;position:relative}
.hsWrap{position:relative}
.hsWrap input{padding-left:50px;padding-right:46px;min-height:58px;font-size:1.02rem}
.hsIcon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;fill:var(--muted);pointer-events:none}
.hsClear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:none;background:none;font-size:1.4rem;color:var(--muted);border-radius:10px;line-height:1}
.hsClear:hover{background:var(--sky-soft);color:var(--sky)}
.hsList{list-style:none;margin:10px 0 0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);overflow:hidden}
.hsList li+li{border-top:1px solid var(--line)}
.hsList button{display:block;width:100%;text-align:left;background:none;border:none;padding:14px 16px;cursor:pointer}
.hsList button:hover{background:var(--sky-soft)}
.hsQ{display:block;font-weight:700;color:var(--ink)}
.hsA{display:block;font-size:.88rem;color:var(--muted);margin-top:3px}
.hsNone{padding:14px 16px;color:var(--muted);font-size:.92rem}
.flash{animation:flashHit 1.6s ease}
@keyframes flashHit{0%{background:var(--sky-soft)}100%{background:transparent}}
.sr{position:absolute;left:-9999px}

/* ---- dark footer ---- */
footer,.siteFoot{background:linear-gradient(160deg,#08192b 0%,#0b2239 55%,#102f4e 100%);border-top:none;color:#dbe7f2;margin-top:0;padding:46px 0 40px;position:relative}
footer:before,.siteFoot:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--sky),var(--bronze),transparent);opacity:.6}
footer h2,.siteFoot h4{color:#8fc4f2;text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:800}
footer .logo,footer .logo small{color:#fff}
footer .logo small{color:#8fc4f2}
footer .fine,.siteFoot .fineprint,.siteFoot .fine{color:rgba(219,231,242,.72)}
footer a,.siteFoot a{color:#dbe7f2}
.flist a{color:rgba(219,231,242,.86)}
.flist a:hover{color:#fff}
footer .social a,.siteFoot .social a{background:rgba(255,255,255,.1);color:#fff}
footer .social a:hover,.siteFoot .social a:hover{background:var(--sky)}
.legalbar{border-top:1px solid rgba(255,255,255,.14);color:rgba(219,231,242,.7)}
.legalbar .fine{color:rgba(219,231,242,.7)}
/* the page never ends on a bare white strip */
body{background:var(--bg)}
main{padding-bottom:40px}
main>.wrap>section.blk:last-child{padding-bottom:46px}

/* verify: form column, sensible button */
#vc{max-width:430px}
.checkBtn{margin-top:14px;width:auto;min-width:220px;padding:13px 26px}
/* one brand size everywhere */
.logo,.siteLogo{font-size:1.15rem}
.logo small,.siteLogo small{font-size:.68rem}
.logoMark{width:48px;height:41px}

/* the brand line never disappears */
.logo small,.siteLogo small{display:block!important}
@media(min-width:901px) and (max-width:1250px){
 .logo,.siteLogo{font-size:1rem}
 .logo small,.siteLogo small{font-size:.6rem;letter-spacing:.04em}
 .logoMark{width:42px;height:36px}
 nav.main a,.siteNav a{padding:9px 7px;font-size:.8rem}
 nav.main a:not(.cta):not(.cta2)::after,.siteNav a:not(.go):not(.cta):not(.cta2)::after{left:7px;right:7px}
 nav.main a.cta,.siteNav a.cta{padding:9px 12px;font-size:.8rem}
 nav.main a.cta2,.siteNav a.cta2{padding:8px 10px;font-size:.8rem}
}
/* verify: button on its own line under the field */
.checkBtn{display:block;margin-top:14px}

.logo small,.siteLogo small{text-transform:none;letter-spacing:.02em;color:#9ecbf5}

/* text links: no underline, colour and arrow  instead */
a{text-decoration:none}
main a:not(.btn):not(.chip):not(.tab){text-decoration:none;font-weight:600;transition:color .15s ease}
main a:not(.btn):not(.chip):not(.tab):hover{color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main a:not(.btn):not(.chip):not(.tab):hover{color:#fff}}:root[data-theme="dark"] main a:not(.btn):not(.chip):not(.tab):hover{color:#fff}
.alertstrip a{text-decoration:none;font-weight:700;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:1px}
.alertstrip a:hover{border-bottom-color:#fff;color:#fff}
.sub a,p a{text-underline-offset:0}

/* ---- verify: breathing room under the field ---- */
.checkBtn{margin-top:18px}
#vc{margin-bottom:2px}

/* ---- header: never clip the buttons ---- */
.bar .wrap,.siteBar .in{flex-wrap:wrap;row-gap:8px;max-width:1180px}
nav.main,.siteNav{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
@media(min-width:901px) and (max-width:1300px){
 nav.main,.siteNav{flex-wrap:nowrap;margin-left:auto}
 nav.main a,.siteNav a{padding:8px 6px;font-size:.78rem}
 nav.main a:not(.cta):not(.cta2)::after,.siteNav a:not(.go):not(.cta):not(.cta2)::after{left:6px;right:6px}
 nav.main a.cta,.siteNav a.cta{padding:9px 11px;font-size:.78rem}
 nav.main a.cta2,.siteNav a.cta2{padding:8px 10px;font-size:.78rem}
 .logo,.siteLogo{font-size:.95rem;gap:8px}
 .logo small,.siteLogo small{font-size:.56rem}
 .logoMark{width:38px;height:33px}
 .bar .wrap,.siteBar .in{flex-wrap:nowrap;padding:10px 16px}
}

/* ---- footer links: colour change, no sliding ---- */
.flist a,footer a,.siteFoot a{transition:color .15s ease,background .15s ease}
.flist a:hover,footer a:hover,.siteFoot a:hover{transform:none!important;color:#7fc0f5}
.flist a{border-radius:8px;padding:7px 8px;margin-left:-8px}
.flist a:hover{background:rgba(255,255,255,.08)}
.tick li:hover,.steps li:hover{transform:none!important}
.card:hover{transform:none}
.stat:hover{transform:none}
.courseRow:hover{transform:none}
.lesson-btn:hover{transform:none}
.social a:hover{transform:none}
.heroCard:hover{transform:none}
.heroCard:hover .floatChip{transform:none}
.btn:hover{transform:none}

/* ---- page background: soft blue instead of near-white ---- */
:root{--bg:#e9f0f8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#080e15}}:root[data-theme="dark"]{--bg:#080e15}
body{background:var(--bg)}
.hero{background:radial-gradient(1000px 460px at 85% -5%,#dbe9f8,transparent 62%),radial-gradient(700px 380px at -5% 8%,var(--bronze-soft),transparent 58%),var(--bg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{background:radial-gradient(1000px 460px at 85% -5%,var(--sky-soft),transparent 62%),radial-gradient(700px 380px at -5% 8%,var(--bronze-soft),transparent 58%),var(--bg)}}:root[data-theme="dark"] .hero{background:radial-gradient(1000px 460px at 85% -5%,var(--sky-soft),transparent 62%),radial-gradient(700px 380px at -5% 8%,var(--bronze-soft),transparent 58%),var(--bg)}

/* header sizing: one row from 901px up */
@media(min-width:901px){
 .bar .wrap,.siteBar .in{flex-wrap:nowrap!important;max-width:1280px}
 nav.main,.siteNav{flex-wrap:nowrap!important;margin-left:auto}
}
@media(min-width:901px) and (max-width:1060px){
 nav.main a,.siteNav a{padding:7px 5px;font-size:.73rem}
 nav.main a:not(.cta):not(.cta2)::after,.siteNav a:not(.go):not(.cta):not(.cta2)::after{left:5px;right:5px}
 nav.main a.cta,.siteNav a.cta{padding:8px 9px;font-size:.73rem}
 nav.main a.cta2,.siteNav a.cta2{padding:7px 8px;font-size:.73rem}
 .logo,.siteLogo{font-size:.86rem;gap:6px}
 .logo small,.siteLogo small{display:none!important}
 .logoMark{width:34px;height:29px}
}

/* the call-to-action keeps its colour (an earlier rule was clearing it) */
nav.main a.cta,.siteNav a.cta,.siteNav a.go{background:linear-gradient(135deg,#c8862a,#e0a63c)!important;color:#16100300!important}
nav.main a.cta,.siteNav a.cta,.siteNav a.go{color:#1a1204!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:0 8px 20px rgba(200,134,42,.35)!important}
nav.main a.cta:hover,.siteNav a.cta:hover,.siteNav a.go:hover{background:linear-gradient(135deg,#d9972f,#f0b74a)!important;color:#1a1204!important}
nav.main a.cta2,.siteNav a.cta2{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.4)!important;color:#fff!important}
nav.main a.cta2:hover,.siteNav a.cta2:hover{background:rgba(255,255,255,.18)!important}
/* dark all the way to the bottom of the window */
html{background:#0b2239}
body{background:var(--bg)}
footer,.siteFoot{box-shadow:0 400px 0 400px #0b2239}

/* ---- links: colour change only, no movement, no underline ---- */
a,a:hover,a:focus{text-decoration:none!important}
footer a,.siteFoot a,.flist a{
  transform:none!important;transition:color .15s ease!important;
  background:none!important;padding:7px 0!important;margin-left:0!important;border-radius:0!important;
}
footer a:hover,.siteFoot a:hover,.flist a:hover{color:#8fc4f2!important;background:none!important;transform:none!important}
footer a:active,.siteFoot a:active{transform:none!important}
main a:not(.btn):not(.chip):not(.tab):hover{text-decoration:none!important;transform:none!important}
.alertstrip a{border-bottom:none!important;text-decoration:none!important;font-weight:700;color:#ffd79a}
.alertstrip a:hover{color:#fff}
.legalbar a:hover{color:#8fc4f2!important}

/* ---- stat tiles: quiet hover, no bouncing ---- */
.stat{position:relative;overflow:hidden;border:1px solid var(--line);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--sky),var(--bronze));opacity:0;transition:opacity .2s ease}
.stat:hover{border-color:color-mix(in srgb,var(--sky) 55%,var(--line));box-shadow:var(--sh2);background:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stat:hover{background:var(--card)}}:root[data-theme="dark"] .stat:hover{background:var(--card)}
.stat:hover:before{opacity:1}
.stat b{transition:color .2s ease}
.stat:hover b{color:var(--sky)}
/* the same quiet treatment on the content cards */
.card.hov,.grid .card{transition:border-color .2s ease,box-shadow .2s ease}
.grid .card:hover{border-color:color-mix(in srgb,var(--sky) 45%,var(--line));box-shadow:var(--sh2)}

/* ---- lighter page background, clearer edges ---- */
:root{--bg:#f4f8fc;--line:#dde6ef}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#080e15;--line:#22323f}}:root[data-theme="dark"]{--bg:#080e15;--line:#22323f}
body{background:var(--bg)}
.card,.stat,.steps li,.courseRow{border:1px solid var(--line);background:var(--card)}
section.blk+section.blk{border-top:1px solid var(--line)}
.hero{background:radial-gradient(1000px 460px at 85% -5%,#e6f0fa,transparent 62%),radial-gradient(700px 380px at -5% 8%,#fbf2e2,transparent 58%),var(--bg);border-bottom:1px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{background:radial-gradient(1000px 460px at 85% -5%,var(--sky-soft),transparent 62%),radial-gradient(700px 380px at -5% 8%,var(--bronze-soft),transparent 58%),var(--bg)}}:root[data-theme="dark"] .hero{background:radial-gradient(1000px 460px at 85% -5%,var(--sky-soft),transparent 62%),radial-gradient(700px 380px at -5% 8%,var(--bronze-soft),transparent 58%),var(--bg)}
.legalbar a{color:#8fc4f2}
.legalbar a:hover{color:#fff!important}

/* audience tiles: same shape and height as the course tiles */
.grid.audience{align-items:stretch}
.grid.audience .card{height:100%;display:flex;flex-direction:column}
.grid.audience .card .pic{flex:0 0 auto}
.grid.audience .card h3{margin-top:2px}
.grid.audience .card .sub{flex:1 0 auto}
.grid.audience .num{margin-bottom:8px}
@media(min-width:700px){.grid.audience{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1050px){.grid.audience{grid-template-columns:repeat(3,1fr)}}

.quoteBig{border-left:5px solid var(--bronze);background:var(--card);border:1px solid var(--line);border-left:5px solid var(--bronze);border-radius:0 16px 16px 0;padding:22px 24px;margin:0 0 18px;box-shadow:var(--sh1)}
.quoteBig p{margin:0;font-size:1.12rem;line-height:1.5;font-weight:600;color:var(--ink);letter-spacing:-.01em}

/* space between the two header buttons */
nav.main a.cta2,.siteNav a.cta2{margin-left:10px}
nav.main a.cta,.siteNav a.cta{margin-left:12px}
@media(min-width:901px) and (max-width:1300px){
 nav.main a.cta2,.siteNav a.cta2{margin-left:8px}
 nav.main a.cta,.siteNav a.cta{margin-left:10px}
}
@media(max-width:900px){
 nav.main a.cta,nav.main a.cta2,.siteNav a.cta,.siteNav a.cta2{margin-left:0;margin-top:8px}
}

/* ---- printable sheets ---- */
.sheet{background:#fff;color:#0b2239;border:1px solid var(--line);border-radius:16px;padding:34px 38px;box-shadow:var(--sh2);max-width:820px;margin:0 auto}
.sheetHead{display:flex;align-items:center;gap:12px;border-bottom:2px solid #0b2239;padding-bottom:12px;margin-bottom:18px}
.sheetHead strong{display:block;font-size:1rem;color:#0b2239}
.sheetHead span{font-size:.8rem;color:#55677a}
.sheet h1{font-size:1.9rem;margin:.1em 0 .5em;color:#0b2239;letter-spacing:-.02em}
.sheetSteps{padding-left:1.3em;margin:0;display:grid;gap:12px;font-size:1.06rem;line-height:1.5;color:#16283a}
.sheetSteps li::marker{font-weight:800;color:#17557f}
.sheetWarn{margin-top:22px;border:2px solid #b7791f;border-radius:12px;padding:14px 16px;background:#fdf6e9}
.sheetWarn strong{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:#8a5a12;margin-bottom:4px}
.sheetWarn p{margin:0;color:#16283a}
.sheetFoot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #d7e0ea;margin-top:22px;padding-top:12px;font-size:.82rem;color:#55677a}
.sheetTable{width:100%;border-collapse:collapse;margin-top:14px}
.sheetTable th{text-align:left;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:#55677a;border-bottom:2px solid #0b2239;padding:8px 6px}
.sheetTable td{border-bottom:1px solid #cfdae6;height:38px;padding:4px 6px}
@media print{
 header.bar,footer,.stickycta,.noprint,.siteBar,.siteFoot{display:none!important}
 body{background:#fff}
 main{padding:0}
 .sheet{border:none;box-shadow:none;border-radius:0;padding:0;max-width:none}
 .blk{padding:0}
 .sheetWarn{break-inside:avoid}
}
/* ---- community cards: clearer hover ---- */
.grid .card{position:relative;overflow:hidden}
.grid .card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--sky),var(--bronze));opacity:0;transition:opacity .2s ease}
.grid .card:hover:before{opacity:1}
.grid .card:hover h3{color:var(--sky)}
.grid .card h3{transition:color .2s ease}

/* contact form */
.phoneRow{display:flex;gap:8px;align-items:stretch;max-width:100%}
.flagBox{flex:0 0 56px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:var(--card);font-size:1.45rem;line-height:1}
.dialSel{flex:0 0 150px;min-width:0;padding:12px 8px;border-radius:13px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:inherit;min-height:54px}
.phoneRow input{flex:1 1 auto;min-width:0}
@media(max-width:560px){.phoneRow{flex-wrap:wrap}.dialSel{flex:1 1 60%}.phoneRow input{flex:1 1 100%}}
.cf-turnstile{margin:18px 0 6px;min-height:65px}
#cresult .fb{margin-top:14px}
.fb.good{background:#e4f4ec;border:1px solid rgba(18,112,74,.35);padding:14px 16px;border-radius:14px}
.fb.bad{background:#fbeae8;border:1px solid rgba(163,48,42,.35);padding:14px 16px;border-radius:14px}

/* how it works: hover on the six steps */
.stepList li{transition:border-color .2s ease,box-shadow .2s ease}
.stepList li:hover{border-color:color-mix(in srgb,var(--sky) 50%,var(--line));box-shadow:var(--sh2)}
.stepList li:hover:before{background:var(--navy);color:#fff}
.stepList li:hover .stepBody strong{color:var(--sky)}
.stepBody strong{transition:color .2s ease}

/* ---- error pages ---- */
.errWrap{padding-top:34px}
.errGrid{display:grid;gap:28px;align-items:center}
@media(min-width:860px){.errGrid{grid-template-columns:.95fr 1.05fr;gap:40px}}
.errArt{position:relative;padding-bottom:10px}
.screen{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);overflow:hidden;max-width:420px}
.screenBar{background:var(--navy);padding:10px 14px;display:flex;gap:7px}
.screenBar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);display:block}
.screenBar i:first-child{background:#e3a63f}
.screenBody{height:190px;display:grid;place-items:center;background:linear-gradient(180deg,var(--sky-soft),var(--card))}
.bigCode{font-size:4.6rem;font-weight:800;letter-spacing:-.04em;color:var(--navy);opacity:.22}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bigCode{color:var(--sky);opacity:.3}}:root[data-theme="dark"] .bigCode{color:var(--sky);opacity:.3}
.riley{display:block;width:210px;margin:-58px 0 0 auto;margin-right:22px;filter:drop-shadow(0 12px 18px rgba(11,34,57,.22))}
@media(min-width:860px){.riley{width:250px;margin-top:-72px}}
.errLinks{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;max-width:520px}
.errLinks a{padding:9px 0;font-weight:600}
@media(max-width:520px){.errLinks{grid-template-columns:1fr}}

/* error pages: Riley with his laptop */
.errArt{position:relative;display:grid;place-items:center;padding:10px 0}
.errCode{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:11rem;font-weight:800;letter-spacing:-.06em;color:var(--navy);opacity:.07;line-height:1;pointer-events:none;z-index:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .errCode{color:var(--sky);opacity:.12}}:root[data-theme="dark"] .errCode{color:var(--sky);opacity:.12}
.errArt .riley{position:relative;z-index:1;width:100%;max-width:420px;margin:0;filter:drop-shadow(0 18px 26px rgba(11,34,57,.18))}
.screen{display:none}
@media(max-width:700px){.errCode{font-size:7.5rem}.errArt .riley{max-width:320px}}

.errCode{top:8px;font-size:12rem;opacity:.06}
.errArt .riley{max-width:440px}

/* error pages: 404 number above Riley, so the page reads as an error */
.errArt{display:flex;flex-direction:column;align-items:center;padding:0}
.errCode{position:static;transform:none;font-size:9rem;line-height:.85;opacity:.14;margin:0 0 14px}
.errArt .riley{max-width:400px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .errCode{opacity:.24}}:root[data-theme="dark"] .errCode{opacity:.24}
@media(max-width:700px){.errCode{font-size:6rem;margin-bottom:10px}.errArt .riley{max-width:290px}}

/* contact page: country picker wide enough to show the full dialing code */
.dialSel{flex:0 0 250px}
@media(max-width:560px){.dialSel{flex:1 1 100%}}

/* header logo, a little larger */
header.bar .logoMark{width:58px;height:50px}
header.bar .logo{font-size:1.4rem}
@media(max-width:700px){header.bar .logoMark{width:50px;height:43px}header.bar .logo{font-size:1.22rem}}

/* "Protected by Cloudflare" badge, centered at the bottom of every footer */
.shieldBar{display:flex;justify-content:center;margin-top:16px}.shieldBar a{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border:1px solid rgba(255,255,255,.2);border-radius:99px;color:rgba(219,231,242,.88);font-size:.82rem;text-decoration:none;transition:border-color .2s ease,color .2s ease}.shieldBar a:hover{border-color:#8fc4f2;color:#fff}.shieldBar a{border-radius:99px!important;display:inline-flex!important;width:auto!important}.shieldBar svg{width:16px;height:16px;fill:#f6a23a;flex:0 0 auto}.shieldBar strong{font-weight:700}

/* home page community panel: text on the left, illustration on the right */
.panelSplit{display:grid;gap:18px;align-items:center}
.panelSplit .psArt{width:100%;max-width:360px;height:auto;justify-self:center}
@media(min-width:860px){.panelSplit{grid-template-columns:1.25fr .75fr;gap:28px}.panelSplit .psArt{max-width:380px;justify-self:end}}
.commArt{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 14px}
.panelSplit .psArt.onDark{background:#fff;border-radius:16px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.shieldBar .cfMark{width:30px;height:auto;display:block;flex:0 0 auto}

/* "Suggest a lesson" prompt used on several pages */
.suggestBand{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--bronze);border-radius:18px;padding:22px 24px;box-shadow:var(--sh-1);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.suggestBand>div{flex:1;min-width:240px}.suggestBand:hover{border-color:var(--sky);border-left-color:var(--bronze);box-shadow:var(--sh-2)}

/* 22 Sept 2026: text that was too dark to read in dark mode (navy on a dark background) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kicker,:root:not([data-theme="light"]) .stepPill.on,:root:not([data-theme="light"]) .quick strong,:root:not([data-theme="light"]) .kpi b,:root:not([data-theme="light"]) .pbarNum,:root:not([data-theme="light"]) .tag,:root:not([data-theme="light"]) .kpiRow b,:root:not([data-theme="light"]) .ptStep.done .ptSt{color:var(--ink)}}:root[data-theme="dark"] .kicker,:root[data-theme="dark"] .stepPill.on,:root[data-theme="dark"] .quick strong,:root[data-theme="dark"] .kpi b,:root[data-theme="dark"] .pbarNum,:root[data-theme="dark"] .tag,:root[data-theme="dark"] .kpiRow b,:root[data-theme="dark"] .ptStep.done .ptSt{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ptStep.done .ptSt{color:var(--good)}:root:not([data-theme="light"]) .kpiRow a:first-child{background:var(--card)!important;border-color:var(--line)!important}:root:not([data-theme="light"]) .kpiRow a:first-child b{color:var(--good)!important}}:root[data-theme="dark"] .ptStep.done .ptSt{color:var(--good)}:root[data-theme="dark"] .kpiRow a:first-child{background:var(--card)!important;border-color:var(--line)!important}:root[data-theme="dark"] .kpiRow a:first-child b{color:var(--good)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ptStep.current .ptSt{color:var(--bronze)}:root:not([data-theme="light"]) .pTop>span{color:var(--ink)!important}:root:not([data-theme="light"]) a.chip[href="delete-account.php"]{color:#ef8b80!important;border-color:#ef8b80!important}:root:not([data-theme="light"]) .avaEdit{color:#0b2239}}:root[data-theme="dark"] .ptStep.current .ptSt{color:var(--bronze)}:root[data-theme="dark"] .pTop>span{color:var(--ink)!important}:root[data-theme="dark"] a.chip[href="delete-account.php"]{color:#ef8b80!important;border-color:#ef8b80!important}:root[data-theme="dark"] .avaEdit{color:#0b2239}

/* 22 Sept 2026: one footer on every page, centered: the two legal lines, then the Cloudflare badge and the Appearance switch on one row */
footer .legalbar{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.fcBottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;margin-top:18px}
.fcBottom .shieldBar{margin:0}
.fcBottom .themePick{margin:0}

/* 23 Sept 2026 (Willie): every typing box has its label sitting on the box border, Twilio style, on every page */
.fl{position:relative;margin-top:20px}
.fl>label:not(.flFixed){position:absolute!important;left:12px;top:0;transform:translateY(-50%);margin:0!important;padding:0 6px;background:var(--card);color:var(--muted);font-weight:700!important;font-size:.78rem!important;pointer-events:none;transition:color .15s ease;line-height:1.15;max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important;z-index:3;text-transform:none;letter-spacing:0}
.fl:focus-within>label:not(.flFixed){color:var(--sky)}
.fl .iti{width:100%}
.fl>input,.fl>textarea{margin-top:0!important}

/* 23 Sept 2026: an icon inside each "at a glance" tile, beside the number (icons: assets/icons/stat-*.svg) */
.stats .stat{display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;align-content:start}
.stats .stat>span:not(.statIc){grid-column:1/-1}
.stats .stat .statIc{width:42px;height:42px;border-radius:12px;background:#e4f1ec;color:#0d5f4e;display:grid;place-items:center;margin:0!important}
.statIc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stat:hover{transform:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .statIc{background:var(--bronze-soft);color:var(--good)}}
:root[data-theme="dark"] .statIc{background:var(--bronze-soft);color:var(--good)}
.stats .stat>b{min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){.stats .stat>b{font-size:1.45rem}.stats .stat{column-gap:10px;padding:14px}}

/* 24 Sept 2026: an icon on each How it works step, beside the number; steps no longer slide on hover */
.stepList .stepBody>strong{display:flex!important;align-items:center;gap:10px}
.stepList .stepIc{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#e4f1ec;color:#0d5f4e;display:inline-grid;place-items:center}
.stepList li:before{vertical-align:middle}
.stepList .stepIc svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.steps li:hover{transform:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stepList .stepIc{background:var(--bronze-soft);color:var(--good)}}
:root[data-theme="dark"] .stepList .stepIc{background:var(--bronze-soft);color:var(--good)}

/* 24 Sept 2026: "at a glance" rebuilt as one card overlapping the dark alert strip (Willie's design), with a hover on each part */
.alertstrip{padding-bottom:64px!important}
.glanceWrap{position:relative;z-index:2;margin:-58px 0 34px}
.glance{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 44px rgba(11,39,68,.14);overflow:hidden}
.gItem{display:flex;align-items:center;gap:16px;padding:26px 26px;border-left:1px solid var(--line);transition:background .18s ease}
.gItem:first-child{border-left:0}
.gItem:hover{background:var(--sky-soft)}
.gIc{flex:0 0 44px;width:44px;height:44px;border-radius:13px;background:#e4f1ec;color:#0d5f4e;display:grid;place-items:center;transition:background .18s ease,color .18s ease}
.gIc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gLight .gIc{color:#e8872e}
.gItem:hover .gIc{background:#0d5f4e;color:#fff}
.gItem.gLight:hover .gIc{background:#e8872e;color:#fff}
.gTx b{display:block;font-size:1.75rem;line-height:1.05;font-weight:800;color:var(--navy);letter-spacing:-.02em;transition:color .18s ease}
.gItem:hover .gTx b{color:var(--sky)}
.gTx span{display:block;font-size:.88rem;color:var(--muted);margin-top:4px}
@media(max-width:900px){.glance{grid-template-columns:1fr 1fr}.gItem:nth-child(3){border-left:0}.gItem:nth-child(n+3){border-top:1px solid var(--line)}.gItem{padding:20px}}
@media(max-width:420px){.gItem{gap:12px;padding:16px}.gTx b{font-size:1.4rem}.gIc{flex-basis:38px;width:38px;height:38px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gIc{background:var(--bronze-soft);color:var(--good)}:root:not([data-theme="light"]) .gTx b{color:var(--ink)}}
:root[data-theme="dark"] .gIc{background:var(--bronze-soft);color:var(--good)}:root[data-theme="dark"] .gTx b{color:var(--ink)}
@media(min-width:1000px){.gItem{padding:24px 22px;align-items:flex-start}.gTx span{line-height:1.4}}
@media(max-width:600px){.glance{grid-template-columns:1fr}.gItem{border-left:0!important;border-top:1px solid var(--line);align-items:center;padding:16px 18px}.gItem:first-child{border-top:0}.gTx b{font-size:1.35rem}}
/* 24 Sept 2026 (Willie): the "at a glance" card a little wider on large screens, so each part has more room */
@media(min-width:1180px){.glanceWrap{margin-left:-60px;margin-right:-60px}.gItem{padding:26px 28px}}

/* 24 Sept 2026 (Willie): gold band before the footer, to add some life to the home page */
.goldBand{background:#e8b03a;color:#12233a;margin-top:40px;padding:64px 0}
.goldIn{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.goldBand h2{margin:0;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.05;letter-spacing:-.03em;color:#12233a!important}
.goldEye{margin:0 0 10px;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#12233a;opacity:.8}
.goldBand p{color:#12233a;font-size:1.02rem;line-height:1.6;margin:0 0 12px}
.goldBand .goldSmall{font-size:.92rem;font-weight:600}
.goldBtns{margin:16px 0 8px!important}
.goldBand .btn{background:#12233a!important;color:#fff!important;border-color:#12233a!important;box-shadow:none}
.goldBand .btn.ghost{background:transparent!important;color:#12233a!important;border:2px solid #12233a!important}
.goldBand .btn:hover{background:#0b1a2c!important}
.goldBand .btn.ghost:hover{background:rgba(18,35,58,.08)!important}
.goldLink{color:#12233a!important;font-weight:800;text-decoration:none!important;border-bottom:2px solid #12233a}
.goldLink:hover{color:#0b1a2c!important}
.goldBand+footer{margin-top:0!important}
@media(max-width:820px){.goldIn{grid-template-columns:1fr;gap:18px}.goldBand{padding:44px 0}}
main:has(.goldBand){padding-bottom:0!important;margin-bottom:0!important}footer.fcF{margin-top:0!important}
body:has(.goldBand) main{padding-bottom:0!important;margin-bottom:0!important}
body:has(.goldBand) footer{margin-top:0!important}
/* 24 Sept 2026 (Willie): a soft grid behind the home page top, faded out; colors unchanged */
.hero:after{background-image:linear-gradient(rgba(11,34,57,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(11,34,57,.07) 1px,transparent 1px)!important;background-size:44px 44px!important;opacity:1!important;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 75% 35%,#000 20%,transparent 75%)!important;mask-image:radial-gradient(ellipse 75% 85% at 75% 35%,#000 20%,transparent 75%)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero:after{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)!important}}
:root[data-theme="dark"] .hero:after{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)!important}
/* 24 Sept 2026 (Willie): the same soft grid at the top of every page, fading out before the reading starts */
main{position:relative;isolation:isolate}
main::before{content:"";position:absolute;left:0;right:0;top:0;height:420px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(11,34,57,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,34,57,.06) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 70% 0%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 100% at 70% 0%,#000 15%,transparent 72%)}
body:has(.hero) main::before{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}}
:root[data-theme="dark"] main::before{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
@media print{.goldBand{display:none!important}}
/* 24 Sept 2026 (Willie): a thin gold stripe under the top banner on every page */
header.bar,body>header{border-bottom:6px solid #e8b03a!important}
/* 24 Sept 2026: the home page top line on one line on computer screens */
@media(min-width:1000px){.hero .kicker{white-space:nowrap;font-size:.8rem;padding:7px 14px}}

/* 24 Sept 2026: an icon before each heading on the Why now page (icons: assets/icons/why-*.svg) */
.whyH{display:flex;align-items:center;gap:10px}
.whyIc{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#e4f1ec;color:#0d5f4e;display:inline-grid;place-items:center}
.whyIc svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .whyIc{background:var(--bronze-soft);color:var(--good)}}
:root[data-theme="dark"] .whyIc{background:var(--bronze-soft);color:var(--good)}

/* 25 Sept 2026 (Willie): a large shield-and-magnifier picture on the right of "Can you spot the scam?" on the home page, to mark how serious scams are (assets/icons/scam-challenge.svg). No hover effect. */
.spotHead{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:20px}
.spotIntro{flex:1 1 auto;min-width:0}
.spotArt{flex:0 0 150px;width:150px;height:150px;border-radius:32px;background:#ffe6d2;color:#d4570f;display:grid;place-items:center}
.spotArt svg{width:92px;height:92px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.spotHead{gap:14px}.spotArt{flex-basis:72px;width:72px;height:72px;border-radius:18px}.spotArt svg{width:44px;height:44px;stroke-width:1.9}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spotArt{background:#2b1a10;color:#ff8a45}}
:root[data-theme="dark"] .spotArt{background:#2b1a10;color:#ff8a45}

/* 25 Sept 2026 (Willie, option C): more life in the Spot the scam card. Warm peach message with a bright orange edge, an orange bar on top, a "New message" line and progress dots. Nothing moves on hover. */
.spotLive{--scamOr:#f26a1b;--scamOrText:#b3470a;--scamOrSoft:#ffe6d2;border-top:5px solid var(--scamOr)}
.spotLive .spotTop{align-items:center}
.spotLive,.spotLive:hover,.spotLive:focus-within{border-top-color:var(--scamOr)!important}
.spotLive #spotCount{background:#fff2e8;color:var(--scamOrText);font-weight:700;padding:5px 12px;border-radius:999px}
.spotLive #spotScore{font-weight:700}
.spotDots{display:flex;gap:6px;align-items:center}
.spotDots span{width:10px;height:10px;border-radius:50%;background:#f3d3bd}
.spotDots span.done{background:var(--scamOr)}
.spotDots span.now{background:var(--scamOr);box-shadow:0 0 0 3px rgba(242,106,27,.25)}
.msgFrom{display:flex;align-items:center;gap:10px;margin:4px 0 8px;font-size:.9rem;color:var(--muted)}
.msgFrom strong{color:var(--scamOrText)}
.msgAv{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--scamOr);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1rem}
.spotLive .msgBubble{background:var(--scamOrSoft);border:2px solid var(--scamOr);border-left-width:8px;color:#1c2330}
.msgIn{animation:msgIn .45s ease-out}
@keyframes msgIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.msgIn{animation:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spotLive{--scamOrText:#ffa46b;--scamOrSoft:#2b1a10}
 :root:not([data-theme="light"]) .spotLive #spotCount{background:#2b1a10}
 :root:not([data-theme="light"]) .spotLive .msgBubble{color:#f4ece6}
 :root:not([data-theme="light"]) .spotDots span{background:#5a3a26}
 :root:not([data-theme="light"]) .spotDots span.done,:root:not([data-theme="light"]) .spotDots span.now{background:var(--scamOr)}}
:root[data-theme="dark"] .spotLive{--scamOrText:#ffa46b;--scamOrSoft:#2b1a10}
:root[data-theme="dark"] .spotLive #spotCount{background:#2b1a10}
:root[data-theme="dark"] .spotLive .msgBubble{color:#f4ece6}
:root[data-theme="dark"] .spotDots span{background:#5a3a26}
:root[data-theme="dark"] .spotDots span.done,:root[data-theme="dark"] .spotDots span.now{background:var(--scamOr)}
@media (max-width:600px){.spotDots{display:none}}

/* 25 Sept 2026 (Willie): links inside the Spot the scam messages look and feel like real links. Tapping one shows a pop-up. Hover changes color only; nothing moves. */
.trapLink{all:unset;display:inline;color:#1559b8;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;cursor:pointer;word-break:break-all}
.trapLink:hover{color:#0b3f86;text-decoration-thickness:2px}
.trapLink:focus-visible{outline:2px solid var(--scamOr,#f26a1b);outline-offset:2px;border-radius:3px}
.trapBack{position:fixed;inset:0;z-index:1000;background:rgba(8,14,21,.55);display:grid;place-items:center;padding:16px}
.trapBack[hidden]{display:none}
.trapBox{background:var(--card,#fff);color:var(--ink);max-width:440px;width:100%;border-radius:20px;border-top:6px solid #f26a1b;padding:24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center}
.trapBox h3{margin:10px 0 8px;font-size:1.3rem}
.trapBox p{margin:0 0 18px;line-height:1.55;color:var(--ink-2)}
.trapBox .btn{width:100%;max-width:none}
.trapIc{width:54px;height:54px;margin:0 auto;border-radius:50%;background:#f26a1b;color:#fff;font-weight:900;font-size:1.8rem;display:grid;place-items:center}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .trapLink{color:#8cc2ff}:root:not([data-theme="light"]) .trapLink:hover{color:#b9daff}}
:root[data-theme="dark"] .trapLink{color:#8cc2ff}:root[data-theme="dark"] .trapLink:hover{color:#b9daff}

/* 25 Sept 2026 (Willie): "Habits that keep you safe" list on the home page. Each habit lights up on hover (peach background, orange edge and dot); only colors change, nothing moves. Moved here from index.html. */
.habitList{margin:0;padding:0;list-style:none;display:grid;gap:4px;line-height:1.55}
.habitList li{position:relative;padding:8px 12px 8px 30px;border-radius:10px;border-left:4px solid transparent;transition:background-color .15s,border-color .15s}
.habitList li::before{content:"";position:absolute;left:12px;top:17px;width:7px;height:7px;border-radius:50%;background:#d49a2d;transition:background-color .15s}
.habitList li:hover{background:#fff2e8;border-left-color:#f26a1b}
.habitList li:hover::before{background:#f26a1b}
.habitList li:hover strong{color:#b3470a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .habitList li:hover{background:#2b1a10}:root:not([data-theme="light"]) .habitList li:hover strong{color:#ffa46b}}
:root[data-theme="dark"] .habitList li:hover{background:#2b1a10}
:root[data-theme="dark"] .habitList li:hover strong{color:#ffa46b}
@media (prefers-reduced-motion:reduce){.habitList li,.habitList li::before{transition:none}}
/* 28 Sept 2026 (Willie): "Create my account" in the top bar uses the bright gold of the "Why now" band; hover changes color only */
nav.main a.cta,.siteNav a.cta,.siteNav a.go{background:#e8b03a!important;color:#12233a!important;border:1px solid #e8b03a!important;box-shadow:0 6px 18px rgba(232,176,58,.35)!important}
nav.main a.cta:hover,nav.main a.cta:focus-visible,.siteNav a.cta:hover,.siteNav a.go:hover{background:#f3c257!important;border-color:#f3c257!important;color:#12233a!important}
/* 28 Sept 2026: links to a section (for example terms/#computers) stop below the sticky top bar */
h2[id],h3[id],p[id],section[id]{scroll-margin-top:110px}

/* 30 Sept 2026 (Willie): every boxed quote, note and info panel reacts to the mouse the same way as the cards.
   Only colors and the shadow change: nothing moves. */
.quoteBig,.accessNote,.example,.note,.lInfo,.cert,.alertItem{transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.quoteBig:hover,.accessNote:hover,.lInfo:hover,.cert:hover{border-top-color:color-mix(in srgb,var(--sky) 45%,var(--line));border-right-color:color-mix(in srgb,var(--sky) 45%,var(--line));border-bottom-color:color-mix(in srgb,var(--sky) 45%,var(--line));box-shadow:var(--sh-2)}
.quoteBig:hover{border-left-color:#e8b03a}
.example:hover{box-shadow:var(--sh-2);border-left-color:#e8b03a}
.note:hover{box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--bronze) 60%,transparent)}
.alertItem:hover{border-left-color:#e8b03a;background:var(--bronze-soft)}

/* 30 Sept 2026 (Willie): the answer to "Pass it here": the same quote box with a green edge */
.quoteBig.quoteGood{border-left-color:#1a8a57}.quoteBig.quoteGood:hover{border-left-color:#1a8a57}
/* 30 Sept 2026 (Willie): the name under a quote */
.quoteBig .quoteBy{margin:10px 0 0;font-size:.9rem;font-weight:700;color:var(--muted);font-style:normal}.quoteBig .quoteBy:before{content:"\2014\00a0"}
/* 1 Oct 2026 (Willie): buttons in navy blue (#1b4d7d), the same as the Lessons page, instead of the near-black navy.
   Gold (.alt), outline (.ghost) and white panel buttons keep their own colors. Hover changes color only, never position. */
.btn{background:#1b4d7d}.btn:hover{background:#163f66;transform:none}
.panel.soft .btn{background:#1b4d7d}.panel .btn:hover{transform:none}

/* 3 Oct 2026 (Willie): smoother page changes. Moving between pages now fades softly instead of flashing, the top bar
   and the learner tabs stay still, and the page no longer shifts sideways when a scroll bar appears.
   Works in Chrome, Edge and Safari 18.2 or newer; other browsers change pages as before. Off when reduced motion is set. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease-out}
header.bar,header.siteBar{view-transition-name:fc-head}
nav.fcTabs,#fcLearnTabs{view-transition-name:fc-tabs}
::view-transition-group(fc-head),::view-transition-group(fc-tabs){animation:none}
html{scrollbar-gutter:stable}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 3 Oct 2026 (Willie): the bar with Back, Forward (and, in admin, Search, Refresh, Print) stays at the top of the screen
   while the page scrolls, on every signed-in page, so nobody has to scroll up to use it */
.admUtil,nav.fcTabs,#fcLearnTabs{position:sticky;top:var(--fcHeadH,0px);z-index:19;box-shadow:0 6px 14px -12px rgba(11,34,57,.35)}
.pgNav{position:sticky;top:var(--fcHeadH,0px);z-index:19;background:var(--bg);padding-top:8px;padding-bottom:8px}   /* the Help page's Back and Forward */
@media print{.admUtil,nav.fcTabs,#fcLearnTabs,.pgNav{position:static}}

/* 3 Oct 2026 (Willie: "the examples of the buttons I want to use, which is more modern looking"; then "I was ONLY interested in the
   login and create my account buttons"): these rules apply only on pages whose body has class fcNewBtn (sign in, the emailed code
   and PIN, create my account). Every other button keeps its original look. The button system from the
   "Progress Inside" design: the main button is teal with a gold marker on the left; other buttons are white with a thin border.
   Hover deepens the colour only; nothing moves. Gold buttons (pay) and grey "not yet" buttons keep their own colours. */
:root{--fcTeal:#3574b8;--fcTealD:#285f9b;--fcGold:#f4bd3f}   /* 3 Oct 2026 (Willie: "replace the green with the site's blue"; the gold marker stays). The names say Teal for history; the colors are the site's button blue */
body.fcNewBtn .btn:not(:is(.alt,.payBtn,.notYet,.ghost,.sec,.link)){position:relative;overflow:hidden;background:linear-gradient(135deg,var(--fcTeal),var(--fcTealD))!important;color:#fff!important;border:0!important;border-radius:14px;box-shadow:0 10px 22px rgba(40,95,155,.2)!important;padding-left:30px;transition:background-color .15s,box-shadow .15s,filter .15s;transform:none!important}
body.fcNewBtn .btn:not(:is(.alt,.payBtn,.notYet,.ghost,.sec,.link))::before{content:"";position:absolute;inset:12px auto 12px 0;width:5px;border-radius:0 4px 4px 0;background:var(--fcGold)}   /* final v2: a small gold tab, centred and shorter than the button */
body.fcNewBtn .btn:not(:is(.alt,.payBtn,.notYet,.ghost,.sec,.link)):hover,body.fcNewBtn .btn:not(:is(.alt,.payBtn,.notYet,.ghost,.sec,.link)):focus-visible{filter:brightness(.93);box-shadow:0 13px 27px rgba(40,95,155,.28)!important;transform:none!important}
body.fcNewBtn .btn:not(:is(.alt,.payBtn,.notYet,.ghost,.sec,.link)):disabled{filter:grayscale(.5) opacity(.6)}
body.fcNewBtn .btn.sec,body.fcNewBtn .btn.ghost{background:#f6faff!important;color:var(--navy)!important;border:1.5px solid #d9e8f6!important;box-shadow:none!important;border-radius:13px;transform:none!important;transition:background-color .15s,border-color .15s}
body.fcNewBtn .btn.sec:hover,body.fcNewBtn .btn.ghost:hover,body.fcNewBtn .btn.sec:focus-visible,body.fcNewBtn .btn.ghost:focus-visible{background:#eaf3fc!important;border-color:#bcd6ef!important;color:var(--navy)!important}
body.fcNewBtn .btn.sec svg,body.fcNewBtn .btn.ghost svg{color:var(--fcTeal)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.fcNewBtn .btn.sec,:root:not([data-theme="light"]) body.fcNewBtn .btn.ghost{color:var(--ink)!important;border-color:var(--line)!important;background:var(--card)!important}:root:not([data-theme="light"]) body.fcNewBtn .btn.sec:hover,:root:not([data-theme="light"]) body.fcNewBtn .btn.ghost:hover{background:#12283d!important;border-color:#36618c!important;color:var(--ink)!important}}
:root[data-theme="dark"] body.fcNewBtn .btn.sec,:root[data-theme="dark"] body.fcNewBtn .btn.ghost{color:var(--ink)!important;border-color:var(--line)!important;background:var(--card)!important}:root[data-theme="dark"] body.fcNewBtn .btn.sec:hover,:root[data-theme="dark"] body.fcNewBtn .btn.ghost:hover{background:#12283d!important;border-color:#36618c!important;color:var(--ink)!important}
html[data-fc-hc="1"] body.fcNewBtn .btn:not(.sec):not(.ghost){background:#000!important;filter:none!important}html[data-fc-hc="1"] body.fcNewBtn .btn::before{background:#fff!important}html[data-fc-hc="1"] body.fcNewBtn .btn.sec,html[data-fc-hc="1"] body.fcNewBtn .btn.ghost{border:2px solid #000!important;color:#000!important}
/* the main button that says what comes next */
body.fcNewBtn .btn.btnNext{width:100%;max-width:none;min-height:72px;justify-content:space-between;gap:16px;padding:13px 14px 13px 25px;text-align:left}
body.fcNewBtn .btn.btnNext::before{width:5px!important}
.bnCopy{display:grid;gap:3px}.bnT{font-size:1.06rem;font-weight:850;line-height:1.2}.bnN{color:rgba(255,255,255,.8);font-size:.8rem;font-weight:600}
.bnChip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.17);font-size:.76rem;font-weight:800;white-space:nowrap}
.bnChip .ic{width:15px;height:15px;vertical-align:0}
@media(max-width:520px){body.fcNewBtn .btn.btnNext{padding-left:21px}.bnChip>span{display:none}}
/* the step bar */
.fcProg{margin:0 0 20px}.fcProgM{display:flex;justify-content:space-between;gap:16px;font-size:.76rem;font-weight:760;color:#506277;margin-bottom:8px}
.fcProgT{height:8px;background:#e8eef4;border-radius:999px;overflow:hidden}.fcProgT>div{height:100%;border-radius:inherit;background:linear-gradient(90deg,#efb62c,var(--fcGold))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fcProgM{color:var(--muted)}:root:not([data-theme="light"]) .fcProgT{background:#1c2a36}}:root[data-theme="dark"] .fcProgM{color:var(--muted)}:root[data-theme="dark"] .fcProgT{background:#1c2a36}
/* not ready yet (the code or PIN is not complete): grey, with readable text */
body.fcNewBtn .btn.notYet{background:#e3e9ef!important;color:#6d8195!important;border-color:#e3e9ef!important;box-shadow:none!important;opacity:1!important}
body.fcNewBtn .btn.notYet .bnN{color:#7d8fa1}body.fcNewBtn .btn.notYet .bnChip{background:rgba(11,34,57,.05);border-color:rgba(11,34,57,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.fcNewBtn .btn.notYet{background:#1c2a36!important;color:#8197ab!important;border-color:#1c2a36!important}}:root[data-theme="dark"] body.fcNewBtn .btn.notYet{background:#1c2a36!important;color:#8197ab!important;border-color:#1c2a36!important}

/* the welcome box above the PIN */
.fcWel{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;margin:0 0 18px;border-radius:14px;background:#eef5fc;color:var(--navy)}
.fcWelI{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:#dbe9f8;color:var(--fcTealD)}
.fcWelI .ic{vertical-align:0}.fcWel strong{display:block;margin:0 0 3px;font-size:1rem}.fcWel span:not(.fcWelI){color:#557084;font-size:.8rem;line-height:1.45}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fcWel{background:#12283d;color:var(--ink)}:root:not([data-theme="light"]) .fcWelI{background:#1b3a57;color:#63a7ea}:root:not([data-theme="light"]) .fcWel span:not(.fcWelI){color:var(--muted)}}
:root[data-theme="dark"] .fcWel{background:#12283d;color:var(--ink)}:root[data-theme="dark"] .fcWelI{background:#1b3a57;color:#63a7ea}:root[data-theme="dark"] .fcWel span:not(.fcWelI){color:var(--muted)}
/* 3 Oct 2026 (Willie's "modern buttons" package): the Sign in button in the top bar gets a sign-in icon, a soft glass fill and
   the same 46px height as Create my account. Create my account keeps its gold look and shine (Willie: "maintain the current effect").
   Hover changes colour only. */
nav.main a.cta2[href$="login.php"],.siteNav a.cta2[href$="login.php"]{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 16px;border:1px solid rgba(255,255,255,.42);border-radius:13px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);color:#fff;font-weight:760;white-space:nowrap}
nav.main a.cta2[href$="login.php"]::before,.siteNav a.cta2[href$="login.php"]::before{content:"";width:17px;height:17px;flex:none;opacity:.84;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center/contain no-repeat}
nav.main a.cta[href$="signup.php"],.siteNav a.go[href$="signup.php"],.siteNav a.cta[href$="signup.php"]{display:inline-flex;align-items:center;min-height:46px;border-radius:13px}
/* "Find their account" on Pay for someone: centred, a title and a short note, a search icon, the short gold tab */
.fcFind{position:relative;width:min(100%,350px);min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px;overflow:hidden;margin:4px auto 0;padding:9px 10px 9px 24px;border:0;border-radius:15px;background:linear-gradient(180deg,#2c598d,#244b79);color:#fff;box-shadow:0 11px 24px rgba(36,75,121,.24);font:inherit;text-align:left;cursor:pointer;transition:filter .15s,box-shadow .15s}
.fcFind::before{content:"";position:absolute;inset:11px auto 11px 0;width:5px;border-radius:0 4px 4px 0;background:#f2bd3f}
.fcFind:hover,.fcFind:focus-visible{filter:brightness(.94);box-shadow:0 13px 28px rgba(36,75,121,.3)}
.fcFind:focus-visible{outline:3px solid rgba(46,134,222,.45);outline-offset:3px}
.fcFindC{display:grid;gap:2px}.fcFindT{font-size:1rem;font-weight:850}.fcFindN{color:rgba(255,255,255,.75);font-size:.74rem;font-weight:580}
.fcFindI{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}.fcFindI .ic{vertical-align:0}
html[data-fc-hc="1"] .fcFind{background:#000;filter:none}
@media(max-width:480px){.fcFind{width:100%}}
/* 3 Oct 2026 (Willie: "Create my account is missing the icon"): the arrow box on the right, from his package. The gold and the shine stay. */
nav.main a.cta[href$="signup.php"],.siteNav a.go[href$="signup.php"],.siteNav a.cta[href$="signup.php"]{justify-content:space-between;gap:12px;padding:0 7px 0 18px!important}
nav.main a.cta[href$="signup.php"]::before,.siteNav a.go[href$="signup.php"]::before,.siteNav a.cta[href$="signup.php"]::before{content:"";order:2;width:32px;height:32px;flex:none;border-radius:10px;background:rgba(16,43,72,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23132a41' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/16px 16px no-repeat}
@media(max-width:900px){nav.main a.cta[href$="signup.php"]{padding:0 7px 0 18px!important}}
/* 3 Oct 2026 (Willie's "locked buttons" package). Only these buttons use it: Open a free lesson, Suggest a lesson, Message us on
   WhatsApp, Community and schools, Try a free lesson (compact), the full-width "Create my account — J$3,500 once", Find their account,
   and the two answers in Spot the scam on the home page. Blue, a short gold tab on the left, a see-through icon box on the right.
   The package lifted buttons on hover; here hover deepens the shadow and colour only, nothing moves. */
.fcAct{position:relative;min-height:56px;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;overflow:hidden;padding:0 9px 0 21px;border:0;border-radius:13px;background:linear-gradient(180deg,#2d5a8e,#244b78);color:#fff!important;box-shadow:0 8px 18px rgba(36,75,120,.18);font:inherit;font-size:.95rem;font-weight:800;text-decoration:none!important;cursor:pointer;transition:box-shadow .16s ease,filter .16s ease;max-width:100%}
.fcAct::before,.fcFindAcc::before{content:"";position:absolute;inset:10px auto 10px 0;width:5px;border-radius:0 4px 4px 0;background:#f2bd3f}
.fcAct:hover,.fcAct:focus-visible,.fcFindAcc:hover,.fcFindAcc:focus-visible{box-shadow:0 12px 24px rgba(36,75,120,.26);filter:brightness(.95);color:#fff!important}
.fcAct:focus-visible,.fcFindAcc:focus-visible,.fcChoice:focus-visible{outline:3px solid rgba(242,189,63,.55);outline-offset:3px}
.fcActI{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.13)}
.fcIc{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcCompact{width:fit-content;min-width:170px}
.fcWide{width:100%;min-height:58px}
.stickycta .fcAct{width:100%}
.btn.block+.fcAct,.fcAct+.fcAct{margin-left:0}
.fcFindAcc{position:relative;min-height:56px;min-width:230px;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;margin-top:6px;padding:0 22px;border:0;border-radius:13px;background:linear-gradient(180deg,#2d5a8e,#244b78);color:#fff;box-shadow:0 8px 18px rgba(36,75,120,.18);font:inherit;font-size:.95rem;font-weight:800;cursor:pointer;transition:box-shadow .16s ease,filter .16s ease}
.fcFindAcc .ic{vertical-align:0}
/* Spot the scam: both answers look the same until one is chosen */
.spotBtns .fcChoice{width:100%}
.fcChoice{position:relative;min-height:104px;display:grid;grid-template-columns:50px 1fr 20px;align-items:center;gap:10px;overflow:hidden;padding:17px 17px 25px;border:2px solid #cbd9e5;border-radius:17px;background:#fff;color:#102c4b;text-align:left;font:inherit;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.fcChoice::after{content:"";position:absolute;left:18px;right:18px;bottom:11px;height:4px;border-radius:999px;background:#f6a46d}   /* 3 Oct 2026 (Willie): a soft orange to match the message box, not yellow */
.fcChoice:hover{border-color:#ee7d32;box-shadow:0 10px 24px rgba(11,34,57,.12)}
.fcChoice[aria-pressed="true"]{border-color:#ee7d32;background:#fff8f1;box-shadow:0 0 0 4px rgba(238,125,50,.13)}
.fcChoice strong,.fcChoice small{display:block}.fcChoice strong{font-size:1.06rem}.fcChoice small{margin-top:4px;color:#60748a;font-size:.76rem}
.fcBars{height:28px;display:flex;align-items:flex-end;gap:4px}.fcBars b{width:7px;display:block;border-radius:4px;background:#2d5a8e}
.fcBars b:nth-child(1){height:10px}.fcBars b:nth-child(2){height:18px}.fcBars b:nth-child(3){height:27px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fcChoice{background:#101a24;border-color:#22323f;color:#eef4fa}:root:not([data-theme="light"]) .fcChoice small{color:#9db0c2}:root:not([data-theme="light"]) .fcChoice[aria-pressed="true"]{background:#2b1a10}:root:not([data-theme="light"]) .fcBars b{background:#63a7ea}}
:root[data-theme="dark"] .fcChoice{background:#101a24;border-color:#22323f;color:#eef4fa}:root[data-theme="dark"] .fcChoice small{color:#9db0c2}:root[data-theme="dark"] .fcChoice[aria-pressed="true"]{background:#2b1a10}:root[data-theme="dark"] .fcBars b{background:#63a7ea}
html[data-fc-hc="1"] .fcAct,html[data-fc-hc="1"] .fcFindAcc{background:#000;filter:none}html[data-fc-hc="1"] .fcChoice{border-color:#000;color:#000}
@media(max-width:650px){.fcCompact{width:100%}.spotBtns{grid-template-columns:1fr}}
/* 3 Oct 2026 (Willie: "this is my money so it can't be hidden"): Pay for someone and Give a gift as clear soft light-blue
   buttons (home price box, Courses "Ways to pay"), and a "Get this level" box inside each level's "Show what is inside". */
.payLink{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px;border:1.5px solid #d9e8f6;border-radius:12px;background:#f6faff;color:#0b2239!important;font-weight:750;font-size:.9rem;text-decoration:none!important;transition:background-color .15s,border-color .15s}
.payLink::after{content:"\2192";font-weight:800;color:#2d5a8e}
.payLink:hover,.payLink:focus-visible{background:#eaf3fc;border-color:#bcd6ef}
.payLinks{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.payOthers{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:14px 0 0;font-weight:700}
.payOthers>span{margin-right:2px}
.lvlBuy{margin:18px 0 14px;padding:16px 16px 14px;border:1px solid #d9e8f6;border-radius:14px;background:#f6faff}
.lvlBuyH{margin:0 0 4px;font-weight:800;color:#0b2239}
.lvlBuy .fine{margin:0 0 12px}
.lvlBuyRow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lvlBuyRow .fcAct{min-height:52px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .payLink{background:#12283d;border-color:#22323f;color:#eef4fa!important}:root:not([data-theme="light"]) .payLink::after{color:#63a7ea}:root:not([data-theme="light"]) .lvlBuy{background:#0f1c28;border-color:#22323f}:root:not([data-theme="light"]) .lvlBuyH{color:#eef4fa}}
:root[data-theme="dark"] .payLink{background:#12283d;border-color:#22323f;color:#eef4fa!important}:root[data-theme="dark"] .payLink::after{color:#63a7ea}:root[data-theme="dark"] .lvlBuy{background:#0f1c28;border-color:#22323f}:root[data-theme="dark"] .lvlBuyH{color:#eef4fa}
@media(max-width:520px){.lvlBuyRow .fcAct{width:100%}}

/* 3 Oct 2026 (Willie: "Why now is sooo hidden"): the Why now link on the gold band is a proper button */
.whyNow{margin-top:4px}
/* Ways to pay boxes are narrow on a laptop: keep each button on one line */
.grid.four .payLink{white-space:nowrap;font-size:.86rem;padding:0 13px}.grid.four .payLink::after{content:none}
/* 3 Oct 2026 (Willie): the Why now link on the gold bands is a small inline link, not a button. Navy, bold, thin underline;
   hover darkens the underline only. */
.goldMore{color:#12233a!important;font-weight:800;white-space:nowrap;text-decoration:underline!important;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:rgba(18,35,58,.45)!important;transition:text-decoration-color .15s}
.goldMore:hover,.goldMore:focus-visible{text-decoration-color:#12233a!important}
.goldMore:focus-visible{outline:3px solid #12233a;outline-offset:3px;border-radius:3px}
/* 3 Oct 2026 (Willie): "Who is behind it" as a trust card with the founder's photo, on the home page (above the price) and About us */
.trustCard{display:flex;align-items:center;gap:20px;padding:22px 24px;border:1px solid var(--line);border-left:5px solid #e8b03a;border-radius:18px;background:var(--card);box-shadow:var(--sh-1)}
.trustPic{width:72px;height:72px;flex:0 0 72px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:3px solid #fbf1df}
.trustK{margin:0 0 4px;font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--bronze)}
.trustT{margin:0 0 6px;line-height:1.55}.trustA{margin:0 0 6px;color:var(--muted);font-size:.9rem}
.trustCard .trustLink{color:var(--navy)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .trustCard .trustLink{color:var(--ink)!important;text-decoration-color:rgba(238,244,250,.45)!important}}:root[data-theme="dark"] .trustCard .trustLink{color:var(--ink)!important;text-decoration-color:rgba(238,244,250,.45)!important}
@media(max-width:560px){.trustCard{align-items:flex-start;gap:14px;padding:18px}.trustPic{width:56px;height:56px;flex-basis:56px}}
/* 3 Oct 2026 (Willie): "Ready to start?" and "Paying for a family member?" on one line in the price box; they wrap on small screens */
.payRow{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;margin-top:14px}
.payRow .payOthers{margin:0;flex-wrap:nowrap}
.payRow .payLink{padding:0 13px}
@media(max-width:1100px){.payRow{row-gap:12px}.payRow .payOthers{flex-wrap:wrap}}
.payRow .payLink{font-size:.86rem;padding:0 12px;min-height:40px}.payRow .payLink::after{content:none}.payRow .payOthers{gap:8px}.payRow .payOthers>span{font-size:.95rem}

/* 3 Oct 2026 (Willie): smaller (155 px, 10-03aj; was 220). The scam-detective picture replaces the orange shield tile and stands on the quiz box's orange top line */
#spot .spotHead{align-items:flex-end;margin-bottom:0}
#spot .spotArt{flex:0 0 155px;width:155px;height:auto;background:none!important;border-radius:0;display:block;position:relative;z-index:2;margin-bottom:-3px;line-height:0}
#spot .spotArt img{display:block;width:100%;height:auto}
#spot .spotHead + .spotLive{position:relative;z-index:1}
#spot .spotArt{margin-right:56px}   /* 10-03ak (Willie): brought in from the edge */
@media (max-width:860px){#spot .spotArt{flex-basis:125px;width:125px;margin-right:36px}}
@media (max-width:600px){#spot .spotHead{gap:10px}#spot .spotArt{flex-basis:80px;width:80px;height:auto;border-radius:0;margin-bottom:-3px;margin-right:18px}}

/* 3 Oct 2026 (Willie, 10-03am): Our mission and Our vision cards on the Our story page. Hover changes nothing. */
.mvGrid{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.mvCard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px 22px 28px;box-shadow:var(--sh-1);overflow:hidden}
.mvCard::before{content:"";position:absolute;inset:18px auto 18px 0;width:5px;border-radius:0 4px 4px 0;background:#eab13e}
.mvV::before{background:#3574b8}
.mvK{margin:0 0 8px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.mvV .mvK{color:#285f9b}
.mvT{margin:0;font-size:1.12rem;line-height:1.55;font-weight:600;color:var(--ink)}
@media (max-width:760px){.mvGrid{grid-template-columns:1fr}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mvV .mvK{color:#8fbcef}}
:root[data-theme="dark"] .mvV .mvK{color:#8fbcef}

/* 3 Oct 2026 (Willie, 10-03ap): Our story icon (top right of the opening), and mission and vision as open statements with
   icons on the right edge. Hover (Guango style): a soft colour wash from the left, a thin left line, and a halo on the icon.
   Nothing moves; the pointer stays an arrow. Icons from Willie's package (assets/img/icons), decorative. */
.stHead{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.stHead>div:first-child{min-width:0}
.stArt{flex:0 0 116px;width:116px;height:116px;border-radius:26px;background:#e3f0fb;color:#17557f;display:grid;place-items:center}
.stArt svg{width:54px;height:54px}
@media (max-width:600px){.stHead{gap:14px}.stArt{flex-basis:80px;width:80px;height:80px;border-radius:20px}.stArt svg{width:38px;height:38px}}
.mvGrid{gap:28px}
.mvCard{background:transparent;border:0;box-shadow:none;border-radius:0 14px 14px 0;padding:18px 84px 20px 26px;transition:background-color .2s ease}
.mvCard::before{inset:0 auto 0 0;width:3px;border-radius:0;background:transparent;transition:background-color .2s ease}
.mvCard:hover{background:linear-gradient(90deg,rgba(234,177,62,.16),rgba(234,177,62,0) 85%)}
.mvV:hover{background:linear-gradient(90deg,rgba(53,116,184,.13),rgba(53,116,184,0) 85%)}
.mvCard:hover::before{background:#eab13e}.mvV:hover::before{background:#3574b8}
.mvT{font-weight:500;font-size:1.08rem}
.mvIc{position:absolute;right:18px;top:16px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff1ce;color:#a76508;box-shadow:0 0 0 0 rgba(234,177,62,0);transition:box-shadow .2s ease}
.mvIc svg{width:23px;height:23px}
.mvV .mvIc{background:#e6f0fb;color:#2769aa}
.mvCard:hover .mvIc{box-shadow:0 0 0 6px rgba(234,177,62,.22)}.mvV:hover .mvIc{box-shadow:0 0 0 6px rgba(53,116,184,.2)}
@media (max-width:760px){.mvCard{padding:16px 72px 16px 20px}.mvIc{right:12px;top:14px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stArt{background:#16283b;color:#8fbcef}:root:not([data-theme="light"]) .mvIc{background:#2b2210;color:#f1c66b}:root:not([data-theme="light"]) .mvV .mvIc{background:#16283b;color:#8fbcef}}
:root[data-theme="dark"] .stArt{background:#16283b;color:#8fbcef}:root[data-theme="dark"] .mvIc{background:#2b2210;color:#f1c66b}:root[data-theme="dark"] .mvV .mvIc{background:#16283b;color:#8fbcef}

/* 3 Oct 2026 (Willie, 10-03aq): the Our story illustration (version 1: someone patiently showing an older neighbour a phone)
   replaces the small story icon at the top right of the opening. On phones it sits above the label. Decorative. */
.stArt.stPic{flex:0 0 340px;width:340px;height:auto;background:none;border-radius:0;display:block}
.stArt.stPic img{width:100%;height:auto;display:block}
@media (max-width:760px){.stArt.stPic{flex-basis:260px;width:260px}}
@media (max-width:600px){.stHead{flex-direction:column-reverse}.stArt.stPic{flex-basis:auto;width:220px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stArt.stPic{background:none}}
:root[data-theme="dark"] .stArt.stPic{background:none}

/* 10-03as (Willie: "the text needs to be properly formatted"): Our story columns balanced; even spacing */
.storyGrid{gap:40px}
.storyGrid p{margin:0 0 14px;line-height:1.7}
.storyGrid .quoteBig p{margin:0;line-height:1.5}
.storyGrid .sub{font-size:1.06rem}
.storyGrid .storyArt{max-width:440px;margin:0 auto 18px}
@media (max-width:860px){.storyGrid{gap:20px}}

/* 3 Oct 2026 (Willie): student welcome picture on My dashboard (students only, once the picture exists) */
.ptStuPic{position:absolute;right:24px;bottom:0;width:220px;height:auto;pointer-events:none}
@media (max-width:860px){.ptStuPic{position:static;display:block;width:160px;margin:12px 0 0}}
/* footer: Student access | Ages 8-11 | Ages 12-17 */
.fcStu{display:block;margin-top:6px}.fcStu a{display:inline!important}.fcStu .sep{opacity:.5;margin:0 4px}
.schoolPic{margin:0}.schoolPic img{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;border-radius:18px}

/* 10-03at (Willie: "is that under the main pic or part of the main body text?"): all the story text in the left column, in reading order; the picture and quote on the right, staying in view while reading on a computer */
.storyGrid{grid-template-columns:1.15fr .85fr}
@media (min-width:861px){.storySide{position:sticky;top:96px}}
@media (max-width:860px){.storyGrid{grid-template-columns:1fr}}
/* 10-03at (Willie): a thin line between the story text and the picture; the quote card highlights on hover (nothing moves) */
@media (min-width:861px){.storyGrid{gap:0}.storyGrid>div:first-child{border-right:1px solid var(--line);padding-right:36px}.storyGrid>.storySide{padding-left:36px}}
.storyGrid .quoteBig{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.storyGrid .quoteBig:hover{background:linear-gradient(90deg,rgba(234,177,62,.14),var(--card) 80%);border-left-color:#eab13e;box-shadow:0 0 0 4px rgba(234,177,62,.14),var(--sh-2)}

/* 10-03au (Willie: "the line is not needed… the wording needs to spread under the Nothing box"): the picture and quote
   float on the right and the story text wraps beside them, then runs the full width underneath. On phones they stack. */
.storyFlow::after{content:"";display:block;clear:both}
.storyFlow .storySide{float:right;width:44%;margin:0 0 14px 40px;position:static;border:0;padding:0}
.storyFlow p{margin:0 0 14px;line-height:1.7}.storyFlow .quoteBig p{margin:0;line-height:1.5}.storyFlow .sub{font-size:1.06rem}
.storyFlow .storyArt{max-width:440px;margin:0 auto 18px}
.storyFlow .quoteBig{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.storyFlow .quoteBig:hover{background:linear-gradient(90deg,rgba(234,177,62,.14),var(--card) 80%);border-left-color:#eab13e;box-shadow:0 0 0 4px rgba(234,177,62,.14),var(--sh-2)}
@media (max-width:860px){.storyFlow .storySide{float:none;width:auto;margin:0 0 18px}}

/* 10-03av (Willie: still not properly formatted): no paragraph straddles the picture; the last two paragraphs start below it, full width */
.storyFlow .storyClear{clear:both}
@media (min-width:861px){.storyFlow .storySide{margin-bottom:10px}.storyFlow .storySide .quoteBig{margin-bottom:0}}
.ptBand .in:has(.ptStuPic){padding-right:250px}@media (max-width:860px){.ptBand .in:has(.ptStuPic){padding-right:0}}
.grid.two:has(> figure.schoolPic[hidden]){grid-template-columns:1fr}

/* 3 Oct 2026: the footer rule "footer.fcF nav a, footer.fcF nav span" stacked Student access | Ages 8-11 | Ages 12-17 one per line; keep them on one line */
footer.fcF nav .fcStu{display:block!important;margin-top:6px}footer.fcF nav .fcStu a,footer.fcF nav .fcStu .sep{display:inline!important}footer.fcF nav .fcStu a{white-space:nowrap}footer.fcF nav .fcStu .sep{opacity:.5;margin:0 2px!important;padding:0!important}

/* 4 Oct 2026 (Willie): Our story picture 30% smaller and no quote; For schools uses the same layout with its own picture.
   How a school joins: hover changes colour only (the old .steps hover moved the card, which breaks the hover rule) */
@media (min-width:861px){.storyFlow .storySide{width:31%}}
.steps li:hover{transform:none}
.joinSteps li{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.joinSteps li:hover{background:var(--sky-soft);border-color:#d49a2d;box-shadow:0 10px 26px rgba(11,34,57,.12)}
.joinSteps li:hover:before{background:#d49a2d;color:#fff}
.schoolFlow .cta-row{display:flex;flex-wrap:wrap;gap:10px}
.schoolFlow .storyArt{border-radius:16px;box-shadow:0 10px 26px rgba(11,34,57,.12)}

/* 4 Oct 2026 (Willie: "the paragraph is screwed up"): the float left a short ragged line and a gap beside the picture.
   Now the intro and first paragraph sit in a column beside the picture, and the rest runs full width below. */
.storyTop{display:grid;grid-template-columns:minmax(0,1fr) 31%;gap:40px;align-items:center;margin:0 0 4px}
.storyTop .storySide{float:none!important;width:auto!important;margin:0!important;position:static}
.storyTop .storyText>p:last-child{margin-bottom:0}
.storyTop .sub{max-width:none}
.storyFlow .storyClear{clear:none}
@media (max-width:860px){.storyTop{grid-template-columns:1fr;gap:18px}.storyTop .storySide{order:-1}}

/* 4 Oct 2026 (Willie: "the text in this box is a little overpowering"): quote boxes read as a calm aside, not a headline */
.quoteBig{padding:16px 20px}
.quoteBig p{font-size:1rem;font-weight:500;line-height:1.6;color:var(--ink-2,var(--ink));letter-spacing:0}

/* 4 Oct 2026 (Willie): the yellow left tip on "Create my account" in Take both tracks together, matching "Open a free lesson".
   The button has a 2px transparent border, so the tip starts at -2px to cover it (otherwise a thin blue line shows). */
.yellow-detail{position:relative}
.yellow-detail::before{content:"";position:absolute;left:-2px;top:17%;width:7px;height:66%;background:#F2BD3F;border-radius:0 4px 4px 0}
/* Mission and vision (Willie chose option B): white cards, icon above the label, Georgia italic statement, a dash in the label colour */
.mvGrid{gap:20px;align-items:stretch}
.mvCard{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);border-radius:18px;padding:24px 28px 26px 30px;display:flex;flex-direction:column}
@media (max-width:760px){.mvCard{padding:20px 20px 22px 22px}}
.mvCard .mvIc{position:static;margin:0 0 14px;width:48px;height:48px}
.mvK{font-size:.8rem;margin:0 0 10px}
.mvT{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:1.2rem;line-height:1.55;color:var(--navy)}
.mvT::before{content:"\2014\00a0";font-style:normal;color:#c88a1c}
.mvV .mvT::before{color:#3574b8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mvT{color:#e8f1fb}:root:not([data-theme="light"]) .mvV .mvT::before{color:#8fbcef}}
:root[data-theme="dark"] .mvT{color:#e8f1fb}:root[data-theme="dark"] .mvV .mvT::before{color:#8fbcef}

/* 4 Oct 2026 (Willie chose the "Overlapping promise" concept): mission and vision on Our story. A navy band with the
   headline, and two white cards overlapping its lower edge, set slightly apart in height on purpose (they stack evenly on
   phones). Statements in Georgia italic with the coloured dash (.mvT). Hover changes the shadow and accent only. */
.op{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;background:#edf5ff;padding:0 0 44px}
.opBd{position:relative;min-height:290px;padding:50px 54px;color:#fff;background:linear-gradient(120deg,#0b2239,#1c5c97)}
.opEye{display:block;margin-bottom:14px;color:#ecbf47;font-size:.78rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.opBd h2{position:relative;z-index:2;margin:0;max-width:660px;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.06;letter-spacing:-.03em;color:#fff}
.opRing{position:absolute;right:-60px;top:-90px;width:380px;height:380px;border:58px solid rgba(236,191,71,.18);border-radius:50%}
.opCards{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:20px;width:calc(100% - 98px);margin:-70px auto 0}
.opCard{position:relative;padding:30px 30px 30px 34px;border-radius:21px;background:#fff;box-shadow:0 18px 44px rgba(11,34,57,.15);transition:box-shadow .2s ease}
.opCard::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:6px;border-radius:0 6px 6px 0;background:#ecbf47;transition:background-color .2s ease}
.opV::before{background:#4c91e5}
.opM{transform:translateY(-14px)}.opV{transform:translateY(14px)}
.opCard:hover{box-shadow:0 22px 52px rgba(11,34,57,.22)}
.opLab{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.opLab h3{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9b6710}
.opV .opLab h3{color:#315b86}
.opIc{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff1ce;color:#a76508;flex:0 0 42px}
.opV .opIc{background:#e6f0fb;color:#2769aa}.opIc svg{width:22px;height:22px}
.opCard .mvT{margin:0;color:#10273e}
@media (max-width:760px){.opBd h2 br{display:none}.opBd{min-height:0;padding:34px 22px 76px}.opCards{grid-template-columns:1fr;width:calc(100% - 34px);margin-top:-46px}.opM,.opV{transform:none}.op{border-radius:22px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .op{background:#122233}:root:not([data-theme="light"]) .opCard{background:#1a2b3d}:root:not([data-theme="light"]) .opCard .mvT{color:#e8f1fb}:root:not([data-theme="light"]) .opLab h3{color:#e8b85a}:root:not([data-theme="light"]) .opV .opLab h3{color:#8fbcef}}
:root[data-theme="dark"] .op{background:#122233}:root[data-theme="dark"] .opCard{background:#1a2b3d}:root[data-theme="dark"] .opCard .mvT{color:#e8f1fb}:root[data-theme="dark"] .opLab h3{color:#e8b85a}:root[data-theme="dark"] .opV .opLab h3{color:#8fbcef}
.opV .mvT::before{color:#3574b8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .opV .mvT::before{color:#8fbcef}}:root[data-theme="dark"] .opV .mvT::before{color:#8fbcef}

/* 4 Oct 2026 (Willie): Help page picture, standing on the top edge of the "Type a question" bar, top right */
.helpTop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.helpTop h2{margin-bottom:0}
.helpTop .helpArt{flex:0 0 auto;height:150px;width:auto;margin:0 24px -18px 0;position:relative;z-index:3;pointer-events:none}
.helpSearch{position:relative;z-index:1}
@media (max-width:600px){.helpTop .helpArt{height:92px;margin-right:4px}}

/* 4 Oct 2026 (Willie): the trainer page checklist "Running a session in your space" gets a hover. The padding and the
   transparent left edge are there all the time, so nothing moves on hover; only the colours change. */
.tick.tickHov{gap:2px}
.tickHov li{padding:9px 12px;margin:0 -12px 0 -15px;border-left:3px solid transparent;border-radius:12px;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.tickHov li svg{transition:fill .2s ease}
.tickHov li:hover{background:var(--sky-soft);border-left-color:#d49a2d;box-shadow:0 6px 18px rgba(11,34,57,.08)}
.tickHov li:hover svg{fill:#d49a2d}

/* 4 Oct 2026: the hovered step number stays white on gold in dark mode too (it was light blue on gold) */
.joinSteps li:hover:before{color:#fff!important}