/* aSnooker marketing site. Crucible Modern v0.1 tokens (DESIGN.md). */
:root {
  --bg: #0A0F0D; --surface: #11171A; --surface-2: #161D20; --surface-3: #1B2326;
  --cloth: #0E5A3E; --cloth-bright: #1FAA64; --cloth-soft: rgba(31,170,100,0.12);
  --ivory: #F2EAD3; --ivory-soft: rgba(242,234,211,0.08);
  --brass: #C49A4E; --brass-soft: rgba(196,154,78,0.14); --mahogany: #3D2A1E;
  --foul: #D14A3D; --warning: #E2A23E;
  --text: #F2EAD3; --text-2: #B6BFB9; --text-muted: #7A8580;
  --line: rgba(242,234,211,0.08); --line-strong: rgba(242,234,211,0.16);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.5);
  --downlight: radial-gradient(80% 60% at 50% 0%, rgba(31,170,100,0.18), transparent 60%);
  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px;
  --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --space-5xl: 96px;
  --r-chip: 4px; --r-card: 12px; --r-hero: 20px; --r-pill: 9999px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --t-quick: 180ms;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-xl); }
.eyebrow { font: 500 12px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin: 0 0 var(--space-lg); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
h1 { font-size: clamp(48px, 7.6vw, 96px); line-height: 0.98; letter-spacing: -0.04em; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-variation-settings: "opsz" 72; }
h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; }
p { margin: 0; }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--text-2); max-width: 38em; }
.muted { color: var(--text-muted); font-size: 14px; }
.num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

.btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 14px 24px; border-radius: var(--r-pill); font: 500 15px/1 var(--font-body); text-decoration: none; transition: transform var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out); }
.btn-primary { background: var(--cloth-bright); color: #06140D; }
.btn-primary:hover { transform: translateY(-1px); background: #25BC70; }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--ivory-soft); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.link-arrow { color: var(--cloth-bright); text-decoration: none; font-weight: 500; }
.link-arrow:hover { text-decoration: underline; }

/* header */
header.site { position: sticky; top: 0; z-index: 10; background: rgba(10,15,13,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { font: 400 26px/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; font-variation-settings: "opsz" 36; }
.brand span { color: var(--brass); }
.brand small { font: 500 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-left: var(--space-sm); vertical-align: middle; }
nav.links { display: flex; align-items: center; gap: var(--space-2xl); font-size: 15px; }
nav.links a:not(.btn) { color: var(--text-2); text-decoration: none; }
nav.links a:not(.btn):hover, nav.links a[aria-current] { color: var(--text); }

/* hero */
.hero { position: relative; padding: var(--space-5xl) 0 var(--space-4xl); }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--downlight); pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.35fr 0.65fr; gap: var(--space-4xl); align-items: center; }
.hero .lead { margin-top: var(--space-xl); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-2xl); }
.model { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-hero); padding: var(--space-xl); box-shadow: var(--shadow-2); }
.model video, .model img { width: 100%; height: auto; aspect-ratio: 432 / 820; border-radius: var(--r-card); }
.model figcaption { margin-top: var(--space-lg); font-size: 14px; color: var(--text-muted); }

/* audience doors */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-3xl); }
.door { display: block; padding: var(--space-lg) var(--space-xl); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--ivory-soft); text-decoration: none; transition: transform var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out); }
.door:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.door .who { font: 500 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.door .what { display: block; margin-top: var(--space-sm); font-size: 15px; color: var(--text); }

section { padding: var(--space-5xl) 0; border-top: 1px solid var(--line); scroll-margin-top: 68px; }
.section-head { max-width: 760px; margin-bottom: var(--space-3xl); }
.section-head .lead { margin-top: var(--space-lg); }

/* what the camera sees */
.sees { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.see { border-top: 1px solid var(--line-strong); padding-top: var(--space-lg); }
.see .n { font: 500 13px/1 var(--font-mono); color: var(--cloth-bright); letter-spacing: 0.12em; }
.see h3 { margin: var(--space-md) 0 var(--space-sm); }
.see p { color: var(--text-2); font-size: 16px; }

/* feature list + mock */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-4xl); align-items: start; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl) var(--space-xl); }
.feature h3 { margin-bottom: var(--space-sm); }
.feature p { color: var(--text-2); font-size: 16px; }
.outcome { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--line); font: 400 24px/1.35 var(--font-display); font-variation-settings: "opsz" 36; letter-spacing: -0.01em; max-width: 30em; }
.pill { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); padding: 8px 14px; border-radius: var(--r-pill); background: var(--cloth-soft); color: var(--cloth-bright); font: 500 13px/1 var(--font-body); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(31,170,100,0.18); }

