/* packages/tour/assets/tour.css
 *
 * Snowside Tour — complete stylesheet for BOTH displays:
 *   [data-mode="deck"]    desktop + tablet, fixed 980x552 canvas, scaled
 *   [data-mode="mobile"]  phones, reflowing, one slide per screen
 *
 * This replaces the Slidev build. The values here were lifted verbatim from
 * the built Slidev stylesheet (styles/index.css -> dist/assets/index-*.css)
 * so the deck is pixel-faithful to what shipped before. Colors and type are
 * unchanged; only the framework scaffolding (Slidev client-core classes,
 * UnoCSS utilities) has been replaced with equivalent plain CSS.
 *
 * Slidev rendered every slide onto a FIXED 980x552 canvas and scaled it with
 *   scale = Math.min(viewW / 980, viewH / 552)
 * That is reproduced exactly in the deck mode below. Phones get the reflow
 * layout instead, which is the whole reason this rebuild exists.
 */

/* ================================================================== *
 * 1. Reset + design tokens
 * ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  /* snow (brand blue) */
  --snow-50:  #f5f9ff;
  --snow-100: #e8f2ff;
  --snow-200: #cfe6ff;
  --snow-300: #9fc8ff;
  --snow-400: #5a9dff;
  --snow-500: #2f7bff;
  --snow-600: #1659d6;
  --snow-700: #1143a3;
  --snow-800: #0f3380;
  --snow-900: #0b2356;

  /* aval (risk accent) */
  --aval-400: #e84142;
  --aval-500: #d62828;
  --aval-600: #b81d1d;
  --aval-700: #9a1414;

  /* ink (surfaces) */
  --ink-700: #111c33;
  --ink-800: #0a1224;
  --ink-900: #050b16;

  /* type */
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;

  /* slide canvas (Slidev's fixed dimensions) */
  --canvas-w: 980px;
  --canvas-h: 552px;
  --scale: 1;
}

html, body {
  width: 100%;
  height: 100%;
  background: var(--ink-900);
  color: #f1f5f9;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Images never blow out a slide. */
img { max-width: 100%; height: auto; }

/* ================================================================== *
 * 2. Shared background (identical on every slide)
 * ================================================================== */
.snow-bg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #0b2356 0%, transparent 60%),
    radial-gradient(90% 70% at 85% 110%, #1143a3 0%, transparent 55%),
    linear-gradient(180deg, #050b16 0%, #0a1224 100%);
}
.snow-bg::before {
  content: "";
  position: absolute;
  inset: -20% -20% auto -20%;
  height: 70%;
  background:
    radial-gradient(40% 60% at 30% 40%, rgba(90, 157, 255, 0.22), transparent 70%),
    radial-gradient(35% 55% at 75% 30%, rgba(232, 65, 66, 0.10), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.snow-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 47% 12%, rgba(207,230,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 78% 33%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 70%, rgba(207,230,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 38% 88%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 8% 78%, rgba(255,255,255,0.5), transparent 60%);
  z-index: 0;
}

/* ================================================================== *
 * 3. Typography inside slides
 * ================================================================== */
.snow-bg h1 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
}
.snow-bg h2 {
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: -0.03em;
  color: var(--snow-200);
  margin: 0 0 2.5rem;
}
.snow-bg h3 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--snow-300);
  margin: 1.5rem 0 0.5rem;
}
.snow-bg p {
  font-size: 1rem;
  line-height: 1.625;
  color: #cbd5e1;
  margin: 0 0 1rem;
}
.snow-bg p:last-child { margin-bottom: 0; }
/* NOTE: .slide-lead is INTENTIONALLY unstyled. In the original build the
   UnoCSS `.lead` shortcut (text-lg = 1.125rem) was scoped as a bare class
   (specificity 0-1-0) and was therefore overridden by `.snow-bg p` (0-1-1),
   so these intros rendered at 1rem like any other paragraph. Adding a rule
   here would make the deck diverge from the build it replaces. */
.snow-bg strong { color: var(--snow-200); font-weight: 600; }
.snow-bg em { font-style: italic; }
.snow-bg a {
  color: var(--snow-400);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.snow-bg a:hover { color: var(--snow-300); }
.snow-bg code {
  font-family: var(--font-mono);
  color: var(--snow-300);
  background-color: rgba(255,255,255,0.05);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

/* Content region inside a default slide. */
.slide-content {
  position: relative;
  z-index: 1;
  padding: 4rem 3.5rem 2.5rem;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ================================================================== *
 * 4. Card grid + card
 * ================================================================== */
.grid { display: grid; gap: 1.5rem; }
.grid[data-cols="1"] { grid-template-columns: 1fr; }
.grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.tight { gap: 1rem; }

.snow-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(90, 157, 255, 0.18);
  border-radius: 0.75rem;
  padding: 1.25rem;
  transition: border-color 0.15s, background-color 0.15s;
}
.snow-card:hover {
  border-color: rgba(90, 157, 255, 0.40);
  background: rgba(255, 255, 255, 0.07);
}
.snow-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--snow-200);
  margin: 0.5rem 0;
}
.snow-card p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #94a3b8;
  margin: 0;
}
.snow-card-kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--snow-400);
  margin-bottom: 0.25rem;
}

