html { scroll-snap-type: y proximity; scroll-behavior: smooth; overscroll-behavior-y: contain; }
body { padding-bottom: env(safe-area-inset-bottom); }
.cards { max-width: 480px; margin: 0 auto; }
.card {
  min-height: 100svh; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-md);
  padding: calc(env(safe-area-inset-top) + 28px) 16px 40px; border-top: 1px solid var(--color-border);
}
.card:first-child { border-top: 0; }
.card h2 { font-size: 2.1rem; }
.card .lede { font-size: 1rem; }
.visual { margin-top: var(--space-sm); }
.title { justify-content: center; }
.title .title-inner { display: flex; flex-direction: column; gap: var(--space-ml); }
.title-h { font-size: 2.6rem; }
.swipe { font-size: var(--text-xs); font-weight: 700; color: var(--color-action); margin: var(--space-md) 0 0; animation: nudge 2.4s var(--ease-out) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }

/* Phone screens render as the real app: no device frame */
.visual .phone { width: 100%; border-radius: var(--radius-sheet); box-shadow: none; }
.visual .statusbar { display: none; }
.visual .screen { padding: var(--space-ml) var(--space-md); }
.visual .gate-tool { background: var(--color-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sheet); padding: var(--space-md); }
.visual .needs { grid-template-columns: repeat(3, 1fr); }
.visual .proof { grid-template-columns: 1fr; gap: var(--space-lg); }
.visual .struct { grid-template-columns: 1fr; }
.visual .road { grid-template-columns: 1fr; gap: var(--space-ml); }
.visual .problem b { font-size: 1.15rem; }

.dots { position: fixed; right: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.dots a { width: 6px; height: 6px; border-radius: 50%; background: var(--color-track); }
.dots a.on { background: var(--color-action); height: 16px; border-radius: 3px; }
.end { padding: 32px 16px calc(48px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--color-border); }
.end a { color: var(--color-action); font-weight: 700; font-size: var(--text-xs); }
.visual .yard-top { flex-direction: column; padding: var(--space-md) var(--space-md) var(--space-sm); }
.visual .yard { padding: 0 var(--space-md) var(--space-md); }
.visual .yrow { grid-template-columns: 1fr 1fr; }
.visual .yrow.head { display: none; }
.visual .yrow > :first-child { grid-column: 1 / -1; }
.visual .arow { grid-template-columns: 1fr; gap: 2px; font-size: var(--text-xs); }
.visual .arow.head { display: none; }
.visual .arow b { font-size: 1rem; }
.visual .arow .never::before { content: "Never sees: "; font-weight: 700; }