/* table-side scoreboard mock */
.board { background: linear-gradient(180deg, #13201A, #0D1512); border: 1px solid var(--line-strong); border-radius: var(--r-hero); padding: var(--space-2xl); box-shadow: var(--shadow-2); }
.board .top { display: flex; justify-content: space-between; font: 500 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.board .live { color: var(--cloth-bright); }
.board .live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: middle; }
.board .players { display: grid; grid-template-columns: 1fr auto; row-gap: var(--space-md); align-items: baseline; margin-top: var(--space-2xl); }
.board .name { font-size: 20px; }
.board .name.on::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); margin-left: 10px; vertical-align: middle; }
.board .score { font: 400 64px/1 var(--font-display); letter-spacing: -0.04em; font-variation-settings: "opsz" 144; font-feature-settings: "tnum" 1; text-align: right; }
.board .foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.board .break { padding: 6px 12px; border-radius: var(--r-pill); background: var(--brass-soft); color: var(--brass); font: 500 14px/1 var(--font-body); }
.board .clip { font-size: 14px; color: var(--text-2); }

/* phone mock */
.phone { width: 320px; max-width: 100%; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 36px; padding: var(--space-xl) var(--space-lg); box-shadow: var(--shadow-2); }
.phone .bar { width: 72px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto var(--space-xl); }
.phone .hello { font: 400 26px/1.1 var(--font-display); letter-spacing: -0.02em; font-variation-settings: "opsz" 36; }
.phone .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
.phone .stat { background: var(--surface-2); border-radius: var(--r-card); padding: var(--space-md); }
.phone .stat b { display: block; font: 400 26px/1 var(--font-display); font-feature-settings: "tnum" 1; font-variation-settings: "opsz" 36; }
.phone .stat span { font-size: 12px; color: var(--text-muted); }
.phone .card { margin-top: var(--space-md); background: var(--surface-2); border-radius: var(--r-card); padding: var(--space-md); display: flex; gap: var(--space-md); align-items: center; font-size: 14px; }
.phone .card img { width: 44px; height: 84px; object-fit: cover; border-radius: 6px; flex: none; }
.phone .card b { display: block; font-weight: 500; }
.phone .card span { color: var(--text-muted); font-size: 13px; }
.phone .card .go { margin-left: auto; padding: 6px 12px; border-radius: var(--r-pill); background: var(--cloth-bright); color: #06140D; font-weight: 500; font-size: 13px; flex: none; }
.phone .tag { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brass-soft); color: var(--brass); font: 500 14px/1 var(--font-mono); }
.mock-note { margin-top: var(--space-md); text-align: center; }

/* pro */
.sample { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-hero); padding: var(--space-2xl); }
.sample .big { font: 400 88px/1 var(--font-display); letter-spacing: -0.04em; font-variation-settings: "opsz" 144; font-feature-settings: "tnum" 1; margin: var(--space-md) 0 var(--space-sm); }
.sample .row { margin-top: var(--space-xl); }
.sample .row .label { font: 500 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-sm); }
.sample .row .count { color: var(--warning); font-size: 15px; margin-top: var(--space-sm); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); margin-bottom: var(--space-3xl); }
.wall { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-hero); padding: var(--space-2xl); }
.wall img { margin: 0 auto; }
.wall figcaption { margin-top: var(--space-lg); text-align: center; }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.way { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--space-2xl); }
.way .n { font: 500 13px/1 var(--font-mono); color: var(--brass); letter-spacing: 0.12em; }
.way h3 { margin: var(--space-md) 0 var(--space-sm); }
.way p { color: var(--text-2); font-size: 16px; }

