/* FPA sales page — 000-tokens.css
 * The sales lane's token layer, reconciled 2026-09-01 from the CD "FPA Sales Page
 * Build" project (design/tokens/{colors,typography,spacing,effects}.css via the
 * claude-design MCP) — same convention as the app's src/app/css/000-tokens.css:
 * values are copied here ONCE as the built page's source of truth, never
 * re-derived or hand-picked in a section module. Reconcile from CD's tokens
 * here when they change; every section references these vars, never a raw hex
 * (mark geometry colors are the one named exception — spec: "verbatim from
 * mark.svg, never re-picked").
 *
 * This file also self-hosts the three faces the app already ships
 * (public/app/fonts/*.woff2) — reused verbatim, not duplicated.
 */

/* ============================================================ FONTS */
@font-face {
  font-family: 'TASA Orbiter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/app/fonts/tasa-orbiter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/app/fonts/plus-jakarta-sans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Lilex';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/app/fonts/lilex-400.woff2') format('woff2');
}

:root {
  /* ============ COLOR (hex is law) ============ */
  --fpa-ground:       #060f14;
  --fpa-ground-far:   #2a2f3d;
  --fpa-surface:      #182a2f;
  --fpa-raised:       #1e3338;

  --fpa-thread:       #c6ad9f;
  --fpa-thread-glow:  #dcc8bc;
  --fpa-thread-wash:  #0f1a20;

  --fpa-mauve:        #845f66;
  --fpa-action:       #693540;
  --fpa-steel:        #49585b;
  --fpa-line:         #49585b;
  --fpa-ease:         #8ea6ab;
  --fpa-ease-bright:  #adc2c6;

  --fpa-ink:          #F2E9DF;
  --fpa-ink-muted:    #8E99A0;

  --fpa-joy:          #c6ad9f;
  --fpa-joy-wash:     #1a2428;
  --fpa-bar:          #693540;
  --fpa-ease-bar:     #8ea6ab;
  --fpa-alarm:        #c97b6b;

  --fpa-ground-gradient: linear-gradient(to bottom right, var(--fpa-ground) 0%, var(--fpa-ground-far) 100%);

  /* ============ TYPOGRAPHY ============ */
  --font-display: 'TASA Orbiter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'Lilex', ui-monospace, 'SF Mono', Menlo, monospace;

  --weight-display: 700;
  --weight-body:    300;
  --weight-mono:    400;

  --text-display-lg: 2.4rem;
  --text-display:    1.7rem;
  --text-display-sm: 1.4rem;
  --tracking-display: 0.04em;

  --text-lede:  1.35rem;
  --text-base:  1.0625rem;
  --text-sm:    0.95rem;
  --text-xs:    0.85rem;
  --leading-body: 1.5;

  --text-label: 1rem;
  --tracking-label: 0.02em;

  /* ============ SPACING & RADII ============ */
  --space-1: 0.35rem;
  --space-2: 0.6rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --stage-max: 34rem;
  --stage-pad: 1.5rem;

  --hit-min: 3rem;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-pill: 999px;

  /* ============ EFFECTS ============ */
  --glow-thread: 0 0 12px rgba(198, 173, 159, 0.45);
  --glow-thread-soft: 0 0 24px rgba(198, 173, 159, 0.25);

  --ease-flow: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quiet: 0.4s;
  --dur-ceremony: 1s;

  --press-opacity: 0.85;
}
/* FPA sales page — 005-join.css
 * 5.0 THE JOIN FRAME, phone width only (The Join Page spec, Sep 19, 2026). The frame's own values stay
 * inline in 005-join.php, matching CD's rendered file; this module exists for the one media rule, which
 * inline styles cannot carry (the same reason 030-mirror.css exists). Compact on purpose: the cinema
 * intro's first beat (the intact mark) must still land on the first screen beneath the frame. The
 * !important beats the inline values, exactly as the locked assembly's own rule does. */
