/* Mergify Design Standard v1 — tokens.css
   Single source of design tokens for HTML/WebView apps and web artifacts.
   Dark-first: dark palette is the default; light is an explicit opt-in via
   [data-theme="light"] on <html>. Never hard-code colors/spacing in app CSS —
   reference these variables. Values follow Material 3 roles + M3 Expressive
   shape/type direction, hand-tuned for Jim's dark premium apps (PepVault pilot).
   Source basis: https://m3.material.io (color roles, type scale, shape scale,
   motion tokens) — see ../../RESEARCH.md. */

:root {
  /* ---- Color (dark-first, M3 roles) ---- */
  --bg:            #0b1017;  /* background */
  --surface:       #111927;  /* surface */
  --surface-1:     #16202f;  /* surface-container-low */
  --surface-2:     #1b2839;  /* surface-container */
  --surface-3:     #22334a;  /* surface-container-high */
  --on-surface:    #e6eef7;  /* on-surface */
  --on-variant:    #9db0c5;  /* on-surface-variant */
  --outline:       #2c3e55;  /* outline-variant */
  --primary:       #2dd4bf;  /* teal accent (fleet accent) */
  --primary-ink:   #062a26;  /* text on primary */
  --primary-dim:   rgba(45, 212, 191, .14);
  --accent-grad:   linear-gradient(135deg, #14b8a6, #2dd4bf 55%, #67e8f9);
  --success:       #34d399;
  --warning:       #fbbf24;
  --danger:        #f87171;
  --danger-dim:    rgba(248, 113, 113, .13);
  --scrim:         rgba(3, 7, 12, .62);

  /* ---- Spacing (4pt scale) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --page-pad: var(--sp-4);
  --tap-min: 44px; /* minimum touch target */

  /* ---- Radius (M3 shape scale, Expressive leans larger) ---- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* ---- Elevation (shadow levels 1–3, dark-tuned) ---- */
  --el-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 6px rgba(0,0,0,.22);
  --el-2: 0 4px 10px rgba(0,0,0,.38), 0 2px 4px rgba(0,0,0,.25);
  --el-3: 0 10px 28px rgba(0,0,0,.5),  0 4px 8px rgba(0,0,0,.3);

  /* ---- Type scale (M3 roles, system font stack — offline safe) ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --fs-display: 28px; --lh-display: 34px;
  --fs-title:   20px; --lh-title:   26px;
  --fs-heading: 16px; --lh-heading: 22px;
  --fs-body:    15px; --lh-body:    21px;
  --fs-label:   13px; --lh-label:   18px;
  --fs-caption: 12px; --lh-caption: 16px;

  /* ---- Motion ----
     Durations follow M3: short 50–200ms (micro), medium 250–400ms (screens),
     long 450–600ms (large surfaces). Product UI in this fleet: stay ≤300ms
     except sheets/hero moments. Animate transform + opacity ONLY. */
  --dur-1: 90ms;   /* press feedback */
  --dur-2: 160ms;  /* chips, toggles, small fades */
  --dur-3: 240ms;  /* screen transitions, list items */
  --dur-4: 320ms;  /* sheets, container transforms */
  --dur-5: 480ms;  /* hero / success moments only */
  /* M3 easings (official web conversions, m3.material.io/styles/motion) */
  --ease-standard:        cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:      cubic-bezier(0.2, 0, 0, 1);
  --ease-emph-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-emph-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  /* Spring approximations. True M3 Expressive springs are physics
     (spatial default: dampingRatio 0.8 / stiffness 380; fast: 0.6 / 800) —
     CSS cannot run them, so these cubic-beziers approximate the feel:
     a slight overshoot for spatial moves, none for fades/color. */
  --ease-spring:        cubic-bezier(0.34, 1.35, 0.44, 1);  /* spatial, gentle overshoot */
  --ease-spring-snappy: cubic-bezier(0.3, 1.6, 0.5, 1);     /* fast spatial */
  --ease-out:           cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h: 64px; /* fixed bottom navigation height */
}

[data-theme="light"] {
  --bg: #f4f7fa; --surface: #ffffff; --surface-1: #eef3f8;
  --surface-2: #e5edf4; --surface-3: #d9e4ef;
  --on-surface: #12202f; --on-variant: #4d627a; --outline: #c3d2e0;
  --primary: #0d9488; --primary-ink: #ffffff;
  --primary-dim: rgba(13, 148, 136, .12);
  --scrim: rgba(18, 32, 47, .45);
  --el-1: 0 1px 2px rgba(18,32,47,.08), 0 1px 6px rgba(18,32,47,.06);
  --el-2: 0 4px 10px rgba(18,32,47,.1), 0 2px 4px rgba(18,32,47,.07);
  --el-3: 0 10px 28px rgba(18,32,47,.16), 0 4px 8px rgba(18,32,47,.09);
}

/* Mergify Design Standard v1 — motion.css
   Rules (non-negotiable):
   1. Animate transform + opacity ONLY (compositor-friendly, 60fps).
      Never animate width/height/top/left/margin in product UI.
   2. Every animation below is disabled by the prefers-reduced-motion block
      at the bottom. That block is part of the standard — never ship
      motion.css without it.
   3. Durations/easings come from tokens.css. No ad-hoc timings. */

.screen { animation: screen-in var(--dur-3) var(--ease-emph-decelerate) both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen-exit { animation: screen-out var(--dur-2) var(--ease-emph-accelerate) both; }
@keyframes screen-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* Card / list item entrance (stagger by setting --i per item in JS/HTML) */
.rise { animation: rise var(--dur-3) var(--ease-emph-decelerate) both;
        animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* List item states used by the FLIP animator (transitions.js) */
.flip-item { transition: transform var(--dur-3) var(--ease-spring),
                        opacity  var(--dur-2) var(--ease-standard); }
.flip-enter { opacity: 0; transform: translateY(10px) scale(.98); }
.flip-leave { opacity: 0; transform: scale(.96); position: absolute; }

/* Press feedback: every tappable gets this class or is a .btn/.chip */
.pressable { transition: transform var(--dur-1) var(--ease-out),
                         opacity var(--dur-1) var(--ease-out); }
.pressable:active { transform: scale(.97); opacity: .88; }

/* Chip / toggle selection */
.chip { transition: background-color var(--dur-2) var(--ease-standard),
                    color var(--dur-2) var(--ease-standard),
                    transform var(--dur-1) var(--ease-out); }
.chip:active { transform: scale(.95); }

/* Progress / depletion bar: JS sets --val (0–100); width is set via
   transform scaleX so we never animate width. Bar element is full-width,
   transform-origin left. */
.bar-fill { transform-origin: left center;
            transition: transform var(--dur-4) var(--ease-spring),
                        background-color var(--dur-3) var(--ease-standard); }

/* Count-up numbers get a subtle pop when the value changes */
.pop { animation: pop var(--dur-3) var(--ease-spring) both; }
@keyframes pop {
  0% { transform: scale(1); } 40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Skeleton shimmer (loading placeholders). Transform-only shimmer:
   a highlight band translating across a muted block. */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2);
            border-radius: var(--r-md); min-height: 18px; }
.skeleton::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%,
    rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-100%); animation: shimmer 1.3s var(--ease-in-out) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Success check: draw-in circle + tick (SVG stroke-dashoffset is a paint
   property, used ONLY for this one signature mark — keep it small). */
.success-check { width: 56px; height: 56px; }
.success-check circle, .success-check path {
  fill: none; stroke: var(--success); stroke-width: 3; stroke-linecap: round;
  stroke-linejoin: round; }
.success-check circle { stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: draw var(--dur-4) var(--ease-out) forwards; }
.success-check path { stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: draw var(--dur-3) var(--dur-2) var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* View Transitions API (transitions.js uses document.startViewTransition).
   Same-document transitions are Baseline 2025 (Chrome 111+, Safari 18+,
   Firefox 144+). Fallback without the API = instant swap, still correct. */
::view-transition-old(root) { animation: vt-out var(--dur-2) var(--ease-emph-accelerate) both; }
::view-transition-new(root) { animation: vt-in var(--dur-3) var(--ease-emph-decelerate) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(10px); } }

/* Sheet entrance */
.sheet { animation: sheet-in var(--dur-4) var(--ease-spring) both; }
@keyframes sheet-in {
  from { opacity: .6; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast { animation: toast-in var(--dur-3) var(--ease-spring) both; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- MANDATORY reduced-motion gate — do not remove ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Mergify Design Standard v1 — components.css
   Buttons, cards, inputs, chips, FIXED bottom navigation, bottom sheet,
   empty state, toast. All values from tokens.css. Icons: inline Lucide SVG
   (ISC license, https://lucide.dev) at 24px viewBox, stroke currentColor —
   paste the path data inline; never hotlink icon fonts/CDNs (offline rule). */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--on-surface); font-family: var(--font);
       font-size: var(--fs-body); line-height: var(--lh-body);
       padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.02em; }
h2 { font-size: var(--fs-title);   line-height: var(--lh-title);   letter-spacing: -.01em; }
h3 { font-size: var(--fs-heading); line-height: var(--lh-heading); }
.mut { color: var(--on-variant); font-size: var(--fs-label); line-height: var(--lh-label); }
.caption { color: var(--on-variant); font-size: var(--fs-caption); line-height: var(--lh-caption); }
main { padding: var(--page-pad); display: flex; flex-direction: column; gap: var(--sp-4);
       max-width: 640px; margin: 0 auto; }

/* App header */
.app-header { position: sticky; top: 0; z-index: 20; padding: var(--sp-4) var(--page-pad) var(--sp-3);
  background: linear-gradient(160deg, #0f766e, #115e59 60%, #134e4a); color: #ecfdf5; box-shadow: var(--el-1); }
.app-header .brand { display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; }
.app-header .tag { opacity: .85; font-size: var(--fs-label); }

/* Card */
.card { background: var(--surface-1); border: 1px solid var(--outline);
        border-radius: var(--r-xl); padding: var(--sp-4); box-shadow: var(--el-1);
        display: flex; flex-direction: column; gap: var(--sp-3); }

/* Buttons */
.btn { appearance: none; border: 1px solid var(--outline); background: var(--surface-2);
  color: var(--on-surface); font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--r-full); padding: 0 var(--sp-5); min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out),
              background-color var(--dur-2) var(--ease-standard); }
.btn:active { transform: scale(.97); opacity: .9; }
.btn.primary { background: var(--accent-grad); border-color: transparent; color: var(--primary-ink); }
.btn.danger  { background: var(--danger-dim); border-color: transparent; color: var(--danger); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* Inputs */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label { font-size: var(--fs-label); color: var(--on-variant); font-weight: 600; }
.input, select.input, textarea.input { appearance: none; width: 100%; font: inherit;
  color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--r-md); padding: var(--sp-3); min-height: var(--tap-min);
  transition: border-color var(--dur-2) var(--ease-standard); }
.input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }

/* Chips */
.chiprow { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { appearance: none; font: inherit; font-size: var(--fs-label); font-weight: 600;
  cursor: pointer; color: var(--on-variant); background: var(--surface-2);
  border: 1px solid var(--outline); border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-3); min-height: 36px; } /* from motion.css: .chip motion */
.chip[aria-pressed="true"], .chip.on { background: var(--primary-dim); color: var(--primary);
  border-color: var(--primary); }

/* List rows */
.list { display: flex; flex-direction: column; gap: var(--sp-2); position: relative; }
.row-item { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface);
  border: 1px solid var(--outline); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }
.row-item .grow { flex: 1; min-width: 0; }
.row-item .ttl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Progress / depletion bar (fill uses transform, see motion.css .bar-fill) */
.bar { height: 10px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; width: 100%; background: var(--accent-grad); border-radius: inherit; }

/* FIXED bottom navigation — the standard. Fits phone width BY DESIGN:
   max 5 destinations, flex:1 each, icon above label, no horizontal scroll,
   ever. If an app has >5 sections, the 5th slot is "More" opening a sheet. */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--outline); display: flex; }
