/* Self-hosted fonts (same origin, /assets/*.woff2 served by landing.ts).
Replaces the Google Fonts CDN , which was a render-blocking
third-party stylesheet in front of every CTA. Same 3 families and the
same weights the CSS below actually uses -- JetBrains Mono 500/700
were generated for this move (pipeline in web/app/src/fonts.md).
The /app and the guide surface already self-host these. */
@font-face { font-family: 'Anton'; font-weight: 400; font-style: normal; font-display: swap;
src: url('/assets/anton-400.woff2?v=0e3380b4ccc949dd') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-style: normal; font-display: swap;
src: url('/assets/space-grotesk-400.woff2?v=81b3016f2b75bcaf') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-style: normal; font-display: swap;
src: url('/assets/space-grotesk-600.woff2?v=50b74fdefd04006a') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-style: normal; font-display: swap;
src: url('/assets/space-grotesk-700.woff2?v=d134673326db407c') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap;
src: url('/assets/jetbrains-mono-400.woff2?v=ff38cc6f4c8b8d61') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap;
src: url('/assets/jetbrains-mono-500.woff2?v=c50050f3b584c263') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: normal; font-display: swap;
src: url('/assets/jetbrains-mono-600.woff2?v=53f2cc1f693730c2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: normal; font-display: swap;
src: url('/assets/jetbrains-mono-700.woff2?v=1eb947ab2864d33e') format('woff2'); }
/* ============================================================
Terminal Dossier / Dynamic Accent — design system reskin.
Tokens per design handoff: Anton (display) + Space Grotesk (UI)
+ JetBrains Mono (data). Dark default, light via
html[data-theme="light"]. One accent hue active at a time from
a 6-color palette; --accentBorder/--accentStroke are derived at
runtime (hex+66 / hex+55) — never hardcode an accent hex on an
individual element.
The rotation itself lives in CSS as --accent-1..6, with a SECOND,
WCAG-darkened set of the same 6 hues under html[data-theme="light"]
(dívida nº3/nº4): the dark hues score 1.21–2.82:1 against the light
panel, and --accent is a TEXT colour (.sec-label, .plan-pro
.offer-tag) and the site's only focus ring. The script reads
--accent-N via getComputedStyle, so the correct table resolves from
whichever theme block is live — never re-add a hex array here.
============================================================ */
:root {
--bg: #0b0c0d;
--fg: #f2f4f0;
--sub: #9a9d97;
--panel: rgba(255,255,255,.06);
--panelBorder: rgba(255,255,255,.16);
--border: rgba(255,255,255,.12);
/* Rotation table. Dark theme: the literal Dossier hues (all pass 4.5:1
against the dark panel — measured 5.02–11.71:1). --accent holds slot 1
so the pre-JS paint is never blank. */
--accent-1: #ff8a3d; /* orange */
--accent-2: #4f8cff; /* blue */
--accent-3: #c65fe0; /* purple */
--accent-4: #22d3ee; /* cyan */
--accent-5: #ff4d5e; /* red */
--accent-6: #ffcf40; /* yellow */
--accent: #ff8a3d;
--accentBorder: #ff8a3d66;
--accentStroke: #ff8a3d55;
--ctaText: #0b0c0d;
--wrong: #ff4d5e;
--display: 'Anton', 'Arial Narrow', sans-serif;
--sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--max: 1160px;
color-scheme: dark;
}
html[data-theme="light"] {
--bg: #f3f1ea;
--fg: #111110;
--sub: #68665f;
--panel: rgba(0,0,0,.035);
--panelBorder: rgba(0,0,0,.14);
--border: rgba(0,0,0,.12);
/* Same 6 hues, darkened by the WCAG relative-luminance formula until each
clears 4.5:1 against the PRO CARD — --panel flattened over --bg, i.e.
#eae9e2 — and not merely against --bg. The card is the stricter backdrop
and it is the one that matters: "Pro · $49.90/yr" is rendered on it. The
/app's table (web/app/src/styles.css ~L205) was tuned against #f3f1ea
alone and lands at 4.46:1 here, so these are re-derived, not copied.
Measured: 4.58–4.61:1 on the card, 4.93–4.97:1 on the page background.
Slot 5 has no /app counterpart — its 5-hue rotation drops #ff4d5e. */
--accent-1: #b24600; /* orange */
--accent-2: #0057fc; /* blue */
--accent-3: #a727c8; /* purple */
--accent-4: #0a7282; /* cyan */
--accent-5: #d20014; /* red */
--accent-6: #846300; /* yellow — desaturates toward bronze; the only hue
light enough that AA forces it off-hue */
--accent: #b24600;
--accentBorder: #b2460066;
--accentStroke: #b2460055;
/* --ctaText goes LIGHT here, unlike the rest of the light theme. The
darkened accents above are used as SOLID BUTTON FILL (.btn-primary,
.skip-link, the promo bar, the quiz's right-answer key): dark #111110
on those fills measures 3.39–3.65:1 (fails), light #f2f4f0 measures
4.68–5.04:1 (passes). Every --ctaText consumer in this file sits on an
accent fill, so this flip is safe — re-check that before changing it. */
--ctaText: #f2f4f0;
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
button { font: inherit; }
a { color: inherit; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Full-bleed brutalist grid behind every section */
body::before {
content: ""; position: fixed; inset: 0; z-index: -1;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 64px 64px;
opacity: .35; pointer-events: none;
}
/* Token changes (theme toggle / accent cycle) animate, never snap */
body, body::before, section, .masthead, footer,
a, button, input, .btn, .btn-primary, .btn-link,
h1, h2, h3, p, span, li, code, svg text, svg line, svg polyline, svg circle {
transition: background-color .3s ease, color .3s ease, border-color .3s ease,
fill .3s ease, stroke .3s ease, box-shadow .3s ease, opacity .3s ease;
}
h1, h2, h3 { font-family: var(--sans); font-weight: 700; margin: 0; color: var(--fg); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
@media (min-width: 860px) { .wrap { padding: 0 40px; } }
/* Skip link */
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--accent); color: var(--ctaText);
padding: 10px 16px; z-index: 1000;
font-family: var(--mono); font-weight: 700; font-size: 12px;
letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }
/* Server-injected promo bar (renderPromoBanner ships inline styles;
!important re-themes it into the token system) */
body > div[role="note"] {
background: var(--accent) !important;
color: var(--ctaText) !important;
font-family: var(--mono) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: .05em;
text-transform: uppercase;
}
/* V186 — o CTA do banner de promo é o link de MAIOR INTENÇÃO da página (leva a `/buy`
com o cupom vivo) e nascia com 14px de altura tocável no celular: `renderPromoBanner`
o injeta como `` INLINE, e elemento inline não tem caixa de toque além do texto.
Medido num Chromium real a 390px, antes desta regra: 14.0px de altura nos 3 idiomas
(o `font-size:14px` do estilo inline perde para o `11.5px !important` acima). O piso é
44px — o mesmo que `landing-tap-target-floor` já cobra de `.btn-small`, citando iOS e
Material. `inline-block` + padding cria a caixa; a margem negativa devolve a altura ao
banner, para o hit-area crescer sem empurrar a página. */
body > div[role="note"] { position: relative; padding: 14px 16px !important; }
body > div[role="note"] a { color: var(--ctaText) !important; }
body > div[role="note"] a::after { content: ""; position: absolute; inset: 0; }
/* Masthead */
.masthead {
background: var(--bg);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 50;
}
/* Item V83 (loop do primeiro pagante, 29/07): the row must WRAP, never overflow.
Measured on the html production SERVES — the disk file has no "Sign in" button,
the server injects it at the APPLINK marker (injectAppLink, landing.ts) —
and that marker is NOT spelled out here on purpose: injectAppLink uses
String.replace, which takes the FIRST occurrence, so a comment naming it
verbatim above the real marker eats the injection. Measured: it did. — so a
disk-only check understates this by ~28x. documentElement.scrollWidth minus
clientWidth, real webfonts, Chromium:
320px 390px 412px 860px 1000px
en +113 +43 +21 +118 0
pt-BR +127 +57 +35 +132 0
es +190 +120 +98 +210 +70
At 390px — the most common phone width there is — the Spanish primary CTA was
off the screen except for ~8px of its rounded corner, and the English one lost
the word "free" entirely. There are at least THREE broken bands, not two: also
605-692px in pt/es, and the es band above 860px runs to ~1183px with a clean gap
at 1071-1099px. In es the secondary "Iniciar sesion" overflows on its own too
(32px at 320px with the primary CTA removed) — two guilty children, not one.
Both bands were born the same way: ADDING one child to a nowrap flex row (the
Study Library link took .masthead-nav to 7 items; the app link added a second
button). A row with no way to yield does not reflow, it overflows the page. So
the fix is structural — `flex-wrap` cannot regress when content is added — rather
than pinning the pixel widths of today's copy, which change with every word of
new translation. `min-width: 0` lets the two flexible children shrink before the
row wraps, instead of wrapping one item too early. */
.masthead-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 20px; padding-top: 18px; padding-bottom: 18px;
}
.masthead-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wordmark {
font-family: var(--sans); font-size: 18px; font-weight: 700;
letter-spacing: -0.01em; white-space: nowrap; text-transform: uppercase;
color: var(--fg); text-decoration: none;
}
.wordmark span { color: var(--accent); }
.lang-switch {
display: flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
color: var(--sub);
}
/* Item 16 (Ciclo 2 a11y): "EN"/"PT"/"ES" are real tap targets on mobile but
were only as wide as 2-3 letters of 11px mono text — well under 44x44 CSS
px. Growing the VISIBLE row fights the masthead's already-tight 860-1099px
squeeze above, so the hit area is expanded invisibly via a centered
::before instead — same 44px floor the /app's LangSwitcher enforces with
real min-width/min-height, but the compact look here stays untouched.
.lang-current has no href (it's the current-page marker, not a link) but
gets the same treatment for visual/rhythm parity with the two real links. */
.lang-switch a, .lang-switch .lang-current { position: relative; }
.lang-switch a::before, .lang-switch .lang-current::before {
content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 44px; height: 44px;
}
.lang-switch a { color: var(--sub); text-decoration: none; }
.lang-switch a:hover { color: var(--accent); }
.lang-switch .lang-current { color: var(--fg); font-weight: 700; text-decoration: none; }
.masthead-nav {
display: none; gap: 26px; min-width: 0;
font-family: var(--mono); font-size: 12px; font-weight: 500;
letter-spacing: .04em; text-transform: uppercase;
}
.masthead-nav a {
color: var(--sub); text-decoration: none; position: relative; padding-bottom: 3px;
}
.masthead-nav a::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.masthead-nav a:hover { color: var(--fg); }
.masthead-nav a:hover::after { transform: scaleX(1); }
@media (min-width: 860px) { .masthead-nav { display: flex; } }
@media (min-width: 860px) {
/* A3 (Ciclo 2 buraco): o link do hub de guias levou a nav a 7 itens; the fixed
26px gap risks crowding/wrapping right at the 860px turn-on point.
Trimming gap+size here buys headroom until a real viewport check
(pending in HANDOFF.md) confirms the fit end to end.
V83: the squeeze has NO upper bound any more, and it is tighter. The viewport
check the comment above was waiting for got done, and the answer was that it
does NOT fit: with the app link's "Sign in" button in the row, es overflowed
210px at 860px and was still overflowing at 1150px. Two measured reasons for
each half of this change:
- the 1099px ceiling was itself a defect. At exactly 1100px the squeeze
switched off, the nav jumped from gap 14/font 11 back to 26/12, and — now
that the row wraps — en and pt broke into two lines at a width that had
been fine. Removing the ceiling keeps one line from 1000px up in all three
languages, es included, which is what the old code only managed by
shrinking the nav until it was cramped.
- gap 14 -> 12 and a 14px row gap buy the last few px needed for es to hold
one line from 1099px instead of 1200px.
Above 860px this pairing now wraps ONLY at widths that used to overflow —
measured at 860/900/950/1000/1050/1099/1100/1150/1200/1280/1440 in 3 languages,
zero spurious wraps. */
.masthead-row { gap: 14px; }
.masthead-nav { gap: 12px; font-size: 11px; }
}
/* Item 17 (Ciclo 2 a11y): below 860px .masthead-nav simply display:none's
away (rule above) with no replacement — the 6 in-page sections + Study
Library become unreachable on mobile, no JS-heavy dependency wanted here.
Fix: a hamburger toggle mirroring .mode-btn's exact visual recipe (same
tokens, same bracket-glyph convention as the theme toggle next to it),
hidden at >=860px same as .masthead-nav itself. It carries an invisible
44x44 ::before hit-area (same technique as item 16's lang-switch, so the
VISIBLE button stays .mode-btn-sized — the masthead is already tight
between 860-1099px, a full 44px-wide button would eat further into that).
When opened (.nav-open, toggled by the shared script at the bottom of
body), .masthead-nav leaves the flex row via position:absolute
(out-of-flow — the row's other children re-space exactly as they already
do today with nav display:none, zero shift to the visible header) and
renders as a full-width panel anchored to .masthead's own
`position: sticky` (already a containing block for an absolute
descendant). */
.nav-toggle {
display: none;
position: relative;
font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em;
background: transparent; border: 1px solid var(--border); color: var(--sub);
padding: 6px 9px; cursor: pointer; white-space: nowrap; border-radius: 0;
}
.nav-toggle:hover { color: var(--fg); border-color: var(--panelBorder); }
.nav-toggle::before {
content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 44px; height: 44px;
}
@media (max-width: 859px) {
.nav-toggle { display: inline-block; }
.masthead-nav.nav-open {
display: flex; flex-direction: column; gap: 0;
position: absolute; top: 100%; left: 0; right: 0;
background: var(--bg); border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border); padding: 4px 22px 12px;
}
.masthead-nav.nav-open a {
min-height: 44px; display: flex; align-items: center;
padding-bottom: 0; border-bottom: 1px solid var(--border);
}
.masthead-nav.nav-open a:last-child { border-bottom: none; }
.masthead-nav.nav-open a::after { display: none; }
}
/* Theme + accent controls */
.mode-controls { display: flex; align-items: center; gap: 8px; }
.mode-btn {
font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em;
background: transparent; border: 1px solid var(--border); color: var(--sub);
padding: 6px 9px; cursor: pointer; white-space: nowrap; border-radius: 0;
}
.mode-btn:hover { color: var(--fg); border-color: var(--panelBorder); }
.dateline { border-top: 1px solid var(--border); border-bottom: none; }
.dateline-row {
display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between;
padding-top: 8px; padding-bottom: 8px;
font-family: var(--mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .08em; text-transform: uppercase;
color: var(--sub);
}
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: .5em;
font-family: var(--mono); font-weight: 600; font-size: 12.5px;
letter-spacing: .04em; text-transform: uppercase;
padding: 14px 22px; border: 1px solid var(--border); border-radius: 0;
text-decoration: none; cursor: pointer; background: transparent; color: var(--sub);
transition: color .3s ease, background-color .3s ease, border-color .3s ease,
transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, filter .3s ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); color: var(--fg); border-color: var(--panelBorder); box-shadow: none; }
.btn:active { transform: translateY(0); }
/* Primary CTA: liquid-glass panel with accent border (per handoff) */
.btn-primary {
background: var(--panel);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid var(--accent); border-radius: 12px;
color: var(--fg);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-primary:hover {
background: var(--panel); border-color: var(--accent); color: var(--fg);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px -12px var(--accentBorder);
}
/* Masthead compact CTA: solid accent fill (per handoff nav spec) */
/* Item V15 (loop do primeiro pagante, 28/07): .btn-small renders ~35.6px tall
(8+8 padding + 11px x 1.6 inherited line-height + 2 borders) — under the 44px
touch floor that items 16 and 17 above already enforce for the lang-switch and
the nav toggle. This is the class of the three links a phone actually taps on
the way to paying: the masthead "Start free" (the funnel's first tap, sticky
through the entire scroll), the server-injected "Sign in" 10px from it, and the
weekly-plan link inside the Pro price card. Same invisible-::before technique as
item 16, with ONE deliberate difference: the deficit here is only VERTICAL —
these buttons are already far wider than 44px — so the hit area spans the
button's own width instead of a fixed 44px. A centered 44px-WIDE overlay would
reach outside a narrow button and steal taps from the sibling next to it, which
is the exact mis-tap this is meant to prevent. */
.btn-small { padding: 8px 14px; font-size: 11px; position: relative; }
.btn-small::before {
content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 100%; height: 44px;
}
.btn-primary.btn-small {
background: var(--accent); border-color: var(--accent); color: var(--ctaText);
border-radius: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.btn-primary.btn-small:hover { filter: brightness(1.1); color: var(--ctaText); }
.btn-link {
font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: .05em; text-transform: uppercase;
color: var(--sub); text-decoration: none;
/* V197 — o alvo cabe DENTRO da caixa, nunca sangrando para fora dela.
11px x 1.6 = 17.6px de linha; +14px em cima e embaixo = 45.6px, acima do piso
de 44px que .btn-small ja cobra nesta mesma folha. Todo .btn-link e item de um
.cta-row (display:flex), logo ja e blocado: o padding entra no LAYOUT e empurra
o vizinho, em vez de pintar por cima dele. Crescer para fora perderia o hit-test
para .masthead (position:sticky; z-index:50) — ver "CAIXA NAO E ALVO", V186. */
padding: 14px 0;
}
.btn-link:hover { color: var(--accent); }
/* Section scaffolding */
section { padding: clamp(56px, 8vw, 88px) 0; border-top: 1px solid var(--border); position: relative; overflow: hidden; scroll-margin-top: 118px; }
section.no-rule { border-top: none; }
.eyebrow {
display: block; font-family: var(--mono); font-size: 12px; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--sub); margin: 0 0 18px;
}
.section-grid { display: block; }
.section-grid > div { min-width: 0; }
/* § tag → bracket pill: "[ § 01 — OPENING ]" */
.section-margin {
display: inline-flex; flex-direction: row; gap: 6px; align-items: baseline;
position: static; margin-bottom: 26px;
font-family: var(--mono); font-size: 10.5px; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
border: 1px solid var(--accentBorder); border-radius: 20px;
padding: 5px 12px; white-space: nowrap; color: var(--accent);
}
.section-margin::before { content: "[ "; color: var(--accent); }
.section-margin::after { content: " ]"; color: var(--accent); }
.sec-num { font-family: var(--mono); font-style: normal; color: var(--accent); font-size: 10.5px; }
.sec-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sec-label::before { content: "— "; }
.section-intro {
font-family: var(--mono); font-size: 13.5px; line-height: 1.7;
color: var(--sub); max-width: 620px;
}
h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(30px, 3.5vw, 42px); line-height: 1.0;
letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 22px;
}
/* Hero */
.display {
font-family: var(--display); font-weight: 400;
font-size: clamp(44px, 6.6vw, 84px); line-height: 0.94;
letter-spacing: -0.01em; text-transform: uppercase;
margin: 0 0 34px; max-width: 900px;
}
html[lang="pt-BR"] .display, html[lang="es"] .display { line-height: 1.04; }
.accent-line { color: var(--accent); }
.lede {
font-family: var(--mono); font-size: 14px; line-height: 1.7;
max-width: 560px; margin: 0; color: var(--sub);
}
.lede::first-letter { font-size: inherit; float: none; padding: 0; font-weight: inherit; color: inherit; }
.meta-line {
font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--sub);
margin: 22px 0 0; max-width: 560px; line-height: 1.7;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 36px; }
/* Oversized background watermark (poster/specimen motif) — parallax via JS */
.watermark {
position: absolute; z-index: 0; pointer-events: none; user-select: none;
font-family: var(--display); font-weight: 400; text-transform: uppercase;
letter-spacing: -0.01em; line-height: .75;
color: transparent;
-webkit-text-stroke: 1.5px var(--accentStroke);
opacity: .5; will-change: transform;
transition: -webkit-text-stroke-color .3s ease;
}
.wm-hero { top: -20px; right: -14px; font-size: clamp(110px, 20vw, 250px); }
.wm-close { bottom: -30px; left: -10px; font-size: clamp(90px, 16vw, 200px); opacity: .35; }
section > .wrap { position: relative; z-index: 1; }
/* Instrument grid (§03 Method) */
.instrument-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 46px; }
@media (min-width: 760px) { .instrument-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.instrument-col {
min-width: 0; padding: 26px 28px;
background: var(--panel);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid var(--panelBorder); border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
transition: border-color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.instrument-col:first-child { padding-left: 28px; border-left: 1px solid var(--panelBorder); }
.instrument-col:last-child { padding-right: 28px; }
.instrument-col:hover { transform: translateY(-4px); border-color: var(--accentBorder); }
.roman {
display: block; font-family: var(--display); font-style: normal; color: var(--accent);
font-size: 2rem; line-height: 1; margin-bottom: 14px;
}
.instrument-col h3 {
font-family: var(--sans); font-size: 15px; font-weight: 700;
text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px;
}
.instrument-col p { color: var(--sub); font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }
/* Readiness / equation (§04) */
.readiness-layout { display: grid; grid-template-columns: 1fr; gap: 48px; margin-top: 46px; align-items: start; }
@media (min-width: 900px) { .readiness-layout { grid-template-columns: 1fr 380px; } }
.eq-row {
display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
padding: 14px 0; border-bottom: 1px solid var(--border);
}
.equation-block .eq-row:last-of-type { border-bottom: none; }
.eq-label {
flex: 0 0 128px; font-family: var(--mono); font-size: 11px; font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; color: var(--fg);
}
.eq-expr {
font-family: var(--mono); font-style: normal; color: var(--sub);
font-size: clamp(.85rem, .4vw + .75rem, 1rem);
}
.eq-expr sup { font-style: normal; color: var(--accent); font-weight: 700; font-size: .6em; margin-left: 1px; }
.eq-range {
font-style: normal; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
letter-spacing: .06em; color: var(--sub); margin-left: 8px; opacity: .7;
}
.footnotes {
margin: 30px 0 0; padding: 22px 0 0 20px; border-top: 1px solid var(--border);
font-family: var(--mono); font-style: normal; font-size: 12px; line-height: 1.7;
color: var(--sub); display: grid; gap: 13px;
}
.footnotes li::marker { color: var(--accent); font-family: var(--mono); font-style: normal; font-weight: 700; font-size: 11px; }
.callout {
margin-top: 40px; padding: 4px 0 4px 16px; border-left: 2px solid var(--accent);
font-family: var(--mono); font-style: normal; font-weight: 600;
font-size: 12.5px; line-height: 1.6; color: var(--fg);
max-width: 620px;
}
.callout a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.callout a:hover { color: var(--fg); }
/* Plates (Fig. 1 video / Fig. 2 chart) — liquid glass cards */
.plate {
border: 1px solid var(--panelBorder); border-radius: 14px;
background: var(--panel);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
padding: 14px; margin: 0; text-align: center;
}
.plate img, .plate video { border: 1px solid var(--border); margin: 0 auto; max-width: 100%; height: auto; display: block; }
.plate figcaption {
margin-top: 12px; font-family: var(--mono); font-style: normal;
font-size: 11px; color: var(--sub); line-height: 1.6;
}
/* Fig. 2 — mastery forecast chart */
.fig2-figure { margin-top: 44px; overflow-x: auto; }
.fig2-figure svg { display: block; width: 100%; min-width: 480px; height: auto; }
.fig2-axis, .fig2-tick { stroke: var(--border); stroke-width: 1; }
.fig2-axis { stroke: var(--panelBorder); }
.fig2-ready-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 6; opacity: .8; }
.fig2-ready-label {
font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
fill: var(--accent); font-weight: 700;
}
.fig2-curve-hist { fill: none; stroke: var(--fg); stroke-width: 2; }
.fig2-curve-proj { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.fig2-pt { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }
.fig2-pt-end { fill: var(--accent); }
.fig2-guide { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.fig2-tick-label { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; fill: var(--sub); }
.fig2-date-label { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; fill: var(--sub); }
.fig2-date-label-accent {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
fill: var(--accent); font-weight: 700;
}
/* Certifications index (§06) */
.index-list { list-style: none; padding: 0; margin: 40px 0 0; }
.index-list li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 12px;
padding: 18px 4px; border-bottom: 1px solid var(--border);
font-family: var(--display); font-weight: 400; text-transform: none;
font-size: clamp(1.2rem, 1.6vw + .8rem, 1.7rem); letter-spacing: -0.01em;
transition: padding .28s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.index-list li:hover { padding-left: 16px; background: var(--panel); }
.index-list li:first-child { border-top: 1px solid var(--border); }
.idx-num { font-family: var(--mono); font-size: 12px; color: var(--sub); flex-shrink: 0; }
.index-list li:hover .idx-num { color: var(--accent); }
.idx-full {
font-size: 11.5px; font-family: var(--mono); font-style: normal; letter-spacing: .01em;
color: var(--sub); margin-left: 8px;
}
.idx-leader {
flex: 1 1 60px; min-width: 24px; border-bottom: 1px dotted var(--border);
align-self: flex-end; transform: translateY(-7px); height: 0;
}
.idx-status {
font-family: var(--mono); font-size: 10.5px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
color: var(--sub); flex-shrink: 0; white-space: nowrap;
}
.idx-status.is-live { color: var(--accent); font-weight: 700; }
@media (max-width: 540px) {
.idx-leader { display: none; }
.idx-status { margin-left: 34px; }
}
.section-footnote { margin: 24px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--sub); max-width: 560px; }
/* Pricing (§07) — Free: plain bordered card; Pro: glass card w/ accent border */
.offer-box {
border: 1px solid var(--border); border-radius: 0;
max-width: 560px; margin: 42px 0 0; box-shadow: none; background: transparent;
transition: transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s ease, background-color .3s ease;
}
.offer-box:hover { transform: translateY(-4px); }
.offer-tag {
font-family: var(--mono); font-size: 10.5px; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase;
color: var(--sub); padding: 10px 24px; border-bottom: 1px solid var(--border);
}
.offer-body { padding: 30px 26px 28px; }
.price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 22px; }
.price-num {
font-family: var(--display); font-weight: 400; letter-spacing: 0;
font-size: clamp(2.1rem, 3.4vw + .9rem, 2.9rem); color: var(--fg);
}
.price-period {
font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
text-transform: uppercase; color: var(--sub);
}
.offer-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 0; }
.offer-list li {
font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--sub);
padding: 8px 0 8px 22px; position: relative; border-bottom: 1px solid var(--border);
}
.offer-list li:last-child { border-bottom: none; }
.offer-list li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.offer-cta { width: 100%; justify-content: center; }
.offer-fine { margin: 16px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--sub); line-height: 1.6; }
.offer-who {
margin: 14px 0 0; padding: 13px 0 0; border-top: 1px solid var(--border);
font-family: var(--sans); font-size: 13px; line-height: 1.65; color: var(--sub);
}
.offer-who strong { color: var(--fg); font-weight: 600; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 42px 0 0; align-items: stretch; }
.compare-grid .offer-box { max-width: none; margin: 0; }
.compare-grid .plan-pro {
background: var(--panel);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border: 1px solid var(--accent); border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.compare-grid .plan-pro .offer-tag { color: var(--accent); border-bottom-color: var(--accentBorder); }
.offer-list li.plus { color: var(--fg); font-weight: 600; }
.offer-list li.plus::before { content: "+"; }
/* Weekly plan (US$ 4.99/wk) offered inside the Pro card rather than as a third
column: .compare-grid is a 2-up that collapses at 720px, and a 3rd tier would
restructure the grid on every breakpoint. §7.3 (C3-A4): this used to be a bare
12.5px text link, subordinate to invisibility on the landing — the highest-traffic
COLD surface (2039 lp_view vs 14 app_click) — while the bot (paywallKeyboard) and
the app (UpgradeCta.tsx) both give the weekly door a real button. Reusing
.btn.btn-small gives it that weight here too, in the landing's OWN button language
rather than importing the app's (the two sheets diverge on purpose — see the
terminal-dossier skill). The precedent for a non-primary .btn on this page is real
and in this file: .btn.buy-btn ("Get Pro — $49.90/yr", :1012 and :1430), which sits
next to a primary CTA without competing with it. NB: an earlier draft of this comment
cited a masthead "Sign in" button as the precedent — that button does not exist on
this page, and the adversarial review of C3-A4 caught it. Do not reintroduce it. Annual keeps the card's only .btn-primary,
so the hierarchy still reads primary-vs-secondary, never two equal buttons. */
.price-alt {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--sub);
margin: -6px 0 20px;
}
@media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } }
/* Free x Pro line-by-line table (§07) */
.plan-table-h {
margin: 46px 0 16px; font-family: var(--sans); font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: var(--fg);
}
.plan-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.plan-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.plan-table caption {
caption-side: bottom; text-align: left; padding: 10px 16px;
font-family: var(--mono); font-size: 10.5px; color: var(--sub); border-top: 1px solid var(--border);
}
.plan-table th, .plan-table td {
padding: 11px 16px; text-align: left; font-size: 12.5px; line-height: 1.5;
border-bottom: 1px solid var(--border);
}
.plan-table thead th {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
color: var(--sub); font-weight: 600; border-bottom: 1px solid var(--panelBorder);
}
.plan-table tbody th {
font-family: var(--sans); font-weight: 600; color: var(--fg); white-space: nowrap;
}
.plan-table tbody td { font-family: var(--mono); color: var(--sub); }
.plan-table tbody tr:last-child th, .plan-table tbody tr:last-child td { border-bottom: none; }
.plan-table tbody tr:nth-child(even) { background: var(--panel); }
.plan-table .plan-table-pro { color: var(--accent); }
.plan-table thead .plan-table-pro { color: var(--accent); }
.plan-table tbody td.plan-table-pro { font-weight: 600; }
/* Estado de cada capacidade: ÍCONE + texto curto, não texto corrido.
🔑 Três estados, não dois: "incluído, com limite" é o caso mais comum desta tabela
(3 de 5 questões por dia; nivelamento sem o resultado), e um ✓/✕ binário mentiria
nas duas direções — ✓ prometeria demais, ✕ esconderia o que o Grátis entrega.
⚠️ O ✕ é CINZA, nunca vermelho: `--wrong` (#ff4d5e) está DENTRO da paleta de
rotação do accent (dívida conhecida nº 1 do design system), então um ✕ vermelho
coincidiria com o accent do momento a cada ~72 s. E "não incluído" não é erro. */
.plan-c { display: inline-flex; align-items: center; gap: 8px; }
.plan-c svg { width: 13px; height: 13px; flex: none; }
.plan-c.is-yes svg { color: var(--fg); }
.plan-c.is-part svg { color: var(--sub); }
.plan-c.is-no svg { color: var(--sub); opacity: .55; }
.plan-table tbody td.plan-table-pro .plan-c svg { color: var(--accent); }
/* FAQ (§08) */
.qa-list { margin-top: 40px; }
.qa-item { border-bottom: 1px solid var(--border); }
.qa-item:first-child { border-top: 1px solid var(--border); }
.qa-item summary {
list-style: none; cursor: pointer; padding: 19px 4px;
display: flex; align-items: baseline; gap: 10px;
font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--fg);
}
.qa-item summary:hover { color: var(--accent); }
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.q-mark { color: var(--accent); font-weight: 700; font-style: normal; font-family: var(--mono); flex-shrink: 0; }
.qa-item summary::after {
content: "+"; margin-left: auto; font-family: var(--mono); color: var(--accent); font-size: 18px;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.qa-item[open] summary::after { content: "+"; transform: rotate(45deg); }
.qa-answer { display: flex; gap: 10px; padding: 0 4px 22px; }
.a-mark { color: var(--sub); font-weight: 700; font-style: normal; font-family: var(--mono); flex-shrink: 0; }
.qa-answer p { color: var(--sub); font-family: var(--mono); font-size: 12.5px; line-height: 1.75; margin: 0; }
/* Closing (§09) */
.closing-line {
max-width: 900px;
font-size: clamp(38px, 5.4vw, 68px); line-height: 0.94;
}
.end-mark { text-align: left; margin: 46px 0 0; color: var(--accent); font-size: 22px; }
/* Footer */
footer { border-top: 1px solid var(--border); background: transparent; padding: 52px 0 0; position: relative; }
.footer-col { max-width: 640px; }
.disclaimer {
font-family: var(--mono); font-style: normal; font-size: 11.5px;
color: var(--sub); line-height: 1.8;
}
.specimen { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--sub); margin: 14px 0 0; }
.byline-name { color: var(--fg); font-weight: 600; }
.byline { margin: 0 0 22px; font-family: var(--sans); font-size: 13.5px; line-height: 1.7; }
.footer-col a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px;
padding: 20px 0; margin-top: 26px; border-top: 1px solid var(--border);
font-family: var(--mono); font-size: 11.5px; color: var(--sub);
}
.footer-bottom a { color: var(--sub); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }
/* ============ Scroll reveal (classes attached by JS) ============ */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in {
opacity: 1; transform: none;
transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1),
background-color .3s ease, color .3s ease, border-color .3s ease;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
.reveal { opacity: 1; transform: none; }
.watermark { transform: none !important; }
}
/* ============================================================
Quiz — § 02 Specimen. Same DOM/behavior; reskinned into the
token system (glass cards on the dossier grid; accent-bound).
============================================================ */
#quiz { position: relative; overflow: hidden; isolation: isolate; background: transparent; color: var(--fg); }
#quiz::before, #quiz::after {
content: ""; position: absolute; z-index: -1; border-radius: 999px;
filter: blur(70px); opacity: .16; background: var(--accent);
transition: background-color .3s ease;
}
#quiz::before { width: 340px; height: 340px; right: -170px; top: 40px; }
#quiz::after { width: 240px; height: 240px; left: -130px; bottom: 80px; }
#quiz .section-grid { display: block; }
#quiz .section-margin { position: static; flex-direction: row; gap: 6px; margin-bottom: 28px; }
#quiz .sec-num, #quiz .eyebrow { color: var(--accent); }
#quiz .eyebrow { color: var(--sub); }
#quiz .sec-label { color: var(--accent); }
#quiz .quiz-intro { max-width: 760px; }
#quiz h2 { color: var(--fg); }
#quiz .section-intro { max-width: 660px; color: var(--sub); }
.quiz-shell { max-width: 1040px; margin-top: 36px; font-family: var(--mono); }
.quiz-chrome { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 2px 14px; }
.quiz-kicker {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--accent); border: 1px solid var(--accentBorder); border-radius: 20px; padding: 5px 12px;
}
.quiz-progress { display: flex; align-items: center; gap: 12px; color: var(--fg); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.quiz-dots { display: inline-flex; gap: 6px; }
.quiz-dot { width: 8px; height: 8px; border: 1.5px solid var(--sub); border-radius: 50%; background: transparent; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.quiz-dot.is-current { border-color: var(--accent); background: var(--accent); transform: scale(1.25); }
.quiz-dot.is-done { border-color: var(--accent); background: var(--accent); }
.quiz-item {
position: relative; overflow: hidden; margin: 0; padding: clamp(22px, 4vw, 40px);
border: 1px solid var(--panelBorder); border-radius: 14px;
background: var(--panel);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
color: var(--fg);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
animation: quiz-enter .38s cubic-bezier(.2,.85,.25,1) both;
}
.quiz-item.is-upcoming { display: none; }
/* V80 — the quiz is INERT until its own script wires it, so the markup ships marked
`quiz-unwired` and the script removes that class ONLY after every listener is
attached. That covers BOTH failures with one trigger: scripting off (the script
never runs) and the script throwing partway (it never reaches the removal).
`noscript` would cover only the first — the V81/V96 lesson, applied a step earlier
in the funnel. Keep the removal AFTER the wiring loop; test/web/landingQuizFallback
reproves moving it up. */
.quiz-fallback { display: none; }
#quiz.quiz-unwired .quiz-fallback {
display: block; margin: 0 0 18px; padding: 13px 15px;
border: 1px solid var(--panelBorder); border-left: 3px solid var(--accent);
border-radius: 4px; font-size: 13.5px; line-height: 1.55;
}
#quiz.quiz-unwired .quiz-fallback .qf-exit { display: block; margin-top: 8px; color: var(--accent); }
/* while unwired the options only LOOK tappable — stop pretending */
#quiz.quiz-unwired .quiz-opt { opacity: .45; cursor: default; }
#quiz.quiz-unwired .quiz-progress { opacity: .45; }
.quiz-item::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent); transition: background-color .3s ease; }
.quiz-q-label {
display: inline-flex; margin: 0 0 18px; padding: 5px 11px; border-radius: 999px;
background: transparent; border: 1px solid var(--accentBorder);
color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.quiz-scenario {
margin: 0 0 18px; padding: 12px 16px; border-left: 2px solid var(--accent);
border-radius: 0; background: transparent; color: var(--sub);
font-family: var(--mono); font-size: 12.5px; font-style: normal; line-height: 1.65;
}
.quiz-stem {
margin: 0 0 22px; color: var(--fg); font-family: var(--mono);
font-size: clamp(.95rem, .8vw + .8rem, 1.1rem); font-weight: 600; line-height: 1.45; letter-spacing: 0;
}
.quiz-options { display: grid; gap: 10px; }
.quiz-opt {
display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: start; width: 100%;
padding: 12px 14px; border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--sub);
text-align: left; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; cursor: pointer;
transition: transform .14s ease, border-color .14s ease, background-color .14s ease, color .14s ease, opacity .14s ease;
}
.quiz-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--panelBorder); color: var(--fg); }
.quiz-opt:focus-visible, .quiz-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.quiz-result .btn:focus-visible, .quiz-email input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.quiz-opt:disabled { cursor: default; }
.quiz-opt .opt-key {
display: grid; place-items: center; width: 30px; height: 30px; border-radius: 0;
border: 1px solid var(--border); background: transparent; color: var(--fg);
font-size: 11px; font-weight: 700;
}
.quiz-opt.is-right { border-color: var(--accent); background: var(--panel); color: var(--fg); box-shadow: 0 0 0 1px var(--accent); }
.quiz-opt.is-right .opt-key { background: var(--accent); border-color: var(--accent); color: var(--ctaText); }
.quiz-opt.is-wrong-pick { border-color: var(--wrong); background: transparent; box-shadow: 0 0 0 1px var(--wrong); }
.quiz-opt.is-wrong-pick .opt-key { background: var(--wrong); border-color: var(--wrong); color: #fff; }
.quiz-opt.is-dim { opacity: .45; }
.quiz-feedback {
display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center;
margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border);
animation: quiz-pop .28s cubic-bezier(.2,.9,.3,1.15) both;
}
.quiz-feedback[hidden] { display: none; }
.quiz-feedback-mark {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0;
color: var(--ctaText); background: var(--accent); font-size: 20px; font-weight: 700;
}
.quiz-item.was-right .quiz-feedback-mark { color: var(--ctaText); background: var(--accent); }
.quiz-item.was-wrong .quiz-feedback-mark { background: var(--wrong); color: #fff; }
.quiz-feedback p { margin: 0; line-height: 1.4; }
.quiz-feedback-title { display: block; color: var(--fg); font-size: 13.5px; font-weight: 700; }
.quiz-feedback-copy { display: block; margin-top: 2px; color: var(--sub); font-size: 12px; }
.quiz-next {
grid-column: 1 / -1; justify-self: stretch; padding: 13px 18px;
border: 1px solid var(--accent); border-radius: 0;
background: var(--accent); color: var(--ctaText);
font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; cursor: pointer;
transition: transform .14s ease, filter .14s ease;
}
.quiz-next::after { content: " →"; }
.quiz-next:hover { transform: translateY(-2px); filter: brightness(1.1); }
.quiz-result { display: none; animation: quiz-enter .4s cubic-bezier(.2,.85,.25,1) both; }
.quiz-result.is-visible { display: block; }
.quiz-result-main {
position: relative; overflow: hidden; padding: clamp(24px, 5vw, 54px);
border: 1px solid var(--accent); border-radius: 14px;
background: var(--panel);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
color: var(--fg);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.quiz-result-main::after {
content: "✦"; position: absolute; right: clamp(16px, 5vw, 54px); top: 18px;
color: var(--accentStroke); font-size: clamp(3rem, 8vw, 6rem); line-height: 1; transform: rotate(12deg); opacity: .85;
}
.quiz-result-kicker { margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.quiz-score {
display: flex; align-items: baseline; gap: 7px; margin: 0 0 12px; color: var(--fg);
font-family: var(--display); font-weight: 400; line-height: .9; letter-spacing: -0.01em;
}
.quiz-score strong { font-size: clamp(4.4rem, 15vw, 7.5rem); font-weight: 400; }
.quiz-score span { font-size: clamp(1.6rem, 4.4vw, 2.6rem); letter-spacing: -0.01em; color: var(--sub); }
.quiz-verdict {
max-width: 620px; margin: 0 0 26px; color: var(--sub);
font-family: var(--mono); font-size: 13px; line-height: 1.7;
}
.quiz-result .cta-row { margin-top: 0; }
.quiz-result .btn { border-radius: 12px; white-space: normal; text-align: center; justify-content: center; }
.quiz-result #quiz-cta {
border-color: var(--accent); background: var(--accent); color: var(--ctaText); box-shadow: none;
}
.quiz-result #quiz-cta:hover { transform: translateY(-2px); filter: brightness(1.1); color: var(--ctaText); }
.quiz-email { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.quiz-email-lead { margin: 0; color: var(--fg); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.quiz-email-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.quiz-email input[type="email"] {
min-width: 0; flex: 1 1 220px; padding: 12px 14px;
border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--fg);
font: 13px var(--mono);
}
.quiz-email input[type="email"]:focus { border-color: var(--accentBorder); outline: none; }
.quiz-email .btn { flex: 1 1 auto; border-color: var(--accentBorder); background: transparent; color: var(--accent); border-radius: 0; }
.quiz-email .btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.quiz-email-note { margin: 8px 0 0; color: var(--sub); font-family: var(--mono); font-size: 10.5px; }
/* --wrong is tuned for the DARK page (6.04:1) and lands at 2.87:1 on the light one —
below even the 3:1 non-text floor of SC 1.4.11, on the one message this fix exists to
make readable. Reuse the light theme's already-derived red rather than a new hex: it is
the same hue, re-derived IN THIS FILE against THIS surface (4.95:1 on --bg, 4.60:1 on
the card). Scoped to this rule on purpose — redefining --wrong globally would also
repaint the quiz's wrong-answer border and its filled key/mark, which are a different
role (fill, not ink) and are not in scope here. */
.quiz-email-error { color: var(--wrong); }
html[data-theme="light"] .quiz-email-error { color: #d20014; }
.quiz-hp { position: absolute; left: -9999px; top: -9999px; width: 0; height: 0; overflow: hidden; }
.quiz-teaser { margin-top: 34px; }
.quiz-teaser-head {
display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--fg);
font-family: var(--sans); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 700;
}
.quiz-teaser-head span {
display: grid; place-items: center; width: 36px; height: 36px; border-radius: 0;
border: 1px solid var(--accentBorder); background: transparent; font-size: 16px;
}
.quiz-locked-grid { display: grid; gap: 14px; }
.quiz-locked {
min-height: 100%; padding: 22px; border: 1px dashed var(--panelBorder); border-radius: 0;
background: transparent; color: var(--sub); box-shadow: none; animation: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.quiz-locked::before { display: none; }
.quiz-locked .quiz-q-label { margin-bottom: 14px; border-color: var(--border); color: var(--sub); }
.quiz-locked .quiz-scenario { border-color: var(--border); background: transparent; color: var(--sub); font-size: 12px; }
.quiz-locked .quiz-stem { margin-bottom: 14px; color: var(--fg); font-size: .9rem; }
.quiz-lock-note {
margin: 12px 0 0; color: var(--accent); font-family: var(--mono);
font-size: 10.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase;
}
@media (min-width: 700px) {
.quiz-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-feedback { grid-template-columns: auto 1fr auto; }
.quiz-next { grid-column: auto; justify-self: end; min-width: 170px; }
.quiz-locked-grid { grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); }
}
@media (max-width: 540px) {
#quiz .wrap { padding-inline: 16px; }
.quiz-chrome { align-items: flex-end; }
.quiz-kicker { max-width: 140px; }
.quiz-progress { gap: 9px; }
.quiz-item { border-radius: 14px; }
.quiz-opt { grid-template-columns: 28px 1fr; padding: 12px; font-size: 12px; }
.quiz-opt .opt-key { width: 27px; height: 27px; }
.quiz-result-main { border-radius: 14px; }
.quiz-result-main::after { right: 14px; top: 14px; }
.quiz-result .cta-row, .quiz-result #quiz-cta, .quiz-email .btn { width: 100%; }
}
@keyframes quiz-enter { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes quiz-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.quiz-item, .quiz-feedback, .quiz-result { animation: none !important; }
.quiz-dot, .quiz-opt, .quiz-next { transition: none !important; }
}
/* Mobile: keep everything within the viewport — stack the brand so the buy button
fits, let the install command wrap, and let the instrument grid shrink (no blowout).
Placed last so these overrides win over the base rules by source order. */
@media (max-width: 600px) {
.wordmark { font-size: 16px; }
.masthead-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
.mode-controls { display: none; }
/* V83: below 600px the brand + hamburger + "Sign in" + the primary CTA cannot
share one line in any of the three languages. Both masthead buttons get the
SAME half-line basis so they wrap together onto a line of their own and split
it evenly.
Giving only the primary CTA a full line (the first attempt) was measured worse:
"Iniciar sesion" is 129px and does not fit beside the brand the way "Sign in"
(79px) and "Entrar" (72px) do, so es alone fell to THREE lines and a 288px
sticky header — 34-43% of a phone viewport, permanently, on the one language
that overflowed most. Treating the two buttons identically makes the layout
deterministic across languages: 209-243px in all three, and the two 44px hit
areas (item V15) stop coming within 1.6px of each other.
`margin-right: 0 !important` overrides the inline style="margin-right:10px"
the server puts on the injected "Sign in" link — an inline declaration, so a
class rule cannot win without it. It was spacing that link from a CTA that is
no longer its neighbour. */
.masthead-row { column-gap: 12px; row-gap: 10px; }
.masthead-row .btn-small {
flex: 1 1 calc(50% - 6px); justify-content: center; min-width: 0;
margin-right: 0 !important;
}
.instrument-col { min-width: 0; }
.display { font-size: clamp(38px, 11vw, 44px); }
}