/* contact + footer */
.contact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-hero); padding: var(--space-4xl); background-image: var(--downlight); }
.contact .lead { margin-top: var(--space-lg); }
footer { padding: var(--space-3xl) 0; color: var(--text-muted); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
footer a { color: var(--text-2); text-decoration: none; }
footer nav { display: flex; gap: var(--space-xl); }

@media (max-width: 980px) {
  .hero .wrap, .split { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .model { max-width: 320px; }
  .sees, .steps { grid-template-columns: 1fr 1fr; }
  .ways { grid-template-columns: 1fr; }
  nav.links > a:not(.btn) { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--space-lg); }
  .hero { padding: var(--space-4xl) 0 var(--space-3xl); }
  section { padding: var(--space-4xl) 0; }
  .doors, .sees, .steps, .features { grid-template-columns: 1fr; }
  .wall { padding: var(--space-lg); overflow-x: auto; }
  .wall img { max-width: none; width: 900px; }
  .contact { padding: var(--space-2xl); }
  .board .score { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .door { transition: none; }
  .btn-primary:hover, .door:hover { transform: none; }
}

/* AI coach: four pillars, each with a small illustration */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-hero); padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.pillar .n { font: 500 13px/1 var(--font-mono); color: var(--cloth-bright); letter-spacing: 0.12em; }
.pillar p.desc { color: var(--text-2); font-size: 16px; }
.pillar .viz { margin-top: auto; background: var(--surface-2); border-radius: var(--r-card); padding: var(--space-lg); }
.pillar .viz .cap { font: 500 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-md); display: flex; justify-content: space-between; }
.plan { list-style: none; margin: 0; padding: 0; }
.plan li { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-md); padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.plan li:last-child { border-bottom: 0; }
.plan li span { font: 500 13px/1.6 var(--font-mono); color: var(--brass); }
.trend svg { width: 100%; height: auto; }
.trend .axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: var(--space-sm); }
.mini-dots .row { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--space-md); align-items: center; font-size: 13px; color: var(--text-2); margin-top: var(--space-sm); }
.mini-dots .row img { width: 100%; height: auto; }
.mini-dots .row b { color: var(--warning); font-weight: 500; }
.mini-dots .big { font: 400 44px/1 var(--font-display); letter-spacing: -0.03em; font-feature-settings: "tnum" 1; font-variation-settings: "opsz" 72; }
.opp svg { width: 100%; height: auto; }
.opp ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; font-size: 14px; color: var(--text-2); }
.opp li { padding: 4px 0; }
.opp li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.opp li.strong::before { background: var(--brass); }
.opp li.weak::before { background: var(--warning); }

/* a season with the coach */
.season { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-hero); overflow: hidden; }
.season > div { padding: var(--space-2xl); background: var(--surface); }
.season > div + div { border-left: 1px solid var(--line); }
.season .when { font: 500 12px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.season h3 { margin: var(--space-md) 0 var(--space-sm); }
.season p { color: var(--text-2); font-size: 16px; }

@media (max-width: 980px) {
  .pillars { grid-template-columns: 1fr; }
  .season { grid-template-columns: 1fr; }
  .season > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .mini-dots .row { grid-template-columns: 1fr auto; }
  .mini-dots .row img { grid-column: 1 / -1; grid-row: 2; }
  .pillar .viz .cap { flex-wrap: wrap; gap: var(--space-sm); }
}

/* ---------- animated table stages ---------- */
.model .stage { aspect-ratio: 1998 / 3789; border-radius: var(--r-card); overflow: hidden; }
.model .stage svg, .model .stage img { width: 100%; height: 100%; }
.model figcaption .shot-cap { color: var(--text); }
.viz .stage { aspect-ratio: 2 / 1; border-radius: 8px; overflow: hidden; background: var(--bg); }
.viz .stage svg { width: 100%; height: 100%; }

/* practice set under the daily plan */
.practice-set { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.practice-set .meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-md); font-size: 14px; }
.practice-set .setup-label { color: var(--text); font-family: var(--font-mono); font-size: 13px; }
.practice-set .target { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-2); }
.pips { display: inline-flex; gap: 5px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--brass); transition: background var(--t-quick) var(--ease-out); }
.pips i.on { background: var(--brass); }

