/**
 * Border Patrol Logical Reasoning Test landing page
 * (/border-patrol-logical-reasoning-test).
 *
 * Source of record: mockups/border-patrol-logical-reasoning-test.html
 * (built 2026-08-11, ported 2026-08-16). Google Ads destination for the CBP
 * campaign's Logical Reasoning ad group — the one keyword group in that
 * campaign that converts — AND an organic asset. Indexable by design; see
 * the note in border-patrol-lrt.php before adding any robots directive.
 *
 * Every selector is namespaced under #bplrt-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`.
 *
 * 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.
 *
 * Section order and class names are unchanged from the mockup so the two
 * stay diffable. Additions live at the end of the file, clearly marked.
 *
 * Unlike the FireTEAM study-guide port, the mockup's stylesheet arrived
 * brace-balanced (270 rules in, 270 out, zero unscoped selectors), so no
 * CSS defect was carried across.
 */

/* The mockup set this on `html`. It is the one rule that must stay global:
   the page is anchor-navigated from the hero and the sticky bar. */
html{scroll-behavior:smooth}

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

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

/* buttons */
#bplrt-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)}
#bplrt-lp .btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 3px 0 var(--lime-dk)}
#bplrt-lp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--lime-dk),var(--sh-md)}
#bplrt-lp .btn-dark{background:var(--ink);color:#fff}
#bplrt-lp .btn-dark:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
/* secondary is a ghost button, never a second solid primary */
#bplrt-lp .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule-2)}
#bplrt-lp .btn-ghost:hover{border-color:var(--ink)}
#bplrt-lp .btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.3)}
#bplrt-lp .btn-lg{padding:17px 34px;font-size:16.5px;border-radius:12px}
#bplrt-lp .btn-sm{padding:10px 18px;font-size:14px}
#bplrt-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.
   ============================================================ */
#bplrt-lp .brandbar{background:var(--bg-soft);border-bottom:1px solid var(--rule);padding:11px 20px}
#bplrt-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}
#bplrt-lp .logo{font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--ink)}
#bplrt-lp .logo .g{color:var(--lime-dk)}
#bplrt-lp .brandbar .sep{width:1px;height:15px;background:var(--rule-2)}
@media(max-width:560px){#bplrt-lp .brandbar .sep{display:none}}

/* independence sentence, inside .brandbar. On a federal-agency topic this is
   the most important sentence on the page, so the strip keeps the extra weight
   the amber treatment gave it before the navbar was removed. */
#bplrt-lp .brandbar{background:#FFF8E8;border-bottom:1px solid #F2DFB4}
#bplrt-lp .brandbar .logo{color:#4A3505}
#bplrt-lp .brandbar .sep{background:#E3CE9B}
#bplrt-lp .brandbar .in>span:last-child{font-size:13px;font-weight:600;color:#6B4E12;line-height:1.5}
#bplrt-lp .brandbar .in>span:last-child b{color:#4A3505}

/* HERO */
#bplrt-lp .hero{background:linear-gradient(180deg,#F3FAFC 0%,#fff 100%);border-bottom:1px solid var(--rule)}
#bplrt-lp .hero-in{max-width:1180px;margin:0 auto;padding:46px 28px 44px}
#bplrt-lp .hero h1{max-width:19ch}
#bplrt-lp .hero .sub{max-width:62ch;font-size:18px;margin-top:15px}
#bplrt-lp .datesel{margin:26px 0 0;max-width:600px}
#bplrt-lp .datesel .lbl{font-size:13.5px;font-weight:800;color:var(--ink-3);margin-bottom:10px}
#bplrt-lp .chips{display:flex;gap:10px;flex-wrap:wrap}
#bplrt-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}
#bplrt-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}
#bplrt-lp .chip:hover{border-color:var(--teal)}
#bplrt-lp .chip.on{border-color:var(--teal);background:#F2FAFC;box-shadow:0 3px 0 var(--teal-dk)}
#bplrt-lp .chip.on .u{color:var(--teal-dk)}
#bplrt-lp .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
#bplrt-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:70ch}
#bplrt-lp .pathline.show{opacity:1;transform:none}
/* ONE consolidated trust line, clickable, not a decorative pill */
#bplrt-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}
#bplrt-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}
#bplrt-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. */
#bplrt-lp .buyline a,#bplrt-lp a.seelink,#bplrt-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){
  #bplrt-lp .hero-in{padding:24px 28px 22px}
  #bplrt-lp .hero h1{font-size:clamp(29px,3.1vw,37px);line-height:1.1;max-width:30ch}
  #bplrt-lp .hero .sub{font-size:16px;margin-top:10px;max-width:76ch}
  #bplrt-lp .datesel{margin-top:16px}
  #bplrt-lp .datesel .lbl{margin-bottom:7px}
  #bplrt-lp .hero-cta{margin-top:16px}
  #bplrt-lp .buyline{margin-top:10px}
  #bplrt-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. */
  #bplrt-lp .trustline{margin-top:2px}
}
#bplrt-lp .trustline .stars{color:var(--trust);letter-spacing:1px}
#bplrt-lp .trustline .dot{width:4px;height:4px;border-radius:50%;background:var(--rule-2)}
#bplrt-lp .trustline b{color:var(--ink)}

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

