:root{
  color-scheme: light;
  --plane:#fbfaf7; --surface:#ffffff; --surface-2:#f7f5ef; --surface-3:#efece2;
  --ink:#16233f; --ink-2:#4a5670; --ink-3:#667082;
  --rule:#e8e4d8; --rule-2:#d6d0be;
  --navy:#16233f; --navy-2:#0f1930;
  
  --gold:#c9a227; --gold-2:#866c15; --gold-soft:#fdf6e0; --gold-line:#e0c765;
  --red:#c62828; --red-2:#a01f1f; --red-soft:#fdeceb; --red-line:#e57373;
  --green:#1b7f3b; --green-soft:#eaf7ee; --green-line:#3aa35c;
  --amber:#b8860b; --amber-soft:#fff8e6;
  --s1:#16233f; --s2:#1b7f3b; --s3:#b8860b; --s4:#8e44ad; --s5:#1565a0;
  --s6:#c62828; --s7:#0f766e; --s8:#7a5c1e;
  --shadow:0 1px 2px rgba(22,35,63,.05), 0 6px 20px rgba(22,35,63,.07);
  --shadow-lg:0 4px 12px rgba(22,35,63,.08), 0 18px 44px rgba(22,35,63,.13);
  --radius:14px; --radius-sm:10px;
  
  --card:#ffffff; --muted:#667082;
  
  --on-navy:#ffffff;
  --fs:17.5px; --maxw:920px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --plane:#101725; --surface:#17203a; --surface-2:#1d2745; --surface-3:#26314f;
  --ink:#f6f4ee; --ink-2:#c9cfdd; --ink-3:#8e97ab;
  --rule:#26314f; --rule-2:#33405f;
  --navy:#f6f4ee;
  --gold:#e5c158; --gold-2:#f0d585; --gold-soft:#2b2415; --gold-line:#7a6420;
  --red:#ff8a80; --red-2:#ffab9f; --red-soft:#3a1a18; --red-line:#c0392b;
  --green:#5fd58a; --green-soft:#12301f; --green-line:#2e8b57;
  --amber:#e5c158; --amber-soft:#2b2415;
  --s1:#93a7d6; --s2:#5fd58a; --s3:#e5c158; --s4:#c79ae0; --s5:#6fb6ea;
  --s6:#ff8a80; --s7:#4fd1c5; --s8:#d4b483;
  --on-navy:#16233f;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 4px 12px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--fs);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;max-width:100vw;background:var(--plane);color:var(--ink);font-family:var(--sans);
  line-height:1.6;-webkit-text-size-adjust:100%;overflow-wrap:break-word;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;-moz-user-select:text;user-select:text}
*::selection{background:transparent}
input::selection,textarea::selection{background:Highlight;color:HighlightText}
img{-webkit-user-drag:none;user-drag:none}

h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:750;letter-spacing:-.018em;color:var(--navy)}
h1{font-size:1.95rem} h2{font-size:1.38rem} h3{font-size:1.08rem} h4{font-size:.98rem}
p{margin:0 0 .8em}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:5px;
  
  box-shadow:0 0 0 5px rgba(22,35,63,.55)}
button{font:inherit;font-weight:620;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Links written without a class - the footer email address, links inside prose
   and inside table cells - never met the stylesheet and were falling through to
   the browser default, a blue that appears nowhere else on this site.
   a:not([class]) rather than a bare a: everything deliberately styled here
   carries a class, so this cannot reach anything that already has an opinion.
   #7a6212 clears 4.5:1 on both the cream and the white surfaces. */
a:not([class]){color:#7a6212;text-underline-offset:.15em;
  text-decoration-thickness:from-font}
a:not([class]):hover{color:var(--navy,#16233f)}
/* The skip link is the first thing a keyboard user reaches on every page, and
   it was arriving in that same blue. */
.skip{color:var(--navy,#16233f)}
.skip:focus{color:var(--on-navy,#fff)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--surface);padding:.6rem 1rem;border-radius:10px}
.skip:focus{left:.5rem;top:.5rem}
.caps{text-transform:uppercase;letter-spacing:.08em;font-weight:800}



#wm{position:fixed;inset:0;pointer-events:none;z-index:11;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:5rem;opacity:.085}

#wm span{transform:rotate(-30deg);font-size:1.05rem;font-weight:800;color:var(--navy);
  white-space:nowrap;letter-spacing:.06em}
:root[data-theme="dark"] #wm{opacity:.11}


.cardmark{display:block;margin:1.1rem 0 0;padding-top:.55rem;
  border-top:1px solid var(--rule);font-size:.62rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  user-select:none;-webkit-user-select:none}
.cardmark b{color:var(--gold-2);font-weight:800}
@media print{.cardmark{color:#555 !important}}



.app{display:flex;min-height:100vh;position:relative;width:100%;max-width:100%}
.sidebar{width:280px;flex:0 0 280px;background:var(--surface);border-right:1px solid var(--rule);
  height:100vh;position:sticky;top:0;display:flex;flex-direction:column;z-index:40}
.sidebar.collapsed{width:0;flex-basis:0;overflow:hidden;border-right:none}
.side-head{padding:1rem .9rem;border-bottom:2px solid var(--gold);background:var(--surface);
  display:flex;align-items:center;gap:.7rem}
.side-head img{height:52px;width:auto;flex:0 0 auto}
.side-head .t{font-size:1rem;font-weight:800;color:var(--navy);line-height:1.15}
.side-head .s{font-size:.66rem;color:var(--gold-2);letter-spacing:.14em;font-weight:800;text-transform:uppercase}
.side-scroll{overflow-y:auto;flex:1;padding:.6rem .5rem 2rem;overscroll-behavior:contain}
.navbtn{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.6rem .7rem;
  border-radius:9px;font-size:.9rem;color:var(--ink-2);font-weight:640;transition:.12s}
.navbtn:hover{background:var(--gold-soft);color:var(--navy)}
.navbtn.active{background:var(--navy);color:var(--on-navy)}
.navbtn.active .count{background:var(--gold);color:var(--navy)}
.navbtn .count{margin-left:auto;font-size:.74rem;font-variant-numeric:tabular-nums;
  background:var(--surface-3);color:var(--ink-2);padding:.06rem .45rem;border-radius:999px;font-weight:750}
.navbtn .dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.side-label{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-2);padding:.9rem .75rem .3rem;margin:0}
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;z-index:10}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;flex-wrap:wrap}
:root[data-theme="dark"] .topbar{background:rgba(23,32,58,.92)}
.content{padding:1.5rem 1.5rem 5rem;width:100%;max-width:var(--maxw);margin:0 auto;flex:1}


.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:9px;
  border:2px solid var(--rule-2);background:var(--surface);font-size:.87rem;color:var(--ink-2);
  font-weight:680;transition:.12s;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--gold);color:var(--navy);background:var(--gold-soft)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.btn.primary:hover{background:#0f1930;border-color:#0f1930;color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:800}
.btn.gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:.32rem .6rem;font-size:.79rem;border-width:1.5px}
.btn.lg{padding:.75rem 1.3rem;font-size:1rem;border-radius:11px}
.icon{width:1.1em;height:1.1em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.field{padding:.55rem .75rem;border-radius:9px;border:2px solid var(--rule-2);
  background:var(--surface);font-size:.88rem;min-width:0;font-weight:600;color:var(--navy)}
.field:focus{border-color:var(--gold)}
.field:focus-visible{outline:3px solid var(--gold);outline-offset:1px;
  box-shadow:0 0 0 5px rgba(22,35,63,.55)}
.search{flex:1;min-width:160px;max-width:440px}


.hero-card{background:var(--surface);border:1px solid var(--rule);border-top:5px solid var(--gold);
  border-radius:16px;padding:1.4rem 1.5rem;margin:0 0 1.2rem;box-shadow:var(--shadow)}
.hero-card h1{margin:0 0 .15rem}
.hero-card .sub{color:var(--ink-3);font-size:.92rem;margin:0 0 1.1rem;font-weight:600}
.hero-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end}
.hero-num{font-size:3rem;font-weight:820;line-height:1;letter-spacing:-.03em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.hero-num small{font-size:1.25rem;font-weight:750;color:var(--gold-2)}
.hero-bar{height:12px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin:.5rem 0 .35rem}
.hero-bar>i{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .5s}
.grid{display:grid;gap:.85rem}

.grid.k2{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.grid.k3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.k4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:.9rem 1rem;
  box-shadow:var(--shadow);border-left:4px solid var(--gold)}
.tile.t2{border-left-color:var(--green)} .tile.t3{border-left-color:var(--navy)}
.tile.t4{border-left-color:var(--red)}
.tile .lbl{font-size:.68rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;
  font-weight:800;margin:0 0 .2rem}
.tile .val{font-size:1.7rem;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  line-height:1.05;margin:0;color:var(--navy)}
.tile .sub{font-size:.76rem;color:var(--ink-3);margin:.15rem 0 0;font-weight:600}

.action-row{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin:0 0 1.4rem}
.action{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start;text-align:left;
  padding:1.05rem 1.1rem;border-radius:13px;box-shadow:var(--shadow);transition:.14s;
  background:var(--surface);border:2px solid var(--rule);border-top:5px solid var(--gold)}
.action:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--gold)}
.action .ttl{font-size:1rem;font-weight:800;display:flex;align-items:center;gap:.45rem;color:var(--navy)}
.action .desc{font-size:.8rem;color:var(--ink-3);font-weight:600}
.action.mock{border-top-color:var(--navy)} .action.flag{border-top-color:var(--red)}
.action.wrong{border-top-color:var(--red)} .action.notes{border-top-color:var(--green)}
.action.results{border-top-color:var(--gold)}

.subject-card{display:block;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--rule);border-left:5px solid var(--gold);border-radius:12px;
  padding:.9rem 1rem;transition:.14s;box-shadow:var(--shadow)}
.subject-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.subject-card h3{margin:0 0 .1rem;font-size:.95rem}
.subject-card .meta{font-size:.78rem;color:var(--ink-3);font-weight:650;font-variant-numeric:tabular-nums}
.bar{height:7px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin:.45rem 0 0}
.bar>i{display:block;height:100%;border-radius:999px;background:var(--gold);transition:width .4s}


.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .58rem;border-radius:999px;
  font-size:.72rem;font-weight:800;background:var(--surface-3);color:var(--ink-2);white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.04em}
.pill.gold{background:var(--gold-soft);color:var(--gold-2);border:1px solid var(--gold-line)}
.pill.navy{background:var(--navy);color:var(--on-navy)}
.pill.good{background:var(--green-soft);color:var(--green);border:1px solid var(--green-line)}
.pill.bad{background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}


.q-card{background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:1.25rem 1.35rem;margin:0 0 1rem;box-shadow:var(--shadow-lg);border-top:4px solid var(--gold)}
.q-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .85rem;
  padding-bottom:.75rem;border-bottom:2px solid var(--surface-3)}
.q-index{background:var(--navy);color:var(--on-navy);font-weight:800;font-size:.84rem;
  padding:.28rem .7rem;border-radius:999px;font-variant-numeric:tabular-nums}
.q-stem{font-size:1.14rem;line-height:1.55;margin:0 0 1.1rem;font-weight:560;color:var(--ink)}
.opts{display:grid;gap:.55rem;margin:0 0 1.05rem;list-style:none;padding:0}
.opt{display:flex;gap:.75rem;align-items:flex-start;width:100%;text-align:left;padding:.8rem .95rem;
  border:2px solid var(--rule-2);border-radius:11px;background:var(--surface);
  transition:.12s;min-height:52px;font-weight:550;font-size:1rem;color:var(--ink)}
