/*
 * CritiCall Typing Test LP — /criticall-typing-test (WON-152).
 * Ported from mockups/criticall-typing-test.html (built 2026-08-13, canon
 * compliance pass 2026-08-17), scoped mechanically under #ctt-lp; body-level
 * rules target body.pt-ctt-lp. Design tokens are verbatim fireteam/tsaiq
 * lineage (Onest, lime/teal). The .tt* block is the typing widget — the ONE
 * place a monospace face is allowed (per-character alignment is the
 * mechanic). Do not re-add nav{position:sticky}: the bottom bar is the
 * page one sticky element (§16), and it reveals only once the hero is
 * behind the visitor (§18 house standard, appended below).
 */
/* ============================================================
   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.
   ============================================================ */
#ctt-lp,
body.pt-ctt-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;
}
#ctt-lp *,
#ctt-lp *::before,
#ctt-lp *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.pt-ctt-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}
#ctt-lp a{color:inherit;text-decoration:none}
#ctt-lp button{font-family:inherit;cursor:pointer}
#ctt-lp h1,
#ctt-lp h2,
#ctt-lp h3,
#ctt-lp h4{font-family:var(--sans);font-weight:800;letter-spacing:-.022em;line-height:1.13;color:var(--ink)}
#ctt-lp h1{font-size:clamp(31px,4.5vw,49px)}
#ctt-lp h2{font-size:clamp(24px,3.2vw,35px)}
#ctt-lp h3{font-size:21px}
#ctt-lp h4{font-size:17px}
#ctt-lp sup{font-size:.62em;font-weight:700;color:var(--teal)}
#ctt-lp .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
#ctt-lp section{padding:62px 0}


/* section header block: functional tag, bold H2, muted medium subhead (CRO 13/14) */
#ctt-lp .sh{max-width:820px;margin-bottom:34px}
#ctt-lp .sh.center{margin-left:auto;margin-right:auto;text-align:center}
#ctt-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}
#ctt-lp .tag.on-dark{color:var(--lime);background:rgba(157,214,79,.09);border-color:rgba(157,214,79,.26)}
#ctt-lp .sh h2+.sub,
#ctt-lp .sub{font-size:17px;font-weight:500;color:var(--ink-3);line-height:1.55;margin-top:13px}
#ctt-lp .sub.on-dark{color:var(--dark-ink-2)}
#ctt-lp .hl{color:var(--teal-dk)}
#ctt-lp section.dark{background:var(--dark)}
#ctt-lp section.dark h2,
#ctt-lp section.dark h3,
#ctt-lp section.dark h4{color:#fff}
#ctt-lp section.dark p{color:var(--dark-ink-2)}


/* buttons */
#ctt-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)}
#ctt-lp .btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 3px 0 var(--lime-dk)}
#ctt-lp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--lime-dk),var(--sh-md)}
#ctt-lp .btn-dark{background:var(--ink);color:#fff}
#ctt-lp .btn-dark:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}

/* CRO 03: secondary is a ghost button, never a second solid primary */
#ctt-lp .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule-2)}
#ctt-lp .btn-ghost:hover{border-color:var(--ink)}
#ctt-lp .btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.3)}
#ctt-lp .btn-lg{padding:17px 34px;font-size:16.5px;border-radius:12px}
#ctt-lp .btn-sm{padding:10px 18px;font-size:14px}
#ctt-lp .btn-block{width:100%}


/* CRO 04: ONE sticky element in the header. No stacked banners. */
#ctt-lp nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule)}
#ctt-lp .nav-in{max-width:1180px;margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:26px}
#ctt-lp .logo{font-weight:800;font-size:19px;letter-spacing:-.03em}
#ctt-lp .logo .g{color:var(--lime-dk)}
#ctt-lp .nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:600;color:var(--ink-3)}
#ctt-lp .nav-links a:hover{color:var(--teal)}
#ctt-lp .nav-sp{flex:1}

@media(max-width:860px){#ctt-lp .nav-links{display:none}
}