/* worked example block (free, on-page, no modal) */
#bplrt-lp .we{border:1.5px solid var(--rule-2);border-radius:var(--r-md);background:#fff;overflow:hidden;max-width:900px}
#bplrt-lp .we .hd{background:var(--bg-soft);border-bottom:1px solid var(--rule);padding:12px 20px;
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
#bplrt-lp .we .bd{padding:22px}
#bplrt-lp .we .facts{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}
#bplrt-lp .we .askq{font-size:17px;font-weight:800;margin:16px 0 13px}
#bplrt-lp .we .row{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--rule-2);border-radius:var(--r-sm);
  padding:13px 15px;margin-bottom:9px;font-size:14.6px;line-height:1.55;color:var(--ink-2)}
#bplrt-lp .we .row .k{font-weight:800;color:var(--ink-4);flex:0 0 15px}
#bplrt-lp .we .row.bad{border-color:#F3C9C9;background:#FEF6F6}
#bplrt-lp .we .row.good{border-color:var(--green);background:#F3FBF5;box-shadow:0 2px 0 var(--green)}
#bplrt-lp .we .row .why{display:block;margin-top:6px;font-size:13.3px;color:var(--ink-3)}
#bplrt-lp .we .row .why b{color:var(--red)}
#bplrt-lp .we .row.good .why b{color:var(--green)}
#bplrt-lp .we .close{margin-top:16px;background:var(--dark);color:#fff;border-radius:var(--r-md);padding:17px 19px;
  font-size:14.8px;line-height:1.6;color:var(--dark-ink-2)}
#bplrt-lp .we .close b{color:#fff}

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

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

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

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

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

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

#bplrt-lp footer{background:var(--dark);color:var(--dark-ink-3);padding:44px 0 36px;font-size:13.5px;line-height:1.65}
#bplrt-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}
#bplrt-lp footer .src b{color:#fff}
#bplrt-lp footer .src .vl{display:block;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08)}
#bplrt-lp footer p{color:var(--dark-ink-3)}