/* Small screens inside the deck canvas use the same card, just denser. */
.grid.compact .snow-card { padding: 1rem; }
.grid.compact .snow-card h3 { font-size: 1rem; }
.grid.compact .snow-card p { font-size: 0.8rem; }

/* Centred note line used under card grids. */
.snow-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.875rem;
  color: #94a3b8;
}
.snow-note strong { color: var(--snow-300); }

/* ================================================================== *
 * 5. Cover slide
 * ================================================================== */
.cover-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 3.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Specificity note: these are scoped to .snow-cover-root exactly as the
   original theme was (.snow-cover-root .cover-tagline, 0-2-0). Written bare
   as `.cover-tagline` (0-1-0) they would LOSE to `.snow-bg h1` (0-1-1), so the
   cover tagline would render at 3rem and inherit the wrong margins. */
.snow-cover-root .cover-kicker {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--snow-400);
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.snow-cover-root .cover-banner {
  display: block;
  width: min(380px, 52%);
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid rgba(159, 200, 255, 0.22);
  box-shadow: 0 8px 24px -8px rgba(5, 11, 22, 0.9),
              0 0 0 1px rgba(90, 157, 255, 0.10);
  margin-top: 1.25rem;
}
.snow-cover-root .cover-tagline {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin: 1.5rem 0 0;
  letter-spacing: -0.01em;
}
/* Subtitle layout: one sentence per row. The explicit <br /> from content.mjs
   does the break; this only tightens the row spacing, since a 1.5 line-height
   on two short lines reads as a gap.
   The same break is kept on phones — the row wraps further there if it must,
   but the two statements stay on separate rows. */
.snow-cover-root .cover-subtitle {
  font-size: 1.05rem;
  line-height: 1.4;
  color: #b9c6da;
  margin: 0.75rem 0 0;
  max-width: 720px;
}

/* ================================================================== *
 * 6. Comparison table
 * ================================================================== */
