/* Demystified 2.1 — palette taken from the brand mark and the workshop brochure:
   deep green #15342C, gold #A98D4E, coral #E25947, cream #FFF9EF.
   Light mode leads with the green on cream. Dark mode keeps the same cream and
   coral but promotes the gold to the lead colour, because the deep green would
   disappear against a dark ground. */
:root{
  --bg:#FBF6EC; --panel:#FFFDF8; --panel2:#F3EBD9;
  --ink:#16332B; --ink2:#4A5F56; --ink3:#8A8471; --line:#E6DCC6;
  --brand:#15342C; --brand2:#1F4A3D; --brandsoft:#E4EDE8;
  --gold:#97793C; --goldsoft:#F6EEDA;
  --ok:#1F6B4F; --oksoft:#E3EFE8; --bad:#B23A28; --badsoft:#FBE9E5;
  --warn:#B23A28; --warnsoft:#FBE9E5; --tip:#97793C; --tipsoft:#F6EEDA;
  --shadow:0 1px 2px rgba(40,32,16,.05),0 8px 24px rgba(40,32,16,.07);
  --radius:14px;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --lockup:url("img/lockup-light.png");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1A16; --panel:#16241F; --panel2:#1E2F28;
    --ink:#F2EADA; --ink2:#B4C2B8; --ink3:#8A9790; --line:#2A3B33;
    --brand:#C9A65E; --brand2:#DCBB77; --brandsoft:#28251A;
    --gold:#D9B978; --goldsoft:#2A2517;
    --ok:#62C797; --oksoft:#122E22; --bad:#EE8B76; --badsoft:#37201C;
    --warn:#EE8B76; --warnsoft:#37201C; --tip:#D9B978; --tipsoft:#2A2517;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.24);
    --lockup:url("img/lockup-dark.png");
  }
}
:root[data-theme="dark"]{
  --bg:#0F1A16; --panel:#16241F; --panel2:#1E2F28;
  --ink:#F2EADA; --ink2:#B4C2B8; --ink3:#8A9790; --line:#2A3B33;
  --brand:#C9A65E; --brand2:#DCBB77; --brandsoft:#28251A;
  --gold:#D9B978; --goldsoft:#2A2517;
  --ok:#62C797; --oksoft:#122E22; --bad:#EE8B76; --badsoft:#37201C;
  --warn:#EE8B76; --warnsoft:#37201C; --tip:#D9B978; --tipsoft:#2A2517;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.24);
  --lockup:url("img/lockup-dark.png");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.62 var(--sans);overflow-wrap:break-word}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;line-height:1.25;text-wrap:balance}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:860px;margin:0 auto;padding:0 16px 96px}

/* header ------------------------------------------------------------------ */
header.top{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line)}
.top .row{max-width:860px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:8px}
.mast{font-family:var(--serif);font-weight:600;font-size:15.5px;letter-spacing:-.01em;line-height:1.15}
.mast em{display:block;font-style:normal;font-family:var(--sans);font-weight:500;font-size:11px;
  color:var(--ink3);letter-spacing:.01em;margin-top:2px;white-space:nowrap}
.top .sp{flex:1}
.tbtn{background:var(--panel2);border:1px solid var(--line);color:var(--ink2);border-radius:9px;
  padding:6px 10px;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.tbtn:hover{color:var(--brand);border-color:var(--brand)}
.crumb{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  color:var(--ink3);font:400 13.5px var(--sans);padding:16px 0 2px}
.crumb:hover{color:var(--brand)}

/* title block -------------------------------------------------------------- */
.titleblock{padding:12px 0 6px}
.titleblock .eyebrow{font:600 11.5px var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-bottom:9px}
.titleblock h1{font-size:27px;letter-spacing:-.015em}
.titleblock p{margin:9px 0 0;color:var(--ink2);font-size:15.5px;max-width:62ch}
.sect{display:flex;align-items:baseline;gap:10px;margin:28px 0 12px}
.sect h2{font:600 12px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.sect .line{flex:1}
.sect .cnt{font:500 11.5px var(--mono);color:var(--ink3)}

/* module register (cards) --------------------------------------------------- */
.reg{display:grid;gap:9px}
.reg .row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.reg .row:hover{border-color:var(--brand);transform:translateY(-1px)}
.reg .row.locked{box-shadow:none;background:var(--panel2)}
.reg .row.locked .t{color:var(--ink2)}
.reg .row.locked .d{color:var(--ink3)}
.reg .n{flex:0 0 27px;height:27px;border-radius:8px;background:var(--panel2);color:var(--ink3);
  font:700 12px var(--sans);display:flex;align-items:center;justify-content:center}
.reg .row.done .n{background:var(--oksoft);color:var(--ok)}
.reg .row.locked .n{background:transparent;color:var(--ink3)}
.reg .body{flex:1;min-width:0}
.reg .t{display:block;font-size:15px;font-weight:600;line-height:1.35}
.reg .d{display:block;color:var(--ink3);font-size:12.5px;line-height:1.45;margin-top:2px}
.reg .meta{flex:0 0 auto;font:600 11.5px var(--sans)}
.reg .meta span{display:inline-block;background:var(--panel2);color:var(--ink3);
  border-radius:999px;padding:2px 9px}
.reg .meta span.ok{background:var(--oksoft);color:var(--ok)}
.lockico{display:inline-block;width:11px;height:9px;border:1.6px solid currentColor;border-radius:2px;
  position:relative;margin-top:4px}
.lockico::before{content:"";position:absolute;left:1.7px;top:-5px;width:5.6px;height:5px;
  border:1.6px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0}

/* progress ------------------------------------------------------------------ */
.prog{height:6px;background:var(--panel2);border-radius:99px;overflow:hidden;margin-top:14px}
.prog>i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .3s}
.prog.full>i{background:var(--ok)}
.progline{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink3);margin-top:8px}