.bottom-nav button { flex: 1 1 0; min-width: 0; appearance: none; background: none; border: 0;
  color: var(--on-variant); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-out); }
.bottom-nav button:active { transform: scale(.94); }
.bottom-nav button svg { width: 23px; height: 23px; }
.bottom-nav button.on { color: var(--primary); }
.bottom-nav button .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Bottom sheet + scrim */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--surface-1); width: 100%; max-width: 640px; max-height: 86dvh;
  overflow-y: auto; border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-4); box-shadow: var(--el-3); }
.sheet .grab { width: 40px; height: 4px; border-radius: var(--r-full);
  background: var(--outline); margin: 0 auto; }

/* Empty state */
.empty { text-align: center; padding: var(--sp-8) var(--sp-4); display: flex;
  flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--on-variant); }
.empty svg { width: 44px; height: 44px; opacity: .55; }
.empty .ttl { color: var(--on-surface); font-weight: 700; font-size: var(--fs-heading); }

/* Toast */
.toast-wrap { position: fixed; left: 0; right: 0; z-index: 50; display: flex;
  justify-content: center; pointer-events: none;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3)); }
.toast { background: var(--surface-3); color: var(--on-surface); border: 1px solid var(--outline);
  box-shadow: var(--el-2); border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-2); font-weight: 600;
  font-size: var(--fs-label); max-width: 92vw; }