.table-wrap { overflow-x: auto; margin-top: 1.5rem; }
.snow-bg table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.snow-bg th {
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  color: #94a3b8;
  font-family: var(--font-mono);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.snow-bg td {
  padding: 0.75rem 1rem 0.75rem 0;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.snow-bg tbody tr:nth-child(odd) { background: rgba(255,255,255,0.05); }
.snow-bg th.hl, .snow-bg td.hl { color: var(--snow-300); }
.snow-bg th.hl { font-weight: 600; }
.snow-bg td.hl { font-weight: 600; }

/* ================================================================== *
 * 7. Risks
 * ================================================================== */
.risk-head, .risk-body { display: flex; align-items: flex-start; gap: 0.75rem; }
.risk-head { margin-bottom: 1rem; }
.risk-name { flex: 1; font-size: 0.875rem; font-weight: 600; color: #ffffff; margin: 0; }
.risk-body p { flex: 1; margin: 0; font-size: 0.875rem; line-height: 1.6; color: #94a3b8; }
.tag {
  display: inline-block;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.125rem;
}
.tag-risk { background: rgba(214, 40, 40, 0.10); color: var(--aval-400); }
.tag-fix { background: rgba(47, 123, 255, 0.10); color: var(--snow-300); }

/* ================================================================== *
 * 8. Roadmap timeline
 * ================================================================== */
.phases { list-style: none; margin: 2rem 0 0; padding: 0; }
.phase { display: flex; gap: 1.5rem; padding-bottom: 2rem; }
.phase:last-child { padding-bottom: 0; }
.phase-rail { display: flex; flex-direction: column; align-items: center; }
.phase-num {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--aval-600);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
}
.phase-line { margin-top: 0.5rem; width: 1px; flex: 1; background: rgba(255,255,255,0.1); }
.phase-body { padding-bottom: 0.5rem; }
.phase-body h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--snow-300);
}
.phase-body p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.6; color: #94a3b8; }

/* ================================================================== *
 * 9. Revenue cards
 * ================================================================== */
.snow-revenue-apy {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--snow-300);
  margin: 0.5rem 0;
}

/* ================================================================== *
 * 10. FAQ
 * ================================================================== */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }

/* ================================================================== *
 * 11. Connect slide
 * ================================================================== */
.connect-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 3.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Scoped to .snow-connect-root for the same reason as the cover block above:
   the original rule was `.snow-connect-root .lead` (0-2-0), which outranked
   `.snow-bg p` (0-1-1). Bare `.connect-lead` (0-1-0) would lose to it and the
   lead would render at 1rem in the wrong colour. */
.snow-connect-root .connect-lead {
  font-size: 1.05rem;
  color: #cbd5e1;
  max-width: 760px;
  margin: 0 auto 1rem;
}
/* width:100% is load-bearing: the flex parent centres children to their
   content width, which would collapse the fr tracks and stack the buttons. */
.connect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 42rem;
  margin: 2.5rem auto 0;
}
.snow-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border-radius: 0.625rem;
  border: 1px solid rgba(90, 157, 255, 0.45);
  background: rgba(11, 35, 86, 0.35);
  color: var(--snow-200);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none !important;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.snow-btn:hover {
  border-color: rgba(159, 200, 255, 0.80);
  background: rgba(17, 67, 163, 0.45);
  color: #ffffff;
}
.connect-footer {
  margin: 3rem auto 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #64748b;
  max-width: 32rem;
}

/* ================================================================== *
 * 12. Deck chrome (page label, page number, progress, controls)
 * ================================================================== */
.slide-label {
  position: absolute;
  top: 1.5rem;
  left: 3.5rem;
  z-index: 3;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: #64748b;
  pointer-events: none;
}
.slide-number {
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  z-index: 3;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: #475569;
  pointer-events: none;
}

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--snow-500), var(--snow-300));
  z-index: 60;
  transition: width 0.25s ease;
}

.deck-controls button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(90, 157, 255, 0.30);
  background: rgba(11, 35, 86, 0.55);
  color: var(--snow-200);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background-color 0.15s, opacity 0.15s;
}
.deck-controls button:hover:not(:disabled) {
  border-color: rgba(159, 200, 255, 0.7);
  background: rgba(17, 67, 163, 0.6);
}
.deck-controls button:disabled { opacity: 0.3; cursor: default; }

/* Dots rail — the phone affordance. Hidden on the deck, which uses the nav
   buttons instead, matching the previous deck presentation. */
