/* ===== OAT Exam Boost — design system ===== */
:root{
  --ink:#081222; --ink-2:#0E1B2E; --ink-3:#152540;
  --paper:#FBFAF7; --paper-2:#F2F0EA;
  --teal:#17C3B2; --teal-dk:#0F9A8C; --coral:#FF6B4A; --amber:#FFC857;
  --violet:#7B61FF; --sky:#4CC9F0; --pink:#F72585;
  --r-sm:8px; --r:14px; --r-lg:22px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1180px;
}
:root, [data-theme="dark"]{
  --bg:var(--ink); --bg-2:var(--ink-2); --bg-3:var(--ink-3);
  --fg:#EEF3F8; --fg-2:#9FB0C4; --fg-3:#63788F;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --card:rgba(255,255,255,.035); --card-h:rgba(255,255,255,.06);
  --shadow:0 18px 50px -20px rgba(0,0,0,.75);
}
[data-theme="light"]{
  --bg:var(--paper); --bg-2:#fff; --bg-3:var(--paper-2);
  --fg:#0B1626; --fg-2:#495B70; --fg-3:#7C8DA1;
  --line:rgba(8,18,34,.10); --line-2:rgba(8,18,34,.18);
  --card:#fff; --card-h:#fff;
  --shadow:0 14px 40px -18px rgba(8,18,34,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--fg); font-family:var(--ui);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; transition:background .25s,color .25s;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px; border-radius:4px}

h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.08;letter-spacing:-.025em}
h1{font-size:clamp(2.3rem,5.6vw,4.3rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem)}
h3{font-size:1.28rem;letter-spacing:-.015em}
h4{font-size:1.02rem;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--fg-2)}
.dim{color:var(--fg-3)}
.sm{font-size:.86rem}
.xs{font-size:.76rem}
.center{text-align:center}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.row{display:flex;gap:12px;align-items:center}
.row.wrap-r{flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1}
.stack{display:flex;flex-direction:column}
.hide{display:none !important}

/* ---- brand ---- */
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:1.14rem;letter-spacing:-.03em}
.logo .glyph{width:32px;height:32px;flex:none}
.logo b{color:var(--teal)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;border:1px solid var(--line-2);
  background:transparent;cursor:pointer;font-weight:600;font-size:.94rem;
  transition:.16s transform,.16s background,.16s border-color,.16s color;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);background:var(--card-h);border-color:var(--fg-3)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--teal);border-color:var(--teal);color:#04231F}
.btn.primary:hover{background:#1AD8C5;border-color:#1AD8C5}
.btn.coral{background:var(--coral);border-color:var(--coral);color:#2A0A02}
.btn.coral:hover{background:#FF7F62;border-color:#FF7F62}
.btn.ghost{border-color:transparent}
.btn.ghost:hover{border-color:var(--line-2)}
.btn.sm{padding:7px 14px;font-size:.84rem}
.btn.lg{padding:15px 30px;font-size:1.03rem}
.btn.block{width:100%}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}

/* ---- surfaces ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card.pad-lg{padding:28px}
.card.hover:hover{background:var(--card-h);border-color:var(--line-2)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  border:1px solid var(--line-2);font-size:.74rem;font-weight:600;letter-spacing:.02em}
.pill.teal{background:rgba(23,195,178,.13);border-color:rgba(23,195,178,.4);color:var(--teal)}
.pill.coral{background:rgba(255,107,74,.13);border-color:rgba(255,107,74,.4);color:var(--coral)}
.pill.amber{background:rgba(255,200,87,.13);border-color:rgba(255,200,87,.4);color:var(--amber)}
.pill.violet{background:rgba(123,97,255,.14);border-color:rgba(123,97,255,.42);color:var(--violet)}

/* ---- nav ---- */
header.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:26px;height:66px}
.nav-links{display:flex;gap:22px;font-size:.92rem;font-weight:500}
.nav-links a{color:var(--fg-2);transition:color .15s}
.nav-links a:hover,.nav-links a.on{color:var(--fg)}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:transparent;display:grid;place-items:center;cursor:pointer;transition:.15s}
.icon-btn:hover{background:var(--card-h);border-color:var(--line-2)}
.burger{display:none}

