/*
 * CritiCall Map Reading Test LP — /criticall-map-reading-test (WON-154).
 * Ported from mockups/criticall-map-reading-test.html (built 2026-08-13,
 * geometry + fact base pass 2026-08-14), scoped under #cmr-lp; body-level
 * rules target body.pt-cmr-lp. Design tokens are verbatim fireteam/ctt
 * lineage (Onest, lime/teal) — identical to criticall-typing-lp.css, because
 * the two are sister module pages and must not drift.
 *
 * Do NOT re-add a sticky nav: the bottom bar is this page's one sticky
 * element (§16), and it reveals only once the hero is behind the visitor
 * (§18 house standard, appended at the foot of this file).
 *
 * The .gate block from the mockup is deliberately ABSENT. This page ships
 * with no email gate (David's call 2026-08-22, matching the live sister
 * /criticall-typing-test). If a gate is ever added, port the block back from
 * the mockup rather than reinventing it.
 *
 * Page-specific additions over the shared lineage: .modmap/.modlink (module
 * cross-link row), .keyfact (section-by-section grading callout),
 * .mapwrap/.rules/.rule-i (the on-page map preview and its legend).
 */
/* ============================================================
   CRO 13: ONE unified sans-serif for all headings.
   No decorative or italic serif in section titles anywhere.
   Tokens ported verbatim from fireteam-course-2026.html.
   ============================================================ */
#cmr-lp,
body.pt-cmr-lp{
  --teal:#0089AC;--teal-dk:#145976;--lime:#9DD64F;--lime-dk:#7FBF33;--lime-soft:#D9F89F;
  --amber:#F69C08;--red:#DC2626;--green:#16A34A;--trust:#00b67a;
  --ink:#0A0E14;--slate:#334155;--ink-2:#1F252E;--ink-3:#4A525D;--ink-4:#8A929D;
  --bg:#fff;--bg-soft:#F7F8FA;--rule:#E9ECF1;--rule-2:#DDE2E9;
  --dark:#0B1116;--dark-2:#131C26;--dark-ink-2:rgba(243,239,230,.74);--dark-ink-3:rgba(243,239,230,.44);
  --sans:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-sm:0 1px 2px rgba(10,14,20,.05),0 2px 8px rgba(10,14,20,.05);
  --sh-md:0 4px 14px rgba(10,14,20,.08),0 14px 36px rgba(10,14,20,.07);
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-pill:999px;
}
#cmr-lp *,#cmr-lp *::before,#cmr-lp *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.pt-cmr-lp{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;letter-spacing:-.004em;padding-bottom:84px}
#cmr-lp a{color:inherit;text-decoration:none}
#cmr-lp button{font-family:inherit;cursor:pointer}
#cmr-lp h1,#cmr-lp h2,#cmr-lp h3,#cmr-lp h4{font-family:var(--sans);font-weight:800;letter-spacing:-.022em;line-height:1.13;color:var(--ink)}
#cmr-lp h1{font-size:clamp(31px,4.5vw,49px)}
#cmr-lp h2{font-size:clamp(24px,3.2vw,35px)}
#cmr-lp h3{font-size:21px}
#cmr-lp h4{font-size:17px}
#cmr-lp sup{font-size:.62em;font-weight:700;color:var(--teal)}
#cmr-lp .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
#cmr-lp section{padding:62px 0}

/* section header block: functional tag, bold H2, muted medium subhead (CRO 13/14) */
#cmr-lp .sh{max-width:820px;margin-bottom:34px}
#cmr-lp .sh.center{margin-left:auto;margin-right:auto;text-align:center}
#cmr-lp .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.085em;text-transform:uppercase;
  color:var(--slate);background:var(--bg-soft);border:1px solid var(--rule-2);border-radius:var(--r-pill);
  padding:6px 14px;margin-bottom:15px}