/* sticky bar: no price, high-contrast free CTA, See Pricing as a link */
#bplrt-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}
#bplrt-lp .sticky .in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px}
#bplrt-lp .sticky .txt{color:#fff;font-size:15.5px;font-weight:700}
#bplrt-lp .sticky .txt small{display:block;font-weight:400;font-size:12.5px;color:var(--dark-ink-3);margin-top:2px}
#bplrt-lp .sticky .sp{flex:1}
#bplrt-lp .sticky .seelink{color:#fff;font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}
#bplrt-lp .sticky .seelink:hover{border-color:var(--lime);color:var(--lime)}
@media(max-width:760px){#bplrt-lp .sticky .txt{display:none}#bplrt-lp .sticky .in{justify-content:center}}

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

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

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

/* results */
#bplrt-lp .rtop{text-align:center;padding:4px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:18px}
#bplrt-lp .rtop .big{font-size:52px;font-weight:800;line-height:1}
#bplrt-lp .rtop .of{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin-top:4px}
#bplrt-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)}
#bplrt-lp .dl{display:grid;gap:9px;margin-bottom:20px}
#bplrt-lp .dl .h{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:3px}
#bplrt-lp .dl .r{display:flex;align-items:center;gap:12px;font-size:14px}
/* DEVIATION: 132px in the reference. Widened for reasoning-error labels. */
#bplrt-lp .dl .nm{flex:0 0 176px;font-weight:700}
#bplrt-lp .dl .tk{flex:1;height:8px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden}
#bplrt-lp .dl .tk i{display:block;height:100%;background:var(--teal);border-radius:var(--r-pill)}
#bplrt-lp .dl .vl{flex:0 0 44px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
#bplrt-lp .dl .r.weak .nm{color:var(--red)}
#bplrt-lp .dl .r.weak .tk i{background:var(--red)}
@media(max-width:560px){#bplrt-lp .dl .nm{flex:0 0 120px;font-size:13px}}
/* dynamic, score-aware upsell. Not cut off, clear hierarchy. */
#bplrt-lp .upsell{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}
#bplrt-lp .upsell .gaph{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:9px}
#bplrt-lp .upsell .diag{font-size:14.5px;color:var(--ink-3);line-height:1.6}
#bplrt-lp .upsell .diag b{color:var(--ink)}
#bplrt-lp .plan3{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:15px 17px;margin:16px 0}
#bplrt-lp .plan3 .h{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:9px}
#bplrt-lp .plan3 ol{margin-left:18px;font-size:14px;color:var(--ink-3);line-height:1.65}
#bplrt-lp .plan3 li{margin-bottom:5px}
#bplrt-lp .plan3 b{color:var(--ink)}
#bplrt-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 */
#bplrt-lp .exit .panel{max-width:560px}
#bplrt-lp .exithead{background:var(--amber);color:#3a2400;padding:20px 24px;text-align:center}
#bplrt-lp .exithead h3{font-size:23px;color:#3a2400}
#bplrt-lp .exitbody{padding:24px 26px 26px;text-align:center}
#bplrt-lp .exitbody .s{font-size:15px;color:var(--ink-2);line-height:1.6}
#bplrt-lp .exitbody .s b{font-weight:700}
#bplrt-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}
#bplrt-lp .exitprev .t{font-size:12.8px;color:var(--ink-3);line-height:1.55}
#bplrt-lp .exitprev .t b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}
#bplrt-lp .exitbody .micro{font-size:12px;color:var(--ink-4);margin-top:11px}
#bplrt-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.
   ============================================================ */
#bplrt-lp .gate{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}
#bplrt-lp .gate .gh{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:8px;color:var(--ink)}
#bplrt-lp .gate .gs{font-size:14.5px;color:var(--ink-3);line-height:1.6}
#bplrt-lp .gate .gs b{color:var(--ink)}
#bplrt-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}
#bplrt-lp .gate .give b{color:var(--ink)}
#bplrt-lp .gate .give i{font-style:normal;font-weight:800;color:var(--ink)}
#bplrt-lp .gate form{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
#bplrt-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}
#bplrt-lp .gate input[type=email]:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--rule)}
#bplrt-lp .gate input[type=email].bad{border-color:var(--negative,#DC2626)}
#bplrt-lp .gate form .btn{flex:0 0 auto}
#bplrt-lp .gate .err{display:none;margin-top:9px;font-size:13px;font-weight:700;color:var(--negative,#DC2626)}
#bplrt-lp .gate .err.on{display:block}
#bplrt-lp .gate .micro{margin-top:11px;font-size:12px;color:var(--ink-4);line-height:1.55}
#bplrt-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}
#bplrt-lp .gate .skip:hover{color:var(--ink-3)}
@media(max-width:520px){#bplrt-lp .gate form .btn{width:100%}}
/* ============================================================================
   ADDITIONS MADE DURING THE PORT
   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 selector modal and the comparison
   table. 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).
   This rule only positions — colour always comes from the parent. */
#bplrt-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. .pbody is now the only scroll region and the frame never moves.
   Identical defect to the FireTEAM study guide; identical fix. */
#bplrt-lp .panel{display:flex;flex-direction:column;max-height:90vh}
#bplrt-lp #ovTest .panel{height:min(90vh,700px)}
#bplrt-lp .pbody{flex:1 1 auto;min-height:0;max-height:none}
#bplrt-lp .pbar,#bplrt-lp .prog,#bplrt-lp .pfoot{flex:none}

/* .pfoot is now a sibling of .pbody, so it needs its own gutter and rule. */
#bplrt-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}
#bplrt-lp .pfoot .hint{grid-column:1/-1;font-size:12.5px;color:var(--ink-4);font-weight:600}
#bplrt-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. */
#bplrt-lp .pfoot .btn-primary{min-height:44px;min-width:128px;order:2}
#bplrt-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}
#bplrt-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 4%-luminance tint difference nobody can resolve. */
#bplrt-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. */
#bplrt-lp .ftable td.yes,#bplrt-lp .ftable td.no{white-space:nowrap}
#bplrt-lp .ftable td.no{color:var(--ink-3)}
#bplrt-lp .ftable td.yes>svg,#bplrt-lp .ftable td.no>svg{vertical-align:-2px;margin-right:6px}

/* ---- Email gate ----------------------------------------------------------
   The mockup's Gate.render() REPLACED the results screen and was reachable
   only after the results, as a full-panel takeover. Every other quiz on the
   site (USPS, the four ASVAB branches, CBP v2) shows the gate inline the
   moment the drill ends, with the score and the breakdown still on screen
   above it. This page now does the same, and the gate is painted ABOVE the
   upsell: this page's upsell block is far taller than its siblings', so a
   gate beneath it would sit off-panel.
   White ground + darker border so it out-ranks the soft-grey upsell card
   directly beneath it — two equal grey boxes stacked read as one. */
#bplrt-lp .gate{
  background:var(--bg);border:1.5px solid var(--rule-2);border-radius:var(--r-md);
  padding:22px;margin-bottom:18px;box-shadow:var(--sh-sm)}
#bplrt-lp .gate .give{background:var(--bg-soft)}

/* ---- AI coaching notes ---------------------------------------------------
   Rendered above the worked answers once the address is in. Falls back to
   the static review silently if the endpoint is unavailable. */
#bplrt-lp .ai{
  background:linear-gradient(180deg,#F3FAFC 0%,#fff 100%);
  border:1.5px solid var(--teal);border-radius:var(--r-md);padding:22px;margin-bottom:18px}
#bplrt-lp .ai .aih{
  display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--teal-dk);margin-bottom:11px}