.toast svg { width: 18px; height: 18px; color: var(--success); flex: none; }

/* Stat block (dashboard numbers) */
.stats { display: flex; gap: var(--sp-4); }
.stat .num { font-size: var(--fs-display); font-weight: 800; color: var(--primary);
             letter-spacing: -.02em; line-height: 1.1; }

/* 1st Responder Cards — site layer on top of the Mergify kit
   (tokens.css + motion.css + components.css are prepended by build.py).
   Every value below references kit tokens — no hard-coded colors/durations. */

body { padding-bottom: 0; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--page-pad); }
main.site { max-width: none; padding: 0; display: block; }
section.band { padding: var(--sp-10) 0; }
section.band.alt { background: var(--surface); border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline); }
.band-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.band-head p { color: var(--on-variant); max-width: 62ch; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--outline); }
.site-header .wrap { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--on-surface); text-decoration: none; margin-right: auto; }
.brand .mark { width: 40px; height: 40px; flex: none; border-radius: var(--r-md); background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center; color: var(--primary-ink); }
.brand .mark svg { width: 24px; height: 24px; }
.brand .name { font-size: var(--fs-heading); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.brand .tag { font-size: var(--fs-caption); color: var(--primary); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.site-nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.site-nav a { color: var(--on-variant); text-decoration: none; font-weight: 600; font-size: var(--fs-label);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full); min-height: 40px; display: inline-flex; align-items: center;
  transition: color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-out); }