#cmr-lp .tag.on-dark{color:var(--lime);background:rgba(157,214,79,.09);border-color:rgba(157,214,79,.26)}
#cmr-lp .sh h2+.sub,#cmr-lp .sub{font-size:17px;font-weight:500;color:var(--ink-3);line-height:1.55;margin-top:13px}
#cmr-lp .sub.on-dark{color:var(--dark-ink-2)}
#cmr-lp .hl{color:var(--teal-dk)}
#cmr-lp section.dark{background:var(--dark)}
#cmr-lp section.dark h2,#cmr-lp section.dark h3,#cmr-lp section.dark h4{color:#fff}
#cmr-lp section.dark p{color:var(--dark-ink-2)}

/* buttons */
#cmr-lp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15.5px;
  border:0;border-radius:var(--r-sm);padding:14px 26px;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
#cmr-lp .btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 3px 0 var(--lime-dk)}
#cmr-lp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--lime-dk),var(--sh-md)}
#cmr-lp .btn-dark{background:var(--ink);color:#fff}
#cmr-lp .btn-dark:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
/* CRO 03: secondary is a ghost button, never a second solid primary */
#cmr-lp .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule-2)}
#cmr-lp .btn-ghost:hover{border-color:var(--ink)}
#cmr-lp .btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.3)}
#cmr-lp .btn-lg{padding:17px 34px;font-size:16.5px;border-radius:12px}
/* 44px TAP-TARGET FLOOR. §16 asks for 44px minimum and the base .btn measured
   40px on mobile, so the floor goes on the class rather than on the
   instances: a new button variant cannot regress under it. */
#cmr-lp .btn{min-height:44px}
#cmr-lp .btn-sm{padding:10px 18px;font-size:14px}
#cmr-lp .btn-block{width:100%}

/* CRO 04: ONE sticky element on the page, and it is the bottom bar, not the
   nav. The nav keeps its links (worth having on a keyword lander for internal
   linking), it just does not follow the visitor down the page. */
#cmr-lp nav{position:static;z-index:200;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule)}
#cmr-lp .nav-in{max-width:1180px;margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:26px}
#cmr-lp .logo{font-weight:800;font-size:19px;letter-spacing:-.03em}
#cmr-lp .logo .g{color:var(--lime-dk)}
#cmr-lp .nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:600;color:var(--ink-3)}
#cmr-lp .nav-links a:hover{color:var(--teal)}
#cmr-lp .nav-sp{flex:1}
@media(max-width:860px){#cmr-lp .nav-links{display:none}}

/* independence line: one sentence, no button shapes (CRO 05) */
#cmr-lp .indep{background:var(--bg-soft);border-bottom:1px solid var(--rule);text-align:center;
  font-size:12.5px;color:var(--ink-4);padding:8px 20px}

/* HERO: CRO 01 / 02 / 03 */
#cmr-lp .hero{background:linear-gradient(180deg,#F3FAFC 0%,#fff 100%);border-bottom:1px solid var(--rule)}
#cmr-lp .hero-in{max-width:1180px;margin:0 auto;padding:46px 28px 44px}
#cmr-lp .hero h1{max-width:19ch}
#cmr-lp .hero .sub{max-width:62ch;font-size:18px;margin-top:15px}
#cmr-lp .datesel{margin:26px 0 0;max-width:760px}
#cmr-lp .datesel .lbl{font-size:13.5px;font-weight:800;color:var(--ink-3);margin-bottom:10px}
#cmr-lp .chips{display:flex;gap:10px;flex-wrap:wrap}
#cmr-lp .chip{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-sm);padding:10px 16px;
  font-size:14.5px;font-weight:700;color:var(--ink-2);text-align:left;line-height:1.25}
#cmr-lp .chip .u{display:block;font-size:11.5px;font-weight:700;color:var(--ink-4);letter-spacing:.04em;
  text-transform:uppercase;margin-top:3px}
#cmr-lp .chip:hover{border-color:var(--teal)}
#cmr-lp .chip.on{border-color:var(--teal);background:#F2FAFC;box-shadow:0 3px 0 var(--teal-dk)}
#cmr-lp .chip.on .u{color:var(--teal-dk)}
#cmr-lp .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
#cmr-lp .pathline{min-height:22px;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--teal-dk);
  opacity:0;transform:translateY(4px);transition:.25s var(--ease);max-width:66ch}
