/**
 * 911 Dispatcher Test landing page (/911-dispatcher-test).
 *
 * Source of record: mockups/911-dispatcher-test.html (built 2026-08-11,
 * ported 2026-08-16). Google Ads destination for the 911 dispatcher /
 * operator practice-test keyword cluster AND an organic asset. It is a
 * BRIDGE page, not a second CritiCall sales page: the keywords are
 * job-intent, so the page answers "which test am I sitting" before it
 * sells. Indexable by design — see the note in dispatcher-911-test.php
 * before adding any robots directive.
 *
 * Every selector is namespaced under #d911-lp, INCLUDING the custom
 * properties: the mockup declared them on :root and the theme's own tokens
 * share names (--ink, --bg, --rule, --sans). The wrapper also takes over
 * what the mockup gave to `body`, including the 84px sticky-bar gutter.
 *
 * No rem values exist in the source, so the theme's 19px root font-size
 * cannot scale this page (the trap that cost the CBP v2 port a day). Kept
 * as px throughout — do not reintroduce rem.
 *
 * ONE DEFECT WAS CARRIED OUT OF THE MOCKUP, NOT ACROSS. Its stylesheet
 * held an orphaned declaration block (a leftover from an earlier .indep
 * rule) directly after .brandbar .in>span:last-child. Browsers recover
 * from that silently, which is why it survived review; a brace-walking
 * scoper does not, and it would have corrupted the next selector. It is
 * removed, asserted in the port script, and the result is brace-balanced:
 * 274 rules in, 274 out, zero unscoped selectors.
 *
 * Section order and class names are otherwise unchanged from the mockup so
 * the two stay diffable. Additions live at the end of the file, marked.
 */

/* ============================================================
   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.
   ============================================================ */
#d911-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;
}
#d911-lp *,#d911-lp *::before,#d911-lp *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
#d911-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}
#d911-lp a{color:inherit;text-decoration:none}
#d911-lp button{font-family:inherit;cursor:pointer}
#d911-lp h1,#d911-lp h2,#d911-lp h3,#d911-lp h4{font-family:var(--sans);font-weight:800;letter-spacing:-.022em;line-height:1.13;color:var(--ink)}
#d911-lp h1{font-size:clamp(31px,4.5vw,49px)}
#d911-lp h2{font-size:clamp(24px,3.2vw,35px)}
#d911-lp h3{font-size:21px}
#d911-lp h4{font-size:17px}
#d911-lp sup{font-size:.62em;font-weight:700;color:var(--teal)}
#d911-lp .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
#d911-lp section{padding:62px 0}

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

/* buttons */
#d911-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)}
#d911-lp .btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 3px 0 var(--lime-dk)}
#d911-lp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--lime-dk),var(--sh-md)}
#d911-lp .btn-dark{background:var(--ink);color:#fff}
#d911-lp .btn-dark:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
/* CRO 03: secondary is a ghost button, never a second solid primary */
#d911-lp .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule-2)}
#d911-lp .btn-ghost:hover{border-color:var(--ink)}
#d911-lp .btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.3)}
#d911-lp .btn-lg{padding:17px 34px;font-size:16.5px;border-radius:12px}
#d911-lp .btn-sm{padding:10px 18px;font-size:14px}
#d911-lp .btn-block{width:100%}

/* ============================================================
   NO TOP NAVBAR (2026-08-11).
   The sticky course nav is removed from this page entirely.
   Reasoning, against landing-page-standard.md:
     - §7 scores "nav visual noise" on how many clicks the header
       steals from the page goal. A dedicated paid-traffic lander
       has exactly one goal, so the correct number of header links
       is zero.
     - §18 already resolved the sticky contradiction in favour of
       the bottom bar: "The bottom bar is the one sticky element.
       The course nav scrolls away." Removing it goes one step
       further and is the same direction of travel.
     - §16 requires that nothing in the first viewport links
       off-site. With no nav, nothing in the first viewport links
       anywhere except the page's own primary action.
   What replaces it is a .brandbar: a STATIC strip carrying the
   wordmark and the independence sentence. No links, no CTA
   button, not sticky, so it is not a navbar and steals no clicks.
   CTA architecture after the removal (§5 still satisfied):
     primary label repeats in hero, free-test block, FAQ close,
     sticky bar. Buy path stays a text link in four positions:
     hero, free-test block, pricing, sticky bar.
   ============================================================ */