/* independence line: one sentence, no button shapes (CRO 05) */
#ctt-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 */
#ctt-lp .hero{background:linear-gradient(180deg,#F3FAFC 0%,#fff 100%);border-bottom:1px solid var(--rule)}
#ctt-lp .hero-in{max-width:1180px;margin:0 auto;padding:46px 28px 44px}
#ctt-lp .hero h1{max-width:19ch}
#ctt-lp .hero .sub{max-width:62ch;font-size:18px;margin-top:15px}
#ctt-lp .datesel{margin:26px 0 0;max-width:760px}
#ctt-lp .datesel .lbl{font-size:13.5px;font-weight:800;color:var(--ink-3);margin-bottom:10px}
#ctt-lp .chips{display:flex;gap:10px;flex-wrap:wrap}
#ctt-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}
#ctt-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}
#ctt-lp .chip:hover{border-color:var(--teal)}
#ctt-lp .chip.on{border-color:var(--teal);background:#F2FAFC;box-shadow:0 3px 0 var(--teal-dk)}
#ctt-lp .chip.on .u{color:var(--teal-dk)}
#ctt-lp .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
#ctt-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}
#ctt-lp .pathline.show{opacity:1;transform:none}

/* CRO 02: ONE consolidated trust line, clickable, not a decorative pill */
#ctt-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}
#ctt-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}
#ctt-lp .trustline .tpmini:hover{border-color:var(--trust);color:var(--trust)}
#ctt-lp .trustline .stars{color:var(--trust);letter-spacing:1px}
#ctt-lp .trustline .dot{width:4px;height:4px;border-radius:50%;background:var(--rule-2)}
#ctt-lp .trustline b{color:var(--ink)}


/* grids + cards */
#ctt-lp .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#ctt-lp .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

@media(max-width:880px){#ctt-lp .grid2,
#ctt-lp .grid3{grid-template-columns:1fr}
}
#ctt-lp .card{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:24px}
#ctt-lp .card .n{font-size:30px;font-weight:800;color:var(--teal-dk);line-height:1;margin-bottom:9px}
#ctt-lp .card h4{margin-bottom:7px}
#ctt-lp .card p{font-size:14.8px;color:var(--ink-3);line-height:1.6}
#ctt-lp .card-d{background:var(--dark-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:24px}
#ctt-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}
#ctt-lp .card-d p{font-size:14.8px;color:var(--dark-ink-2);line-height:1.6}
#ctt-lp .card-d .hl{color:#fff;font-weight:700}


/* benchmark tiles */
#ctt-lp .roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:960px;margin:0 auto}

@media(max-width:880px){#ctt-lp .roles{grid-template-columns:1fr 1fr}
}
#ctt-lp .role{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:20px 16px;text-align:center}
#ctt-lp .role .sc{font-size:27px;font-weight:800;color:var(--teal-dk);line-height:1}
#ctt-lp .role .nm{font-size:14px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.35}
#ctt-lp .role .pc{font-size:12.5px;color:var(--ink-4);margin-top:6px;font-weight:600}


/* section table */
#ctt-lp .tblw{overflow-x:auto;border:1.5px solid var(--rule-2);border-radius:var(--r-md);background:#fff}
#ctt-lp table.fmt{width:100%;border-collapse:collapse;font-size:14.8px;min-width:660px}
#ctt-lp table.fmt th,
#ctt-lp table.fmt td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule)}
#ctt-lp table.fmt th{background:var(--bg-soft);font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--slate)}
#ctt-lp table.fmt tbody tr:last-child td{border-bottom:0}
#ctt-lp table.fmt td b{color:var(--ink)}
#ctt-lp .pill-f{display:inline-block;font-size:11px;font-weight:800;border-radius:var(--r-pill);padding:3px 9px;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
#ctt-lp .pill-f.v{background:#FDF1DC;color:#8A5B00}
#ctt-lp .pill-f.nc{background:#FEECEC;color:#991B1B}
#ctt-lp .pill-f.s{background:#EEF2F6;color:#47535E}


/* phases */
#ctt-lp .phases{display:grid;gap:14px;max-width:900px}
#ctt-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}
#ctt-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}
#ctt-lp .phase h4{margin-bottom:5px}
#ctt-lp .phase p{font-size:14.8px;line-height:1.6}


/* proof */
#ctt-lp .tps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