#cmr-lp .pathline.show{opacity:1;transform:none}
/* CRO 02: ONE consolidated trust line, clickable, not a decorative pill */
#cmr-lp .trustline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;
  font-size:14px;color:var(--ink-3);font-weight:600}
#cmr-lp .trustline .tpmini{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink-2);
  border-bottom:1px solid var(--rule-2);padding-bottom:2px}
#cmr-lp .trustline .tpmini:hover{border-color:var(--trust);color:var(--trust)}

/* ===== FIRST-VIEWPORT HEIGHT BUDGET =====
   Both external CRO audits raised this: "everything is stretched vertically,
   pushing the actual call to action buttons low on the page. On a laptop
   screen, the two critical buttons might be cut off entirely."
   1366x768 is the most common desktop resolution, leaving about 657px of
   usable viewport. The hero is correct at 900px and fails at 657px, so
   compress on viewport HEIGHT, not width.
   Asserted by landing-page-standard.md §16 at 1366x657. */
@media (max-height:830px){
  #cmr-lp .hero-in{padding:24px 28px 22px}
  #cmr-lp .hero h1{font-size:clamp(29px,3.1vw,37px);line-height:1.1;max-width:30ch}
  #cmr-lp .hero .sub{font-size:16px;margin-top:10px;max-width:76ch}
  #cmr-lp .datesel{margin-top:16px}
  #cmr-lp .datesel .lbl{margin-bottom:7px}
  #cmr-lp .hero-cta{margin-top:16px}
  #cmr-lp .pathline{margin-top:10px}
  /* the 44px tap-target min-height on .tpmini adds ~19px of box height,
     so the trust line's own margin comes down to pay for it. */
  #cmr-lp .trustline{margin-top:2px}
}

/* ===== TAP TARGETS ON THE INLINE TEXT LINKS =====
   §16 asks for 44px minimum. These stay text links, never competing buttons
   (§5), so padding grows the hit area only and the type is untouched. */
#cmr-lp a.seelink,#cmr-lp .trustline .tpmini{
  display:inline-flex;align-items:center;min-height:44px}
#cmr-lp .trustline .stars{color:var(--trust);letter-spacing:1px}
#cmr-lp .trustline .dot{width:4px;height:4px;border-radius:50%;background:var(--rule-2)}
#cmr-lp .trustline b{color:var(--ink)}

/* grids + cards */
#cmr-lp .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#cmr-lp .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:880px){#cmr-lp .grid2,#cmr-lp .grid3{grid-template-columns:1fr}}
#cmr-lp .card{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:24px}
#cmr-lp .card .n{font-size:30px;font-weight:800;color:var(--teal-dk);line-height:1;margin-bottom:9px}
#cmr-lp .card h4{margin-bottom:7px}
#cmr-lp .card p{font-size:14.8px;color:var(--ink-3);line-height:1.6}
#cmr-lp .card-d{background:var(--dark-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:24px}
#cmr-lp .card-d .lbl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lime);margin-bottom:9px}
#cmr-lp .card-d p{font-size:14.8px;color:var(--dark-ink-2);line-height:1.6}
#cmr-lp .card-d .hl{color:#fff;font-weight:700}

/* phases */
#cmr-lp .phases{display:grid;gap:14px;max-width:900px}
#cmr-lp .phase{display:flex;gap:16px;align-items:flex-start;background:var(--bg-soft);
  border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:20px 22px}
#cmr-lp .phase .i{flex:0 0 34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
#cmr-lp .phase h4{margin-bottom:5px}
#cmr-lp .phase p{font-size:14.8px;line-height:1.6}

/* pricing */
#cmr-lp .plan{background:#fff;border:2px solid var(--ink);border-radius:var(--r-lg);padding:30px 28px;
  max-width:540px;margin:0 auto;position:relative;box-shadow:var(--sh-md)}