#d911-lp .brandbar{background:var(--bg-soft);border-bottom:1px solid var(--rule);padding:11px 20px}
#d911-lp .brandbar .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  gap:8px 16px;flex-wrap:wrap;text-align:center}
#d911-lp .logo{font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--ink)}
#d911-lp .logo .g{color:var(--lime-dk)}
#d911-lp .brandbar .sep{width:1px;height:15px;background:var(--rule-2)}
@media(max-width:560px){#d911-lp .brandbar .sep{display:none}}

/* the independence sentence now lives inside .brandbar above.
   Kept as a rule so the sentence keeps its muted legal weight. */
#d911-lp .brandbar .in>span:last-child{font-size:12.5px;color:var(--ink-4);line-height:1.5}

/* HERO: CRO 01 / 02 / 03 */
#d911-lp .hero{background:linear-gradient(180deg,#F3FAFC 0%,#fff 100%);border-bottom:1px solid var(--rule)}
#d911-lp .hero-in{max-width:1180px;margin:0 auto;padding:46px 28px 44px}
#d911-lp .hero h1{max-width:19ch}
#d911-lp .hero .sub{max-width:62ch;font-size:18px;margin-top:15px}
#d911-lp .datesel{margin:26px 0 0;max-width:760px}
#d911-lp .datesel .lbl{font-size:13.5px;font-weight:800;color:var(--ink-3);margin-bottom:10px}
#d911-lp .chips{display:flex;gap:10px;flex-wrap:wrap}
#d911-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}
#d911-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}
#d911-lp .chip:hover{border-color:var(--teal)}
#d911-lp .chip.on{border-color:var(--teal);background:#F2FAFC;box-shadow:0 3px 0 var(--teal-dk)}
#d911-lp .chip.on .u{color:var(--teal-dk)}
#d911-lp .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
#d911-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}
#d911-lp .pathline.show{opacity:1;transform:none}
/* CRO 02: ONE consolidated trust line, clickable, not a decorative pill */
#d911-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}
#d911-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}
#d911-lp .trustline .tpmini:hover{border-color:var(--trust);color:var(--trust)}
/* ===== TAP TARGETS ON THE INLINE TEXT LINKS (added 2026-08-13) =====
   §16 asks for a 44px minimum. These are deliberately text links, not buttons
   (§5: the buy path is never a competing button), so they must keep their low
   visual weight while still being tappable. Padding grows the hit area only;
   inline-flex plus min-height leaves the type size and colour untouched.
   Measured before: buy links 35px, the Trustpilot mini 25px. */
#d911-lp .buyline a,#d911-lp a.seelink,#d911-lp .trustline .tpmini{
  display:inline-flex;align-items:center;min-height:44px}


/* ===== FIRST-VIEWPORT HEIGHT BUDGET (added 2026-08-13) =====
   Both external CRO audits flagged this and neither of our checklists caught
   it: "everything is stretched vertically, pushing the actual call to action
   buttons low on the page. On a laptop screen, the two critical buttons and
   the three checkmarks might be cut off entirely."
   1366x768 is the most common desktop resolution and leaves about 657px of
   usable viewport after browser chrome. The hero design is correct at 900px
   and fails at 657px, so compress on viewport HEIGHT, not width. Measured
   before this block: the hero primary CTA sat 165px (LRT), 91px (911) and
   35px (study guide) below a 1366x657 fold.
   Asserted by landing-page-standard.md §16 at 1366x657. */
@media (max-height:830px){
  #d911-lp .hero-in{padding:24px 28px 22px}
  #d911-lp .hero h1{font-size:clamp(29px,3.1vw,37px);line-height:1.1;max-width:30ch}
  #d911-lp .hero .sub{font-size:16px;margin-top:10px;max-width:76ch}
  #d911-lp .datesel{margin-top:16px}
  #d911-lp .datesel .lbl{margin-bottom:7px}
  #d911-lp .hero-cta{margin-top:16px}
  #d911-lp .buyline{margin-top:10px}
  #d911-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. */
  #d911-lp .trustline{margin-top:2px}
}
#d911-lp .trustline .stars{color:var(--trust);letter-spacing:1px}
#d911-lp .trustline .dot{width:4px;height:4px;border-radius:50%;background:var(--rule-2)}
#d911-lp .trustline b{color:var(--ink)}