@media(max-width:880px){#ctt-lp .tps{grid-template-columns:1fr}
}
#ctt-lp .tp{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}
#ctt-lp .tp .stars{color:var(--trust);font-size:15px;letter-spacing:1px}
#ctt-lp .tp .score{font-size:15px;font-weight:800;color:var(--teal-dk);margin:8px 0 9px}
#ctt-lp .tp q{display:block;font-size:14.8px;color:var(--ink-2);line-height:1.6;quotes:none}
#ctt-lp .tp .who{font-size:12.5px;color:var(--ink-4);margin-top:12px;font-weight:600;line-height:1.5}
#ctt-lp .tp .who b{display:block;color:var(--ink);font-size:13.5px}
#ctt-lp .tp .vf{display:inline-block;margin-top:5px;color:var(--trust);font-weight:700}


/* pricing */
#ctt-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)}
#ctt-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)}
#ctt-lp .plan .win{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);text-align:center}
#ctt-lp .plan h3{text-align:center;margin-top:6px}
#ctt-lp .plan .price{font-size:44px;font-weight:800;text-align:center;line-height:1.1;margin:10px 0 3px}
#ctt-lp .plan .pn{text-align:center;font-size:13px;color:var(--ink-4);font-weight:600}
#ctt-lp .plan ul{list-style:none;margin:20px 0 22px}
#ctt-lp .plan li{font-size:14.8px;color:var(--ink-2);padding:8px 0 8px 27px;position:relative;border-bottom:1px solid var(--rule)}
#ctt-lp .plan li:last-child{border-bottom:0}
#ctt-lp .plan li::before{content:"✓";position:absolute;left:0;color:var(--lime-dk);font-weight:800}
#ctt-lp .guarantee{max-width:700px;margin:24px auto 0;text-align:center;font-size:14.5px;color:var(--ink-3);line-height:1.6}
#ctt-lp .guarantee b{color:var(--ink)}


/* expert */
#ctt-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}
#ctt-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}
#ctt-lp .about .cred{font-size:13px;color:var(--ink-4);font-weight:700;margin:3px 0 9px}
#ctt-lp .about p{font-size:14.8px;color:var(--ink-3);line-height:1.6}


/* faq */
#ctt-lp .faq{max-width:820px}
#ctt-lp .fq{border-bottom:1px solid var(--rule);padding:18px 0}
#ctt-lp .fq summary{font-weight:800;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
#ctt-lp .fq summary::-webkit-details-marker{display:none}
#ctt-lp .fq summary::after{content:"+";color:var(--teal);font-size:22px;line-height:1}
#ctt-lp .fq[open] summary::after{content:"\2013"}
#ctt-lp .fq p{margin-top:11px;font-size:15px;color:var(--ink-3);line-height:1.65}
#ctt-lp footer{background:var(--dark);color:var(--dark-ink-3);padding:44px 0 36px;font-size:13.5px;line-height:1.65}
#ctt-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}
#ctt-lp footer .src b{color:#fff}
#ctt-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 */
#ctt-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}
#ctt-lp .sticky .in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px}
#ctt-lp .sticky .txt{color:#fff;font-size:15.5px;font-weight:700}
#ctt-lp .sticky .txt small{display:block;font-weight:400;font-size:12.5px;color:var(--dark-ink-3);margin-top:2px}
#ctt-lp .sticky .sp{flex:1}
#ctt-lp .sticky .seelink{color:#fff;font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}
#ctt-lp .sticky .seelink:hover{border-color:var(--lime);color:var(--lime)}

@media(max-width:760px){#ctt-lp .sticky .txt{display:none}
#ctt-lp .sticky .in{justify-content:center}
}


/* ============ MODALS ============ */
#ctt-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}
#ctt-lp .ov.on{display:flex}
#ctt-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)}
#ctt-lp .pbar{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--rule);
  background:var(--bg-soft)}
#ctt-lp .pbar .lbl{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
#ctt-lp .pbar .qn{font-size:13px;font-weight:700;color:var(--ink-3)}
#ctt-lp .pbar .sp{flex:1}
#ctt-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}
#ctt-lp .pbar .clock.warn{color:var(--amber);border-color:var(--amber)}
#ctt-lp .pbar .clock.crit{color:var(--red);border-color:var(--red)}
#ctt-lp .pbar .x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink-4);padding:0 4px}
#ctt-lp .prog{height:4px;background:var(--rule)}
#ctt-lp .prog i{display:block;height:100%;background:var(--teal);transition:width .25s var(--ease)}
#ctt-lp .pbody{padding:22px;max-height:76vh;overflow-y:auto}