#cmr-lp .plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 15px;border-radius:var(--r-pill)}
#cmr-lp .plan .win{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);text-align:center}
#cmr-lp .plan h3{text-align:center;margin-top:6px}
#cmr-lp .plan .price{font-size:44px;font-weight:800;text-align:center;line-height:1.1;margin:10px 0 3px}
#cmr-lp .plan .pn{text-align:center;font-size:13px;color:var(--ink-4);font-weight:600}
#cmr-lp .plan ul{list-style:none;margin:20px 0 22px}
#cmr-lp .plan li{font-size:14.8px;color:var(--ink-2);padding:8px 0 8px 27px;position:relative;border-bottom:1px solid var(--rule)}
#cmr-lp .plan li:last-child{border-bottom:0}
#cmr-lp .plan li::before{content:"\2713";position:absolute;left:0;color:var(--lime-dk);font-weight:800}
#cmr-lp .guarantee{max-width:700px;margin:24px auto 0;text-align:center;font-size:14.5px;color:var(--ink-3);line-height:1.6}
#cmr-lp .guarantee b{color:var(--ink)}

/* expert */
#cmr-lp .about{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1.5px solid var(--rule-2);
  border-radius:var(--r-md);padding:24px;max-width:740px}
#cmr-lp .avatar{flex:0 0 58px;height:58px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;
  font-size:19px;display:flex;align-items:center;justify-content:center}
#cmr-lp .about .cred{font-size:13px;color:var(--ink-4);font-weight:700;margin:3px 0 9px}
#cmr-lp .about p{font-size:14.8px;color:var(--ink-3);line-height:1.6}

/* faq */
#cmr-lp .faq{max-width:820px}
#cmr-lp .fq{border-bottom:1px solid var(--rule);padding:18px 0}
#cmr-lp .fq summary{font-weight:800;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
#cmr-lp .fq summary::-webkit-details-marker{display:none}
#cmr-lp .fq summary::after{content:"+";color:var(--teal);font-size:22px;line-height:1}
#cmr-lp .fq[open] summary::after{content:"\2013"}
#cmr-lp .fq p{margin-top:11px;font-size:15px;color:var(--ink-3);line-height:1.65}

#cmr-lp footer{background:var(--dark);color:var(--dark-ink-3);padding:44px 0 36px;font-size:13.5px;line-height:1.65}
#cmr-lp footer .src{background:var(--dark-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);
  padding:20px 22px;margin-bottom:20px;color:var(--dark-ink-2);font-size:12.8px}
#cmr-lp footer .src b{color:#fff}
#cmr-lp footer .src a{color:var(--lime);text-decoration:underline;text-underline-offset:2px}
#cmr-lp footer p{color:var(--dark-ink-3)}

/* CRO 06 / CRO 07: sticky bar: no price, high-contrast free CTA, See Pricing as a link */
#cmr-lp .sticky{position:fixed;left:0;right:0;bottom:0;z-index:190;background:var(--dark);
  border-top:1px solid rgba(255,255,255,.12);padding:12px 0}
#cmr-lp .sticky .in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px}
#cmr-lp .sticky .txt{color:#fff;font-size:15.5px;font-weight:700}
#cmr-lp .sticky .txt small{display:block;font-weight:400;font-size:12.5px;color:var(--dark-ink-3);margin-top:2px}
#cmr-lp .sticky .sp{flex:1}
#cmr-lp .sticky .seelink{color:#fff;font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}
#cmr-lp .sticky .seelink:hover{border-color:var(--lime);color:var(--lime)}
@media(max-width:760px){#cmr-lp .sticky .txt{display:none}#cmr-lp .sticky .in{justify-content:center}}

/* ============ MODALS ============ */
#cmr-lp .ov{position:fixed;inset:0;background:rgba(10,14,20,.62);backdrop-filter:blur(3px);z-index:300;
  display:none;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow-y:auto}