.opt:hover:not(:disabled){border-color:var(--gold);background:var(--gold-soft)}
.opt .ltr{font-weight:800;flex:0 0 1.85em;height:1.85em;display:grid;place-items:center;
  background:var(--surface-3);border-radius:7px;font-size:.88rem;color:var(--navy);transition:.12s}
.opt[aria-checked="true"]{border-color:var(--navy);background:var(--surface-2);
  
  box-shadow:inset 4px 0 0 var(--navy)}
.opt[aria-checked="true"] .ltr{background:var(--navy);color:var(--on-navy)}
.opt.is-correct{border-color:var(--green-line);background:var(--green-soft)}
.opt.is-correct .ltr{background:var(--green);color:#fff}
.opt.is-wrong{border-color:var(--red-line);background:var(--red-soft)}
.opt.is-wrong .ltr{background:var(--red);color:#fff}
.opt .mark{margin-left:auto;font-size:.7rem;font-weight:800;display:flex;align-items:center;gap:.25rem;
  white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
.opt.is-correct .mark{color:var(--green)} .opt.is-wrong .mark{color:var(--red)}
.verdict{display:flex;align-items:center;gap:.55rem;padding:.8rem .95rem;border-radius:11px;
  font-weight:800;margin:0 0 .95rem;font-size:1rem;border:2px solid;text-transform:uppercase;
  letter-spacing:.03em}
.verdict.ok{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.verdict.no{background:#fff;color:var(--red);border-color:var(--red)}
.verdict .ans{margin-left:auto;font-weight:750;text-transform:none;letter-spacing:0}
.explain{background:var(--surface);border:1px solid var(--rule);border-left:5px solid var(--navy);
  border-radius:11px;padding:.95rem 1.05rem;margin:0 0 .85rem}
.explain h4{margin:0 0 .45rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--navy);font-weight:800;display:flex;align-items:center;gap:.4rem}
.explain p{margin:0 0 .55rem;font-size:1rem} .explain p:last-child{margin:0}
.explain.wrongs{border-left-color:var(--red);background:#fff}
.explain.wrongs h4{color:var(--red)}
.wrong-list{display:grid;gap:.45rem}
.wrong-row{display:flex;flex-wrap:wrap;gap:.6rem;padding:.55rem .7rem;background:var(--red-soft);
  border:1px solid var(--red-line);border-radius:9px;font-size:.95rem;color:var(--ink);min-width:0}

.wrong-row>span{min-width:0;overflow-wrap:anywhere}
@media (max-width:560px){
  
  .wrong-row b{white-space:normal !important}
}
.wrong-row b{color:var(--red);font-weight:800;flex:0 0 1.3em}
.tipbox{background:var(--gold-soft);border:2px solid var(--gold-line);border-radius:11px;
  padding:.8rem .95rem;margin:0 0 .85rem}
.tipbox h4{margin:0 0 .3rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--gold-2);font-weight:800;display:flex;align-items:center;gap:.4rem}
.tipbox p{margin:0;font-size:.97rem}
.q-actions{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.95rem;
  padding-top:.85rem;border-top:2px solid var(--surface-3)}
.notes-in{width:100%;min-height:80px;padding:.65rem .8rem;border:2px solid var(--rule-2);
  border-radius:9px;background:var(--surface-2);resize:vertical;font-size:.96rem;line-height:1.5}
.notes-in:focus{border-color:var(--gold);background:var(--surface)}


.exam-bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--rule);border-radius:12px;padding:.65rem .85rem;margin:0 0 1rem;
  box-shadow:var(--shadow);border-left:5px solid var(--navy)}
.timer{font-variant-numeric:tabular-nums;font-weight:800;padding:.35rem .8rem;border-radius:9px;
  background:var(--navy);color:var(--on-navy);font-size:1.05rem;letter-spacing:.02em}
.timer.low{background:var(--red);animation:timerHalo 1.4s ease-in-out infinite}

@keyframes timerHalo{
  0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,.55)}
  50%{box-shadow:0 0 0 7px rgba(198,40,40,0)}
}

.btn:active,.navbtn:active,.subject-card:active,.action:active,.hub-card:active,
.opt:active,.choice button:active,.pill.btn:active{transform:scale(.97)}
.btn:active{box-shadow:none}
.opt:active{transform:scale(.995)}
@media (prefers-reduced-motion:reduce){
  .btn:active,.navbtn:active,.subject-card:active,.action:active,.hub-card:active,
  .opt:active,.choice button:active{transform:none}
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.prog-strip{height:8px;background:var(--surface-3);border-radius:999px;overflow:hidden;flex:1;min-width:110px}
.prog-strip>i{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .3s}
.pager{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:center;margin:1.3rem 0 0}


.choice{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0 0 1.3rem}
.choice button{padding:1rem;border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);
  text-align:left;transition:.13s}
.choice button:hover{border-color:var(--gold);background:var(--gold-soft)}
.choice button[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:var(--on-navy)}
.choice button[aria-pressed="true"] .cs{color:rgba(255,255,255,.85)}
.choice .ct{font-weight:800;font-size:1rem;display:block;margin-bottom:.15rem}
.choice .cs{font-size:.79rem;color:var(--ink-3);font-weight:600}
.res-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--rule);border-left:5px solid var(--gold);border-radius:12px;
  padding:.85rem 1rem;margin:0 0 .7rem;box-shadow:var(--shadow)}
.res-row .sc{font-size:1.5rem;font-weight:820;font-variant-numeric:tabular-nums;color:var(--navy);min-width:4.2rem}
.res-row .sc.low{color:var(--red)} .res-row .sc.good{color:var(--green)}
.res-row .meta{flex:1;min-width:150px}
.res-row .meta b{display:block;font-size:.95rem;color:var(--navy)}
.res-row .meta span{font-size:.79rem;color:var(--ink-3);font-weight:600}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th,.tbl td{padding:.5rem .7rem;border-bottom:1px solid var(--rule);text-align:left}
.tbl th{background:var(--surface-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:800;color:var(--ink-3)}
.tbl td b{color:var(--navy)}

.note-card{background:var(--surface);border:1px solid var(--rule);border-left:5px solid var(--green);
  border-radius:12px;padding:.95rem 1.05rem;margin:0 0 .85rem;box-shadow:var(--shadow)}
.note-card .nq{font-size:.93rem;color:var(--ink-2);font-weight:650;margin:0 0 .45rem}
.note-card .nb{white-space:pre-wrap;font-size:.96rem;background:var(--surface-2);border-radius:9px;padding:.65rem .8rem}
.empty{text-align:center;padding:3.4rem 1rem;color:var(--ink-3)}
.empty svg{width:42px;height:42px;margin-bottom:.6rem;opacity:.5}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%) translateY(150%);
  background:var(--navy);color:var(--on-navy);padding:.65rem 1.15rem;border-radius:999px;font-size:.89rem;
  font-weight:700;z-index:150;transition:transform .28s;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.totop{position:fixed;right:1.1rem;bottom:1.1rem;z-index:45;width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:var(--on-navy);border:none;display:none;place-items:center;box-shadow:var(--shadow-lg)}
.totop.show{display:grid}
.hint{font-size:.83rem;color:var(--ink-3);font-weight:600}
.warn-red{background:#fff;border:2px solid var(--red);color:var(--red);border-radius:10px;
  padding:.7rem .85rem;font-weight:700;font-size:.9rem;margin:.8rem 0}
.scrim{position:fixed;inset:0;background:rgba(22,35,63,.45);z-index:39;display:none}
.scrim.open{display:block}
mark{background:var(--gold-soft);color:var(--navy);border-radius:3px;padding:0 .15em;
  box-shadow:inset 0 -.4em 0 var(--gold-soft)}
figure{margin:1rem 0} figure img{max-width:100%;height:auto;border-radius:11px;border:1px solid var(--rule);cursor:zoom-in;display:block}
figcaption{font-size:.84rem;color:var(--ink-2);margin-top:.4rem;font-weight:600}
.lightbox{position:fixed;inset:0;background:rgba(10,16,30,.95);z-index:100;display:none;
  align-items:center;justify-content:center;flex-direction:column;padding:1rem}

.lb-cap{color:#e8e8e6;font-size:.86rem;max-width:760px;margin:.7rem auto 0;text-align:center;line-height:1.5}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;transition:transform .18s}
.lb-bar{display:flex;gap:.5rem;margin-top:.9rem;flex-wrap:wrap;justify-content:center}

.menu-btn{display:none}
@media (max-width:900px){
  :root{--fs:17px}
  .menu-btn{display:inline-flex}
  
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);
    transition:transform .24s ease, visibility 0s linear .24s;visibility:hidden;
    width:276px;flex-basis:276px;box-shadow:var(--shadow-lg);overscroll-behavior:contain}
  .sidebar.open{transform:translateX(0);visibility:visible;transition:transform .24s ease}
  .sidebar.collapsed{width:276px;flex-basis:276px;overflow:visible;border-right:1px solid var(--rule)}
  .sidebar.collapsed:not(.open){visibility:hidden}
  .content{padding:1rem .85rem 5rem}
  
  .topbar{gap:.35rem;padding:.5rem .6rem}
  .topbar .btn{padding:.45rem .6rem}
  .hero-num{font-size:2.5rem}
  .q-card{padding:1rem .95rem}
  .q-stem{font-size:1.08rem}
  #wm span{font-size:.85rem}
}
@media (max-width:460px){
  .topbar .tlabel{display:none}
  .topbar .btn{gap:0}
  .topbar #revSearch{flex:1 1 100%;order:5}
  .seg .btn.sm{padding:.4rem .5rem}
  
  .exam-bar{flex-wrap:wrap}
  .exam-bar .field.search{flex:1 1 100%;order:-1}
  .exam-bar select.field{flex:1 1 45%}
  .home-search{padding:.8rem .85rem .9rem}
}


.home-search{background:var(--card);border:2px solid var(--rule-2);border-radius:12px;
  padding:.9rem 1rem 1rem;margin:0 0 1.2rem}
.home-search label{display:block;font-size:.72rem;letter-spacing:.09em;font-weight:800;
  color:var(--muted);margin:0 0 .45rem}
.home-search .field{width:100%;font-size:1rem}
.home-search .hint{margin:.5rem 0 0}


@media (pointer:coarse){
  
  .btn,.navbtn,.opt,.action,.subject-card,select.field,input.field{min-height:44px}
  
  .btn.sm{min-height:44px}
  .opt{padding-top:.8rem;padding-bottom:.8rem}
  .pager .btn{flex:1;min-height:52px}
  
  .btn:hover,.opt:hover,.action:hover{transform:none}
}


@supports (height:100dvh){
  .sidebar{height:100dvh}
}


@media (max-height:460px) and (orientation:landscape){
  .hero-card{padding:.8rem 1rem}
  .hero-num{font-size:1.8rem}
  .exam-bar{padding-top:.4rem;padding-bottom:.4rem}
}

@media print{ body{display:none} }




/* The table is wider than a phone and scrolls sideways inside this box.
   It always did; nothing on the screen said so, and a table you have to
   guess is scrollable is a table half of people read half of. The fade on
   the right edge is the hint. It is drawn only while there is something
   further to scroll to, using a background-attachment trick rather than a
   scroll listener, so it costs nothing and works with the keyboard too. */