.site-nav a:hover { color: var(--on-surface); background: var(--surface-2); }
.site-nav a:active { transform: scale(.96); }
.site-nav a[aria-current="page"] { color: var(--primary); background: var(--primary-dim); }

/* Hero */
.hero { padding: var(--sp-10) 0 var(--sp-8); }
.hero .kicker { color: var(--primary); font-weight: 700; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.hero h1 { font-size: 44px; line-height: 48px; letter-spacing: -.02em; max-width: 16ch; }
.hero h1 .grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { color: var(--on-variant); font-size: var(--fs-title); line-height: var(--lh-title); max-width: 56ch; margin-top: var(--sp-4); }
.hero .cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }
.hero .fine { margin-top: var(--sp-4); }
@media (max-width: 560px) { .hero h1 { font-size: 34px; line-height: 38px; } .hero .lede { font-size: var(--fs-heading); line-height: var(--lh-heading); } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step-num { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--primary-dim); color: var(--primary);
  font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* Product grid */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 960px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .prod-grid { grid-template-columns: 1fr; } }
.prod { background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--el-1); display: flex; flex-direction: column; }
.prod img { width: 100%; aspect-ratio: 37 / 24; object-fit: cover; display: block; background: var(--surface-2); }
.prod .body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.prod .price { font-weight: 800; color: var(--primary); }
.prod .meta { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.tagchip { font-size: var(--fs-caption); font-weight: 700; color: var(--on-variant); background: var(--surface-2);
  border: 1px solid var(--outline); border-radius: var(--r-full); padding: 2px var(--sp-2); }
.tagchip.hot { color: var(--primary); border-color: var(--primary); background: var(--primary-dim); }
.prod .blurb { color: var(--on-variant); font-size: var(--fs-label); line-height: var(--lh-label); flex: 1; }

/* Deck feature */
.deck-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
@media (max-width: 760px) { .deck-feature { grid-template-columns: 1fr; } }
.deck-art { border-radius: var(--r-2xl); border: 1px solid var(--outline); background: var(--surface-1); box-shadow: var(--el-2);
  padding: var(--sp-8); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; }
.deck-art svg { width: 72px; height: 72px; color: var(--primary); }

/* Forms */
.form-card { max-width: 640px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-status { min-height: var(--lh-body); font-weight: 600; }
.form-status.ok { color: var(--success); }
.form-status.err { color: var(--danger); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 760px; }
.faq-list details { background: var(--surface-1); border: 1px solid var(--outline); border-radius: var(--r-lg); padding: var(--sp-4); }
.faq-list summary { font-weight: 700; cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; }
.faq-list details p { color: var(--on-variant); margin-top: var(--sp-2); max-width: 68ch; }

/* Prose */
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: var(--sp-4); }
.prose p { color: var(--on-variant); }
.prose p strong, .prose li strong { color: var(--on-surface); }
.prose ul { padding-left: var(--sp-5); color: var(--on-variant); display: flex; flex-direction: column; gap: var(--sp-2); }

/* Footer */
.site-footer { border-top: 1px solid var(--outline); background: var(--surface); margin-top: 0; }
.site-footer .wrap { padding-top: var(--sp-8); padding-bottom: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.site-footer .cols { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.site-footer nav { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer nav a { color: var(--on-variant); text-decoration: none; font-size: var(--fs-label); }
.site-footer nav a:hover { color: var(--primary); }