@media (max-width: 480px) {
  [data-el="joinFrame"] { padding: calc(env(safe-area-inset-top, 0px) + 9vh) 1.25rem 2.4vh !important; }
  [data-el="joinLine"] { font-size: clamp(1.02rem, 4.3vw, 1.25rem) !important; }
}
/* FPA sales page — 010-cinema-intro.css
 * Sections 5.1 (the cinema intro) + 5.2 (T hero truth -> the turn -> the grid).
 * Ported verbatim from CD's "The Cinema Intro - v4 approved.dc.html" (etag
 * 1788221077672918, read via the claude-design MCP 2026-09-01) — the rendered
 * file's own <style> block, plus the page-level reset it assumes. Per-element
 * placement/animation values live as inline styles on the markup in
 * src/sales/php/010-cinema-intro.php, matching the rendered file exactly;
 * only the truly global rules (reset, keyframes, mobile overrides) live here.
 */

html, body { margin: 0; background: var(--fpa-ground); }
#fpa-sales-root, #fpa-sales-root * { box-sizing: border-box; }
#fpa-sales-root a { color: var(--fpa-thread); text-decoration: none; }
#fpa-sales-root a:hover { color: var(--fpa-thread-glow); }

@keyframes fpaBreathe  { 0%,100% { opacity: .28; transform: scale(1);    } 50% { opacity: .48; transform: scale(1.06); } }
@keyframes fpaBreatheB { 0%,100% { opacity: .2;  transform: scale(1.05); } 50% { opacity: .36; transform: scale(1);    } }

/* THE HERO SENTENCE RIGHT-ALIGNS, AT EVERY WIDTH (Linda's live word, 2026-09-01).
 * The dc.html only gated this to <=480px, on the assumption that only a phone
 * wraps the sentence enough for STRESS to land at the far edge of the column.
 * It wraps at wider widths too, and left-aligned it strands STRESS at the LEFT
 * of the column — the bridge's JS positioning (010-cinema-intro.js
 * positionBridge()) reads that as "end far to the right of STRESS" and shoves
 * the whole "HOW THEY / TELL YOU / TO DE-" block into negative x, off-screen.
 * Right-aligned, STRESS sits at the column's right edge and the bridge lands
 * on-screen to its left, same mechanic the mobile pass already proved. A line
 * that fills the full column width renders identically either way, so this is
 * a no-op wherever the sentence isn't wrapping. */
[data-el="tHead"] { text-align: right; }
[data-el="mstop"] { display: none; }
[data-el="mstart"] { display: none; }

/* MOBILE (390px gate, covers the 393px iPhone 15 Pro) — verbatim from the locked
 * mobile pass (PICKUP.md, 2026-08-31): the DE-STRESS grid wraps inside its cell,
 * the scroll cue clears the phone's browser chrome. */
@media (max-width: 480px) {
  [data-el="scramble"] { white-space: normal !important; }
  [data-el="cue"]      { bottom: 12vh !important; }
  [data-el="stage"]    { height: 100dvh !important; }
  [data-el="mstop"]    { display: inline !important; }
  [data-el="mstart"]   { display: inline !important; }
  [data-el="tHead"], [data-el="bridgeLine"] { font-size: clamp(2.1rem, 9vw, 3.4rem) !important; }
}
/* FPA sales page — 020-turn.css
 * "The Turn" bridge beat. Ported verbatim from CD's assembly
 * "FPA Sales Page.dc.html" (etag 1788224448565208, read via the
 * claude-design MCP 2026-09-01) — its own <style> block. Per-element
 * placement/animation values live as inline styles on the markup in
 * src/sales/php/020-turn.php, matching the rendered file exactly.
 */

/* MOBILE (390px gate, covers the 393px iPhone 15 Pro): the turn lines carry
 * more weight at phone scale (roughly double); they pan full-bleed so the
 * extra width is by design. Per spec, line2 keeps its prior mobile size and
 * is allowed to overflow intentionally — no rule needed for it. */
@media (max-width: 480px) {
  [data-el="line1"] { font-size: min(26vw, 7rem) !important; }
}
/* FPA sales page — 030-mirror.css
 * The Mirror (5.3/5.4). Mobile readability only — the section's placement/
 * animation values stay inline in 030-mirror.php, matching CD's rendered
 * file. This module exists solely because data-el="line" is reused by
 * other sections (the reused-name law), so the size bump is scoped to the
 * Mirror's own [data-el="mirror"] container, never a bare [data-el="line"].
 */