.dots {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  z-index: 55;
  pointer-events: none;
}
.dots .dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(159, 200, 255, 0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.dots .dot.active { background: var(--snow-400); transform: scale(1.35); }

/* Deck nav buttons.
   PLACEMENT NOTE: centred at the bottom, NOT bottom-right. The slide number
   already occupies bottom-right (.slide-number, 2rem inset) and an earlier
   revision stacked the wordmark on top of it — the exact collision reported in
   review. Keeping the controls centred leaves the page number unobstructed.
   This is the ONLY .deck-controls rule: an earlier duplicate that also set
   `right: 1.25rem` over-constrained the box (left + right + width all set),
   which fought the translateX centring. */
.deck-controls {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 55;
}

/* ================================================================== *
 * 13. BASE MODE — the deck (desktop + tablet)
 *
 * Fixed 980x552 canvas, uniformly scaled, exactly as Slidev rendered it.
 * This is the BASE (not an attribute selector) so the layout is correct
 * before JS runs and degrades sensibly with JS disabled (see the <noscript>
 * block in the document head, which stacks every slide into a long page).
 * ------------------------------------------------------------------ *
 * WHICH MODE APPLIES
 * The reflow layout is selected when the deck's own scale factor drops so low
 * that text is unreadable — in practice only a narrow, portrait phone. The
 * scale is
 *     s = Math.min(viewW / 980, viewH / 552)
 * and the switch happens below s = 0.60, i.e. 980 * 0.60 = 588px of width or
 * 552 * 0.60 = 331px of height. The same threshold is applied by the inline
 * boot script and by assets/tour.js; keep the three in sync.
 *
 * TABLETS DELIBERATELY KEEP THE DECK. The deck is where the cover shows its
 * enlarged "SNOWSIDE TOUR" kicker and its explicit two-line subtitle, and the
 * deck is what preserves the Slidev look on tablet. The threshold is therefore
 * placed BELOW every tablet scale and ABOVE every phone-portrait scale.
 *
 * Measured s values (so the choice is auditable):
 *   phone portrait   360x800 -> 0.367 | 390x844 -> 0.398 | 430x932 -> 0.439
 *   phone landscape  844x390 -> 0.707 | 932x430 -> 0.779
 *   tablet           600x1024 -> 0.612 | 768x1024 -> 0.784 | 820x1180 -> 0.837
 *                    1024x768 -> 1.045 | 1194x834 -> 1.218
 *   desktop          1280x720 -> 1.304 | 1440x900 -> 1.469
 * So portrait phones reflow; phone LANDSCAPE, every tablet and every desktop
 * keep the deck. (Pinch-zoom is enabled as an escape hatch in both modes.)
 * ================================================================== */
html, body { overflow: hidden; }

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--canvas-w);
  height: var(--canvas-h);
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: center center;
}
.slide {
  position: absolute;
  inset: 0;
  display: none;
  background-color: #121212;
}
.slide.active { display: block; }

/* ================================================================== *
 * 14. PHONE MODE — reflowing, one slide per screen, horizontal swipe
 *
 * Applied by setting data-mode="mobile" on <html>. Chosen by the inline
 * boot script before first paint (no FOUC) and re-evaluated on resize /
 * orientationchange by assets/tour.js.
 * ================================================================== */
[data-mode="mobile"] { overflow: hidden; }