/* ---- ADDITION 1: .idsel, the test identifier answer panel. ----------------
   Not in the reference because the reference had no bridge job to do. It reuses
   .chip for the input row and only adds the answer surface, so the visual
   language is unchanged. -------------------------------------------------- */
#d911-lp .idout{margin-top:15px;background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);
  padding:0;max-height:0;overflow:hidden;opacity:0;transition:.28s var(--ease)}
#d911-lp .idout.show{max-height:900px;opacity:1;padding:19px 21px}
#d911-lp .idout .nm{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
  margin-bottom:7px}
#d911-lp .idout h4{font-size:18px;margin-bottom:8px}
#d911-lp .idout p{font-size:14.6px;color:var(--ink-3);line-height:1.62}
#d911-lp .idout p+p{margin-top:9px}
#d911-lp .idout ul{margin:9px 0 0 18px;font-size:14.4px;color:var(--ink-3);line-height:1.6}
#d911-lp .idout li{margin-bottom:4px}
#d911-lp .idout b{color:var(--ink)}
#d911-lp .idout .ask{background:var(--bg-soft);border:1px solid var(--rule-2);border-radius:var(--r-sm);
  padding:13px 15px;margin-top:13px}
#d911-lp .idout .ask .h{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate);margin-bottom:7px}
#d911-lp .idout .conf{margin-top:12px;font-size:12.6px;color:var(--ink-4);line-height:1.55;border-top:1px solid var(--rule);
  padding-top:10px}

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

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

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

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

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

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

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

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

#d911-lp footer{background:var(--dark);color:var(--dark-ink-3);padding:44px 0 36px;font-size:13.5px;line-height:1.65}
#d911-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}
#d911-lp footer .src b{color:#fff}
#d911-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 */
#d911-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}
#d911-lp .sticky .in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px}
#d911-lp .sticky .txt{color:#fff;font-size:15.5px;font-weight:700}
#d911-lp .sticky .txt small{display:block;font-weight:400;font-size:12.5px;color:var(--dark-ink-3);margin-top:2px}
#d911-lp .sticky .sp{flex:1}
#d911-lp .sticky .seelink{color:#fff;font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}
#d911-lp .sticky .seelink:hover{border-color:var(--lime);color:var(--lime)}
@media(max-width:760px){#d911-lp .sticky .txt{display:none}#d911-lp .sticky .in{justify-content:center}}

/* ============ MODALS ============ */
#d911-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}
#d911-lp .ov.on{display:flex}
#d911-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)}
#d911-lp .pbar{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--rule);
  background:var(--bg-soft)}
#d911-lp .pbar .lbl{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
#d911-lp .pbar .qn{font-size:13px;font-weight:700;color:var(--ink-3)}
#d911-lp .pbar .sp{flex:1}
#d911-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}
#d911-lp .pbar .clock.warn{color:var(--amber);border-color:var(--amber)}
#d911-lp .pbar .clock.crit{color:var(--red);border-color:var(--red)}
/* 44px tap-target floor applies to the modal close button too. It is only
   measurable once a modal is open, which is how it survived the first
   browser check on every page in this set. */
#d911-lp .pbar .x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink-4);
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0}
#d911-lp .prog{height:4px;background:var(--rule)}
#d911-lp .prog i{display:block;height:100%;background:var(--teal);transition:width .25s var(--ease)}
#d911-lp .pbody{padding:22px;max-height:76vh;overflow-y:auto}

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

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