/* CRO 09 / CRO 10: selector: ONE title, instant persona guidance, standardised table */
#ctt-lp .selhead{text-align:center;margin-bottom:20px}
#ctt-lp .selhead h3{font-size:20px}
#ctt-lp .selhead p{font-size:14.5px;color:var(--ink-3);margin-top:7px}
#ctt-lp .picks{display:grid;grid-template-columns:1fr 1fr;gap:14px}

@media(max-width:620px){#ctt-lp .picks{grid-template-columns:1fr}
}
#ctt-lp .pick{border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:20px 18px;text-align:center}
#ctt-lp .pick .ic{font-size:24px}
#ctt-lp .pick h4{margin:7px 0 6px}
#ctt-lp .pick .best{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-dk);
  margin-bottom:9px}
#ctt-lp .pick .oneline{font-size:13.8px;color:var(--ink-3);line-height:1.55;margin-bottom:15px;min-height:62px}
#ctt-lp .ftable{margin-top:18px;border:1px solid var(--rule-2);border-radius:var(--r-sm);overflow:hidden;background:#fff}
#ctt-lp .ftable table{width:100%;border-collapse:collapse;font-size:13.2px}
#ctt-lp .ftable th,
#ctt-lp .ftable td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left}
#ctt-lp .ftable th{background:var(--bg-soft);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
#ctt-lp .ftable tr:last-child td{border-bottom:0}
#ctt-lp .ftable td.yes{color:var(--green);font-weight:700}
#ctt-lp .ftable td.no{color:var(--ink-4);font-weight:700}
#ctt-lp .ftable td.hit{background:#F2FAFC}


/* quiz */
#ctt-lp .qcat{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
  margin-bottom:11px}
#ctt-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}
#ctt-lp .qscene b{color:var(--ink)}
#ctt-lp .qscene .note{display:block;margin-top:10px;font-size:12.6px;color:var(--ink-4);line-height:1.55}
#ctt-lp .qtext{font-size:17px;font-weight:700;line-height:1.45;margin-bottom:15px}
#ctt-lp .opts{display:grid;gap:9px}
#ctt-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}
#ctt-lp .opt:hover{border-color:var(--teal);background:#F8FCFD}
#ctt-lp .opt.sel{border-color:var(--teal);background:#F2FAFC;box-shadow:0 2px 0 var(--teal-dk)}
#ctt-lp .opt .k{font-weight:800;color:var(--teal);flex:0 0 14px}
#ctt-lp .pfoot{display:flex;align-items:center;gap:11px;margin-top:17px;flex-wrap:wrap}
#ctt-lp .pfoot .hint{font-size:12.5px;color:var(--ink-4);font-weight:600}
#ctt-lp .pfoot .sp{flex:1}


/* ---- PORTED ADDITION (from 911-dispatcher-test.html): .dcard, a CAD-style record card. --
   A CAD-style record needs to look like a record, not like prose, or the recall
   item stops testing recall and starts testing reading. ------------------- */
#ctt-lp .dcard{background:#fff;border:1.5px solid var(--ink-2);border-radius:var(--r-sm);overflow:hidden;margin:4px 0 2px}
#ctt-lp .dcard .h{background:var(--ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:7px 13px}
#ctt-lp .dcard .rowz{display:grid;grid-template-columns:132px 1fr;font-size:14px}
#ctt-lp .dcard .rowz>div{padding:8px 13px;border-bottom:1px solid var(--rule)}
#ctt-lp .dcard .rowz>div:nth-child(odd){font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate);background:var(--bg-soft)}
#ctt-lp .dcard .rowz>div:nth-child(even){font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}


/* results: CRO 11 hierarchy + CRO 12 personalisation */
#ctt-lp .rtop{text-align:center;padding:4px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:18px}
#ctt-lp .rtop .big{font-size:52px;font-weight:800;line-height:1}
#ctt-lp .rtop .of{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin-top:4px}
#ctt-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)}
#ctt-lp .dl{display:grid;gap:9px;margin-bottom:20px}
#ctt-lp .dl .r{display:flex;align-items:center;gap:12px;font-size:14px}