/* ------------------------------------------------- the route comparison */
.cmp-head{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:1.4rem 0 0}
.cmp-cost{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:1rem 1.1rem 1.05rem;position:relative;overflow:hidden}
.cmp-cost.cheap{border-color:var(--green-line,#bfe0cb);background:var(--green-soft,#f2f9f4)}
.cmp-cost h3{margin:0;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3)}
.cmp-cost .big{margin:.3rem 0 0;font-size:clamp(1.7rem,3.4vw,2.15rem);font-weight:800;
  color:var(--navy);line-height:1.05;font-variant-numeric:tabular-nums}
.cmp-cost .sub{margin:.25rem 0 0;font-size:.84rem;color:var(--ink-2);font-weight:600}
.cmp-cost .tag{position:absolute;top:.7rem;right:.8rem;font-size:.62rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:var(--green,#1c7a3e);color:#fff;
  padding:.16rem .45rem;border-radius:999px}
.cmp-note{margin:.9rem 0 0;font-size:.86rem;color:var(--ink-2);font-weight:600}
.cmp-h3{margin:2rem 0 .3rem;font-size:1.05rem}
.cmp-lede{margin:0 0 .7rem;font-size:.92rem;color:var(--ink-2)}
.cmp-box{margin:1.5rem 0 0;background:var(--gold-soft,#FBF6E9);
  border:1px solid var(--gold-line,#C4A24C);border-radius:14px;padding:1rem 1.15rem}
.cmp-box h3{margin:0 0 .45rem;font-size:.95rem;color:var(--navy)}
.cmp-box p{margin:0 0 .55rem;font-size:.9rem;line-height:1.6}
.cmp-box ul{margin:.2rem 0 .6rem;padding-left:1.1rem;font-size:.9rem;line-height:1.6}
.cmp-box li{margin:0 0 .3rem}
.cmp-box .last{margin-bottom:0}
.tbl td.win{background:var(--green-soft,#f2f9f4);font-weight:700}
.cmp-src{margin:1.2rem 0 0;font-size:.78rem;color:var(--ink-3);line-height:1.6}
.tblbox{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  background:linear-gradient(to right,var(--surface) 30%,rgba(255,255,255,0)),
             linear-gradient(to right,rgba(255,255,255,0),var(--surface) 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(22,35,63,.14),rgba(0,0,0,0)),
             radial-gradient(farthest-side at 100% 50%,rgba(22,35,63,.14),rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;background-size:34px 100%,34px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll}
.tblbox .tbl{min-width:34rem}
.tblbox::-webkit-scrollbar{height:8px}
.tblbox::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:4px}
@media (max-width:560px){
  .tbl{font-size:.8rem}
  .tbl th,.tbl td{padding:.42rem .5rem}
  .tblbox .tbl{min-width:30rem}
}
/* On the narrowest phones still in use (320px), "Everything about ORE Part 1"
   plus its arrow is wider than the card it sits in, and .btn does not wrap by
   default, so the arrow was hanging past the screen edge. Let the label wrap
   here only - at every other width it fits on one line and should stay there. */
@media (max-width:400px){
  .ccard .btn{white-space:normal;text-align:center}
}

.q-card,.tipbox,.explain,figure,img,pre{max-width:100%}
table{max-width:100%}




.sk-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.9rem 1rem;margin:.7rem 0;box-shadow:var(--shadow)}
.sk-line{display:block;height:11px;border-radius:6px;margin:.45rem 0;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:skShimmer 1.4s ease infinite}
.sk-line.t{height:16px;width:58%;margin-bottom:.7rem}
.sk-line.w90{width:90%} .sk-line.w70{width:70%} .sk-line.w45{width:45%}
.sk-note{font-size:.84rem;color:var(--ink-3);text-align:center;margin:.2rem 0 1rem;
  font-variant-numeric:tabular-nums}
@keyframes skShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.sk-line{animation:none}}



.priokey{margin:.9rem 0 0;background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--gold);border-radius:12px}
.priokey summary{cursor:pointer;padding:.7rem .95rem;font-weight:700;font-size:.9rem;
  color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.priokey summary::-webkit-details-marker{display:none}
.priokey summary::after{content:"+";font-size:1.25rem;font-weight:400;color:var(--gold-2);line-height:1}
.priokey[open] summary::after{content:"\2212"}
.priolist{list-style:none;margin:0;padding:0 .95rem .3rem;display:grid;gap:.6rem}
.priolist li{font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.priolist li b{color:var(--ink)}
.priolist .pill{margin-right:.45rem;vertical-align:baseline}
.priofoot{margin:0;padding:.7rem .95rem .85rem;font-size:.84rem;color:var(--ink-3);
  border-top:1px solid var(--rule)}

.jump{position:relative;flex:1;min-width:110px;display:flex;align-items:center;height:26px}
.jump .prog-strip{flex:1;min-width:0}
.jump input[type=range]{position:absolute;left:0;right:0;width:100%;height:26px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.jump input[type=range]::-webkit-slider-runnable-track{height:26px;background:transparent;border:0}
.jump input[type=range]::-moz-range-track{height:26px;background:transparent;border:0}
.jump input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;margin-top:4.5px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.jump input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.jump input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:999px}



.hub-buy{margin:1.6rem 0 0;padding:1.1rem 1.2rem;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:var(--radius)}
.hub-buy h2{margin:0 0 .4rem;font-size:1rem;letter-spacing:.02em}
.hub-buy p{margin:0 0 .6rem;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.hub-buy .hub-buy-go{margin:.9rem 0 .5rem;text-align:center}
.hub-buy .hint{margin:0;font-size:.78rem;color:var(--ink-3);text-align:center}


.linkish{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--gold-2);text-decoration:underline}
.ctr{text-align:center}


#loginScreen,#loadScreen,#hubRoot{display:none;min-height:100vh;min-height:100dvh;
  align-items:flex-start;justify-content:center;padding:1.25rem 1rem 2.5rem;overflow-y:auto}
#loginScreen>*,#loadScreen>*{margin:auto}
#loginScreen,#loadScreen{background:
  radial-gradient(1100px 620px at 12% -8%, #fdf6e0 0%, transparent 62%),
  radial-gradient(900px 560px at 108% 106%, #eef2fa 0%, transparent 60%),
  var(--plane)}
#hubRoot{background:
  radial-gradient(1200px 700px at 6% -12%, #fdf6e0 0%, transparent 60%),
  radial-gradient(1000px 620px at 106% 110%, #eef2fa 0%, transparent 58%),
  var(--plane); padding:0}
#appRoot{display:none}

.auth-card{background:var(--surface);border-radius:20px;padding:2.1rem 2rem 1.7rem;width:100%;
  max-width:420px;box-shadow:var(--shadow-lg);border:1px solid var(--rule);position:relative;z-index:20}
.auth-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,var(--gold),var(--navy))}
.auth-card h1{font-size:1.35rem;margin:0 0 .25rem;letter-spacing:.04em}
.auth-card .lead{color:var(--ink-2);font-size:.9rem;margin:0 0 1.5rem;font-weight:550}
.auth-card label{display:block;font-size:.78rem;font-weight:800;margin:0 0 .35rem;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.06em}
.auth-card input{width:100%;padding:.75rem .85rem;border:2px solid var(--rule-2);border-radius:11px;
  background:var(--surface-2);font-size:1rem;margin:0 0 1rem}
.auth-card input:focus{border-color:var(--gold);background:var(--surface);outline:none}
.auth-card button[type=submit]{width:100%;padding:.85rem;border-radius:11px;background:var(--navy);
  color:var(--on-navy);font-weight:800;font-size:.98rem;border:none;letter-spacing:.06em;
  box-shadow:0 8px 22px rgba(22,35,63,.22)}
.auth-card button[type=submit]:hover{background:var(--navy-2)}
.auth-card button[type=submit]:disabled{opacity:.6}
.auth-err{display:none;background:var(--red-soft);color:var(--red);border:1.5px solid var(--red-line);
  border-radius:10px;padding:.65rem .8rem;font-size:.88rem;font-weight:700;margin:0 0 1rem}
/* Without this line every message on the sign-in and forgotten-password
   screens is written into a box that stays display:none - including the
   one confirming a reset link is on its way. The screen appeared to do
   nothing at all. */
.auth-err.show{display:block}
/* The same box carries the good news as well as the bad. Red is the
   wrong colour for "your link is on its way". */
.auth-err.ok{background:var(--gold-soft,#FBF6E9);color:var(--navy,#16233f);
  border-color:var(--gold-line,#C4A24C)}
/* Without this line every message on the sign-in and forgotten-password
   screens is written into a box that stays display:none - including the
   one confirming a reset link is on its way. The screen appeared to do
   nothing at all. */
.auth-err.show{display:block}
/* The same box carries the good news as well as the bad. Red is the
   wrong colour for "your link is on its way". */
.auth-err.ok{background:var(--gold-soft,#FBF6E9);color:var(--navy,#16233f);
  border-color:var(--gold-line,#C4A24C)}
.auth-foot{margin:1.3rem 0 0;font-size:.78rem;color:var(--ink-3);text-align:center;font-weight:600}
.auth-logo{display:block;margin:0 auto 1.2rem;width:190px;max-width:60%;height:auto}
@media (max-height:720px){
  .auth-card{padding:1.4rem 1.5rem 1.2rem}
  .auth-logo{width:120px;margin-bottom:.7rem}
  .auth-card .lead{margin-bottom:1rem}
  .auth-card input{margin-bottom:.7rem}
}

.load-box{background:var(--surface);border-radius:20px;padding:2rem;width:100%;max-width:420px;
  text-align:center;box-shadow:var(--shadow-lg);border:1px solid var(--rule)}
.load-box h2{margin:0 0 1.2rem;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase}
.load-track{height:10px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin:0 0 .8rem}
.load-track>i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--navy));transition:width .3s}


.hub-wrap{width:100%;max-width:860px;margin:0 auto;padding:2.4rem 1.4rem 3rem;position:relative;z-index:20}
.hub-top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 2.2rem}
.hub-top img{height:92px;width:auto}
.hub-top .spacer{flex:1}
.hub-who{font-size:.8rem;color:var(--ink-2);font-weight:700;text-align:right;line-height:1.35}
.hub-who span{display:block;color:var(--ink-3);font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;font-size:.68rem}
.hub-hello{margin:0 0 2rem}
.hub-hello h1{font-size:1.85rem;margin:0 0 .3rem;letter-spacing:.02em}
.hub-hello p{color:var(--ink-2);font-size:.98rem;margin:0;font-weight:550}
.hub-cards{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.hub-card{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:1.6rem 1.5rem;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;position:relative;overflow:hidden}
.hub-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--gold)}
.hub-card.navy::before{background:var(--navy)}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-line)}
.hub-card .ico{width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-2);
  display:flex;align-items:center;justify-content:center;margin:0 0 1rem}
.hub-card.navy .ico{background:#eef2fa;color:var(--navy)}
.hub-card .ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.hub-card h2{font-size:1.12rem;margin:0 0 .35rem;letter-spacing:.05em}
.hub-card p{margin:0 0 1rem;color:var(--ink-2);font-size:.88rem;font-weight:550}
.hub-card .go{font-size:.78rem;font-weight:800;color:var(--gold-2);text-transform:uppercase;
  letter-spacing:.08em;display:inline-flex;align-items:center;gap:.35rem}
.hub-card.navy .go{color:var(--navy)}
.hub-only{margin:.7rem 0 0;font-size:.82rem;font-weight:800;color:var(--gold-2);
  text-transform:uppercase;letter-spacing:.06em}
.hub-note{margin:2.4rem 0 0;padding:1rem 1.2rem;border-radius:var(--radius-sm);background:var(--surface);
  border:1px solid var(--rule);border-left:4px solid var(--red);font-size:.85rem;color:var(--ink-2);font-weight:600}
.hub-note b{color:var(--red)}
.hub-foot{margin:1.6rem 0 0;text-align:center}

#hubRoot #wm{opacity:.055;gap:6.5rem}
@media (max-width:560px){
  .hub-wrap{padding:1.6rem 1rem 2.4rem}
  .hub-top img{height:68px}
  .hub-hello h1{font-size:1.5rem}
}


.land{width:100%;max-width:min(1340px,calc(100% - 2rem));margin:auto;display:grid;gap:2rem 2.4rem;
  grid-template-columns:minmax(0,1.3fr) minmax(340px,440px);align-items:start;
  padding:1rem 0 2rem;position:relative;z-index:20}

.land>.land-copy{grid-column:1;grid-row:1;order:1}
.land>.auth-card{grid-column:2;grid-row:1;order:2;position:sticky;top:1.25rem}


@media (max-width:900px){.land>.auth-card{position:relative}}

.land>.intro{order:3}
.land>.courses-wrap{order:4}
.land>.two-ways{order:5}
.land>.price-wrap{order:6}
.land>.land-foot{order:7}
.land>.site-foot{order:8}
.land-copy h1{font-size:2.1rem;margin:.2rem 0 .5rem;letter-spacing:.01em}
.land-copy .tag{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);margin:0}
.land-copy .big{font-size:1.02rem;color:var(--ink-2);font-weight:600;margin:0 0 1.4rem}
.land-logo{width:150px;height:auto;display:block;margin:0 0 .4rem}
.sells{display:grid;gap:.7rem;margin:0 0 1.5rem}
.sell{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--gold);
  border-radius:var(--radius-sm);padding:.85rem 1rem}
.sell.navy{border-left-color:var(--navy)}
.sell.red{border-left-color:var(--red)}
.sell b{display:block;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--navy)}
.sell span{font-size:.9rem;color:var(--ink-2);font-weight:550}
.land-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:0 0 1.6rem}
.big-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:12px;
  background:var(--gold);color:var(--navy);font-weight:800;font-size:.95rem;border:2px solid var(--gold);
  letter-spacing:.04em;box-shadow:0 8px 22px rgba(201,162,39,.28);text-decoration:none}