/* ---- hero ---- */
.hero{position:relative;padding:76px 0 60px;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-30% -10% auto -10%;height:600px;pointer-events:none;
  background:radial-gradient(48% 55% at 22% 30%,rgba(23,195,178,.20),transparent 70%),
             radial-gradient(42% 50% at 82% 12%,rgba(255,107,74,.16),transparent 70%),
             radial-gradient(38% 44% at 58% 68%,rgba(123,97,255,.13),transparent 70%);
  filter:blur(8px)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center;position:relative}
.hero h1 em{font-style:normal;color:var(--teal);position:relative}
.hero h1 em::after{content:'';position:absolute;left:0;right:0;bottom:.02em;height:.13em;
  background:var(--coral);opacity:.55;border-radius:2px}
.lede{font-size:1.14rem;color:var(--fg-2);max-width:52ch;margin-top:20px}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:44px}
.stat-strip div{background:var(--bg);padding:18px 14px;text-align:center}
.stat-strip .n{font-family:var(--mono);font-size:1.5rem;font-weight:600;color:var(--teal);letter-spacing:-.03em}
.stat-strip .l{font-size:.73rem;color:var(--fg-3);text-transform:uppercase;letter-spacing:.09em;margin-top:3px}

/* mock device */
.mock{background:var(--bg-2);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.mock-bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg-3)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.mock-body{padding:18px}
.spark{display:flex;align-items:flex-end;gap:5px;height:72px;margin-top:12px}
.spark i{flex:1;background:linear-gradient(180deg,var(--teal),rgba(23,195,178,.22));border-radius:3px 3px 0 0;display:block;
  animation:grow .7s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes grow{from{transform:scaleY(.05);opacity:0}to{transform:scaleY(1);opacity:1}}

/* ---- sections ---- */
section.band{padding:76px 0;border-top:1px solid var(--line)}
.eyebrow{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:12px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.feature{padding:24px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);transition:.18s}
.feature:hover{border-color:var(--line-2);transform:translateY(-3px)}
.feature .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px;
  background:rgba(23,195,178,.13);color:var(--teal);font-size:1.15rem}
.feature p{color:var(--fg-2);font-size:.93rem;margin-top:7px}

.quote{padding:22px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.quote p{font-size:.95rem;line-height:1.62}
.quote .who{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.82rem;
  background:linear-gradient(135deg,var(--teal),var(--violet));color:#03201C;flex:none}

/* ---- pricing ---- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.tier{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--card);position:relative;transition:.2s}
.tier.best{border-color:var(--teal);background:linear-gradient(180deg,rgba(23,195,178,.07),transparent 45%)}
.tier .tag{position:absolute;top:-11px;left:28px}
.price{font-family:var(--mono);font-size:2.6rem;font-weight:600;letter-spacing:-.04em;margin:14px 0 2px}
.tier ul{list-style:none;margin:20px 0 24px;display:flex;flex-direction:column;gap:9px}
.tier li{font-size:.9rem;display:flex;gap:9px;align-items:flex-start;color:var(--fg-2)}
.tier li::before{content:'✓';color:var(--teal);font-weight:800;flex:none;line-height:1.5}
.tier li.no{color:var(--fg-3)}
.tier li.no::before{content:'—';color:var(--fg-3)}

/* ---- accordion ---- */
.acc{border-bottom:1px solid var(--line)}
.acc summary{padding:19px 0;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';color:var(--teal);font-size:1.35rem;line-height:1;font-weight:400}
.acc[open] summary::after{content:'–'}
.acc p{padding-bottom:19px;color:var(--fg-2);font-size:.94rem;max-width:76ch}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:52px 0 32px;background:var(--bg-2)}
.f-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px}
footer h5{font-size:.73rem;text-transform:uppercase;letter-spacing:.11em;color:var(--fg-3);margin-bottom:13px;font-weight:700}
footer a{display:block;color:var(--fg-2);font-size:.89rem;padding:3px 0;transition:color .15s}
footer a:hover{color:var(--teal)}

/* ================= APP SHELL ================= */
.app{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 66px)}
.side{border-right:1px solid var(--line);padding:20px 12px;position:sticky;top:66px;height:calc(100vh - 66px);overflow-y:auto}
.side h5{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);margin:18px 10px 7px;font-weight:700}
.side a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:.9rem;
  color:var(--fg-2);font-weight:500;transition:.13s}