#cmr-lp .ov.on{display:flex}
#cmr-lp .panel{background:#fff;border-radius:var(--r-lg);width:100%;max-width:700px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.3)}
#cmr-lp .pbar{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--rule);
  background:var(--bg-soft)}
#cmr-lp .pbar .lbl{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
#cmr-lp .pbar .qn{font-size:13px;font-weight:700;color:var(--ink-3)}
#cmr-lp .pbar .sp{flex:1}
#cmr-lp .pbar .clock{font-weight:800;font-variant-numeric:tabular-nums;font-size:15px;color:var(--teal-dk);
  background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-pill);padding:5px 13px}
#cmr-lp .pbar .clock.warn{color:var(--amber);border-color:var(--amber)}
#cmr-lp .pbar .clock.crit{color:var(--red);border-color:var(--red)}
#cmr-lp .pbar .x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink-4);padding:0 4px;
  min-width:44px;min-height:44px}
#cmr-lp .prog{height:4px;background:var(--rule)}
#cmr-lp .prog i{display:block;height:100%;background:var(--teal);transition:width .25s var(--ease)}
#cmr-lp .pbody{padding:22px;max-height:76vh;overflow-y:auto}

/* CRO 09 / CRO 10: selector: ONE title, instant persona guidance, standardised table */
#cmr-lp .selhead{text-align:center;margin-bottom:20px}
#cmr-lp .selhead h3{font-size:20px}
#cmr-lp .selhead p{font-size:14.5px;color:var(--ink-3);margin-top:7px}
#cmr-lp .picks{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){#cmr-lp .picks{grid-template-columns:1fr}}
#cmr-lp .pick{border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:20px 18px;text-align:center}
#cmr-lp .pick h4{margin:7px 0 6px}
#cmr-lp .pick .best{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-dk);
  margin-bottom:9px}
#cmr-lp .pick .oneline{font-size:13.8px;color:var(--ink-3);line-height:1.55;margin-bottom:15px;min-height:62px}
#cmr-lp .ftable{margin-top:18px;border:1px solid var(--rule-2);border-radius:var(--r-sm);overflow:hidden;background:#fff}
#cmr-lp .ftable table{width:100%;border-collapse:collapse;font-size:13.2px}
#cmr-lp .ftable th,#cmr-lp .ftable td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left}
#cmr-lp .ftable th{background:var(--bg-soft);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
#cmr-lp .ftable tr:last-child td{border-bottom:0}
#cmr-lp .ftable td.yes{color:var(--green);font-weight:700}
#cmr-lp .ftable td.no{color:var(--ink-4);font-weight:700}

/* quiz */
#cmr-lp .qcat{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
  margin-bottom:11px}
#cmr-lp .qscene{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:15px 17px;
  font-size:14.8px;color:var(--ink-2);line-height:1.6;margin-bottom:14px}
#cmr-lp .qscene b{color:var(--ink)}
#cmr-lp .qscene .note{display:block;margin-top:10px;font-size:12.6px;color:var(--ink-4);line-height:1.55}
#cmr-lp .qtext{font-size:17px;font-weight:700;line-height:1.45;margin-bottom:15px}
#cmr-lp .opts{display:grid;gap:9px}
#cmr-lp .opt{display:flex;gap:12px;align-items:flex-start;text-align:left;background:#fff;border:1.5px solid var(--rule-2);
  border-radius:var(--r-sm);padding:13px 15px;font-size:14.8px;color:var(--ink-2);line-height:1.5;min-height:44px}
#cmr-lp .opt:hover{border-color:var(--teal);background:#F8FCFD}
#cmr-lp .opt.sel{border-color:var(--teal);background:#F2FAFC;box-shadow:0 2px 0 var(--teal-dk)}
#cmr-lp .opt .k{font-weight:800;color:var(--teal);flex:0 0 14px}
#cmr-lp .pfoot{display:flex;align-items:center;gap:11px;margin-top:17px;flex-wrap:wrap}
#cmr-lp .pfoot .hint{font-size:12.5px;color:var(--ink-4);font-weight:600}
#cmr-lp .pfoot .sp{flex:1}