/* subject cards -------------------------------------------------------------- */
.subj{display:block;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);cursor:pointer;color:inherit;
  margin-bottom:14px;transition:border-color .15s,transform .15s}
.subj:hover{border-color:var(--brand);transform:translateY(-1px)}
.subj h3{font-size:18px}
.subj p{margin:6px 0 0;color:var(--ink2);font-size:14px;max-width:56ch}

/* prose ---------------------------------------------------------------------- */
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;box-shadow:var(--shadow);margin-top:12px}
.prose{font-size:16px;line-height:1.68}
.prose p{margin:11px 0;color:var(--ink2)}
.prose h4{font-size:15.5px;margin:22px 0 8px;color:var(--ink)}
.prose h4:first-child{margin-top:0}
.prose ul,.prose ol{margin:11px 0;padding-left:22px;color:var(--ink2)}
.prose li{margin:5px 0}
.prose b,.prose strong{color:var(--ink)}
.prose .formula{background:var(--goldsoft);border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;text-align:center;color:var(--ink)!important;font-family:var(--mono);
  font-size:14px;line-height:1.7;margin:16px 0}
.prose .tip{background:var(--tipsoft);border-left:3px solid var(--tip);border-radius:0 8px 8px 0;
  padding:11px 13px;color:var(--ink2)!important;margin:16px 0}
.prose .warn{background:var(--warnsoft);border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
  padding:11px 13px;color:var(--ink2)!important;margin:16px 0}
.split{display:grid;gap:12px;margin:14px 0}
@media(min-width:620px){.split{grid-template-columns:1fr 1fr}}
.prose .split .card{background:var(--panel2);border-radius:10px;padding:14px}
.prose .split .card h4{margin:0 0 6px;font-size:14.5px}
.prose .split .card p{margin:0;font-size:13.5px}
ol.steps{counter-reset:s;list-style:none;padding-left:0;margin:12px 0}
ol.steps li{background:var(--panel2);border-radius:9px;padding:10px 12px;margin:7px 0;font-size:14.5px}

/* tables ---------------------------------------------------------------------- */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
table.wt,table.qt{border-collapse:collapse;width:100%;font-size:13.5px;
  font-variant-numeric:tabular-nums}
table.wt th,table.wt td,table.qt th,table.qt td{border:1px solid var(--line);padding:7px 9px;text-align:left}
table.wt th,table.qt th{background:var(--panel2);font-weight:600;font-size:12.5px;color:var(--ink2)}
table.wt tr.tot td{background:var(--panel2);font-weight:600}
table.qt{max-width:420px}
table.qt td,table.qt th{text-align:center}

/* question --------------------------------------------------------------------- */
.qbar{display:flex;align-items:baseline;gap:10px;margin:18px 0 8px}
.qbar .qn{font:600 12.5px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.qbar .sp{flex:1}
.qbar .mk{font:600 11.5px var(--sans);background:var(--panel2);color:var(--ink3);
  border-radius:999px;padding:2px 9px}
.qsheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);font-size:16px;line-height:1.62}
.qsheet h3{font-size:17px;margin-bottom:8px}
.qsheet p{margin:0 0 8px}
.dots{display:flex;gap:5px;flex-wrap:wrap;margin-top:14px}
.dots button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink3);font:600 12px var(--sans);cursor:pointer}
.dots button.on{border-color:var(--brand);color:var(--brand);background:var(--brandsoft)}
.dots button.done{background:var(--oksoft);color:var(--ok);border-color:var(--ok)}