/* Reuses the app's already-self-hosted Plus Jakarta Sans 600 face (Linda,
 * 2026-09-12, src/app/css/010-fonts.css) — same physical file, same URL
 * (/app/fonts/plus-jakarta-sans-600.woff2), already live on the server.
 * Redeclaring the same family/weight/src here is harmless (browsers just
 * reuse the loaded face); no design-system or CD change needed. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/app/fonts/plus-jakarta-sans-600.woff2') format('woff2');
}

@media (max-width: 480px) {
  [data-el="mirror"] [data-el="line"] {
    font-size: clamp(1.15rem, 4.7vw, 1.5rem) !important;
    line-height: 1.2 !important;
    max-width: 94% !important;
    letter-spacing: 0.01em !important;
    font-weight: 600 !important;
  }
}
/* FPA sales page — 040-chip.css
 * R — The Live Chip (5.5). Ported verbatim from CD's
 * "R - The Live Chip - v1 approved.dc.html" (etag 1788224449995596, read via
 * the claude-design MCP 2026-09-01) — the rendered file's own <style> block.
 */

.chip-word { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; color: var(--fpa-ink); cursor: pointer; position: relative; line-height: 0.95; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.chip-word .ul { display: inline-block; position: relative; }
.chip-word .ul { transform-origin: center; }
.chip-word .ul { transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), color 0.28s ease; }
.pmp { display: inline-block; transform-origin: center; animation: fpaGlow var(--gdur, 7s) ease-in-out var(--gdel, 0s) infinite; }
/* the live field: a word WAKES — lifts to thread and its underline draws in (the page's sanctioned line gesture). Hover/focus wake reliably; JS wakes the nearest word so the type tracks the pointer before you're over it. */
.chip-word .ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.18em; height: 2px; background: var(--fpa-thread); transform: scaleX(0); transform-origin: left center; transition: transform 0.34s cubic-bezier(0.4,0,0.2,1); pointer-events: none; }
.chip-word:hover .ul, .chip-word:focus-visible .ul, .chip-word.awake .ul { color: var(--fpa-thread); transform: scale(1.12); }
.chip-word:hover .ul::after, .chip-word:focus-visible .ul::after, .chip-word.awake .ul::after { transform: scaleX(1); }
.cue { position: absolute; left: 50%; top: 26.5vh; transform: translateX(-50%); z-index: 21; font-family: var(--font-mono); font-weight: 400; text-transform: lowercase; letter-spacing: var(--tracking-label); font-size: clamp(1rem, 1.4vw, 1.35rem); color: var(--fpa-ink-muted); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; white-space: nowrap; }
.cue .k { color: var(--fpa-thread); }
[data-el="q"] .q2 { display: none; }
[data-el="q"].oneline .q3 { display: none; }
[data-el="q"].oneline .q2 { display: inline; }
[data-el="q"].oneline { width: max-content !important; max-width: none !important; }
.drift { display: inline-block; animation: fpaDrift var(--dur, 11s) ease-in-out var(--del, 0s) infinite; }
@keyframes fpaDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(0.5vw, -0.7vh); }
  50%  { transform: translate(-0.4vw, 0.4vh); }
  75%  { transform: translate(0.3vw, 0.6vh); }
  100% { transform: translate(0, 0); }
}
.nodrift .drift, .nodrift .pmp { animation: none !important; }
@keyframes fpaGlow { 0%, 100% { transform: scale(1); opacity: 0.82; } 50% { transform: scale(1.13); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .drift { animation: none !important; } }
.hero { position: fixed; left: 0; top: 0; z-index: 40; color: var(--fpa-ink); line-height: 0.95; white-space: nowrap; transform-origin: top left; pointer-events: none; opacity: 0; transition: transform 0.78s cubic-bezier(0.4,0,0.2,1), opacity 0.5s ease, color 0.6s ease; }
.hero.on { opacity: 1; }
.panel { position: absolute; left: 0; top: 0; bottom: 0; width: 36vw; z-index: 30; background: var(--fpa-thread); border-right: 2px solid var(--fpa-steel); transform: translateX(-102%); transition: transform 0.78s cubic-bezier(0.4,0,0.2,1); will-change: transform; }
.panel.open { transform: translateX(0); }
.reflect { position: absolute; left: 0; right: 0; top: 55vh; padding: 0 3vw 0 5vw; text-align: left; z-index: 2; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease 0.28s, transform 0.6s cubic-bezier(0.4,0,0.2,1) 0.28s; }
.panel.open .reflect { opacity: 1; transform: translateY(0); }
.rline { margin: 0; font-family: var(--font-body); font-weight: 300; color: var(--fpa-action); font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.4; text-wrap: pretty; max-width: 26vw; }
.cline { margin: 1.4em 0 0; max-width: 26vw; font-family: var(--font-mono); font-weight: 400; color: var(--fpa-raised); font-size: clamp(0.85rem, 1.05vw, 1rem); letter-spacing: var(--tracking-label); opacity: 0; transition: opacity 0.5s ease; }
.cline.on { opacity: 1; }
.parrow { position: absolute; left: 5vw; right: auto; top: 24vh; bottom: 45vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2.2vh; color: var(--fpa-steel); opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.34s, transform 0.6s cubic-bezier(0.4,0,0.2,1) 0.34s; pointer-events: none; z-index: 2; }
.parrow .tri { width: 1.7vw; height: 1.4vw; }
.parrow .tri svg { width: 100%; height: 100%; display: block; overflow: visible; }
.panel.open .parrow { opacity: 1; transform: translateY(0); }
.panel.open .parrow .tri { animation: fpaCascade 1.9s ease-in-out infinite; }
.panel.open .parrow .tri:nth-child(1) { animation-delay: 0s; }
.panel.open .parrow .tri:nth-child(2) { animation-delay: 0.13s; }
.panel.open .parrow .tri:nth-child(3) { animation-delay: 0.26s; }
.panel.open .parrow .tri:nth-child(4) { animation-delay: 0.39s; }
.panel.open .parrow .tri:nth-child(5) { animation-delay: 0.52s; }
.panel.open .parrow .tri:nth-child(6) { animation-delay: 0.65s; }
.panel.open .parrow .tri:nth-child(7) { animation-delay: 0.78s; }
.pgrid { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pgrid > div { position: absolute; background: var(--fpa-thread-glow); opacity: 0.4; }
@keyframes fpaCascade { 0% { opacity: 0; transform: translateY(-5px); } 22% { opacity: 1; transform: translateY(0); } 78% { opacity: 0.18; transform: translateY(5px); } 100% { opacity: 0; transform: translateY(8px); } }
/* MOBILE: every word clears the 44px thumb floor, and the reflection panel becomes a near-full-width sheet (36vw is far too narrow on a phone) with comfortable text. Same glide-left + slide-in mechanic. */
@media (max-width: 480px) {
  .chip-word { min-width: 44px; min-height: 44px; }
  .panel { width: min(88vw, 30rem); }
  .reflect { top: 50vh; padding: 0 6vw 0 7vw; }
  .rline { max-width: 74vw; font-size: clamp(1.15rem, 4.6vw, 1.6rem); }
  .cline { max-width: 74vw; font-size: clamp(0.9rem, 3.4vw, 1.05rem); }
  .parrow { left: 7vw; top: 28vh; bottom: 52vh; gap: 1.4vh; }
  .parrow .tri { width: 3.6vw; height: 3vw; }
}
/* FPA sales page — 050-body.css
 * U — The Body + The Question (5.6/5.7). Ported verbatim from CD's
 * "U - The Body - v3 approved.dc.html" (etag 1788230793213516, read via the
 * claude-design MCP 2026-09-01) — the rendered file's own <style> block.
 */

@keyframes fpaQEdge { 0%,100% { opacity: 0.35; transform: scaleX(0.82); } 50% { opacity: 0.9; transform: scaleX(1); } }
@keyframes fpaPulse { 0% { transform: scale(0.06); opacity: 0; } 10% { opacity: 0.22; } 80% { opacity: 0.16; } 96% { opacity: 0.04; } 100% { transform: scale(12); opacity: 0; } }

/* yes/no hover: CD's file expresses this via a DC-only style-hover attribute with no
   plain-HTML equivalent, so the port shipped silent. Inline color wins over a bare
   :hover, hence !important. Two different colors, per the separation law. */
[data-el="yes"]:hover, [data-el="yes"]:active { color: var(--fpa-thread) !important; }
[data-el="no"]:hover,  [data-el="no"]:active  { color: var(--fpa-mauve) !important; }

/* keyboard focus ring — visible for Tab users only, invisible on a mouse click (Soren accessibility brief, 2026-09-18) */
[data-el="yes"]:focus-visible, [data-el="no"]:focus-visible { outline: 2px solid var(--fpa-thread); outline-offset: 4px; }

/* MOBILE: the TENSION statement sits closer under TENSION and reads larger */
@media (max-width: 480px) {
  [data-el="rest"] { top: 54% !important; width: min(92vw, 40rem) !important; font-size: clamp(1.7rem, 6.6vw, 2.6rem) !important; }
  /* the pivot matches the reflection size, centers, and breaks to two balanced lines; pvBody keeps its spaces at this scale */
  [data-el="pivot"] { font-size: clamp(1.75rem, 6.8vw, 2.7rem) !important; line-height: 1.15 !important; width: min(72vw, 24rem) !important; text-align: center !important; }
  [data-el="pvBody"] { margin: 0 0.25em !important; }
  /* the yes-branch video fills the whole screen on mobile (no body beside it), so no steel divider */
  [data-el="vwrap"] { width: 100vw !important; border-right: 0 !important; }
  /* desktop shrank the video to a small centered contained box (2026-09-03, compositing cost while
     playing under software rendering); mobile hardware-decodes fine and stays full-bleed cover */
  [data-el="vid"] { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; }
}
/* FPA sales page — 060-t2.css
 * T2 — The Proof + The App + The Threshold + The Footer (5.8/5.9/5.11).
 * Ported verbatim from CD's "T2 - The Proof - v2 approved.dc.html"
 * (etag 1788230605646175, read via the claude-design MCP 2026-09-09) —
 * the rendered file's own <style> block.
 */

/* the one button's hover/active: CD's file expresses this via DC-only style-hover/
   style-active attributes with no plain-HTML equivalent (same class as the U
   section's yes/no hover, 050-body.css) — ported as real CSS instead of shipping silent. */
[data-el="btn"]:hover { color: var(--fpa-ink) !important; background: rgba(198,173,159,0.14) !important; }
[data-el="btn"]:active { color: var(--fpa-ink) !important; background: rgba(198,173,159,0.2) !important; }

/* keyboard focus ring — visible for Tab users only, invisible on a mouse click (Soren accessibility brief, 2026-09-18) */
[data-el="btn"]:focus-visible { outline: 2px solid var(--fpa-thread); outline-offset: 4px; }

/* 5.11 footer (Linda 2026-09-18): the legal links are their own centered row 2 (`footLegal`, markup carries its grid placement),
   so the right column holds only the credit at every width. The left brand stacks to two lines below 900px, as on the phone. */
@media (min-width: 481px) and (max-width: 900px) {
  [data-el="footBrand"] { display: block; }
}

/* 5.9 the one button's neon thread bloom + the ? bounce + button pulse */
@keyframes hBtnBloom { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.hGlowBtn::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 42px -2px rgba(198,173,159,0.85), inset 0 0 22px -4px rgba(198,173,159,0.55); opacity: 0; animation: hBtnBloom 2600ms cubic-bezier(0.65,0,0.35,1) infinite; will-change: opacity; }
@media (prefers-reduced-motion: reduce) { .hGlowBtn::before { animation: none; opacity: 0.5; } }
@keyframes hQBounce { 0% { transform: translateY(0); } 32% { transform: translateY(-0.2em); } 58% { transform: translateY(0); } 74% { transform: translateY(-0.07em); } 100% { transform: translateY(0); } }
@keyframes fpaPhonePulse { 0% { transform: scale(0.06); opacity: 0; } 10% { opacity: 0.4; } 80% { opacity: 0.3; } 96% { opacity: 0.08; } 100% { transform: scale(12); opacity: 0; } }
@keyframes hBtnPulse { 0% { transform: scale(1); } 42% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* MOBILE (390px): no room to flank the phone, so features and the callback paragraphs go top + bottom, full width, centered. */
@media (max-width: 480px) {
  [data-el="screenText"] [data-el="textScroll"] { padding: 7vh 1.6vh 6vh !important; }
  [data-el="screenText"] [data-el="textScroll"] p { font-size: 2.5vh !important; line-height: 1.4 !important; }
  /* VERTICAL line beside the text: top = line on the left with a down-arrow at its foot; bottom = line on the right with an up-arrow at its head */
  [data-slot] { left: 6vw !important; right: 6vw !important; display: flex !important; align-items: stretch !important; gap: 3.5vw !important; }
  [data-slot][data-side="left"] { flex-direction: row !important; text-align: left !important; }
  [data-slot][data-side="right"] { flex-direction: row-reverse !important; text-align: right !important; }
  [data-slot] [data-featbox] { flex: 1 1 auto !important; }
  [data-slot] [data-rule] { flex: 0 0 auto !important; margin-bottom: 0 !important; }
  [data-slot][data-side="left"] [data-rule] { flex-direction: column !important; }
  [data-slot][data-side="right"] [data-rule] { flex-direction: column-reverse !important; }
  [data-slot] [data-line] { width: 2px !important; height: auto !important; flex: 1 1 auto !important; }
  [data-slot][data-side="left"] [data-line] { transform-origin: top center !important; }
  [data-slot][data-side="right"] [data-line] { transform-origin: bottom center !important; }
  [data-slot][data-side="left"] [data-feat] > p { margin-left: 0 !important; margin-right: auto !important; }
  [data-slot][data-side="right"] [data-feat] > p { margin-left: auto !important; margin-right: 0 !important; }
  [data-slot] [data-tri] { transform: rotate(90deg); }   /* down at the foot (top) / up at the head (bottom) */
  [data-slot] [data-feat] h3 { font-size: clamp(1.6rem, 6vw, 2.05rem) !important; }
  [data-slot] [data-feat] p  { font-size: clamp(1rem, 4vw, 1.2rem) !important; }
  [data-para] { left: 2vw !important; right: 2vw !important; width: auto !important; margin: 0 !important; text-align: center !important; font-size: clamp(1rem, 3.9vw, 1.18rem) !important; line-height: 1.35 !important; letter-spacing: 0.02em !important; }
  /* footer: smaller copyright + credit + legal (NOT the FPA mark). The legal links live on their own centered row (row 2); on the phone they wrap to 2-3 centered lines. */
  [data-el="footText"] { font-size: 0.58rem !important; }
  /* the legal links + email have their own full-width centered row, so they read at a legible phone size (Linda 2026-09-19); the credits above stay 0.58rem, size-capped by the centered FPA glyph beside them */
  [data-el="footLegal"] { font-size: 0.85rem !important; border-top: 1px solid var(--fpa-steel) !important; padding-top: 1.8vh !important; margin-top: 0.4vh !important; }
  [data-el="footBrand"] { display: block !important; white-space: nowrap !important; }
  [data-el="pageFooter"] > div { align-items: end !important; }
  [data-el="fMark"] { transform: translateY(0.11em) !important; }
  [data-el="footLegal"] [data-el="footdot"] { padding: 0 0.3em !important; }
  /* a taller tap target at the unchanged type size */
  [data-el="footText"] a, [data-el="footLegal"] a { padding-block: 0.25em; }

  /* proof bands (5.8): match the deployed Mirror's mobile band type — scoped
     per the reused-data-el law, "line" also belongs to the Mirror's bands. */
  [data-el="proofWrap"] [data-el="line"] {
    font-size: clamp(1.15rem, 4.7vw, 1.5rem) !important;
    line-height: 1.2 !important;
    max-width: 94% !important;
    letter-spacing: 0.01em !important;
    font-weight: 600 !important;
  }
}
/* FPA sales page — 070-menu.css
 * 5.10 THE MENU. Ported verbatim from CD's "The Menu.dc.html" (etag
 * 1788218347407056, read via the claude-design MCP 2026-09-09) — the
 * DC-only style-hover attribute (no plain-HTML equivalent) ported as
 * real CSS, same class as U's yes/no (050-body.css) and T2's button
 * (060-t2.css). :focus-visible included since these are real anchors.
 */
[data-el="bands"] > [data-el="band"]:hover, [data-el="bands"] > [data-el="band"]:focus-visible {
  background: var(--fpa-thread) !important;
  color: var(--fpa-ground) !important;
}

/* keyboard focus ring — visible for Tab users only, invisible on a mouse click (Soren accessibility brief, 2026-09-18) */
[data-el="trigger"]:focus-visible, [data-el="close"]:focus-visible { outline: 2px solid var(--fpa-thread); outline-offset: 4px; }