.big-btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.big-btn.ghost{background:transparent;color:var(--navy);border-color:var(--rule-2);box-shadow:none}
.big-btn.ghost:hover{border-color:var(--navy);background:var(--surface)}
.land-stats{display:flex;gap:1.6rem;flex-wrap:wrap;margin:0 0 1.6rem}
.land-stats div{min-width:0}
.land-stats b{display:block;font-size:1.5rem;color:var(--navy);line-height:1.1}
.land-stats span{font-size:.74rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.contact-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.2rem 1.3rem;box-shadow:var(--shadow);margin:1.6rem 0 0}
.contact-card h2{font-size:1rem;margin:0 0 .2rem;letter-spacing:.05em}
.contact-card p.why{font-size:.85rem;color:var(--ink-2);margin:0 0 .9rem;font-weight:550}
.contact-card label{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);margin:.6rem 0 .25rem}
.contact-card input,.contact-card textarea{width:100%;padding:.6rem .75rem;border:2px solid var(--rule-2);
  border-radius:10px;background:var(--surface-2);font-size:.92rem;font-family:inherit}
.contact-card textarea{min-height:90px;resize:vertical}
.contact-card input:focus,.contact-card textarea:focus{border-color:var(--gold);outline:none;background:var(--surface)}
.form-msg{display:none;margin-top:.8rem;padding:.6rem .8rem;border-radius:10px;font-size:.87rem;font-weight:650}
.form-msg.ok{display:block;background:var(--green-soft);color:var(--green);border:1.5px solid var(--green-line)}
.form-msg.err{display:block;background:var(--red-soft);color:var(--red);border:1.5px solid var(--red-line)}
.hp{position:absolute;left:-9999px}


.optflag{font-size:.72rem;font-weight:800;letter-spacing:.05em;color:var(--ink-2);
  text-transform:uppercase;background:var(--surface-3);border:1px solid var(--rule);
  border-radius:999px;padding:.08rem .45rem;margin-left:.4rem;vertical-align:1px}
@media (max-width:900px){
  
  .land{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .land>.land-copy,.land>.auth-card{grid-column:1;grid-row:auto}
  .land-copy h1{font-size:1.7rem}
  .auth-card{max-width:none}
}


.expiry{margin:.7rem 0 0;font-size:.8rem;font-weight:750;color:var(--ink-2)}
.expiry b{color:var(--navy)}
.expiry.soon b{color:var(--red)}
.ended{max-width:520px;margin:auto;background:var(--surface);border:1px solid var(--rule);
  border-top:6px solid var(--red);border-radius:18px;padding:2rem;text-align:center;box-shadow:var(--shadow-lg)}
.ended h1{color:var(--red);font-size:1.3rem;letter-spacing:.05em}
.ended p{color:var(--ink-2);font-size:.95rem}

.ended .ended-lede{color:var(--ink);font-size:1.02rem;line-height:1.65}
.ended .ended-lede b{color:var(--navy)}
.ended-alt{margin:.9rem 0 0;font-size:.85rem}
.ended-alt a{color:var(--gold-2);font-weight:700}


.price-wrap{margin:.6rem 0 0;grid-column:1/-1}

.land-foot{grid-column:1/-1;display:grid;gap:1rem;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:820px){.land-foot{grid-template-columns:1fr}}
.after-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  border-top:5px solid var(--navy);padding:1.3rem 1.35rem;box-shadow:var(--shadow)}
.afterlist{list-style:none;counter-reset:step;margin:.9rem 0 0;padding:0;display:grid;gap:.85rem}
.afterlist li{counter-increment:step;position:relative;padding-left:2.1rem;font-size:.88rem;
  line-height:1.55;color:var(--ink-2);font-weight:550}
.afterlist li b{color:var(--ink)}
.afterlist li::before{content:counter(step);position:absolute;left:0;top:-.05em;width:1.5rem;
  height:1.5rem;border-radius:50%;background:var(--navy);color:var(--on-navy);
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800}
.afternote{margin:1rem 0 0;padding-top:.85rem;border-top:1px solid var(--rule);
  font-size:.83rem;color:var(--ink-3);font-weight:600}
.price-wrap h2{font-size:1.15rem;letter-spacing:.05em;margin:0 0 .25rem}
.price-wrap .why{color:var(--ink-2);font-size:.9rem;font-weight:550;margin:0 0 1.2rem}