/* ---- ADDITION 2: .dcard, the Memory Recall dispatch 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. ------------------- */
#d911-lp .dcard{background:#fff;border:1.5px solid var(--ink-2);border-radius:var(--r-sm);overflow:hidden;margin:4px 0 2px}
#d911-lp .dcard .h{background:var(--ink);color:#fff;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:7px 13px}
#d911-lp .dcard .rowz{display:grid;grid-template-columns:132px 1fr;font-size:14px}
#d911-lp .dcard .rowz>div{padding:8px 13px;border-bottom:1px solid var(--rule)}
#d911-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)}
#d911-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 */
#d911-lp .rtop{text-align:center;padding:4px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:18px}
#d911-lp .rtop .big{font-size:52px;font-weight:800;line-height:1}
#d911-lp .rtop .of{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin-top:4px}
#d911-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)}
#d911-lp .dl{display:grid;gap:9px;margin-bottom:20px}
#d911-lp .dl .r{display:flex;align-items:center;gap:12px;font-size:14px}
/* ADDITION 3: nine CritiCall module names are longer than four FireTEAM section
   names, so the label column is widened from 132px. Nothing else changes. */
#d911-lp .dl .nm{flex:0 0 158px;font-weight:700;font-size:13px;line-height:1.25}
#d911-lp .dl .tk{flex:1;height:8px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden}
#d911-lp .dl .tk i{display:block;height:100%;background:var(--teal);border-radius:var(--r-pill)}
#d911-lp .dl .vl{flex:0 0 44px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
#d911-lp .dl .r.weak .nm{color:var(--red)}
#d911-lp .dl .r.weak .tk i{background:var(--red)}
@media(max-width:520px){#d911-lp .dl .nm{flex:0 0 116px;font-size:12px}}
/* CRO 12: dynamic, score-aware upsell. CRO 11: not cut off, clear hierarchy. */
#d911-lp .upsell{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}
#d911-lp .upsell .gaph{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:9px}
#d911-lp .upsell .diag{font-size:14.5px;color:var(--ink-3);line-height:1.6}
#d911-lp .upsell .diag b{color:var(--ink)}
#d911-lp .plan3{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:15px 17px;margin:16px 0}
#d911-lp .plan3 .h{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:9px}
#d911-lp .plan3 ol{margin-left:18px;font-size:14px;color:var(--ink-3);line-height:1.65}
#d911-lp .plan3 li{margin-bottom:5px}
#d911-lp .plan3 b{color:var(--ink)}
#d911-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 */
#d911-lp .exit .panel{max-width:560px}
#d911-lp .exithead{background:var(--amber);color:#3a2400;padding:20px 24px;text-align:center}
#d911-lp .exithead h3{font-size:23px;color:#3a2400}
#d911-lp .exitbody{padding:24px 26px 26px;text-align:center}
#d911-lp .exitbody .s{font-size:15px;color:var(--ink-2);line-height:1.6}
#d911-lp .exitbody .s b{font-weight:700}
#d911-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}
#d911-lp .exitprev .t{font-size:12.8px;color:var(--ink-3);line-height:1.55}
#d911-lp .exitprev .t b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}
#d911-lp .exitbody .micro{font-size:12px;color:var(--ink-4);margin-top:11px}
#d911-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}
/* ============================================================
   EMAIL GATE (added 2026-08-11).
   landing-page-standard.md 18: "A free test that captures nothing
   is the most expensive silence on the page." These pages scored
   and upsold, then let the visitor leave without capturing
   anything. Flow now matches 6 and 18 exactly:
     test -> score teaser -> weakest-area callout -> EMAIL GATE
          -> per-question review
   What is GIVEN AWAY, never gated: the raw score, the predicted
   score, the band or pass-line verdict, and the named weak area.
   All of that is already on the results screen before the gate.
   What is GATED: the per-question worked breakdown only.
   The skip link is deliberately low emphasis but always present,
   so a visitor who will not hand over an address is never left at
   a dead end (18, and the 16 checklist).
   Uses only tokens shared by every page in the portfolio, so this
   block is portable as-is.
   ============================================================ */
#d911-lp .gate{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}
#d911-lp .gate .gh{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:8px;color:var(--ink)}
#d911-lp .gate .gs{font-size:14.5px;color:var(--ink-3);line-height:1.6}
#d911-lp .gate .gs b{color:var(--ink)}
#d911-lp .gate .give{margin:15px 0;padding:13px 15px;background:#fff;border:1px solid var(--rule-2);
  border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-3);line-height:1.7}
#d911-lp .gate .give b{color:var(--ink)}
#d911-lp .gate .give i{font-style:normal;font-weight:800;color:var(--ink)}
#d911-lp .gate form{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
#d911-lp .gate input[type=email]{flex:1 1 220px;min-width:0;font-family:inherit;font-size:16px;
  padding:14px 15px;border:1.5px solid var(--rule-2);border-radius:var(--r-sm);color:var(--ink);
  background:#fff;min-height:48px}