/* Phone hint, shown only in phone mode until the first navigation. */
.swipe-hint {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 1.9rem;
  transform: translateX(-50%);
  z-index: 56;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(159, 200, 255, 0.75);
  background: rgba(5, 11, 22, 0.6);
  border: 1px solid rgba(90, 157, 255, 0.25);
  border-radius: 9999px;
  padding: 0.3rem 0.8rem;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
[data-mode="mobile"] .swipe-hint { display: block; }
.swipe-hint.hidden { opacity: 0; }
[data-mode="mobile"] .viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
[data-mode="mobile"] .stage {
  display: flex;
  /* Position must be reset here: the base .stage is absolutely centred with
     left/top:50%, and leaving that in place would push the full-width flex
     track half a viewport off-screen. */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
}
[data-mode="mobile"] .dots { display: flex; pointer-events: auto; }
/* Generous hit area on phones — the visual dot stays 6px. */
[data-mode="mobile"] .dots .dot { position: relative; }
[data-mode="mobile"] .dots .dot::before {
  content: "";
  position: absolute;
  inset: -8px -5px;
}
[data-mode="mobile"] .deck-controls { display: none; }
[data-mode="mobile"] .slide {
  position: relative;
  inset: auto;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
[data-mode="mobile"] .slide-content {
  padding: 3.5rem 1.25rem 3rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
[data-mode="mobile"] .cover-inner { padding: 0 1.25rem; }
[data-mode="mobile"] .connect-inner {
  padding: 3.5rem 1.25rem 3rem;
  justify-content: flex-start;
}

/* Mobile top bar: wordmark + slide position. */
.mobile-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.75rem;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 55;
  background: linear-gradient(180deg, rgba(5,11,22,0.92), rgba(5,11,22,0.0));
  pointer-events: none;
}
[data-mode="mobile"] .mobile-bar { display: flex; }
.mobile-wordmark {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--snow-300);
}
.mobile-counter {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #64748b;
}

/* Mobile: grids collapse to a single column so text actually reflows. */
[data-mode="mobile"] .grid,
[data-mode="mobile"] .grid[data-cols="2"],
[data-mode="mobile"] .grid[data-cols="3"],
[data-mode="mobile"] .grid[data-cols="4"] {
  grid-template-columns: 1fr;
  gap: 1rem;
}[data-mode="mobile"] .faq-grid { grid-template-columns: 1fr; gap: 1rem; }
[data-mode="mobile"] .connect-grid { grid-template-columns: 1fr; }

/* Mobile type scale — real reflow, not canvas scaling. */
[data-mode="mobile"] .snow-bg h2 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 1.25rem; }
[data-mode="mobile"] .snow-bg h3 { font-size: 1.1rem; }
[data-mode="mobile"] .snow-bg p { font-size: 0.95rem; }
[data-mode="mobile"] .snow-card h3 { font-size: 1.05rem; }
[data-mode="mobile"] .snow-card p { font-size: 0.9rem; }
[data-mode="mobile"] .cover-tagline { font-size: 1.4rem; }
[data-mode="mobile"] .cover-subtitle { font-size: 0.95rem; }
[data-mode="mobile"] .cover-banner { width: min(300px, 78%); }
/* The cover subtitle keeps its explicit <br /> on phones too — the two
   statements stay on separate rows, matching the deck. (An earlier revision
   hid the break here to avoid the second row wrapping mid-phrase; the copy is
   now shorter and the break is desired, so the override is gone.) */
[data-mode="mobile"] .snow-revenue-apy { font-size: 1.4rem; }

/* Revive the roadmap rules for mobile (rail stays horizontal-friendly). */
[data-mode="mobile"] .phase { gap: 1rem; padding-bottom: 1.5rem; }

/* ================================================================== *
 * 15. Accessibility
 * ================================================================== */
:focus-visible { outline: 2px solid var(--snow-400); outline-offset: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================================================================== *
 * 16. Reduced motion
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  [data-mode="mobile"] .stage { transition: none; }
}

/* ================================================================== *
 * 17. Print (replaces `slidev export`)
 * ================================================================== */
@media print {
  @page { size: 980px 552px; margin: 0; }
  html, body { height: auto; background: #ffffff; overflow: visible; }
  .progress, .deck-controls, .dots, .mobile-bar { display: none !important; }
  .viewport { position: static !important; overflow: visible !important; }
  .stage { display: block !important; position: static !important; transform: none !important; width: auto !important; height: auto !important; }
  .slide {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 980px;
    height: 552px;
    break-after: page;
    page-break-after: always;
  }
  .slide-content { height: 100%; overflow: hidden; }
}