/* answers ----------------------------------------------------------------------- */
.hint{color:var(--ink3);font-size:13px;margin:16px 0 10px;font-style:italic}
.ans{display:grid;gap:10px}
.aline{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:10px 12px}
.aline label{flex:1;font-size:14px;color:var(--ink2)}
.aline input{width:110px;flex:0 0 110px;padding:9px 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:500 15px var(--mono);text-align:right;
  font-variant-numeric:tabular-nums}
.aline input:focus{outline:2px solid var(--brand);outline-offset:1px}
.aline .u{width:26px;color:var(--ink3);font-size:13px}
.aline .m{width:22px;text-align:center;font-size:16px}
.aline.right{border-color:var(--ok);background:var(--oksoft)}
.aline.right .m{color:var(--ok)}
.aline.wrong{border-color:var(--bad);background:var(--badsoft)}
.aline.wrong .m{color:var(--bad)}
.aline .mine{font:500 13px var(--mono);color:var(--ink3);white-space:nowrap}
.aline .corr{font:600 13.5px var(--mono);width:104px;text-align:right}

/* buttons ------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);
  color:#fff;border:0;border-radius:11px;padding:12px 20px;font:600 15px var(--sans);cursor:pointer}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--brandsoft);border-color:var(--brand)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.btns .sp{flex:1}
.foot{display:flex;gap:10px;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.foot .sp{flex:1}

/* tabs ------------------------------------------------------------------------------ */
.tabs{display:flex;gap:6px;background:var(--panel2);padding:4px;border-radius:12px;margin:16px 0 4px}
.tabs button{flex:1;background:none;border:0;padding:9px 8px;border-radius:9px;color:var(--ink2);
  font:600 14px var(--sans);cursor:pointer}
.tabs button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}

/* solution ---------------------------------------------------------------------------- */
.sol{margin-top:18px}
.sol .lbl{font:700 12.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:10px}
.sol .part{font:700 12.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);margin:18px 0 6px}
.st{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 11px 11px 0;padding:12px 14px;margin:9px 0}
.st b.t{display:block;font-size:14.5px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.st div{font-size:14px;color:var(--ink2);margin:3px 0;font-variant-numeric:tabular-nums}
.verdict{background:var(--oksoft);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:0 11px 11px 0;padding:12px 14px;margin:12px 0;font-size:14px;color:var(--ink2)}
.verdict.warnv{background:var(--warnsoft);border-left-color:var(--warn)}
.verdict b{display:block;font:700 12px var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);margin-bottom:4px}

/* mcq ------------------------------------------------------------------------------------ */
.opts{display:grid;gap:8px;margin-top:14px}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  cursor:pointer;font:400 14.5px/1.5 var(--sans);color:var(--ink2)}
.opt:hover{border-color:var(--brand)}
.opt .k{flex:0 0 16px;font-weight:700;color:var(--ink3)}
.opt.right{border-color:var(--ok);background:var(--oksoft);color:var(--ink)}
.opt.wrong{border-color:var(--bad);background:var(--badsoft)}
.opt.dim{opacity:.6}

/* exam -------------------------------------------------------------------------------------- */
.paperhead{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);margin-top:12px}
.paperhead h3{font-size:17px}
.paperhead .rule{height:1px;background:var(--line);margin:12px 0}
.paperhead .cols{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font:600 12.5px var(--sans);color:var(--ink2)}
.paperhead p{margin:12px 0 0;font-size:14px;color:var(--ink2)}
.clockbar{position:sticky;top:52px;z-index:30;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:12px;margin-top:12px;
  box-shadow:var(--shadow)}
.clockbar .c{font:600 19px var(--mono);font-variant-numeric:tabular-nums}
.clockbar .c.low{color:var(--bad)}
.clockbar .lb{color:var(--ink3);font-size:12.5px}
.clockbar .sp{flex:1}
.result{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;text-align:center;box-shadow:var(--shadow);margin-top:12px}
.result .big{font:600 38px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.result .pc{color:var(--ink3);font-size:14px;margin-top:4px}
.result .say{margin:12px auto 0;max-width:46ch;color:var(--ink2);font-size:14.5px}

/* lock and pricing ------------------------------------------------------------------------------ */
.gatepanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;box-shadow:var(--shadow);margin-top:16px}
.gatepanel h3{font-size:18px}
.gatepanel p{color:var(--ink2);font-size:14.5px;margin:9px 0 0;max-width:58ch}
.plans{display:grid;gap:8px;margin:18px 0 4px}
.plan{display:flex;align-items:center;gap:14px;background:var(--panel2);border:1px solid transparent;
  border-radius:11px;padding:12px 14px}