/* PORTED ADDITION: CritiCall category names are longer than FireTEAM section
   names, so the label column is widened from 132px. Nothing else changes. */
#ctt-lp .dl .nm{flex:0 0 158px;font-weight:700;font-size:13px;line-height:1.25}
#ctt-lp .dl .tk{flex:1;height:8px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden}
#ctt-lp .dl .tk i{display:block;height:100%;background:var(--teal);border-radius:var(--r-pill)}
#ctt-lp .dl .vl{flex:0 0 44px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
#ctt-lp .dl .r.weak .nm{color:var(--red)}
#ctt-lp .dl .r.weak .tk i{background:var(--red)}

@media(max-width:520px){#ctt-lp .dl .nm{flex:0 0 116px;font-size:12px}
}

/* CRO 12: dynamic, score-aware upsell. CRO 11: not cut off, clear hierarchy. */
#ctt-lp .upsell{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}
#ctt-lp .upsell .gaph{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:9px}
#ctt-lp .upsell .diag{font-size:14.5px;color:var(--ink-3);line-height:1.6}
#ctt-lp .upsell .diag b{color:var(--ink)}
#ctt-lp .plan3{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:15px 17px;margin:16px 0}
#ctt-lp .plan3 .h{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:9px}
#ctt-lp .plan3 ol{margin-left:18px;font-size:14px;color:var(--ink-3);line-height:1.65}
#ctt-lp .plan3 li{margin-bottom:5px}
#ctt-lp .plan3 b{color:var(--ink)}
#ctt-lp .retake{display:block;margin-top:13px;text-align:center;font-size:13px;color:var(--ink-4);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}


/* exit popup: CRO 08 */
#ctt-lp .exit .panel{max-width:560px}
#ctt-lp .exithead{background:var(--amber);color:#3a2400;padding:20px 24px;text-align:center}
#ctt-lp .exithead h3{font-size:23px;color:#3a2400}
#ctt-lp .exitbody{padding:24px 26px 26px;text-align:center}
#ctt-lp .exitbody .s{font-size:15px;color:var(--ink-2);line-height:1.6}
#ctt-lp .exitbody .s b{font-weight:700}
#ctt-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}
#ctt-lp .exitprev .t{font-size:12.8px;color:var(--ink-3);line-height:1.55}
#ctt-lp .exitprev .t b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}
#ctt-lp .exitbody .micro{font-size:12px;color:var(--ink-4);margin-top:11px}
#ctt-lp .exitbody .dismiss{display:block;margin-top:16px;font-size:12.5px;color:var(--ink-4);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}


/* ---- ADDITION 1: .modmap / .modlink, the module cross-link row. ------------
   Identical to the sister module pages. CritiCall is graded section by section,
   so a visitor landing on ONE module page has to be able to see where that
   module sits and where the other two live, above the fold-adjacent area and
   not buried in a footer. ------------------------------------------------- */
#ctt-lp .modmap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}

@media(max-width:880px){#ctt-lp .modmap{grid-template-columns:1fr}
}
#ctt-lp .modlink{display:block;background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:19px 21px}
#ctt-lp .modlink:hover{border-color:var(--teal)}
#ctt-lp .modlink .k{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);margin-bottom:6px}
#ctt-lp .modlink h4{margin-bottom:6px}
#ctt-lp .modlink p{font-size:14px;color:var(--ink-3);line-height:1.55}
#ctt-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}
#ctt-lp .modlink.here{border-color:var(--ink);background:var(--bg-soft)}
#ctt-lp .modlink.here .k{color:var(--ink)}
#ctt-lp .modlink.here .go{color:var(--ink-4);border:0}


/* ---- ADDITION 2: .keyfact, the section-by-section grading callout. -------- */
#ctt-lp .keyfact{background:#FFF8EC;border:1.5px solid var(--amber);border-radius:var(--r-md);
  padding:20px 23px;margin-top:24px;max-width:920px}
#ctt-lp .keyfact .h{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#8A5B00;margin-bottom:8px}
#ctt-lp .keyfact p{font-size:15px;color:var(--ink-2);line-height:1.62}
#ctt-lp .keyfact p b{color:var(--ink)}
#ctt-lp .keyfact p+p{margin-top:9px}


