/*
VOICE   calm, exact, study-desk serious; the confidence of a well-kept case file
IDEA    the exam desk: a question on the left, the paperwork beside it
PICTURE the real app at a real practical-exercise question, desktop with phone in front
COLOUR  Clearance Navy band, white paper, Harbor Blue for action, Cleared Green only for "correct"
TYPE    IBM Plex Sans (the app's own face), Plex Mono for figures and citations
LAYOUT  navy hero band with the picture breaking out below it; facts strip; alternating rows; honest fine print
*/
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light dark;
  --ground:light-dark(#F3F5F8,#0D1522);
  --surface:light-dark(#FFFFFF,#142033);
  --sunken:light-dark(#EEF1F5,#0F1A2A);
  --line:light-dark(#DCE2EA,#26344A);
  --ink:light-dark(#0E1A2B,#E7ECF3);
  --muted:light-dark(#4F5B6B,#A3B0C2);
  --brand:light-dark(#0F2A4A,#1A3358);
  --action:light-dark(#1F56C8,#8DB2FF);
  --on-action:light-dark(#FFFFFF,#0D1522);
  --action-tint:light-dark(#E8EFFC,#1B2D4D);
  --pass:light-dark(#1B7046,#5CCB91);
  --pass-tint:light-dark(#E4F4EB,#133325);
  --flag:light-dark(#A2510A,#F2B75A);
  --flag-tint:light-dark(#FDF1E2,#3A2A12);
  --wrap:1180px;
}
:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:var(--action)}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 max(5vw,16px)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
h1,h2,h3{line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(34px,5vw,52px);font-weight:700}
h2{font-size:clamp(28px,3.4vw,38px);font-weight:700}
h3{font-size:20px;font-weight:600;letter-spacing:0}
p{margin:0}

/* header */
.top{background:#0F2A4A;color:#fff}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:20px}
.brand img{width:36px;height:36px;border-radius:10px}
.brand b{color:#5CCB91;font-weight:700}
.top nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.top nav a{color:#fff;opacity:.85;text-decoration:none;font-weight:500;font-size:15px;padding:10px 12px;border-radius:10px}
.top nav a:hover,.top nav a:focus-visible{opacity:1;background:rgba(255,255,255,.1)}
.top nav a.cta{opacity:1;background:#fff;color:#0F2A4A;font-weight:600}

/* hero */
.hero{background:#0F2A4A;color:#fff;padding:clamp(36px,6vw,72px) 0 0}
.hero .wrap{display:grid;gap:28px}
.hero p.lede{font-size:clamp(18px,2vw,20px);color:#D8E2F0;max-width:58ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;font-weight:600;font-size:16px;text-decoration:none;border:2px solid transparent}
.btn.primary{background:#5CCB91;color:#0D1522}
.btn.ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn:focus-visible{outline:3px solid #8DB2FF;outline-offset:2px}
.fine{font-size:14px;color:#A9B8CC}
.stage{position:relative;padding-top:clamp(20px,4vw,40px);padding-bottom:clamp(40px,8vw,90px)}
.desk{border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);background:#fff;margin-bottom:-1px}
.desk .bar{height:30px;background:#E7ECF3;display:flex;align-items:center;gap:6px;padding:0 12px}
.desk .bar i{width:10px;height:10px;border-radius:50%;background:#C3CCD8}
.phone{position:absolute;right:max(2vw,8px);bottom:clamp(-30px,-3vw,-10px);width:clamp(150px,22vw,250px);border-radius:28px;border:8px solid #0D1522;overflow:hidden;box-shadow:0 24px 50px -18px rgba(0,0,0,.55);background:#fff}
.stage-wrap{background:linear-gradient(#0F2A4A 0 62%,var(--ground) 62%)}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:clamp(48px,7vw,80px) 0 8px}
.fact b{display:block;font-size:clamp(30px,4vw,44px);font-weight:700;line-height:1;letter-spacing:-.02em}
.fact span{color:var(--muted);font-size:15px}

section{padding:clamp(40px,6vw,80px) 0}
.kicker{color:var(--muted);font-size:15px;margin-bottom:10px;font-weight:500}
.intro{max-width:62ch;margin-top:14px;color:var(--muted)}

/* features */
.rows{display:grid;gap:clamp(28px,4vw,44px);margin-top:36px}
.row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px}
.ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--action-tint);color:var(--action)}
.ic svg{width:28px;height:28px}
.row p{color:var(--muted);margin-top:6px;max-width:62ch}
.twocol{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,64px);align-items:start}

/* sample explanation */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.choice{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:10px}
.choice .k{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-weight:700;background:var(--sunken)}
.choice.ok{border-color:var(--pass);background:var(--pass-tint)}
.choice.ok .k{background:var(--pass);color:var(--surface)}
.choice.bad{border-color:#B3261E;background:light-dark(#FCEBEA,#3B1A19)}
.choice.bad .k{background:#B3261E;color:#fff}
.mis{margin-top:14px;padding:14px;border-radius:10px;background:light-dark(#FCEBEA,#3B1A19)}
.mis b{color:light-dark(#B3261E,#FF8A80)}
.cite{margin-top:12px;font-size:13px;color:var(--muted)}
.label{font-size:13px;color:var(--muted)}

/* law watch */
.law{background:var(--surface);border-block:1px solid var(--line)}
.alert{border:1.5px solid var(--flag);background:var(--flag-tint);border-radius:14px;padding:20px 22px}
.alert .when{color:var(--flag);font-weight:600;font-size:14px}
.alert h3{margin-top:6px}
.alert p{margin-top:8px}
.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px;counter-reset:s}
.steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;counter-increment:s}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--action-tint);color:var(--action);font-weight:700}

/* honest */
.checks{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px}
.checks li{padding-left:30px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:6px;width:18px;height:10px;border-left:3px solid var(--pass);border-bottom:3px solid var(--pass);transform:rotate(-45deg)}
.checks b{display:block}
.checks span{color:var(--muted);font-size:16px}

/* exam facts */
table{width:100%;border-collapse:collapse;margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{width:34%;font-weight:600}
tr:last-child th,tr:last-child td{border-bottom:0}
td{color:var(--muted)}

.closing{background:#0F2A4A;color:#fff;text-align:left}
.closing p{color:#D8E2F0;margin-top:12px;max-width:56ch}

footer{padding:36px 0 48px;font-size:14px;color:var(--muted)}
footer .wrap{display:grid;gap:10px}
footer nav{display:flex;gap:18px;flex-wrap:wrap}

/* prose pages */
.prose{max-width:72ch;padding:clamp(32px,5vw,64px) 0}
.prose h1{font-size:clamp(30px,4vw,40px)}
.prose h2{font-size:22px;margin-top:34px}
.prose p,.prose li{color:var(--ink);margin-top:12px}
.prose .updated{color:var(--muted);margin-top:10px}

@media(max-width:860px){
  .twocol{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .checks{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
  .top nav a:not(.cta){display:none}
  .phone{width:38vw;border-width:5px;border-radius:20px;right:8px}
  .row{grid-template-columns:44px minmax(0,1fr)}
  .ic{width:44px;height:44px;border-radius:12px}
  th,td{display:block;width:100%;padding:10px 16px}
  th{padding-bottom:0;border-bottom:0}
}

/* study guides */
.topic .lede-dark{font-size:19px;color:var(--muted);margin-top:12px}
.stats{list-style:none;padding:0;margin:22px 0 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stats li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0}
.stats b{display:block;font-size:24px;line-height:1.15}
.stats b.mono{font-size:14px;line-height:1.4}
.stats span{color:var(--muted);font-size:14px}
.trap{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--flag);border-radius:0 14px 14px 0;padding:16px 18px;margin-top:14px}
.trap h3{font-size:18px}
.trap p{margin-top:8px}
.trap .belief{font-style:italic;color:var(--flag)}
.trap .tip{background:var(--pass-tint);border-radius:8px;padding:8px 10px}
.prose .sheet{margin-top:12px}
details{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font-weight:600;color:var(--action);min-height:44px;display:flex;align-items:center}
.why{margin-top:8px}
.why.ok b{color:var(--pass)}
.cta-box{margin-top:40px;background:#0F2A4A;color:#fff;border-radius:14px;padding:24px}
.cta-box h2{margin-top:0;color:#fff}
.cta-box p{color:#D8E2F0}
.cta-box .btn{margin-top:14px}
.topic-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:2px}
.topic-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line);margin:0}
.topic-list a{font-weight:600;text-decoration:none}
.topic-list span{color:var(--muted);font-size:15px}
@media(max-width:600px){.stats{grid-template-columns:minmax(0,1fr)}}

/* Landing page: SEO sections (FAQ, topics, sources) and small helpers */
.skip{position:absolute;left:-999px;top:8px;z-index:10;background:#fff;color:#0F2A4A;padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{color:#9FD8B8;font-weight:600;font-size:15px;letter-spacing:.02em;margin:0 0 -14px}
figure.desk,figure.phone{margin:0}
ul.facts{list-style:none;margin:0}
ul.facts li{margin:0}
.topic-grid{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.topic-grid li{margin:0}
.topic-grid a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;font-weight:600;min-height:44px}
.topic-grid a:hover,.topic-grid a:focus-visible{border-color:var(--action);background:var(--action-tint)}
.faq details,.faq h2{max-width:820px}
.faq h2{margin-bottom:18px}
.faq details{margin-top:0;padding:4px 0;border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{color:inherit;padding:10px 0}
.faq summary h3{font-size:18px;font-weight:600;margin:0}
.faq details p{margin:0 0 16px;color:var(--muted);max-width:70ch}
.small-h{font-size:20px}
.sources{font-size:14px;color:var(--muted);padding-left:20px}
.sources li{margin:6px 0}
.note{font-size:14px;color:var(--muted)}
.closing-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.closing .tix{width:clamp(140px,22vw,240px);height:auto}