#bplrt-lp .ai .ail{font-size:15px;line-height:1.62;color:var(--ink-2)}
#bplrt-lp .ai .aic{margin-top:16px;display:grid;gap:9px}
#bplrt-lp .ai .aic .r{
  display:flex;gap:11px;align-items:baseline;font-size:14px;
  padding:11px 13px;background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-sm)}
#bplrt-lp .ai .aic .r b{flex:0 0 auto}
#bplrt-lp .ai .aic .r .st{
  margin-left:auto;flex:none;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill)}
#bplrt-lp .ai .aic .r .st.weakness{background:#FEE9E9;color:#A11B1B}
#bplrt-lp .ai .aic .r .st.strength{background:#E7F7EC;color:#116B32}
#bplrt-lp .ai .aic .r .st.average{background:var(--bg-soft);color:var(--ink-3)}
#bplrt-lp .ai .aip{margin-top:15px;font-size:14px;color:var(--ink-3);line-height:1.6}
#bplrt-lp .ai .aip li{margin-left:18px;margin-top:5px}
#bplrt-lp .ai .wait{font-size:14px;color:var(--ink-3);display:flex;align-items:center;gap:10px}
#bplrt-lp .ai .wait i{
  width:15px;height:15px;flex:none;border:2px solid var(--rule-2);border-top-color:var(--teal);
  border-radius:50%;animation:bplrtspin .7s linear infinite}
@keyframes bplrtspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#bplrt-lp .ai .wait i{animation:none}}

/* ---- Hero image slot -----------------------------------------------------
   Dormant until a header image is supplied (see $bplrt_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 :not(: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){
  #bplrt-lp .hero-in:has(.hero-fig){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
    gap:44px;align-items:center}
  #bplrt-lp .hero-in:has(.hero-fig) h1,
  #bplrt-lp .hero-in:has(.hero-fig) .sub{max-width:none}
  #bplrt-lp .hero-in:has(.hero-fig)>.hero-txt{grid-column:1}
  #bplrt-lp .hero-fig{grid-column:2;margin:0}
}
#bplrt-lp .hero-fig img{
  display:block;width:100%;height:auto;border-radius:var(--r-md);box-shadow:var(--sh-md)}
@media(max-width:980px){#bplrt-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.5/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. */
#bplrt-lp .trustline .stars-rated{vertical-align:-2px}

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