/* ---- ADDITION 3: .tt*, the typing test widget. ----------------------------
   The one place on any page in this folder where a monospace face is allowed.
   This is not a heading and not body copy: per-character alignment between the
   passage and what the candidate has typed is the entire mechanic, and a
   proportional face makes the correct/incorrect highlighting jitter as you
   type. CRO 13 (one sans-serif for all headings) is untouched. ------------ */
/* position:relative is LOAD-BEARING (added 2026-08-22, not in the mockup —
   the mockup ships this bug): paint() auto-scrolls the box using each
   span's offsetTop, and without a positioned box the spans' offsetParent
   is the fixed .ov overlay, so the scroll math mixes coordinate systems
   and scrolls the current line out of view after one typed line. */
#ctt-lp .tt-passage{position:relative;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:15.5px;line-height:1.85;letter-spacing:.01em;background:var(--bg-soft);
  border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:16px 18px;
  max-height:180px;overflow-y:auto;color:var(--ink-4);white-space:pre-wrap;word-break:break-word}
#ctt-lp .tt-passage .c-ok{color:var(--ink);background:#EDF7EC}
#ctt-lp .tt-passage .c-bad{color:#fff;background:var(--red);border-radius:2px}
#ctt-lp .tt-passage .c-cur{border-bottom:2px solid var(--teal);background:#E4F4F9;color:var(--ink)}
#ctt-lp .tt-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:15.5px;line-height:1.7;width:100%;min-height:118px;margin-top:14px;resize:vertical;
  border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:13px 15px;color:var(--ink);
  background:#fff;outline:none}
#ctt-lp .tt-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,137,172,.12)}
#ctt-lp .tt-input:disabled{background:var(--bg-soft);color:var(--ink-4)}
#ctt-lp .tt-live{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
#ctt-lp .tt-live .s{flex:1 1 108px;background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-sm);
  padding:10px 13px;text-align:center}
#ctt-lp .tt-live .s .v{font-size:22px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
#ctt-lp .tt-live .s .l{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);margin-top:3px}
#ctt-lp .tt-live .s.warn .v{color:var(--red)}
#ctt-lp .tt-hint{font-size:12.5px;color:var(--ink-4);line-height:1.55;margin-top:12px}
#ctt-lp .tt-hint b{color:var(--ink-3)}


/* ---- ADDITION 4: .bench, the benchmark comparison rows on the result screen
   and in the page body. Two verified figures, each with the conditions it was
   measured under, because a KPM number without its conditions is misleading
   and this page lives or dies on not being misleading about speed. -------- */
#ctt-lp .bench{display:grid;gap:9px;margin:16px 0 4px}
#ctt-lp .bench .b{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1.5px solid var(--rule-2);
  border-radius:var(--r-sm);padding:13px 15px}
#ctt-lp .bench .b .n{flex:0 0 74px;font-size:20px;font-weight:800;line-height:1.15;color:var(--teal-dk);
  font-variant-numeric:tabular-nums}
#ctt-lp .bench .b .n small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-top:2px}
#ctt-lp .bench .b .t{font-size:14px;color:var(--ink-3);line-height:1.55}
#ctt-lp .bench .b .t b{color:var(--ink)}
#ctt-lp .bench .b.pass{border-color:var(--green);box-shadow:0 2px 0 var(--green)}
#ctt-lp .bench .b.pass .n{color:var(--green)}
#ctt-lp .bench .b.fail{border-color:var(--red);box-shadow:0 2px 0 var(--red)}
#ctt-lp .bench .b.fail .n{color:var(--red)}
#ctt-lp .bench .b .vd{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:2px 9px;margin-top:6px}
#ctt-lp .bench .b .vd.y{background:#E8F6EA;color:#14682B}
#ctt-lp .bench .b .vd.n{background:#FEECEC;color:#991B1B}


/* metric row on the result screen: three numbers, KPM dominant */
#ctt-lp .mrow{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;margin-bottom:18px}

@media(max-width:520px){#ctt-lp .mrow{grid-template-columns:1fr 1fr}
}
#ctt-lp .mrow .m{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);
  padding:15px 12px;text-align:center}