/* results: CRO 11 hierarchy + CRO 12 personalisation */
#cmr-lp .rtop{text-align:center;padding:4px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:18px}
#cmr-lp .rtop .big{font-size:52px;font-weight:800;line-height:1}
#cmr-lp .rtop .of{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin-top:4px}
#cmr-lp .rtop .pill{display:inline-block;margin-top:12px;background:var(--bg-soft);border:1.5px solid var(--rule-2);
  border-radius:var(--r-pill);padding:6px 16px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
#cmr-lp .dl{display:grid;gap:9px;margin-bottom:20px}
#cmr-lp .dl .r{display:flex;align-items:center;gap:12px;font-size:14px}
/* CritiCall category names are longer than FireTEAM section names, so the
   label column is widened from the lineage's 132px. Nothing else changes. */
#cmr-lp .dl .nm{flex:0 0 158px;font-weight:700;font-size:13px;line-height:1.25}
#cmr-lp .dl .tk{flex:1;height:8px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden}
#cmr-lp .dl .tk i{display:block;height:100%;background:var(--teal);border-radius:var(--r-pill)}
#cmr-lp .dl .vl{flex:0 0 44px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
#cmr-lp .dl .r.weak .nm{color:var(--red)}
#cmr-lp .dl .r.weak .tk i{background:var(--red)}
@media(max-width:520px){#cmr-lp .dl .nm{flex:0 0 116px;font-size:12px}}
/* CRO 12: dynamic, score-aware upsell. CRO 11: not cut off, clear hierarchy. */
#cmr-lp .upsell{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}
#cmr-lp .upsell .gaph{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:9px}
#cmr-lp .upsell .diag{font-size:14.5px;color:var(--ink-3);line-height:1.6}
#cmr-lp .upsell .diag b{color:var(--ink)}
#cmr-lp .plan3{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:15px 17px;margin:16px 0}
#cmr-lp .plan3 .h{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:9px}
#cmr-lp .plan3 ol{margin-left:18px;font-size:14px;color:var(--ink-3);line-height:1.65}
#cmr-lp .plan3 li{margin-bottom:5px}
#cmr-lp .plan3 b{color:var(--ink)}
#cmr-lp .retake{display:flex;align-items:center;justify-content:center;margin-top:13px;text-align:center;font-size:13px;
  color:var(--ink-4);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}

/* exit popup: CRO 08 */
#cmr-lp .exit .panel{max-width:560px}
#cmr-lp .exithead{background:var(--amber);color:#3a2400;padding:20px 24px;text-align:center}
#cmr-lp .exithead h3{font-size:23px;color:#3a2400}
#cmr-lp .exitbody{padding:24px 26px 26px;text-align:center}
#cmr-lp .exitbody .s{font-size:15px;color:var(--ink-2);line-height:1.6}
#cmr-lp .exitbody .s b{font-weight:700}
#cmr-lp .exitprev{margin:18px 0;background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-sm);
  padding:14px 16px;text-align:left}
#cmr-lp .exitprev .t{font-size:12.8px;color:var(--ink-3);line-height:1.55}
#cmr-lp .exitprev .t b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}
#cmr-lp .exitbody .micro{font-size:12px;color:var(--ink-4);margin-top:11px}
#cmr-lp .exitbody .dismiss{display:flex;align-items:center;justify-content:center;margin-top:16px;font-size:12.5px;
  color:var(--ink-4);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}

/* ---- ADDITION 1: .modmap / .modlink, the module cross-link row. ------------
   This page exists because CritiCall is graded section by section, which means
   a visitor who lands on ONE module page needs to see, immediately, where that
   module sits in the whole exam and where the other module pages are. A plain
   list of links buried in the footer would not do that job. ---------------- */