#d911-lp .gate input[type=email]:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--rule)}
#d911-lp .gate input[type=email].bad{border-color:var(--negative,#DC2626)}
#d911-lp .gate form .btn{flex:0 0 auto}
#d911-lp .gate .err{display:none;margin-top:9px;font-size:13px;font-weight:700;color:var(--negative,#DC2626)}
#d911-lp .gate .err.on{display:block}
#d911-lp .gate .micro{margin-top:11px;font-size:12px;color:var(--ink-4);line-height:1.55}
#d911-lp .gate .skip{display:block;margin-top:15px;text-align:center;font-size:13px;color:var(--ink-4);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 0}
#d911-lp .gate .skip:hover{color:var(--ink-3)}
@media(max-width:520px){#d911-lp .gate form .btn{width:100%}}

/* ============================================================================
   Everything above this line is the mockup's stylesheet, scoped. Everything
   below is new. Keep that boundary so the two stay diffable.
   ============================================================================ */

/* ---- Icons ---------------------------------------------------------------
   The mockup drew ⚡ in the hero tag and the plan badge, and ⚡ 🎯 ✅ ❌ ▶
   in the selector modal, the comparison table and the exit overlay. Those
   are font glyphs: they render as full-colour Apple/Segoe artwork that
   ignores the palette, changes shape per OS, and pulls the WP emoji
   polyfill into an ads landing page. Replaced with the shared registry in
   inc/pt-icons.php (same stroke system as the rest of the theme), or simply
   dropped where the glyph carried no meaning.
   This rule only positions — colour always comes from the parent. */
#d911-lp .pt-i{display:inline-block;flex:none;vertical-align:middle}

/* ---- Quiz panel as a stable frame ----------------------------------------
   The mockup nested .pfoot INSIDE .pbody, so the footer inherited every
   question's height and the primary button moved down the screen on every
   item. This page makes that worse than its siblings did: a Map Reading item
   carries a 560x350 SVG and a Cross Referencing item carries a four-row
   table, so consecutive questions differ by hundreds of pixels. .pbody is
   now the only scroll region and the frame never moves. */
#d911-lp .panel{display:flex;flex-direction:column;max-height:90vh}
#d911-lp #ovTest .panel{height:min(90vh,720px)}
#d911-lp .pbody{flex:1 1 auto;min-height:0;max-height:none}
#d911-lp .pbar,#d911-lp .prog,#d911-lp .pfoot{flex:none}

/* .pfoot is now a sibling of .pbody, so it needs its own gutter and rule. */
#d911-lp .pfoot{
  display:grid;grid-template-columns:auto auto;justify-content:space-between;
  align-items:center;gap:10px 14px;margin-top:0;padding:14px 22px;
  border-top:1px solid var(--rule);background:#fff}
#d911-lp .pfoot .hint{grid-column:1/-1;font-size:12.5px;color:var(--ink-4);font-weight:600}
#d911-lp .pfoot .sp{display:none}
/* Flex-wrap put Skip in the top-right primary slot and orphaned Next a row
   below it. Explicit placement, and Next is never the smaller control. */
#d911-lp .pfoot .btn-primary{min-height:44px;min-width:128px;order:2}
#d911-lp .pfoot .btn-ghost{
  order:1;min-height:44px;background:none;border:0;padding:0 4px;
  color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
#d911-lp .pfoot .btn-ghost:hover{color:var(--ink);background:none}

/* ---- Selector tiles ------------------------------------------------------
   Was a bare emoji at font-size:24px. Now a real tile, built the same way as
   ccat-paid-lp's .cat-icon. Both tiles are deliberately identical: the
   distinction between the two drills belongs to the label, the one-liner and
   the button, not to a tint difference nobody can resolve. */
#d911-lp .pick .ic{
  width:44px;height:44px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);background:rgba(0,137,172,.12);color:var(--teal);font-size:0}

/* ---- Comparison table ----------------------------------------------------
   .no was --ink-4 on white at 13.2px = 3.14:1, which fails AA. Moved to
   --ink-3 (5.31:1). The icon inherits the cell colour. */