.plan.best{background:var(--brandsoft);border-color:var(--brand)}
.plan .nm{flex:1;font-size:15px}
.plan .nm small{display:block;color:var(--ink3);font-size:12.5px;margin-top:2px}
.plan .pr{font:600 17px var(--mono);white-space:nowrap}
.plan.best .pr{color:var(--brand)}
.soon{display:inline-block;font:600 11.5px var(--sans);color:var(--brand);
  background:var(--brandsoft);border-radius:999px;padding:5px 12px;margin-top:14px}

/* feedback ----------------------------------------------------------------------------------------- */
.fb{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}
.fb .lbl{font:600 12px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.fbtoggle{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px dashed var(--line);
  border-radius:11px;padding:12px 14px;width:100%;cursor:pointer;color:var(--ink2);font-size:14px;
  text-align:left;margin-top:10px}
.fbtoggle:hover{border-color:var(--brand);color:var(--brand)}
.fbform{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
.fbform label{display:block;font:600 12px var(--sans);color:var(--ink3);margin:12px 0 5px}
.fbform label:first-child{margin-top:0}
.fbform input,.fbform textarea{width:100%;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;color:var(--ink);font:400 15px var(--sans)}
.fbform textarea{min-height:96px;resize:vertical;line-height:1.55}
.fbform input:focus,.fbform textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.fbnote{color:var(--ink3);font-size:12.5px;margin-top:12px}
.fbdone{background:var(--oksoft);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:0 11px 11px 0;padding:12px 14px;color:var(--ink2);font-size:14.5px}

/* gate ------------------------------------------------------------------------------------------------ */
.gate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.gatecard{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  padding:34px 28px;max-width:420px;width:100%;text-align:center}
.gatecard .eyebrow{font:600 11.5px var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand);margin-bottom:10px}
.gatecard h1{font-size:24px;letter-spacing:-.015em}
.gatecard .sub{color:var(--ink3);font-size:14px;margin:6px 0 22px}
.gatecard input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:500 16px var(--mono);text-align:center;
  letter-spacing:.14em;text-transform:uppercase}
.gatecard input:focus{outline:2px solid var(--brand);outline-offset:1px}
.gatecard .btn{margin-top:12px}
.gatecard .err{color:var(--bad);font-size:13.5px;margin-top:12px;min-height:20px}

/* reference ---------------------------------------------------------------------------------------------- */
.fsheet h3{font-size:15px;margin:22px 0 8px;color:var(--gold)}
.fsheet h3:first-child{margin-top:0}
.fsheet table{border-collapse:collapse;width:100%;font-size:13.5px}
.fsheet td{border-bottom:1px solid var(--line);padding:8px 6px;vertical-align:top}
.fsheet td:first-child{width:42%;color:var(--ink2);padding-right:12px}
.fsheet td:last-child{font-family:var(--mono);font-size:12.5px;line-height:1.6}
.note{color:var(--ink3);font-size:13px;margin-top:26px;padding-top:14px;border-top:1px solid var(--line);
  max-width:64ch}

/* statistical tables ---------------------------------------------------------- */
table.st-tab{font-size:12.5px;min-width:520px}
table.st-tab th.cnr{background:var(--panel2)}
table.st-tab th.rowh{background:var(--panel2);font-weight:600;font-size:12px;color:var(--ink2);
  text-align:center;position:sticky;left:0}
table.st-tab tr.sub td{background:var(--panel2);font-size:11px;color:var(--ink3);
  text-align:center;font-weight:600;padding:4px 9px}
table.st-tab td{text-align:center;padding:5px 9px;font-variant-numeric:tabular-nums}
table.st-tab tr.hlrow td,table.st-tab tr.hlrow th.rowh{background:var(--brandsoft)}
table.st-tab td.hlcell{background:var(--brand);color:#fff;font-weight:600}

/* brand mark ------------------------------------------------------------------- */
.logomark{width:26px;height:32px;object-fit:contain;flex:0 0 26px;display:block}
.gatelogo{width:190px;height:238px;margin:0 auto 18px;background:var(--lockup) center/contain no-repeat}
.gatecard h1{position:absolute;left:-9999px}

/* pricing table (legal pages) ------------------------------------------------ */
.prose table.ptab{width:100%;border-collapse:collapse;margin:12px 0;font-size:14.5px}
.prose table.ptab th{text-align:left;padding:9px 12px;background:var(--panel2);
  color:var(--ink);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
.prose table.ptab th:last-child,.prose table.ptab td:last-child{text-align:right;white-space:nowrap}
.prose table.ptab td{padding:11px 12px;border-bottom:1px solid var(--line);
  color:var(--ink2);vertical-align:top}
.prose table.ptab tr:last-child td{border-bottom:none}
.prose table.ptab td b{color:var(--ink)}