/** * FireTEAM Study Guide landing page (/fireteam-test-study-guide). * * Source of record: mockups/fireteam-study-guide.html (built 2026-08-11). * Ported 2026-08-15. Every selector is namespaced under #ftsg-lp, INCLUDING * the custom properties: the mockup declared them on :root and the theme's * own design 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. * * One defect fixed in transit: the mockup carried an orphaned declaration * tail after `.brandbar .in>span:last-child` — * font-size:12.5px;color:var(--ink-4);padding:8px 20px} * — a leftover with a stray closing brace that unbalanced the stylesheet. * Browsers error-recover past it; nothing else did. Removed, not ported. * * 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. */ /* The mockup set this on `html`. It is the one rule that must stay global: the whole page is anchor-navigated from the sticky contents list. */ html{scroll-behavior:smooth} /* ============================================================ CRO 13: ONE unified sans-serif for all headings. No decorative or italic serif in section titles anywhere. ============================================================ */ #ftsg-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; /* ---- Vertical rhythm ------------------------------------------------- Before this existed the page ran 15 sections at `padding:62px 0`, which made every boundary exactly 124px — fourteen times, with no variation. Interval carried no information, so borders were recruited to do the separating instead (29 bordered boxes, nested three deep in places). Four tiers, assigned by CONTENT WEIGHT rather than nesting depth: movement a new act of the page — Orient / Learn / Test / Decide section a new subject inside an act chapter a new chapter inside the guide block a heading and the body it belongs to Each step is a visible ratio against the one below it, so a reader can infer weight from distance without reading a word. */ --rh-movement:112px; --rh-section:64px; --rh-chapter:48px; --rh-block:34px; } @media(max-width:820px){ /* Sections roughly double in height on a phone, so holding desktop padding just lengthens a document that is already 43 screens. The RATIOS between tiers are preserved — only the absolute values come down. */ #ftsg-lp{--rh-movement:72px;--rh-section:44px;--rh-chapter:32px;--rh-block:26px} } #ftsg-lp *,#ftsg-lp *::before,#ftsg-lp *::after{box-sizing:border-box;margin:0;padding:0} /* Icons come from inc/pt-icons.php and inherit colour from their parent, so they are never styled by name here — only positioned. Anything that needs a different colour changes the PARENT's colour. */ #ftsg-lp .pt-i{display:inline-block;flex:none;vertical-align:middle} #ftsg-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} #ftsg-lp a{color:inherit;text-decoration:none} #ftsg-lp button{font-family:inherit;cursor:pointer} #ftsg-lp h1,#ftsg-lp h2,#ftsg-lp h3,#ftsg-lp h4{font-family:var(--sans);font-weight:800;letter-spacing:-.022em;line-height:1.13;color:var(--ink)} #ftsg-lp h1{font-size:clamp(31px,4.5vw,49px)} #ftsg-lp h2{font-size:clamp(24px,3.2vw,35px)} #ftsg-lp h3{font-size:21px} #ftsg-lp h4{font-size:17px} #ftsg-lp sup{font-size:.62em;font-weight:700;color:var(--teal)} #ftsg-lp .wrap{max-width:1180px;margin:0 auto;padding:0 28px} #ftsg-lp section{padding:var(--rh-section) 0} /* A section that OPENS one of the four movements gets the largest interval on the page. Only three carry it, so the reader gets three unmistakable "new act" beats in 20,000px instead of fourteen identical ones. */ #ftsg-lp section.mv{padding-top:var(--rh-movement)} /* section header block: functional tag, bold H2, muted medium subhead (CRO 13/14) */ #ftsg-lp .sh{max-width:820px;margin-bottom:var(--rh-block)} #ftsg-lp .sh.center{margin-left:auto;margin-right:auto;text-align:center} #ftsg-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} #ftsg-lp .tag.on-dark{color:var(--lime);background:rgba(157,214,79,.09);border-color:rgba(157,214,79,.26)} #ftsg-lp .sh h2+.sub,#ftsg-lp .sub{font-size:17px;font-weight:500;color:var(--ink-3);line-height:1.55;margin-top:13px} #ftsg-lp .sub.on-dark{color:var(--dark-ink-2)} #ftsg-lp .hl{color:var(--teal-dk)} #ftsg-lp section.dark{background:var(--dark)} #ftsg-lp section.dark h2,#ftsg-lp section.dark h3,#ftsg-lp section.dark h4{color:#fff} #ftsg-lp section.dark p{color:var(--dark-ink-2)} /* buttons */ #ftsg-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)} #ftsg-lp .btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 3px 0 var(--lime-dk)} #ftsg-lp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--lime-dk),var(--sh-md)} #ftsg-lp .btn-dark{background:var(--ink);color:#fff} #ftsg-lp .btn-dark:hover{transform:translateY(-1px);box-shadow:var(--sh-md)} /* CRO 03: secondary is a ghost button, never a second solid primary */ #ftsg-lp .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--rule-2)} #ftsg-lp .btn-ghost:hover{border-color:var(--ink)} #ftsg-lp .btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.3)} #ftsg-lp .btn-lg{padding:17px 34px;font-size:16.5px;border-radius:12px} #ftsg-lp .btn-sm{padding:10px 18px;font-size:14px} #ftsg-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. ============================================================ */ #ftsg-lp .brandbar{background:var(--bg-soft);border-bottom:1px solid var(--rule);padding:11px 20px} #ftsg-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} #ftsg-lp .logo{font-weight:800;font-size:17px;letter-spacing:-.03em;color:var(--ink)} #ftsg-lp .logo .g{color:var(--lime-dk)} #ftsg-lp .brandbar .sep{width:1px;height:15px;background:var(--rule-2)} @media(max-width:560px){#ftsg-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. */ #ftsg-lp .brandbar .in>span:last-child{font-size:12.5px;color:var(--ink-4);line-height:1.5} /* On a phone this strip was 114px — 13.5% of a 390x844 viewport and 17.7% of 360x640 — all of it spent on a legal sentence wrapping to three lines, before the visitor sees anything they came for. The sentence stays in full (it is a disclaimer, not decoration); it is the type and the padding that come down. */ @media(max-width:820px){ #ftsg-lp .brandbar{padding:8px 20px} #ftsg-lp .brandbar .in{gap:2px 10px} #ftsg-lp .brandbar .in>span:last-child{font-size:11.5px;line-height:1.38} } /* Very short viewports (360x640 and similar older/smaller handsets) have ~547px of usable height once the sticky bar is subtracted. Headline, urgency selector and one action will not all fit alongside a seven-line paragraph, so the paragraph yields: clamped to two lines rather than hidden, because `display:none` would take it out of the accessibility tree as well as the layout. The full text is one scroll away and unchanged for screen readers at every other size. */ @media(max-height:700px) and (max-width:820px){ #ftsg-lp .brandbar{padding:6px 20px} #ftsg-lp .hero .sub{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical; overflow:hidden;margin-top:8px} /* The eyebrow pill is the only purely decorative block in the hero — its text restates what the headline and the trust line both already say — so at this size it is what yields to put an action on the first screen. */ #ftsg-lp .hero .tag{display:none} #ftsg-lp .datesel{margin-top:12px} #ftsg-lp .datesel .lbl{margin-bottom:5px} #ftsg-lp .hero-cta{margin-top:12px} } /* HERO: CRO 01 / 02 / 03 */ #ftsg-lp .hero{background:linear-gradient(180deg,#F3FAFC 0%,#fff 100%);border-bottom:1px solid var(--rule)} #ftsg-lp .hero-in{max-width:1180px;margin:0 auto;padding:46px 28px 44px} /* The 19ch/60ch pair exists only to reserve a column for .hero-fig — the rule at the foot of this file releases both to `none` when the figure is present. With no image the constraints stayed and the figure did not, leaving 45% of the hero blank on the right AND putting the body copy on a LONGER measure than the headline above it (717px sub under a 613px h1). Compose the no-image case as the real one: centred, headline widest, body narrower beneath it — which is also how both sibling landing pages open. When Chris's image lands, :has(.hero-fig) takes over and this reverts to two columns. */ #ftsg-lp .hero h1{max-width:19ch} #ftsg-lp .hero .sub{max-width:60ch;font-size:18px;margin-top:15px} @media(min-width:981px){ /* Left-aligned by decision (David, 2026-08-16). The measure relationship is kept: proportions of the shared container, not ch. A ch measure scales with each element's own font-size, so "headline wider than body" held at 1440 and inverted again at 1024 once the compression query shrank the h1 while leaving the sub at 16px. Percentages of one parent cannot invert. The headline also runs wider than its original 19ch, which pulls the composition further across the container than it reached before. */ #ftsg-lp .hero-in:not(:has(.hero-fig)) h1{max-width:68%} #ftsg-lp .hero-in:not(:has(.hero-fig)) .sub{max-width:56%} } #ftsg-lp .datesel{margin:26px 0 0;max-width:600px} #ftsg-lp .datesel .lbl{font-size:13.5px;font-weight:800;color:var(--ink-3);margin-bottom:10px} #ftsg-lp .chips{display:flex;gap:10px;flex-wrap:wrap} #ftsg-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} #ftsg-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} #ftsg-lp .chip:hover{border-color:var(--teal)} #ftsg-lp .chip.on{border-color:var(--teal);background:#F2FAFC;box-shadow:0 3px 0 var(--teal-dk)} #ftsg-lp .chip.on .u{color:var(--teal-dk)} #ftsg-lp .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px} #ftsg-lp .buyline{margin-top:14px;font-size:14px;font-weight:600} #ftsg-lp .buyline a{color:var(--teal-dk);border-bottom:1px solid var(--rule-2);padding-bottom:1px} #ftsg-lp .buyline a:hover{border-color:var(--teal-dk)} #ftsg-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} #ftsg-lp .pathline.show{opacity:1;transform:none} /* CRO 02: ONE consolidated trust line, clickable, not a decorative pill */ #ftsg-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} #ftsg-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} #ftsg-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. */ #ftsg-lp .buyline a,#ftsg-lp a.seelink,#ftsg-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. */ /* Hero compression. This was keyed to VIEWPORT HEIGHT ALONE, which made the density non-monotonic: it fired at 1024x768 and 360x640 but not at 390x844, so the single most common phone size received the full-height desktop hero. The consequence was measurable — both hero CTAs landed below the fold at 390 (first button top 782 against a 751px usable fold), and at 360 the urgency chips sat behind the fixed bar on first paint. Adding the width clause is the structural fix: a narrow viewport is short on room whatever its height. */ @media (max-height:830px), (max-width:820px){ #ftsg-lp .hero-in{padding:24px 28px 22px} #ftsg-lp .hero h1{font-size:clamp(29px,3.1vw,37px);line-height:1.1;max-width:30ch} #ftsg-lp .hero .sub{font-size:16px;margin-top:10px;max-width:76ch} #ftsg-lp .datesel{margin-top:16px} #ftsg-lp .datesel .lbl{margin-bottom:7px} #ftsg-lp .hero-cta{margin-top:16px} #ftsg-lp .buyline{margin-top:10px} #ftsg-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. */ #ftsg-lp .trustline{margin-top:2px} } /* .trustline .stars is gone — the aggregate score now renders through the shared .stars-rated component (nav.css) so the row matches the number. Only the size is set here; the two-layer colouring belongs to the component and overriding `color` from this side would tint the grey base green. */ #ftsg-lp .trustline .stars-rated{font-size:14px} #ftsg-lp .trustline .dot{width:4px;height:4px;border-radius:50%;background:var(--rule-2)} #ftsg-lp .trustline b{color:var(--ink)} /* grids + cards */ #ftsg-lp .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px} #ftsg-lp .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:880px){#ftsg-lp .grid2,#ftsg-lp .grid3{grid-template-columns:1fr}} #ftsg-lp .card{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:24px} #ftsg-lp .card .n{font-size:30px;font-weight:800;color:var(--teal-dk);line-height:1;margin-bottom:9px} #ftsg-lp .card h4{margin-bottom:7px} #ftsg-lp .card p{font-size:14.8px;color:var(--ink-3);line-height:1.6} #ftsg-lp .card-d{background:var(--dark-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);padding:24px} #ftsg-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} #ftsg-lp .card-d p{font-size:14.8px;color:var(--dark-ink-2);line-height:1.6} #ftsg-lp .card-d .hl{color:#fff;font-weight:700} /* cut-score benchmarks */ #ftsg-lp .roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:960px;margin:0 auto} @media(max-width:880px){#ftsg-lp .roles{grid-template-columns:1fr 1fr}} #ftsg-lp .role{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:20px 16px;text-align:center} #ftsg-lp .role .sc{font-size:27px;font-weight:800;color:var(--teal-dk);line-height:1} #ftsg-lp .role .nm{font-size:14px;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.35} #ftsg-lp .role .pc{font-size:12.5px;color:var(--ink-4);margin-top:6px;font-weight:600} /* section table */ #ftsg-lp .tblw{overflow-x:auto;border:1.5px solid var(--rule-2);border-radius:var(--r-md);background:#fff} #ftsg-lp table.fmt{width:100%;border-collapse:collapse;font-size:14.8px;min-width:660px} #ftsg-lp table.fmt th,#ftsg-lp table.fmt td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule)} #ftsg-lp table.fmt th{background:var(--bg-soft);font-size:11.5px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:var(--slate)} #ftsg-lp table.fmt tbody tr:last-child td{border-bottom:0} #ftsg-lp table.fmt td b{color:var(--ink)} #ftsg-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} #ftsg-lp .pill-f.v{background:#FDF1DC;color:#8A5B00} #ftsg-lp .pill-f.nc{background:#FEECEC;color:#991B1B} #ftsg-lp .pill-f.s{background:#EEF2F6;color:#47535E} /* phases */ #ftsg-lp .phases{display:grid;gap:14px;max-width:900px} #ftsg-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} #ftsg-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} #ftsg-lp .phase h4{margin-bottom:5px} #ftsg-lp .phase p{font-size:14.8px;line-height:1.6} /* proof */ #ftsg-lp .tps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:880px){#ftsg-lp .tps{grid-template-columns:1fr}} #ftsg-lp .tp{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px} #ftsg-lp .tp .stars{color:var(--trust);font-size:15px;letter-spacing:1px} #ftsg-lp .tp .score{font-size:15px;font-weight:800;color:var(--teal-dk);margin:8px 0 9px} #ftsg-lp .tp q{display:block;font-size:14.8px;color:var(--ink-2);line-height:1.6;quotes:none} #ftsg-lp .tp .who{font-size:12.5px;color:var(--ink-4);margin-top:12px;font-weight:600;line-height:1.5} #ftsg-lp .tp .who b{display:block;color:var(--ink);font-size:13.5px} #ftsg-lp .tp .vf{display:inline-block;margin-top:5px;color:var(--trust);font-weight:700} /* pricing */ #ftsg-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)} #ftsg-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)} #ftsg-lp .plan .win{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);text-align:center} #ftsg-lp .plan h3{text-align:center;margin-top:6px} #ftsg-lp .plan .price{font-size:44px;font-weight:800;text-align:center;line-height:1.1;margin:10px 0 3px} #ftsg-lp .plan .pn{text-align:center;font-size:13px;color:var(--ink-4);font-weight:600} #ftsg-lp .plan ul{list-style:none;margin:20px 0 22px} #ftsg-lp .plan li{font-size:14.8px;color:var(--ink-2);padding:8px 0 8px 27px;position:relative;border-bottom:1px solid var(--rule)} #ftsg-lp .plan li:last-child{border-bottom:0} /* Included-feature check. Was a text check glyph in --lime-dk, measuring 2.23:1 against the card — eight effectively invisible marks in the one block that has to be read. Now the drawn check from inc/pt-icons.php, carried as a mask so the colour comes from background-color and can be a passing token (--teal-dk, 7.72:1). Same mask technique front-page.php uses for .sidebar-icon. The path is pt_icon('check'); if it changes there, change it here. */ #ftsg-lp .plan li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px; background-color:var(--teal-dk); -webkit-mask:url("data:image/svg+xml;utf8,") center/16px 16px no-repeat; mask:url("data:image/svg+xml;utf8,") center/16px 16px no-repeat} #ftsg-lp .guarantee{max-width:700px;margin:24px auto 0;text-align:center;font-size:14.5px;color:var(--ink-3);line-height:1.6} #ftsg-lp .guarantee b{color:var(--ink)} /* expert */ #ftsg-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} #ftsg-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} #ftsg-lp .about .cred{font-size:13px;color:var(--ink-4);font-weight:700;margin:3px 0 9px} #ftsg-lp .about p{font-size:14.8px;color:var(--ink-3);line-height:1.6} /* faq */ #ftsg-lp .faq{max-width:820px} #ftsg-lp .fq{border-bottom:1px solid var(--rule);padding:18px 0} #ftsg-lp .fq summary{font-weight:800;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px} #ftsg-lp .fq summary::-webkit-details-marker{display:none} #ftsg-lp .fq summary::after{content:"+";color:var(--teal);font-size:22px;line-height:1} #ftsg-lp .fq[open] summary::after{content:"\2013"} #ftsg-lp .fq p{margin-top:11px;font-size:15px;color:var(--ink-3);line-height:1.65} #ftsg-lp .fq p+p{margin-top:9px} #ftsg-lp footer{background:var(--dark);color:var(--dark-ink-3);padding:44px 0 36px;font-size:13.5px;line-height:1.65} #ftsg-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} #ftsg-lp footer .src b{color:#fff} #ftsg-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 */ #ftsg-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} #ftsg-lp .sticky .in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:20px} #ftsg-lp .sticky .txt{color:#fff;font-size:15.5px;font-weight:700} #ftsg-lp .sticky .txt small{display:block;font-weight:400;font-size:12.5px;color:var(--dark-ink-3);margin-top:2px} #ftsg-lp .sticky .sp{flex:1} #ftsg-lp .sticky .seelink{color:#fff;font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px} #ftsg-lp .sticky .seelink:hover{border-color:var(--lime);color:var(--lime)} @media(max-width:760px){#ftsg-lp .sticky .txt{display:none}#ftsg-lp .sticky .in{justify-content:center}} /* ============================================================ NEW: THE STUDY GUIDE Two-column layout with a sticky in-page contents list. The guide is body content, not a card grid: it has to read like something you can actually study from. ============================================================ */ #ftsg-lp .guide-layout{display:grid;grid-template-columns:242px 1fr;gap:44px;align-items:start} @media(max-width:980px){#ftsg-lp .guide-layout{grid-template-columns:1fr;gap:24px}} /* STICKY, BY EXPLICIT DECISION (David, 2026-08-19). History matters here: this list shipped sticky, was un-stickied 2026-08-13 under §17/§18's "exactly one sticky element" rule (the bottom bar is the one carrying the primary CTA), and David has now overridden that rule for this element — the guide runs ~8,700px and losing the contents list while inside it was the bigger cost. The two never collide: the TOC pins to the top, the bar owns the bottom, and the TOC's max-height leaves the bar's 84px gutter clear so they cannot overlap even on a short laptop viewport. Desktop only — below 981px the layout is one column and a pinned TOC would sit on top of the guide it navigates. */ #ftsg-lp .toc{background:var(--bg-soft);border:1.5px solid var(--rule-2); border-radius:var(--r-md);padding:18px 18px 16px} @media(min-width:981px){ #ftsg-lp .toc{position:sticky;top:22px; max-height:calc(100vh - 22px - 84px - 14px);overflow-y:auto} } #ftsg-lp .toc .h{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--slate);margin-bottom:10px} #ftsg-lp .toc ol{list-style:none;counter-reset:tc} #ftsg-lp .toc li{counter-increment:tc;border-top:1px solid var(--rule)} #ftsg-lp .toc li:first-child{border-top:0} #ftsg-lp .toc a{display:block;padding:10px 0;font-size:14px;font-weight:700;color:var(--ink-2);line-height:1.3} #ftsg-lp .toc a::before{content:counter(tc) ". ";color:var(--teal);font-weight:800} #ftsg-lp .toc a:hover{color:var(--teal)} #ftsg-lp .toc a .m{display:block;font-size:11.5px;font-weight:600;color:var(--ink-4);margin-top:3px} #ftsg-lp .toc .foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule); font-size:12.5px;color:var(--ink-4);line-height:1.5} /* Chapter break. Was 34+34 — the same interval as a heading-to-its-own-body gap, separating chapters that run 1,700–2,300px each. The boundary now outranks every gap inside a chapter, and still sits below a section break. */ #ftsg-lp .gsec{scroll-margin-top:22px;padding-bottom:var(--rh-chapter); margin-bottom:var(--rh-chapter);border-bottom:1px solid var(--rule)} #ftsg-lp .gsec:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:6px} #ftsg-lp .gsec h3{font-size:24px} #ftsg-lp .gmeta{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0 16px} #ftsg-lp .gmeta span{font-size:11.5px;font-weight:800;letter-spacing:.03em;background:var(--bg-soft); border:1px solid var(--rule-2);border-radius:var(--r-pill);padding:5px 12px;color:var(--slate)} #ftsg-lp .gmeta span.v{background:#FDF1DC;border-color:#F0D5A4;color:#8A5B00} #ftsg-lp .gmeta span.nc{background:#FEECEC;border-color:#F6C9C9;color:#991B1B} /* 74ch measured out at ~106 real characters per line at 1440 — the `ch` unit is the width of "0", which in Onest runs well above the average glyph, so a ch-declared measure reads far longer than it looks. Comfortable is 65–75. Narrowed with 286px of column sitting empty beside it either way; the guide is this page's product, so its line length is not a detail. */ #ftsg-lp .gsec p{font-size:15.4px;color:var(--ink-3);line-height:1.68;margin-bottom:13px;max-width:52ch} #ftsg-lp .gsec p b,#ftsg-lp .gsec li b{color:var(--ink)} #ftsg-lp .gh4{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--slate);margin:24px 0 11px} #ftsg-lp .trap{background:#FEF8EE;border:1.5px solid #F3DBB0;border-left:4px solid var(--amber); border-radius:var(--r-sm);padding:15px 17px;margin-bottom:6px;max-width:74ch} #ftsg-lp .trap .t{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:#8A5B00;margin-bottom:6px} #ftsg-lp .trap p{margin-bottom:0;font-size:14.8px;color:var(--ink-2)} #ftsg-lp .rules{list-style:none;display:grid;gap:9px;max-width:74ch} #ftsg-lp .rules li{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-sm); padding:13px 16px 13px 42px;position:relative;font-size:14.8px;color:var(--ink-3);line-height:1.6} #ftsg-lp .rules li::before{content:"→";position:absolute;left:16px;top:12px;color:var(--teal);font-weight:800} #ftsg-lp .worked{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md); padding:20px 22px;max-width:74ch} #ftsg-lp .worked+.worked{margin-top:14px} #ftsg-lp .worked .wl{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--teal-dk);margin-bottom:10px} #ftsg-lp .worked .wscene{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-sm); padding:14px 16px;font-size:14.8px;color:var(--ink-2);line-height:1.6;margin-bottom:13px} #ftsg-lp .worked .wscene b{color:var(--ink)} #ftsg-lp .worked .wq{font-size:16px;font-weight:700;color:var(--ink);line-height:1.45;margin-bottom:12px} #ftsg-lp .wopts{list-style:none;display:grid;gap:7px;margin-bottom:14px} #ftsg-lp .wopts li{background:#fff;border:1.5px solid var(--rule-2);border-radius:var(--r-sm); padding:11px 14px;font-size:14.5px;color:var(--ink-2);line-height:1.5} #ftsg-lp .wopts li .k{font-weight:800;color:var(--ink-4);margin-right:9px} #ftsg-lp .wopts li.ok{border-color:var(--green);background:#F3FBF6;box-shadow:0 2px 0 var(--green)} #ftsg-lp .wopts li.ok .k{color:var(--green)} #ftsg-lp .wopts li.ok .mark{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800; letter-spacing:.06em;text-transform:uppercase;color:var(--green)} #ftsg-lp .wsol{border-top:1px solid var(--rule-2);padding-top:13px;font-size:14.6px;color:var(--ink-3);line-height:1.66} #ftsg-lp .wsol b{color:var(--ink)} #ftsg-lp .gcheck{background:var(--dark);border-radius:var(--r-md);padding:22px 24px;margin-top:30px; display:flex;align-items:center;gap:20px;flex-wrap:wrap} #ftsg-lp .gcheck .t{color:#fff;font-size:16.5px;font-weight:800;line-height:1.35;flex:1 1 320px} #ftsg-lp .gcheck .t small{display:block;font-weight:400;font-size:13px;color:var(--dark-ink-3);margin-top:4px} #ftsg-lp .gnote{font-size:13px;color:var(--ink-4);line-height:1.6;max-width:74ch;margin-top:14px} /* study plans */ #ftsg-lp .sched{list-style:none;display:grid;gap:9px;margin-top:14px} #ftsg-lp .sched li{position:relative;padding-left:86px;font-size:14.3px;color:var(--ink-3);line-height:1.55;min-height:24px} #ftsg-lp .sched li .hr{position:absolute;left:0;top:0;width:76px;text-align:center;font-size:11px;font-weight:800; letter-spacing:.02em;color:var(--teal-dk);background:var(--bg-soft);border:1px solid var(--rule-2); border-radius:var(--r-pill);padding:3px 0} #ftsg-lp .sched li b{color:var(--ink)} #ftsg-lp .tot{margin-top:15px;padding-top:13px;border-top:1px solid var(--rule);font-size:13.5px; font-weight:700;color:var(--ink-2)} /* ============ MODALS ============ */ #ftsg-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} #ftsg-lp .ov.on{display:flex} /* Panel frame. The body is the ONLY scrolling region; the bar and the footer are fixed rows. Previously .pbody carried max-height:76vh and the panel grew with it, so a long question pushed the whole footer down the screen — and on the results screen the primary CTA fell 165px past the panel edge at 1440 and 482px past it at 390, cut off by a rounded corner with no fade. */ #ftsg-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); display:flex;flex-direction:column;max-height:90vh} /* The test panel is the one surface where the frame must not move AT ALL: the visitor presses the same control twelve times against a running clock, and question length varied panel height by 137px at 1440 and 264px at 390. A fixed height trades a little empty space on short questions for a Next button that is in the same place every time. */ #ftsg-lp #ovTest .panel{height:min(90vh,700px)} #ftsg-lp .pbar{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--rule); background:var(--bg-soft)} #ftsg-lp .pbar .lbl{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)} #ftsg-lp .pbar .qn{font-size:13px;font-weight:700;color:var(--ink-3)} #ftsg-lp .pbar .sp{flex:1} #ftsg-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} #ftsg-lp .pbar .clock.warn{color:var(--amber);border-color:var(--amber)} #ftsg-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. */ #ftsg-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} #ftsg-lp .prog{height:4px;background:var(--rule)} #ftsg-lp .prog i{display:block;height:100%;background:var(--teal);transition:width .25s var(--ease)} #ftsg-lp .pbody{padding:22px;overflow-y:auto;flex:1 1 auto;min-height:0} #ftsg-lp .pbar,#ftsg-lp .prog,#ftsg-lp .pfoot{flex:none} /* CRO 09 / CRO 10: selector: ONE title, instant persona guidance, standardised table */ #ftsg-lp .selhead{text-align:center;margin-bottom:20px} #ftsg-lp .selhead h3{font-size:20px} #ftsg-lp .selhead p{font-size:14.5px;color:var(--ink-3);margin-top:7px} #ftsg-lp .picks{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:620px){#ftsg-lp .picks{grid-template-columns:1fr}} #ftsg-lp .pick{border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:20px 18px;text-align:center} /* Icon tile. Same construction as ccat-paid-lp's .cat-icon: a rounded square holding the brand colour at 12% with the icon at full strength, so the tile reads as a deliberate object rather than a glyph floating in whitespace. Both tiles are identical on purpose. The first draft tinted them teal and deep-teal to mark the two options apart, but at 12% alpha that is a 4% luminance difference — noise wearing the costume of signal. The distinction between the options is carried where it belongs: the icons (elapsed time vs four panes), the labels, and the buttons. */ #ftsg-lp .pick .ic{width:44px;height:44px;border-radius:var(--r-sm);display:inline-flex; align-items:center;justify-content:center;background:rgba(0,137,172,.12);color:var(--teal)} #ftsg-lp .pick h4{margin:7px 0 6px} #ftsg-lp .pick .best{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-dk); margin-bottom:9px} #ftsg-lp .pick .oneline{font-size:13.8px;color:var(--ink-3);line-height:1.55;margin-bottom:15px;min-height:62px} #ftsg-lp .ftable{margin-top:18px;border:1px solid var(--rule-2);border-radius:var(--r-sm);overflow:hidden} #ftsg-lp .ftable table{width:100%;border-collapse:collapse;font-size:13.2px} #ftsg-lp .ftable th,#ftsg-lp .ftable td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left} #ftsg-lp .ftable th{background:var(--bg-soft);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)} #ftsg-lp .ftable tr:last-child td{border-bottom:0} /* Status cells. The icon and its label are one unit, so they align on a shared baseline and never wrap apart — the old emoji orphaned onto its own line at 390px. --ink-3 rather than --ink-4 on the negative cell: --ink-4 measures 3.14:1 here, which fails AA for the 13.2px table text. */ #ftsg-lp .ftable td.yes,#ftsg-lp .ftable td.no{font-weight:700;white-space:nowrap} #ftsg-lp .ftable td.yes>svg,#ftsg-lp .ftable td.no>svg{vertical-align:-2px;margin-right:6px} #ftsg-lp .ftable td.yes{color:var(--green)} #ftsg-lp .ftable td.no{color:var(--ink-3)} /* quiz */ #ftsg-lp .qcat{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal); margin-bottom:11px} #ftsg-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} #ftsg-lp .qscene b{color:var(--ink)} #ftsg-lp .qtext{font-size:17px;font-weight:700;line-height:1.45;margin-bottom:15px} #ftsg-lp .opts{display:grid;gap:9px} #ftsg-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} #ftsg-lp .opt:hover{border-color:var(--teal);background:#F8FCFD} #ftsg-lp .opt.sel{border-color:var(--teal);background:#F2FAFC;box-shadow:0 2px 0 var(--teal-dk)} #ftsg-lp .opt .k{font-weight:800;color:var(--teal);flex:0 0 14px} /* Action row. The old flex-wrap put the hint, a flex:1 spacer, Skip and Next on one line that wrapped at EVERY question at BOTH viewports — landing Skip top-right in the slot a primary action is expected to occupy, and orphaning Next on a second row 51px below it and 571px to its left. Explicit slots cannot wrap into that inversion: the hint owns row one, then Skip left and Next right, in DOM order, at every width. */ #ftsg-lp .pfoot{display:grid;grid-template-columns:auto auto;justify-content:space-between; align-items:center;gap:8px 16px;padding:13px 22px;border-top:1px solid var(--rule);background:var(--bg)} #ftsg-lp .pfoot .hint{grid-column:1/-1;font-size:12.5px;color:var(--ink-3);font-weight:600;line-height:1.45} #ftsg-lp .pfoot .sp{display:none} /* Next was the SMALLEST control in the footer — 68x38 against Skip's 85x40, 32% less area than the action it competes with, and both under the 44px floor this stylesheet claims elsewhere. Weight now matches intent: the primary is the only filled, sized object, and Skip steps back to a text link that is still a full 44px tall to press. */ #ftsg-lp .pfoot .btn-primary{min-height:44px;min-width:128px;font-size:15px;padding:11px 24px;justify-content:center} #ftsg-lp .pfoot .btn-ghost{min-height:44px;border:0;background:none;padding:11px 2px;color:var(--ink-3); font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} #ftsg-lp .pfoot .btn-ghost:hover{color:var(--ink);background:none} /* results: CRO 11 hierarchy + CRO 12 personalisation */ #ftsg-lp .rtop{text-align:center;padding:4px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:18px} #ftsg-lp .rtop .big{font-size:52px;font-weight:800;line-height:1} #ftsg-lp .rtop .of{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);margin-top:4px} #ftsg-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)} #ftsg-lp .dl{display:grid;gap:9px;margin-bottom:20px} #ftsg-lp .dl .r{display:flex;align-items:center;gap:12px;font-size:14px} #ftsg-lp .dl .nm{flex:0 0 132px;font-weight:700} #ftsg-lp .dl .tk{flex:1;height:8px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden} #ftsg-lp .dl .tk i{display:block;height:100%;background:var(--teal);border-radius:var(--r-pill)} #ftsg-lp .dl .vl{flex:0 0 44px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums} #ftsg-lp .dl .r.weak .nm{color:var(--red)} #ftsg-lp .dl .r.weak .tk i{background:var(--red)} /* CRO 12: dynamic, score-aware upsell. CRO 11: not cut off, clear hierarchy. */ #ftsg-lp .upsell{background:var(--bg-soft);border:1.5px solid var(--rule-2);border-radius:var(--r-md);padding:22px} #ftsg-lp .upsell .gaph{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:9px} #ftsg-lp .upsell .diag{font-size:14.5px;color:var(--ink-3);line-height:1.6} #ftsg-lp .upsell .diag b{color:var(--ink)} #ftsg-lp .plan3{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:15px 17px;margin:16px 0} #ftsg-lp .plan3 .h{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:9px} #ftsg-lp .plan3 ol{margin-left:18px;font-size:14px;color:var(--ink-3);line-height:1.65} #ftsg-lp .plan3 li{margin-bottom:5px} #ftsg-lp .plan3 b{color:var(--ink)} #ftsg-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 */ #ftsg-lp .exit .panel{max-width:560px} #ftsg-lp .exithead{background:var(--amber);color:#3a2400;padding:20px 24px;text-align:center} #ftsg-lp .exithead h3{font-size:23px;color:#3a2400} #ftsg-lp .exitbody{padding:24px 26px 26px;text-align:center} #ftsg-lp .exitbody .s{font-size:15px;color:var(--ink-2);line-height:1.6} #ftsg-lp .exitbody .s b{font-weight:700} #ftsg-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} #ftsg-lp .exitprev .t{font-size:12.8px;color:var(--ink-3);line-height:1.55} #ftsg-lp .exitprev .t b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px} #ftsg-lp .exitbody .micro{font-size:12px;color:var(--ink-4);margin-top:11px} #ftsg-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. ============================================================ */ /* The gate is now a block ON the results screen rather than a screen of its own, so it needs to out-rank the upsell card sitting directly beneath it — same silhouette otherwise, and the visitor would read two equal grey boxes and act on neither. It gets the white ground and the darker border; the upsell keeps the soft fill. */ #ftsg-lp .gate{background:var(--bg);border:1.5px solid var(--ink-5);border-radius:var(--r-md); padding:22px;margin-bottom:18px;box-shadow:var(--sh-sm)} #ftsg-lp .gate .give{background:var(--bg-soft)} #ftsg-lp .gate .gh{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:8px;color:var(--ink)} #ftsg-lp .gate .gs{font-size:14.5px;color:var(--ink-3);line-height:1.6} #ftsg-lp .gate .gs b{color:var(--ink)} #ftsg-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} #ftsg-lp .gate .give b{color:var(--ink)} #ftsg-lp .gate .give i{font-style:normal;font-weight:800;color:var(--ink)} #ftsg-lp .gate form{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} #ftsg-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} #ftsg-lp .gate input[type=email]:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--rule)} #ftsg-lp .gate input[type=email].bad{border-color:var(--negative,#DC2626)} #ftsg-lp .gate form .btn{flex:0 0 auto} #ftsg-lp .gate .err{display:none;margin-top:9px;font-size:13px;font-weight:700;color:var(--negative,#DC2626)} #ftsg-lp .gate .err.on{display:block} #ftsg-lp .gate .micro{margin-top:11px;font-size:12px;color:var(--ink-4);line-height:1.55} #ftsg-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} #ftsg-lp .gate .skip:hover{color:var(--ink-3)} @media(max-width:520px){ #ftsg-lp .gate form .btn{width:100%} #ftsg-lp .gate{padding:18px} /* The panel label names the test the visitor picked two taps ago, and it wrapped to two lines here — vertical space the results screen needs for the gate. The question counter and clock carry the state that matters. */ #ftsg-lp .pbar .lbl{display:none} } /* ========================================================================== ADDITIONS AT PORT TIME — nothing above this line differs from the mockup ========================================================================== */ /* 1. Elementor kit text-shadow. The global kit inline-styles `.elementor-kit-5 button, … .elementor-button{text-shadow:0 0 10px rgba(0,0,0,.3)}` onto every button site-wide, and wp_head() still emits it on this template. The ID selector (1,0,1) outranks the kit's (0,1,1) whatever the source order. Same rule every bespoke page needs. */ #ftsg-lp, #ftsg-lp *{text-shadow:none} /* 2. THEME-GLOBAL CLASS COLLISIONS. homepage.css loads on every "new design" template and declares BARE .hero, .hero::before, .wrap, .btn, a and button — the same names the mockup uses. A scoped rule only wins for the properties it declares, so every property the mockup left unset leaked in. Each pin below restores a value the mockup actually had; they were derived by diffing computed styles against the standalone mockup, not copied from another page's hardening block. Do not add speculative resets here: on this page line-height:normal and text-align:center (both carried over from the CBP pins) each CHANGED the buttons. */ #ftsg-lp .hero{position:static;overflow:visible;padding:0} #ftsg-lp .hero::before{content:none;display:none} /* homepage.css puts letter-spacing:-.01em on .btn. The mockup set none, so the two button types landed on different UA defaults: inherited the wrapper's -.004em,