#d911-lp .ftable td.yes,#d911-lp .ftable td.no{white-space:nowrap}
#d911-lp .ftable td.no{color:var(--ink-3)}
#d911-lp .ftable td.yes>svg,#d911-lp .ftable td.no>svg{vertical-align:-2px;margin-right:6px}

/* ---- Cross Referencing items ---------------------------------------------
   Two question scenes reuse .ftable as a records table, where every row is
   data rather than a yes/no comparison. Inside .qscene the first row is a
   header row, so it needs the header treatment .ftable only gives to <th>
   in the selector modal, and the rows must not inherit the nowrap above. */
#d911-lp .qscene .ftable table{font-size:13.4px}
#d911-lp .qscene .ftable td{white-space:normal}
#d911-lp .qscene .ftable th{font-size:10.5px}

/* ---- Email gate ----------------------------------------------------------
   White ground + darker border so it out-ranks the soft-grey surfaces it is
   painted over: two equal grey boxes stacked read as one. The gate itself
   keeps the mockup's placement (it guards the worked answers, and the
   answers are opt-in from the results screen) — only its contrast changes. */
#d911-lp .gate{
  background:var(--bg);border:1.5px solid var(--rule-2);border-radius:var(--r-md);
  padding:22px;box-shadow:var(--sh-sm)}
#d911-lp .gate .give{background:var(--bg-soft)}

/* ---- Hero image slot -----------------------------------------------------
   Dormant until a header image is supplied (see $d911_hero_image_id in the
   template). .hero-fig is only ever printed when that ID is set, so the
   no-image state stays exactly as the mockup shipped it.
   The :has(.hero-fig) guard is what keeps the two states apart — writing
   this as `.hero-in .hero h1` would never match, because the nesting is
   .hero > .hero-in > h1 with no .hero inside .hero-in. That exact dead
   selector shipped in the FireTEAM mockup and went unnoticed until the
   image arrived. */
@media(min-width:981px){
  #d911-lp .hero-in:has(.hero-fig){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
    gap:44px;align-items:start}
  #d911-lp .hero-in:has(.hero-fig) h1,
  #d911-lp .hero-in:has(.hero-fig) .sub{max-width:none}
  #d911-lp .hero-in:has(.hero-fig)>.hero-txt{grid-column:1}
  #d911-lp .hero-fig{grid-column:2;margin:0;position:sticky;top:24px}
}
#d911-lp .hero-fig img{
  display:block;width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--sh-md)}
@media(max-width:980px){#d911-lp .hero-fig{display:none}}

/* ---- Aggregate rating ----------------------------------------------------
   The hero rating uses the shared .stars-rated component from nav.css, which
   already loads on this template. Five solid stars beside the text "4.3/5"
   is a mismatch a visitor can see; .stars-rated renders the real fraction.
   Its own docblock reserves it for aggregate scores — individual 5-star
   review cards keep literal stars, so the cards in #reviews are untouched. */
#d911-lp .trustline .stars-rated{vertical-align:-2px}

/* ---- Review cards --------------------------------------------------------
   The mockup's .who held a bold placeholder and a role line. Real cards
   carry a name, a dated link to the review itself, and the verified mark,
   so the block needs to lay out three lines rather than two. */
#d911-lp .tp .who a{
  color:var(--ink-4);text-decoration:underline;text-underline-offset:2px;
  display:inline-flex;align-items:center;min-height:32px}
#d911-lp .tp .who a:hover{color:var(--trust)}
#d911-lp .tp .vf{display:block;margin-top:3px}

/* ---- Footer link row -----------------------------------------------------
   An indexed page cannot be a crawl dead end, and this one deliberately
   ships no navbar. One quiet row in the footer, below the sources block. */
#d911-lp footer .ftlinks{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.09);font-size:13px}
#d911-lp footer .ftlinks a{color:var(--dark-ink-2);border-bottom:1px solid transparent}
#d911-lp footer .ftlinks a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

/* ---- Small-screen trims --------------------------------------------------
   The results panel has to clear the score block, the module breakdown and
   the upsell on a 390px viewport. */
@media(max-width:520px){
  #d911-lp .gate{padding:18px}
  #d911-lp .pbar .lbl{display:none}
}