/**
* TSA Interview Questions landing page (/tsa-interview-questions) — WON-155.
*
* Source of record: mockups/tsa-interview-questions.html (built 2026-08-13,
* ported 2026-08-21). ORGANIC-ONLY by design: the hiring-process keyword
* cluster monetises at $0 on paid, so this page's job is to rank, inform,
* and route to /tsa-practice-test. Do not point Google Ads at it.
*
* Every selector is namespaced under #tsaiq-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 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 TSA 2026 port a day).
* Kept as px throughout — do not reintroduce rem.
*
* Scoped mechanically with a brace-walking scoper: 267 rules in, 267 out,
* zero unscoped selectors, braces balanced. Section order and class names
* are unchanged from the mockup so the two stay diffable. Additions live at
* the end of the file, marked PORT ADDITIONS.
*/
/* ============================================================
Design system copied verbatim from fireteam-course-2026.html.
CRO 13: ONE unified sans-serif for all headings.
============================================================ */#tsaiq-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;
}#tsaiq-lp *,#tsaiq-lp *::before,#tsaiq-lp *::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}#tsaiq-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}#tsaiq-lp a{color:inherit;text-decoration:none}#tsaiq-lp button{font-family:inherit;cursor:pointer}#tsaiq-lp h1,#tsaiq-lp h2,#tsaiq-lp h3,#tsaiq-lp h4{font-family:var(--sans);font-weight:800;letter-spacing:-.022em;line-height:1.13;color:var(--ink)}#tsaiq-lp h1{font-size:clamp(31px,4.5vw,49px)}#tsaiq-lp h2{font-size:clamp(24px,3.2vw,35px)}#tsaiq-lp h3{font-size:21px}#tsaiq-lp h4{font-size:17px}#tsaiq-lp sup{font-size:.62em;font-weight:700;color:var(--teal)}#tsaiq-lp .wrap{max-width:1180px;margin:0 auto;padding:0 28px}#tsaiq-lp section{padding:62px 0}#tsaiq-lp .sh{max-width:820px;margin-bottom:34px}#tsaiq-lp .sh.center{margin-left:auto;margin-right:auto;text-align:center}#tsaiq-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}#tsaiq-lp .tag.on-dark{color:var(--lime);background:rgba(157,214,79,.09);border-color:rgba(157,214,79,.26)}#tsaiq-lp .sh h2+.sub,#tsaiq-lp .sub{font-size:17px;font-weight:500;color:var(--ink-3);line-height:1.55;margin-top:13px}#tsaiq-lp .sub.on-dark{color:var(--dark-ink-2)}#tsaiq-lp .hl{color:var(--teal-dk)}#tsaiq-lp section.dark{background:var(--dark)}#tsaiq-lp section.dark h2,#tsaiq-lp section.dark h3,#tsaiq-lp section.dark h4{color:#fff}#tsaiq-lp section.dark p{color:var(--dark-ink-2)}#tsaiq-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)}#tsaiq-lp .btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 3px 0 var(--lime-dk)}#tsaiq-lp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--lime-dk),var(--sh-md)}#tsaiq-lp .btn-dark{background:var(--ink);color:#fff}#tsaiq-lp .btn-dark:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}#tsaiq-lp .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule-2)}#tsaiq-lp .btn-ghost:hover{border-color:var(--ink)}#tsaiq-lp .btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.3)}#tsaiq-lp .btn-lg{padding:17px 34px;font-size:16.5px;border-radius:12px}#tsaiq-lp .btn-sm{padding:10px 18px;font-size:14px}#tsaiq-lp .btn-block{width:100%}#tsaiq-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)}#tsaiq-lp .nav-in{max-width:1180px;margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:26px}#tsaiq-lp .logo{font-weight:800;font-size:19px;letter-spacing:-.03em}#tsaiq-lp .logo .g{color:var(--lime-dk)}#tsaiq-lp .nav-links{display:flex;gap:22px;font-size:14.5px;font-weight:600;color:var(--ink-3)}#tsaiq-lp .nav-links a:hover{color:var(--teal)}#tsaiq-lp .nav-sp{flex:1}@media(max-width:860px){#tsaiq-lp .nav-links{display:none}}#tsaiq-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}#tsaiq-lp .hero{background:linear-gradient(180deg,#F3FAFC 0%,#fff 100%);border-bottom:1px solid var(--rule)}#tsaiq-lp .hero-in{max-width:1180px;margin:0 auto;padding:46px 28px 44px}#tsaiq-lp .hero h1{max-width:19ch}#tsaiq-lp .hero .sub{max-width:60ch;font-size:18px;margin-top:15px}#tsaiq-lp .datesel{margin:26px 0 0;max-width:600px}#tsaiq-lp .datesel .lbl{font-size:13.5px;font-weight:800;color:var(--ink-3);margin-bottom:10px}#tsaiq-lp .chips{display:flex;gap:10px;flex-wrap:wrap}#tsaiq-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}#tsaiq-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}#tsaiq-lp .chip:hover{border-color:var(--teal)}#tsaiq-lp .chip.on{border-color:var(--teal);background:#F2FAFC;box-shadow:0 3px 0 var(--teal-dk)}#tsaiq-lp .chip.on .u{color:var(--teal-dk)}#tsaiq-lp .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}#tsaiq-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}#tsaiq-lp .pathline.show{opacity:1;transform:none}#tsaiq-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}#tsaiq-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}#tsaiq-lp .trustline .tpmini:hover{border-color:var(--trust);color:var(--trust)}#tsaiq-lp .trustline .stars{color:var(--trust);letter-spacing:1px}#tsaiq-lp .trustline .dot{width:4px;height:4px;border-radius:50%;background:var(--rule-2)}#tsaiq-lp .trustline b{color:var(--ink)}#tsaiq-lp .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}#tsaiq-lp .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media(max-width:880px){#tsaiq-lp .grid2,#tsaiq-lp .grid3{grid-template-columns:1fr}}#tsaiq-lp .card{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:24px}#tsaiq-lp .card .n{font-size:30px;font-weight:800;color:var(--teal-dk);line-height:1;margin-bottom:9px}#tsaiq-lp .card h4{margin-bottom:7px}#tsaiq-lp .card p{font-size:14.8px;color:var(--ink-3);line-height:1.6}#tsaiq-lp .card-d{background:var(--dark-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:24px}#tsaiq-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}#tsaiq-lp .card-d p{font-size:14.8px;color:var(--dark-ink-2);line-height:1.6}#tsaiq-lp .card-d .hl{color:#fff;font-weight:700}#tsaiq-lp .roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:960px;margin:0 auto}@media(max-width:880px){#tsaiq-lp .roles{grid-template-columns:1fr 1fr}}#tsaiq-lp .role{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:20px 16px;text-align:center}#tsaiq-lp .role .sc{font-size:27px;font-weight:800;color:var(--teal-dk);line-height:1}#tsaiq-lp .role .nm{font-size:14px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.35}#tsaiq-lp .role .pc{font-size:12.5px;color:var(--ink-4);margin-top:6px;font-weight:600}#tsaiq-lp .tblw{overflow-x:auto;border:1.5px solid var(--rule-2);border-radius:var(--r-md);background:#fff}#tsaiq-lp table.fmt{width:100%;border-collapse:collapse;font-size:14.8px;min-width:660px}#tsaiq-lp table.fmt th,#tsaiq-lp table.fmt td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule)}#tsaiq-lp table.fmt th{background:var(--bg-soft);font-size:11.5px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--slate)}#tsaiq-lp table.fmt tbody tr:last-child td{border-bottom:0}#tsaiq-lp table.fmt td b{color:var(--ink)}#tsaiq-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}#tsaiq-lp .pill-f.v{background:#FDF1DC;color:#8A5B00}#tsaiq-lp .pill-f.nc{background:#FEECEC;color:#991B1B}#tsaiq-lp .pill-f.s{background:#EEF2F6;color:#47535E}#tsaiq-lp .phases{display:grid;gap:14px;max-width:900px}#tsaiq-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}#tsaiq-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}#tsaiq-lp .phase h4{margin-bottom:5px}#tsaiq-lp .phase p{font-size:14.8px;line-height:1.6}#tsaiq-lp .tps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media(max-width:880px){#tsaiq-lp .tps{grid-template-columns:1fr}}#tsaiq-lp .tp{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}#tsaiq-lp .tp .stars{color:var(--trust);font-size:15px;letter-spacing:1px}#tsaiq-lp .tp .score{font-size:15px;font-weight:800;color:var(--teal-dk);margin:8px 0 9px}#tsaiq-lp .tp q{display:block;font-size:14.8px;color:var(--ink-2);line-height:1.6;quotes:none}#tsaiq-lp .tp .who{font-size:12.5px;color:var(--ink-4);margin-top:12px;font-weight:600;line-height:1.5}#tsaiq-lp .tp .who b{display:block;color:var(--ink);font-size:13.5px}#tsaiq-lp .tp .vf{display:inline-block;margin-top:5px;color:var(--trust);font-weight:700}#tsaiq-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)}#tsaiq-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)}#tsaiq-lp .plan .win{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);text-align:center}#tsaiq-lp .plan h3{text-align:center;margin-top:6px}#tsaiq-lp .plan .price{font-size:44px;font-weight:800;text-align:center;line-height:1.1;margin:10px 0 3px}#tsaiq-lp .plan .pn{text-align:center;font-size:13px;color:var(--ink-4);font-weight:600}#tsaiq-lp .plan ul{list-style:none;margin:20px 0 22px}#tsaiq-lp .plan li{font-size:14.8px;color:var(--ink-2);padding:8px 0 8px 27px;position:relative;border-bottom:1px solid var(--rule)}#tsaiq-lp .plan li:last-child{border-bottom:0}#tsaiq-lp .plan li::before{content:"✓";position:absolute;left:0;color:var(--lime-dk);font-weight:800}#tsaiq-lp .guarantee{max-width:700px;margin:24px auto 0;text-align:center;font-size:14.5px;color:var(--ink-3);line-height:1.6}#tsaiq-lp .guarantee b{color:var(--ink)}#tsaiq-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}#tsaiq-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}#tsaiq-lp .about .cred{font-size:13px;color:var(--ink-4);font-weight:700;margin:3px 0 9px}#tsaiq-lp .about p{font-size:14.8px;color:var(--ink-3);line-height:1.6}#tsaiq-lp .faq{max-width:820px}#tsaiq-lp .fq{border-bottom:1px solid var(--rule);padding:18px 0}#tsaiq-lp .fq summary{font-weight:800;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}#tsaiq-lp .fq summary::-webkit-details-marker{display:none}#tsaiq-lp .fq summary::after{content:"+";color:var(--teal);font-size:22px;line-height:1}#tsaiq-lp .fq[open] summary::after{content:"\2013"}#tsaiq-lp .fq p{margin-top:11px;font-size:15px;color:var(--ink-3);line-height:1.65}#tsaiq-lp footer{background:var(--dark);color:var(--dark-ink-3);padding:44px 0 36px;font-size:13.5px;line-height:1.65}#tsaiq-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}#tsaiq-lp footer .src b{color:#fff}#tsaiq-lp footer p{color:var(--dark-ink-3)}#tsaiq-lp footer a{border-bottom:1px solid rgba(255,255,255,.25)}#tsaiq-lp footer a:hover{color:var(--lime);border-color:var(--lime)}#tsaiq-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}#tsaiq-lp .sticky .in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px}#tsaiq-lp .sticky .txt{color:#fff;font-size:15.5px;font-weight:700}#tsaiq-lp .sticky .txt small{display:block;font-weight:400;font-size:12.5px;color:var(--dark-ink-3);margin-top:2px}#tsaiq-lp .sticky .sp{flex:1}#tsaiq-lp .sticky .seelink{color:#fff;font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px}#tsaiq-lp .sticky .seelink:hover{border-color:var(--lime);color:var(--lime)}@media(max-width:760px){#tsaiq-lp .sticky .txt{display:none}#tsaiq-lp .sticky .in{justify-content:center}}/* ============ MODALS ============ */#tsaiq-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}#tsaiq-lp .ov.on{display:flex}#tsaiq-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)}#tsaiq-lp .pbar{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--rule);
background:var(--bg-soft)}#tsaiq-lp .pbar .lbl{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}#tsaiq-lp .pbar .qn{font-size:13px;font-weight:700;color:var(--ink-3)}#tsaiq-lp .pbar .sp{flex:1}#tsaiq-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}#tsaiq-lp .pbar .clock.warn{color:var(--amber);border-color:var(--amber)}#tsaiq-lp .pbar .clock.crit{color:var(--red);border-color:var(--red)}#tsaiq-lp .pbar .x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink-4);padding:0 4px}#tsaiq-lp .prog{height:4px;background:var(--rule)}#tsaiq-lp .prog i{display:block;height:100%;background:var(--teal);transition:width .25s var(--ease)}#tsaiq-lp .pbody{padding:22px;max-height:76vh;overflow-y:auto}#tsaiq-lp .selhead{text-align:center;margin-bottom:20px}#tsaiq-lp .selhead h3{font-size:20px}#tsaiq-lp .selhead p{font-size:14.5px;color:var(--ink-3);margin-top:7px}#tsaiq-lp .picks{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:620px){#tsaiq-lp .picks{grid-template-columns:1fr}}#tsaiq-lp .pick{border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:20px 18px;text-align:center}#tsaiq-lp .pick .ic{font-size:24px}#tsaiq-lp .pick h4{margin:7px 0 6px}#tsaiq-lp .pick .best{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-dk);
margin-bottom:9px}#tsaiq-lp .pick .oneline{font-size:13.8px;color:var(--ink-3);line-height:1.55;margin-bottom:15px;min-height:62px}#tsaiq-lp .ftable{margin-top:18px;border:1px solid var(--rule-2);border-radius:var(--r-sm);overflow:hidden}#tsaiq-lp .ftable table{width:100%;border-collapse:collapse;font-size:13.2px}#tsaiq-lp .ftable th,#tsaiq-lp .ftable td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left}#tsaiq-lp .ftable th{background:var(--bg-soft);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}#tsaiq-lp .ftable tr:last-child td{border-bottom:0}#tsaiq-lp .ftable td.yes{color:var(--green);font-weight:700}#tsaiq-lp .ftable td.no{color:var(--ink-4);font-weight:700}#tsaiq-lp .qcat{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
margin-bottom:11px}#tsaiq-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}#tsaiq-lp .qscene b{color:var(--ink)}#tsaiq-lp .qtext{font-size:17px;font-weight:700;line-height:1.45;margin-bottom:15px}#tsaiq-lp .opts{display:grid;gap:9px}#tsaiq-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}#tsaiq-lp .opt:hover{border-color:var(--teal);background:#F8FCFD}#tsaiq-lp .opt.sel{border-color:var(--teal);background:#F2FAFC;box-shadow:0 2px 0 var(--teal-dk)}#tsaiq-lp .opt .k{font-weight:800;color:var(--teal);flex:0 0 14px}#tsaiq-lp .pfoot{display:flex;align-items:center;gap:11px;margin-top:17px;flex-wrap:wrap}#tsaiq-lp .pfoot .hint{font-size:12.5px;color:var(--ink-4);font-weight:600}#tsaiq-lp .pfoot .sp{flex:1}#tsaiq-lp .rtop{text-align:center;padding:4px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:18px}#tsaiq-lp .rtop .big{font-size:52px;font-weight:800;line-height:1}#tsaiq-lp .rtop .of{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin-top:4px}#tsaiq-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)}#tsaiq-lp .dl{display:grid;gap:9px;margin-bottom:20px}#tsaiq-lp .dl .r{display:flex;align-items:center;gap:12px;font-size:14px}#tsaiq-lp .dl .nm{flex:0 0 172px;font-weight:700}#tsaiq-lp .dl .tk{flex:1;height:8px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden}#tsaiq-lp .dl .tk i{display:block;height:100%;background:var(--teal);border-radius:var(--r-pill)}#tsaiq-lp .dl .vl{flex:0 0 44px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}#tsaiq-lp .dl .r.weak .nm{color:var(--red)}#tsaiq-lp .dl .r.weak .tk i{background:var(--red)}@media(max-width:620px){#tsaiq-lp .dl .nm{flex:0 0 120px;font-size:13px}}#tsaiq-lp .upsell{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}#tsaiq-lp .upsell .gaph{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:9px}#tsaiq-lp .upsell .diag{font-size:14.5px;color:var(--ink-3);line-height:1.6}#tsaiq-lp .upsell .diag b{color:var(--ink)}#tsaiq-lp .plan3{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:15px 17px;margin:16px 0}#tsaiq-lp .plan3 .h{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:9px}#tsaiq-lp .plan3 ol{margin-left:18px;font-size:14px;color:var(--ink-3);line-height:1.65}#tsaiq-lp .plan3 li{margin-bottom:5px}#tsaiq-lp .plan3 b{color:var(--ink)}#tsaiq-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}#tsaiq-lp .exit .panel{max-width:560px}#tsaiq-lp .exithead{background:var(--amber);color:#3a2400;padding:20px 24px;text-align:center}#tsaiq-lp .exithead h3{font-size:23px;color:#3a2400}#tsaiq-lp .exitbody{padding:24px 26px 26px;text-align:center}#tsaiq-lp .exitbody .s{font-size:15px;color:var(--ink-2);line-height:1.6}#tsaiq-lp .exitbody .s b{font-weight:700}#tsaiq-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}#tsaiq-lp .exitprev .t{font-size:12.8px;color:var(--ink-3);line-height:1.55}#tsaiq-lp .exitprev .t b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px}#tsaiq-lp .exitbody .micro{font-size:12px;color:var(--ink-4);margin-top:11px}#tsaiq-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}/* ============================================================
NEW COMPONENTS FOR THIS PAGE ONLY. three additions.
1. .qa / .ansrow / .ans. the whole teaching value of this page is the
side-by-side of a weak answer and a strong answer to the same practice
question, plus the reason. No existing component carries a labelled
two-column contrast, so this is a genuine gap rather than a restyle.
2. .scored. an inline pill that names the rubric element the answer is
being scored on. Used roughly ten times; a shared class beats ten
inline styles.
3. .vflag. an inline [VERIFY] marker. The honesty convention needs the
marker visible in the body copy, not only in the footer sources block.
============================================================ */#tsaiq-lp .qa{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px 24px;margin-bottom:16px}#tsaiq-lp .qa .qlab{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);
margin-bottom:9px}#tsaiq-lp .qa .qq{font-size:17.5px;font-weight:800;line-height:1.35;color:var(--ink)}#tsaiq-lp .ansrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}@media(max-width:760px){#tsaiq-lp .ansrow{grid-template-columns:1fr}}#tsaiq-lp .ans{border-radius:var(--r-sm);padding:14px 16px;font-size:14.4px;line-height:1.6;color:var(--ink-2)}#tsaiq-lp .ans .l{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-bottom:7px}#tsaiq-lp .ans.weak{background:#FEF2F2;border:1px solid #FCA5A5}#tsaiq-lp .ans.weak .l{color:#991B1B}#tsaiq-lp .ans.strong{background:#F0FDF4;border:1px solid #86EFAC}#tsaiq-lp .ans.strong .l{color:#166534}#tsaiq-lp .qa .why{margin-top:14px;font-size:14.4px;color:var(--ink-3);line-height:1.65;
border-top:1px solid var(--rule);padding-top:13px}#tsaiq-lp .qa .why b{color:var(--ink)}#tsaiq-lp .scored{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
background:#EAF6FA;color:var(--teal-dk);border:1px solid #BFE3EE;border-radius:var(--r-pill);
padding:3px 10px;white-space:nowrap}#tsaiq-lp .vflag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;background:#FDF1DC;
color:#8A5B00;border:1px solid #F0D7A8;border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap;
vertical-align:middle}/* ===== CANON COMPLIANCE PASS (added 2026-08-17) ==============================
This page was built outside the repo, against the standard as it stood
around 3 August (CCAT audit, CRO 01 to CRO 15). This block brings it to
§16, §19 and §20 without touching a word of its content. Every fix below
was diagnosed in Chromium at 1366x657 and 390x844 and bisected to its
cause, never inferred from a grep.
Measured state on arrival, and the reasoning:
strategy/_research/incoming-landing-pages-audit-2026-08-17.md
1. EXACTLY ONE STICKY ELEMENT (§16). The bottom bar is the one. The page
shipped with nav{position:sticky} as well, so two persistent elements
competed and the one NOT carrying the primary CTA won attention it had
not earned. The nav keeps its links, which are worth having on a
keyword page for internal linking. It just stops following the visitor
down the page. Same fix as 4adffe5 applied to the repo siblings.
2. TAP TARGETS AT 44px (§19). Only genuine targets are raised: the
wordmark, the Trustpilot link, the sticky bar's buy link, the module
deep-dive link, and .btn-sm, which measured 43px and missed by one
pixel. Inline links inside prose are deliberately NOT touched. A 44px
anchor in the middle of a paragraph breaks the line box, and the rule
is about tap targets, not about every on the page. The first scan
counted 204 offenders here; 166 of them were prose links and the rule
never meant them.
3. NO HORIZONTAL OVERFLOW AT 390px (§16). Cause bisected rather than
guessed, per the 2026-08-14 note in the learning log: it is unbroken
primary-source URLs in the Sources block, which contain no break
opportunity, plus one long [VERIFY] flag span. Wide tables inside an
overflow-x:auto wrapper are innocent and are left alone.
4. MOBILE KEYBOARD (§20.5, CRO 19). Every answer input declares an
inputmode so a phone shows the right keyboard on a timed test.
========================================================================= */#tsaiq-lp nav{position:static}#tsaiq-lp nav .logo,#tsaiq-lp .trustline .tpmini,#tsaiq-lp .sticky .seelink,#tsaiq-lp .card .go{
min-height:44px;display:inline-flex;align-items:center}#tsaiq-lp .btn-sm{min-height:44px}#tsaiq-lp .src a,#tsaiq-lp .sources a,#tsaiq-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. */#tsaiq-lp .scored,#tsaiq-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){#tsaiq-lp .hero-in{padding:24px 28px 22px}#tsaiq-lp .hero h1{font-size:clamp(29px,3.1vw,37px);line-height:1.1;max-width:30ch}#tsaiq-lp .hero .sub{font-size:16px;margin-top:10px;max-width:76ch}#tsaiq-lp .hero-cta{margin-top:16px}#tsaiq-lp .datesel{margin-top:16px}#tsaiq-lp .datesel .lbl{margin-bottom:7px}#tsaiq-lp .buyline,#tsaiq-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. */#tsaiq-lp .trustline{margin-top:2px}}/* ============================================================================
EMAIL GATE (added 2026-08-17, ported from pages/911-dispatcher-test.html)
§6 and §18: "a free test that captures nothing is the most expensive
silence on the page." This page carries 77% of the CritiCall campaign's
spend and about 1,112 clicks a month, and it scored the visitor, named
their weakest module, upsold them and captured nothing.
§20.2, the friction contract, decides what may sit behind the ask:
GIVEN AWAY, always raw score, percentage, band verdict, the full
per-module breakdown, and the named weakest module.
All of it renders above this box.
GATED the per-question worked breakdown, and only that.
THE ASK framed as delivery, never as "unlock".
THE SKIP LINK mandatory, always visible, reveals everything.
The page's friction copy is true either way: nothing it promises for free
moves behind the box.
Tokens only, so the block stays portable to the other twelve pages.
========================================================================= */#tsaiq-lp .gate{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px}#tsaiq-lp .gate .gh{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:8px;color:var(--ink)}#tsaiq-lp .gate .gs{font-size:14.5px;color:var(--ink-3);line-height:1.6}#tsaiq-lp .gate .gs b{color:var(--ink)}#tsaiq-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}#tsaiq-lp .gate .give b{color:var(--ink)}#tsaiq-lp .gate .give i{font-style:normal;font-weight:800;color:var(--ink)}#tsaiq-lp .gate form{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}#tsaiq-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}#tsaiq-lp .gate input[type=email]:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--rule)}#tsaiq-lp .gate input[type=email].bad{border-color:var(--negative,#DC2626)}#tsaiq-lp .gate form .btn{flex:0 0 auto}#tsaiq-lp .gate .err{display:none;margin-top:9px;font-size:13px;font-weight:700;color:var(--negative,#DC2626)}#tsaiq-lp .gate .err.on{display:block}#tsaiq-lp .gate .micro{margin-top:11px;font-size:12px;color:var(--ink-4);line-height:1.55}#tsaiq-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;min-height:44px}#tsaiq-lp .gate .skip:hover{color:var(--ink-3)}@media(max-width:520px){#tsaiq-lp .gate form .btn{width:100%}}
/* ======================= PORT ADDITIONS (2026-08-21) =======================
Everything below is new relative to the mockup, each with a reason. */
/* The wrapper replaces the mockup's body, so it needs the box-sizing the
`*` reset gives its descendants. */
#tsaiq-lp{box-sizing:border-box}
/* The hero rating uses the shared .stars-rated component from nav.css
(fractional fill from --stars-rating), because five solid glyphs beside
"4.3/5" is a mismatch a visitor can see. Same treatment as dispatcher-911.
Individual 5-star review cards would keep literal stars; this page ships
none until Chris supplies interview-specific verified reviews. */
#tsaiq-lp .trustline .stars-rated{vertical-align:-2px}
/* TrustBox replaces the three placeholder review cards (the source file
forbids filling them with non-interview reviews). Fallback line renders
until the widget script paints. */
#tsaiq-lp .tp-widget-reviews{margin-top:6px}
#tsaiq-lp .tp-fallback{display:block;text-align:center;font-size:14px;color:var(--ink-3);padding:12px 0}
#tsaiq-lp .tp-fallback a{border-bottom:1px solid var(--rule-2)}
#tsaiq-lp .tp-fallback a:hover{color:var(--trust);border-color:var(--trust)}
/* ======================= CRITIQUE FIXES (2026-08-22) =======================
From the /impeccable critique dual-agent run (20/40; snapshot in
.impeccable/critique/). These deliberately deviate from the mockup where
the mockup contradicted docs/guidelines/landing-page-standard.md — David's
call: house standard wins. Every deviation is noted in the deploy README.
========================================================================= */
/* ---- 1. Contrast tokens -------------------------------------------------
--ink-4 #8A929D measured 3.14:1 on white and 2.96:1 on --bg-soft, and it
carried ~14 pieces of load-bearing text: the gate's skip link, the
unsubscribe promise, the non-affiliation line. One token was most of the
page's AA failures. #646D79 measures 5.24:1 on white, 4.93:1 on --bg-soft.
--teal is kept for borders and fills (where 4.06:1 is fine) and a darker
sibling carries text. --amber at 2.17:1 never passes on white, even large. */
#tsaiq-lp{
--ink-4:#646D79;
--teal-txt:#00728F; /* 5.52:1 on white */
--amber-txt:#8A5B00; /* 6.34:1 on white */
}
#tsaiq-lp .qa .qlab,#tsaiq-lp .qcat,#tsaiq-lp .opt .k,#tsaiq-lp .fq summary::after,
#tsaiq-lp .scored{color:var(--teal-txt)}
#tsaiq-lp .card .n{color:var(--teal-dk)}
#tsaiq-lp .card[style*="--amber"] .n,#tsaiq-lp .grid3 .card .n[style*="amber"]{color:var(--amber-txt)}
/* The mockup's own .sh h2+.sub (0,2,1 inside the id) outranked .sub.on-dark
(0,2,0), so the one dark-section subhead that follows its h2 rendered
#4a525d on #0b1116 = 2.40:1. Invisible in code review, obvious in a probe. */
#tsaiq-lp .sh h2+.sub.on-dark,#tsaiq-lp .sub.on-dark{color:var(--dark-ink-2)}
/* ---- 2. Focus, from the palette ----------------------------------------
The page had exactly one custom focus style and it was worse than the
browser default: a #e9ecf1 ring at 1.11:1 against its own surround. */
#tsaiq-lp :focus-visible,#tsaiq-lp .panel :focus-visible{
outline:3px solid var(--teal-txt);outline-offset:2px;border-radius:6px}
#tsaiq-lp .gate input[type=email]:focus{
outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,114,143,.35)}
#tsaiq-lp .gate input[type=email]:focus-visible{outline:3px solid var(--teal-txt);outline-offset:1px}
/* Announced-only text for the live region that reports scenario progress. */
#tsaiq-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}
/* ---- 3. Tap targets at 44px (§16) --------------------------------------- */
#tsaiq-lp .fq summary{min-height:44px;align-items:center}
#tsaiq-lp .pbar .x{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#tsaiq-lp .seelink,#tsaiq-lp .pathgo{display:inline-flex;align-items:center;min-height:44px}
#tsaiq-lp footer .ftrow a,#tsaiq-lp .buyline a{display:inline-flex;align-items:center;min-height:44px}
/* ---- 4. Sticky bar arrives after the hero (§18) -------------------------
Over the hero it put three buttons for one action in the first viewport
and competed with the CTA it duplicates. */
#tsaiq-lp .sticky{transform:translateY(100%);transition:transform .28s var(--ease);will-change:transform}
#tsaiq-lp .sticky.on{transform:none}
@media (prefers-reduced-motion:reduce){#tsaiq-lp .sticky{transition:none}}
/* ---- 5. Hero: friction line + buy path as a text link (§5) -------------- */
#tsaiq-lp .herofric{margin-top:12px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
#tsaiq-lp .buyline{margin-top:6px;font-size:13.5px}
#tsaiq-lp .buyline a{color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--rule-2)}
#tsaiq-lp .buyline a:hover{color:var(--ink);border-color:var(--ink)}
#tsaiq-lp .pathline .pathgo{margin-left:6px;font-weight:800;color:var(--teal-txt);
border-bottom:2px solid var(--lime);white-space:nowrap}
/* ---- 6. The onward click, which is what this page is measured on -------- */
#tsaiq-lp .card.lead{display:flex;gap:24px;align-items:center;justify-content:space-between;
flex-wrap:wrap;margin-bottom:18px;border-color:var(--ink);box-shadow:var(--sh-sm)}
#tsaiq-lp .card.lead>div{flex:1 1 420px;min-width:0}
#tsaiq-lp .card.lead h3{font-size:20px;margin-bottom:6px}
#tsaiq-lp .card.lead p{font-size:14.8px;color:var(--ink-3);line-height:1.6;margin:0}
#tsaiq-lp .card.lead .btn{flex:0 0 auto}
#tsaiq-lp .faqonward{margin-top:14px;text-align:center;font-size:14.5px;color:var(--ink-3)}
#tsaiq-lp .faqonward a{font-weight:700;color:var(--ink);border-bottom:2px solid var(--lime)}
/* ---- 7. Results screen (§17 CRO 11) ------------------------------------
Score, the line that says the score is not a grade, and the first action
now fit one 657px viewport together. The number shrinks because the page
has already said, in its own copy, that the number means the least. */
#tsaiq-lp .rtop{padding:2px 0 16px}
#tsaiq-lp .rtop .rhead{font-size:12.5px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
#tsaiq-lp .rtop .big{font-size:34px;font-weight:800;line-height:1.05}
#tsaiq-lp .rtop .big .den{font-size:20px;font-weight:700;color:var(--ink-4)}
#tsaiq-lp .rtop .of{font-size:12.5px;font-weight:700;letter-spacing:.04em;
text-transform:none;color:var(--ink-3);margin-top:2px}
#tsaiq-lp .rtop .rnote{max-width:46ch;margin:10px auto 0;font-size:13.5px;
color:var(--ink-3);line-height:1.55}
/* Meaning was carried by red alone. A word carries it now. */
#tsaiq-lp .dl .r.weak .nm{color:var(--red);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#tsaiq-lp .dl .wtag{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:#fff;background:var(--red);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
#tsaiq-lp .upsell .btn+.btn{margin-top:10px}
#tsaiq-lp .resnext{font-size:15px;line-height:1.3;text-align:center}
#tsaiq-lp .resbuy{display:block;margin-top:13px;text-align:center;font-size:13.5px;
color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;min-height:44px;
padding-top:12px}
#tsaiq-lp .resbuy:hover{color:var(--ink)}
#tsaiq-lp .rfine{margin-top:16px;font-size:12.5px;color:var(--ink-3);text-align:center}
/* ---- 8. Question footer: Back, and a Next that cannot mis-score --------- */
#tsaiq-lp .pfoot .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
#tsaiq-lp .pfoot .btn[disabled]:hover{transform:none;box-shadow:none}
/* ---- 9. The gate as real controls --------------------------------------
.skip was an with no href: not keyboard-reachable, which made the
friction contract's mandatory escape hatch a dead end without a mouse.
It is a