/* 100-dot comparison */
.per100 .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
.per100 .dotgrid { width: 100%; height: auto; }
.per100 .who { margin-top: var(--space-md); font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.per100 .missed { margin-top: var(--space-xs); color: var(--warning); font-size: 15px; }
.per100 .missed b { font: 400 40px/1 var(--font-display); font-variation-settings: "opsz" 72; font-feature-settings: "tnum" 1; margin-right: 6px; }
.per100 .foot { margin-top: var(--space-lg); font-size: 13px; color: var(--text-muted); }
.dotgrid circle { opacity: 0; transition: opacity 280ms var(--ease-out); transition-delay: calc(var(--i) * 9ms); }
.in-view .dotgrid circle { opacity: 1; }
.sample.per100 { padding: var(--space-2xl); }
.sample.per100 .lead { margin: var(--space-sm) 0 var(--space-xl); }

/* shot wall */
.wall-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; }
.wall-cell svg { width: 100%; height: auto; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.in-view .draw { stroke-dashoffset: 0; }

/* trend + opponent draw-ins */
.trend .pt { opacity: 0; transition: opacity 300ms var(--ease-out); transition-delay: calc(var(--i) * 140ms + 200ms); }
.in-view .trend .pt, .trend.in-view .pt { opacity: 1; }
.opp li.strong::before { background: var(--brass); }
.opp li.weak::before { background: transparent; border: 2px solid var(--foul); width: 6px; height: 6px; }
.opp .halo { transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.6; } }

/* live scoreboard */
.board .score.bump { animation: bump 500ms var(--ease-out); }
@keyframes bump { 0% { color: var(--brass); transform: translateY(-3px); } 100% { color: var(--text); transform: none; } }

/* phone menu */
details.menu { display: none; position: relative; }
details.menu summary { list-style: none; cursor: pointer; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 14px; color: var(--text); }
details.menu summary::-webkit-details-marker { display: none; }
details.menu[open] summary { background: var(--ivory-soft); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: var(--space-sm); box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.menu-panel a { padding: 12px 14px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 16px; }
.menu-panel a:hover { background: var(--ivory-soft); }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }

@media (max-width: 980px) {
  details.menu { display: block; }
  nav.links { gap: var(--space-sm); }
  .model { max-width: none; }
  .model .stage { aspect-ratio: 3789 / 1998; }
  .hero .wrap { gap: var(--space-2xl); }
}
@media (max-width: 640px) {
  header.site .wrap { height: 60px; }
  section { scroll-margin-top: 60px; }
  .brand { font-size: 23px; }
  .brand small { display: none; }
  nav.links .btn-sm { padding: 9px 14px; font-size: 13px; }
  h1 { font-size: clamp(40px, 11.5vw, 56px); }
  h2 { font-size: clamp(28px, 8vw, 36px); }
  .hero { padding: var(--space-3xl) 0 var(--space-2xl); }
  .hero .lead { margin-top: var(--space-lg); }
  .doors { margin-top: var(--space-2xl); }
  section { padding: var(--space-3xl) 0; }
  .section-head { margin-bottom: var(--space-2xl); }
  .features { gap: var(--space-xl); }
  .outcome { font-size: 20px; margin-top: var(--space-2xl); }
  .model { padding: var(--space-md); border-radius: var(--r-card); }
  .board { padding: var(--space-xl); }
  .phone { width: 100%; max-width: 340px; }
  .pillar { padding: var(--space-xl); }
  .pillar .viz { padding: var(--space-md); }
  .per100 .cols { gap: var(--space-lg); }
  .per100 .missed b { font-size: 32px; }
  .wall { padding: var(--space-md); overflow: visible; }
  .wall-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .practice-set .meta { flex-direction: column; align-items: flex-start; }
  .season > div { padding: var(--space-xl); }
  .contact { padding: var(--space-xl); }
  footer .wrap { flex-direction: column; }
  footer nav { flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .draw { stroke-dashoffset: 0; transition: none; }
  .dotgrid circle, .trend .pt { opacity: 1; transition: none; }
  .opp .halo, .board .score.bump { animation: none; }
}

/* pillars as rows: text beside a larger visual */
.pillars { display: flex; flex-direction: column; gap: var(--space-xl); }
.pillar { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); align-items: center; }
.pillar .text { display: flex; flex-direction: column; gap: var(--space-md); }
.pillar .viz { margin-top: 0; }
.pillar .plan { margin-top: var(--space-md); }
.viz.practice-set { margin-top: 0; border-top: 0; padding-top: var(--space-lg); }
@media (max-width: 980px) {
  .pillar { grid-template-columns: 1fr; gap: var(--space-xl); }
}