#cmr-lp .modmap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media(max-width:880px){#cmr-lp .modmap{grid-template-columns:1fr}}
#cmr-lp .modlink{display:block;background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:19px 21px}
#cmr-lp .modlink:hover{border-color:var(--teal)}
#cmr-lp .modlink .k{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);margin-bottom:6px}
#cmr-lp .modlink h4{margin-bottom:6px}
#cmr-lp .modlink p{font-size:14px;color:var(--ink-3);line-height:1.55}
#cmr-lp .modlink .go{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;color:var(--teal-dk);
  border-bottom:1px solid var(--rule-2);padding-bottom:1px}
#cmr-lp .modlink.here{border-color:var(--ink);background:var(--bg-soft)}
#cmr-lp .modlink.here .k{color:var(--ink)}
#cmr-lp .modlink.here .go{color:var(--ink-4);border:0}

/* ---- ADDITION 2: .keyfact, the section-by-section grading callout. ---------
   One verified fact carries this whole page: CritiCall is graded section by
   section, so a strong total does not save a candidate whose single section is
   below the agency cutoff. It needs to look like a fact, not like a banner. -*/
#cmr-lp .keyfact{background:#FFF8EC;border:1.5px solid var(--amber);border-radius:var(--r-md);
  padding:20px 23px;margin-top:24px;max-width:920px}
#cmr-lp .keyfact .h{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#8A5B00;margin-bottom:8px}
#cmr-lp .keyfact p{font-size:15px;color:var(--ink-2);line-height:1.62}
#cmr-lp .keyfact p b{color:var(--ink)}
#cmr-lp .keyfact p+p{margin-top:9px}

/* ---- ADDITION 3: .mapwrap, the on-page static preview of the drill map. ----
   The map is the reason to be on this page, so it is rendered in the document
   itself and not only inside the modal. Also the only thing on the page a
   search engine can see that proves the drill is real. -------------------- */
#cmr-lp .mapwrap{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);
  padding:16px 16px 12px;max-width:660px;margin:0 auto}
#cmr-lp .mapwrap .cap{font-size:12.6px;color:var(--ink-4);line-height:1.55;margin-top:10px;text-align:center}
#cmr-lp .rules{display:grid;gap:9px;max-width:660px;margin:20px auto 0}
#cmr-lp .rule-i{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1.5px solid var(--rule-2);
  border-radius:var(--r-sm);padding:12px 15px;font-size:14.2px;color:var(--ink-2);line-height:1.55}
#cmr-lp .rule-i .b{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
#cmr-lp .rule-i .b.ow{background:#FDF1DC;color:#8A5B00}
#cmr-lp .rule-i .b.cl{background:#FEECEC;color:#991B1B}
#cmr-lp .rule-i .b.ok{background:#EEF2F6;color:#47535E}

/* ===== LONG SOURCE URLS MUST WRAP =====
   §16 requires zero horizontal overflow at 390px. The Sources and claims
   block prints full primary-source URLs, and an unbroken token cannot wrap,
   so it pushes the whole document wider. Citing the URL in full is correct
   and worth keeping, so the fix is to let it break rather than to shorten
   the citation. */
#cmr-lp .src,#cmr-lp .src *{overflow-wrap:anywhere;word-break:break-word}

/* ===== HOUSE ADDITIONS (not in the mockup) ================================
   §18: the sticky bar earns its place only after the hero primary CTA has
   scrolled away. JS toggles .on via IntersectionObserver on the hero. */
#cmr-lp .sticky{transform:translateY(100%);transition:transform .28s var(--ease)}
#cmr-lp .sticky.on{transform:none}
@media (prefers-reduced-motion:reduce){
  #cmr-lp .sticky{transition:none}
  #cmr-lp .pathline{transition:none}
}
/* Keyboard focus must be visible: the core interaction is a timed drill run
   entirely from the keyboard if the visitor chooses. */
#cmr-lp a:focus-visible,
#cmr-lp button:focus-visible,
#cmr-lp summary:focus-visible,
#cmr-lp [tabindex]:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* Screen-reader-only text (modal headings, status line). */
#cmr-lp .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}