/* ============================================================
FireTeam landing page styles. Sourced from the mockup CSS
(themes/FireTeam Landing Page.html) and scoped to the
.ft-page body class so it never leaks into other pages.
============================================================ */
/* ============ TOKENS ============
design-tokens.css supplies the shared brand / ink / radius set.
These are the page-specific extensions the mockup defined — dark-
theme palette for full-bleed dark sections (Format overview, Why
fail, Free-test anchor) plus the red/green accents used by danger
and correct-answer states. Mirrors criticall-lp.css's redeclaration
pattern so this file stays standalone if design-tokens ever changes. */
:root {
--dark-bg: #0B1116;
--dark-bg-2: #0F1820;
--dark-ink-2: rgba(243, 239, 230, .7);
--dark-ink-3: rgba(243, 239, 230, .42);
--dark-rule: rgba(243, 239, 230, .14);
--brand-red: #DC2626;
--brand-green: #16A34A;
}
/* ============ BASE ============ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Belt-and-suspenders horizontal-overflow guard. Mirrors what
criticall-lp.css does on body.page-template-criticall-mockup —
without this, any single section that accidentally exceeds the
viewport (the pricing card's 8px right-side box-shadow, a wide
flex row on a narrow phone, the hero gradient ::before, etc.)
produces a body-level horizontal scroll, which on swipe shows
as a blank gap to the right of the page. `clip` (not `hidden`)
so position: sticky descendants (the sticky CTA bar) still work.
Using :has() to reach `html` because the ft-page class lives on
, not . */
html:has(body.ft-page),
body.ft-page {
overflow-x: clip;
max-width: 100%;
}
body.ft-page .ft-page { overflow-x: clip; }
html:has(body.ft-page) {
scroll-behavior: smooth;
}
body.ft-page {
font-family: var(--sans);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
padding-bottom: 80px;
letter-spacing: -.005em;
}
.ft-page a {
color: inherit;
text-decoration: none;
}
.ft-page button {
font-family: inherit;
cursor: pointer;
}
.ft-page img {
max-width: 100%;
display: block;
}
.ft-page em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
}
.ft-page :focus-visible {
outline: 2px solid var(--brand-teal);
outline-offset: 3px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ============ REVEAL ============ */
.ft-page .rv, .ft-page .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.ft-page .rv.vis, .ft-page .reveal.visible {
opacity: 1;
transform: none;
}
.ft-page .d1 {
transition-delay: 80ms;
}
.ft-page .d2 {
transition-delay: 160ms;
}
.ft-page .d3 {
transition-delay: 240ms;
}
.ft-page .d4 {
transition-delay: 320ms;
}
.ft-page .wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
width: 100%;
}
.ft-page .wrap-narrow {
max-width: 860px;
margin: 0 auto;
padding: 0 32px;
}
/* ============ TYPO ============ */
.ft-page h1, .ft-page h2, .ft-page h3, .ft-page h4 {
font-family: var(--sans);
font-weight: 700;
letter-spacing: -.025em;
line-height: 1.1;
color: var(--ink);
}
.ft-page h1 {
font-size: clamp(40px, 5.6vw, 76px);
letter-spacing: -.035em;
line-height: .98;
font-weight: 700;
}
.ft-page h2 {
font-size: clamp(32px, 4.2vw, 56px);
letter-spacing: -.03em;
line-height: 1.02;
font-weight: 700;
}
.ft-page h3 {
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 700;
}
.ft-page h4 {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
}
.ft-page h1 em, .ft-page h2 em, .ft-page h3 em, .ft-page h4 em {
color: var(--brand-teal);
letter-spacing: -.01em;
}
/* ============ BUTTONS ============ */
.ft-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
border-radius: var(--r-pill);
padding: 14px 28px;
border: none;
cursor: pointer;
transition: all 300ms var(--ease);
letter-spacing: -.01em;
white-space: nowrap;
text-decoration: none;
}
.ft-page .btn-dark {
background: var(--ink);
color: var(--bg);
}
.ft-page .btn-dark:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background: var(--brand-teal-dark);
}
.ft-page .btn-lime {
background: var(--brand-lime);
color: var(--ink);
border: 1.5px solid var(--ink);
}
.ft-page .btn-lime:hover {
transform: translateY(-2px);
box-shadow: 4px 4px 0 var(--ink);
}
.ft-page .btn-outline {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--ink);
}
.ft-page .btn-outline:hover {
background: var(--ink);
color: var(--bg);
}
.ft-page .btn-white {
background: var(--bg);
color: var(--ink);
border: 1.5px solid var(--ink);
}
.ft-page .btn-white:hover {
transform: translateY(-2px);
box-shadow: 3px 3px 0 var(--ink);
}
.ft-page .btn-ghost-light {
background: transparent;
color: rgba(255, 255, 255, .9);
border: 1.5px solid rgba(255, 255, 255, .3);
}
.ft-page .btn-ghost-light:hover {
border-color: #fff;
color: #fff;
background: rgba(255, 255, 255, .08);
}
.ft-page .btn-teal {
background: var(--brand-teal);
color: #fff;
}
.ft-page .btn-teal:hover {
background: var(--brand-teal-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.ft-page .btn-sm {
padding: 10px 18px;
font-size: 13px;
}
.ft-page .btn-lg {
padding: 16px 32px;
font-size: 16px;
}
.ft-page .btn-xl {
padding: 20px 44px;
font-size: 17px;
}
/* ============ UTILS ============ */
.ft-page .eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--brand-teal);
background: rgba(0, 137, 172, .08);
padding: 7px 16px;
border-radius: var(--r-pill);
margin-bottom: 20px;
letter-spacing: -.005em;
}
.ft-page .eyebrow-lime {
color: var(--ink);
background: var(--brand-lime);
border: 1.5px solid var(--ink);
}
.ft-page .eyebrow-dark {
color: var(--brand-lime);
background: rgba(157, 214, 79, .12);
border: 1px solid rgba(157, 214, 79, .3);
}
.ft-page .sh {
margin-bottom: 56px;
max-width: 760px;
}
.ft-page .sh.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.ft-page .sh p.lede {
font-size: 18px;
color: var(--ink-3);
line-height: 1.55;
margin-top: 18px;
max-width: 560px;
}
.ft-page .sh.center p.lede {
margin-left: auto;
margin-right: auto;
}
/* ============ TOP BAR ============ */
.ft-page .top-bar {
background: var(--ink);
color: var(--bg);
padding: 10px 32px;
text-align: center;
font-size: 13px;
font-weight: 400;
}
.ft-page .top-bar b {
font-weight: 600;
color: var(--brand-lime);
}
.ft-page .top-bar a {
text-decoration: underline;
text-underline-offset: 3px;
margin-left: 8px;
color: #fff;
}
/* ============ NAV ============ */
.ft-page nav#nav {
position: sticky;
top: 0;
z-index: 200;
background: rgba(255, 255, 255, .85);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid transparent;
padding: 0 32px;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
transition: border-color 300ms, background 300ms;
}
.ft-page nav#nav.scrolled {
border-bottom-color: var(--rule);
}
.ft-page .logo {
font-size: 24px;
font-weight: 600;
letter-spacing: -.3px;
display: inline-block;
}
.ft-page .logo-g {
color: var(--brand-lime);
font-weight: 600;
}
.ft-page .logo-t {
color: var(--brand-teal);
font-weight: 400;
}
.ft-page .nav-right {
display: flex;
align-items: center;
gap: 14px;
}
.ft-page .nav-trust {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-4);
margin-right: 8px;
}
.ft-page .nav-trust .stars {
color: var(--brand-trust);
font-size: 10px;
letter-spacing: 1px;
}
.ft-page .nav-trust b {
color: var(--ink);
font-weight: 600;
}
@media (max-width: 760px) {
.ft-page .nav-trust {
display: none;
}
.ft-page nav#nav {
padding: 0 20px;
}
}
/* ============ INDEPENDENCE BAR ============ */
.ft-page .ind-bar {
padding: 12px 24px;
background: var(--bg-soft);
border-bottom: 1px solid var(--rule);
text-align: center;
}
.ft-page .ind-bar p {
font-size: 12px;
color: var(--ink-3);
max-width: 900px;
margin: 0 auto;
line-height: 1.55;
}
.ft-page .ind-bar p strong {
color: var(--ink);
font-weight: 600;
}
/* ============ HERO ============ */
.ft-page .hero {
background: var(--brand-lime);
position: relative;
overflow: hidden;
padding: 72px 32px 88px;
border-bottom: 1.5px solid var(--ink);
text-align: center;
}
.ft-page .hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .4) 0%, transparent 40%),
radial-gradient(circle at 80% 20%, rgba(157, 214, 79, .5) 0%, transparent 40%);
pointer-events: none;
}
.ft-page .hero-inner {
position: relative;
z-index: 2;
max-width: 880px;
margin: 0 auto;
}
.ft-page .hero-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 20px;
}
.ft-page .hero-trust {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--bg);
border: 1.5px solid var(--ink);
border-radius: var(--r-pill);
padding: 8px 18px 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--ink);
margin-bottom: 28px;
box-shadow: 3px 3px 0 var(--ink);
flex-wrap: wrap;
justify-content: center;
}
.ft-page .hero-trust .stars {
color: var(--brand-amber);
letter-spacing: 1px;
font-size: 12px;
}
.ft-page .hero-trust .dot {
width: 3px;
height: 3px;
background: var(--ink-4);
border-radius: 50%;
display: inline-block;
}
.ft-page .hero-trust b {
font-weight: 600;
color: var(--ink);
}
.ft-page .hero h1 {
margin-bottom: 24px;
}
.ft-page .hero h1 .underline {
position: relative;
display: inline-block;
}
.ft-page .hero h1 .underline em {
color: var(--ink);
font-style: italic;
font-family: var(--serif);
font-weight: 400;
}
.ft-page .hero h1 .underline svg {
position: absolute;
left: -4%;
right: -4%;
bottom: -14px;
width: 108%;
height: 18px;
}
.ft-page .hero-sub {
font-size: 19px;
line-height: 1.5;
color: var(--ink-2);
font-weight: 400;
max-width: 600px;
margin: 0 auto 30px;
}
.ft-page .hero-urgency {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
background: var(--bg);
border: 1.5px solid var(--ink);
padding: 9px 18px;
border-radius: var(--r-pill);
margin-bottom: 28px;
box-shadow: 3px 3px 0 var(--ink);
}
.ft-page .hero-urgency svg {
color: var(--brand-amber);
}
.ft-page .hero-cta-row {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.ft-page .hero-meta {
font-size: 13px;
color: var(--ink-2);
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.ft-page .hero-meta .sig {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ft-page .hero-meta .sig svg {
color: var(--ink);
}
/* ============ TRUST BAR ============ */
.ft-page .trust-bar {
background: var(--bg);
padding: 22px 32px;
border-bottom: 1px solid var(--rule);
}
.ft-page .trust-bar .inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 36px;
flex-wrap: wrap;
}
.ft-page .ti {
font-size: 13px;
color: var(--ink-3);
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.ft-page .ti b {
color: var(--ink);
font-weight: 700;
}
.ft-page .ti .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-trust);
}
.ft-page .ti.hi b {
color: var(--brand-green);
}
.ft-page .ti-sep {
width: 1px;
height: 14px;
background: var(--rule-2);
}
/* ============ PROOF STRIP ============ */
.ft-page .proof-strip {
padding: 72px 32px;
background: var(--bg);
}
.ft-page .proof-grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.ft-page .proof-card {
background: var(--bg);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 26px;
transition: all 300ms var(--ease);
}
.ft-page .proof-card:hover {
transform: translateY(-4px);
border-color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
}
.ft-page .proof-name {
font-weight: 700;
font-size: 14px;
color: var(--ink);
margin-bottom: 4px;
}
.ft-page .proof-outcome {
color: var(--brand-teal);
font-weight: 600;
font-size: 12px;
margin-bottom: 10px;
}
.ft-page .proof-stars {
color: var(--brand-amber);
font-size: 12px;
letter-spacing: 1px;
margin-bottom: 12px;
}
.ft-page .proof-card p {
font-size: 14px;
color: var(--ink-3);
line-height: 1.55;
}
/* ============ FORMAT OVERVIEW ============ */
.ft-page .fmt-overview {
background: var(--dark-bg);
color: #fff;
padding: 96px 32px;
position: relative;
overflow: hidden;
}
.ft-page .fmt-overview::before {
content: '';
position: absolute;
top: -200px;
right: -150px;
width: 580px;
height: 580px;
background: radial-gradient(circle, rgba(157, 214, 79, .08) 0%, transparent 65%);
pointer-events: none;
}
.ft-page .fmt-overview-inner {
max-width: 1240px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.ft-page .fmt-overview-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
margin-bottom: 28px;
}
.ft-page .fmt-hook {
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.05;
font-weight: 700;
color: #fff;
letter-spacing: -.03em;
margin-bottom: 28px;
}
.ft-page .fmt-hook em {
color: var(--brand-lime);
}
.ft-page .fmt-stats {
display: flex;
gap: 28px;
flex-wrap: wrap;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--dark-rule);
}
.ft-page .fmt-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.ft-page .fmt-stat b {
font-size: 20px;
font-weight: 700;
color: #fff;
letter-spacing: -.02em;
}
.ft-page .fmt-stat span {
font-size: 11px;
color: var(--dark-ink-3);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
}
.ft-page .fmt-note {
font-size: 13px;
color: var(--dark-ink-3);
margin-top: 14px;
}
.ft-page .fmt-insights {
display: flex;
flex-direction: column;
gap: 12px;
}
.ft-page .fmt-insights-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--dark-ink-3);
margin-bottom: 4px;
}
.ft-page .fmt-insight {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: var(--dark-ink-2);
line-height: 1.5;
}
.ft-page .fmt-insight::before {
content: '';
width: 18px;
height: 1.5px;
background: var(--brand-lime);
flex-shrink: 0;
margin-top: 11px;
}
.ft-page .fmt-table-wrap {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--r-lg);
overflow: hidden;
}
.ft-page .fmt-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.ft-page .fmt-table thead tr {
border-bottom: 1px solid rgba(255,255,255,.1);
}
.ft-page .fmt-table thead th {
text-align: left;
padding: 14px 20px;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--dark-ink-3);
}
.ft-page .fmt-table tbody tr {
border-bottom: 1px solid rgba(255,255,255,.06);
transition: background 200ms;
}
.ft-page .fmt-table tbody tr:last-child {
border-bottom: none;
}
.ft-page .fmt-table tbody tr:hover {
background: rgba(255,255,255,.04);
}
.ft-page .fmt-table td {
padding: 16px 20px;
color: var(--dark-ink-2);
vertical-align: middle;
}
.ft-page .fmt-table td:first-child {
font-weight: 600;
color: #fff;
}
.ft-page .fmt-table td:nth-child(2), .ft-page .fmt-table td:nth-child(3) {
color: var(--dark-ink-2);
font-variant-numeric: tabular-nums;
}
.ft-page .fmt-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--r-pill);
margin-left: 8px;
vertical-align: middle;
}
.ft-page .fmt-badge-video {
background: rgba(157, 214, 79, .15);
color: var(--brand-lime);
border: 1px solid rgba(157, 214, 79, .3);
}
.ft-page .fmt-badge-math {
background: rgba(246, 156, 8, .12);
color: var(--brand-amber);
border: 1px solid rgba(246, 156, 8, .3);
}
.ft-page .fmt-cta-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 28px;
margin-top: 28px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--r-lg);
flex-wrap: wrap;
}
.ft-page .fmt-cta-strip p {
font-size: 14px;
color: var(--dark-ink-2);
line-height: 1.55;
}
.ft-page .fmt-cta-strip p b {
color: #fff;
font-weight: 600;
}
.ft-page .fmt-cta-micro {
font-size: 12px;
color: var(--dark-ink-3);
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-top: 6px;
}
.ft-page .fmt-cta-micro .g {
color: var(--brand-lime);
font-weight: 600;
}
@media (max-width: 900px) {
.ft-page .fmt-overview-top {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* ============ SAMPLE QUESTIONS ============ */
.ft-page .samples {
background: var(--bg-soft);
padding: 96px 32px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.ft-page .samples-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.ft-page .stab {
padding: 10px 22px;
border-radius: var(--r-pill);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1.5px solid var(--rule-2);
background: var(--bg);
color: var(--ink-3);
transition: all 200ms var(--ease);
font-family: inherit;
}
.ft-page .stab.active, .ft-page .stab:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.ft-page .sample-panel {
display: none;
}
.ft-page .sample-panel.active {
display: block;
}
.ft-page .sample-card {
background: var(--bg);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 36px;
max-width: 860px;
box-shadow: var(--shadow-sm);
}
.ft-page .sample-section-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--brand-teal);
background: rgba(0, 137, 172, .08);
padding: 5px 14px;
border-radius: var(--r-pill);
margin-bottom: 20px;
}
.ft-page .sample-prompt {
font-size: 15px;
color: var(--ink-2);
line-height: 1.65;
margin-bottom: 22px;
padding: 18px 20px;
background: var(--bg-soft);
border-radius: var(--r-sm);
border-left: 3px solid var(--brand-teal);
}
.ft-page .sample-options {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.ft-page .sopt {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 16px;
border-radius: var(--r-sm);
border: 1.5px solid var(--rule-2);
font-size: 14px;
color: var(--ink-2);
line-height: 1.5;
}
.ft-page .sopt.correct {
border-color: var(--brand-green);
background: rgba(22, 163, 74, .05);
}
.ft-page .sopt-letter {
font-weight: 700;
font-size: 13px;
color: var(--ink-4);
flex-shrink: 0;
min-width: 18px;
padding-top: 1px;
}
.ft-page .sopt.correct .sopt-letter {
color: var(--brand-green);
}
.ft-page .sample-explain {
font-size: 13px;
color: var(--ink-3);
line-height: 1.6;
padding: 14px 18px;
background: rgba(22, 163, 74, .05);
border-radius: var(--r-sm);
border: 1px solid rgba(22, 163, 74, .2);
}
.ft-page .sample-explain b {
color: var(--brand-green);
}
/* ============ GUARANTEE RIBBON ============ */
.ft-page .g-ribbon {
background: var(--brand-lime);
border-top: 1.5px solid var(--ink);
border-bottom: 1.5px solid var(--ink);
padding: 20px 32px;
}
.ft-page .g-ribbon .inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
text-align: center;
}
.ft-page .g-ribbon p {
font-size: 14px;
color: var(--ink);
line-height: 1.5;
}
.ft-page .g-ribbon p b {
font-weight: 700;
}
.ft-page .g-check {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ink);
color: var(--brand-lime);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ft-page .g-check svg {
width: 16px;
height: 16px;
}
/* ============ URGENCY BAR ============ */
.ft-page .urg-bar {
background: var(--ink);
color: #fff;
padding: 14px 32px;
text-align: center;
font-size: 14px;
}
.ft-page .urg-bar b {
color: var(--brand-amber);
font-weight: 700;
}
.ft-page .urg-bar .warn {
color: var(--brand-amber);
}
/* ============ SECTION BASE ============ */
.ft-page section {
padding: 96px 32px;
}
/* ============ STATS ============ */
.ft-page .stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
.ft-page .stat-card {
background: var(--bg-soft);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 40px 32px;
transition: all 400ms var(--ease);
}
.ft-page .stat-card:hover {
background: var(--brand-lime);
border-color: var(--ink);
transform: translateY(-4px);
}
.ft-page .stat-num {
font-size: clamp(54px, 7vw, 88px);
font-weight: 700;
line-height: .95;
color: var(--ink);
letter-spacing: -.04em;
margin-bottom: 14px;
font-variant-numeric: tabular-nums;
}
.ft-page .stat-cap {
font-size: 14px;
color: var(--ink-3);
line-height: 1.6;
max-width: 260px;
}
.ft-page .stat-card:hover .stat-cap {
color: var(--ink-2);
}
/* ============ AGITATION ============ */
.ft-page .agitation {
background: var(--bg);
}
.ft-page .agit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
.ft-page .agit-card {
background: var(--bg-soft);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 28px;
transition: all 300ms var(--ease);
}
.ft-page .agit-card:hover {
transform: translateY(-4px);
border-color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
}
.ft-page .agit-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-teal);
margin-bottom: 12px;
display: inline-block;
background: rgba(0, 137, 172, .08);
padding: 5px 10px;
border-radius: var(--r-pill);
}
.ft-page .agit-card h4 {
margin-bottom: 10px;
}
.ft-page .agit-card p {
font-size: 14px;
color: var(--ink-3);
line-height: 1.6;
}
/* ============ WHY FAIL ============ */
.ft-page .why-fail {
background: var(--dark-bg);
color: #fff;
}
.ft-page .why-fail h2 {
color: #fff;
}
.ft-page .why-fail h2 em {
color: var(--brand-lime);
}
.ft-page .why-fail .eyebrow {
color: var(--brand-lime);
background: rgba(157, 214, 79, .1);
border: 1px solid rgba(157, 214, 79, .3);
}
.ft-page .why-fail .sh p.lede {
color: var(--dark-ink-2);
}
.ft-page .fail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 56px;
max-width: 1040px;
}
.ft-page .fail-card {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: var(--r-lg);
padding: 36px 32px;
transition: all 300ms var(--ease);
}
.ft-page .fail-card:hover {
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .25);
transform: translateY(-4px);
}
.ft-page .fail-num {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-lime);
margin-bottom: 14px;
display: inline-block;
}
.ft-page .fail-card h4 {
color: #fff;
margin-bottom: 12px;
}
.ft-page .fail-card p {
font-size: 15px;
color: var(--dark-ink-2);
line-height: 1.65;
}
.ft-page .fail-em {
color: var(--brand-lime);
font-weight: 600;
font-family: inherit;
font-style: normal;
}
/* ============ PRODUCT PILLARS ============ */
.ft-page .product {
background: var(--bg);
}
.ft-page .pillars {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 48px;
}
.ft-page .pillar {
background: var(--bg);
border: 1.5px solid var(--ink);
border-radius: var(--r-xl);
padding: 32px 30px;
transition: all 400ms var(--ease);
}
.ft-page .pillar:hover {
transform: translateY(-6px);
box-shadow: 6px 6px 0 var(--ink);
}
.ft-page .pillar.wide {
grid-column: 1 / -1;
background: var(--brand-lime-soft);
}
.ft-page .pillar:nth-child(2) {
background: var(--bg-soft);
}
.ft-page .pillar:nth-child(3) {
background: #E0F4EE;
}
.ft-page .pillar:nth-child(4) {
background: #FDE8B8;
}
.ft-page .p-num {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-teal);
margin-bottom: 10px;
display: inline-block;
}
.ft-page .pillar h4 {
margin-bottom: 10px;
}
.ft-page .pillar p {
font-size: 14px;
color: var(--ink-2);
line-height: 1.65;
}
.ft-page .cred-bar {
background: var(--ink);
border-radius: var(--r-lg);
padding: 22px 28px;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 32px;
}
.ft-page .cred-item {
font-size: 12px;
color: rgba(255, 255, 255, .6);
padding: 6px 22px;
border-right: 1px solid rgba(255, 255, 255, .12);
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.ft-page .cred-item:last-child {
border-right: none;
}
.ft-page .cred-item b {
color: #fff;
font-weight: 700;
}
.ft-page .cred-item .hi {
color: var(--brand-lime);
font-weight: 700;
}
.ft-page .cred-item .stars {
color: var(--brand-amber);
letter-spacing: 1px;
}
.ft-page .format-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 24px;
}
.ft-page .fmt-tag {
font-size: 12px;
font-weight: 600;
color: var(--brand-teal);
background: rgba(0, 137, 172, .08);
border: 1px solid rgba(0, 137, 172, .2);
padding: 6px 12px;
border-radius: var(--r-pill);
}
/* ============ CTA STRIPS ============ */
.ft-page .cta-strip {
padding: 56px 32px;
text-align: center;
background: var(--bg-soft);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.ft-page .cta-strip .inner {
max-width: 720px;
margin: 0 auto;
}
.ft-page .cta-strip .urgency-note {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: var(--ink);
background: var(--bg);
border: 1.5px solid var(--ink);
padding: 7px 14px;
border-radius: var(--r-pill);
margin-bottom: 16px;
box-shadow: 2px 2px 0 var(--ink);
}
.ft-page .cta-strip .urgency-note svg {
color: var(--brand-amber);
}
.ft-page .cta-strip p {
font-size: 17px;
color: var(--ink-2);
margin-bottom: 20px;
line-height: 1.5;
}
.ft-page .cta-strip p b {
color: var(--ink);
font-weight: 700;
}
.ft-page .cta-micro {
font-size: 12px;
color: var(--ink-4);
margin-top: 14px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.ft-page .cta-micro .g {
color: var(--brand-green);
font-weight: 600;
}
/* ============ CATEGORY CARDS ============ */
.ft-page .category {
background: var(--bg);
}
.ft-page .cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
.ft-page .cat-card {
background: var(--bg);
border: 1.5px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 32px 28px;
text-align: center;
transition: all 300ms var(--ease);
}
.ft-page .cat-card:hover {
transform: translateY(-6px);
box-shadow: 6px 6px 0 var(--ink);
}
.ft-page .cat-card.win {
border-color: var(--brand-green);
background: rgba(22, 163, 74, .04);
}
.ft-page .cat-card.warn {
border-color: var(--brand-amber);
background: rgba(245, 156, 8, .04);
}
.ft-page .cat-card.danger {
border-color: var(--brand-red);
background: rgba(220, 38, 38, .04);
}
.ft-page .cat-icon {
width: 56px;
height: 56px;
border-radius: var(--r-sm);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.ft-page .cat-card.win .cat-icon {
background: rgba(22, 163, 74, .12);
color: var(--brand-green);
}
.ft-page .cat-card.warn .cat-icon {
background: rgba(245, 156, 8, .12);
color: var(--brand-amber);
}
.ft-page .cat-card.danger .cat-icon {
background: rgba(220, 38, 38, .12);
color: var(--brand-red);
}
.ft-page .cat-tier {
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
letter-spacing: -.01em;
}
.ft-page .cat-card.win .cat-tier {
color: var(--brand-green);
}
.ft-page .cat-card.warn .cat-tier {
color: var(--brand-amber);
}
.ft-page .cat-card.danger .cat-tier {
color: var(--brand-red);
}
.ft-page .cat-sub {
font-size: 13px;
font-weight: 600;
color: var(--ink);
margin-bottom: 8px;
}
.ft-page .cat-card p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.55;
}
/* ============ HOW IT WORKS (PHASES) ============ */
.ft-page .how {
background: var(--bg-soft);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.ft-page .phases {
margin-top: 48px;
max-width: 860px;
}
.ft-page .phase {
display: grid;
grid-template-columns: 60px 1fr;
gap: 28px;
padding: 36px 0;
border-bottom: 1px solid var(--rule-2);
}
.ft-page .phase:last-child {
border-bottom: none;
}
.ft-page .phase-num {
width: 52px;
height: 52px;
border-radius: var(--r-sm);
background: var(--bg);
border: 1.5px solid var(--ink);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: var(--ink);
flex-shrink: 0;
box-shadow: 3px 3px 0 var(--ink);
}
.ft-page .phase h4 {
font-size: 22px;
margin-bottom: 10px;
font-weight: 700;
letter-spacing: -.015em;
}
.ft-page .phase h4 em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
color: var(--brand-teal);
}
.ft-page .phase p {
font-size: 15px;
color: var(--ink-3);
line-height: 1.65;
}
.ft-page .phase p b {
color: var(--ink);
font-weight: 600;
}
/* ============ FREE TEST ANCHOR ============ */
.ft-page .free-test {
background: var(--dark-bg);
padding: 80px 32px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
}
.ft-page .free-test::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(157, 214, 79, .14) 0%, transparent 60%);
pointer-events: none;
}
.ft-page .free-test-inner {
position: relative;
z-index: 2;
max-width: 680px;
margin: 0 auto;
}
.ft-page .free-test h2 {
color: #fff;
margin: 16px 0 14px;
}
.ft-page .free-test h2 em {
color: var(--brand-lime);
}
.ft-page .free-test p {
color: var(--dark-ink-2);
font-size: 17px;
line-height: 1.65;
margin-bottom: 32px;
}
.ft-page .free-test .micro {
margin-top: 14px;
font-size: 12px;
color: var(--dark-ink-3);
}
/* ============ REVIEWS ============ */
.ft-page .reviews {
background: var(--bg);
}
.ft-page .reviews-grid {
margin-top: 48px;
columns: 3;
column-gap: 20px;
}
.ft-page .review-tile {
break-inside: avoid;
background: var(--bg);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 26px;
margin-bottom: 20px;
transition: all 300ms var(--ease);
}
.ft-page .review-tile:hover {
transform: translateY(-4px);
border-color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
}
.ft-page .rv-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.ft-page .rv-av {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-teal), var(--brand-lime));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.ft-page .rv-name {
font-weight: 700;
font-size: 14px;
color: var(--ink);
}
.ft-page .rv-stars {
color: var(--brand-amber);
font-size: 11px;
letter-spacing: 1px;
}
.ft-page .review-tile p {
font-size: 14px;
color: var(--ink-3);
line-height: 1.6;
margin-bottom: 14px;
}
.ft-page .rv-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
padding: 5px 11px;
border-radius: var(--r-pill);
}
.ft-page .tag-teal {
background: rgba(0, 137, 172, .08);
color: var(--brand-teal);
}
.ft-page .tag-green {
background: rgba(22, 163, 74, .08);
color: var(--brand-green);
}
.ft-page .tag-lime {
background: var(--brand-lime);
color: var(--ink);
}
/* ============ FEATURES ============ */
.ft-page .features {
background: var(--bg-soft);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.ft-page .feats-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 20px;
margin-top: 48px;
}
.ft-page .feat-card {
background: var(--bg);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 30px 28px;
transition: all 300ms var(--ease);
}
.ft-page .feat-card:hover {
transform: translateY(-4px);
border-color: var(--ink);
box-shadow: 4px 4px 0 var(--ink);
}
.ft-page .feat-card.full {
grid-column: 1 / -1;
background: var(--brand-lime-soft);
border: 1.5px solid var(--ink);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.ft-page .feat-card.full:hover {
box-shadow: 6px 6px 0 var(--ink);
}
.ft-page .feat-lbl {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-teal);
margin-bottom: 10px;
display: inline-block;
background: rgba(0, 137, 172, .08);
padding: 4px 10px;
border-radius: var(--r-pill);
}
.ft-page .feat-card h4 {
margin-bottom: 12px;
}
.ft-page .feat-card p {
font-size: 14px;
color: var(--ink-3);
line-height: 1.65;
}
/* ============ OBJECTIONS ============ */
.ft-page .objections {
background: var(--bg);
}
.ft-page .obj-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
.ft-page .obj-card {
background: var(--bg);
border: 1.5px solid var(--ink);
border-radius: var(--r-lg);
padding: 32px 28px;
transition: all 300ms var(--ease);
}
.ft-page .obj-card:hover {
transform: translateY(-6px);
box-shadow: 6px 6px 0 var(--ink);
}
.ft-page .obj-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--brand-teal);
background: rgba(0, 137, 172, .08);
padding: 5px 11px;
border-radius: var(--r-pill);
margin-bottom: 14px;
display: inline-block;
}
.ft-page .obj-card h4 {
margin-bottom: 14px;
font-size: 19px;
}
.ft-page .obj-card p {
font-size: 14px;
color: var(--ink-3);
line-height: 1.7;
}
/* ============ PRICING ============ */
.ft-page .pricing {
background: var(--bg);
}
.ft-page .pricing-grid {
display: grid;
grid-template-columns: 1fr 460px;
gap: 56px;
margin-top: 56px;
align-items: start;
}
.ft-page .p-side h3 {
font-size: clamp(24px, 2.8vw, 34px);
margin-bottom: 16px;
line-height: 1.15;
}
.ft-page .p-side h3 em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
color: var(--brand-teal);
}
.ft-page .p-side p {
font-size: 15px;
color: var(--ink-3);
line-height: 1.7;
margin-bottom: 20px;
}
.ft-page .roi-box {
background: var(--bg-soft);
border: 1px solid var(--rule-2);
border-radius: var(--r-lg);
padding: 24px 26px;
margin-bottom: 20px;
}
.ft-page .roi-lbl {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 14px;
}
.ft-page .roi-row {
display: flex;
justify-content: space-between;
font-size: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--rule);
}
.ft-page .roi-row:last-child {
border-bottom: none;
font-weight: 700;
color: var(--brand-green);
}
.ft-page .roi-row span:first-child {
color: var(--ink-3);
}
.ft-page .roi-row b {
color: var(--ink);
font-weight: 700;
}
.ft-page .p-card {
background: var(--bg);
border: 1.5px solid var(--ink);
border-radius: var(--r-xl);
padding: 36px;
box-shadow: 8px 8px 0 var(--ink);
}
.ft-page .p-card-lbl {
font-size: 11px;
font-weight: 700;
color: var(--brand-teal);
text-transform: uppercase;
letter-spacing: .1em;
margin-bottom: 10px;
text-align: center;
}
.ft-page .p-price-row {
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
margin-bottom: 6px;
}
.ft-page .price-amt {
font-size: 72px;
font-weight: 700;
color: var(--ink);
line-height: 1;
letter-spacing: -.04em;
font-variant-numeric: tabular-nums;
}
.ft-page .price-was {
font-size: 20px;
color: var(--ink-4);
text-decoration: line-through;
}
.ft-page .price-note {
font-size: 13px;
color: var(--ink-4);
text-align: center;
margin-bottom: 18px;
}
.ft-page .ot-badge {
text-align: center;
margin-bottom: 22px;
}
.ft-page .ot-badge span {
display: inline-block;
background: var(--brand-lime);
border: 1.5px solid var(--ink);
color: var(--ink);
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: var(--r-pill);
}
.ft-page .covers-box {
background: var(--bg-soft);
border: 1px solid var(--rule-2);
border-radius: var(--r-sm);
padding: 14px 16px;
margin-bottom: 20px;
}
.ft-page .covers-lbl {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 9px;
}
.ft-page .covers-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ft-page .covers-pills span {
background: var(--ink);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: var(--r-pill);
}
.ft-page .checklist {
list-style: none;
margin-bottom: 22px;
}
.ft-page .checklist li {
font-size: 14px;
color: var(--ink-2);
padding: 10px 0;
border-bottom: 1px solid var(--rule);
display: flex;
gap: 12px;
align-items: flex-start;
line-height: 1.5;
}
.ft-page .checklist li:last-child {
border-bottom: none;
}
.ft-page .checklist li::before {
content: '';
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
border-radius: 50%;
background: var(--brand-lime);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2 2L8 3' fill='none' stroke='%230A0E14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
border: 1.5px solid var(--ink);
}
.ft-page .g-block {
background: rgba(157, 214, 79, .2);
border: 1.5px solid var(--ink);
border-radius: var(--r-md);
padding: 22px;
text-align: center;
margin-top: 18px;
}
.ft-page .g-block p {
font-size: 13px;
color: var(--ink-2);
line-height: 1.65;
}
.ft-page .g-block p b {
font-weight: 700;
color: var(--ink);
}
.ft-page .g-sig {
font-size: 12px;
color: var(--brand-teal);
margin-top: 8px;
font-style: italic;
}
/* ============ EXPERT BIO ============ */
.ft-page .about {
background: var(--bg-soft);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.ft-page .about-grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 48px;
margin-top: 40px;
max-width: 960px;
align-items: start;
}
.ft-page .about-photo {
background: var(--bg);
border: 1.5px solid var(--ink);
border-radius: var(--r-lg);
height: 260px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 4px 4px 0 var(--ink);
color: var(--ink-4);
text-align: center;
padding: 20px;
}
.ft-page .about-photo .avatar-circle {
width: 84px;
height: 84px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-teal), var(--brand-lime));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 24px;
font-weight: 700;
margin-bottom: 12px;
border: 2px solid var(--ink);
}
.ft-page .about-photo .ph-name {
font-size: 14px;
color: var(--ink);
font-weight: 700;
}
.ft-page .about-photo .ph-sub {
font-size: 11px;
color: var(--ink-4);
margin-top: 4px;
}
.ft-page .about-grid p {
font-size: 15px;
line-height: 1.75;
color: var(--ink-3);
margin-bottom: 14px;
}
.ft-page .about-grid p b {
color: var(--ink);
font-weight: 700;
}
.ft-page .about-creds {
font-size: 12px;
color: var(--ink-4);
margin-top: 14px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ft-page .about-creds .stars {
color: var(--brand-amber);
}
/* ============ FAQ ============ */
.ft-page .faq {
background: var(--bg);
}
.ft-page .faq-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 56px;
margin-top: 40px;
max-width: 1040px;
}
.ft-page .faq-aside h3 {
margin-bottom: 10px;
font-size: 30px;
}
.ft-page .faq-aside h3 em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
color: var(--brand-teal);
}
.ft-page .faq-aside p {
font-size: 14px;
color: var(--ink-3);
line-height: 1.65;
}
.ft-page .faq-list {
border-top: 1px solid var(--ink);
}
.ft-page .faq-item {
border-bottom: 1px solid var(--rule-2);
transition: background 200ms;
}
.ft-page .faq-item.open {
background: var(--bg-soft);
}
.ft-page .faq-q {
width: 100%;
background: none;
border: none;
padding: 22px 4px;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: var(--ink);
font-family: inherit;
letter-spacing: -.01em;
}
.ft-page .faq-plus {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--bg-soft);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--ink);
font-weight: 400;
transition: all 300ms var(--ease);
flex-shrink: 0;
}
.ft-page .faq-item:hover .faq-plus {
background: var(--brand-lime);
}
.ft-page .faq-item.open .faq-plus {
background: var(--brand-lime);
transform: rotate(45deg);
}
.ft-page .faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 400ms var(--ease);
}
.ft-page .faq-item.open .faq-a {
max-height: 360px;
}
.ft-page .faq-a-in {
padding: 0 4px 22px;
font-size: 14px;
color: var(--ink-3);
line-height: 1.7;
}
/* ============ FINAL CTA ============ */
.ft-page .final {
background: var(--brand-lime);
padding: 120px 32px;
text-align: center;
position: relative;
overflow: hidden;
border-top: 1.5px solid var(--ink);
border-bottom: 1.5px solid var(--ink);
}
.ft-page .final::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .4) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, #9DD64F 0%, transparent 40%);
pointer-events: none;
}
.ft-page .final-inner {
position: relative;
z-index: 2;
max-width: 780px;
margin: 0 auto;
}
.ft-page .final .eyebrow {
background: var(--ink);
color: var(--brand-lime);
}
.ft-page .final h2 {
font-size: clamp(44px, 6vw, 80px);
font-weight: 700;
line-height: .98;
letter-spacing: -.035em;
color: var(--ink);
margin-bottom: 22px;
}
.ft-page .final h2 em {
color: var(--ink);
font-family: var(--serif);
font-style: italic;
font-weight: 400;
}
.ft-page .final p {
font-size: 18px;
color: var(--ink-2);
line-height: 1.55;
max-width: 520px;
margin: 0 auto 36px;
}
.ft-page .final-btns {
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.ft-page .final-divider {
font-size: 12px;
color: var(--ink-3);
font-weight: 600;
}
.ft-page .trust-close {
margin-top: 32px;
font-size: 13px;
color: var(--ink-2);
line-height: 1.8;
}
.ft-page .trust-close .hi {
color: var(--brand-green);
font-weight: 700;
}
/* ============ SEO FOOTER BLOCK ============ */
.ft-page .seo-block {
background: var(--bg-soft);
padding: 48px 32px;
border-top: 1px solid var(--rule);
}
.ft-page .seo-block .inner {
max-width: 860px;
margin: 0 auto;
}
.ft-page .seo-block h2 {
font-size: 20px;
font-weight: 700;
color: var(--brand-teal);
margin-bottom: 14px;
letter-spacing: -.01em;
}
.ft-page .seo-block p {
font-size: 13px;
color: var(--ink-3);
line-height: 1.8;
margin-bottom: 10px;
}
/* ============ FOOTER ============ */
.ft-page footer {
background: var(--ink);
color: rgba(255, 255, 255, .5);
padding: 28px 32px;
text-align: center;
}
.ft-page footer p {
font-size: 11px;
max-width: 860px;
margin: 0 auto;
line-height: 1.7;
}
/* ============ STICKY BAR ============ */
.ft-page #ft-sticky-bar {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%) translateY(120%);
z-index: 300;
background: var(--ink);
color: #fff;
border-radius: var(--r-pill);
padding: 12px 12px 12px 24px;
display: inline-flex;
align-items: center;
gap: 20px;
box-shadow: 0 12px 40px rgba(10, 14, 20, .25);
transition: transform 500ms var(--ease-bounce);
max-width: calc(100% - 32px);
white-space: nowrap;
}
.ft-page #ft-sticky-bar.show {
transform: translateX(-50%) translateY(0);
}
.ft-page #ft-sticky-bar .sbar-badge {
background: var(--brand-lime);
color: var(--ink);
font-size: 11px;
font-weight: 700;
padding: 5px 11px;
border-radius: var(--r-pill);
}
.ft-page #ft-sticky-bar .sbar-copy {
font-size: 13px;
color: rgba(255, 255, 255, .72);
font-weight: 500;
}
.ft-page #ft-sticky-bar .sbar-r {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.ft-page #ft-sticky-bar .sb-free {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, .25);
padding: 9px 16px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 600;
transition: all 200ms;
}
.ft-page #ft-sticky-bar .sb-free:hover {
border-color: #fff;
}
.ft-page #ft-sticky-bar .sb-enroll {
background: var(--brand-lime);
color: var(--ink);
border: none;
padding: 9px 18px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 700;
transition: all 200ms;
}
.ft-page #ft-sticky-bar .sb-enroll:hover {
background: #fff;
}
@media (max-width: 640px) {
.ft-page #ft-sticky-bar {
padding: 10px 10px 10px 16px;
gap: 12px;
}
.ft-page #ft-sticky-bar .sbar-copy, .ft-page #ft-sticky-bar .sb-free {
display: none;
}
}
/* ============ EXIT OVERLAY ============ */
.ft-page #ft-exit-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 400;
background: rgba(10, 14, 20, .7);
backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
padding: 20px;
}
.ft-page #ft-exit-overlay.open {
display: flex;
}
.ft-page .exit-modal {
background: var(--bg);
border: 1.5px solid var(--ink);
border-radius: var(--r-xl);
padding: 40px 36px;
max-width: 440px;
width: 100%;
text-align: center;
position: relative;
box-shadow: 12px 12px 0 var(--ink);
}
.ft-page .exit-close {
position: absolute;
top: 14px;
right: 14px;
background: none;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 16px;
color: var(--ink-4);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ft-page .exit-close:hover {
background: var(--bg-soft);
color: var(--ink);
}
.ft-page .exit-modal h3 {
font-size: 26px;
margin-bottom: 12px;
letter-spacing: -.02em;
}
.ft-page .exit-modal h3 em {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
color: var(--brand-teal);
}
.ft-page .exit-modal p {
font-size: 14px;
color: var(--ink-3);
line-height: 1.65;
margin-bottom: 24px;
}
.ft-page .exit-skip {
font-family: inherit;
background: none;
border: none;
color: var(--ink-4);
font-size: 12px;
cursor: pointer;
text-decoration: underline;
margin-top: 12px;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
/* `minmax(0, 1fr)` instead of plain `1fr`: when the column track is
`1fr`, the default min-track-size is `auto`, which expands to the
child's min-content. A heading like "Pick the plan that fits your
timeline." was forcing the column to 334px on a 320px-wide wrap,
which made .p-side / .p-card overflow their grid and clip past
the viewport edge. minmax(0, …) forbids that auto-expansion. */
.ft-page .pricing-grid {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.ft-page .p-side,
.ft-page .p-card { min-width: 0; }
.ft-page .faq-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.ft-page .about-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.ft-page section {
padding: 72px 24px;
}
.ft-page .proof-grid {
grid-template-columns: 1fr 1fr;
}
.ft-page .agit-grid, .ft-page .cat-grid, .ft-page .obj-grid {
grid-template-columns: 1fr;
}
.ft-page .fail-grid, .ft-page .pillars, .ft-page .feats-grid {
grid-template-columns: 1fr;
}
.ft-page .stats-row {
grid-template-columns: 1fr;
}
.ft-page .reviews-grid {
columns: 1;
}
.ft-page .feat-card.full {
grid-template-columns: 1fr;
}
.ft-page .pillar.wide {
grid-column: auto;
}
.ft-page .hero h1 .underline svg {
display: none;
}
}
@media (max-width: 560px) {
.ft-page section {
padding: 56px 20px;
}
.ft-page .proof-grid {
grid-template-columns: 1fr;
}
.ft-page .cred-item {
padding: 4px 12px;
border: none;
}
.ft-page .trust-bar .inner {
gap: 16px;
}
.ft-page .ti-sep {
display: none;
}
}
/* ====[ ft-quiz: ported from criticall-lp.css — do not hand-edit, see tools/port-quiz-css.js ]==== */
/* ============================================================
DIAGNOSTIC MODAL + MULTI-TYPE QUIZ (ft-quiz)
Standalone modal launched by openCcDiagnostic(). Mirrors the
visual rhythm of the TSA diag-modal but lives entirely under
.ft-page so the two never collide.
============================================================ */
.ft-diag-modal {
position: fixed; inset: 0;
background: rgba(10, 14, 20, .72);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
z-index: 9999;
display: none; align-items: center; justify-content: center;
padding: 32px 20px;
animation: ftDiagFade 200ms var(--ease);
}
.ft-diag-modal.open { display: flex; }
@keyframes ftDiagFade { from { opacity: 0; } to { opacity: 1; } }
.ft-diag-modal-inner {
background: var(--bg);
border: 1.5px solid var(--ink);
border-radius: var(--r-lg);
box-shadow: 10px 10px 0 var(--ink);
width: 100%; max-width: 920px;
max-height: calc(100vh - 64px);
overflow: hidden; display: flex; flex-direction: column;
animation: ftDiagSlide 260ms var(--ease);
}
@keyframes ftDiagSlide {
from { opacity: 0; transform: translateY(20px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ft-diag-modal-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 14px 18px 14px 22px;
background: var(--ink); color: #F3EFE6;
border-bottom: 1.5px solid var(--ink); flex-shrink: 0;
}
.ft-diag-modal-title {
display: inline-flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 600; letter-spacing: -.005em;
color: rgba(243, 239, 230, .92);
}
.ft-diag-modal-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--brand-lime);
box-shadow: 0 0 8px rgba(157, 214, 79, .6);
animation: ftDotPulse 1.6s infinite;
flex-shrink: 0;
}
@keyframes ftDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.ft-diag-modal-close {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(243, 239, 230, .18);
background: transparent; color: #F3EFE6;
font-size: 22px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 0 2px;
transition: all 200ms var(--ease);
font-family: inherit;
}
.ft-diag-modal-close:hover { background: var(--brand-red); border-color: var(--brand-red); }
.ft-diag-modal-body {
flex: 1; overflow-y: auto;
padding: 28px 32px 32px;
background: var(--bg); color: var(--ink);
}
@media (max-width: 560px) {
.ft-diag-modal { padding: 12px; }
.ft-diag-modal-body { padding: 20px; }
.ft-diag-modal-inner { box-shadow: 6px 6px 0 var(--ink); }
}
/* ── Screens ── */
.ft-quiz-screen { animation: ftQuizFade 220ms var(--ease); }
.ft-quiz-screen[hidden] { display: none; }
@keyframes ftQuizFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* ── Intro ── */
.ft-quiz-screen-intro { text-align: center; padding: 12px 0 4px; }
.ft-quiz-intro-eyebrow {
display: inline-block;
background: var(--brand-lime-soft);
color: var(--ink);
padding: 6px 14px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 14px;
border: 1px solid var(--ink);
}
.ft-quiz-intro-title {
font-size: clamp(28px, 5vw, 38px);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.05;
margin: 0 0 10px;
color: var(--ink);
}
.ft-quiz-intro-title em {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-weight: 400;
color: var(--brand-teal);
}
.ft-quiz-intro-lede { font-size: 15px; line-height: 1.55; color: var(--ink-3); max-width: 620px; margin: 0 auto 18px; }
.ft-quiz-intro-stats {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
margin: 0 auto 18px; max-width: 520px;
}
.ft-quiz-intro-stat {
display: inline-flex; align-items: baseline; gap: 6px;
background: var(--bg-soft); border: 1px solid var(--ink-5);
border-radius: 100px; padding: 7px 14px;
font-size: 12px; color: var(--ink-3);
}
.ft-quiz-intro-stat b { font-size: 16px; font-weight: 800; color: var(--ink); }
.ft-quiz-intro-seg { margin-bottom: 22px; }
.ft-quiz-intro-seg-label { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .1em; }
.ft-quiz-intro-seg-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ft-quiz-seg-pill {
background: var(--bg);
border: 1.5px solid var(--ink-5);
border-radius: 100px;
padding: 8px 16px;
font-size: 12px;
font-weight: 600;
color: var(--ink-3);
cursor: pointer;
font-family: inherit;
transition: all 180ms var(--ease);
}
.ft-quiz-seg-pill:hover { border-color: var(--brand-teal); color: var(--ink); }
.ft-quiz-seg-pill.active {
background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.ft-quiz-start-btn {
background: var(--brand-lime);
color: var(--ink);
border: 1.5px solid var(--ink);
border-radius: 12px;
padding: 14px 28px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
letter-spacing: -.005em;
box-shadow: 4px 4px 0 var(--ink);
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.ft-quiz-start-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.ft-quiz-start-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.ft-quiz-intro-micro { font-size: 11px; color: var(--ink-4); margin: 12px 0 0; }
/* ── Question screen ── */
.ft-quiz-screen-question { padding-top: 6px; }
.ft-quiz-qhead {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-bottom: 6px;
}
.ft-quiz-qprog { flex: 1; min-width: 0; }
.ft-quiz-qprog-text { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 6px; }
.ft-quiz-qprog-track { height: 4px; background: var(--ink-5); border-radius: 100px; overflow: hidden; }
.ft-quiz-qprog-fill { height: 100%; background: var(--brand-teal); transition: width 320ms var(--ease); }
.ft-quiz-timers { display: inline-flex; gap: 8px; }
.ft-quiz-gtimer, .ft-quiz-qtimer {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 100px;
border: 1.5px solid var(--ink); font-size: 12px;
}
.ft-quiz-gtimer-lbl, .ft-quiz-qtimer-lbl { font-size: 11px; opacity: .7; }
.ft-quiz-gtimer-val, .ft-quiz-qtimer-val { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ft-quiz-gtimer.is-green { background: #ECF7DC; color: #345A0E; border-color: #345A0E; }
.ft-quiz-gtimer.is-yellow { background: #FFF3D6; color: #6F4A00; border-color: #6F4A00; }
.ft-quiz-gtimer.is-red { background: #FEE2E2; color: #7F1D1D; border-color: #7F1D1D; animation: ccTimerPulse 1.2s infinite; }
@keyframes ccTimerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.ft-quiz-qtimer.is-green { background: #ECF7DC; color: #345A0E; border-color: #345A0E; }
.ft-quiz-qtimer.is-yellow { background: #FFF3D6; color: #6F4A00; border-color: #6F4A00; }
.ft-quiz-qtimer.is-red { background: #FEE2E2; color: #7F1D1D; border-color: #7F1D1D; }
.ft-quiz-gtimer-bar { width: 100%; height: 3px; background: var(--ink-5); border-radius: 100px; overflow: hidden; margin: 8px 0 16px; }
.ft-quiz-gtimer-fill { height: 100%; background: var(--brand-lime); transition: width 1s linear, background 200ms; }
.ft-quiz-gtimer-fill.is-yellow { background: var(--brand-amber); }
.ft-quiz-gtimer-fill.is-red { background: var(--brand-red); }
.ft-quiz-qbody { padding: 8px 0 18px; }
.ft-quiz-q-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand-teal); margin-bottom: 8px; }
.ft-quiz-q-prompt { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 0 0 8px; letter-spacing: -.01em; }
.ft-quiz-q-helper { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; line-height: 1.5; }
/* MCQ choices */
.ft-quiz-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ft-quiz-choice {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px; border: 1.5px solid var(--ink-5); border-radius: 12px;
background: var(--bg);
cursor: pointer; transition: all 160ms var(--ease);
position: relative;
}
.ft-quiz-choice:hover { border-color: var(--brand-teal); background: var(--bg-soft); }
.ft-quiz-choice.is-checked { border-color: var(--ink); background: var(--bg-soft); box-shadow: 3px 3px 0 var(--ink); }
.ft-quiz-choice-input {
position: absolute; opacity: 0; pointer-events: none;
}
.ft-quiz-choice-letter {
flex-shrink: 0; width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--ink); border-radius: 8px;
background: var(--bg);
font-size: 13px; font-weight: 800; color: var(--ink);
font-family: 'Onest', sans-serif;
}
.ft-quiz-choice.is-checked .ft-quiz-choice-letter { background: var(--brand-lime); }
.ft-quiz-choice-text { font-size: 14px; line-height: 1.5; color: var(--ink); flex: 1; }
/* Map SVG */
.ft-quiz-map { display: flex; justify-content: center; margin: 6px 0 16px; }
.ft-quiz-mapsvg { max-width: 320px; width: 100%; height: auto; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--bg-soft); }
/* Compare table */
.ft-quiz-compare { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; padding: 12px 14px; background: var(--bg-soft); border: 1px dashed var(--ink-5); border-radius: 10px; }
.ft-quiz-compare-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft-quiz-compare-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); padding: 3px 8px; background: var(--bg); border: 1px solid var(--ink-5); border-radius: 100px; flex-shrink: 0; }
.ft-quiz-compare code { font-family: 'Onest', monospace; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
/* Code-book table */
.ft-quiz-table-wrap { margin: 6px 0 14px; overflow-x: auto; border: 1.5px solid var(--ink); border-radius: 10px; }
.ft-quiz-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--bg); }
.ft-quiz-table th { background: var(--ink); color: var(--bg); text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ft-quiz-table td { padding: 8px 12px; border-top: 1px solid var(--ink-5); color: var(--ink); }
.ft-quiz-table tbody tr:nth-child(odd) td { background: var(--bg-soft); }
/* Transcript / Proofreading text */
.ft-quiz-transcript, .ft-quiz-proof {
margin: 6px 0 14px;
padding: 14px 16px;
background: var(--bg-soft);
border-left: 4px solid var(--brand-teal);
border-radius: 6px;
}
.ft-quiz-transcript-tag, .ft-quiz-proof-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-teal-dark); margin-bottom: 6px; }
.ft-quiz-transcript p, .ft-quiz-proof p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); font-style: italic; }
/* Blank inputs (data entry / proofreading) */
.ft-quiz-blanks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ft-quiz-blank { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft-quiz-blank-label { flex: 0 0 auto; min-width: 120px; font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.ft-quiz-blank-input {
flex: 1; min-width: 120px;
padding: 10px 14px;
border: 1.5px solid var(--ink-5);
border-radius: 8px;
font-size: 15px;
font-family: 'Onest', sans-serif;
font-weight: 600;
letter-spacing: .03em;
color: var(--ink);
background: var(--bg);
transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.ft-quiz-blank-input:focus { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(0, 137, 172, .18); }
.ft-quiz-blank-narrow .ft-quiz-blank-input { max-width: 90px; flex: 0 0 auto; }
/* Footer + Submit */
.ft-quiz-qfoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--ink-5); }
.ft-quiz-qfoot-hint { font-size: 13px; color: var(--ink-3); }
.ft-quiz-qfoot-hint.is-ready { color: var(--brand-green); font-weight: 700; }
.ft-quiz-next-btn {
background: var(--ink);
color: var(--bg);
border: 1.5px solid var(--ink);
border-radius: 10px;
padding: 11px 22px;
font-size: 14px; font-weight: 700;
cursor: pointer;
font-family: inherit;
letter-spacing: -.005em;
transition: all 160ms var(--ease);
}
.ft-quiz-next-btn:not(:disabled):hover { background: var(--brand-teal-dark); border-color: var(--brand-teal-dark); }
.ft-quiz-next-btn:disabled { background: var(--ink-5); color: var(--ink-4); border-color: var(--ink-5); cursor: not-allowed; }
/* ── Processing screen ── */
.ft-quiz-screen-proc { text-align: center; padding: 36px 0; }
.ft-quiz-proc-head { margin-bottom: 24px; }
.ft-quiz-proc-dots { display: inline-flex; gap: 6px; margin-bottom: 12px; }
.ft-quiz-proc-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-teal); animation: ftDot 1.4s infinite; }
.ft-quiz-proc-dots span:nth-child(2) { animation-delay: .2s; }
.ft-quiz-proc-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes ftDot { 0%, 60%, 100% { opacity: .3; transform: scale(.8); } 30% { opacity: 1; transform: scale(1.1); } }
.ft-quiz-screen-proc h3 { font-size: 26px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.ft-quiz-screen-proc h3 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--brand-teal); }
.ft-quiz-screen-proc p { font-size: 14px; color: var(--ink-3); max-width: 420px; margin: 0 auto; }
.ft-quiz-proc-steps { max-width: 380px; margin: 24px auto 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.ft-quiz-proc-step {
padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--ink-5);
font-size: 13px; font-weight: 600; color: var(--ink-3);
display: flex; align-items: center; gap: 10px;
transition: all 200ms var(--ease);
}
.ft-quiz-proc-icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1.5px solid var(--ink-5); font-weight: 800; font-size: 12px; color: var(--ink-4); flex-shrink: 0; }
.ft-quiz-proc-step.active { border-color: var(--brand-teal); background: rgba(0, 137, 172, .06); color: var(--ink); }
.ft-quiz-proc-step.active .ft-quiz-proc-icon { border-color: var(--brand-teal); color: var(--brand-teal); animation: ccProcSpin 1s linear infinite; }
@keyframes ccProcSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.ft-quiz-proc-step.done { border-color: var(--brand-green); background: rgba(22, 163, 74, .05); color: var(--ink-3); }
.ft-quiz-proc-step.done .ft-quiz-proc-icon { border-color: var(--brand-green); background: var(--brand-green); color: #fff; }
/* ── Result screen ── */
.ft-quiz-screen-result { padding-top: 4px; }
.ft-quiz-result-zone1 { text-align: center; padding: 12px 0 16px; }
.ft-quiz-result-ring { display: block; margin: 0 auto 10px; }
.ft-quiz-result-badge { display: inline-block; padding: 6px 14px; border-radius: 100px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; border: 1.5px solid var(--ink); }
.ft-quiz-result-badge.is-good { background: rgba(22, 163, 74, .12); color: #15803D; border-color: #15803D; }
.ft-quiz-result-badge.is-warn { background: rgba(246, 156, 8, .15); color: #6F4A00; border-color: #6F4A00; }
.ft-quiz-result-badge.is-bad { background: rgba(220, 38, 38, .12); color: #7F1D1D; border-color: #7F1D1D; }
.ft-quiz-result-msg { font-size: 14px; line-height: 1.6; color: var(--ink); max-width: 580px; margin: 0 auto; }
.ft-quiz-result-sectlbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 10px; }
.ft-quiz-result-zone2, .ft-quiz-result-zone3, .ft-quiz-result-zone5 { padding: 18px 0; border-top: 1px solid var(--ink-5); }
.ft-quiz-result-zone4 { padding: 22px 0 6px; text-align: center; }
.ft-quiz-result-weakgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .ft-quiz-result-weakgrid { grid-template-columns: 1fr; } }
.ft-quiz-weakcard { padding: 12px 14px; border: 1.5px solid var(--ink-5); border-radius: 10px; background: var(--bg); }
.ft-quiz-weakcard.is-good { border-left: 4px solid var(--brand-green); }
.ft-quiz-weakcard.is-warn { border-left: 4px solid var(--brand-amber); }
.ft-quiz-weakcard.is-bad { border-left: 4px solid var(--brand-red); }
.ft-quiz-weakcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ft-quiz-weakcard-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.ft-quiz-weakcard-pct { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ft-quiz-weakcard-meta { font-size: 11px; color: var(--ink-3); margin: 4px 0 8px; }
.ft-quiz-weakcard-track { height: 5px; background: var(--ink-5); border-radius: 100px; overflow: hidden; }
.ft-quiz-weakcard-fill { display: block; height: 100%; background: var(--brand-teal); transition: width 1s var(--ease); }
.ft-quiz-weakcard.is-good .ft-quiz-weakcard-fill { background: var(--brand-green); }
.ft-quiz-weakcard.is-warn .ft-quiz-weakcard-fill { background: var(--brand-amber); }
.ft-quiz-weakcard.is-bad .ft-quiz-weakcard-fill { background: var(--brand-red); }
.ft-quiz-result-timerow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ft-quiz-timecell { padding: 10px; border: 1.5px solid var(--ink-5); border-radius: 10px; background: var(--bg-soft); text-align: center; }
.ft-quiz-timecell.is-good { border-color: var(--brand-green); }
.ft-quiz-timecell.is-warn { border-color: var(--brand-amber); }
.ft-quiz-timecell.is-bad { border-color: var(--brand-red); }
.ft-quiz-timecell-num { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ft-quiz-timecell-num em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.ft-quiz-timecell-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-top: 2px; }
/* AI feedback */
.ft-quiz-ai-card { padding: 16px; border: 1.5px solid var(--ink); border-radius: 12px; background: linear-gradient(180deg, rgba(0, 137, 172, .05), transparent); }
.ft-quiz-ai-header { margin-bottom: 12px; }
.ft-quiz-ai-badge { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; padding: 4px 10px; border-radius: 100px; background: var(--brand-teal); color: var(--bg); margin-bottom: 8px; }
.ft-quiz-ai-htitle { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.ft-quiz-ai-htitle em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--brand-teal); }
.ft-quiz-ai-hsub { font-size: 12px; color: var(--ink-3); margin: 0; }
.ft-quiz-ai-letter p { font-size: 14px; line-height: 1.65; color: var(--ink); margin: 0; }
.ft-quiz-ai-dots { display: inline-flex; gap: 6px; align-items: center; padding: 18px 0; color: var(--ink-3); font-style: italic; font-size: 13px; }
.ft-quiz-ai-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-teal); animation: ftDot 1.4s infinite; }
.ft-quiz-ai-dots span:nth-child(2) { animation-delay: .2s; }
.ft-quiz-ai-dots span:nth-child(3) { animation-delay: .4s; }
.ft-quiz-ai-card-err { background: rgba(220, 38, 38, .04); border-color: var(--brand-red); }
.ft-quiz-ai-badge.is-err { background: var(--brand-red); }
.ft-quiz-ai-err-msg { font-size: 13px; font-weight: 600; color: var(--ink); margin: 6px 0 4px; }
.ft-quiz-ai-err-sub { font-size: 12px; color: var(--ink-3); margin: 0; }
.ft-quiz-ai-local { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.ft-quiz-ai-local p { margin: 0; }
/* Result CTA */
.ft-quiz-result-cta {
background: var(--brand-lime);
color: var(--ink);
border: 1.5px solid var(--ink);
border-radius: 12px;
padding: 14px 28px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 4px 4px 0 var(--ink);
transition: all 160ms var(--ease);
}
.ft-quiz-result-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.ft-quiz-result-cta-micro { font-size: 11px; color: var(--ink-3); margin: 10px 0 0; }
/* Accordions */
.ft-quiz-result-accordion { border: 1px solid var(--ink-5); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.ft-quiz-result-ac-head { padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; background: var(--bg-soft); user-select: none; }
.ft-quiz-result-ac-head:hover { background: var(--ink-5); }
.ft-quiz-ac-tog { font-size: 16px; font-weight: 700; color: var(--ink-3); transition: transform 200ms; }
.ft-quiz-result-accordion.open .ft-quiz-ac-tog { transform: rotate(45deg); }
.ft-quiz-result-ac-body { display: none; padding: 12px 14px; background: var(--bg); }
.ft-quiz-result-accordion.open .ft-quiz-result-ac-body { display: block; }
/* Pacing chart */
.ft-quiz-pace { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding-bottom: 22px; position: relative; }
.ft-quiz-pace-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.ft-quiz-pace-bar { width: 100%; max-width: 36px; min-height: 6px; border-radius: 4px 4px 0 0; }
.ft-quiz-pace-bar.ft-quiz-pace-fast { background: var(--brand-green); }
.ft-quiz-pace-bar.ft-quiz-pace-good { background: var(--brand-teal); }
.ft-quiz-pace-bar.ft-quiz-pace-over { background: var(--brand-amber); }
.ft-quiz-pace-bar.ft-quiz-pace-skip { background: var(--ink-5); }
.ft-quiz-pace-ix { position: absolute; bottom: -20px; font-size: 10px; color: var(--ink-3); }
.ft-quiz-pace-key { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10px; color: var(--ink-3); margin-top: 8px; }
.ft-quiz-pace-key-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
/* Per-Q breakdown */
.ft-quiz-bd-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--ink-5); }
.ft-quiz-bd-row:last-child { border-bottom: 0; }
.ft-quiz-bd-icon { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; color: var(--bg); font-family: 'Onest', sans-serif; }
.ft-quiz-bd-icon.is-allcorrect { background: var(--brand-green); }
.ft-quiz-bd-icon.is-allwrong { background: var(--brand-red); }
.ft-quiz-bd-icon.is-partial { background: var(--brand-amber); font-size: 11px; }
.ft-quiz-bd-icon.is-skip { background: var(--ink-5); color: var(--ink-3); }
.ft-quiz-bd-main { flex: 1; min-width: 0; }
.ft-quiz-bd-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.ft-quiz-bd-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.ft-quiz-bd-time { font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* Score context */
.ft-quiz-ctx-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--ink-5); font-size: 13px; color: var(--ink); }
.ft-quiz-ctx-row:last-child { border-bottom: 0; }
.ft-quiz-ctx-row-you { background: rgba(0, 137, 172, .06); margin: 6px -14px -14px; padding: 10px 14px; font-weight: 700; }
.ft-quiz-ctx-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.ft-quiz-ctx-val.is-good { color: var(--brand-green); }
.ft-quiz-ctx-val.is-warn { color: var(--brand-amber); }
.ft-quiz-ctx-val.is-bad { color: var(--brand-red); }
/* Mobile tightening */
@media (max-width: 560px) {
.ft-quiz-q-prompt { font-size: 17px; }
.ft-quiz-blank-label { min-width: 100%; }
.ft-quiz-blank-narrow .ft-quiz-blank-input { max-width: 110px; }
.ft-quiz-qhead { gap: 8px; }
.ft-quiz-timers { width: 100%; justify-content: space-between; }
.ft-quiz-result-timerow { grid-template-columns: 1fr; }
.ft-quiz-mapsvg { max-width: 280px; }
}
/* ============================================================
QUIZ — multi-type renderers (images, audio, refs, ranking)
============================================================ */
.ft-quiz-imgbox { display: block; margin: 8px 0 12px; text-align: center; border: 1.5px solid var(--ink); border-radius: 12px; padding: 8px; background: var(--bg-soft); }
.ft-quiz-imgbox img { display: inline-block; max-width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; }
.ft-quiz-imgbox-sm img { max-height: 180px; }
.ft-quiz-refbox {
margin: 8px 0 12px;
padding: 12px 14px;
background: var(--bg-soft);
border-left: 4px solid var(--brand-teal);
border-radius: 6px;
font-size: 13px;
line-height: 1.6;
color: var(--ink);
}
.ft-quiz-refbox b { color: var(--ink); font-weight: 700; }
.ft-quiz-refbox ul, .ft-quiz-refbox ol { margin: 6px 0 6px 20px; padding: 0; }
.ft-quiz-refbox li { margin: 2px 0; }
.ft-quiz-master-record {
margin: 8px 0 12px;
padding: 12px 16px;
border: 1.5px solid var(--ink);
border-radius: 10px;
background: var(--bg);
font-size: 13px;
line-height: 1.7;
color: var(--ink);
font-family: 'Onest', sans-serif;
}
.ft-quiz-master-record b { color: var(--brand-teal-dark); font-weight: 700; }
.ft-quiz-sentence {
margin: 8px 0 12px;
padding: 12px 14px;
border: 1.5px solid var(--ink-5);
border-radius: 10px;
background: var(--bg);
font-size: 15px;
font-weight: 600;
color: var(--ink);
line-height: 1.55;
}
/* Audio player */
.ft-quiz-audiobox { margin: 8px 0 12px; padding: 12px; border: 1.5px solid var(--ink-5); border-radius: 10px; background: var(--bg-soft); }
.ft-quiz-audio { width: 100%; outline: none; }
/* Data-entry blanks grid */
.ft-quiz-blanks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.ft-quiz-blanks-grid .ft-quiz-blank { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.ft-quiz-blanks-grid .ft-quiz-blank-label { min-width: 0; font-size: 11px; }
@media (max-width: 560px) { .ft-quiz-blanks-grid { grid-template-columns: 1fr; } }
/* Proofreading */
.ft-quiz-proof-list { display: flex; flex-direction: column; gap: 8px; }
.ft-quiz-proof-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--ink-5); border-radius: 10px; background: var(--bg-soft); }
.ft-quiz-proof-num { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.ft-quiz-proof-input { flex: 1; min-height: 56px; padding: 8px 10px; border: 1px solid var(--ink-5); border-radius: 8px; font-size: 13px; line-height: 1.5; font-family: 'Onest', sans-serif; resize: vertical; background: var(--bg); color: var(--ink); }
.ft-quiz-proof-input:focus { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(0, 137, 172, .18); }
/* Prioritization */
.ft-quiz-rule-table, .ft-quiz-prio-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; }
.ft-quiz-rule-table th, .ft-quiz-prio-table th { background: var(--ink); color: var(--bg); padding: 8px 10px; text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ft-quiz-rule-table td, .ft-quiz-prio-table td { padding: 8px 10px; border-top: 1px solid var(--ink-5); color: var(--ink); }
.ft-quiz-rule-table tbody tr:nth-child(odd) td, .ft-quiz-prio-table tbody tr:nth-child(odd) td { background: var(--bg-soft); }
.ft-quiz-rule-table { border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; }
.ft-quiz-prio-key { font-weight: 800; width: 36px; text-align: center; font-size: 14px; color: var(--brand-teal-dark); }
.ft-quiz-prio-text { font-size: 13px; line-height: 1.5; }
.ft-quiz-prio-rank { width: 80px; text-align: center; }
.ft-quiz-prio-select { padding: 6px 10px; border: 1.5px solid var(--ink-5); border-radius: 8px; font-size: 14px; font-weight: 700; background: var(--bg); color: var(--ink); cursor: pointer; }
.ft-quiz-prio-select:focus { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px rgba(0, 137, 172, .18); }
/* Long MCQ option blocks (character comparison) wrap nicely */
.ft-quiz-choice-text b { color: var(--brand-teal-dark); font-weight: 700; }
/* ============================================================
QUIZ — exit-confirmation overlay (sits over the modal body)
============================================================ */
.ft-quiz-confirm {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(10, 14, 20, .72);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
z-index: 10;
padding: 24px;
animation: ccConfirmFade 180ms var(--ease);
}
.ft-quiz-confirm.open { display: flex; }
.ft-quiz-confirm[hidden] { display: none !important; }
@keyframes ccConfirmFade { from { opacity: 0; } to { opacity: 1; } }
/* The modal-inner needs to be the positioning context. */
.ft-diag-modal-inner { position: relative; }
.ft-quiz-confirm-card {
width: 100%;
max-width: 440px;
background: var(--bg);
border: 1.5px solid var(--ink);
border-radius: 16px;
box-shadow: 8px 8px 0 var(--ink);
padding: 24px 22px 22px;
text-align: center;
animation: ccConfirmSlide 220ms var(--ease);
}
@keyframes ccConfirmSlide {
from { opacity: 0; transform: translateY(10px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ft-quiz-confirm-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(246, 156, 8, .15);
color: var(--brand-amber);
border: 1.5px solid var(--brand-amber);
margin-bottom: 12px;
}
.ft-quiz-confirm-title {
font-size: 22px;
font-weight: 800;
letter-spacing: -.01em;
margin: 0 0 8px;
color: var(--ink);
}
.ft-quiz-confirm-msg {
font-size: 14px;
line-height: 1.55;
color: var(--ink-3);
margin: 0 0 18px;
}
.ft-quiz-confirm-msg em {
font-style: italic;
font-family: 'Instrument Serif', Georgia, serif;
color: var(--brand-red);
font-weight: 500;
}
.ft-quiz-confirm-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.ft-quiz-confirm-keep {
background: var(--brand-lime);
color: var(--ink);
border: 1.5px solid var(--ink);
border-radius: 10px;
padding: 12px 18px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.005em;
box-shadow: 3px 3px 0 var(--ink);
transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
}
.ft-quiz-confirm-keep:hover {
transform: translate(-2px, -2px);
box-shadow: 5px 5px 0 var(--ink);
}
.ft-quiz-confirm-keep:active {
transform: translate(1px, 1px);
box-shadow: 2px 2px 0 var(--ink);
}
.ft-quiz-confirm-exit {
background: transparent;
color: var(--ink-3);
border: 1px solid var(--ink-5);
border-radius: 10px;
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all 140ms var(--ease);
}
.ft-quiz-confirm-exit:hover {
background: var(--brand-red);
color: var(--bg);
border-color: var(--brand-red);
}
@media (max-width: 560px) {
.ft-quiz-confirm { padding: 14px; }
.ft-quiz-confirm-card { padding: 20px 18px 18px; box-shadow: 5px 5px 0 var(--ink); }
.ft-quiz-confirm-title { font-size: 19px; }
}
/* ============================================================
QUIZ — AI REPORT category cards (used by both server-side
render and local-fallback composer)
============================================================ */
.ft-quiz-ai-letter {
margin: 4px 0 16px;
padding: 14px 16px;
border-left: 3px solid var(--brand-teal);
background: rgba(0, 137, 172, .04);
border-radius: 8px;
}
.ft-quiz-ai-letter p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink); }
.ft-quiz-ai-letter b { color: var(--ink); font-weight: 700; }
.ft-quiz-ai-cats {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 560px) {
.ft-quiz-ai-cats { grid-template-columns: 1fr; }
}
.ft-quiz-ai-cat {
position: relative;
padding: 14px 14px 12px;
border: 1.5px solid var(--ink-5);
border-radius: 12px;
background: var(--bg);
display: flex;
flex-direction: column;
gap: 4px;
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.ft-quiz-ai-cat.is-good { border-left: 5px solid var(--brand-green); }
.ft-quiz-ai-cat.is-warn { border-left: 5px solid var(--brand-amber); }
.ft-quiz-ai-cat.is-bad { border-left: 5px solid var(--brand-red); }
.ft-quiz-ai-cat.is-skip { border-left: 5px solid var(--ink-5); background: var(--bg-soft); opacity: .85; }
.ft-quiz-ai-cat-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.ft-quiz-ai-cat-name {
font-size: 13px;
font-weight: 700;
color: var(--ink);
letter-spacing: -.005em;
}
.ft-quiz-ai-cat-score {
font-size: 14px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--ink);
white-space: nowrap;
}
.ft-quiz-ai-cat.is-good .ft-quiz-ai-cat-score { color: var(--brand-green); }
.ft-quiz-ai-cat.is-warn .ft-quiz-ai-cat-score { color: var(--brand-amber); }
.ft-quiz-ai-cat.is-bad .ft-quiz-ai-cat-score { color: var(--brand-red); }
.ft-quiz-ai-cat-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .14em;
padding: 3px 9px;
border-radius: 100px;
align-self: flex-start;
margin-top: 2px;
}
.ft-quiz-ai-cat.is-good .ft-quiz-ai-cat-status { background: rgba(22, 163, 74, .12); color: #15803D; }
.ft-quiz-ai-cat.is-warn .ft-quiz-ai-cat-status { background: rgba(246, 156, 8, .15); color: #6F4A00; }
.ft-quiz-ai-cat.is-bad .ft-quiz-ai-cat-status { background: rgba(220, 38, 38, .10); color: #7F1D1D; }
.ft-quiz-ai-cat.is-skip .ft-quiz-ai-cat-status { background: var(--ink-5); color: var(--ink-3); }
.ft-quiz-ai-cat-insight {
margin: 4px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--ink-3);
}
.ft-quiz-ai-cat-bar {
margin-top: 8px;
height: 4px;
background: var(--ink-5);
border-radius: 100px;
overflow: hidden;
}
.ft-quiz-ai-cat-bar-fill {
display: block;
height: 100%;
background: var(--brand-teal);
transition: width 900ms var(--ease);
}
.ft-quiz-ai-cat.is-good .ft-quiz-ai-cat-bar-fill { background: var(--brand-green); }
.ft-quiz-ai-cat.is-warn .ft-quiz-ai-cat-bar-fill { background: var(--brand-amber); }
.ft-quiz-ai-cat.is-bad .ft-quiz-ai-cat-bar-fill { background: var(--brand-red); }
.ft-quiz-ai-summary-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 14px 0 4px;
}
@media (max-width: 560px) { .ft-quiz-ai-summary-row { grid-template-columns: 1fr; } }
.ft-quiz-ai-summary-cell {
padding: 10px 12px;
border: 1.5px solid var(--ink-5);
border-radius: 10px;
background: var(--bg-soft);
text-align: center;
}
.ft-quiz-ai-summary-num { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ft-quiz-ai-summary-num em { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: 2px; }
.ft-quiz-ai-summary-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-top: 2px; }
/* When the local fallback ships its own card, make sure the inner spacing matches */
.ft-quiz-ai-local { margin-top: 0; }
.ft-quiz-ai-local .ft-quiz-ai-card { margin-top: 0; }
/* ====[ /ft-quiz ]==== */
/* ============================================================
Media inside the diagnostic quiz body.
LearnDash authors paste `[video]` shortcodes into question
prompts; do_shortcode() at extraction time renders them as
which would blow the modal layout open. Force the WP video
container + its