.side a:hover{background:var(--card-h);color:var(--fg)}
.side a.on{background:rgba(23,195,178,.13);color:var(--teal);font-weight:600}
.main{padding:30px 32px 70px;min-width:0}

.kpi{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--card)}
.kpi .n{font-family:var(--mono);font-size:1.85rem;font-weight:600;letter-spacing:-.035em}
.kpi .l{font-size:.75rem;color:var(--fg-3);text-transform:uppercase;letter-spacing:.08em}
.kpi .d{font-size:.78rem;margin-top:5px}
.up{color:var(--teal)} .down{color:var(--coral)}

.bar{height:8px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--teal);transition:width .5s cubic-bezier(.2,.9,.3,1)}
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}

table.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
table.tbl th{text-align:left;font-size:.71rem;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-3);
  padding:9px 12px;border-bottom:1px solid var(--line);font-weight:700}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line)}
table.tbl tr:hover td{background:var(--card-h)}

.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;font-size:.76rem;
  border:1px solid var(--line-2);cursor:pointer;user-select:none;transition:.13s;background:transparent}
.chip:hover{border-color:var(--fg-3)}
.chip.on{background:var(--teal);border-color:var(--teal);color:#04231F;font-weight:600}

input.fld,select.fld,textarea.fld{
  width:100%;padding:10px 13px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--bg-2);font-size:.93rem}
input.fld:focus,select.fld:focus{border-color:var(--teal);outline:none}
label.lbl{display:block;font-size:.79rem;font-weight:600;color:var(--fg-2);margin-bottom:6px}

/* qbank / review question rendering */
.qcard{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:24px}
.qstem{font-size:1.03rem;line-height:1.62;margin:14px 0 18px}
.choices{display:flex;flex-direction:column;gap:9px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:11px;
  border:1px solid var(--line-2);cursor:pointer;transition:.13s;background:transparent;text-align:left;width:100%}
.choice:hover{border-color:var(--fg-3);background:var(--card-h)}
.choice .k{font-family:var(--mono);font-weight:600;color:var(--fg-3);flex:none;width:18px}
.choice.sel{border-color:var(--teal);background:rgba(23,195,178,.09)}
.choice.sel .k{color:var(--teal)}
.choice.ok{border-color:var(--teal);background:rgba(23,195,178,.14)}
.choice.bad{border-color:var(--coral);background:rgba(255,107,74,.12)}
.choice.strike{opacity:.42}
.choice.strike .t{text-decoration:line-through}
.exp{margin-top:18px;padding:17px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg-3);font-size:.93rem;line-height:1.68;color:var(--fg-2)}
.exp b,.exp em{color:var(--fg)}

/* flashcards */
.fc{perspective:1400px;height:270px;cursor:pointer}
.fc-in{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,.8,.3,1);transform-style:preserve-3d}
.fc.flip .fc-in{transform:rotateY(180deg)}
.fc-f,.fc-b{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line-2);display:grid;place-items:center;padding:34px;text-align:center;background:var(--card)}
.fc-b{transform:rotateY(180deg);background:linear-gradient(160deg,rgba(23,195,178,.13),var(--bg-2))}

/* ================= PROMETRIC MODE ================= */
.prometric{position:fixed;inset:0;z-index:9999;background:#C0C0C0;color:#000;
  font-family:Tahoma,Verdana,'Segoe UI',sans-serif;font-size:14px;display:flex;flex-direction:column}