#ctt-lp .mrow .m.lead{background:var(--ink);border-color:var(--ink)}
#ctt-lp .mrow .m .v{font-size:34px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
#ctt-lp .mrow .m.lead .v{color:#fff;font-size:44px}
#ctt-lp .mrow .m .l{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-4);margin-top:6px}
#ctt-lp .mrow .m.lead .l{color:var(--lime)}
#ctt-lp .mrow .m .sub2{font-size:11.5px;color:var(--ink-4);margin-top:4px;line-height:1.4}
#ctt-lp .mrow .m.lead .sub2{color:var(--dark-ink-3)}
/* ===== CANON COMPLIANCE PASS (added 2026-08-17, re-stated cleanly here) ====
   1. EXACTLY ONE STICKY ELEMENT (§16): the bottom bar. The mockup shipped
      the nav sticky as well; two persistent elements competed and the one
      NOT carrying the primary CTA won attention it had not earned. The nav
      keeps its links (worth having on a keyword page) but stops following
      the visitor. Do not re-add position:sticky to it.
   2. TAP TARGETS AT 44px (§19): only genuine targets are raised (wordmark,
      Trustpilot link, sticky buy link, module deep-dive link, .btn-sm).
      Prose links are deliberately untouched — a 44px anchor mid-paragraph
      breaks the line box.
   3. NO HORIZONTAL OVERFLOW AT 390px (§16): the cause is unbroken
      primary-source URLs in the Sources block; overflow-wrap:anywhere on
      those. Wide tables inside overflow-x:auto wrappers are innocent.
   ========================================================================= */
#ctt-lp nav{position:static}
#ctt-lp nav .logo,
#ctt-lp .trustline .tpmini,
#ctt-lp .sticky .seelink,
#ctt-lp .card .go{
  min-height:44px;display:inline-flex;align-items:center}
#ctt-lp .btn-sm{min-height:44px}
#ctt-lp .src a,
#ctt-lp .sources a,
#ctt-lp .foot a[href^="http"]{overflow-wrap:anywhere}

/* A long sentence set to white-space:nowrap cannot fit 390px and widens the
   whole document, which then sizes every grid track off the wider block. On
   tsa-interview-questions one .scored line measured 634px and the eight cards
   underneath it were victims, not causes. Bisected, not inferred. */
#ctt-lp .scored,
#ctt-lp .vflag{white-space:normal;overflow-wrap:anywhere}


/* ===== FIRST-VIEWPORT HEIGHT BUDGET (§16, the rule added 2026-08-13) ========
   1366x768 is the most common desktop resolution and leaves about 657px of
   usable viewport. These heroes are correct at 900px and lose the primary CTA
   at 657px, which is the defect both external CRO audits raised and neither
   of our checklists caught until 13 August. Compress on viewport HEIGHT, not
   width: the tall-viewport design is untouched. Ported verbatim from the repo
   siblings (4adffe5), with the h1 measure widened so the headline stops
   rendering as a five-line block. */
@media (max-height:830px){#ctt-lp .hero-in{padding:24px 28px 22px}
#ctt-lp .hero h1{font-size:clamp(29px,3.1vw,37px);line-height:1.1;max-width:30ch}
#ctt-lp .hero .sub{font-size:16px;margin-top:10px;max-width:76ch}
#ctt-lp .hero-cta{margin-top:16px}
#ctt-lp .datesel{margin-top:16px}
#ctt-lp .datesel .lbl{margin-bottom:7px}
#ctt-lp .buyline,
#ctt-lp .pathline{margin-top:10px}

  /* the 44px tap-target min-height on .tpmini adds about 19px of box height,
     so the trust line's own margin comes down to pay for it. */
#ctt-lp .trustline{margin-top:2px}

}

/* ===== 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. */
#ctt-lp .sticky{transform:translateY(100%);transition:transform .28s var(--ease)}
#ctt-lp .sticky.on{transform:none}
@media (prefers-reduced-motion:reduce){
  #ctt-lp .sticky{transition:none}
}
/* Keyboard focus must be visible on a page whose core interaction is typing. */
#ctt-lp a:focus-visible,
#ctt-lp button:focus-visible,
#ctt-lp textarea:focus-visible,
#ctt-lp summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* Screen-reader-only text (modal headings, input label, status line). */
#ctt-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}