.courses-wrap{margin:2.4rem 0;grid-column:1/-1}
.courses{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.course{background:var(--surface);border:1px solid var(--rule);border-top:5px solid var(--rule-2);
  border-radius:var(--radius);padding:1.2rem 1.15rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.5rem;position:relative}
.course.live{border-top-color:var(--gold)}
.course.next{border-top-color:var(--navy)}
.course.soon{background:var(--card)}
.course h3{margin:.2rem 0 0;font-size:1.22rem;letter-spacing:.01em}
.course .full{margin:0;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.course .blurb{margin:.35rem 0 0;font-size:.95rem;line-height:1.55}
.course .who{margin:.55rem 0 0;font-size:.84rem;line-height:1.5;color:var(--muted)}
.course .who b{font-size:.68rem;letter-spacing:.1em;color:var(--navy)}
.course .badge{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  padding:.22rem .6rem;border-radius:999px;text-transform:uppercase;
  background:var(--rule-2);color:var(--navy)}
.course .badge.on{background:var(--gold);color:var(--navy)}
.course .badge.next{background:var(--navy);color:var(--on-navy)}
.course .big-btn{width:100%;margin-top:auto}
.course .go2{margin:.9rem 0 0}
.course .hint{margin:.45rem 0 0}
.notify-form{margin:.75rem 0 0;border-top:1px dashed var(--rule);padding-top:.75rem}
.notify-form[hidden]{display:none}
.notify-form label{display:block;font-size:.7rem;letter-spacing:.09em;font-weight:800;
  color:var(--muted);margin:0 0 .35rem}
.notify-form input[type=email]{width:100%;padding:.6rem .7rem;border-radius:9px;
  border:2px solid var(--rule-2);background:var(--surface);color:inherit;font:inherit}
.notify-form input[type=email]:focus{border-color:var(--gold);outline:none}

.prices{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.price{background:var(--surface);border:1px solid var(--rule);border-top:5px solid var(--rule-2);
  border-radius:var(--radius);padding:1.15rem 1.1rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.55rem;position:relative}
.price.best{border-top-color:var(--gold);box-shadow:var(--shadow-lg)}

.price.limited{border-top-color:var(--red)}
.price.limited .flag{background:var(--red);color:#fff}
.price .flag{position:absolute;top:-.68rem;right:.9rem;background:var(--gold);color:var(--navy);
  font-size:.72rem;font-weight:800;letter-spacing:.09em;padding:.2rem .6rem;border-radius:999px;
  text-transform:uppercase}
.price h3{font-size:.88rem;margin:0;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.price .amount{font-size:1.85rem;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.02em}
.price .amount span{font-size:.95rem;font-weight:700;color:var(--ink-3)}
.price .per{font-size:.7rem;font-weight:800;color:var(--ink-3);letter-spacing:.07em;
  text-transform:uppercase;margin:-.2rem 0 0}
.price ul{list-style:none;padding:0;margin:.25rem 0 .3rem;display:grid;gap:.32rem}
.price li{font-size:.84rem;color:var(--ink-2);font-weight:550;display:flex;gap:.45rem;align-items:flex-start}

.price li::before{content:"";flex:0 0 auto;width:1.05em;height:1.05em;margin-top:.12em;
  border-radius:50%;background:var(--green-soft);border:1.5px solid var(--green-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23197a4b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:72%;background-position:center;background-repeat:no-repeat}
.price li.no{color:var(--ink-3)}
.price li.no::before{background-color:var(--surface-3);border-color:var(--rule-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8578' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  background-size:64%}
.price .buy{margin-top:auto;display:block;text-align:center;padding:.72rem;border-radius:11px;
  background:var(--navy);color:var(--on-navy);font-weight:800;font-size:.86rem;letter-spacing:.05em;
  text-decoration:none;border:2px solid var(--navy)}
.price .buy:not(.off):hover{background:var(--navy-2);border-color:var(--navy-2)}
.price.best .buy{background:var(--gold);border-color:var(--gold);color:var(--navy)}

.price.best .buy:not(.off):hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.price /* --ink-3 on --surface-3 is 4.23:1, below the 4.5:1 floor. --ink-2 clears
   it while still reading as "not available at the moment". */
.buy.off{background:var(--surface-3);border-color:var(--rule-2);color:var(--ink-2);cursor:default}

.price.owned{opacity:.82}
.price-foot{margin:1rem 0 0;font-size:.8rem;color:var(--ink-3);font-weight:600}

.ask-first{margin:.75rem 0 0;font-size:.85rem;line-height:1.6;color:var(--ink-2);
  max-width:70ch}
.ask-first a{color:var(--gold-2);font-weight:700;text-decoration:underline;
  text-underline-offset:2px}


#thanksScreen{display:flex;min-height:100vh;min-height:100dvh;align-items:flex-start;
  justify-content:center;padding:1.25rem 1rem 2.5rem;overflow-y:auto;
  background:radial-gradient(1100px 620px at 12% -8%, #fdf6e0 0%, transparent 62%),
  radial-gradient(900px 560px at 108% 106%, #eef2fa 0%, transparent 60%), var(--plane)}
.thanks{max-width:560px;margin:auto;background:var(--surface);border:1px solid var(--rule);
  border-top:6px solid var(--green);border-radius:18px;padding:2rem 1.9rem;box-shadow:var(--shadow-lg)}
.thanks img{width:130px;height:auto;display:block;margin:0 auto 1.2rem}
.thanks h1{font-size:1.35rem;letter-spacing:.04em;text-align:center;margin:0 0 .4rem}
.thanks .lead{text-align:center;color:var(--ink-2);font-size:.95rem;font-weight:600;margin:0 0 1.5rem}
.thanks ol{padding-left:1.35rem;margin:0 0 1.3rem}
.thanks li{margin:.6rem 0;font-size:.93rem;color:var(--ink-2);font-weight:550}
.thanks li b{color:var(--navy)}
.thanks .note{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:10px;
  padding:.75rem .9rem;font-size:.86rem;color:var(--ink-2);font-weight:600;margin:0 0 1.3rem}
.thanks .note b{color:var(--gold-2)}


.two-ways{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin:1.4rem 0 0;grid-column:1/-1}
.way{background:var(--surface);border:1px solid var(--rule);border-top:5px solid var(--navy);
  border-radius:var(--radius);padding:1.15rem 1.15rem 1.25rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.5rem}
.way.gold{border-top-color:var(--gold)}
.way h3{font-size:.9rem;margin:0;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.way .lead2{font-size:.88rem;color:var(--ink-2);font-weight:550;margin:0}
.way .free{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);background:var(--green-soft);border:1px solid var(--green-line);
  border-radius:999px;padding:.15rem .5rem;align-self:flex-start}
.way label{display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);margin:.45rem 0 .2rem}
.way input{width:100%;padding:.55rem .7rem;border:2px solid var(--rule-2);border-radius:9px;
  background:var(--surface-2);font-size:.9rem;font-family:inherit}
.way input:focus{border-color:var(--gold);outline:none;background:var(--surface)}
.way .go2{margin-top:auto}
.way .small{font-size:.74rem;color:var(--ink-3);font-weight:600;margin:.6rem 0 0}


#claimScreen{display:flex;min-height:100vh;min-height:100dvh;align-items:flex-start;
  justify-content:center;padding:1.25rem 1rem 2.5rem;overflow-y:auto;
  background:radial-gradient(1100px 620px at 12% -8%, #fdf6e0 0%, transparent 62%),
  radial-gradient(900px 560px at 108% 106%, #eef2fa 0%, transparent 60%), var(--plane)}
.claim{max-width:520px;margin:auto;background:var(--surface);border:1px solid var(--rule);
  border-top:6px solid var(--gold);border-radius:18px;padding:2rem 1.9rem;box-shadow:var(--shadow-lg)}
.claim img{width:130px;height:auto;display:block;margin:0 auto 1.3rem}
.claim h1{font-size:1.3rem;letter-spacing:.04em;text-align:center;margin:0 0 .5rem}
.claim .lead{color:var(--ink-2);font-size:.95rem;font-weight:550;text-align:center;margin:0 0 1rem}
.claim .note{background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:10px;
  padding:.75rem .9rem;font-size:.85rem;color:var(--ink-2);font-weight:600;margin:1rem 0 0;text-align:left}
.claim .note b{color:var(--gold-2)}
.claim label{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-2);margin:1rem 0 .25rem}
.claim input{width:100%;padding:.65rem .8rem;border:2px solid var(--rule-2);border-radius:10px;
  background:var(--surface-2);font-size:.95rem;font-family:inherit}
.claim .load-track{margin:1.2rem 0 0}
.claim p{text-align:center}


.big-btn.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.big-btn svg.icon{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.intro[hidden]{display:none}
.intro{grid-column:1/-1;background:var(--surface);border:1px solid var(--rule);
  border-top:5px solid var(--navy);border-radius:var(--radius);padding:1.6rem 1.7rem;
  box-shadow:var(--shadow);margin:.4rem 0 0}
.intro h2{font-size:1.22rem;margin:0 0 .6rem;letter-spacing:.03em}
.intro .hook{font-size:1.02rem;color:var(--ink);font-weight:640;margin:0 0 1rem;
  border-left:4px solid var(--gold);padding-left:.9rem}
.intro p{font-size:.94rem;color:var(--ink-2);font-weight:550;margin:0 0 .9rem}
.intro h3{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2);
  margin:1.4rem 0 .7rem}
.inside{list-style:none;padding:0;margin:0 0 1.1rem;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.inside li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2);
  font-weight:550;line-height:1.5}
.inside li svg{width:1.05rem;height:1.05rem;flex:0 0 auto;margin-top:.2rem;stroke:var(--green);
  fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.inside li b{color:var(--navy);font-weight:750}
.closer{margin:1.2rem 0 0;padding:.9rem 1.1rem;background:var(--navy);color:var(--on-navy);
  border-radius:var(--radius-sm);text-align:center}
.closer b{display:block;font-size:1.02rem;letter-spacing:.03em}
.closer span{font-size:.82rem;opacity:.85;font-weight:600}


.site-foot{grid-column:1/-1;margin:2.4rem 0 0;border-top:2px solid var(--gold);
  padding:1.6rem 0 0}
.foot-top{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between}
.foot-brand{flex:1 1 220px;min-width:0}
.foot-links{flex:0 1 170px;min-width:0;display:flex;flex-direction:column;gap:.15rem}
/* 24px tall was under half of what a thumb needs, on the most link-dense
   part of the page. The padding is negative-margined back out so the
   column still looks the way it did. */
.foot-links a{font-size:.85rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  padding:.5rem 0;margin:-.28rem 0;display:block;min-height:20px}
.foot-links a:hover{color:var(--navy);text-decoration:underline}
.foot-brand img{width:118px;height:auto;display:block;margin:0 0 .2rem}
.foot-brand .tagline{font-size:.86rem;color:var(--ink-2);font-weight:650;margin:0}
.foot-contact{flex:1 1 280px}
.foot-contact h4,.foot-links h4{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2);margin:0 0 .7rem}
.contacts{display:grid;gap:.55rem}
.contacts a{display:flex;align-items:center;gap:.7rem;padding:.6rem .85rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  text-decoration:none;color:var(--ink);font-weight:680;font-size:.9rem;
  transition:border-color .14s, background .14s}
.contacts a:hover{border-color:var(--gold);background:var(--gold-soft)}
.contacts a .ci{width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:grid;
  place-items:center;background:var(--surface-2)}
.contacts a .ci svg{width:17px;height:17px}
.contacts a.wa .ci{background:#e7f7ec}
.contacts a.wa .ci svg{fill:#128c7e}
.contacts a.ig .ci{background:#fdeef4}
.contacts a.ig .ci svg{fill:none;stroke:#c13584;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.contacts a.em .ci{background:#eef2fa}
.contacts a.em .ci svg{fill:none;stroke:var(--navy);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.contacts a span.lbl{display:flex;flex-direction:column;min-width:0}
.contacts a span.lbl small{font-size:.7rem;color:var(--ink-3);font-weight:650;
  text-transform:uppercase;letter-spacing:.05em}
.contacts a span.lbl b{font-weight:700;overflow-wrap:anywhere}
.foot-legal{margin:1.6rem 0 0;padding:1rem 0 0;border-top:1px solid var(--rule);
  font-size:.78rem;color:var(--ink-3);font-weight:600;line-height:1.65}
.foot-legal p{margin:0 0 .4rem}
.foot-legal b{color:var(--ink-2)}
@media (max-width:560px){
  .intro{padding:1.2rem 1.1rem}
  .foot-top{gap:1.2rem}
}



.hub-card.locked{opacity:.74;border-style:dashed;cursor:default;box-shadow:none}
.hub-card.locked:hover{transform:none;box-shadow:none}
.hub-card.locked h2{color:var(--ink-2)}
.hub-card.locked .lockline{font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:.15rem 0 .4rem}
.hub-card.locked .go{color:var(--gold-2)}



.resume{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:var(--radius);
  padding:.85rem 1rem;margin:0 0 1rem;box-shadow:var(--shadow)}
.resume-txt{flex:1;min-width:190px}
.resume-count{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-2)}
.resume-last{margin:.1rem 0 0;font-size:.94rem;color:var(--ink-2)}
.resume-last b{color:var(--ink)}
.setdate{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 1.2rem}


.app-head{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.9);
  backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--rule);margin-bottom:.4rem}
:root[data-theme="dark"] .app-head{background:rgba(16,22,36,.9)}
.app-head-in{width:100%;max-width:min(1340px,calc(100% - 2rem));margin:0 auto;
  display:flex;align-items:center;gap:1rem;min-height:70px}
.app-brand{flex:0 0 auto;display:flex;align-items:center;text-decoration:none}
.app-brand img{display:block;height:38px;width:auto}
@media (min-width:900px){
  .app-head-in{min-height:82px}
  .app-brand img{height:46px}
}
.app-nav{display:flex;gap:.1rem;flex:1;flex-wrap:wrap}
.app-nav a{padding:.45rem .65rem;border-radius:9px;font-size:.86rem;font-weight:650;
  color:var(--ink-2);text-decoration:none}
.app-nav a:hover{background:var(--surface-2);color:var(--navy)}
.app-head-cta{flex:0 0 auto;padding:.5rem .85rem;border-radius:10px;background:var(--gold);
  color:var(--navy);font-size:.78rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;border:2px solid var(--gold)}
.app-head-cta:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
@media (max-width:620px){
  .app-head-cta{display:none}
  .app-nav{gap:0}
  .app-nav a{padding:.4rem .45rem;font-size:.8rem}
}


@media (min-width:1080px){.courses{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:1079px){.courses{grid-template-columns:repeat(2,minmax(0,1fr))}}


.waylist{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.4rem}
.waylist li{position:relative;padding-left:1.15rem;font-size:.85rem;font-weight:550;color:var(--ink-2)}
.waylist li::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;
  border-radius:50%;background:var(--green-line)}
.way .go2{margin-top:auto;padding-top:.9rem}

.land-shell{width:100%}
.land-shell .app-head{margin-left:-1rem;margin-right:-1rem;padding:0 1rem}



.pub img{max-width:100%;height:auto}
.pub{background:var(--plane)}

.pub{--logo-h:44px;--head-h:70px}
@media (min-width:600px){.pub{--logo-h:50px;--head-h:78px}}
@media (min-width:1100px){.pub{--logo-h:58px;--head-h:86px}}
.pub main{display:block}
.wrapin{width:100%;max-width:min(1240px,calc(100% - 2.5rem));margin:0 auto}
.wrapin.narrow{max-width:min(760px,calc(100% - 2.5rem))}
.pub .skip{position:absolute;left:-9999px}
.pub .skip:focus{left:1rem;top:1rem;z-index:99;background:var(--navy);color:var(--on-navy);
  padding:.6rem 1rem;border-radius:9px}


.site-head{position:sticky;top:0;z-index:60;background:rgba(251,250,247,.88);
  backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease,ease),box-shadow .2s ease}
.site-head.stuck{border-bottom-color:var(--rule);box-shadow:0 1px 0 rgba(22,35,63,.04),0 8px 24px rgba(22,35,63,.06)}
.head-in{max-width:min(1240px,calc(100% - 2.5rem));margin:0 auto;display:flex;align-items:center;
  gap:1rem;min-height:var(--head-h)}

.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;transition:opacity .16s ease}
.brand:hover{opacity:.84}
.brand:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:6px}
.brand img{display:block;height:var(--logo-h);width:auto}
.site-nav{display:flex;gap:.15rem;margin-left:.6rem;flex:1}

.site-nav a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:9px;white-space:nowrap;
  font-size:.9rem;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:background .16s ease,color .16s ease}
/* The desktop header did not fit inside its own container, and had not for as
   long as there have been eight links in it: brand + nav + buttons need about
   1330px and the row is capped at 1240px. The surplus was pushing the whole
   page sideways at every laptop width.

   The space is bought back by spacing the row a little more tightly, and by
   holding the compact header with the menu button until 1260px rather than
   1241px. That is 1214px of content in a 1240px row: it fits, at every width
   from 1260px upwards, with nothing removed and nothing shrunk into anything
   else.

   Note what is deliberately NOT done here: the nav is not allowed to shrink
   below its content. Letting it do that makes the overflow disappear from a
   measurement while the social icons quietly slide underneath the Sign in
   button, which is worse than the problem - it looks fixed and is not. */
@media (min-width:1260px){
  .head-in{gap:.6rem}
  .site-nav{margin-left:.3rem;gap:.05rem}
}
@media (min-width:1260px){
  .site-nav a{padding:.5rem .5rem;font-size:.86rem}
}

.site-nav a:hover{background:var(--surface-2);color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--navy);background:var(--surface-2);font-weight:700}
.site-nav a:active{transform:scale(.97)}
.nav-ic{width:16px;height:16px;opacity:.75}


.head-social{display:flex;gap:.1rem;margin-left:auto;padding-left:.4rem}
.site-nav a.social-link{padding:.5rem .45rem;color:var(--ink-3)}
.site-nav a.social-link:hover{color:var(--navy)}
.site-nav a.social-link .icon{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.head-cta{display:flex;gap:.5rem;flex:0 0 auto}

.head-cta-m{display:none;gap:.4rem;flex:0 0 auto;margin-left:auto}
.head-cta-m .btn{padding:.4rem .6rem;font-size:.78rem;white-space:nowrap}
.navtoggle{display:none;flex-direction:column;gap:4px;width:42px;height:42px;align-items:center;
  justify-content:center;background:none;border:1px solid var(--rule-2);border-radius:9px;cursor:pointer}
.navtoggle span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
body.nav-open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .navtoggle span:nth-child(2){opacity:0}
body.nav-open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1259px){
  .navtoggle{display:flex;margin-left:.3rem}
  .head-cta{display:none}
  .head-cta-m{display:flex}
  .site-nav{position:fixed;inset:var(--head-h) 0 auto 0;flex-direction:column;gap:0;margin:0;padding:.5rem 1rem 1rem;
    background:var(--surface);border-bottom:1px solid var(--rule);box-shadow:var(--shadow-lg);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.2s ease,visibility 0s linear .2s}
  body.nav-open .site-nav{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  .site-nav a{padding:.8rem .6rem;font-size:1rem;border-radius:10px}
  
  .head-social{margin:.4rem 0 0;padding:.5rem 0 0;border-top:1px solid var(--rule);
    gap:.2rem;width:100%}
  .site-nav a.social-link{padding:.7rem .8rem}
  .site-nav a.social-link .icon{width:22px;height:22px}
}


.tabbed{margin-top:1.4rem}
.tabbar{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-bottom:2px solid var(--rule);margin:0 0 1.4rem;padding-bottom:0}
.tabbar::-webkit-scrollbar{display:none}
.tabbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1rem;
  border:0;background:none;border-bottom:3px solid transparent;margin-bottom:-2px;
  font:inherit;font-size:.92rem;font-weight:700;color:var(--ink-3);cursor:pointer;
  border-radius:10px 10px 0 0;white-space:nowrap}
.tabbtn:hover{color:var(--ink);background:var(--surface-2)}
.tabbtn[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--gold)}
.tabbtn .icon{width:17px;height:17px;flex:0 0 auto}
.tabpanel[hidden]{display:none}
.tabpanel>h3:first-child{margin-top:0}

.tabhead{font-size:1.15rem;margin:2rem 0 .6rem;color:var(--navy)}
.js-tabs .tabhead{display:none}
@media (max-width:560px){
  .tabbar{margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}
  .tabbtn{padding:.6rem .75rem;font-size:.86rem}
}


.fold{border:1px solid var(--rule);border-radius:14px;background:var(--surface);
  margin:1rem 0;overflow:hidden}
.fold>summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;color:var(--navy);
  list-style:none;display:flex;align-items:center;gap:.6rem;font-size:1rem}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--ink-3);
  line-height:1}
.fold[open]>summary::after{content:"\2212"}
.fold>summary:hover{background:var(--surface-2)}
.fold .foldbody{padding:0 1.2rem 1.2rem}


.story{background:var(--navy);color:var(--on-navy);padding:clamp(2.4rem,5vw,4rem) 0}
.story h2{color:#fff;margin:0 0 .8rem}
.story .eyebrow{color:var(--gold)}
.story p{color:rgba(255,255,255,.88)}
.story b{color:#fff}
.storynums{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;
  margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.storynums div{min-width:0}
.storynums dt{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;color:var(--gold);line-height:1.1;
  font-variant-numeric:tabular-nums}
.storynums dd{margin:.15rem 0 0;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.vs{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin:1.6rem 0 0}
.vsbox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:1rem 1.1rem}
.vsbox h3{margin:0 0 .5rem;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold)}
.vsbox ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.vsbox li{position:relative;padding-left:1.4rem;font-size:.9rem;line-height:1.55;
  color:rgba(255,255,255,.86);font-weight:550}
.vsbox li::before{position:absolute;left:0;top:0;font-weight:800}
/* Both naming schemes are in use - .old/.new on one page, .bad/.good on
   another - and only the first was ever styled, so half the site drew no
   markers at all and the lists read as text floating in an indent. */
.vsbox.old li::before,.vsbox.bad li::before{content:"\00d7";color:#ff9a9a;font-size:1.1em;line-height:1.35}
.vsbox.new li::before,.vsbox.good li::before{content:"\2713";color:#9ae6b4}


.vs.light .vsbox{background:var(--surface);border:1px solid var(--rule)}
.vs.light .vsbox li{color:var(--ink-2)}
.vs.light .vsbox.old,.vs.light .vsbox.bad{background:var(--red-soft);border-color:var(--red-line)}
.vs.light .vsbox.old h3,.vs.light .vsbox.bad h3{color:var(--red)}
.vs.light .vsbox.old li::before,.vs.light .vsbox.bad li::before{color:var(--red)}
.vs.light .vsbox.new,.vs.light .vsbox.good{background:var(--green-soft);border-color:var(--green-line)}
.vs.light .vsbox.new h3,.vs.light .vsbox.good h3{color:var(--green)}
.vs.light .vsbox.new li::before,.vs.light .vsbox.good li::before{color:var(--green)}


.hero{padding:clamp(2rem,5vw,4rem) 0 clamp(2rem,4vw,3.4rem);
  background:linear-gradient(180deg,#fffdf6 0%,var(--plane) 62%)}
.hero-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.eyebrow{margin:0 0 .5rem;font-size:.73rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold-2)}
.hero h1{font-size:clamp(2rem,4.6vw,3.15rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 .8rem}
.lede{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--ink-2);margin:0 0 1.4rem;max-width:56ch}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.8rem}

.hero-cta .btn{white-space:normal;text-align:center}
.btn.lg{padding:.8rem 1.35rem;font-size:1rem;border-radius:11px}

.wa-join-wrap{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 1.5rem}
.wa-join{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;
  border-radius:11px;background:#0f7a6e;color:#fff;font-weight:700;font-size:.92rem;
  text-decoration:none;border:1px solid #0b6058;transition:background .15s,transform .15s}
.wa-join:hover{background:#075E54;transform:translateY(-1px)}
.wa-join:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wa-ic{width:18px;height:18px;flex:0 0 auto}
.wa-join-note{font-size:.83rem;color:var(--ink-3);line-height:1.4}

@media (max-width:560px){.wa-join{width:100%;justify-content:center}
  .wa-join-note{width:100%}}
/* auto-fit rather than four forced quarters: each figure takes the room it
   needs, the gaps between them come out even, and the row folds to 2x2 by
   itself when the column is genuinely too narrow instead of squashing four
   into a space that fits two. */
.hstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.05rem 1.2rem;margin:0;padding-top:1.3rem;border-top:1px solid var(--rule);
  align-items:start}
@media (max-width:560px){.hstats{gap:1rem 1.1rem}}
.hstats div{min-width:0}
/* A figure that breaks across two lines is no longer a figure you can take
   in at a glance, and that is the only reason one is here. "Three hrs" and
   "3 months" were both breaking. */
/* Sized so the longest figure, "Three hrs", fits a quarter of the hero
   column without breaking. It was 1.7rem, which needs 160px in a 140px
   space - so it ran into the figure beside it. */
.hstats dt{font-size:clamp(1.15rem,1.5vw,1.38rem);font-weight:700;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
/* Tracked and sized so the longest label, "ACCESS, FROM £99", stays on one
   line at every width where the row is four across. It was wrapping on
   desktop, which made the fourth block taller than the other three and
   pulled the whole row out of line. */
.hstats dd{margin:.22rem 0 0;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.3}
/* 1260px, not 1180: at 1180 the hero column is narrow enough that the last
   label wraps and the row goes out of line again. Same breakpoint the header
   uses, so the page changes shape once rather than twice. */
@media (min-width:1260px){
  /* A hair less gap than the default: the fourth label needs about 141px and
     a quarter of the column is 140. Three pixels is the whole difference
     between one line and two. */
  .hstats{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.05rem .95rem}
}
@media (min-width:640px) and (max-width:1023px){
  .hstats{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* A photograph used as a full-width band. The source images are square, so the
   crop is done here rather than by making four more files: 16/9 with the focal
   point a little above centre, which is where the faces are in all of them. */
.photo-band{margin:1.6rem auto 0;max-width:760px;border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow)}
/* 3/2 rather than 16/9: the sources are square, and a 16/9 crop cut the
   desk - laptop, tablet, pen - out of every one of them, which is most of
   what the photograph is for. 38% keeps faces high in frame and leaves the
   desk in. On a phone the band goes squarer still, because a wide strip on
   a narrow screen is a letterbox with nothing in it. */
.photo-band img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  object-position:center 38%}
@media (max-width:640px){
  .photo-band img{aspect-ratio:5/4}
}
.hero-art{position:relative}
.hero-art img{width:100%;height:auto;border-radius:18px;display:block;box-shadow:var(--shadow-lg)}
.hero-badge{position:absolute;left:-.6rem;bottom:1.1rem;display:inline-flex;align-items:center;gap:.45rem;
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--gold);
  border-radius:12px;padding:.6rem .85rem;box-shadow:var(--shadow-lg);font-size:.85rem;font-weight:700}
.hero-badge .icon{width:17px;height:17px;color:var(--green)}
@media (max-width:900px){.hero-badge{left:.6rem}}


.sec{padding:clamp(2.4rem,5vw,4.2rem) 0}
.sec.alt{background:var(--surface-2)}
.sec h2,.phead h1,.cta-band h2{letter-spacing:-.02em}
.sec h2{font-size:clamp(1.45rem,2.7vw,2.05rem);margin:0 0 .5rem}
.sec-lede{color:var(--ink-2);max-width:62ch;margin:0 0 1.8rem;font-size:1rem}
.phead{padding:clamp(2rem,4.5vw,3.4rem) 0 clamp(1.2rem,2vw,1.8rem);
  background:linear-gradient(180deg,#fffdf6,var(--plane))}
.phead h1{font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 .7rem;line-height:1.1}
.band{padding:.9rem 0}
.alert-band{background:var(--navy);color:var(--on-navy)}
.alert-band p{margin:0;font-size:.95rem}
.alert-band b{color:var(--gold)}
.alert-band a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.alert-band .icon{width:15px;height:15px}


[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease,ease),transform .55s var(--ease,ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}


.videowrap{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid var(--rule);background:var(--navy);line-height:0}
.videowrap video{width:100%;height:auto;display:block}


.showcase{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.show{display:grid;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.show.rev>.show-txt{order:2}
.show.rev>.show-img{order:1}
@media (max-width:880px){
  .show{grid-template-columns:1fr}
  .show.rev>.show-txt,.show.rev>.show-img{order:initial}
}
.show-txt h3{display:flex;align-items:flex-start;gap:.55rem;font-size:1.18rem;margin:0 0 .55rem;line-height:1.3}
.show-txt h3 .icon{flex:0 0 auto;width:20px;height:20px;color:var(--gold-2);margin-top:.15rem}
.show-txt p{color:var(--ink-2);margin:0;max-width:52ch}
.show-img{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--rule);
  box-shadow:var(--shadow-lg);background:var(--surface);line-height:0}
.show-img img{width:100%;height:auto;display:block}


.fgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.fcard{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:1.1rem 1.15rem;
  box-shadow:var(--shadow);transition:transform .18s var(--ease,ease),box-shadow .18s ease}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.f-ic{width:26px;height:26px;color:var(--gold-2);margin-bottom:.5rem}
.fcard h3{font-size:1rem;margin:0 0 .35rem;line-height:1.3}
.fcard p{margin:0;font-size:.92rem;color:var(--ink-2)}


.split{display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.devices{position:relative;padding-left:9%}
.devices .d-photo{width:100%;border-radius:16px;display:block;box-shadow:var(--shadow-lg)}
.devices .d-phone{position:absolute;left:0;bottom:6%;width:31%;max-width:172px;border-radius:16px;
  border:5px solid var(--navy);box-shadow:var(--shadow-lg);background:var(--navy);z-index:2}
@media (max-width:560px){
  .devices{padding-left:0}
  .devices .d-phone{position:static;width:52%;margin:-14% auto 0;display:block}
}


.cgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.ccard{background:var(--surface);border:1px solid var(--rule);border-radius:15px;padding:1.2rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.ccard.live{border-top:3px solid var(--gold)}
.ccard.soon{background:var(--surface-2);border-style:dashed;box-shadow:none}
.ctag{margin:0 0 .3rem;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-2)}
.ccard.soon .ctag{color:var(--ink-3)}
.ccard h3{margin:0 0 .4rem;font-size:1.15rem}
.cblurb{margin:0 0 .8rem;font-size:.92rem;color:var(--ink-2)}
.cpts{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.4rem;font-size:.88rem}
.cpts li{display:flex;gap:.45rem;align-items:flex-start}
.cpts .icon{width:15px;height:15px;color:var(--green);flex:0 0 auto;margin-top:.22rem}
.cpts.plain{list-style:disc;padding-left:1.1rem}
.cpts.plain li{display:list-item;color:var(--ink-2)}
.ccard .btn,.soon-note{margin-top:auto}
.soon-note{font-size:.82rem;color:var(--ink-3);font-style:italic}


.pgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.pcard{background:var(--surface);border:1px solid var(--rule);border-radius:15px;padding:1.3rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;position:relative}
.pcard.best{border:2px solid var(--gold);box-shadow:var(--shadow-lg)}
.pbest{position:absolute;top:-.7rem;left:1.2rem;margin:0;background:var(--gold);color:var(--navy);
  font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.22rem .55rem;border-radius:999px}
.pcard h3{margin:0 0 .3rem;font-size:1.1rem}
.pprice{margin:0 0 .9rem;font-size:2.1rem;font-weight:700;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1}
.pprice span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.2rem}
.pcard ul{list-style:none;padding:0;margin:0 0 1.1rem;display:grid;gap:.42rem;font-size:.9rem}
.pcard li{display:flex;gap:.45rem;align-items:flex-start}
.pcard .icon{width:15px;height:15px;color:var(--green);flex:0 0 auto;margin-top:.22rem}
.pcard .btn{margin-top:auto}
.pnote{margin:1.1rem 0 0;font-size:.86rem;color:var(--ink-3)}

.ask-first{margin:.6rem 0 0;font-size:.88rem;line-height:1.65;color:var(--ink-2);max-width:70ch}
.ask-first a{color:var(--gold-2);font-weight:700}
.incs{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.inc{display:flex;gap:.8rem;background:var(--surface);border:1px solid var(--rule);
  border-radius:13px;padding:1rem 1.05rem;box-shadow:var(--shadow)}
.inc h3{margin:0 0 .3rem;font-size:.98rem}
.inc p{margin:0;font-size:.9rem;color:var(--ink-2)}


.nlist{display:grid;gap:.55rem}
.nrow{display:grid;gap:.2rem .9rem;grid-template-columns:auto 1fr auto;align-items:baseline;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:.8rem 1rem;
  text-decoration:none;color:inherit;box-shadow:var(--shadow);
  transition:transform .16s var(--ease,ease),border-color .16s ease}
.nrow:hover{transform:translateX(3px);border-color:var(--gold-line)}
.nrow:active{transform:scale(.995)}
.ndate{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ntitle{font-weight:700;display:block}
.nnote{display:block;font-size:.88rem;color:var(--ink-2);margin-top:.2rem}
.nsrc{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap}
@media (max-width:720px){
  .nrow{grid-template-columns:1fr}
  .nsrc{margin-top:.25rem}
}


.gcards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gcard{background:var(--surface);border:1px solid var(--rule);border-radius:15px;padding:1.2rem;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.45rem;
  transition:transform .18s var(--ease,ease),box-shadow .18s ease}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.gcard h2{font-size:1.12rem;margin:0;line-height:1.32}
.gcard p{margin:0;font-size:.92rem;color:var(--ink-2)}
.rtag{align-self:flex-start;background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold-2);
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:999px}
.gmeta{font-size:.78rem;color:var(--ink-3);margin-top:auto}
.guide{padding:clamp(1.6rem,4vw,2.8rem) 0 1rem}
.crumb{font-size:.82rem;color:var(--ink-3);display:flex;align-items:center;gap:.3rem;margin:0 0 .8rem}
.crumb a{color:var(--gold-2);font-weight:700;text-decoration:none}
.crumb .icon{width:13px;height:13px}
.guide h1{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.12;letter-spacing:-.022em;margin:0 0 .7rem}
.standfirst{font-size:1.1rem;color:var(--ink-2);margin:0 0 1rem;line-height:1.55}
.byline{font-size:.82rem;color:var(--ink-3);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:.6rem 0;margin:0 0 1.8rem}
.gbody h2{font-size:1.32rem;margin:2rem 0 .6rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.gbody h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
.gbody p{margin:0 0 .9rem;color:var(--ink)}
.gbody .tick{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5rem}
.gbody .tick li{padding-left:1.3rem;position:relative;color:var(--ink)}
.gbody .tick li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:2px;background:var(--gold)}
.gbody .steps{margin:0 0 1rem;padding-left:1.3rem;display:grid;gap:.55rem}
.gbody .steps li{padding-left:.2rem}
.gcall{background:var(--navy);color:var(--on-navy);border-radius:14px;padding:1.1rem 1.25rem;margin:0 0 1.6rem}
.gcall h3{margin:0 0 .5rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.gcall ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;font-size:.95rem}
.gcall b{color:var(--gold)}
.gwarn{background:var(--red-soft);border:1px solid var(--red-line);border-left:4px solid var(--red);
  border-radius:0 12px 12px 0;padding:.95rem 1.1rem;margin:1.2rem 0}
.gwarn h3{margin:0 0 .35rem;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.gwarn p{margin:0;font-size:.95rem}
.gnote{background:var(--surface-2);border-left:3px solid var(--rule-2);border-radius:0 10px 10px 0;
  padding:.8rem 1rem;margin:1.1rem 0}
.gnote p{margin:0;font-size:.9rem;color:var(--ink-2)}
.sources{margin-top:2.4rem;padding-top:1.2rem;border-top:2px solid var(--rule)}
.sources h2{font-size:1.05rem;margin:0 0 .4rem}
.sources p{font-size:.9rem;color:var(--ink-2);margin:0 0 .7rem}
.sources ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem;font-size:.88rem}
.sources a{color:var(--gold-2)}
.related{margin-top:2.2rem}
.related h2{font-size:1.05rem;margin:0 0 .7rem}
.rels{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rel{display:grid;gap:.35rem;background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:.85rem 1rem;text-decoration:none;color:inherit;font-size:.92rem;font-weight:600;
  box-shadow:var(--shadow);transition:transform .16s var(--ease,ease)}
.rel:hover{transform:translateY(-2px)}


.faqs{display:grid;gap:.5rem}
.faq{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:.2rem .2rem;
  box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:.85rem 1rem;font-weight:700;font-size:.98rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;border-radius:11px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--gold-2);line-height:1}
.faq[open] summary::after{content:"\2212"}
.faq p{margin:0;padding:0 1rem 1rem;color:var(--ink-2);font-size:.94rem}

.faq-more{margin:1.2rem 0 0}


.reassure{display:flex;gap:.55rem;align-items:flex-start;margin:-.6rem 0 1.5rem;
  padding:.75rem .9rem;background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--gold);border-radius:10px;max-width:56ch;
  font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.reassure .icon{width:17px;height:17px;flex:0 0 auto;margin-top:.18rem;color:var(--gold-2)}
.reassure b{color:var(--ink)}


.tick.lead{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.8rem}
.tick.lead li{position:relative;padding-left:1.6rem;color:var(--ink-2);font-size:.96rem;
  line-height:1.6}
.tick.lead li b{color:var(--ink)}
.tick.lead li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
  border-radius:50%;background:var(--gold)}


.steps-grid{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:none}
@media (max-width:1000px){.steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps-grid{grid-template-columns:1fr}}
.steps-grid li{position:relative;background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:1.5rem 1.15rem 1.15rem;box-shadow:var(--shadow)}
.stepn{position:absolute;top:-14px;left:1.1rem;width:30px;height:30px;border-radius:50%;
  background:var(--navy);color:var(--on-navy);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.9rem;box-shadow:var(--shadow)}
.steps-grid h3{margin:.2rem 0 .45rem;font-size:1rem}
.steps-grid p{margin:0;font-size:.9rem;color:var(--ink-2)}

.cta-pair{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.1rem 0 0}


.steps-grid.howto{grid-template-columns:1fr;gap:1rem;max-width:none}
.steps-grid.howto li{padding:1.3rem 1.4rem}
.steps-grid.howto h3{display:flex;align-items:flex-start;gap:.55rem;font-size:1.06rem;
  margin:.1rem 0 .55rem}
.steps-grid.howto h3 .icon{width:20px;height:20px;flex:0 0 auto;margin-top:.15rem;
  color:var(--gold-2)}
.ht-what{margin:0 0 .6rem;font-size:.97rem;line-height:1.65;color:var(--ink);font-weight:600}
.ht-why{margin:0;font-size:.92rem;line-height:1.7;color:var(--ink-2)}
@media (min-width:820px){.steps-grid.howto li{padding:1.4rem 1.7rem}}
.steplink + .steplink{margin-left:1.1rem}
.steplink{display:inline-flex;align-items:center;gap:.25rem;margin-top:.7rem;font-size:.85rem;
  font-weight:700;color:var(--gold-2);text-decoration:none}
.steplink:hover{text-decoration:underline}
.steplink .icon{width:15px;height:15px}


.promise-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:1.6rem}
@media (max-width:800px){.promise-grid{grid-template-columns:1fr}}
.promise{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:1.2rem 1.3rem;box-shadow:var(--shadow)}
.promise.yes{border-top:3px solid var(--gold)}
.promise.no{border-top:3px solid var(--navy)}
.promise h3{display:flex;align-items:center;gap:.45rem;margin:0 0 .8rem;font-size:1.02rem}
.promise h3 .icon{width:19px;height:19px;flex:0 0 auto}
.promise.yes h3 .icon{color:var(--gold-2)}
.promise ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.promise li{font-size:.92rem;color:var(--ink-2);padding-left:1.1rem;position:relative;line-height:1.55}
.promise li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--rule-2)}
.promise.yes li::before{background:var(--gold)}


.voices-wrap{padding:clamp(2.4rem,5vw,4rem) 0;background:var(--surface-2)}
.voices{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:1.4rem}
/* The card is white and it sits inside a navy section that sets white
   text. Without this line the quote inherits white on white and every
   testimonial on the page is blank. The colour is set here, on the card,
   rather than on the blockquote, so anything else dropped into a card
   later is readable too. */
.voice{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);color:var(--ink)}
.voice blockquote{margin:0 0 .7rem;font-size:.96rem;line-height:1.6}
.voice blockquote::before{content:"\201C";color:var(--gold);font-size:2rem;line-height:0;
  vertical-align:-.35em;margin-right:.1em}
.voice figcaption{font-size:.85rem;font-weight:700;color:var(--navy)}
.voice figcaption span{display:block;font-weight:500;color:var(--ink-3);font-size:.8rem}



.cta-band :is(h1,h2,h3,h4),
.story :is(h1,h2,h3,h4),
.alert-band :is(h1,h2,h3,h4),
.gcall :is(h1,h2,h3,h4),
.ready-band :is(h1,h2,h3,h4){color:#fff}

.cta-band{background:var(--navy);color:var(--on-navy);padding:clamp(2.2rem,5vw,3.6rem) 0;text-align:center}
.cta-band h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .5rem}
.cta-band p{color:#cdd4e2;max-width:56ch;margin:0 auto 1.4rem}
.cta-band .hero-cta{justify-content:center;margin:0}
.btn.ghost-on-navy{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn.ghost-on-navy:hover{background:rgba(255,255,255,.1);border-color:#fff}


.site-foot{background:var(--surface);border-top:1px solid var(--rule);padding:2.4rem 0 1.4rem}
.foot-grid{display:grid;gap:1.6rem;grid-template-columns:1.5fr repeat(4,1fr)}
/* The public-page footer nav has no class of its own, so the rule written
   for .foot-links missed it - and that is the footer on every page a
   customer sees. 24px tall is well under half of what a thumb needs, on
   the most link-dense part of the site. The negative margin puts the
   column back where it looked right. */
.foot-grid nav a{padding:.55rem 0;margin:-.3rem 0;display:block}

@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

.foot-grid .foot-logo{height:88px;width:auto;margin-bottom:.8rem}
.foot-grid p{margin:0;font-size:.88rem;color:var(--ink-2);max-width:34ch}
.foot-grid h3{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .5rem}
.foot-grid nav{display:flex;flex-direction:column;gap:.35rem}
.foot-grid nav a{font-size:.9rem;color:var(--ink-2);text-decoration:none}
.foot-grid nav a:hover{color:var(--navy);text-decoration:underline}
.foot-legal{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.foot-legal p{margin:0 0 .35rem;font-size:.8rem;color:var(--ink-3);max-width:88ch}


.foot-legal .build{font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}



.todo{display:inline-block;background:#fdf1d6;color:#7a5a00;border:1px dashed var(--gold);
  border-radius:6px;padding:.05rem .45rem;font-weight:700;font-size:.9em;max-width:100%}
.pending{color:var(--ink-3);font-style:italic}
.tbl.trader{width:100%}
.tbl.trader th{width:11rem;text-align:left;vertical-align:top;color:var(--ink-2);font-weight:600}
.tbl.trader td{vertical-align:top}
@media (max-width:520px){
  .tbl.trader th,.tbl.trader td{display:block;width:auto}
  .tbl.trader th{padding-bottom:0}
}
.muted{color:var(--ink-3);font-weight:500}


.faqgroup{margin-bottom:2.2rem}
.faqgroup h2{font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 .8rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}



.runup-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin:1.6rem 0 1.4rem}
@media (max-width:820px){.runup-grid{grid-template-columns:1fr}}
.ru{background:var(--surface);border:1px solid var(--rule);border-top:4px solid var(--navy);
  border-radius:14px;padding:1.2rem 1.3rem;box-shadow:var(--shadow)}
.ru.gold{border-top-color:var(--gold)}
.rutag{display:inline-block;font-size:.63rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;background:var(--surface-2);border:1px solid var(--rule);
  border-radius:999px;padding:.16rem .6rem;color:var(--ink-3)}
.ru h3{display:flex;align-items:flex-start;gap:.5rem;margin:.6rem 0 .5rem;font-size:1.05rem;line-height:1.3}
.ru h3 .icon{width:20px;height:20px;flex:0 0 auto;margin-top:.1rem;color:var(--gold-2)}
.ru p{margin:0 0 .7rem;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.ruwith{display:flex;gap:.4rem;align-items:flex-start;margin:0;padding-top:.7rem;
  border-top:1px solid var(--rule);font-size:.86rem}
.ruwith .icon{width:16px;height:16px;flex:0 0 auto;margin-top:.15rem;color:var(--gold-2)}
.rumatrix .tbl td.y{color:var(--green);font-weight:700}
.rumatrix .tbl td.n{color:var(--ink-3)}
.rumatrix .tbl th.best,.rumatrix .tbl td.best{background:#fffaf0}
.rumatrix .tbl th.best{color:var(--gold-2)}
.rufoot{margin:.9rem 0 1rem;font-size:.92rem;color:var(--ink-2);max-width:72ch}

.rushot{margin:0 0 .9rem;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  background:#fff}
.rushot img{width:100%;height:auto;display:block}


.ready-band{background:var(--navy);color:var(--on-navy);padding:1.1rem 0}
.ready-band p{display:flex;gap:.6rem;align-items:flex-start;margin:0;max-width:80ch;
  font-size:.98rem;line-height:1.6;color:#dfe5f0}
.ready-band b{color:#fff}
.ready-band .icon{width:19px;height:19px;flex:0 0 auto;margin-top:.2rem;color:var(--gold)}



@media (max-width:899px){
  .head-in{gap:.4rem;min-width:0}
  .brand{min-width:0;flex:0 1 auto}
  .brand img{max-width:118px;height:auto}
  .head-cta-m{margin-left:auto;min-width:0}
}
@media (max-width:420px){
  .brand img{max-width:96px}
  .head-cta-m{gap:.3rem}
  .head-cta-m .btn{padding:.34rem .44rem;font-size:.71rem}
  /* 34px was below the 44px Apple asks for and the 48px Android asks for,
   on the one control every small-screen visitor has to hit. */
  .navtoggle{width:40px;height:40px;margin-left:.15rem}
}
@media (max-width:340px){
  .brand img{max-width:74px}
  .head-cta-m .btn{padding:.3rem .36rem;font-size:.67rem}
}


/* ============================================================================
   DIRECTION C — BRIGHT                                       16 August 2026

   The structure of the redesign, on the original white-cream-navy palette.
   Dark was tried and rejected: it read as heavy on a site whose job is to be
   easy to scan. What survives from that pass is the part that was actually
   working — larger cards with a real border, one price card instead of three,
   and the pair of promises the whole offer rests on given room to breathe.

   Nothing here fights the stylesheet above; it sharpens it.
   ========================================================================= */

:root{
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(22,35,63,.05), 0 8px 26px rgba(22,35,63,.08);
  --shadow-lg:0 6px 16px rgba(22,35,63,.09), 0 24px 56px rgba(22,35,63,.14);
}

/* ---------- cards get a visible edge and more air ---------- */
.pcard,.price,.gcard,.qcard,.fcard,.tcard,.acard,.ncard{
  border-radius:var(--radius);border-color:var(--rule-2)}
.pcard.best,.price.best{border-color:var(--gold);box-shadow:var(--shadow-lg)}

/* ---------- THE TWO PROMISES ----------
   These are the whole offer, and on the last pass they sat below the fold in
   a quiet band where the owner could not find them. They are now the first
   thing under the headline, at heading size, and they are the only place on
   the site allowed to be this loud. */
.keyline{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0 0}
.keyline > div{
  background:linear-gradient(180deg,var(--gold-soft) 0%,var(--surface) 78%);
  border:1.5px solid var(--gold-line);border-radius:var(--radius);
  padding:1.25rem 1.35rem;box-shadow:var(--shadow)}
.keyline b{display:block;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.02;
  letter-spacing:-.035em;color:var(--navy);font-weight:800}
.keyline span{display:block;margin-top:.45rem;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.keyline em{font-style:normal;color:var(--gold-2);font-weight:800}
@media(max-width:640px){.keyline{grid-template-columns:1fr;gap:.7rem}
  .keyline > div{padding:1rem 1.1rem}}

/* The same pair, said in one line, for the top of a page that has no room
   for the full band. */
.promise{display:inline-flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
  margin:0 0 1rem;padding:.5rem .9rem;border-radius:999px;
  background:var(--gold-soft);border:1px solid var(--gold-line);
  font-size:.86rem;font-weight:700;color:var(--navy)}
.promise s{text-decoration:none;color:var(--gold-2)}

/* ---------- the run-up note, on the price card ---------- */
.runup-note,.pcard .plocked{border-color:var(--gold-line)}

/* ---------- odds and ends the redesign relied on ---------- */
b,strong{color:var(--ink)}
.btn b,.btn strong,.buy b,.flag b,.tag b,.pflag b{color:inherit}
summary{color:var(--ink)}
.hstats dt{color:var(--navy)}
.hstats dd{color:var(--ink-3)}