/* MRCPsych Prep app (dashboard, study sessions, account). Design ported from Certiva V2 (approved 26 Sept 2026). */
   Scale: title 40, heading 24, big number 56, body 17, small 15 (phone 28/20/40/16/14).
   8px grid: 24 between blocks, 32 inside. Surfaces: white page, navy blocks, flat pale-blue tiles (MRCPsych Prep blue #2F53FF). */

@font-face{font-family:"General Sans";src:url(fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(fonts/general-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
/* Approved scale (26 Sept): title 40, block heading 24, big number 56, body 17, small 15 (nothing smaller).
   Phone: 28 / 20 / 40 / 16 / 14. Spacing on an 8px grid: 24 between blocks, 32 inside blocks.
   Surfaces from the landing page: white page, aubergine block, flat lavender tiles (no shadow), radius 18. */
:root{
  --title:600 40px/1.1 var(--f);--head:600 24px/1.2 var(--f);--big:600 56px/1 var(--f);--body:400 17px/1.5 var(--f);--small:400 15px/1.4 var(--f);
  --gap:24px;--pad:32px;--r:18px;
  --aub:#1d202d;--aub2:#303447;--v:#2f53ff;--vh:#2343d9;--tile:#edeff7;--track:#dce0f1;--ink:#24232b;--mut:#585b69;--rose:#c9577a;
  /* one-hue ordinal ramp, validated: light-to-dark, visible steps */
  --r1:#a8b6f2;--r2:#8093ea;--r3:#556ede;--r4:#2c47c0;--r5:#1f2955;
  --f:"General Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#fff;color:var(--ink);font:var(--body);-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--v);outline-offset:3px;border-radius:12px}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}

/* Sidebar: full height, never cut off */
.side{background:var(--aub);color:#bfc4dd;padding:32px 16px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{color:#fff;font:600 28px/1 var(--f);letter-spacing:-1.3px;padding:0 16px 32px}
.side a.n{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-radius:12px;font:600 17px/1 var(--f)}
.side a.n:hover{background:var(--aub2);color:#fff}
.side a.n[aria-current=page]{background:#303448;color:#fff}
.side svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.side .me{margin-top:auto;padding:16px;font:var(--small);color:#989eba}
.side .me b{display:block;color:#fff;font-weight:600}

.main{padding:16px 40px 24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-content:start}
.head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.head h1{margin:0;font:var(--title);letter-spacing:-1.6px}
.head .r{display:flex;align-items:center;gap:16px;font:var(--small);color:var(--mut)}
.switch{height:48px;padding:0 44px 0 16px;border:0;border-radius:12px;background:var(--tile);font:600 17px/1 var(--f);color:var(--ink);appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 21px,calc(100% - 17px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.switch:hover{background-color:#e3e6f3}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:11px;background:var(--v);color:#fff;font:600 17px/1 var(--f);border:0;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--vh)}.btn:active{transform:translateY(1px)}
.btn.light{background:#fff;color:var(--aub)}.btn.light:hover{background:#e8ebfb}
.btn.dark{background:var(--aub)}.btn.dark:hover{background:#2f3347}

.block{border-radius:var(--r);padding:var(--pad)}
.block h2{margin:0;font:var(--head);letter-spacing:-.6px}
.lav{background:var(--tile)}

/* Next step: dominant, top-left */
.next{grid-column:span 7;background:var(--aub);color:#fff;display:flex;flex-direction:column;justify-content:center}
.next .big-t{margin:0;font:var(--title);letter-spacing:-1.6px}
.next p{margin:12px 0 24px;color:#c2c7df}
.next .acts{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.next .mix{font:600 17px/1 var(--f);color:#c7d0fa;padding:0 8px}.next .mix:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* Readiness: segmented bar */
.ready{grid-column:span 5}
.ready .rh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.ready .rh .num{margin:0}
.ready .dl{display:block;margin-top:4px;font:var(--small);color:var(--mut)}
.ready .num{display:flex;align-items:baseline;gap:12px;margin:8px 0 16px}
.ready .num b{font:var(--big);letter-spacing:-2.4px}
.ready .num span{font:var(--small);color:var(--mut);white-space:nowrap}
.seg{display:flex;gap:2px;height:16px;border-radius:6px;overflow:hidden;background:var(--track)}
.seg i{display:block;height:100%}
.segkey{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:16px 0 0;padding:0;list-style:none;font:var(--small);color:var(--mut)}
.segkey li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.segkey i{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.segkey b{color:var(--ink);font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums}
.ready .lim{margin:16px 0 0;font:var(--small);color:var(--mut)}
.ready .lim a{color:var(--v);font-weight:600}

/* Syllabus: tiles shaded by first-attempt accuracy */
.syl{grid-column:span 8}
.bh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.bh h2{margin:0;font:var(--head);letter-spacing:-.6px}
.bh a{font:600 15px/1 var(--f);color:var(--v)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.t{height:88px;border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;transition:filter .12s,transform .08s}
.t:hover{filter:brightness(.96)}.t:active{transform:translateY(1px)}
.t b{font:600 17px/1.25 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.t .row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.t .pct{font:600 24px/1 var(--f);letter-spacing:-.8px}
.t .cnt{font:var(--small)}
.t.a1{background:var(--r1)}.t.a2{background:var(--r2)}
.t.a3{background:var(--r3);color:#fff}.t.a4{background:var(--r4);color:#fff}.t.a5{background:var(--r5);color:#fff}
.t.a0{background:var(--tile)}.t.a0 .pct{font:600 17px/1 var(--f);letter-spacing:0;color:var(--mut)}
.key{display:flex;align-items:center;gap:8px;margin-top:8px;font:var(--small);color:var(--mut);flex-wrap:wrap}
.key i{width:24px;height:12px;border-radius:3px}

/* Activity */
.act{grid-column:span 4;display:flex;flex-direction:column}
.act .num{display:flex;align-items:baseline;gap:8px;margin:8px 0 8px}
.act .num b{font:var(--big);letter-spacing:-2.4px}
.act .num span{font:var(--body);color:var(--mut)}
.act svg{display:block;width:100%;height:auto;margin-top:auto}
.ax{display:flex;justify-content:space-between;font:var(--small);color:var(--mut);margin-top:8px}
.lg{display:flex;gap:16px;font:var(--small);color:var(--mut);margin-bottom:8px}.lg span{display:inline-flex;align-items:center;white-space:nowrap}.lg i{margin-right:8px}
.lg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}

/* Slim row */
.slim{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cell{background:var(--tile);border-radius:14px;height:72px;padding:0 16px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cell:hover{background:#e3e6f3}
.cell .l b{display:block;font:600 17px/1.2 var(--f);white-space:nowrap}
.cell .l span{font:var(--small);color:var(--mut)}
.cell .v{font:var(--head);letter-spacing:-.6px}
.cell .go{font:600 17px/1 var(--f);color:var(--v)}
.tip{position:fixed;pointer-events:none;background:var(--aub);color:#fff;font:var(--small);padding:8px 12px;border-radius:8px;opacity:0;transition:opacity .1s;z-index:9}
.sr{position:absolute;left:-9999px}

@media (max-width:1180px){.main{padding:32px}.next,.ready,.syl,.act{grid-column:1/-1}.slim{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  :root{--title:600 28px/1.15 var(--f);--head:600 20px/1.2 var(--f);--big:600 40px/1 var(--f);--body:400 16px/1.5 var(--f);--small:400 14px/1.4 var(--f);--gap:16px;--pad:24px}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;justify-content:space-around;padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:20;overflow:visible}
  .brand,.side .me,.side a.n.hm{display:none}
  .side a.n{flex-direction:column;justify-content:center;gap:4px;height:56px;padding:0 8px;font:600 14px/1 var(--f)}
  .main{padding:24px 16px 104px}
  .head{flex-direction:column;align-items:flex-start;gap:12px}
  .head h1{letter-spacing:-1px}
  .head .r{width:100%;flex-direction:column-reverse;align-items:stretch;gap:8px}
  .next .acts .btn{flex:1 1 100%}
  .ready .num b,.act .num b{letter-spacing:-1.6px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .t{height:104px}
  .slim{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cell{height:auto;min-height:88px;padding:16px;flex-direction:column;align-items:flex-start;justify-content:space-between}
}

/* Practice and mock sessions (focus mode, no sidebar) + results. Uses the approved dashboard tokens
   from app-v6.css: title 40, heading 24, big 56, body 17, small 15; 24 between blocks, 32 inside. */
.qbar{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e6e9f4}
.qbar .in{max-width:1208px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;gap:24px}
.qbar .exit{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;margin-left:-16px;border-radius:12px;font:600 17px/1 var(--f)}
.qbar .exit:hover{background:var(--tile)}
.qbar .ttl{font:600 17px/1.2 var(--f);white-space:nowrap}
.qbar .prog{flex:1;display:flex;align-items:center;gap:16px;font:var(--small);color:var(--mut);min-width:0}
.qbar .prog .track{flex:1;max-width:320px;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.qbar .prog .track i{display:block;height:100%;background:var(--v)}
.qbar .save{display:inline-flex;align-items:center;gap:8px;font:var(--small);color:var(--mut);white-space:nowrap}
.qbar .save i{width:8px;height:8px;border-radius:50%;background:#16734a}
.qbar .timer{height:48px;padding:0 16px;border-radius:12px;background:var(--aub);color:#fff;font:600 17px/48px var(--f);font-variant-numeric:tabular-nums}

.qwrap{max-width:1208px;margin:0 auto;padding:32px 24px 16px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.qmeta{display:flex;justify-content:space-between;gap:16px;font:var(--small);color:var(--mut);margin-bottom:16px}
.qtext{margin:0 0 24px;font:var(--head);letter-spacing:-.4px;line-height:1.35;max-width:760px}
.qtheme{margin:0 0 12px;max-width:760px;font:var(--small);color:var(--mut)}
.qtheme span{display:block;font:600 13px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--v);margin-bottom:4px}
.opts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.opt{width:100%;min-height:64px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 20px 12px 12px;border:2px solid transparent;border-radius:14px;
  background:var(--tile);color:var(--ink);font:var(--body);text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
.opt:hover{background:#e3e6f3}.opt:active{background:#d8dcef}
.opt .L{width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center;font:600 17px/1 var(--f);color:var(--mut)}
.opt[aria-pressed=true]{border-color:var(--v);background:#e8ebfb}.opt[aria-pressed=true] .L{background:var(--v);color:#fff}
.opt.ok{border-color:#9fd3b6;background:#e3f3ea}.opt.ok .L{background:#16734a;color:#fff}
.opt.no{border-color:#eab3c1;background:#fbe9ee}.opt.no .L{background:#a8324f;color:#fff}
.opt.dim{color:var(--mut)}.opt[disabled]{cursor:default}.opt[disabled]:hover{background:var(--tile)}
.opt.ok[disabled]:hover{background:#e3f3ea}.opt.no[disabled]:hover{background:#fbe9ee}
.opt .tag{font:600 15px/1 var(--f);white-space:nowrap}.opt.ok .tag{color:#16734a}.opt.no .tag{color:#a8324f}
.fb{margin-top:24px;background:var(--tile);border-radius:18px;padding:32px}
.fb .verdict{margin:0 0 12px;font:600 17px/1.4 var(--f)}.fb .verdict.no{color:#a8324f}.fb .verdict.ok{color:#16734a}
.fb p{margin:0}
.fb .ref{margin-top:16px;background:#fff;border-radius:12px;padding:16px 20px}
.fb .ref b{display:block;font:600 15px/1.3 var(--f);color:var(--v);margin-bottom:4px}
.fb .added{margin-top:16px;font:600 17px/1.4 var(--f);color:#1f3493}
.qacts{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.btn.tile{background:var(--tile);color:var(--ink)}.btn.tile:hover{background:#e3e6f3}
.btn.flagged{background:#fff1d6;color:#7a5200}
.side-p{position:sticky;top:96px;display:grid;gap:24px}
.sp{background:var(--tile);border-radius:18px;padding:24px}
.sp h2{margin:0;font:var(--head);letter-spacing:-.6px}
.sp .sub{margin:8px 0 16px;font:var(--small);color:var(--mut)}
.grid-n{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.grid-n.ten{grid-template-columns:repeat(10,1fr);gap:4px}
.grid-n button{aspect-ratio:1;border:0;border-radius:8px;background:#fff;color:var(--mut);font:600 15px/1 var(--f);cursor:pointer;position:relative;padding:0}
.grid-n.ten button{font-size:15px;border-radius:6px;letter-spacing:-.4px}
.grid-n button:hover{background:#f2f4fc}
.grid-n .a{background:var(--r1);color:var(--ink)}
.grid-n .ok{background:#e3f3ea;color:#16734a}.grid-n .no{background:#fbe9ee;color:#a8324f}
.grid-n .cur{box-shadow:inset 0 0 0 2px var(--v)}
.grid-n .fl::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#d49a1f}
.legend2{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font:var(--small);color:var(--mut)}
.legend2 span{display:inline-flex;align-items:center;gap:8px}
.legend2 i{width:12px;height:12px;border-radius:3px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(29,32,45,.18)}
.keys{font:var(--small);color:var(--mut);line-height:1.8}
.keys kbd{font:600 15px/1 var(--f);padding:4px 7px;border-radius:6px;background:#fff;color:var(--ink)}
.submit{background:var(--aub);color:#fff;border-radius:18px;padding:24px}
.submit h2{margin:0;font:var(--head);letter-spacing:-.6px}
.submit p{margin:8px 0 16px;font:var(--small);color:#c2c7df}
.submit .btn{width:100%}

/* Results (inside the app shell) */
.res{grid-column:1/-1;background:var(--aub);color:#fff;border-radius:18px;padding:32px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:center}
.res .sc{font:var(--big);letter-spacing:-2.4px}
.res .sc small{display:block;margin-top:8px;font:var(--small);letter-spacing:0;color:#c2c7df}
.res h1{margin:0;font:var(--title);letter-spacing:-1.6px}
.res p{margin:8px 0 0;color:#c2c7df}
.res .acts{display:flex;gap:16px}
.bytopic{grid-column:span 8}
.revise{grid-column:span 4}
.revise ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px}
.revise li b{display:block;font:600 17px/1.35 var(--f)}
.revise li span{font:var(--small);color:var(--mut)}
.review{grid-column:1/-1}
.rv{display:grid;gap:12px;margin-top:16px}
.rv a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;background:var(--tile);border-radius:14px;padding:16px 24px 16px 16px}
.rv a:hover{background:#e3e6f3}
.rv>a .no{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:#fbe9ee;color:#a8324f;font:600 17px/1 var(--f)}
.rv>a b{display:block;font:600 17px/1.35 var(--f)}
.rv>a span{font:var(--small);color:var(--mut)}
.rv>a em{font:600 15px/1 var(--f);font-style:normal;color:var(--v)}
.tabs{display:flex;gap:8px;background:var(--tile);padding:4px;border-radius:12px}
.tabs button{height:40px;padding:0 16px;border:0;border-radius:9px;background:transparent;font:600 15px/1 var(--f);color:var(--mut);cursor:pointer}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink)}

@media (max-width:980px){.qwrap{grid-template-columns:minmax(0,1fr)}.side-p{position:static}.bytopic,.revise{grid-column:1/-1}.res{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .qbar .in{height:64px;gap:12px;padding:0 16px}.qbar .ttl,.qbar .prog .track{display:none}.qbar .exit{padding:0 12px;margin-left:-12px}
  .qwrap{padding:24px 16px 112px}
  .qtext{font:600 20px/1.35 var(--f);letter-spacing:-.2px}
  .opt{grid-template-columns:36px minmax(0,1fr);font:400 16px/1.45 var(--f);padding:12px}.opt .L{width:36px;height:36px}.opt .tag{grid-column:2}
  .fb{padding:24px}
  .qacts{position:fixed;left:0;right:0;bottom:0;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e6e9f4;z-index:30}
  .qacts .btn{flex:1}
  .grid-n.ten{grid-template-columns:repeat(10,1fr)}
  .res .acts{flex-direction:column}
}

/* Practice fits one screen: after answering, feedback takes the right panel (approved 26 Sept). */
.qwrap.pr{grid-template-columns:minmax(0,1fr) 440px}
.qbar .qs{height:48px;padding:0 16px;border:0;border-radius:12px;background:var(--tile);font:600 17px/1 var(--f);color:var(--ink);cursor:pointer;white-space:nowrap}
.qbar .qs:hover{background:#e3e6f3}
.fb.fbp{align-self:start;margin:0;position:sticky;top:96px;max-height:calc(100vh - 128px);overflow:auto}
.pop{position:absolute;top:80px;right:24px;width:360px;background:#fff;border-radius:18px;padding:24px;box-shadow:0 12px 40px rgba(29,32,45,.18);display:none}
.pop.open{display:block}
/* Mock: grid shown 50 at a time */
.half{display:flex;gap:8px;margin:0 0 16px}
.half button{flex:1;height:40px;border:0;border-radius:10px;background:#fff;color:var(--mut);font:600 15px/1 var(--f);cursor:pointer}
.half button[aria-pressed=true]{background:var(--aub);color:#fff}
@media (max-width:980px){.qwrap.pr{grid-template-columns:minmax(0,1fr)}.fb.fbp{align-self:start;position:static;max-height:none}}
@media (max-width:760px){.qbar .save.quiet{display:none}.qbar .qs{height:40px;padding:0 12px;font-size:15px}.qbar .count-long{display:none}}
@media (min-width:761px){.qbar .count-short{display:none}}
.qtext.long{font:600 20px/1.35 var(--f);letter-spacing:-.2px}
.qtext.longer{font:600 17px/1.45 var(--f);letter-spacing:0}

.sub{margin:8px 0 0;font:var(--body);color:var(--mut)}
.row-list{display:grid;gap:16px}
.item{background:var(--tile);border-radius:18px;padding:24px 32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.item h3{margin:0;font:var(--head);letter-spacing:-.6px}
.item h3.sm{font:600 17px/1.3 var(--f);letter-spacing:0}
.item p{margin:8px 0 0;font:var(--small);color:var(--mut)}
.item .acts{display:flex;gap:16px;align-items:center}
.item.w{background:#fff;padding:20px 24px}
.state{font:600 15px/1 var(--f);padding:8px 12px;border-radius:10px;background:#fff;color:var(--mut);white-space:nowrap}
.state.ok{background:#e3f3ea;color:#16734a}.state.go{background:#e8ebfb;color:#1f3493}
.bar2{height:8px;border-radius:4px;background:#fff;overflow:hidden;margin-top:12px;max-width:320px}.bar2 i{display:block;height:100%;background:var(--v)}
.hero2{grid-column:1/-1;background:var(--aub);color:#fff;border-radius:18px;padding:32px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:32px;align-items:center}
.hero2 .n{font:var(--big);letter-spacing:-2.4px}
.hero2 h2{margin:0;font:var(--head);letter-spacing:-.6px}
.hero2 p{margin:8px 0 0;color:#c2c7df}
.full{grid-column:1/-1}
.two2{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
dl.kv{margin:24px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 32px}
dl.kv dt{font:var(--small);color:var(--mut);padding-top:2px}dl.kv dd{margin:0;font:600 17px/1.4 var(--f)}
table.pay{width:100%;border-collapse:collapse;margin-top:16px;font:var(--body)}
table.pay th{text-align:left;font:var(--small);color:var(--mut);padding:0 0 12px}
table.pay td{padding:16px 0;border-top:1px solid #d3d7ea}
table.pay .r{text-align:right}
.note2{margin:16px 0 0;font:var(--small);color:var(--mut)}
.btn.tile{background:var(--tile);color:var(--ink)}.btn.tile:hover{background:#e3e6f3}
.btn.white{background:#fff;color:var(--ink)}.btn.white:hover{background:#f2f4fc}
.btn.red{background:#fbe9ee;color:#a8324f}.btn.red:hover{background:#f7dbe3}
@media (max-width:1180px){.two2{grid-template-columns:minmax(0,1fr)}.hero2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.item{grid-template-columns:minmax(0,1fr);padding:24px}.item .acts{flex-wrap:wrap}.hero2{gap:16px}}
.pick .t{border:3px solid transparent;cursor:pointer;text-align:left;height:120px;padding:20px 24px;font:inherit;color:inherit}.pick .t b{align-self:flex-start}.pick .t.a3,.pick .t.a4,.pick .t.a5,.pick .t.mixed{color:#fff}
.pick .t[aria-pressed=true]{border-color:var(--ink)}
.pick .t.mixed{background:var(--aub);color:#fff}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.len{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.len .seg2{display:flex;gap:8px;background:var(--tile);padding:4px;border-radius:12px}
.len .seg2 button{height:44px;padding:0 20px;border:0;border-radius:9px;background:transparent;font:600 17px/1 var(--f);color:var(--mut);cursor:pointer}
.len .seg2 button[aria-pressed=true]{background:#fff;color:var(--ink)}
.len .lbl{font:var(--small);color:var(--mut)}
.len .btn{margin-left:auto}
.sets3{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.set3{background:var(--tile);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:8px;min-height:280px}
.set3 .n{font:var(--big);letter-spacing:-2.4px;margin-top:16px}
.set3 h2{margin:0;font:var(--head);letter-spacing:-.6px}
.set3 p{margin:0;font:var(--small);color:var(--mut);min-height:42px}
.set3 .btn{margin-top:auto;align-self:flex-start}
.set3.primary{background:var(--aub);color:#fff}.set3.primary p{color:#c2c7df}
.papers{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.paper{background:var(--tile);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:16px}
.paper h2{margin:0;font:var(--head);letter-spacing:-.6px}
.paper .fmt{font:600 17px/1.4 var(--f)}
.paper p{margin:0;font:var(--small);color:var(--mut)}
.paper .res2{display:flex;align-items:baseline;gap:12px}
.paper .res2 b{font:var(--big);letter-spacing:-2.4px}
.paper .acts{display:flex;gap:16px;margin-top:auto}
@media (max-width:1180px){.sets3,.papers{grid-template-columns:minmax(0,1fr)}.tiles.three{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* States shared by all app pages */
.loading{grid-column:1/-1;display:grid;place-items:center;min-height:50vh;font:var(--body);color:var(--mut)}
.alert{grid-column:1/-1;background:#fbe9ee;color:#a8324f;border-radius:14px;padding:16px 24px;font:var(--body)}
.alert a{font-weight:600;text-decoration:underline}
.empty{grid-column:1/-1;background:var(--tile);border-radius:18px;padding:32px;font:var(--body);color:var(--mut)}
.empty h2{margin:0 0 8px;font:var(--head);color:var(--ink);letter-spacing:-.6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t.more{background:var(--tile);color:var(--v)}
/* More than 8 topics: smaller tiles so the dashboard still fits one screen */
.tiles.dense{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tiles.dense .t{height:40px;border-radius:10px;padding:0 12px;flex-direction:row;align-items:center;gap:8px}
.tiles.dense .t b{font:600 15px/1.2 var(--f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.tiles.dense .t .row{flex:none}.tiles.dense .t .pct{font:600 15px/1 var(--f);letter-spacing:0}.tiles.dense .t .cnt{display:none}
.tiles.dense.x5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles.dense.x5 .t{height:32px;padding:0 10px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* 17+ topics (DipPEC): widen the syllabus so abbreviated names show in full */
.syl.wide{grid-column:span 9}.act.narrow{grid-column:span 3}
.tiles.dense.x5 .t{padding:0 8px;gap:4px}.tiles.dense.x5 .t b{letter-spacing:-.2px}
@media (max-width:1180px){.syl.wide,.act.narrow{grid-column:1/-1}}
.act.narrow .bh{flex-direction:column;align-items:flex-start;gap:4px}.act.narrow .num{margin:0}
/* Confirmation dialog (mock submit) */
.modal{position:fixed;inset:0;z-index:100;background:rgba(29,32,45,.55);display:grid;place-items:center;padding:16px}
.modal-box{background:#fff;border-radius:18px;padding:32px;max-width:520px;width:100%}
.modal-box h2{margin:0 0 8px;font:var(--head);letter-spacing:-.6px}
.modal-box p{margin:0 0 24px;font:var(--body);color:var(--mut)}
.modal-acts{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap}
.qwrap .res{grid-column:1/-1}
.qbar .save.failed{color:#a8324f}.qbar .save.failed i{background:#a8324f}.qbar .save.pending i{background:#c79a2b}
.opt:focus-visible{outline:3px solid var(--v);outline-offset:2px}
.btn[disabled]{background:#c4cae6;color:#fff;cursor:not-allowed}
.btn.tile[disabled]{background:var(--tile);color:#a3a6b3}

/* Results: answers expand in place to show the options, explanation and reference */
.rvd{background:var(--tile);border-radius:14px}
.rvd summary{list-style:none;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 24px 16px 16px;border-radius:14px;cursor:pointer}
.rvd summary::-webkit-details-marker{display:none}
.rvd summary:hover{background:#e3e6f3}
.rvd .qn{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:#fbe9ee;color:#a8324f;font:600 17px/1 var(--f)}
.rvd.good .qn{background:#e3f3ea;color:#16734a}
.rvd b{display:block;font:600 17px/1.35 var(--f)}
.rvd summary span span{font:var(--small);color:var(--mut)}
.rvd em{font:600 15px/1 var(--f);font-style:normal;color:var(--v)}
.rvd[open] em{color:var(--mut)}
.rvd .more{padding:0 24px 24px 80px}
.rvd .more .opts{gap:8px}
.rvd .more .opt{cursor:default;min-height:56px;background:#fff}
.rvd .more .opt.ok{background:#e3f3ea}.rvd .more .opt.no{background:#fbe9ee}
.rvd .more .fb{margin-top:16px;background:#fff;padding:24px}
.rvd .more .fb .ref{background:var(--tile)}
.none{margin:16px 0 0;font:var(--body);color:var(--mut)}
@media (max-width:760px){
  .rvd summary{grid-template-columns:40px minmax(0,1fr);padding:12px}.rvd .qn{width:40px;height:40px}
  .rvd em{display:none}.rvd .more{padding:0 12px 16px}
  .review .bh{flex-direction:column;align-items:stretch}.tabs button{flex:1;padding:0 8px}
}
.tiles.bysub .t{height:auto;min-height:88px;gap:8px}.tiles.bysub .t b{white-space:normal}

/* FCA: one mock per subject, so five cells in the slim row */
.slim.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.cell .l .act{font:600 15px/1.4 var(--f);color:var(--v)}
@media (max-width:1180px){.slim.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phone: many-topic syllabuses use two columns so names are readable (the page may scroll on phone). */
@media (max-width:760px){.tiles.dense,.tiles.dense.x5{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles.dense.x5 .t{height:40px;padding:0 12px}}
/* Laptop widths: topic names in the syllabus tiles drop to the small size so full names fit. */
@media (max-width:1400px) and (min-width:761px){.tiles:not(.dense) .t{padding:16px 12px}.tiles.dense .t{padding:0 10px;gap:6px}.tiles:not(.dense) .t b{font:600 15px/1.25 var(--f)}}
/* Phone: the page scrolls, so long topic names wrap instead of being cut off. */
@media (max-width:760px){.tiles .t b,.tiles.dense .t b{white-space:normal;overflow:visible;hyphens:auto;-webkit-hyphens:auto}.tiles.dense .t,.tiles.dense.x5 .t{height:auto;min-height:40px;padding:8px 12px}.tiles:not(.dense) .t{height:auto;min-height:88px;gap:8px;padding:14px 12px}.tiles .t b{font-size:15px}}
/* Very small phones (320–359px): tighter tabs, one tile per row. */
@media (max-width:359px){.side{padding-left:2px;padding-right:2px}.side a.n{padding:0 4px;min-width:0}.tiles,.tiles.dense,.tiles.dense.x5{grid-template-columns:minmax(0,1fr)}}

/* Results scroll, so many-topic results use fewer, wider columns than the dashboard. */
@media (min-width:761px){.bytopic .tiles.dense{grid-template-columns:repeat(3,minmax(0,1fr))}.bytopic .tiles.dense.x5{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Hub pages */
.pick .tiles.dense .t{height:52px;padding:0 14px;border-width:2px;flex-direction:row;align-items:center}.pick .tiles.dense .t b{align-self:center}
.pick .tiles.dense.x5 .t{height:44px;padding:0 10px}
.pick .tiles.dense .t.mixed .pct{color:#fff}
.pick .t:focus-visible{outline-offset:2px}
.seg2 button[disabled]{opacity:.45;cursor:not-allowed}
.resume-line{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--tile);border-radius:14px;padding:16px 24px;font:var(--body)}
.resume-line b{color:var(--v);font-weight:600}.resume-line:hover{background:#e3e6f3}
.ended{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff1d6;color:#5c3d00;border-radius:14px;padding:16px 24px;font:var(--body)}
@media (max-width:760px){.ended,.resume-line{flex-direction:column;align-items:stretch;padding:16px}.len .btn{margin-left:0;width:100%}.len .seg2{width:100%}.len .seg2 button{flex:1;padding:0 8px}.pick .t{height:auto;min-height:96px;padding:16px}.pick .tiles.dense .t,.pick .tiles.dense.x5 .t{min-height:48px;height:auto;padding:8px 12px}}
.papers.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.paper .acts{flex-wrap:wrap}
.paper .inprog{font:600 17px/1.4 var(--f);color:var(--v)}
@media (max-width:1180px){.papers.three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.paper{padding:24px}.paper .acts .btn{flex:1 1 auto}.sets3 .set3{min-height:0;padding:24px}.set3 p{min-height:0}}
.pick .tiles.dense .t .row{align-items:center}

/* Account */
.linkbtn{border:0;background:none;padding:8px 0;font:600 15px/1 var(--f);color:var(--v);cursor:pointer}
.linkbtn:hover{text-decoration:underline}
a.ul{color:var(--v);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pf{display:grid;gap:16px;margin-top:24px}
.pf label{display:grid;gap:8px;font:var(--small);color:var(--mut)}
.pf input{height:48px;border:2px solid #d3d7ea;border-radius:12px;padding:0 14px;font:var(--body);color:var(--ink);background:#fff}
.pf input:focus{outline:none;border-color:var(--v)}
.acts2{display:flex;gap:12px;flex-wrap:wrap}
.err{margin:0;color:#a8324f;font:600 15px/1.4 var(--f)}
.ok2{margin:16px 0 0;color:#16734a;font:600 15px/1.4 var(--f)}
.ok2.full{grid-column:1/-1;margin:0;background:#e3f3ea;border-radius:14px;padding:16px 24px}
.tbl{overflow-x:auto}
@media (max-width:760px){.item.w{grid-template-columns:minmax(0,1fr);gap:12px}.item.w .btn{width:100%}table.pay{font:var(--small)}table.pay td,table.pay th{padding-right:12px}dl.kv{grid-template-columns:minmax(0,1fr);gap:4px}dl.kv dd{margin-bottom:12px;overflow-wrap:anywhere}}
/* Phone: topic buttons stack the name above the score so whole names fit; payments become stacked rows. */
@media (max-width:760px){.pick .tiles.dense .t,.pick .tiles.dense.x5 .t{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}.pick .tiles.dense .t b{align-self:flex-start}}
@media (max-width:480px){table.pay thead{display:none}table.pay,table.pay tbody{display:block}table.pay tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-top:1px solid #d3d7ea}table.pay td{border:0;padding:0}table.pay td:nth-child(3){display:none}table.pay td:nth-child(2){grid-column:1/-1;order:3;color:var(--mut)}}
.links2{display:flex;flex-wrap:wrap;gap:8px 24px}

/* Account: marketing emails choice (migration 011) */
.optrow{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin-top:16px;font:var(--body);cursor:pointer}
.optrow input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--v)}
.block .err{margin-top:12px}

/* Free-sample pay gate (29 Sept): the July/August layout, compact enough to fit one screen */
.paygate{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px 20px calc(16px + env(safe-area-inset-bottom))}
.pg-col{width:100%;max-width:448px;display:grid;gap:12px}
.pg-head{text-align:center}
.pg-lock{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--tile);color:var(--v);margin-bottom:10px}
.pg-lock svg,.pg-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-head h1{margin:0;font:600 26px/1.15 var(--f);letter-spacing:-.6px}
.pg-head p{margin:6px 0 0;font:var(--small);color:var(--mut)}
.pg-pill{display:inline-block;margin-top:10px;padding:7px 14px;border-radius:999px;background:var(--tile);border:1px solid #d0d7f5;color:var(--v);font:600 13px/1 var(--f)}
.pg-res{background:#fafafc;border:1px solid #ebecf0;border-radius:16px;padding:16px}
.pg-rh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.pg-rh h2{margin:0;font:600 15px/1.2 var(--f)}
.pg-rh span{font:600 10px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:#9698a3}
.pg-bars{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pg-bars li{min-width:0}
.pg-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 13px/1.25 var(--f);margin-bottom:5px}
.pg-l span:first-child{min-width:0;flex:1;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-l span:last-child{font-size:12px;font-weight:600;color:rgba(24,24,27,.45);white-space:nowrap}.pg-l .ok{color:#16a34a!important}
.pg-bar{position:relative;height:8px;border-radius:5px;background:#f0f0f4;overflow:hidden}
.pg-bar i{display:block;height:100%;border-radius:5px}.pg-bar i.low{background:#ef4444}.pg-bar i.mid{background:#f59e0b}.pg-bar i.ok{background:#22c55e}
.pg-bar b{position:absolute;left:70%;top:0;bottom:0;width:2px;background:rgba(10,10,20,.18)}
.pg-sum{margin:12px 0 0;padding-top:10px;border-top:1px solid #ebecf0;font:400 12px/1.5 var(--f);color:var(--mut)}.pg-sum b{color:var(--ink)}
.pg-lead{margin:2px 0 0;text-align:center;font:var(--small);color:var(--mut)}
.pg-card{display:block;border-radius:16px;overflow:hidden;border:1px solid #e3e5ec;background:#fff;color:var(--ink);text-decoration:none;transition:box-shadow .15s,border-color .15s}
.pg-card:hover{border-color:#bfc8f0}
.pg-main{border:2px solid var(--v);box-shadow:0 10px 28px rgba(47,83,255,.14)}.pg-main:hover{box-shadow:0 14px 34px rgba(47,83,255,.24);border-color:var(--v)}
.pg-in{display:block;padding:14px 16px}.pg-main .pg-in{background:rgba(47,83,255,.05)}
.pg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pg-top b{display:block;font:600 16px/1.2 var(--f)}
.pg-tag{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:999px;background:rgba(47,83,255,.14);color:var(--v);font:700 9px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase}
.pg-price{font:600 24px/1 var(--f);letter-spacing:-.5px;white-space:nowrap}.pg-price small{font:600 12px/1 var(--f);letter-spacing:0;color:rgba(24,24,27,.5)}
.pg-txt{display:block;margin-top:6px;font:400 12.5px/1.5 var(--f);color:var(--mut)}
.pg-go{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;font:600 14px/1 var(--f);background:rgba(29,32,45,.04);color:var(--ink);border-top:1px solid #edeef3}
.pg-main .pg-go{background:var(--v);color:#fff;border-top:0}.pg-main:hover .pg-go{background:var(--vh)}
.pg-go svg{width:16px;height:16px;stroke-width:2}
.pg-risk{margin:0;text-align:center;font:400 12.5px/1.4 var(--f);color:var(--mut)}.pg-risk b{color:var(--ink)}
.pg-risk a,.pg-foot a{color:var(--v);font-weight:600;text-decoration:none}.pg-risk a:hover,.pg-foot a:hover{text-decoration:underline}
.pg-foot{margin:0;text-align:center;font:600 14px/1.3 var(--f)}
/* shorter screens: tighten first, then drop the extras (old layout otherwise ran past the fold) */
@media (max-height:960px){.pg-col{gap:10px}.pg-lock{display:none}.pg-pill{margin-top:8px;padding:6px 12px}.pg-bars{gap:9px}.pg-in{padding:12px 16px}.pg-go{padding:11px}}
@media (max-height:820px){.pg-head p{display:none}.pg-lead{display:none}.pg-month .pg-txt{display:none}.pg-month{display:flex;align-items:center}.pg-month .pg-in{flex:1;padding:10px 16px}.pg-month .pg-go{border-top:0;background:none;color:var(--v);padding:10px 16px}}
@media (max-height:700px){.pg-pill{display:none}.pg-head h1{font-size:22px}.pg-res{padding:12px 14px}.pg-rh{margin-bottom:8px}.pg-bars{gap:7px}.pg-l{margin-bottom:3px}.pg-bar{height:6px}.pg-sum{margin-top:8px;padding-top:7px;font-size:11.5px}.pg-tag{display:none}.pg-price{font-size:21px}.pg-month .pg-go span,.pg-month .pg-go{font-size:13px}}
@media (max-height:600px){.pg-main .pg-txt{display:none}.pg-in{padding:10px 14px}.pg-go{padding:10px}.pg-col{gap:8px}.paygate{padding-top:10px;align-items:flex-start}.pg-sum{display:none}}

/* Sidebar stays put between app pages (29 Sept): same-origin view transition; placeholder painted as the sidebar */
@view-transition{navigation:auto}
.side{view-transition-name:cv-side}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
@media (min-width:761px){div[data-app-side]{background:var(--aub);position:sticky;top:0;height:100vh}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Phones: question, answers and explanation sit closer together so more of it fits on one screen */
@media(max-width:760px){
 .qwrap{padding-top:14px!important}
 .qmeta{margin-bottom:8px}
 .qtext{font:600 18px/1.32 var(--f)!important}
 .opts{gap:6px!important;margin-top:14px}
 .opt{padding:8px 10px!important;grid-template-columns:30px minmax(0,1fr)!important;column-gap:10px!important;row-gap:2px!important;font:400 15px/1.4 var(--f)!important;min-height:46px!important}
 .opt .L{width:30px!important;height:30px!important;font-size:15px!important;border-radius:8px}
 .opt .tag{font-size:14px!important;line-height:1.2}
 .opt.dim{min-height:40px!important;padding-top:5px!important;padding-bottom:5px!important;font-size:14px!important}
 .opt.dim .L{width:26px!important;height:26px!important;font-size:14px!important}
 .fb{margin-top:12px!important;padding:16px!important;border-radius:14px}
 .fb .verdict{font-size:16px!important;margin-bottom:6px!important}
 .fb p{font-size:15px;line-height:1.5}
 .fb .ref{margin-top:10px!important;padding:12px 14px!important}
 .qacts{padding:8px 14px calc(8px + env(safe-area-inset-bottom))!important}
}
.ok2.full a{color:inherit;text-decoration:underline}
.ask{margin:10px 0 0;font-size:14px;line-height:1.5;color:#585b68}.ask a{color:#2c47c0;text-decoration:underline;font-weight:600}
/* Free sample → starting check, and the starting check result */
.pg-next{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 0;padding:9px 12px;border-radius:10px;background:#edeff7;color:var(--v);font:600 13.5px/1.3 var(--f);text-decoration:none}.pg-next:hover{text-decoration:underline}
.pg-next svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex:none}
.pg-sub{margin:14px 0 6px;font:600 14px/1.3 var(--f);color:var(--ink)}
.pg-reads{list-style:none;margin:0;padding:0;display:grid;gap:6px}.pg-reads li{display:grid;font:400 13px/1.4 var(--f);color:var(--mut)}.pg-reads b{color:var(--ink);font-weight:600}
.pg-when{margin:0;text-align:center;font:400 13px/1.45 var(--f);color:var(--mut)}.pg-when b{color:var(--ink);font-weight:600;display:block}
.ready .refund-line{margin:8px 0 10px;font:var(--small);color:var(--mut)}.ready .refund-line a{color:var(--v);font-weight:600;text-decoration:none}

/* Starting check results: one line per topic, so the whole result fits one phone screen */
.pg-check .pg-bars{gap:8px}
.pg-check .pg-bars li{display:grid;grid-template-columns:minmax(0,8.5em) 1fr 2.4em;align-items:center;gap:10px}
.pg-check .pg-l{display:contents}
.pg-check .pg-l span:first-child{order:1}.pg-check .pg-bar{order:2}.pg-check .pg-l span:last-child{order:3;text-align:right}
.pg-check .pg-sub{margin-top:12px}
.pg-check .pg-reads{gap:5px}.pg-check .pg-reads li{font-size:12.5px;line-height:1.35}
.pg-head-check p{display:block!important}
/* The free sample's end screen fits an iPhone-sized screen with the starting-check link */
@media (max-height:900px){.pg-lead{display:none}}
@media (max-height:700px){.pg-check .pg-reads li:nth-child(n+3){display:none}.pg-head-check+.pg-check~.pg-main .pg-txt{display:none}.pg-when{font-size:12px}}
@media (max-height:900px){.pg-res{padding:14px 16px}.pg-rh{margin-bottom:10px}.pg-bars{gap:8px}.pg-sum{margin-top:10px;padding-top:8px}.pg-next{margin-top:8px;padding:8px 12px}.pg-check .pg-reads li:nth-child(n+3){display:none}.pg-check .pg-sub{margin-top:10px}}
@media (max-height:900px){.pg-month .pg-txt{display:none}.pg-month{display:flex;align-items:center}.pg-month .pg-in{flex:1;padding:10px 16px}.pg-month .pg-go{border-top:0;background:none;color:var(--v);padding:10px 16px;white-space:nowrap}}

.head .r a.hl{color:var(--v);font-weight:600;text-decoration:none;white-space:nowrap}.head .r a.hl:hover{text-decoration:underline}
@media (max-width:760px){.head .r a.hl{display:inline-block;padding:4px 0}}

/* Study plan (plan.html) */
.plan-sum,.plan-lock{grid-column:1/-1}
.plan-lock .plan-risk{color:#c2c7df;font:var(--small)}
.sec-h{margin:0 0 16px;font:var(--head);letter-spacing:-.6px}
.plan-weeks{grid-column:1/-1}
.wks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.wk{background:var(--tile);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}
.wk.now{background:#fff;box-shadow:inset 0 0 0 2px var(--v)}
.wk.mock{background:#e4e7f6}
.wk-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.wk-h b{font:600 17px/1.2 var(--f)}.wk-h span{font:var(--small);color:var(--mut)}
.wk-h em{margin-left:auto;font:600 13px/1 var(--f);font-style:normal;color:#fff;background:var(--v);padding:5px 9px;border-radius:99px}
.wk-l{list-style:none;margin:0;padding:0;display:grid;gap:6px;font:var(--small)}
.wk-l li{display:flex;justify-content:space-between;gap:12px}.wk-l li b{font-weight:600}
.wk-n{margin:0;font:var(--small);color:var(--mut)}
.wk .btn{align-self:flex-start;height:44px;padding:0 18px;font-size:15px;white-space:normal;text-align:left}
.plan-later{margin:16px 0 0;font:var(--small);color:var(--mut)}
.plan-final{grid-column:span 5}.plan-bp{grid-column:span 7}
.plan-final .fin{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.plan-final label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.plan-final input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--v);flex-shrink:0}
.plan-bp .sub{margin:8px 0 16px;color:var(--mut);font:var(--small)}
.bp{border-top:1px solid #d3d8ec}.bp:last-child{border-bottom:1px solid #d3d8ec}
.bp summary{display:flex;justify-content:space-between;gap:12px;padding:12px 0;cursor:pointer;font:600 16px/1.3 var(--f)}
.bp ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;font:var(--small)}
.bp li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;color:var(--mut)}.bp li.ok{color:var(--ink)}
.bp li i{font-style:normal;color:var(--v);font-weight:600}
@media (max-width:900px){.plan-final,.plan-bp{grid-column:1/-1}}
.plan-short{margin:-12px 0 24px!important;padding:12px 16px;border-radius:12px;background:#303447;color:#fff!important;font:var(--small)}.plan-short a{color:#c7d0fa;font-weight:600;text-decoration:underline}
.head .r .hls{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:760px){.side a.n.cur-m{background:#303448;color:#fff}}
/* Free account home (dashboard with no exam yet) */
.free-home{grid-column:span 7}.free-home p{margin:12px 0 0}.free-home b{color:#fff}
.free-tools{grid-column:span 5}
.free-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.free-list a{display:grid;gap:4px;padding:12px 16px;border-radius:12px;background:#fff;color:var(--ink);text-decoration:none}
.free-list a:hover{background:#f8f9fd}.free-list b{font:600 17px/1.2 var(--f)}.free-list span{font:var(--small);color:var(--mut)}
.free-pass{grid-column:1/-1;border:2px solid var(--track)}.free-pass p{margin:12px 0 0;max-width:72ch}
@media (max-width:1180px){.free-home,.free-tools{grid-column:1/-1}}
.res .ask{color:#c2c7df}.res .ask a{color:#fff}
.wk-after{margin-left:auto;font:600 13px/1.2 var(--f);color:#8a4b00;background:#fff1d6;padding:5px 9px;border-radius:99px;text-decoration:none}.wk-after:hover{text-decoration:underline}
/* Laptop screens (1280x720): tighter spacing so the whole dashboard fits without scrolling. */
@media (min-width:1181px) and (max-height:800px){:root{--gap:16px;--pad:24px}.main{padding-top:12px;padding-bottom:16px}.t{height:78px}.cell{height:62px}.next .big-t{font-size:36px}}
@media (max-height:700px) and (max-width:500px){.pg-check~.pg-foot .pg-share,.pg-foot .pg-share{display:none}}
@media (max-height:760px){.pg-head-check~.pg-main .pg-txt{display:none}}
@media (max-height:700px){.pg-check .pg-reads li:nth-child(n+2){display:none}}

/* Paygate: pick the pass right on the last screen (4 Oct) */
.pg-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
@media(max-width:560px){.pg-plans{grid-template-columns:repeat(2,1fr)}}
.pg-plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 6px 12px;border-radius:14px;border:1px solid #e3e5ec;background:#fff;color:var(--ink);text-decoration:none;text-align:center}
.pg-plan b{font:600 14px/1.2 var(--f)}
.pg-plan .pg-price{font:600 22px/1 var(--f)}
.pg-plan .pg-bonus{font:600 11px/1.2 var(--f);color:var(--v)}
.pg-plan .pg-bonus.pg-none{color:var(--mut);font-weight:400}
.pg-plan.pg-rec{border:2px solid var(--v);box-shadow:0 10px 28px rgba(47,83,255,.16);background:rgba(47,83,255,.05)}
.pg-plan .pg-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);margin:0;background:var(--v);color:#fff;white-space:nowrap}
.pg-plan:hover,.pg-plan:focus-visible{border-color:var(--v)}
.pg-inc{margin:0;text-align:center;font:400 12px/1.45 var(--f);color:var(--mut)}

/* Dashboard header: keep the exam name on one line on desktop; the links beside it wrap instead (5 Oct 2026). */
@media (min-width:761px){.head h1{white-space:nowrap;flex:none}.head .r{min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:4px;text-align:right}}
.modal-box .fld span{font:600 15px/1.3 var(--f);color:var(--ink)}
.modal-box .fld textarea,.modal-box .fld select{border:1.5px solid #d0d4e6;border-radius:10px;padding:10px 12px;font:var(--small);color:var(--ink);background:#fff;box-sizing:border-box}
.modal-box .fld textarea:focus-visible,.modal-box .fld select:focus-visible{outline:3px solid #4268c9;outline-offset:2px}
/* The analytics-cookie banner (consent.js) sits above the phone's fixed bottom bar instead of covering it. */
@media (max-width:760px){html{--mrcp-dock:76px}html:has(.qacts){--mrcp-dock:84px}}
/* Very narrow phones (320 px): long button labels wrap instead of pushing the page sideways. */
@media (max-width:360px){.acts .btn{white-space:normal;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;max-width:100%;text-align:center;line-height:1.25}}

/* Calm dashboard home (9 Oct): fewer things, more space. Next step, three numbers, topics, one line of links. */
.head.calm{align-items:flex-end}
.head .hsub{margin:8px 0 0;font:var(--small);color:var(--mut)}
.glance{grid-column:span 5;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:24px var(--pad)}
.glance .g{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:baseline;column-gap:16px;padding:12px 0;border-top:1px solid var(--track)}
.glance .g:first-child{border-top:0}
.glance .g span{font:600 17px/1.2 var(--f)}
.glance .g b{grid-row:span 2;font:600 36px/1 var(--f);letter-spacing:-1px;align-self:center}
.glance .g small{font:var(--small);color:var(--mut)}
.glance a.g:hover span{color:var(--v)}
.topics{grid-column:1/-1}
.topics .bh{display:flex;align-items:baseline;justify-content:space-between;margin:8px 0 12px}
.topics .bh h2{margin:0;font:var(--head);letter-spacing:-.6px}
.topics .bh a{color:var(--v);font-weight:600}
.tlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.tlist a{display:grid;grid-template-columns:minmax(0,1fr) 44px 84px;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eceef6}
.tlist a:hover .tn{color:var(--v)}
.tlist .tn{font:600 16px/1.3 var(--f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlist .tb{height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.tlist .tb i{display:block;height:100%;background:var(--r4);border-radius:3px}
.tlist .tp{font:var(--small);color:var(--mut);text-align:right}
.foot{grid-column:1/-1;margin:0;display:flex;flex-wrap:wrap;gap:8px 28px;font:var(--small)}
.foot a{color:var(--v);font-weight:600}
.foot a:hover{text-decoration:underline}
@media (max-width:1180px){.glance,.topics{grid-column:1/-1}.tlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.head.calm{flex-direction:column;align-items:stretch;gap:16px}.tlist{grid-template-columns:minmax(0,1fr)}.glance .g b{font-size:30px}.tlist a{grid-template-columns:minmax(0,1fr) 56px 84px}}