.pm-top{background:linear-gradient(180deg,#0A246A,#3A6EA5);color:#fff;padding:5px 12px;
  display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;flex:none}
.pm-sub{background:#D4D0C8;border-bottom:2px solid #808080;padding:5px 12px;display:flex;
  justify-content:space-between;align-items:center;font-size:12.5px;flex:none}
.pm-body{flex:1;overflow:auto;background:#fff;padding:24px 30px}
.pm-body.split{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0}
.pm-pass{padding:22px 26px;border-right:2px solid #808080;overflow:auto;line-height:1.72;font-size:13.5px}
.pm-qs{padding:22px 26px;overflow:auto}
.pm-foot{background:#D4D0C8;border-top:2px solid #fff;padding:7px 12px;display:flex;
  justify-content:space-between;gap:8px;flex:none;box-shadow:inset 0 2px 0 #808080}
.win-btn{background:#D4D0C8;border:2px outset #F0F0F0;padding:5px 15px;font-size:12.5px;
  font-family:inherit;cursor:pointer;min-width:82px}
.win-btn:active:not(:disabled){border-style:inset}
.win-btn:disabled{color:#808080;cursor:default}
.win-btn.on{border-style:inset;background:#BFBFBF;font-weight:700}
.pm-q{font-size:14px;line-height:1.62;margin-bottom:18px}
.pm-choice{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;cursor:pointer;font-size:13.5px;line-height:1.5}
.pm-choice:hover{background:#E8E8E8}
.pm-choice input{margin-top:4px;flex:none}
.pm-choice.struck span.t{text-decoration:line-through;color:#777}
.pm-timer{font-family:var(--mono);font-weight:700;letter-spacing:.04em}
.pm-timer.warn{color:#FFD700}
.pm-timer.crit{color:#FF6B6B;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
mark.hl{background:#FFFF00;color:#000}
.pm-review td{border:1px solid #808080;padding:5px 10px;font-size:12.5px}
.pm-review th{border:1px solid #808080;padding:5px 10px;background:#D4D0C8;font-size:12px;text-align:left}
.calc{position:fixed;width:220px;background:#D4D0C8;border:2px outset #F0F0F0;z-index:10001;box-shadow:4px 4px 12px rgba(0,0,0,.4)}
.calc-h{background:linear-gradient(180deg,#0A246A,#3A6EA5);color:#fff;padding:3px 8px;font-size:12px;
  display:flex;justify-content:space-between;cursor:move;user-select:none}
.calc-d{background:#fff;border:2px inset #ccc;margin:7px;padding:7px 9px;text-align:right;
  font-family:var(--mono);font-size:17px;min-height:32px;overflow:hidden}
.calc-g{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0 7px 7px}
.calc-g button{padding:9px 0;border:2px outset #F0F0F0;background:#D4D0C8;cursor:pointer;font-size:13px;font-family:inherit}
.calc-g button:active{border-style:inset}

/* score report */
.score-hero{background:linear-gradient(135deg,rgba(23,195,178,.14),rgba(123,97,255,.10));
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:34px;text-align:center}
.big-score{font-family:var(--mono);font-size:4.6rem;font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--teal)}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);
  background:var(--ink-2);color:#EEF3F8;border:1px solid var(--line-2);padding:12px 20px;border-radius:999px;
  z-index:10050;font-size:.9rem;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.9,.3,1);pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}

/* modal */
.modal{position:fixed;inset:0;z-index:9000;background:rgba(4,10,20,.72);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:22px}
.modal-in{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:30px;max-width:440px;width:100%;box-shadow:var(--shadow);max-height:88vh;overflow:auto}

.prose{max-width:74ch}
.prose h2{margin:34px 0 12px;font-size:1.6rem}
.prose h3{margin:26px 0 9px}
.prose p{margin:12px 0;color:var(--fg-2)}
.prose ul,.prose ol{margin:12px 0 12px 22px;color:var(--fg-2)}
.prose li{margin:5px 0}
.prose strong{color:var(--fg)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--bg-3);padding:2px 6px;border-radius:5px}

.sheet-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.sheet-row .v{font-family:var(--mono);color:var(--teal);text-align:right;flex:none;max-width:52%}

/* ===================================================================
   MOBILE
   Base rules first (apply everywhere), then breakpoints.
   =================================================================== */

/* never allow sideways scroll of the page itself */
html,body{overflow-x:hidden;max-width:100%}
img,svg,video,iframe{max-width:100%}
/* long unbroken strings (formulas, ids, urls) must not blow out the layout */
.qstem,.exp,.prose,.sheet-row,.quote p,td,summary,h1,h2,h3,h4{overflow-wrap:anywhere}
/* tables scroll inside their card instead of stretching the page */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* iOS zooms the page when a focused input is under 16px — never let that happen */
input.fld,select.fld,textarea.fld{font-size:16px}

/* mobile app navigation — hidden on desktop, replaces the sidebar below 960px */
.tabbar{display:none}
.navsheet{display:none}

@media (max-width:960px){
  /* ---- layout ---- */
  .hero-grid,.tiers,.f-grid{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:0 18px}
  section.band{padding:56px 0}
  .hero{padding:48px 0 40px}
  .card.pad-lg{padding:20px}
  .stat-strip{grid-template-columns:repeat(2,1fr)}

  /* ---- top nav ---- */
  .nav-links{display:none}
  .burger{display:grid}
  .nav-in{gap:12px;height:60px}
  .logo span{font-size:1rem}

  /* ---- app shell: sidebar becomes a bottom tab bar + slide-up sheet ---- */
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:18px 16px calc(86px + env(safe-area-inset-bottom))}

  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(18px);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:56px;padding:7px 2px;font-size:.63rem;font-weight:600;color:var(--fg-3);
    letter-spacing:.01em;text-align:center;transition:color .15s;background:none;border:none;cursor:pointer}
  .tabbar .ti{font-size:1.15rem;line-height:1}
  .tabbar a.on{color:var(--teal)}
  .tabbar a:active,.tabbar button:active{background:var(--card-h)}

  .navsheet{display:block;position:fixed;inset:0;z-index:80;background:rgba(4,10,20,.6);
    backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .22s}
  .navsheet.open{opacity:1;pointer-events:auto}
  .navsheet-in{position:absolute;left:0;right:0;bottom:0;background:var(--bg-2);
    border-top:1px solid var(--line-2);border-radius:20px 20px 0 0;
    padding:10px 14px calc(20px + env(safe-area-inset-bottom));max-height:82dvh;overflow-y:auto;
    transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.9,.3,1)}
  .navsheet.open .navsheet-in{transform:translateY(0)}
  .navsheet-grab{width:38px;height:4px;border-radius:99px;background:var(--line-2);margin:6px auto 14px}
  .navsheet h5{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);
    margin:16px 8px 6px;font-weight:700}
  .navsheet a{display:flex;align-items:center;gap:11px;padding:13px 12px;border-radius:11px;
    font-size:.95rem;color:var(--fg-2);font-weight:500;min-height:48px}
  .navsheet a.on{background:rgba(23,195,178,.13);color:var(--teal);font-weight:600}

  /* every data table lives in a card — let the card scroll rather than the page */
  .card:has(table.tbl){overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl th,table.tbl td{white-space:nowrap}
  table.tbl td:first-child,table.tbl td:nth-child(4){white-space:normal;min-width:120px}

  /* ---- comfortable touch targets ---- */
  .btn{padding:12px 20px;min-height:44px}
  .btn.sm{padding:9px 15px;min-height:38px}
  .chip{padding:9px 13px;min-height:38px}
  .choice{padding:15px}
  .icon-btn{width:40px;height:40px}
  .acc summary{padding:17px 0;min-height:52px}
  footer a{padding:7px 0}

  /* ---- Prometric Mode ---- */
  .pm-top{font-size:11.5px;padding:6px 9px;flex-wrap:wrap;gap:2px 10px;line-height:1.35}
  .pm-top span:nth-child(2){order:3;flex-basis:100%;font-weight:400;opacity:.9}
  .pm-sub{font-size:11.5px;padding:5px 9px}
  .pm-body{padding:16px 14px}
  .pm-tabs{display:flex;background:#D4D0C8;border-bottom:2px solid #808080;flex:none}
  .pm-tabs button{flex:1;min-height:42px;font-size:12.5px}
  .pm-body.split{grid-template-columns:1fr;overflow:hidden;min-height:0}
  .pm-pass{border-right:none;padding:16px 14px}
  .pm-qs{padding:16px 14px}
  /* one pane at a time on a phone — stacking makes the passage unusable */
  .pm-body.split[data-tab="q"] .pm-pass{display:none}
  .pm-body.split[data-tab="p"] .pm-qs{display:none}
  .pm-choice{padding:11px 8px;min-height:46px;font-size:14px}
  .pm-q{font-size:14.5px}
  .pm-foot{flex-direction:column;gap:6px;padding:8px 9px calc(8px + env(safe-area-inset-bottom))}
  .pm-foot .row{width:100%;gap:5px}
  .win-btn{min-width:0;flex:1;padding:11px 4px;font-size:12px;min-height:42px}
  /* calculator becomes a bottom sheet instead of a floating window */
  .calc{position:fixed;left:0;right:0;bottom:0;top:auto !important;width:100%;
    border-radius:14px 14px 0 0;border-width:2px 0 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .calc-h{cursor:default;padding:10px 12px;font-size:13px}
  .calc-g button{padding:15px 0;font-size:16px}
  .calc-d{font-size:20px;min-height:38px}
  .pm-review{font-size:12px}

  /* ---- modals become bottom sheets ---- */
  .modal{padding:0;align-items:flex-end}
  .modal-in{max-width:100% !important;width:100%;border-radius:20px 20px 0 0;
    max-height:92dvh;padding:22px 18px calc(22px + env(safe-area-inset-bottom))}

  /* ---- misc ---- */
  .fc{height:230px}
  .big-score{font-size:3.4rem}
  .score-hero{padding:24px 18px}
  .score-hero .row{gap:16px !important;flex-wrap:wrap;justify-content:center}
  .kpi .n{font-size:1.6rem}
  .price{font-size:2.2rem}
}

@media (max-width:600px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  section.band{padding:44px 0}
  h1{font-size:clamp(2rem,8.5vw,2.8rem)}
  h2{font-size:clamp(1.5rem,6vw,2rem)}
  .lede{font-size:1.02rem}
  .tabbar a,.tabbar button{font-size:.58rem}
  .row.wrap-r{gap:8px}
  .btn.lg{padding:13px 22px;font-size:.95rem;width:100%}
  .hero .row.wrap-r .btn{width:100%}
  .big-score{font-size:2.9rem}
  .fc{height:210px}
  .fc-f,.fc-b{padding:24px 18px}
  .sheet-row{flex-direction:column;gap:4px}
  .sheet-row .v{text-align:left;max-width:100%}
  .quote{padding:18px}
  .tier{padding:22px}
  .modal-in{padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
}

/* short landscape phones: don't let exam chrome eat the question */
@media (max-height:520px) and (orientation:landscape){
  .pm-foot{flex-direction:row;flex-wrap:wrap}
  .pm-top span:nth-child(2){display:none}
  .fc{height:170px}
}

/* coarse pointers: drop hover-dependent affordances */
@media (hover:none){
  .btn:hover,.card.hover:hover,.feature:hover{transform:none}
  .choice:hover,.pm-choice:hover{background:transparent}
}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

@media print{
  header.nav,footer,.tabbar,.side,.navsheet,.btn,.chip{display:none !important}
  body{background:#fff;color:#000}
  .card{border:1px solid #ccc;break-inside:avoid}
}