/* Protonix Academy — storefront styles */
:root {
  --bg: #08080e;
  --bg-2: #0e0e16;
  --surface: #11121b;
  --surface-2: #171823;
  --surface-3: #18253f;
  --line: rgba(233, 201, 139, 0.10);
  --line-2: rgba(233, 201, 139, 0.18);
  --text: #efe8d9;
  --text-2: #c9c2b3;
  --muted: #8d96ab;
  --gold: #d4a659;
  --gold-2: #e9c98b;
  --gold-3: #f6e2b5;
  --teal: #3fc1a5;
  --teal-2: #1e8c7e;
  --danger: #e4677a;
  --ok: #58c99a;
  --accent: var(--gold);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --font-display: 'Syne', 'Avenir Next', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { /* film grain */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
code { font-family: var(--font-mono); font-size: .9em; color: var(--gold-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1280px, 100% - 48px); margin-inline: auto; }
.section { padding-block: 56px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--font-mono); }
.lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--text-2); max-width: 60ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--gold);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.preview-ribbon {
  background: linear-gradient(90deg, #2b2210, #172440); color: var(--gold-2);
  font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 8px 12px; border-bottom: 1px solid var(--line);
}

/* ---------- Buttons ---------- */
.btn {
  --h: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font: 700 14px/1 var(--font-body); letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .25s, color .2s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-xs { --h: 30px; padding: 0 12px; font-size: 12px; }
.btn-sm { --h: 38px; padding: 0 16px; font-size: 13px; }
.btn-lg { --h: 52px; padding: 0 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1206; box-shadow: 0 8px 24px -10px rgba(212, 166, 89, .7), inset 0 1px 0 rgba(255, 255, 255, .4); }
.btn-gold:hover { box-shadow: 0 12px 34px -8px rgba(212, 166, 89, .85), inset 0 1px 0 rgba(255, 255, 255, .5); transform: translateY(-1px); }
.btn-teal { background: linear-gradient(180deg, #58d6b9, var(--teal)); color: #04211a; box-shadow: 0 8px 24px -10px rgba(63, 193, 165, .7); }
.btn-teal:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(63, 193, 165, .8); }
.btn-ghost { background: rgba(255, 255, 255, .03); border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-3); background: rgba(212, 166, 89, .06); }
.btn-text { background: none; color: var(--muted); }
.btn-text:hover { color: var(--text); }
.btn-danger { background: rgba(228, 103, 122, .08); border-color: rgba(228, 103, 122, .35); color: #f3a3af; }
.btn-danger:hover { background: rgba(228, 103, 122, .16); }
.btn .when-in { display: none; }
.btn.is-in { background: transparent; border-color: rgba(63, 193, 165, .5); color: var(--teal); box-shadow: none; }
.btn.is-in .when-in { display: inline-flex; align-items: center; gap: 8px; }
.btn.is-in .when-out { display: none; }
.btn .when-out { display: inline-flex; align-items: center; gap: 8px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-2);
  transition: background .2s, color .2s, border-color .2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .05); color: var(--text); border-color: var(--line); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 9px; }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-2); font-weight: 600; font-size: 14px; }
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(8, 8, 14, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.site-header.is-scrolled { border-color: var(--line); background: rgba(8, 8, 14, .9); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { filter: drop-shadow(0 0 14px rgba(212, 166, 89, .35)); transition: transform .6s var(--ease); }
.brand:hover img { transform: rotate(-12deg) scale(1.05); }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-word b { font: 800 17px/1 var(--font-display); letter-spacing: .14em; background: linear-gradient(180deg, var(--gold-3), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-word i { font: 600 10px/1 var(--font-mono); font-style: normal; letter-spacing: .5em; color: var(--teal); margin-top: 5px; }
.main-nav { display: flex; align-items: center; gap: 2px; position: relative; }
.main-nav > a { padding: 10px 13px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--text-2); transition: color .2s, background .2s; position: relative; }
.main-nav > a:hover, .main-nav > a.is-active { color: var(--text); background: rgba(255, 255, 255, .04); }
.main-nav > a.is-active::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--gold); }
.mega {
  position: absolute; top: calc(100% + 12px); left: -12px; width: 560px; padding: 14px;
  background: rgba(14, 20, 18, .97); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.main-nav.mega-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; transition: background .2s; }
.mega-item:hover { background: rgba(255, 255, 255, .04); }
.mega-item b { display: block; font-size: 14px; }
.mega-item small { color: var(--muted); font-size: 12px; }
.mega-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 14px 12px 6px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--gold-2); }
.mega-foot:hover { color: var(--gold-3); }
.mm-group { display: block; margin: 22px 0 4px; font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }
.mm-link.is-on { color: var(--gold-3); }
.mega-item em { margin-left: auto; font: 600 11px var(--font-mono); font-style: normal; color: var(--muted); }
.mega-dot { flex-shrink: 0; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.header-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; width: 260px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .02); color: var(--muted);
  transition: border-color .2s, width .3s var(--ease);
}
.header-search:focus-within { border-color: var(--gold); width: 300px; }
.header-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 500 13px var(--font-body); }
.search-mobile, .menu-btn { display: none; }
.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--gold); color: #1a1206; font: 800 11px/18px var(--font-body); text-align: center;
}
.cart-count.bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

.mobile-menu { position: fixed; inset: 0; z-index: 80; background: rgba(5, 6, 10, .7); backdrop-filter: blur(6px); }
.mobile-menu-inner { position: absolute; inset: 0 0 0 auto; width: min(380px, 100%); background: var(--bg-2); border-left: 1px solid var(--line); padding: 18px 20px 32px; overflow-y: auto; animation: slideIn .3s var(--ease); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mobile-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; margin-bottom: 14px; color: var(--muted); }
.mobile-search input { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font: 500 15px var(--font-body); }
.mm-link { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 600; }
.mm-link .mega-dot { margin-top: 0; }
.mm-link em, .mm-link svg { margin-left: auto; color: var(--muted); font: 500 12px var(--font-mono); font-style: normal; }
.mm-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.mm-sub a { padding: 12px; border: 1px solid var(--line); border-radius: 12px; text-align: center; font-size: 14px; color: var(--text-2); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 88px; border-bottom: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; }
.hero-glow.g1 { width: 620px; height: 620px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(212, 166, 89, .55), transparent 65%); animation: drift 14s ease-in-out infinite alternate; }
.hero-glow.g3 { width: 760px; height: 420px; left: 30%; top: 20%; background: radial-gradient(ellipse, rgba(143, 140, 242, .16), transparent 65%); opacity: .35; animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift3 { 0% { transform: translate(-60px, 20px) scale(1); } 100% { transform: translate(80px, -30px) scale(1.15); } }
.hero-ambient { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-glow.g2 { width: 540px; height: 540px; left: -180px; bottom: -260px; background: radial-gradient(circle, rgba(30, 140, 126, .6), transparent 65%); animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.08); } }
.hero-bars { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; display: flex; align-items: flex-end; gap: 4px; padding: 0 12px; opacity: .22; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.hero-bars span { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--gold), transparent); border-radius: 3px 3px 0 0; transform-origin: bottom; animation: eq 1.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -73ms); }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.035em; margin: 20px 0 22px; line-height: .98; }
.hero h1 em, .about-hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--gold-3) 10%, var(--gold) 45%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 38px; }
.hero-stats { display: flex; gap: 36px; list-style: none; padding: 0; margin: 0; }
.hero-stats b { display: block; font: 700 24px/1 var(--font-display); color: var(--gold-3); }
.hero-stats span { font-size: 13px; color: var(--muted); }
.hero-stack { position: relative; height: 520px; }
.stack-card { position: absolute; width: 56%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); transition: transform .6s var(--ease), box-shadow .4s; }
.stack-card img { width: 100%; height: 100%; object-fit: cover; }
.stack-card.s0 { left: -2%; top: 24px; transform: rotate(-10deg); z-index: 1; }
.stack-card.s1 { left: 22%; top: 70px; transform: rotate(1deg); z-index: 3; }
.stack-card.s2 { right: -2%; top: 0; transform: rotate(9deg); z-index: 2; }
.hero-stack:hover .s0 { transform: rotate(-13deg) translate(-20px, 10px); }
.hero-stack:hover .s2 { transform: rotate(14deg) translate(20px, 10px); }
.stack-card:hover { box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .9), 0 0 0 1px var(--accent), 0 0 60px -10px var(--accent); z-index: 5; }
.hero-emblem { position: absolute; left: 50%; top: 50%; width: 92%; max-width: 560px; transform: translate(-50%, -50%); z-index: 0; opacity: .16; filter: saturate(.8); animation: spinSlow 120s linear infinite; }
@keyframes spinSlow { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-10px) rotate(4deg); } }

/* ---------- Section heads & grids ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; margin-top: 10px; }
.grid-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.grid-store { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Category rail */
.cat-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat-tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 22px; overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
}
.cat-tile::before { content: ''; position: absolute; width: 180px; height: 180px; right: -60px; top: -70px; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 70%); opacity: .22; transition: opacity .3s, transform .5s var(--ease); }
.cat-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 20px 40px -24px var(--accent); }
.cat-tile:hover::before { opacity: .42; transform: scale(1.2); }
.cat-count { font: 600 12px var(--font-mono); color: var(--accent); letter-spacing: .1em; }
.cat-tile b { font: 700 20px/1.1 var(--font-display); margin-top: auto; }
.cat-tile small { color: var(--muted); font-size: 13px; }
.cat-arrow { position: absolute; right: 20px; bottom: 22px; color: var(--accent); transition: transform .3s var(--ease); }
.cat-tile:hover .cat-arrow { transform: translateX(4px); }

/* ---------- Product card ---------- */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
.card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 50px -24px var(--accent); }
.card-art { position: relative; aspect-ratio: 1; overflow: hidden; background: #06060b; }
.card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; }
.card:hover .card-art img { transform: scale(1.06); filter: brightness(.82); }
.badge {
  position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 10px; border-radius: 999px;
  font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(8, 8, 14, .78); border: 1px solid var(--line-2); color: var(--gold-2); backdrop-filter: blur(8px);
}
.badge-new { color: var(--teal); border-color: rgba(63, 193, 165, .45); }
.badge-bestseller { color: #1a1206; background: var(--gold-2); border-color: var(--gold-2); }
.badge-free { color: #04211a; background: var(--teal); border-color: var(--teal); }
.badge-update { color: #9fd0ff; border-color: rgba(95, 178, 232, .5); }
.badge-coming-soon { color: var(--text-2); }
.play-btn {
  display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1206;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8), 0 0 0 6px rgba(212, 166, 89, .14);
  transition: transform .3s var(--ease), box-shadow .3s, opacity .3s;
}
.play-btn:hover { transform: scale(1.08); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8), 0 0 0 9px rgba(212, 166, 89, .2); }
.play-btn .i-pause, .player-toggle .i-pause { display: none; }
.play-btn.is-playing .i-pause, .player.is-playing .player-toggle .i-pause { display: grid; }
.play-btn.is-playing .i-play, .player.is-playing .player-toggle .i-play { display: none; }
.play-btn span { display: grid; place-items: center; }
.card-play { position: absolute; right: 16px; bottom: 16px; z-index: 2; opacity: 0; transform: translateY(10px) scale(.9); }
.card:hover .card-play, .card-play:focus-visible, .card-play.is-playing { opacity: 1; transform: none; }
.card-play.is-playing { animation: ring 1.6s infinite; }
@keyframes ring { 50% { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8), 0 0 0 12px rgba(212, 166, 89, .08); } }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 18px; }
.card-meta { display: flex; gap: 10px; font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 10px; }
.card-meta span + span { color: var(--muted); }
.card-meta span + span::before { content: '·'; margin-right: 10px; color: var(--muted); }
.card-title { font: 700 19px/1.2 var(--font-display); margin-bottom: 8px; }
.card-title a:hover { color: var(--gold-3); }
.card-desc { color: var(--muted); font-size: 13.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { display: inline-flex; align-items: baseline; gap: 8px; }
.price b { font: 700 18px var(--font-display); color: var(--gold-3); }
.price s { color: var(--muted); font-size: 13px; }
.price-lg b { font-size: 34px; }
.price-lg s { font-size: 16px; }

/* ---------- Spotlight ---------- */
.spotlight { position: relative; margin: 32px 0; padding: 80px 0; background: radial-gradient(900px 500px at 20% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--bg-2); border-block: 1px solid var(--line); overflow: hidden; }
.spotlight-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.spotlight-art img { width: 100%; height: auto; }
.spotlight-art { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 0 1px var(--line-2); }
.spot-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); }
.spot-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.spotlight-copy h2 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 800; margin: 14px 0 6px; }
.spot-sub { color: var(--accent); font-weight: 600; margin-bottom: 18px; }
.spotlight-copy > p:not(.spot-sub) { color: var(--text-2); max-width: 56ch; }
.spec-row { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec-row li { flex: 1; min-width: 110px; padding: 14px 16px; border-right: 1px solid var(--line); }
.spec-row li:last-child { border-right: 0; }
.spec-row b { display: block; font: 700 20px var(--font-display); color: var(--gold-3); }
.spec-row span { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.spot-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.spot-buy .price { margin-right: 10px; }

/* Waveform */
.waveform { position: relative; display: flex; align-items: center; gap: 2px; height: 64px; cursor: pointer; margin: 8px 0; }
.waveform span { flex: 1; min-width: 1px; background: rgba(233, 201, 139, .26); border-radius: 2px; transition: background .2s; }
.waveform:hover span { background: rgba(233, 201, 139, .4); }
.waveform-progress { position: absolute; inset: 0 auto 0 0; width: 0; pointer-events: none; overflow: hidden; }
.waveform.has-progress span.on { background: var(--accent); }

/* Course banner */
.course-banner { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; overflow: hidden; border-radius: 28px; border: 1px solid var(--line-2); background: radial-gradient(700px 400px at 100% 0%, rgba(212, 166, 89, .2), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(30, 140, 126, .25), transparent 60%), var(--surface); transition: border-color .3s, transform .4s var(--ease); }
.course-banner:hover { border-color: var(--gold); transform: translateY(-3px); }
.course-copy { padding: 56px; }
.course-copy h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; margin: 14px 0 14px; }
.course-copy > p { color: var(--text-2); max-width: 52ch; }
.course-points { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.course-points li { padding-left: 26px; position: relative; color: var(--text-2); }
.course-points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--gold); transform: rotate(45deg); }
.course-art { height: 100%; }
.course-art img { width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent, #000 30%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); }

/* Free row */
.free-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.free-card { display: flex; gap: 20px; align-items: center; padding: 18px; border-radius: var(--radius-lg); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), var(--surface); }
.free-card img { width: 128px; height: 128px; border-radius: 14px; flex-shrink: 0; }
.free-card b { font: 700 20px var(--font-display); }
.free-card p { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }
.free-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.play-btn:has(.play-label) { width: auto; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; gap: 8px; display: inline-flex; background: transparent; color: var(--text); border: 1px solid var(--line-2); box-shadow: none; font: 700 13px var(--font-body); }
.play-btn:has(.play-label):hover { border-color: var(--accent); color: var(--accent); transform: none; }

/* Why */
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.why-item { background: var(--bg-2); padding: 28px; }
.why-item svg { color: var(--gold); margin-bottom: 16px; }
.why-item b { display: block; font: 700 18px var(--font-display); margin-bottom: 6px; }
.why-item p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- Page hero / store ---------- */
.page-hero { position: relative; padding: 56px 0 40px; border-bottom: 1px solid var(--line); background: radial-gradient(800px 300px at 80% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.page-hero h1 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.03em; margin: 12px 0 10px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 12px var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.crumbs a:hover { color: var(--gold-2); }
.crumbs span:last-child { color: var(--text-2); }
.store-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding-block: 36px 72px; }
.filters { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; display: grid; gap: 28px; }
.filter-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--muted); background: var(--surface); }
.filter-search:focus-within { border-color: var(--gold); }
.filter-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 500 14px var(--font-body); }
.filter-group h4 { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 10px; }
.filter-group a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--text-2); transition: background .2s, color .2s; }
.filter-group a .mega-dot { margin-top: 0; width: 7px; height: 7px; box-shadow: none; }
.filter-group a em { margin-left: auto; font: 500 11px var(--font-mono); font-style: normal; color: var(--muted); }
.filter-group a:hover { background: rgba(255, 255, 255, .03); color: var(--text); }
.filter-group a.is-on { background: rgba(212, 166, 89, .1); color: var(--gold-3); }
.store-main { min-width: 0; }
.store-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.chip-row { display: none; }
.toolbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.result-count { font: 500 13px var(--font-mono); color: var(--muted); }
.select { position: relative; display: inline-flex; }
.select::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select { appearance: none; -webkit-appearance: none; height: 40px; padding: 0 38px 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 600 13px var(--font-body); cursor: pointer; width: 100%; }
.empty { text-align: center; padding: 72px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); }
.empty h3, .empty h1 { font-size: 26px; margin-bottom: 8px; }
.empty p { color: var(--muted); }
.chip { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.chip.is-on { background: var(--gold); border-color: var(--gold); color: #1a1206; }

/* ---------- Product page ---------- */
.product-page { position: relative; padding-top: 28px; overflow-x: clip; }
.product-glow { position: absolute; top: -200px; left: 50%; width: 1200px; height: 800px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent); pointer-events: none; z-index: -1; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-block: 26px 40px; }
.pd-media { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; display: grid; gap: 16px; }
.pd-art { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 0 1px var(--line-2), 0 0 80px -30px var(--accent); }
.pd-art img { width: 100%; }
.pd-play { position: absolute; right: 22px; bottom: 22px; width: 68px; height: 68px; }
.pd-video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); cursor: pointer; }
.pd-video-frame img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.5); transform: scale(1.1); }
.pd-video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .3); transition: transform .3s var(--ease); }
.pd-video-frame:hover .pd-video-play { transform: translate(-50%, -50%) scale(1.1); }
.pd-video-label { position: absolute; left: 16px; bottom: 14px; font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); }
.pd-eyebrow { display: flex; gap: 10px; font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.pd-eyebrow span { color: var(--muted); }
.pd-info h1 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.03em; margin: 14px 0 6px; }
.pd-sub { font-size: 18px; color: var(--accent); font-weight: 600; margin-bottom: 16px; }
.pd-short { font-size: 17px; color: var(--text-2); max-width: 54ch; }
.pd-player { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; margin: 26px 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .02); }
.pd-player-btn { flex-shrink: 0; }
.pd-player .waveform { flex: 1; height: 54px; margin: 0; }
.pd-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; border-block: 1px solid var(--line); }
.pd-buy-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-note { color: var(--muted); margin-top: 14px; }
.pd-trust { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.pd-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.pd-trust svg { color: var(--teal); flex-shrink: 0; }
.pd-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 26px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pd-facts div { background: var(--bg); padding: 14px 16px; }
.pd-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pd-facts dt { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 4px; }
.pd-facts dd { margin: 0; font-weight: 600; color: var(--text); font-size: 15px; }
.pd-details { display: grid; grid-template-columns: 1fr 360px; gap: 40px; padding-block: 40px; border-top: 1px solid var(--line); }
.pd-block { margin-bottom: 44px; }
.pd-block h2 { font-size: 28px; font-weight: 700; margin-bottom: 18px; }
.pd-block p { color: var(--text-2); font-size: 16.5px; max-width: 68ch; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); }
.check-list svg { color: var(--teal); flex-shrink: 0; margin-top: 3px; }
.check-list.compact { grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 18px 0 24px; font-size: 14px; }
.included { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.included li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.included li:last-child { border-bottom: 0; }
.included li:nth-child(odd) { background: rgba(255, 255, 255, .015); }
.included svg { color: var(--accent); }
.included b { margin-left: auto; font: 600 14px var(--font-mono); color: var(--gold-3); }
.pd-col-side { display: grid; gap: 16px; align-content: start; }
.side-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.side-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.side-card h3.mt { margin-top: 20px; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: var(--text-2); font-size: 14px; }
.plain-list li { padding-left: 16px; position: relative; }
.plain-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--text-2); transition: border-color .2s, color .2s; }
a.tag:hover { border-color: var(--accent); color: var(--accent); }
.versions { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.versions li { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: center; }
.versions b { font: 700 14px var(--font-mono); color: var(--gold-3); }
.versions small { justify-self: end; color: var(--muted); font-size: 12px; }
.versions p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); }
.pill { padding: 3px 8px; border-radius: 999px; background: rgba(63, 193, 165, .12); color: var(--teal); font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.side-note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); }
.sticky-buy { display: none; }

/* ---------- Checkout ---------- */
.checkout-wrap { padding-block: 36px 64px; }
.page-title { font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 28px; }
.steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 8px; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font: 700 11px var(--font-mono); }
.steps li.now { color: var(--text); border-color: var(--gold); }
.steps li.now span { background: var(--gold); color: #1a1206; }
.steps li.done { color: var(--teal); }
.steps li.done span { background: rgba(63, 193, 165, .15); color: var(--teal); }
.cart-layout { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; }
.cart-items { display: grid; gap: 12px; }
.cart-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); animation: fadeUp .4s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.cart-row img { width: 96px; height: 96px; border-radius: 12px; }
.cart-row h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.cart-row h3 a:hover { color: var(--gold-3); }
.cart-row small { color: var(--muted); font-size: 13px; }
.cart-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-remove { background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px; }
.cart-remove:hover { color: var(--danger); }
.skeleton-row { height: 126px; border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.summary { position: sticky; top: calc(var(--header-h) + 20px); padding: 24px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.summary h3 { font-size: 20px; margin-bottom: 18px; }
.sum-items { display: grid; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sum-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.sum-item img { width: 48px; height: 48px; border-radius: 8px; }
.sum-item small { display: block; color: var(--muted); font-size: 12px; }
.sum-line { display: flex; justify-content: space-between; padding: 6px 0; color: var(--text-2); font-size: 14px; }
.sum-line.save { color: var(--teal); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); }
.sum-total span { font-weight: 700; }
.sum-total b { font: 800 28px var(--font-display); color: var(--gold-3); }
.coupon { display: flex; gap: 8px; margin: 16px 0 6px; }
.coupon input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 600 13px var(--font-mono); text-transform: uppercase; }
.coupon-msg { font-size: 12.5px; color: var(--muted); min-height: 18px; }
.coupon-msg.err { color: var(--danger); }
.coupon-msg.ok { color: var(--teal); }
.sum-actions { display: grid; gap: 10px; margin-top: 18px; }
.sum-note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: var(--muted); margin-top: 12px; }
.form-card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); margin-bottom: 18px; }
.form-card h2 { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; margin-bottom: 8px; }
.num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(212, 166, 89, .14); color: var(--gold); font: 700 13px var(--font-mono); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.field-grid.one { grid-template-columns: 1fr; }
.field-grid.four { grid-template-columns: repeat(4, 1fr); }
.field { display: grid; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field > span:first-child { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field em { font-style: normal; color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select, .input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text); font: 500 15px var(--font-body); outline: 0; transition: border-color .2s, box-shadow .2s;
}
.field textarea, textarea.input { height: auto; padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus, .input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212, 166, 89, .12); }
.field.invalid input { border-color: var(--danger); }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; }
.check a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.pay-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.pay-methods span { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-2); font: 600 12px var(--font-mono); letter-spacing: .06em; color: var(--text-2); background: var(--bg); }
.form-error { padding: 12px 14px; border-radius: 10px; background: rgba(228, 103, 122, .1); border: 1px solid rgba(228, 103, 122, .35); color: #f5b0ba; font-size: 14px; margin: 12px 0; }
.form-error.info { background: rgba(212, 166, 89, .08); border-color: var(--line-2); color: var(--gold-2); }
.pay-btn { margin-top: 8px; }
.pay-btn.is-loading { opacity: .7; pointer-events: none; }
.fine { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.turnstile-mock { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; margin: 16px 0; border-radius: 10px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }

/* Razorpay mock */
.rzp-mock { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(4, 4, 8, .75); backdrop-filter: blur(6px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.rzp-sheet { width: min(420px, 100%); border-radius: 18px; overflow: hidden; background: #fbfbfd; color: #1b1e24; box-shadow: var(--shadow); animation: pop .3s var(--ease); }
@keyframes pop { from { transform: translateY(16px) scale(.97); opacity: 0; } }
.rzp-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: linear-gradient(135deg, #151621, #1d1709); color: #fff; }
.rzp-head b { display: block; font-size: 15px; }
.rzp-head small { color: rgba(255, 255, 255, .65); font: 500 11px var(--font-mono); }
.rzp-amount { margin-left: auto; font: 800 20px var(--font-display); color: var(--gold-2); }
.rzp-body { padding: 20px; display: grid; gap: 10px; }
.rzp-body p { font-size: 14px; color: #4b5261; margin: 4px 0 8px; }
.rzp-tag { justify-self: start; padding: 5px 10px; border-radius: 6px; background: #eef1f7; color: #3d4a66; font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.rzp-body .btn-ghost { color: #1b1e24; border-color: #d6dae3; background: #fff; }
.rzp-body .btn-text { color: #6b7280; }

/* Purchase */
.purchase-wrap { padding-block: 40px 72px; min-height: 60vh; }
.confirming { text-align: center; padding: 100px 20px; }
.confirming h1 { font-size: 34px; margin: 26px 0 10px; }
.spinner { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--gold); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.purchase-head { display: flex; align-items: center; gap: 22px; margin: 26px 0 26px; }
.purchase-head h1 { font-size: clamp(34px, 4vw, 52px); font-weight: 800; margin: 8px 0 6px; }
.purchase-head p { margin: 0; }
.success-mark { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(63, 193, 165, .3), rgba(63, 193, 165, .08)); color: var(--teal); border: 1px solid rgba(63, 193, 165, .5); box-shadow: 0 0 40px -6px rgba(63, 193, 165, .5); animation: pop .5s var(--ease); }
.save-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin-bottom: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: linear-gradient(90deg, rgba(212, 166, 89, .08), transparent); }
.save-link b { display: block; margin-bottom: 4px; }
.save-link p { margin: 0; font-size: 14px; color: var(--muted); max-width: 70ch; }
.save-actions { display: flex; gap: 8px; flex-shrink: 0; }
.purchase-items { display: grid; gap: 16px; }
.p-item { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); animation: fadeUp .45s var(--ease) both; }
.p-item img { width: 140px; height: 140px; border-radius: 14px; }
.p-item h3 { font-size: 24px; font-weight: 700; }
.p-item .p-sub { color: var(--muted); font-size: 14px; margin: 4px 0 14px; }
.p-file { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); }
.p-file-meta { flex: 1; min-width: 0; }
.p-file-meta b { display: block; font: 600 14px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-file-meta small { color: var(--muted); font-size: 12.5px; }
.p-older { margin-top: 10px; }
.p-older summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }
.p-older .p-file { margin-top: 8px; background: transparent; }
.p-session { padding: 16px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--text-2); font-size: 14px; }
.p-session .btn { margin-top: 12px; }
.purchase-help { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.purchase-help > div { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.purchase-help svg { color: var(--gold); }
.purchase-help b { display: block; margin: 10px 0 4px; }
.purchase-help p { margin: 0; font-size: 14px; color: var(--muted); }
.purchase-help a { color: var(--gold-2); }
.narrow-wrap { width: min(760px, 100% - 48px); margin-inline: auto; padding-block: 48px 80px; }
.recent-orders { margin-top: 20px; }
.recent-orders a { display: flex; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; font-size: 14px; }
.recent-orders a:hover { border-color: var(--gold); }

/* Free page */
.free-page { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; padding-block: 40px 80px; }
.free-media { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
.free-info h1 { font-size: clamp(38px, 4.4vw, 58px); font-weight: 800; margin: 14px 0 6px; }
.free-info > p { color: var(--text-2); }
.free-done { padding: 26px; border-radius: var(--radius-lg); border: 1px solid rgba(63, 193, 165, .45); background: linear-gradient(180deg, rgba(63, 193, 165, .08), transparent); }
.free-done h2 { font-size: 26px; margin: 16px 0 6px; }
.free-done .p-file { margin-top: 16px; }

/* Content pages */
.about-hero { padding: 72px 0; border-bottom: 1px solid var(--line); background: radial-gradient(700px 400px at 85% 30%, rgba(212, 166, 89, .15), transparent 70%); }
.about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.about-hero h1 { font-size: clamp(42px, 5.4vw, 76px); font-weight: 800; letter-spacing: -.03em; margin: 16px 0 22px; }
.about-emblem { width: 100%; max-width: 420px; justify-self: center; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .8)) drop-shadow(0 0 50px rgba(212, 166, 89, .25)); animation: float 8s ease-in-out infinite; }
.about-cta { text-align: center; }
.about-cta h2 { font-size: 40px; margin-bottom: 10px; }
.faq-group { margin-bottom: 36px; }
.faq-group h2 { font-size: 22px; margin-bottom: 14px; color: var(--gold-2); }
.faq { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); transition: border-color .2s; }
.faq[open] { border-color: var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 400 24px var(--font-body); color: var(--gold); transition: transform .3s var(--ease); }
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { padding: 0 20px 18px; margin: 0; color: var(--text-2); }
.faq-more { display: flex; align-items: center; justify-content: space-between; padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line-2); }
.faq-more p { margin: 0; font-weight: 600; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; padding-block: 48px 80px; align-items: start; }
.contact-card { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; }
.contact-card svg { color: var(--gold); flex-shrink: 0; }
.contact-card b { display: block; }
.contact-card a { color: var(--gold-2); }
.contact-card span { color: var(--muted); font-size: 14px; }
.policy-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-block: 48px 80px; }
.policy-nav { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; display: grid; gap: 4px; }
.policy-nav h4 { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 8px; }
.policy-nav a { padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--text-2); }
.policy-nav a.is-on { background: rgba(212, 166, 89, .1); color: var(--gold-3); }
.policy { max-width: 760px; }
.policy h2 { font-size: 22px; margin: 32px 0 10px; }
.policy p, .policy li { color: var(--text-2); }
.draft-note { padding: 12px 16px; border-radius: 10px; border: 1px dashed var(--gold); color: var(--gold-2); font-size: 14px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 40px; padding-top: 64px; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), #05060a); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 48px; }
.footer-grid h4 { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 16px; }
.footer-grid > div > a:not(.brand) { display: block; padding: 5px 0; color: var(--text-2); font-size: 14px; transition: color .2s; }
.footer-grid > div > a:not(.brand):hover { color: var(--gold-3); }
.footer-brand p { color: var(--muted); font-size: 14px; max-width: 38ch; margin: 18px 0 12px; }
.secure-note { display: flex; align-items: center; gap: 8px; color: var(--teal) !important; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 110px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- Cart drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 85; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(4, 4, 8, .65); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--bg-2); border-left: 1px solid var(--line-2); transform: translateX(100%); transition: transform .4s var(--ease); }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 22px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: grid; gap: 12px; align-content: start; }
.drawer-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; animation: fadeUp .35s var(--ease) both; }
.drawer-item img { width: 64px; height: 64px; border-radius: 10px; }
.drawer-item b { display: block; font-size: 15px; line-height: 1.25; }
.drawer-item small { color: var(--muted); font-size: 12px; }
.drawer-item .price b { font-size: 15px; }
.drawer-foot { padding: 18px 20px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-empty { text-align: center; padding: 60px 10px; color: var(--muted); }
.drawer-empty b { display: block; color: var(--text); font: 700 20px var(--font-display); margin-bottom: 6px; }

/* ---------- Player ---------- */
.player { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(14, 15, 22, .92); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); animation: rise .4s var(--ease); }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.player-inner { display: flex; align-items: center; gap: 14px; height: 72px; width: 100%; padding: 0 14px; }
.player-art img { width: 48px; height: 48px; border-radius: 10px; }
.player-meta { width: 200px; min-width: 0; line-height: 1.25; }
.player-meta b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-meta small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.player-toggle { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--gold-2); color: #1a1206; }
.player-toggle span { display: grid; place-items: center; }
.player-wave { flex: 1; height: 40px; cursor: pointer; min-width: 60px; }
.player-wave canvas { width: 100%; height: 100%; display: block; }
.player-time { font: 500 12px var(--font-mono); color: var(--muted); width: 84px; text-align: right; }
.player-add.is-in { background: transparent; color: var(--teal); border-color: rgba(63, 193, 165, .5); box-shadow: none; }

/* Toasts */
.toasts { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 95; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100% - 32px); }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; background: #f1ead9; color: #15110a; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); animation: toastIn .35s var(--ease); pointer-events: auto; }
.toast a { text-decoration: underline; margin-left: 6px; }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(8px); opacity: 0; } }

/* ---------- Academy hero ---------- */
.hero h1 .w-create { background: linear-gradient(100deg, var(--teal) 0%, #7fe0c8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
.hero-academy .hero-stats b { font-size: 20px; }
.hero-emblem-stage { position: relative; aspect-ratio: 1; width: min(100%, 600px); justify-self: center; display: grid; place-items: center; isolation: isolate; }
/* Soft aura that slowly breathes behind the emblem, plus a rare gentle energy ring. */
.hero-emblem-stage::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; z-index: 0; background: radial-gradient(circle, rgba(212, 166, 89, .22) 0%, rgba(63, 193, 165, .10) 42%, transparent 70%); filter: blur(18px); animation: auraBreathe 11s ease-in-out infinite; }
.hero-emblem-stage::after { content: ''; position: absolute; inset: 17%; border-radius: 50%; z-index: 1; border: 1px solid rgba(233, 201, 139, .35); box-shadow: 0 0 24px rgba(233, 201, 139, .18), inset 0 0 24px rgba(63, 193, 165, .10); opacity: 0; animation: energyRing 14s ease-out infinite 4s; pointer-events: none; }
@keyframes auraBreathe { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes energyRing { 0% { opacity: 0; transform: scale(.98); } 4% { opacity: .9; } 22% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; transform: scale(1.22); } }
.hero-emblem-main { width: 64%; position: relative; z-index: 2; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .85)) drop-shadow(0 0 60px rgba(212, 166, 89, .35)); animation: emblemFloat 9s ease-in-out infinite; }
@keyframes emblemFloat { 50% { translate: 0 -8px; } }
.orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-2); }
.orbit.o1 { inset: 2%; border-style: dashed; animation: spinSlow2 90s linear infinite; }
.orbit.o2 { inset: 13%; border-color: rgba(63, 193, 165, .25); animation: spinSlow2 60s linear infinite reverse; }
.orbit.o3 { inset: -6%; border-color: rgba(212, 166, 89, .08); }
.orbit.o1::after, .orbit.o2::after { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.orbit.o2::after { background: var(--teal); box-shadow: 0 0 14px var(--teal); top: auto; bottom: -5px; }
@keyframes spinSlow2 { to { transform: rotate(360deg); } }
.orbit-chip { position: absolute; z-index: 3; animation: chipFloat 10s ease-in-out infinite; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(14, 15, 22, .82); backdrop-filter: blur(12px); box-shadow: var(--shadow); transition: transform .3s var(--ease), border-color .3s; }
.orbit-chip:hover { transform: translateY(-3px); border-color: var(--gold); }
.orbit-chip b { font: 800 15px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-3); }
.orbit-chip small { font-size: 12px; color: var(--muted); }
.orbit-chip.c1 { left: 0; top: 2%; }
.orbit-chip.c2 { right: 0; top: 2%; animation-delay: -3.3s; }
.orbit-chip.c2 b { color: #8ee6cf; }
.orbit-chip.c3 { left: 50%; bottom: -2%; margin-left: -72px; min-width: 144px; animation-delay: -6.6s; }
.orbit-chip.c3 b { color: #b9b6ff; }
@keyframes chipFloat { 50% { translate: 0 -6px; } }

/* ---------- Pillars ---------- */
.section-head.center { justify-content: center; text-align: center; }
.section-head.center h2 { max-width: 20ch; margin-inline: auto; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar { position: relative; overflow: hidden; padding: 34px 30px 30px; border-radius: 26px; border: 1px solid var(--line-2); background: linear-gradient(170deg, var(--surface-2), var(--surface)); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.pillar::before { content: ''; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, var(--pc), transparent 68%); opacity: .3; transition: opacity .4s, transform .6s var(--ease); }
.pillar:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--pc) 55%, transparent); box-shadow: 0 30px 70px -40px var(--pc); }
.pillar:hover::before { opacity: .5; transform: scale(1.15); }
.p-learn { --pc: #e9c98b; }
.p-create { --pc: #3fc1a5; }
.p-explore { --pc: #8f8cf2; }
.pillar-num { font: 600 12px var(--font-mono); letter-spacing: .2em; color: var(--pc); }
.pillar h3 { font-size: clamp(34px, 3.3vw, 46px); font-weight: 800; letter-spacing: 0; text-transform: uppercase; margin: 10px 0 12px; color: var(--pc); }
.pillar > p { color: var(--text-2); font-size: 16px; min-height: 3.2em; }
.pillar-links { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--line); }
.pillar-links a { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14.5px; color: var(--text-2); transition: color .2s, padding .3s var(--ease); }
.pillar-links a:hover { color: var(--text); padding-left: 8px; }
.pillar-links a svg { color: var(--pc); }
.pillar-eyebrow { display: block; margin: 16px 0 -4px; }

/* ---------- Masterclass cards ---------- */
.mc-list { display: grid; gap: 18px; grid-template-columns: 1.4fr 1fr; }
.mc-list:has(> :only-child), .mc-list.stack { grid-template-columns: 1fr; }
.mc-list.stack .mc-wide { grid-template-columns: .7fr 1.3fr; }
.mc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mc-card { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.mc-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 50px -24px var(--accent); }
.mc-art { display: block; aspect-ratio: 16 / 8; overflow: hidden; }
.mc-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.mc-card:hover .mc-art img { transform: scale(1.05); }
.mc-date { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; justify-items: center; min-width: 70px; padding: 10px 10px 8px; border-radius: 14px; background: rgba(8, 8, 14, .82); border: 1px solid var(--line-2); backdrop-filter: blur(10px); line-height: 1; }
.mc-date b { font: 800 28px var(--font-display); color: var(--gold-3); }
.mc-date span { font: 700 12px var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-top: 4px; }
.mc-date small { font: 500 10px var(--font-mono); color: var(--muted); margin-top: 4px; }
.mc-body { display: flex; flex-direction: column; padding: 20px; }
.mc-when { font: 500 13px var(--font-mono); color: var(--text-2); margin: 2px 0 12px; }
.mc-wide { grid-template-columns: .95fr 1.05fr; grid-template-rows: none; }
.mc-wide .mc-art { aspect-ratio: auto; height: 100%; min-height: 280px; }
.mc-wide .mc-body { padding: 28px; justify-content: center; }
.mc-wide .card-title { font-size: 28px; }
.mc-wide .mc-date { left: 16px; right: auto; }
.mc-card.is-past .mc-art img { filter: grayscale(.55) brightness(.75); }
.mc-card .card-foot { margin-top: auto; }
.seats { position: relative; height: 6px; margin: 4px 0 18px; border-radius: 3px; background: var(--surface-3); }
.seats span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, var(--teal), var(--gold)); }
.seats em { position: absolute; top: 10px; right: 0; font: 500 11px var(--font-mono); font-style: normal; color: var(--muted); }
.seats.big { margin: 22px 0 28px; }

/* ---------- Course cards ---------- */
.course-card .card-art.wide { display: block; aspect-ratio: 16 / 10; }
.course-art-title { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; font: 800 21px/1.08 var(--font-display); color: #f4ecdb; text-shadow: 0 4px 20px rgba(0, 0, 0, .7); }
.course-art-title small { display: block; margin-bottom: 6px; font: 700 10.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.course-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.course-meta span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 11px var(--font-mono); color: var(--text-2); }
.course-meta span:first-child { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.grid-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- 1-on-1 ---------- */
.classes-band { margin: 32px 0; padding: 80px 0; border-block: 1px solid var(--line); background: radial-gradient(800px 400px at 0% 50%, rgba(212, 166, 89, .14), transparent 70%), radial-gradient(700px 400px at 100% 50%, rgba(30, 140, 126, .16), transparent 70%), var(--bg-2); }
.classes-band-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.classes-band h2 { font-size: clamp(34px, 4vw, 54px); font-weight: 800; margin: 14px 0 16px; }
.topic-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.topic-grid li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px 20px; background: var(--bg-2); transition: background .2s; }
.topic-grid li:hover { background: var(--surface); }
.topic-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.topic-n { grid-row: span 2; font: 600 12px var(--font-mono); color: var(--gold); padding-top: 3px; }
.topic-grid b { font: 700 16px var(--font-display); }
.topic-grid small { color: var(--muted); font-size: 13px; }
.topic-grid.wide { grid-template-columns: repeat(4, 1fr); }
.topic-grid.wide li:last-child:nth-child(odd) { grid-column: span 2; }
.class-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.class-card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); scroll-margin-top: 110px; transition: border-color .3s, transform .4s var(--ease); }
.class-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.class-card.is-highlight { border-color: var(--gold); box-shadow: 0 0 60px -30px var(--gold); }
.class-card:target { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(63, 193, 165, .25); }
.class-flag { position: absolute; top: -12px; left: 22px; padding: 5px 10px; border-radius: 999px; background: var(--gold-2); color: #1a1206; font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.class-card h3 { font-size: 24px; font-weight: 800; margin: 12px 0 4px; }
.class-sub { color: var(--accent); font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.class-card .card-desc { -webkit-line-clamp: 4; }
.check-list.one { grid-template-columns: 1fr !important; margin: 4px 0 20px; }
.class-card .card-foot { margin-top: auto; }
.steps-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.steps-row li { padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.steps-row span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(212, 166, 89, .14); color: var(--gold); font: 700 14px var(--font-mono); margin-bottom: 16px; }
.steps-row b { display: block; font: 700 18px var(--font-display); margin-bottom: 6px; }
.steps-row p { margin: 0; color: var(--muted); font-size: 14px; }
.narrow-inner { max-width: 860px; }

/* ---------- Teacher ---------- */
.teacher { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.teacher-media { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 440px; border-radius: 28px; border: 1px solid var(--line-2); background: radial-gradient(circle at 50% 40%, rgba(212, 166, 89, .18), transparent 60%), var(--surface); }
.teacher-media img { width: 72%; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .8)); }
.teacher-tag { position: absolute; left: 18px; bottom: 18px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(8, 8, 14, .8); font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--gold-2); }
.teacher-copy h2 { font-size: clamp(32px, 3.8vw, 48px); font-weight: 800; margin: 14px 0 16px; }
.teacher-copy .check-list { margin: 20px 0 24px; }
.teacher-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: linear-gradient(160deg, rgba(212, 166, 89, .08), transparent 60%), var(--surface); }
.teacher-card img { width: 72px; height: 72px; flex-shrink: 0; }
.teacher-card b { display: block; font: 800 24px var(--font-display); margin: 6px 0 6px; }
.teacher-card p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.teacher-card.compact { padding: 20px; }
.teacher-card.compact img { width: 52px; height: 52px; }
.teacher-card.compact b { font-size: 20px; }

/* ---------- Education pages ---------- */
.edu-hero { background: radial-gradient(800px 320px at 85% 0%, rgba(212, 166, 89, .18), transparent 70%), radial-gradient(600px 300px at 0% 100%, rgba(30, 140, 126, .14), transparent 70%); }
.edu-hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: end; }
.edu-points { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 22px 0 0; }
.edu-points li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; }
.edu-points svg { color: var(--teal); }
.edu-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line-2); background: linear-gradient(90deg, rgba(212, 166, 89, .1), transparent); }
.edu-cta h2 { font-size: 28px; margin-bottom: 6px; }
.edu-cta p { margin: 0; }
.course-trailer .pd-video-frame { aspect-ratio: 16 / 10; }
.course-stats { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.course-stats li { padding: 16px; border-right: 1px solid var(--line); }
.course-stats li:last-child { border-right: 0; }
.course-stats b { display: block; font: 700 20px var(--font-display); color: var(--gold-3); }
.course-stats span { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.pd-block.tight { margin: 24px 0 0; }
.pd-block.tight h2 { font-size: 22px; }
.module { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); overflow: hidden; }
.module summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }
.module summary::-webkit-details-marker { display: none; }
.module summary b { font: 700 17px var(--font-display); }
.module summary em { margin-left: auto; font: 500 12px var(--font-mono); font-style: normal; color: var(--muted); }
.module-n { font: 600 12px var(--font-mono); color: var(--gold); }
.module ol { list-style: none; margin: 0; padding: 0 0 8px; border-top: 1px solid var(--line); }
.module li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; font-size: 14.5px; color: var(--text-2); }
.module li em { margin-left: auto; font: 500 12px var(--font-mono); font-style: normal; color: var(--muted); }
.lesson-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--muted); flex-shrink: 0; }
.module li .pill { margin-left: 4px; }
.agenda { margin: 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: 10px; }
.agenda li { counter-increment: a; display: flex; gap: 14px; align-items: center; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-2); }
.agenda li::before { content: counter(a, decimal-leading-zero); font: 600 12px var(--font-mono); color: var(--gold); }

/* ---------- Store / freebies additions ---------- */
.store-hero { --accent: #3fc1a5; }
.freebies-hero { --accent: #8f8cf2; }
.cat-rail-6 { grid-template-columns: repeat(4, 1fr); }
.filter-promo { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--teal); }
.filter-promo b { display: block; color: var(--text); font-size: 14px; }
.filter-promo small { color: var(--muted); font-size: 12px; }
.chip-row.always { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip em { font: 500 11px var(--font-mono); font-style: normal; opacity: .6; margin-left: 4px; }
.why-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .orbit-chip { padding: 9px 14px; }
  .orbit-chip small { display: none; }
  .orbit-chip.c3 { margin-left: -56px; min-width: 112px; }
  .main-nav > a { padding: 10px 9px; font-size: 13.5px; }
  .header-search { width: 200px; }
  .header-search:focus-within { width: 220px; }
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cards > :nth-child(4) { display: none; }
  .grid-store > :nth-child(4) { display: flex; }
}
@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .main-nav, .header-search { display: none; }
  .search-mobile, .menu-btn { display: inline-grid; }
  .hero { padding: 48px 0 64px; }
  .hero-grid, .spotlight-grid, .about-grid, .free-page, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-stack { height: 380px; max-width: 520px; width: 100%; margin: 0 auto; }
  .cat-rail { grid-template-columns: repeat(2, 1fr); }
  .grid-cards, .grid-store, .grid-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars, .mc-list, .classes-band-grid, .teacher, .edu-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .mc-grid, .class-grid, .steps-row, .topic-grid.wide { grid-template-columns: 1fr 1fr; }
  .mc-list.stack .mc-wide { grid-template-columns: .8fr 1.2fr; }
  .topic-grid.wide li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero-emblem-stage { width: min(100%, 500px); }
  .orbit-chip.c3 { bottom: -2%; }
  .teacher-media { max-width: 320px; }
  .grid-cards > :nth-child(4) { display: flex; }
  .store-layout { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
  .filters { display: none; }
  .chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-right: -24px; padding-right: 24px; }
  .chip-row::-webkit-scrollbar { display: none; }
  .store-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-right { margin-left: 0; justify-content: space-between; }
  .pd-grid, .pd-details { grid-template-columns: 1fr; gap: 32px; }
  .pd-media, .free-media { position: static; }
  .course-banner { grid-template-columns: 1fr; }
  .course-art { order: -1; height: 240px; }
  .course-art img { mask-image: linear-gradient(0deg, transparent, #000 50%); -webkit-mask-image: linear-gradient(0deg, transparent, #000 50%); }
  .course-copy { padding: 8px 28px 36px; }
  .why { grid-template-columns: 1fr 1fr; }
  .free-row { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .policy-layout { grid-template-columns: 1fr; gap: 24px; }
  .policy-nav { position: static; display: flex; overflow-x: auto; gap: 6px; }
  .policy-nav h4 { display: none; }
  .policy-nav a { white-space: nowrap; border: 1px solid var(--line); }
  .sticky-buy { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(14, 15, 22, .94); backdrop-filter: blur(16px); box-shadow: var(--shadow); transform: translateY(140%); transition: transform .4s var(--ease); }
  .sticky-buy.is-shown { transform: none; }
  body.player-open .sticky-buy { bottom: 96px; }
  .sticky-buy img { border-radius: 8px; }
  .sticky-buy > div { flex: 1; min-width: 0; line-height: 1.2; }
  .sticky-buy > div b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-buy .price b { font-size: 15px; }
  .player-meta { width: 130px; }
  .player-add { display: none; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .section { padding-block: 40px; }
  .brand-word b { font-size: 15px; }
  .header-inner { gap: 10px; }
  .header-actions { gap: 0; }
  .brand img { width: 38px; height: 38px; }
  .hero h1 { font-size: 44px; }
  .hero-stats { gap: 22px; }
  .hero-stats b { font-size: 19px; }
  .hero-stack { height: 300px; }
  .hero-cta .btn { flex: 1; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .cat-rail { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-tile { min-height: 124px; padding: 16px; }
  .cat-tile b { font-size: 16px; }
  .cat-tile small { display: none; }
  .cat-arrow { display: none; }
  .grid-cards, .grid-store { gap: 12px; }
  .grid-courses, .mc-grid, .class-grid, .steps-row, .topic-grid, .topic-grid.wide, .cat-rail-6, .why-3 { grid-template-columns: 1fr; }
  .cat-rail-6 { grid-template-columns: 1fr 1fr; }
  .topic-grid.wide li:last-child:nth-child(odd) { grid-column: auto; }
  .mc-wide, .mc-list.stack .mc-wide { grid-template-columns: 1fr; }
  .mc-wide .mc-art { min-height: 0; aspect-ratio: 16 / 8; }
  .mc-wide .mc-body { padding: 20px; }
  .mc-wide .card-title { font-size: 22px; }
  .pillar { padding: 26px 22px 22px; }
  .orbit-chip { padding: 9px 12px; }
  .orbit-chip b { font-size: 12px; }
  .orbit-chip small { display: none; }
  .orbit-chip.c3 { margin-left: -52px; min-width: 104px; }
  .edu-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  .teacher-card { flex-direction: column; }
  .course-art-title { font-size: 20px; }
  .card-body { padding: 12px; }
  .card-title { font-size: 15px; }
  .card-desc { display: none; }
  .card-meta { font-size: 9px; gap: 6px; }
  .card-meta span + span { display: none; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .card-foot .btn { width: 100%; --h: 36px; padding: 0 10px; font-size: 12.5px; }
  .chip-row { margin-right: -16px; padding-right: 16px; }
  .card-play { opacity: 1; transform: none; width: 42px; height: 42px; right: 10px; bottom: 10px; }
  .badge { top: 10px; left: 10px; font-size: 9px; padding: 5px 8px; }
  .price b { font-size: 16px; }
  .spotlight { padding: 48px 0; }
  .spec-row li { min-width: 50%; border-bottom: 1px solid var(--line); }
  .spot-buy .btn { flex: 1; }
  .course-copy { padding: 4px 20px 28px; }
  .why { grid-template-columns: 1fr; }
  .free-card { flex-direction: column; align-items: flex-start; }
  .free-card img { width: 100%; height: auto; aspect-ratio: 1; }
  .pd-info h1 { font-size: 38px; }
  .pd-trust, .check-list, .check-list.compact { grid-template-columns: 1fr; }
  .pd-buy { flex-direction: column; align-items: stretch; }
  .pd-buy-actions .btn { flex: 1; }
  .pd-player { padding: 10px; gap: 10px; }
  .pd-player .waveform span:nth-child(odd) { display: none; }
  .field-grid, .field-grid.four { grid-template-columns: 1fr; }
  .form-card { padding: 20px; }
  .cart-row { grid-template-columns: 72px 1fr; }
  .cart-row img { width: 72px; height: 72px; }
  .cart-row-right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .save-link { flex-direction: column; align-items: stretch; }
  .p-item { grid-template-columns: 1fr; }
  .p-item img { width: 88px; height: 88px; }
  .p-file { flex-wrap: wrap; }
  .p-file .btn { width: 100%; }
  .purchase-help { grid-template-columns: 1fr; }
  .purchase-head { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .player { left: 8px; right: 8px; bottom: 8px; }
  .player-inner { gap: 10px; padding: 0 10px; height: 64px; }
  .player-meta { width: auto; flex: 1; }
  .player-wave { display: none; }
  .player-time { width: auto; }
  .player-art img { width: 42px; height: 42px; }
  .toasts { bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Full Course ---------- */
.fullcourse-hero { background: radial-gradient(900px 360px at 80% 0%, rgba(212, 166, 89, .24), transparent 70%), radial-gradient(600px 300px at 0% 100%, rgba(63, 193, 165, .14), transparent 70%); }
.fc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; list-style: none; padding: 0; margin: 28px 0 0; border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; background: rgba(8, 8, 14, .4); }
.fc-stats li { padding: 18px 20px; border-right: 1px solid var(--line); }
.fc-stats li:last-child { border-right: 0; }
.fc-stats b { display: block; font: 800 34px/1.1 var(--font-display); color: var(--gold-3); }
.fc-stats b .price b { font-size: 26px; }
.fc-stats span { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.tba { font: 600 13px var(--font-mono) !important; color: var(--text-2) !important; text-transform: none !important; letter-spacing: 0 !important; }
.fc-stats b:has(.tba) { padding-top: 12px; line-height: 1.2; }
.compare { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.compare-item { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); transition: border-color .3s, transform .4s var(--ease); }
a.compare-item:hover { border-color: var(--line-2); transform: translateY(-4px); }
.compare-item b { font: 700 20px/1.2 var(--font-display); }
.compare-item p { color: var(--muted); font-size: 14px; margin: 0; flex: 1; }
.compare-item em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 600; font-size: 13px; color: var(--gold-2); }
.compare-item.is-current { border-color: var(--gold); background: linear-gradient(170deg, rgba(212, 166, 89, .12), transparent 60%), var(--surface); box-shadow: 0 0 60px -30px var(--gold); }
.compare-item.is-current em { color: var(--teal); }
.fc-pending { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding: 36px; border-radius: 26px; border: 1px dashed var(--line-2); background: var(--bg-2); }
.fc-pending h2 { font-size: clamp(28px, 3vw, 38px); margin: 12px 0 10px; }
.fc-pending ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fc-pending li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14.5px; }
.fc-pending li em { margin-left: auto; font: 500 11px var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.fc-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--gold); flex-shrink: 0; }
.fc-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fc-promo { border-color: var(--gold); transition: transform .4s var(--ease); }
.fc-promo:hover { transform: translateY(-3px); }
.fc-note { margin-top: 20px; padding: 16px 20px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--text-2); font-size: 14.5px; }
.fc-note a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) {
  .compare { grid-template-columns: 1fr 1fr; }
  .fc-pending, .fc-lists { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fc-stats { grid-template-columns: 1fr 1fr; }
  .fc-stats li:nth-child(2) { border-right: 0; }
  .fc-stats li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .compare { grid-template-columns: 1fr; }
  .fc-pending { padding: 22px; }
}
.mega-item.mega-all { grid-column: 1 / -1; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; margin-bottom: 4px; }

/* =====================================================================
   Refinement pass — restraint, hierarchy, real products
   ===================================================================== */

/* ---- Hero: emblem as a light source, labels on a slow orbit ---- */
.hero-emblem-stage { container-type: inline-size; width: min(100%, 560px); --r: calc(29cqw + 74px); }
.hero-emblem-stage::before, .hero-emblem-stage::after { content: none; }
.hero-emblem-main { width: 58cqw; animation: none; z-index: 2; filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .8)); }
.aura { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; translate: -50% -50%; }
.aura-outer { width: 100cqw; z-index: 0; background: radial-gradient(circle, rgba(233, 201, 139, .15) 0%, rgba(212, 166, 89, .07) 30%, rgba(63, 193, 165, .035) 50%, transparent 68%); animation: auraOuter 13s ease-in-out infinite; }
.aura-core { width: 60cqw; z-index: 3; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 232, 180, .10) 0%, rgba(233, 201, 139, .05) 40%, transparent 68%); animation: auraCore 8.5s ease-in-out infinite; }
@keyframes auraOuter { 0%, 100% { scale: .94; opacity: .75; } 50% { scale: 1.06; opacity: 1; } }
@keyframes auraCore { 0%, 100% { opacity: .35; scale: .97; } 45% { opacity: 1; scale: 1.02; } }
.orbit-path { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(233, 201, 139, .07); pointer-events: none; }
.orbit-ring { position: absolute; inset: 0; z-index: 4; animation: orbitSpin 26s linear infinite; pointer-events: none; }
.orbit-chip { position: absolute; left: 50%; top: 50%; width: 0; height: 0; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; transform: rotate(var(--a)) translateX(var(--r)); pointer-events: auto; }
.orbit-chip:hover { transform: rotate(var(--a)) translateX(var(--r)); }
.orbit-chip span { position: absolute; left: 0; top: 0; translate: -50% -50%; display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(233, 201, 139, .22); background: rgba(12, 13, 19, .72); font: 700 11.5px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-3); transform: rotate(calc(-1 * var(--a))); animation: orbitCounter 26s linear infinite; transition: border-color .3s, color .3s; }
.orbit-chip:hover span { border-color: var(--gold); color: #fff; }
@keyframes orbitSpin { to { rotate: 360deg; } }
@keyframes orbitCounter { to { rotate: -360deg; } }
.hero-glow { opacity: .3; }
.hero-glow.g1 { animation-duration: 24s; }
.hero-glow.g2 { animation-duration: 30s; }
.hero-academy { padding: 64px 0 80px; }

/* ---- Restraint: navigation, type scale, surfaces ---- */
.main-nav > a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.main-nav > a.is-active::after { bottom: 2px; height: 1px; }
.section { padding-block: 64px; }
.section-head h2, .split-head h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; margin: 0; }
.page-hero { padding: 48px 0 36px; }
.page-hero h1 { font-size: clamp(36px, 4.4vw, 56px); }
.page-hero.plain { background: none; }
.btn-gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 22px -12px rgba(212, 166, 89, .6); }
.btn-teal { box-shadow: none; }
.btn-teal:hover { box-shadow: 0 8px 22px -12px rgba(63, 193, 165, .6); }
.split-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fine-note { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.topic-line { margin: 18px 0 0; font: 500 13px/1.8 var(--font-mono); letter-spacing: .04em; color: var(--text-2); }

/* Product cards: artwork first, quiet chrome */
.card { border-radius: 12px; background: var(--surface); border-color: var(--line); }
.card:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--line-2); }
.card:hover .card-art img { transform: scale(1.03); filter: none; }
.card-body { padding: 16px 16px 18px; }
.card-meta { color: var(--muted); font-size: 10px; margin-bottom: 8px; }
.card-meta span:first-child { color: var(--gold-2); }
.card-title { font-size: 17px; margin-bottom: 2px; }
.card-sub { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.card .card-desc { font-size: 13px; margin-bottom: 14px; }
.card-foot { padding-top: 14px; border-top: 1px solid var(--line); }
.price b { font-size: 17px; }
.price-lg b { font-size: 30px; }
.price-xl b { font-size: clamp(38px, 4vw, 52px); }
.badge { border-radius: 6px; background: rgba(8, 8, 14, .8); }
.badge-free { background: var(--teal); color: #04211a; border-color: var(--teal); }
.free-tag { display: inline-block; padding: 4px 8px; border-radius: 4px; background: var(--teal); color: #04211a; font: 700 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---- Home: three ways in (typographic, no cards) ---- */
.ways { display: grid; grid-template-columns: .9fr 2fr; gap: 56px; align-items: start; }
.ways-intro h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.25; margin-top: 14px; max-width: 18ch; }
.ways-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.way { border-top: 1px solid var(--line-2); padding-top: 18px; }
.way-n { font: 600 11px var(--font-mono); color: var(--muted); letter-spacing: .14em; }
.way h3 { font-size: 26px; font-weight: 800; margin: 8px 0 16px; letter-spacing: .01em; }
.way ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.way a { color: var(--text-2); font-size: 15px; transition: color .2s; }
.way a:hover { color: var(--gold-3); }
.way em { font: 600 10px var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-left: 6px; }

/* ---- Flagship: Private Mentorship ---- */
.flagship { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(233, 201, 139, .035), transparent 60%), var(--bg-2); }
.flagship-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; padding-block: 88px; align-items: end; }
.flagship-title h2 { font-size: clamp(40px, 5vw, 72px); font-weight: 800; letter-spacing: -.03em; line-height: .95; margin: 16px 0 18px; }
.flagship-meta { font: 600 14px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); margin: 0; }
.flagship-meta span { color: var(--muted); margin: 0 6px; }
.flagship-body .lead { margin: 0; }
.flagship-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 30px; }
.flagship-buy .price { margin-right: 8px; }
.flagship-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding: 44px 40px; border: 1px solid rgba(233, 201, 139, .28); border-radius: 16px; background: linear-gradient(120deg, rgba(233, 201, 139, .06), transparent 55%), var(--surface); transition: border-color .3s; }
.flagship-card:hover { border-color: var(--gold); }
.flagship-card h2 { font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 12px; }
.flagship-card-side { display: grid; justify-items: end; gap: 10px; text-align: right; }
.flagship-card.slim { padding: 28px 32px; }
.flagship-card.slim h2 { font-size: 28px; margin-bottom: 0; }

/* ---- Rate card (services) ---- */
.ratecard { list-style: none; margin: 0; padding: 0; }
.ratecard li { display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.ratecard li:target { background: linear-gradient(90deg, rgba(63, 193, 165, .06), transparent); }
.ratecard b { display: block; font: 700 19px var(--font-display); margin-bottom: 4px; }
.ratecard span { color: var(--muted); font-size: 14px; }
.ratecard em { font: 700 20px var(--font-display); font-style: normal; color: var(--gold-3); white-space: nowrap; }

/* ---- Complete Bundle ---- */
.bundle-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bundle-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; border-radius: 12px; overflow: hidden; }
.bundle-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .3s; }
.bundle-mosaic:hover img { opacity: .85; }
.bundle-mosaic.large { grid-template-columns: repeat(4, 1fr); }
.bundle-copy h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 12px; }
.bundle-copy > p { color: var(--text-2); max-width: 48ch; }
.bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 22px 0 6px; }
.bundle-price small, .bundle-note { font-size: 13px; color: var(--muted); }
.bundle-note { display: block; margin-top: 4px; }

/* ---- Freebies ---- */
.free-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.free-item { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 12px; transition: border-color .3s; }
.free-item:hover { border-color: rgba(63, 193, 165, .45); }
.free-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.free-item b { display: block; font: 800 24px var(--font-display); margin: 12px 0 2px; }
.free-item small { color: var(--muted); font-size: 13px; }
.free-item p { color: var(--text-2); font-size: 14px; margin: 10px 0 14px; }
.free-pair.large .free-item { grid-template-columns: 1fr; align-items: start; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.free-pair.large .free-item img { border-radius: 12px; }

/* ---- Soon row, teacher ---- */
.soon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.soon-row a { padding-top: 18px; border-top: 1px solid var(--line); }
.soon-row p { font-size: 17px; color: var(--text-2); margin: 10px 0 0; }
.teacher-min { display: flex; gap: 24px; align-items: center; max-width: 760px; }
.teacher-min img { flex-shrink: 0; }
.teacher-quote { font: 500 clamp(18px, 1.8vw, 22px)/1.45 var(--font-body); color: var(--text); margin: 10px 0 12px; }

/* ---- Store ---- */
.cat-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 26px; }
.cat-links a { font-weight: 600; font-size: 14px; color: var(--text-2); padding-bottom: 4px; border-bottom: 1px solid transparent; }
.cat-links a:hover { color: var(--gold-3); border-color: var(--gold); }
.cat-links em { font: 500 11px var(--font-mono); font-style: normal; color: var(--muted); margin-left: 2px; }
.shelf { padding-block: 40px; }
.filter-promo { border-style: solid; }

/* ---- Product page ---- */
.pd-art { border-radius: 12px; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95), 0 0 0 1px var(--line); }
.pd-art.real { background: #06060b; }
.pd-info h1 { font-size: clamp(34px, 3.6vw, 50px); }
.product-glow { display: none; }
.included li img { border-radius: 6px; }
.included li a { color: var(--text); }
.included li a small { color: var(--muted); margin-left: 6px; }
.included li.included-total { background: rgba(255, 255, 255, .02); font-weight: 600; }

/* ---- Mentorship page ---- */
.mentorship-hero { padding: 56px 0 72px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(233, 201, 139, .04), transparent 70%); }
.mentorship-hero .eyebrow { display: block; margin-top: 28px; }
.mentorship-hero h1 { font-size: clamp(48px, 7.4vw, 112px); font-weight: 800; letter-spacing: -.035em; line-height: .92; margin: 18px 0 20px; }
.mentorship-meta { font: 600 clamp(14px, 1.4vw, 17px) var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); margin: 0; }
.mentorship-meta span { color: var(--muted); margin: 0 8px; }
.mentorship-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 40px; }
.mentorship-buy .price { margin-right: 12px; }
.mentorship-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start; }
.mentorship-body h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; margin-bottom: 16px; }
.mentorship-facts { margin: 0; border-top: 1px solid var(--line-2); }
.mentorship-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mentorship-facts dt { font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.mentorship-facts dd { margin: 0; font-weight: 600; }
.topic-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 32px; }
.topic-list li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.topic-list span { font: 600 11px var(--font-mono); color: var(--muted); }

/* ---- Coming-soon pages ---- */
.soon-page { min-height: 62vh; display: flex; align-items: center; padding: 56px 0 88px; }
.soon-page .eyebrow { display: block; margin-top: 36px; }
.soon-page h1 { font-size: clamp(48px, 7vw, 104px); font-weight: 800; letter-spacing: -.035em; line-height: .95; margin: 16px 0 22px; }
.soon-page .lead { font-size: clamp(18px, 1.8vw, 22px); color: var(--text); }
.soon-page .muted { max-width: 52ch; }

/* ---- Responsive for the refinement pass ---- */
@media (max-width: 980px) {
  .ways, .flagship-grid, .bundle-feature, .mentorship-body { grid-template-columns: 1fr; gap: 32px; }
  .flagship-grid { padding-block: 64px; }
  .ways-cols { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hero-emblem-stage { width: min(100%, 480px); }
}
@media (max-width: 640px) {
  .hero-emblem-stage { --r: calc(24cqw + 60px); }
  .hero-emblem-main { width: 48cqw; }
  .aura-outer { width: 86cqw; }
  .aura-core { width: 50cqw; }
  .orbit-chip span { padding: 7px 10px; font-size: 10.5px; letter-spacing: .16em; }
  .ways-cols { grid-template-columns: 1fr; gap: 24px; }
  .ratecard li { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .ratecard li > div { grid-column: 1 / -1; }
  .free-pair { grid-template-columns: 1fr; }
  .free-item { grid-template-columns: 110px 1fr; gap: 16px; }
  .free-item b { font-size: 20px; }
  .soon-row { grid-template-columns: 1fr; }
  .flagship-card { grid-template-columns: 1fr; padding: 28px 22px; }
  .flagship-card-side { justify-items: start; text-align: left; }
  .teacher-min { align-items: flex-start; }
  .teacher-min img { width: 56px; height: 56px; }
  .mentorship-buy .btn { flex: 1; }
  .bundle-mosaic.large { grid-template-columns: repeat(3, 1fr); }
}

.pd-art.wide img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 981px) and (max-width: 1180px) {
  .hero-emblem-stage { --r: calc(26cqw + 70px); }
  .hero-emblem-main { width: 52cqw; }
  .orbit-chip span { padding: 7px 11px; font-size: 11px; letter-spacing: .16em; }
}
@media (max-width: 400px) {
  .hero-emblem-stage { --r: calc(24cqw + 54px); }
  .orbit-chip span { padding: 6px 9px; font-size: 10px; letter-spacing: .14em; }
}
.flagship-grid > *, .bundle-feature > *, .ways > *, .free-item, .free-item > div, .mentorship-body > * { min-width: 0; }
.flagship-title h2, .mentorship-hero h1, .soon-page h1 { overflow-wrap: break-word; hyphens: none; }
@media (max-width: 1180px) {
  .header-search { display: none; }
  .search-mobile { display: inline-grid; }
}
@media (max-width: 980px) {
  .free-pair { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .flagship-title h2 { font-size: 40px; }
  .flagship-buy .btn { flex: 1 1 auto; }
}
@media (max-width: 340px) {
  .hero-emblem-stage { --r: calc(22cqw + 50px); }
  .hero-emblem-main { width: 44cqw; }
  .orbit-chip span { font-size: 9.5px; padding: 5px 8px; }
}
@media (max-width: 360px) {
  .header-inner { gap: 6px; }
  .brand { gap: 8px; }
  .brand img { width: 30px; height: 30px; }
  .brand-word b { font-size: 12.5px; letter-spacing: .1em; }
  .brand-word i { font-size: 8.5px; letter-spacing: .38em; }
  .header-actions .icon-btn { width: 36px; height: 36px; }
}
.flagship-card > * { min-width: 0; }
.flagship-card h2 { overflow-wrap: break-word; }
@media (max-width: 400px) { .flagship-card h2 { font-size: 30px; } }

/* =========================================================
   Atmospheric photography — section backgrounds, never cards
   bg-1: 1-on-1 Classes / Private Mentorship · bg-2: Store
   ========================================================= */
.atmo {
  position: relative; isolation: isolate; overflow: hidden; background: none; border-bottom: 0;
  /* slide up under the translucent sticky header so the photo starts at the very top */
  margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + var(--atmo-pad-top, 56px));
}
.atmo-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.atmo-bg picture { display: contents; }
.atmo-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--atmo-pos, 50% 45%);
  filter: blur(var(--atmo-blur, 1.2px)) saturate(.85) brightness(var(--atmo-bright, .82));
  transform: scale(1.06); transform-origin: 60% 40%;
  animation: atmoDrift 48s ease-in-out infinite alternate;
}
/* blue-black tint */
.atmo-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(17, 18, 27, .30), rgba(12, 12, 19, .2) 70%, transparent); }
/* readability wash + vignette + soft fade into the page */
.atmo-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(8, 8, 14, .35) 0%, transparent 18%, transparent var(--atmo-fade-from, 62%), var(--bg) 100%),
    linear-gradient(90deg, rgba(8, 8, 14, .86) 0%, rgba(8, 8, 14, .62) 28%, rgba(8, 8, 14, .12) 60%, rgba(8, 8, 14, .28) 100%),
    radial-gradient(140% 110% at 62% 38%, transparent 45%, rgba(8, 8, 14, .6) 100%);
}
@keyframes atmoDrift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1%, -.6%, 0); } }
@media (prefers-reduced-motion: reduce) { .atmo-bg img { animation: none; } }

.atmo .wrap { position: relative; }
.atmo .crumbs, .atmo .lead, .atmo .topic-line, .atmo .mentorship-meta { text-shadow: 0 1px 18px rgba(0, 0, 0, .55); }
.atmo .lead { color: #ddd6c6; }
.atmo .crumbs a, .atmo .crumbs span { color: #b9b3a6; }

/* 1-on-1 Classes hub + Private Mentorship */
.atmo-studio { --atmo-pos: 58% 42%; }
.page-hero.atmo-studio { --atmo-pad-top: 128px; padding-bottom: 150px; }
.mentorship-hero.atmo-studio { --atmo-pad-top: 88px; padding-bottom: 140px; }

/* Store: the photo sits behind the intro + category navigation and dissolves before the products */
.atmo-store { --atmo-pos: 50% 34%; --atmo-fade-from: 48%; --atmo-pad-top: 120px; padding-bottom: 150px; }
.atmo-store .cat-links { margin-top: 34px; }
.atmo-store .cat-links a { color: #e2dccd; }

@media (max-width: 980px) {
  .atmo-studio { --atmo-pos: 62% 40%; }
}
@media (max-width: 700px) {
  .atmo { --atmo-blur: 1.5px; --atmo-bright: .7; }
  .atmo-bg img { animation: none; transform: scale(1.04); }
  .atmo-bg::after {
    background:
      linear-gradient(180deg, rgba(8, 8, 14, .45) 0%, rgba(8, 8, 14, .62) 45%, rgba(8, 8, 14, .8) 80%, var(--bg) 100%),
      radial-gradient(120% 80% at 50% 30%, transparent 35%, rgba(8, 8, 14, .5) 100%);
  }
  .atmo-studio { --atmo-pos: 56% 35%; }
  .atmo-store { --atmo-pos: 44% 35%; }
  .page-hero.atmo-studio { --atmo-pad-top: 56px; padding-bottom: 72px; }
  .mentorship-hero.atmo-studio { --atmo-pad-top: 44px; padding-bottom: 80px; }
  .atmo-store { --atmo-pad-top: 52px; padding-bottom: 64px; }
}

/* =========================================================
   Freebie email capture
   ========================================================= */
.claim {
  width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto;
  border: 1px solid rgba(116, 115, 184, .16); border-radius: 22px; color: var(--text);
  background:
    radial-gradient(420px 220px at 50% -10%, rgba(74, 86, 176, .16), transparent 70%),
    linear-gradient(180deg, #0c0c13, #0a0a10);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4);
  overflow: auto;
}
.claim::backdrop { background: rgba(5, 5, 9, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.claim:not([open]):target { display: block; position: fixed; inset: 0; z-index: 90; } /* no-JS fallback */
.claim[open] { animation: claimIn .32s var(--ease); }
@keyframes claimIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .claim[open] { animation: none; } }
.claim-inner { position: relative; padding: 26px 26px 24px; }
.claim-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s; }
.claim-close:hover { color: var(--text); border-color: var(--line-2); }
.claim-head { display: flex; align-items: center; gap: 14px; padding-right: 44px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.claim-head img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.claim-head b { display: block; font: 700 17px/1.2 var(--font-display); }
.claim-head small { color: var(--muted); font-size: 13px; }
.claim h2 { font: 600 24px/1.2 var(--font-serif); letter-spacing: -.01em; margin: 8px 0 20px; }
.claim-form .field { margin-bottom: 14px; }
.claim-form .input { width: 100%; height: 50px; font-size: 16px; }
.claim-form .form-error { margin: 0 0 14px; }
.claim-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.claim-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.claim-ready { text-align: center; padding-top: 4px; }
.claim-ready h2 { margin-bottom: 22px; }
.claim-ok { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 50%; color: var(--teal); background: rgba(63, 193, 165, .1); box-shadow: 0 0 0 1px rgba(63, 193, 165, .28), 0 0 40px -6px rgba(63, 193, 165, .45); }
.claim-file { display: block; margin-top: 12px; font: 500 12px var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
.btn.is-busy { opacity: .7; pointer-events: none; }
@media (max-width: 480px) {
  .claim { width: calc(100% - 24px); border-radius: 18px; }
  .claim-inner { padding: 22px 18px 20px; }
  .claim h2 { font-size: 19px; }
}
/* keep "Mentorship" on one line on phones (Syne 800 is wide: ~8.9em for the word) */
@media (max-width: 640px) { .mentorship-hero h1 { font-size: min(64px, calc((100vw - 32px) / 9.2)); } }

/* =========================================================
   Home — the Academy entrance: positioning + directory + celestial emblem
   ========================================================= */
.home-hero { padding: clamp(28px, 4.5vh, 56px) 0 clamp(32px, 5vh, 64px); border-bottom: 0; min-height: calc(100svh - var(--header-h) - 28px); display: grid; align-items: center; }
.home-sky { position: absolute; inset: 0; background:
  radial-gradient(900px 620px at 74% 48%, rgba(40, 72, 160, .20), transparent 70%),
  radial-gradient(600px 400px at 10% 90%, rgba(30, 140, 126, .08), transparent 70%); }
.home-grid { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.home-copy { min-width: 0; }
.home-copy h1 { font-size: clamp(48px, 5.6vw, 88px); margin: 16px 0 18px; }
.home-copy .lead { max-width: 34ch; margin: 0 0 30px; color: #d9d2c2; }

.directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); max-width: 600px; }
.dir-item { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; column-gap: 12px; padding: 16px 18px 17px; background: rgba(11, 12, 18, .88); transition: background .25s, color .25s; }
.dir-item:hover { background: rgba(18, 19, 29, .95); }
.dir-tag { grid-column: 1; font: 600 10px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.dir-item b { grid-column: 1; font: 700 17px/1.2 var(--font-display); letter-spacing: -.005em; color: var(--text); }
.dir-item small { grid-column: 1; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.dir-item svg { grid-column: 2; grid-row: 1 / 4; align-self: center; color: var(--muted); transition: transform .25s var(--ease), color .25s; }
.dir-item:hover svg { transform: translateX(3px); color: var(--gold-2); }
.dir-item:hover b { color: var(--gold-3); }

.home-sign { display: flex; align-items: center; gap: 16px; padding: 22px 0 8px; border-top: 1px solid var(--line); }
.home-sign img { flex: none; border-radius: 50%; }
.home-sign p { margin: 0; flex: 1; color: var(--text-2); font-size: 14.5px; }
.home-sign b { color: var(--text); }

/* ---------- celestial emblem ---------- */
.celestial {
  container-type: inline-size; position: relative; justify-self: center; aspect-ratio: 1;
  width: min(100%, 640px, calc(100svh - 190px)); min-width: 280px;
  --e: 54cqw;                       /* emblem diameter */
  --r: calc(27cqw + 86px);          /* label orbit radius — always clear of the disc */
  --ro: calc(var(--r) + 42px);      /* outer planet path */
}
.celestial > * { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.halo { border-radius: 50%; aspect-ratio: 1; pointer-events: none; }
/* layer 3 — wide atmospheric halo */
.halo-far { width: 170cqw; z-index: 0; background: radial-gradient(circle, rgba(63, 75, 176, .16) 0%, rgba(40, 78, 190, .08) 32%, rgba(30, 60, 150, .03) 50%, transparent 66%); animation: haloBreathe 10s ease-in-out infinite; }
/* layer 1 — large soft blue aura */
.halo-glow { width: 118cqw; z-index: 1; background: radial-gradient(circle, rgba(120, 124, 204, .5) 0%, rgba(108, 115, 204, .34) 46%, rgba(90, 101, 200, .18) 56%, rgba(74, 83, 188, .08) 68%, rgba(61, 68, 172, .025) 82%, transparent 100%); filter: blur(4px); animation: haloBreathe 8s ease-in-out infinite -2s; }
/* layer 2 — bright inner aura hugging the disc (reads as an eclipse corona) */
.halo-core { width: calc(var(--e) + 12cqw); z-index: 2; background: radial-gradient(circle, rgba(226, 214, 192, .68) 0%, rgba(226, 214, 192, .66) 79%, rgba(226, 214, 192, .4) 84%, rgba(116, 119, 204, .18) 91%, transparent 100%); filter: blur(5px); animation: coreBreathe 8s ease-in-out infinite; }
/* slow radiating rays */
.corona { width: 96cqw; aspect-ratio: 1; z-index: 2; border-radius: 50%; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, transparent 0deg, rgba(226, 214, 192, .22) 1.2deg, transparent 3.4deg, transparent 9deg);
  -webkit-mask: radial-gradient(closest-side, transparent 55%, #000 58%, rgba(0, 0, 0, .5) 72%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 55%, #000 58%, rgba(0, 0, 0, .5) 72%, transparent 100%);
  filter: blur(1.5px); animation: coronaTurn 240s linear infinite, coronaPulse 9s ease-in-out infinite; }
.celestial-emblem { width: var(--e); height: auto; z-index: 3; filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .55)); }

@keyframes haloBreathe { 0%, 100% { opacity: .78; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes coreBreathe { 0%, 100% { opacity: .72; scale: 1; } 50% { opacity: 1; scale: 1.035; } }
@keyframes coronaTurn { to { rotate: 360deg; } }
@keyframes coronaPulse { 0%, 100% { opacity: .38; } 50% { opacity: .62; } }

/* paths */
.path { border-radius: 50%; aspect-ratio: 1; pointer-events: none; border: 1px solid rgba(226, 214, 192, .08); z-index: 1; }
.path-inner { width: calc(var(--e) + 40px); border-color: rgba(226, 214, 192, .06); }
.path-labels { width: calc(var(--r) * 2); border-color: rgba(233, 201, 139, .10); }
.path-outer { width: calc(var(--ro) * 2); border-style: dashed; border-color: rgba(226, 214, 192, .06); }

/* tiny bodies on their own slow orbits */
.sat { width: 0; height: 0; z-index: 4; translate: none; animation: orbitSpin var(--t) linear infinite; animation-delay: var(--delay); }
.sat .body { position: absolute; left: 0; top: 0; translate: -50% -50%; border-radius: 50%; transform: translateX(var(--sr)); }
.sat-a { --t: 64s; --delay: -14s; --sr: calc(var(--e) / 2 + 20px); }
.sat-b { --t: 150s; --delay: -95s; --sr: var(--ro); animation-direction: reverse; }
.sat-c { --t: 96s; --delay: -40s; --sr: var(--r); z-index: 4; }
.moon { width: 7px; height: 7px; background: radial-gradient(circle at 35% 32%, #eef3ff, #8ea7d2 55%, #2a3752 100%); box-shadow: 0 0 10px rgba(226, 214, 192, .55); }
.planet { width: 11px; height: 11px; background: radial-gradient(circle at 34% 30%, #f8e6bd, #c89a4c 52%, #3b2a12 100%); box-shadow: 0 0 14px rgba(233, 201, 139, .35); }
.spark { width: 4px; height: 4px; background: #e6eeff; box-shadow: 0 0 8px 1px rgba(226, 214, 192, .8); }

.stars { inset: 0; translate: none; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #dfe8ff; box-shadow: 0 0 6px rgba(226, 214, 192, .7); opacity: .35; animation: twinkle 8s ease-in-out infinite; animation-delay: calc(-1 * var(--d)); }
@keyframes twinkle { 0%, 100% { opacity: .18; } 50% { opacity: .7; } }

/* Learn / Create / Explore */
.label-ring { inset: 0; left: 0; top: 0; translate: none; width: 100%; height: 100%; z-index: 6; pointer-events: none; animation: orbitSpin 28s linear infinite; }
.orbit-label { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)); pointer-events: auto; }
.orbit-label span {
  position: absolute; left: 0; top: 0; translate: -50% -50%; display: block; white-space: nowrap;
  padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(226, 214, 192, .26);
  background: rgba(9, 10, 16, .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 700 13.5px/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-3);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9), 0 0 22px -8px rgba(108, 115, 204, .45);
  transform: rotate(calc(-1 * var(--a))); animation: orbitCounter 28s linear infinite; transition: border-color .3s, color .3s;
}
.orbit-label:hover span { border-color: var(--gold); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .halo, .corona, .sat, .stars i, .label-ring, .orbit-label span { animation: none !important; }
}

@media (max-width: 1180px) {
  .celestial { --r: calc(26cqw + 78px); }
  .orbit-label span { padding: 10px 17px; font-size: 12.5px; letter-spacing: .22em; }
}
@media (max-width: 980px) {
  .home-hero { min-height: 0; }
  .home-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-copy { text-align: left; }
  .celestial { order: -1; width: min(100%, 520px); min-width: 0; }
  .directory { max-width: none; }
}
@media (max-width: 640px) {
  .home-hero { padding: 12px 0 28px; }
  .home-copy h1 { font-size: clamp(36px, 11vw, 52px); margin: 6px 0 10px; }
  .home-copy .eyebrow { display: none; }
  .home-copy .lead { font-size: 16px; margin-bottom: 20px; }
  .celestial { width: min(100%, 310px); min-width: 0; --e: 44cqw; --r: calc(22cqw + 60px); }
  .path-outer, .sat-b { display: none; }
  .orbit-label span { padding: 8px 14px; font-size: 11px; letter-spacing: .2em; }
  .dir-item { padding: 13px 14px 14px; }
  .dir-item b { font-size: 15.5px; }
  .dir-item small { font-size: 12px; }
  .dir-item svg { display: none; }
  .home-sign { flex-wrap: wrap; }
}
@media (max-width: 370px) {
  .celestial { --r: calc(22cqw + 54px); }
  .orbit-label span { padding: 7px 11px; font-size: 10px; letter-spacing: .16em; }
  .directory { grid-template-columns: 1fr; }
}

/* =========================================================
   Store landing — four category portals
   ========================================================= */
.atmo-store { --atmo-fade-from: 34%; padding-bottom: 72px; }
.portals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.portal {
  --glow: color-mix(in srgb, var(--accent) 30%, transparent);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 460px; padding: 22px; border-radius: 24px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, .04));
  background:
    radial-gradient(110% 70% at 50% 26%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(14, 15, 22, .78), rgba(6, 7, 11, .94) 70%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.portal:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .95), 0 0 70px -30px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .07); }
.portal-bg { position: absolute; inset: 0; z-index: -1; }
.portal-motif { position: absolute; left: 50%; top: 34%; width: 118%; translate: -50% -50%; fill: none; stroke: var(--accent); stroke-width: 1; opacity: .16; transition: opacity .5s, scale .8s var(--ease); }
.portal-motif rect { fill: color-mix(in srgb, var(--accent) 45%, transparent); stroke: none; }
.portal:hover .portal-motif { opacity: .26; scale: 1.04; }

.portal-stage { position: absolute; left: 0; right: 0; top: 0; height: 64%; perspective: 900px; perspective-origin: 50% 40%; }
.portal-stage::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 4%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(10px); z-index: -1; }
.shot {
  position: absolute; left: 50%; top: 52%; width: 54%; aspect-ratio: 1; object-fit: cover; border-radius: 12px;
  translate: -50% -50%; transform-style: preserve-3d; backface-visibility: hidden;
  box-shadow: 0 34px 50px -22px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .09);
  transition: transform .7s var(--ease), filter .5s;
}
/* Sample Packs — a fanned deck */
.portal-sample-packs .s0 { transform: translateX(-38%) translateZ(-70px) rotateY(32deg); filter: brightness(.72); }
.portal-sample-packs .s2 { transform: translateX(38%) translateZ(-70px) rotateY(-32deg); filter: brightness(.72); }
.portal-sample-packs .s1 { transform: translateZ(30px); z-index: 2; }
.portal-sample-packs:hover .s0 { transform: translateX(-54%) translateZ(-60px) rotateY(26deg); filter: brightness(.85); }
.portal-sample-packs:hover .s2 { transform: translateX(54%) translateZ(-60px) rotateY(-26deg); filter: brightness(.85); }
.portal-sample-packs:hover .s1 { transform: translateZ(50px) translateY(-3%); }
/* Presets — two patches floating on a diagonal */
.portal-presets .s0 { transform: translate(-22%, -12%) rotateX(14deg) rotateZ(-9deg); filter: brightness(.8); }
.portal-presets .s1 { transform: translate(20%, 12%) rotateX(14deg) rotateZ(6deg) translateZ(40px); z-index: 2; }
.portal-presets:hover .s0 { transform: translate(-28%, -16%) rotateX(10deg) rotateZ(-12deg); filter: brightness(.92); }
.portal-presets:hover .s1 { transform: translate(24%, 14%) rotateX(10deg) rotateZ(8deg) translateZ(60px); }
/* MIDI — a single object standing on a reflective floor */
.portal-midi .s0 { width: 60%; transform: rotateX(16deg) rotateY(-20deg); -webkit-box-reflect: below 6px linear-gradient(transparent 62%, rgba(255, 255, 255, .16)); }
.portal-midi:hover .s0 { transform: rotateX(10deg) rotateY(-10deg) translateZ(30px); }
/* Plugins — hardware slabs stacked in isometric */
.portal-plugins .s0 { transform: translate(-14%, -16%) rotateX(38deg) rotateZ(-22deg); filter: brightness(.78); }
.portal-plugins .s1 { transform: translate(12%, 14%) rotateX(38deg) rotateZ(-22deg) translateZ(40px); z-index: 2; }
.portal-plugins:hover .s0 { transform: translate(-18%, -24%) rotateX(32deg) rotateZ(-20deg); filter: brightness(.9); }
.portal-plugins:hover .s1 { transform: translate(14%, 18%) rotateX(32deg) rotateZ(-20deg) translateZ(70px); }

.portal-text { position: relative; display: grid; gap: 4px; }
.portal-text em { font: 600 10.5px/1 var(--font-mono); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, #fff); }
.portal-text b { font: 800 clamp(22px, 1.8vw, 27px)/1.05 var(--font-display); white-space: nowrap; letter-spacing: -.02em; margin-top: 6px; }
.portal-text small { color: var(--text-2); font-size: 13.5px; line-height: 1.45; min-height: 2.9em; }
.portal-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.portal-go svg { transition: transform .3s var(--ease); }
.portal:hover .portal-go svg { transform: translateX(4px); }
.portals-more { margin: 26px 0 0; }

@media (prefers-reduced-motion: reduce) { .portal, .shot, .portal-motif { transition: none; } }
@media (max-width: 1180px) {
  .portals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal { min-height: 420px; }
}
@media (max-width: 640px) {
  .portals { grid-template-columns: 1fr; gap: 12px; margin-top: 26px; }
  .portal { min-height: 200px; padding: 18px; flex-direction: row; align-items: center; justify-content: flex-end; }
  .portal-stage { right: auto; width: 48%; height: 100%; }
  .portal-stage::after { bottom: 10%; }
  .portal-motif { left: 26%; top: 50%; width: 80%; }
  .portal-text { width: 50%; }
  .portal-text b { font-size: 21px; white-space: normal; }
  .portal-text small { min-height: 0; font-size: 12.5px; }
  .portal-go { margin-top: 8px; }
  .shot { width: 62%; }
  .portal-midi .s0 { width: 62%; -webkit-box-reflect: unset; }
}

/* =========================================================
   Protonix — artist presence (Spotify + official profiles)
   ========================================================= */
.presence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.presence-copy h2 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.025em; line-height: 1.05; margin: 12px 0 14px; }
.presence-copy .lead { margin: 0 0 26px; }
.presence-player { position: relative; border-radius: 20px; padding: 1px; background: linear-gradient(160deg, rgba(116, 119, 204, .28), rgba(233, 201, 139, .12) 45%, rgba(255, 255, 255, .04)); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 80px -40px rgba(90, 101, 204, .45); }
.presence-player iframe { display: block; width: 100%; height: 452px; border: 0; border-radius: 19px; background: #0b0b12; }
.social-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.social-links a { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(11, 12, 19, .6); color: var(--text-2); transition: border-color .25s, color .25s, background .25s; min-width: 0; }
.social-links a:hover { border-color: var(--line-2); color: var(--gold-3); background: rgba(17, 18, 27, .8); }
.social-links a > svg { flex: none; color: var(--gold-2); }
.social-links span { display: grid; min-width: 0; }
.social-links b { font-size: 14px; font-weight: 700; color: var(--text); }
.social-links small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-links.compact { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.social-links.compact a { padding: 0; width: 38px; height: 38px; justify-content: center; border-radius: 50%; }
.social-links.compact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 980px) {
  .presence { grid-template-columns: 1fr; }
  .presence-player iframe { height: 380px; }
}
@media (max-width: 520px) {
  .social-links:not(.compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presence-player iframe { height: 352px; }
}

/* six primary tabs: keep each on one line */
.main-nav > a { white-space: nowrap; }
@media (max-width: 1400px) { .main-nav > a { padding: 10px 10px; font-size: 13.5px; } .main-nav > a.is-active::after { left: 10px; right: 10px; } }
/* short laptop screens: keep the whole entrance (copy + directory) in the first view */
@media (min-width: 981px) {
  .home-copy h1 { font-size: clamp(44px, min(5.6vw, 9.6vh), 88px); }
}
@media (min-width: 981px) and (max-height: 860px) {
  .home-hero { padding-block: 20px 24px; }
  .home-copy h1 { margin: 10px 0 12px; }
  .home-copy .lead { margin-bottom: 20px; font-size: 16.5px; }
  .dir-item { padding: 11px 16px 12px; }
  .dir-tag { margin-bottom: 5px; }
}
.pd-eyebrow .free-tag { color: #04211a; }

/* =========================================================
   Home — Protonix Academy solar system
   ========================================================= */
.solar {
  --sun: 240px;
  position: relative; overflow: hidden; isolation: isolate;
  height: calc(100svh - var(--header-h) - 28px); min-height: 560px;
  margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); box-sizing: content-box;
  background:
    radial-gradient(120% 90% at 50% 52%, #12131d 0%, #0c0d13 38%, #08090e 62%, #05060a 100%);
}
.solar::after { /* soft blend into the page below */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 5000; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.solar > canvas, .solar-haze { position: absolute; left: 0; top: var(--header-h); width: 100%; height: calc(100% - var(--header-h)); pointer-events: none; }
.solar-stars { z-index: 0; }
.solar-orbits.back { z-index: 10; }
.solar-orbits.front { z-index: 2001; }

/* cosmic haze */
.solar-haze { z-index: 1; overflow: hidden; }
.solar-haze i { position: absolute; border-radius: 50%; filter: blur(60px); }
.solar-haze .hz1 { width: 70%; height: 60%; left: 8%; top: 12%; background: radial-gradient(closest-side, rgba(65, 72, 176, .20), transparent); animation: hazeDrift 60s ease-in-out infinite alternate; }
.solar-haze .hz2 { width: 55%; height: 50%; right: 2%; bottom: 4%; background: radial-gradient(closest-side, rgba(80, 60, 190, .14), transparent); animation: hazeDrift 80s ease-in-out infinite alternate-reverse; }
.solar-haze .hz3 { width: 40%; height: 40%; left: 30%; top: 30%; background: radial-gradient(closest-side, rgba(40, 150, 170, .08), transparent); animation: hazeDrift 70s ease-in-out infinite alternate; }
@keyframes hazeDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4%, -3%) scale(1.08); } }

/* the sun */
.sun { position: absolute; left: 0; top: var(--header-h); width: var(--sun); height: var(--sun); z-index: 2000; pointer-events: none; }
.sun img { position: relative; z-index: 4; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(233, 201, 139, .25), 0 0 calc(var(--sun) * .08) rgba(245, 196, 110, .45); }
.sun i { position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.sun-haze { width: 420%; height: 420%; z-index: 0; background: radial-gradient(closest-side, rgba(58, 66, 168, .16), rgba(40, 70, 180, .06) 45%, transparent); animation: sunBreathe 11s ease-in-out infinite; }
.sun-blue { width: 230%; height: 230%; z-index: 1; background: radial-gradient(closest-side, rgba(95, 104, 204, .34) 38%, rgba(82, 90, 196, .14) 62%, transparent); animation: sunBreathe 9s ease-in-out infinite -3s; }
.sun-gold { width: 150%; height: 150%; z-index: 2; background: radial-gradient(closest-side, rgba(255, 205, 120, .55) 58%, rgba(236, 176, 92, .26) 72%, rgba(212, 150, 70, .08) 86%, transparent); animation: sunBreathe 8s ease-in-out infinite; }
.sun-energy { width: 190%; height: 190%; z-index: 3; opacity: .5;
  background: repeating-conic-gradient(from 0deg, transparent 0deg, rgba(246, 206, 140, .20) 1deg, transparent 3deg, transparent 8.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 50%, #000 54%, rgba(0, 0, 0, .35) 72%, transparent 96%);
          mask: radial-gradient(closest-side, transparent 50%, #000 54%, rgba(0, 0, 0, .35) 72%, transparent 96%);
  animation: coronaTurn 260s linear infinite, coronaPulse 10s ease-in-out infinite; }
@keyframes sunBreathe { 0%, 100% { opacity: .8; scale: 1; } 50% { opacity: 1; scale: 1.04; } }

/* planets */
.planet { position: absolute; left: 0; top: var(--header-h); width: 0; height: 0; opacity: 0; transition: opacity .8s; will-change: transform; }
.solar.is-live .planet { opacity: var(--fade, 1); }
.planet-body {
  position: absolute; left: 0; top: 0; width: var(--size); height: var(--size); border-radius: 50%;
  translate: -50% -50%; transform: scale(var(--s, 1));
  background:
    radial-gradient(circle at var(--hx, 35%) var(--hy, 35%), var(--p-light) 0%, var(--p-mid) 38%, var(--p-dark) 78%, #040408 100%);
  box-shadow: 0 0 calc(var(--size) * .5) -2px var(--p-glow), inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: box-shadow .4s, filter .4s;
}
.planet-label {
  position: absolute; left: 0; top: var(--header-h); z-index: 4000; will-change: transform;
  display: grid; justify-items: center; gap: 3px; white-space: nowrap; text-align: center;
  padding: 4px 8px; border-radius: 8px; opacity: 0; transition: opacity .6s;
}
.solar.is-live .planet-label { opacity: 1; }
.solar.is-live .planet-label.is-dim { opacity: .22; }
.planet-label b { font: 700 11.5px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: #e7ecf8; text-shadow: 0 1px 10px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); }
.planet-label small { position: absolute; left: 50%; top: calc(100% + 2px); translate: -50% 0; font-size: 11.5px; color: var(--gold-2); opacity: 0; transform: translateY(-3px); transition: opacity .35s, transform .35s; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); pointer-events: none; }
.planet-label.is-on small, .planet-label:focus-visible small { opacity: 1; transform: none; }
.planet-label.is-on b { color: var(--gold-3); }
.planet-label:focus-visible { outline: 1px solid rgba(233, 201, 139, .6); outline-offset: 2px; }
.planet.is-on .planet-body, .planet:focus-visible .planet-body { box-shadow: 0 0 calc(var(--size) * .9) 0 var(--p-glow), 0 0 0 1px rgba(233, 201, 139, .6); }
.planet.is-on .planet-label b { color: var(--gold-3); }
.solar.is-hovering .planet:not(.is-on) { opacity: calc(var(--fade, 1) * .55); }
.solar.is-hovering .planet-label:not(.is-on) { opacity: .45; }

/* planet surfaces */
.p-freebies      { --p-light: #c9fff0; --p-mid: #3fc1a5; --p-dark: #0c3a33; --p-glow: rgba(63, 193, 165, .55); }
.p-store         { --p-light: #fff1c9; --p-mid: #d9a653; --p-dark: #4a3010; --p-glow: rgba(233, 180, 90, .5); }
.p-services      { --p-light: #dfe6ff; --p-mid: #6f8cf0; --p-dark: #141e4d; --p-glow: rgba(111, 140, 240, .5); }
.p-classes       { --p-light: #ffe0c2; --p-mid: #e0874f; --p-dark: #3d1706; --p-glow: rgba(240, 150, 90, .5); }
.p-masterclasses { --p-light: #eadcff; --p-mid: #9a78f0; --p-dark: #26124d; --p-glow: rgba(154, 120, 240, .5); }
.p-crash-courses { --p-light: #d7fbff; --p-mid: #4fb8d0; --p-dark: #0b2f3a; --p-glow: rgba(79, 184, 208, .45); }
.p-faculty       { --p-light: #f2f6ff; --p-mid: #a9b8d6; --p-dark: #232d45; --p-glow: rgba(226, 214, 192, .4); }
/* surface detail */
.p-store .planet-body::after { /* ring */
  content: ''; position: absolute; left: 50%; top: 50%; width: 210%; height: 62%; border-radius: 50%;
  translate: -50% -50%; rotate: -18deg; border: 2px solid rgba(246, 222, 170, .5); border-top-color: rgba(246, 222, 170, .12);
  box-shadow: 0 0 10px rgba(233, 201, 139, .25);
}
.p-classes .planet-body::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(-12deg, transparent 0 18%, rgba(60, 20, 5, .22) 18% 26%); mix-blend-mode: multiply; }
.p-masterclasses .planet-body::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 64%, rgba(255, 255, 255, .14) 0 10%, transparent 11%), radial-gradient(circle at 38% 72%, rgba(0, 0, 0, .18) 0 8%, transparent 9%); }
.p-services .planet-body::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(8deg, transparent 0 22%, rgba(226, 214, 192, .10) 22% 28%); }

.moon { position: absolute; left: -3px; top: calc(var(--header-h) - 3px); width: 6px; height: 6px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #f2f5ff, #8e9fc0 60%, #242c40); box-shadow: 0 0 6px rgba(226, 214, 192, .5); transition: opacity .8s; }
.solar.is-live .moon { opacity: .95; }

/* plain list — no-JS fallback and phones */
.solar-list { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 5001; display: none; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 16px; }
.solar:not(.is-live) .solar-list { display: flex; }
.solar-list a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(226, 214, 192, .18); background: rgba(8, 9, 14, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.solar-list a i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-mid); box-shadow: 0 0 8px var(--p-glow); }
.solar-list .sl-freebies { --p-mid: #3fc1a5; --p-glow: rgba(63, 193, 165, .6); } .solar-list .sl-store { --p-mid: #d9a653; --p-glow: rgba(233, 180, 90, .6); }
.solar-list .sl-services { --p-mid: #6f8cf0; --p-glow: rgba(111, 140, 240, .6); } .solar-list .sl-classes { --p-mid: #e0874f; --p-glow: rgba(240, 150, 90, .6); }
.solar-list .sl-masterclasses { --p-mid: #9a78f0; --p-glow: rgba(154, 120, 240, .6); } .solar-list .sl-crash-courses { --p-mid: #4fb8d0; --p-glow: rgba(79, 184, 208, .6); }
.solar-list .sl-faculty { --p-mid: #a9b8d6; --p-glow: rgba(226, 214, 192, .6); }

@media (prefers-reduced-motion: reduce) {
  .solar-haze i, .sun i { animation: none !important; }
}
@media (max-width: 700px) {
  .solar { min-height: 600px; }
  .solar-list { display: flex; bottom: 14px; }
  .solar.is-live .solar-list { position: absolute; }
  .planet-label b { font-size: 9.5px; letter-spacing: .16em; }
  .planet-label { padding: 2px 4px; }
  .planet-label small { display: none; }
}

/* ---- solar system v2: WebGL scene ---- */
.solar { background: radial-gradient(130% 100% at 50% 50%, #12131c 0%, #0d0d14 36%, #090a0f 62%, #050509 100%); }
.solar-gl { z-index: 3; }
.solar-dust { z-index: 3050; opacity: .45; }
.solar-annot { z-index: 3200; }
.solar-haze .hz4 { width: 36%; height: 34%; left: 58%; top: 8%; background: radial-gradient(closest-side, rgba(150, 90, 200, .07), transparent); animation: hazeDrift 90s ease-in-out infinite alternate; }
.solar .planet { width: 100px; height: 100px; border-radius: 50%; transform-origin: 0 0; opacity: 1; background: none; cursor: pointer; }
.solar .planet:focus { outline: none; }
.solar.no-gl .planet, .solar.no-gl .planet-label, .solar.no-gl .solar-annot { display: none; }
.solar.no-gl .solar-list { display: flex; bottom: 40%; }
.solar .planet-label { padding: 3px 6px; }
.solar .planet-label b { font-size: 11px; letter-spacing: .26em; color: #eef1f8; }
@media (max-width: 700px) { .solar .planet-label b { font-size: 9.5px; letter-spacing: .18em; } }

/* =========================================================
   Site-wide cosmic backdrop — every page shares the solar system's midnight blue
   ========================================================= */
/* painted on <html> so the fixed cosmos canvas (z-index -1) can sit between it and the page */
html {
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23d6e0ff'%3E%3Ccircle cx='23' cy='41' r='.7' opacity='.5'/%3E%3Ccircle cx='131' cy='12' r='.5' opacity='.35'/%3E%3Ccircle cx='207' cy='88' r='.8' opacity='.45'/%3E%3Ccircle cx='318' cy='37' r='.5' opacity='.3'/%3E%3Ccircle cx='397' cy='141' r='.7' opacity='.4'/%3E%3Ccircle cx='66' cy='176' r='.5' opacity='.3'/%3E%3Ccircle cx='171' cy='233' r='.9' opacity='.35'/%3E%3Ccircle cx='281' cy='199' r='.5' opacity='.4'/%3E%3Ccircle cx='352' cy='288' r='.7' opacity='.3'/%3E%3Ccircle cx='38' cy='322' r='.6' opacity='.45'/%3E%3Ccircle cx='121' cy='377' r='.5' opacity='.3'/%3E%3Ccircle cx='243' cy='351' r='.7' opacity='.35'/%3E%3Ccircle cx='404' cy='402' r='.5' opacity='.3'/%3E%3C/g%3E%3Ccircle cx='296' cy='121' r='.8' fill='%23f6e2b5' opacity='.35'/%3E%3C/svg%3E"),
    radial-gradient(1200px 820px at 82% -8%, rgba(46, 80, 190, .20), transparent 62%),
    radial-gradient(1000px 760px at -12% 108%, rgba(78, 52, 170, .11), transparent 60%),
    radial-gradient(900px 600px at 50% 50%, rgba(20, 40, 100, .10), transparent 70%);
  background-attachment: fixed, fixed, fixed, fixed;
}
body { background: transparent; }
.site-header { background: rgba(8, 8, 14, .7); }
.site-header.is-scrolled { background: rgba(8, 8, 14, .9); }
.site-footer { background: linear-gradient(180deg, rgba(14, 14, 22, .85), #05060a); }

/* =========================================================
   Media pass — Faculty, lightbox, curriculum, genre reel, services scrub,
   3D store portals, box-art cards, FREE labels
   ========================================================= */

/* seven primary tabs */
@media (max-width: 1480px) { .header-search { display: none; } .search-mobile { display: inline-grid; } }
@media (max-width: 1280px) { .main-nav > a { padding: 10px 8px; font-size: 13px; } .main-nav > a.is-active::after { left: 8px; right: 8px; } }

/* ---------- lightbox ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); }
.lightbox::backdrop { background: rgba(4, 5, 8, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox[open] { display: grid; place-items: center; animation: lbIn .3s var(--ease); }
@keyframes lbIn { from { opacity: 0; } }
.lb-figure { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 12px; padding: 56px 24px 28px; }
.lb-media { display: grid; place-items: center; max-width: min(1500px, 94vw); }
.lb-media img, .lb-media video { display: block; max-width: min(1500px, 94vw); max-height: calc(100dvh - 130px); width: auto; height: auto; border-radius: 12px;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(226, 214, 192, .14), 0 0 80px -40px rgba(90, 101, 204, .6); background: #000; }
.lightbox.is-video .lb-media video { width: min(1500px, 94vw); }
.lb-caption { font-size: 13px; color: var(--text-2); text-align: center; }
.lb-close { position: fixed; top: 16px; right: 18px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 11, 17, .7); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lb-close:hover { border-color: var(--gold); color: var(--gold-3); }

/* ---------- Faculty ---------- */
.faculty-hero { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 110px) 0 110px; }
.faculty-hero-bg { position: absolute; inset: 0; z-index: -1; }
.faculty-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.85) brightness(.55); }
.faculty-hero-bg::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(8, 8, 14, .94) 0%, rgba(8, 8, 14, .72) 38%, rgba(8, 8, 14, .25) 70%, rgba(8, 8, 14, .5) 100%),
  linear-gradient(180deg, rgba(8, 8, 14, .5) 0%, transparent 25%, transparent 60%, var(--bg) 100%),
  radial-gradient(80% 70% at 70% 40%, rgba(48, 58, 160, .18), transparent 70%); }
.faculty-hero h1 { font-size: clamp(56px, 9vw, 132px); font-weight: 800; letter-spacing: -.03em; line-height: .9; margin: 14px 0 12px; text-transform: uppercase; }
.faculty-role { font: 600 clamp(15px, 1.6vw, 19px)/1.4 var(--font-body); color: var(--gold-2); margin: 0 0 18px; letter-spacing: .02em; }
.faculty-role span { color: var(--muted); margin: 0 4px; }
.faculty-hero .lead { max-width: 46ch; color: #ddd6c6; }
.faculty-facts { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.faculty-facts li { padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(226, 214, 192, .16); background: rgba(12, 13, 20, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.faculty-facts b { display: block; font: 800 24px/1 var(--font-display); color: var(--text); }
.faculty-facts span { font-size: 12.5px; color: var(--muted); }

.faculty-gallery { padding: 8px 0 20px; }
.marquee { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee::-webkit-scrollbar { display: none; }
.marquee-track { display: flex; gap: 18px; width: max-content; padding: 12px 0 18px; }
.marquee-item { flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 16px; overflow: hidden; position: relative;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(226, 214, 192, .10); transition: transform .5s var(--ease), box-shadow .5s; }
.marquee-item img { display: block; height: clamp(240px, 38vw, 460px); width: auto; filter: saturate(.92); transition: filter .5s, transform .8s var(--ease); }
.marquee-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 14, .45)); pointer-events: none; }
.marquee-item:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(233, 201, 139, .35); }
.marquee-item:hover img { filter: saturate(1.05); transform: scale(1.03); }
.marquee-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.faculty-gallery-hint { margin: 0; font-size: 12.5px; color: var(--muted); }

.faculty-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; padding: 0; }
.faculty-story article { background: rgba(10, 11, 17, .92); padding: clamp(26px, 3.4vw, 44px); }
.faculty-n { font: 600 11px var(--font-mono); letter-spacing: .2em; color: var(--gold); }
.faculty-story h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; margin: 10px 0 14px; }
.faculty-story p { color: var(--text-2); margin: 0 0 14px; max-width: 58ch; }
@media (max-width: 860px) { .faculty-story { grid-template-columns: 1fr; } .faculty-hero { padding: calc(var(--header-h) + 64px) 0 72px; } }

/* ---------- curriculum ---------- */
.curr-head { margin: 0 0 22px; }
.curr-head h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.02em; margin: 8px 0 0; }
.curr-head .lead { margin-top: 12px; }
.curr-grid { list-style: none; padding: 0; margin: 0 0 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.curr-grid li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.curr-grid li > span { font: 600 12px/1.9 var(--font-mono); color: var(--gold); }
.curr-grid b { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.curr-grid small { display: block; font-size: 14px; color: var(--text-2); margin-top: 4px; line-height: 1.5; }
.curr-get { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.curr-get li { display: flex; gap: 14px; align-items: baseline; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: rgba(14, 15, 23, .7); color: var(--text); }
.curr-get li i { font-style: normal; color: var(--gold); font-weight: 700; }
.curr-get li.is-key { border-color: rgba(233, 201, 139, .4); background: linear-gradient(90deg, rgba(233, 201, 139, .09), rgba(14, 15, 23, .7) 60%); }
.library-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 22px 24px; border-radius: 18px;
  border: 1px solid rgba(233, 201, 139, .3); background: radial-gradient(120% 140% at 0% 0%, rgba(233, 201, 139, .10), transparent 60%), rgba(13, 13, 20, .8); }
.library-note p { margin: 8px 0 0; color: var(--text-2); max-width: 70ch; }
.library-note b { color: var(--text); }
.flagship-perk, .mentorship-perk { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--gold-2); }
.mentorship-perk { margin: -8px 0 22px; }
@media (max-width: 760px) { .curr-grid { grid-template-columns: 1fr; } }

/* ---------- genre reel ---------- */
.genre-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.genre-card { position: relative; display: block; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #05060a; text-align: left; color: var(--text);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(226, 214, 192, .14), inset 0 1px 0 rgba(255, 255, 255, .04); transition: transform .45s var(--ease), box-shadow .45s; }
.genre-card.is-wide { grid-column: span 2; grid-row: span 2; }
.genre-card::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(116, 119, 204, .35), transparent 30%, transparent 70%, rgba(233, 201, 139, .3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; }
.genre-media { display: block; aspect-ratio: 16 / 9; height: 100%; }
.genre-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); transition: filter .5s, transform .8s var(--ease); }
.genre-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 14, .1) 30%, rgba(8, 8, 14, .9)); pointer-events: none; }
.genre-play { position: absolute; left: 50%; top: 46%; z-index: 3; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #0c0c13; background: linear-gradient(180deg, var(--gold-3), var(--gold)); box-shadow: 0 10px 30px -8px rgba(233, 180, 90, .7); transition: transform .35s var(--ease); }
.genre-play svg { margin-left: 3px; }
.genre-label { position: absolute; left: 18px; bottom: 16px; z-index: 3; display: grid; gap: 2px; }
.genre-label b { font: 800 clamp(18px, 1.8vw, 24px)/1.1 var(--font-display); letter-spacing: -.01em; }
.genre-card.is-wide .genre-label b { font-size: clamp(26px, 3vw, 40px); }
.genre-label small { font: 600 10.5px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
.genre-card:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(233, 201, 139, .4), 0 0 60px -30px rgba(90, 101, 204, .7); }
.genre-card:hover img { filter: brightness(.8) saturate(1); transform: scale(1.04); }
.genre-card:hover .genre-play { transform: scale(1.08); }
.genre-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 980px) { .genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .genre-grid { grid-template-columns: 1fr; } .genre-card.is-wide { grid-column: auto; grid-row: auto; } .genre-media { aspect-ratio: 16 / 8; } }

/* ---------- services: scroll-scrubbed hero ---------- */
.scrub { position: relative; height: 230vh; margin-top: calc(-1 * var(--header-h)); }
.scrub.is-static { height: auto; }
.scrub-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; isolation: isolate; }
.scrub.is-static .scrub-sticky { position: relative; height: 80svh; }
.scrub-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85) brightness(.75); }
.scrub-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(8, 8, 14, .9) 0%, rgba(8, 8, 14, .62) 38%, rgba(8, 8, 14, .2) 72%, rgba(8, 8, 14, .45) 100%),
  linear-gradient(180deg, rgba(8, 8, 14, .55) 0%, transparent 25%, transparent 70%, var(--bg) 100%),
  radial-gradient(90% 80% at 70% 50%, rgba(30, 60, 160, .20), transparent 70%); }
.scrub-copy { padding-top: var(--header-h); opacity: calc(1 - var(--p, 0) * 1.25); transform: translateY(calc(var(--p, 0) * -40px)); }
.scrub-copy h1 { font-size: clamp(52px, 8vw, 120px); font-weight: 800; letter-spacing: -.03em; line-height: .92; margin: 12px 0 14px; }
.scrub-copy .lead { max-width: 46ch; color: #ddd6c6; }
.scrub-cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
@media (max-width: 700px) {
  .scrub { height: 190vh; }
  .scrub-shade { background: linear-gradient(180deg, rgba(8, 8, 14, .6) 0%, rgba(8, 8, 14, .7) 50%, rgba(8, 8, 14, .9) 85%, var(--bg) 100%); }
}

/* ---------- store: 3D category portals (no product images) ---------- */
.portal { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .6s var(--ease), border-color .4s, box-shadow .5s; min-height: 430px; }
.portal.is-tilting { transition: transform .12s linear, border-color .4s, box-shadow .5s; }
.portal:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.portal-3d { position: absolute; left: 0; right: 0; top: 0; height: 62%; display: grid; place-items: center; perspective: 700px; }
.coin { position: relative; width: 132px; height: 132px; transform-style: preserve-3d; animation: coinSpin 14s linear infinite; }
.portal:hover .coin { animation-duration: 5s; }
.coin i { position: absolute; inset: 0; border-radius: 50%; backface-visibility: visible; }
.coin-face { display: grid; place-items: center; transform: translateZ(7px);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 55%, #fff) 0%, color-mix(in srgb, var(--accent) 70%, #0c0d14) 30%, color-mix(in srgb, var(--accent) 22%, #07070c) 72%, #06060a 100%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, #fff), inset 0 -10px 24px rgba(0, 0, 0, .55), inset 0 8px 18px rgba(255, 255, 255, .12); }
.coin-back { transform: translateZ(-7px) rotateY(180deg); background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--accent) 40%, #0c0d14), #06060a 80%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, #000); }
.coin-edge { transform: translateZ(calc((var(--k) - 3.5) * 2px)); background: color-mix(in srgb, var(--accent) 45%, #1a1206); }
.coin-face svg { width: 62%; height: 62%; fill: none; stroke: #fff9ec; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
.coin-face svg .fill { fill: #fff9ec; stroke: none; }
.portal-floor { position: absolute; left: 50%; top: 78%; width: 150px; height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); filter: blur(6px); animation: floorPulse 7s ease-in-out infinite; }
@keyframes coinSpin { from { transform: rotateX(12deg) rotateY(0deg); } to { transform: rotateX(12deg) rotateY(360deg); } }
@keyframes floorPulse { 0%, 100% { opacity: .55; scale: .9; } 50% { opacity: 1; scale: 1.05; } }
.portal-glare, .card-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .10), transparent 45%); }
.portal.is-tilting .portal-glare, .card.is-tilting .card-glare { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .coin, .portal-floor { animation: none; } }
@media (max-width: 640px) {
  .portal { min-height: 170px; }
  .portal-3d { right: auto; width: 44%; height: 100%; }
  .coin { width: 92px; height: 92px; }
  .portal-floor { width: 100px; }
}

/* ---------- product cards: whole box art + 3D pop ---------- */
.card { position: relative; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .55s var(--ease), box-shadow .5s, border-color .4s; }
.card.is-tilting { transition: transform .12s linear, box-shadow .5s, border-color .4s; }
.card:hover { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) scale(1.02); z-index: 2;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 70px -30px var(--accent); }
.card-art { aspect-ratio: 3 / 2; }
.card-art > a { position: absolute; inset: 0; display: block; }
.card-art .card-art-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-art.is-contain .card-art-main { object-fit: contain; padding: 6px 0; }
.card-art .card-art-fill { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) brightness(.45) saturate(1.1); }
.card:hover .card-art img.card-art-fill { transform: none; }
.card:hover .card-art .card-art-main { transform: scale(1.04); }

/* ---------- freebies: big FREE label ---------- */
.free-art { position: relative; display: block; border-radius: 12px; overflow: hidden; }
.free-art img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.free-stamp { position: absolute; left: 16px; top: 16px; z-index: 3; padding: 8px 18px 9px; border-radius: 12px;
  font: 800 clamp(26px, 3vw, 40px)/1 var(--font-display); letter-spacing: .04em; color: #04211a;
  background: linear-gradient(180deg, #7ef0d2, var(--teal)); box-shadow: 0 14px 34px -12px rgba(63, 193, 165, .8), inset 0 1px 0 rgba(255, 255, 255, .5); transform: rotate(-4deg); }
.free-stamp.lg { font-size: clamp(34px, 4vw, 56px); left: 20px; top: 20px; }
.free-pair.large .free-item { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .55s var(--ease); }
.free-pair.large .free-item.is-tilting { transition: transform .12s linear; }
.pd-art { position: relative; }
.solar::after { height: 36px; }
.portal-text b { font-size: clamp(19px, 1.55vw, 25px); }
@media (max-width: 1180px) { .portal-text b { font-size: clamp(22px, 2.6vw, 28px); } }
.faculty-gallery-hint { margin: 0 auto; }
.faculty-hero .eyebrow { display: block; margin-top: 26px; }
/* "PROTONIX" in Syne 800 ≈ 8.9em wide — always fit the line */
.faculty-hero h1 { font-size: min(132px, calc((100vw - 40px) / 9)); }
.scrub-copy h1 { font-size: min(120px, calc((100vw - 40px) / 6.4)); }
@media (max-width: 360px) { .page-hero h1 { font-size: 30px; } }
@media (max-width: 360px) { .page-title { font-size: 29px; } }

/* dropdowns: one panel per trigger */
.main-nav.mega-open .mega { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.main-nav.mega-open[data-mega-open="store"] .mega[data-mega-panel="store"],
.main-nav.mega-open[data-mega-open="services"] .mega[data-mega-panel="services"] { opacity: 1; visibility: visible; transform: none; }
.mega { background: rgba(11, 12, 19, .97); }
.mega-services { left: 60px; width: 520px; }
.mega-services .mega-grid { grid-template-columns: 1fr; }

/* =========================================================
   Futuristic premium typography — Unbounded (display) · Sora (text) · JetBrains Mono (labels)
   ========================================================= */
:root {
  --font-display: 'Unbounded', 'Avenir Next', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --depth-text: 0 1px 0 rgba(255, 255, 255, .07), 0 2px 1px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .5), 0 0 32px rgba(108, 108, 204, .14);
}
body { font-family: var(--font-body); font-weight: 400; letter-spacing: .003em; }
h1, h2, h3, .page-title { font-family: var(--font-display); }
h1, .page-title { font-weight: 700; letter-spacing: -.03em; text-shadow: var(--depth-text); }
h2 { font-weight: 600; letter-spacing: -.022em; text-shadow: 0 1px 0 rgba(255, 255, 255, .05), 0 2px 2px rgba(0, 0, 0, .5), 0 10px 26px rgba(0, 0, 0, .45); }
h3 { font-weight: 600; letter-spacing: -.01em; }
.lead { font-weight: 300; letter-spacing: .005em; line-height: 1.6; }
/* labels: gold gradient, wide tracking */
.eyebrow { font-family: var(--font-mono); letter-spacing: .26em;
  background: linear-gradient(90deg, var(--gold-3), var(--gold) 60%, #c9954a); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* hero titles float very slightly */
.page-hero h1, .soon-page h1, .faculty-hero h1, .scrub-copy h1, .mentorship-hero h1, .service-hero h1 { animation: titleFloat 8s ease-in-out infinite; }
@keyframes titleFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* buttons: dimensional, lit from above */
.btn { font-family: var(--font-body); font-weight: 600; letter-spacing: .02em; }
.btn-gold { background: linear-gradient(180deg, #f7dfa9 0%, #e2b565 48%, #c9954a 100%); color: #1a1206;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(90, 55, 10, .35), 0 10px 28px -10px rgba(233, 180, 90, .65), 0 0 0 1px rgba(255, 220, 160, .25); text-shadow: 0 1px 0 rgba(255, 240, 210, .5); }
.btn-gold:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(90, 55, 10, .35), 0 16px 36px -10px rgba(233, 180, 90, .8), 0 0 0 1px rgba(255, 220, 160, .4); }
.btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px -14px rgba(0, 0, 0, .8); }
.main-nav > a { font-family: var(--font-body); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.brand-word b { font-family: var(--font-display); }

/* entrance: fade up out of a soft blur (uses `translate`, so it never fights tilt transforms) */
.rv { opacity: 0; translate: 0 18px; filter: blur(6px); }
.rv.rv-in { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .9s var(--ease) var(--rv-d, 0ms), translate .9s var(--ease) var(--rv-d, 0ms), filter .9s var(--ease) var(--rv-d, 0ms); }
.page-hero h1.rv-in, .soon-page h1.rv-in, .faculty-hero h1.rv-in, .scrub-copy h1.rv-in, .mentorship-hero h1.rv-in, .service-hero h1.rv-in { animation: titleFloat 8s ease-in-out 1s infinite; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; filter: none; } h1, .page-hero h1 { animation: none !important; } }

/* Unbounded is wider than the old face — keep the big titles inside their lines */
.page-hero h1 { font-size: clamp(34px, 4.6vw, 64px); }
.mentorship-hero h1 { font-size: clamp(40px, 6.4vw, 96px); }
@media (max-width: 640px) { .mentorship-hero h1 { font-size: min(64px, calc((100vw - 32px) / 10.4)); } }
.faculty-hero h1 { font-size: min(124px, calc((100vw - 40px) / 9.6)); }
.scrub-copy h1 { font-size: min(110px, calc((100vw - 40px) / 7.2)); }
.soon-page h1 { font-size: clamp(38px, 6.4vw, 92px); }
.portal-text b { font-size: clamp(17px, 1.35vw, 22px); letter-spacing: -.02em; }
@media (max-width: 1180px) { .portal-text b { font-size: clamp(19px, 2.3vw, 24px); } }
.card-title, .flagship-title h2, .flagship-card h2 { letter-spacing: -.02em; }

/* =========================================================
   Cosmos: site-wide backdrop + immersive heroes
   ========================================================= */
.cosmos-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .9; }
main, .site-footer { position: relative; z-index: 0; }
.cosmos-page { position: relative; isolation: isolate; overflow: hidden; }
.cosmos-page > .cosmos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.soon-page.cosmos-page { min-height: calc(100svh - var(--header-h) - 28px); display: flex; align-items: center; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 60px) 0 80px;
  background: radial-gradient(110% 90% at 70% 30%, rgba(30, 50, 130, .35), transparent 60%), radial-gradient(90% 80% at 10% 90%, rgba(70, 40, 140, .22), transparent 60%); }
.soon-page.cosmos-page::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, var(--bg)); z-index: -1; pointer-events: none; }
.soon-page .wrap { position: relative; }

/* =========================================================
   Services: premium cards, sub-menu, detail pages
   ========================================================= */
.service-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -8px; margin-bottom: 8px; padding: 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12, 13, 20, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); width: max-content; max-width: calc(100% - 32px); position: sticky; top: calc(var(--header-h) + 10px); z-index: 20; }
.service-nav a { padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: background .2s, color .2s; white-space: nowrap; }
.service-nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.service-nav a.is-on { color: #1a1206; background: linear-gradient(180deg, #f2d69b, #d9a653); }
@media (max-width: 760px) { .service-nav { border-radius: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: auto; } .service-nav::-webkit-scrollbar { display: none; } }

.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.service-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 280px; padding: 28px; border-radius: 22px; overflow: hidden; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, .05));
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), linear-gradient(180deg, rgba(16, 17, 25, .88), rgba(9, 9, 15, .94));
  box-shadow: 0 40px 80px -48px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .55s var(--ease), border-color .4s, box-shadow .5s; }
.service-card.is-tilting { transition: transform .12s linear, border-color .4s, box-shadow .5s; }
.service-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 50px 90px -48px rgba(0, 0, 0, .95), 0 0 70px -34px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .07); }
.service-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: color-mix(in srgb, var(--accent) 75%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, #101119), #0a0b11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 30px -14px var(--accent); margin-bottom: 8px; }
.service-icon.lg { width: 70px; height: 70px; border-radius: 20px; }
.service-sub { font: 600 10.5px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.service-card b { font: 700 clamp(20px, 1.9vw, 26px)/1.15 var(--font-display); letter-spacing: -.02em; }
.service-card p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; flex: 1; }
.service-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.service-foot em { font: 700 22px var(--font-display); font-style: normal; color: var(--gold-3); }
@media (max-width: 980px) { .service-grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .service-grid, .service-grid.three { grid-template-columns: 1fr; } .service-card { min-height: 0; padding: 22px; } }

.service-hero { margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 80px) 0 70px;
  background: radial-gradient(90% 90% at 80% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgba(40, 60, 160, .2), transparent 60%); }
.service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.service-hero h1 { font-size: clamp(40px, 5.6vw, 84px); line-height: .98; margin: 14px 0 16px; }
.service-price { display: grid; gap: 14px; justify-items: start; padding: 28px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, .06)); background: rgba(12, 13, 20, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95); }
.service-price small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.service-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.service-block h2, .service-benefits h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 20px; }
.service-bring { margin: 18px 0 0; color: var(--text-2); font-size: 14px; }
.service-bring b { color: var(--gold-2); }
.workflow { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: s; }
.workflow li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); position: relative; }
.workflow li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 600 11px var(--font-mono); color: var(--gold-3); border: 1px solid rgba(233, 201, 139, .35); background: rgba(233, 201, 139, .06); }
.workflow b { display: block; font-weight: 700; }
.workflow small { color: var(--text-2); font-size: 14px; }
.service-benefits { padding: clamp(24px, 3.4vw, 44px); border-radius: 24px; border: 1px solid var(--line-2); background: radial-gradient(120% 140% at 0% 0%, rgba(233, 201, 139, .08), transparent 60%), rgba(12, 13, 20, .8); }
.service-benefits ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.service-benefits li { padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(14, 15, 23, .6); color: var(--text); font-size: 15px; line-height: 1.5; }
.service-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
@media (max-width: 860px) { .service-hero-grid, .service-body { grid-template-columns: 1fr; } .service-benefits ul { grid-template-columns: 1fr; } }

/* 1-on-1 hero: follow Protonix */
.hero-social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hero-social > span { font: 600 10.5px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.hero-social .social-links.compact { margin: 0; }
.hero-social .social-links.compact a { background: rgba(12, 13, 20, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* gallery now moves by transform */
.marquee { overflow: hidden; touch-action: pan-y; cursor: grab; }
.marquee-track { will-change: transform; }
.crumbs + .eyebrow { display: block; margin-top: 24px; }
/* seven tabs need ~1240px; below that the full menu lives behind the menu button */
@media (max-width: 1240px) { .main-nav, .header-search { display: none; } .search-mobile, .menu-btn { display: inline-grid; } }

/* =========================================================
   DEEP SPACE palette — near-black base, champagne type, warm Protonix gold accents.
   Blue/indigo/violet appear only as faint atmosphere.
   ========================================================= */
:root {
  --bg: #03050a;
  --bg-2: #070910;
  --surface: #0b0d16;
  --surface-2: #10131e;
  --surface-3: #161a28;
  --text: #efe5d0;          /* champagne */
  --text-2: #cdc4b2;
  --muted: #8a909e;         /* cool grey */
  --champagne: #f2e6cb;
  --line: rgba(233, 201, 139, .09);
  --line-2: rgba(233, 201, 139, .16);
  --glass: rgba(9, 11, 18, .72);
}
html {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 820px at 82% -10%, rgba(52, 44, 120, .14), transparent 62%),
    radial-gradient(1000px 760px at -12% 110%, rgba(60, 34, 96, .10), transparent 60%),
    radial-gradient(900px 600px at 50% 45%, rgba(18, 22, 52, .18), transparent 72%);
  background-attachment: fixed;
}
h1, h2, .page-title, .card-title, .service-card b, .portal-text b, .flagship-title h2, .flagship-card h2 { color: var(--champagne); }
h1, .page-title { text-shadow: 0 1px 0 rgba(255, 240, 210, .06), 0 2px 2px rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .55), 0 0 40px rgba(233, 180, 90, .07); }
.site-header { background: rgba(3, 5, 10, .66); }
.site-header.is-scrolled { background: rgba(3, 5, 10, .9); border-color: rgba(233, 201, 139, .08); }
.site-footer { background: linear-gradient(180deg, rgba(7, 9, 16, .82), #020308); }
.mega { background: rgba(6, 8, 14, .97); }
.preview-ribbon { background: linear-gradient(90deg, #120d06, #1b1409, #120d06); }
.solar { background: radial-gradient(120% 95% at 50% 50%, #0a0b1a 0%, #06070f 38%, #04050a 62%, #020306 100%); }
.solar .planet-label b { color: var(--champagne); }
/* surfaces: glassy near-black instead of navy */
.card, .side-card, .pd-facts div, .service-price, .service-benefits, .library-note, .curr-get li, .faculty-story article, .flagship-card, .portal, .service-card, .free-item, .filter-group, .ratecard li { background-color: rgba(9, 11, 18, .78); }
.portal, .service-card { background-image: radial-gradient(110% 80% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%); }
.service-nav { background: rgba(6, 8, 14, .8); }
.service-nav a.is-on, .chip.is-on { color: #1a1206; }
/* important numbers in warm gold */
.price b, .service-foot em, .faculty-facts b { color: var(--gold-3); }

/* Crash Courses (BG 2) + Masterclass (BG 1): studio photography under a dark-space treatment */
.space-photo { background: none; }
.space-photo .atmo-bg { z-index: -2; }
.space-photo .atmo-bg img { filter: blur(1.4px) saturate(.72) brightness(.62) contrast(1.05); animation: atmoDrift 60s ease-in-out infinite alternate; }
.space-photo .atmo-bg::before { background: linear-gradient(180deg, rgba(10, 8, 26, .35), rgba(4, 5, 12, .25) 60%, transparent); }
.space-photo .atmo-bg::after { background:
  linear-gradient(90deg, rgba(3, 5, 10, .95) 0%, rgba(3, 5, 10, .82) 34%, rgba(3, 5, 10, .38) 64%, rgba(3, 5, 10, .55) 100%),
  radial-gradient(120% 100% at 65% 40%, transparent 40%, rgba(2, 3, 8, .7) 100%),
  linear-gradient(180deg, rgba(3, 5, 10, .6) 0%, transparent 22%, transparent 62%, var(--bg) 100%); }
.space-photo > .cosmos { z-index: -1; opacity: .9; }
.sp-crash { --atmo-pos: 58% 42%; }
.sp-master { --atmo-pos: 60% 40%; }
@media (max-width: 700px) {
  .space-photo .atmo-bg::after { background: linear-gradient(180deg, rgba(3, 5, 10, .7) 0%, rgba(3, 5, 10, .82) 50%, var(--bg) 100%); }
  .sp-crash { --atmo-pos: 62% 40%; } .sp-master { --atmo-pos: 56% 35%; }
}

/* =========================================================
   Motion system (media.js adds .mo + .mo-<kind>; .in when on screen)
   ========================================================= */
.rv { opacity: 1; translate: none; filter: none; }           /* retire the old single fade */
.mo { transition-timing-function: cubic-bezier(.16, .84, .24, 1); }
.mo-rise { opacity: 0; translate: 0 34px; filter: blur(10px); }
.mo-rise.in { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity 1.3s, translate 1.4s cubic-bezier(.16, .84, .24, 1), filter 1.2s; }
.mo-slide { opacity: 0; translate: -16px 0; }
.mo-slide.in { opacity: 1; translate: 0 0; transition: opacity .8s .1s, translate .9s cubic-bezier(.16, .84, .24, 1) .1s; }
.mo-mask { clip-path: inset(0 0 100% 0); translate: 0 .35em; }
.mo-mask.in { clip-path: inset(0 0 -20% 0); translate: 0 0; transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1), translate 1.1s cubic-bezier(.16, .84, .24, 1); }
.mo-fade { opacity: 0; translate: 0 10px; }
.mo-fade.in { opacity: 1; translate: 0 0; transition: opacity 1s .25s, translate 1s cubic-bezier(.16, .84, .24, 1) .25s; }
.mo-up { opacity: 0; translate: 0 28px; }
.mo-up.in { opacity: 1; translate: 0 0; transition: opacity .9s var(--mo-d, 0ms), translate 1s cubic-bezier(.16, .84, .24, 1) var(--mo-d, 0ms); }
.mo-pop { opacity: 0; scale: .9; }
.mo-pop.in { opacity: 1; scale: 1; transition: opacity .7s .15s, scale .8s cubic-bezier(.34, 1.56, .64, 1) .15s; }
/* hero words: slow float + scroll parallax (uses `top`, so it composes with the reveal) */
.page-hero h1, .soon-page h1, .faculty-hero h1, .scrub-copy h1, .mentorship-hero h1, .service-hero h1 { position: relative; top: var(--par, 0px); }
.mo-rise.in { animation: titleFloat 9s ease-in-out 1.6s infinite; }
/* magnetic buttons */
.btn, .scrub-cue, .portal-go { translate: var(--mx, 0) var(--my, 0); transition: translate .35s cubic-bezier(.16, .84, .24, 1), transform .25s, box-shadow .3s, background .3s, color .3s; }
.btn.is-magnet { transition: translate .08s linear, transform .25s, box-shadow .3s; scale: 1.035; }
/* cards: lift + warm glow on hover */
.service-card:hover, .card:hover, .portal:hover { box-shadow: 0 50px 90px -46px rgba(0, 0, 0, .95), 0 0 0 1px rgba(233, 201, 139, .28), 0 18px 60px -30px rgba(233, 170, 80, .35); }
@media (prefers-reduced-motion: reduce) {
  .mo, .mo-rise, .mo-slide, .mo-mask, .mo-fade, .mo-up, .mo-pop { opacity: 1 !important; translate: none !important; filter: none !important; clip-path: none !important; scale: none !important; animation: none !important; }
  .btn { translate: none !important; scale: none !important; }
}

/* =========================================================
   Services: champagne type over the video, clearer cards and summaries
   ========================================================= */
.scrub-copy h1 { color: var(--champagne); background: linear-gradient(180deg, #fbf1dc 0%, #eedcb6 55%, #c9a770 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(233, 170, 80, .08)); }
.scrub-shade { background:
  linear-gradient(90deg, rgba(3, 5, 10, .92) 0%, rgba(3, 5, 10, .66) 38%, rgba(3, 5, 10, .22) 72%, rgba(3, 5, 10, .5) 100%),
  linear-gradient(180deg, rgba(3, 5, 10, .55) 0%, transparent 25%, transparent 70%, var(--bg) 100%),
  radial-gradient(90% 80% at 70% 50%, rgba(46, 34, 96, .16), transparent 70%); }
.scrub-video { filter: saturate(.7) brightness(.72) sepia(.08); }
.service-card p { font-size: 14.5px; color: var(--text-2); }
.service-get { display: grid; gap: 2px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(233, 201, 139, .14); background: rgba(233, 201, 139, .04); font-size: 13.5px; font-weight: 600; color: var(--champagne); }
.service-get i { font: 600 10px var(--font-mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.service-facts { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; margin: 26px 0 0; max-width: 620px; }
.service-facts > div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(9, 11, 18, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.service-facts > div.arrow { display: grid; place-items: center; padding: 0 2px; border: 0; background: none; color: var(--gold); font-size: 20px; }
.service-facts > div.full { grid-column: 1 / -1; display: flex; gap: 12px; align-items: baseline; }
.service-facts dt { font: 600 10px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.service-facts dd { margin: 0; font-weight: 600; color: var(--champagne); font-size: 14.5px; }
@media (max-width: 560px) { .service-facts { grid-template-columns: 1fr; } .service-facts > div.arrow { display: none; } }
.service-hero { background: radial-gradient(90% 90% at 80% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgba(46, 34, 96, .16), transparent 60%); }
.service-block h2, .service-benefits h2, .curr-head h2 { color: var(--champagne); }
/* studio photography: pull the strong blue cast toward neutral so photos sit in the same deep-space world */
.atmo-bg img { filter: blur(var(--atmo-blur, 1.2px)) saturate(.62) sepia(.14) brightness(var(--atmo-bright, .8)) contrast(1.04); }
.faculty-hero-bg img { filter: saturate(.72) sepia(.1) brightness(.55); }

/* =========================================================
   Store portals v2 — cinematic cards: artwork layer + light + stardust, real HTML text
   ========================================================= */
.portals, .portals-more + .portals { display: none; }
.portals2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.p2 {
  --pa: #e2aa55;
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 600px; border-radius: 22px; color: var(--text);
  background: #05060b;
  border: 1px solid color-mix(in srgb, var(--pa) 30%, transparent);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .02), 0 0 40px -30px var(--pa);
  transition: translate .7s cubic-bezier(.16, .84, .24, 1), border-color .6s, box-shadow .7s;
}
.p2:hover { translate: 0 -8px; border-color: color-mix(in srgb, var(--pa) 62%, transparent);
  box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .03), 0 0 70px -24px color-mix(in srgb, var(--pa) 70%, transparent); }
.p2-art { position: absolute; inset: 0 0 auto 0; height: 76%; z-index: -3; overflow: hidden; }
.p2-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: translate3d(var(--ax, 0), var(--ay, 0), 0) scale(1.04);
  transition: transform 1.6s cubic-bezier(.16, .84, .24, 1), filter .8s; filter: saturate(.95) brightness(.9); animation: p2Breathe 18s ease-in-out infinite alternate; }
.p2:hover .p2-art img { transform: translate3d(var(--ax, 0), var(--ay, 0), 0) scale(1.1); filter: saturate(1.05) brightness(1); }
@keyframes p2Breathe { from { scale: 1; } to { scale: 1.035; } }
/* slow drifting light across the artwork */
.p2-light { position: absolute; inset: 0; z-index: -2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(38% 26% at var(--lx, 50%) 28%, color-mix(in srgb, var(--pa) 30%, transparent), transparent 70%);
  opacity: .5; animation: p2Light 14s ease-in-out infinite alternate; transition: opacity .6s; }
.p2:hover .p2-light { opacity: .85; }
@keyframes p2Light { from { background-position: -40px 0; transform: translateX(-6%); } to { transform: translateX(6%); } }
/* stardust: two slow layers of tiny points */
.p2-dust { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.p2-dust i { position: absolute; inset: -40% 0 0 0; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff8e6 50%, transparent 51%), radial-gradient(1px 1px at 68% 14%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 34% 58%, color-mix(in srgb, var(--pa) 80%, #fff) 50%, transparent 51%), radial-gradient(1px 1px at 82% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 78%, #fff8e6 50%, transparent 51%), radial-gradient(1.2px 1.2px at 56% 36%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 70%, color-mix(in srgb, var(--pa) 70%, #fff) 50%, transparent 51%), radial-gradient(1px 1px at 44% 8%, #fff 50%, transparent 51%);
  background-size: 100% 50%; animation: p2Dust 38s linear infinite; }
.p2-dust i + i { opacity: .35; background-size: 70% 40%; animation-duration: 60s; animation-direction: reverse; }
@keyframes p2Dust { from { transform: translateY(0); } to { transform: translateY(40%); } }
/* readable text area: artwork dissolves into near-black */
.p2-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 5, 10, .15) 0%, transparent 18%, transparent 36%, rgba(4, 5, 10, .72) 56%, #05060b 70%, #05060b 100%),
    radial-gradient(120% 60% at 50% 100%, color-mix(in srgb, var(--pa) 10%, transparent), transparent 70%); }
.p2-body { position: relative; display: grid; justify-items: start; gap: 8px; padding: 0 26px 28px; }
.p2-body em { font: 600 11px var(--font-mono); font-style: normal; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--pa) 85%, #fff); }
.p2-body b { font: 600 clamp(30px, 2.6vw, 40px)/1.02 'Cormorant Garamond', Georgia, serif; letter-spacing: 0; text-transform: none;
  background: linear-gradient(180deg, #fbf3e2 0%, color-mix(in srgb, var(--pa) 38%, #f3e6cb) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .7)); }
.p2-sample-packs .p2-body b { background: linear-gradient(180deg, #ffe3b0 0%, #e2aa55 100%); -webkit-background-clip: text; background-clip: text; }
.p2-body small { font-size: 14.5px; line-height: 1.6; color: var(--text-2); font-weight: 300; min-height: 4.8em; }
.p2-orn { display: block; width: 100%; margin: 8px 0 10px; text-align: center; }
.p2-orn svg { width: 120px; height: 16px; fill: none; stroke: color-mix(in srgb, var(--pa) 60%, transparent); stroke-width: 1; opacity: .85; }
.p2-orn svg .f { fill: color-mix(in srgb, var(--pa) 75%, transparent); stroke: none; }
.p2-btn { justify-self: stretch; display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pa) 55%, transparent); color: color-mix(in srgb, var(--pa) 80%, #fff);
  font: 600 14px var(--font-body); letter-spacing: .24em; text-transform: uppercase;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pa) 8%, transparent), transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 0 transparent; transition: background .5s, box-shadow .5s, color .4s, border-color .4s; }
.p2-btn svg { transition: translate .4s cubic-bezier(.16, .84, .24, 1); }
.p2:hover .p2-btn { color: #fff; border-color: color-mix(in srgb, var(--pa) 85%, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--pa) 22%, transparent), color-mix(in srgb, var(--pa) 6%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 30px -12px color-mix(in srgb, var(--pa) 60%, transparent); }
.p2:hover .p2-btn svg { translate: 4px 0; }
.p2:focus-visible { outline: 2px solid var(--pa); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .p2-art img, .p2-light, .p2-dust i { animation: none; } }
@media (max-width: 1180px) { .portals2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p2 { min-height: 560px; } }
@media (max-width: 640px) {
  .portals2 { grid-template-columns: 1fr; gap: 16px; }
  .p2 { min-height: 520px; }
  .p2-art { height: 70%; }
  .p2-body small { min-height: 0; }
}
/* services hero video: keep it crisp — lighter grade, overlay only where the text sits */
.scrub-video { filter: saturate(.85) brightness(.9) contrast(1.04); image-rendering: auto; }
.scrub-shade { background:
  linear-gradient(90deg, rgba(3, 5, 10, .88) 0%, rgba(3, 5, 10, .55) 34%, rgba(3, 5, 10, .08) 66%, rgba(3, 5, 10, .25) 100%),
  linear-gradient(180deg, rgba(3, 5, 10, .45) 0%, transparent 22%, transparent 76%, var(--bg) 100%); }

/* Faculty hero: the photo sits on the right, face fully visible, dissolving into space behind the text */
.faculty-hero-bg { left: 36%; }
.faculty-hero-bg img { object-position: 50% 22%; filter: saturate(.85) sepia(.08) brightness(.8) contrast(1.04);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%), linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%); }
.faculty-hero-bg::after { background:
  linear-gradient(180deg, rgba(3, 5, 10, .35) 0%, transparent 25%, transparent 62%, var(--bg) 100%),
  radial-gradient(90% 90% at 70% 40%, transparent 50%, rgba(3, 5, 10, .55) 100%); }
@media (max-width: 860px) {
  .faculty-hero { padding-top: calc(var(--header-h) + 300px); }
  .faculty-hero-bg { left: 0; bottom: auto; height: 460px; }
  .faculty-hero-bg img { object-position: 50% 18%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
}

/* ---------- Product previews (audio · MIDI · video · gallery) ---------- */
.pd-listen { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 18px; font: 600 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.pd-listen:hover { color: var(--gold-3); }
.pd-previews { display: grid; gap: 28px; margin-top: 56px; scroll-margin-top: 90px; }
.pv-block { position: relative; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(20, 22, 34, .72), rgba(8, 10, 18, .72)); backdrop-filter: blur(6px); }
.pv-head { margin-bottom: 18px; }
.pv-head h2 { margin: 8px 0 0; font-size: clamp(22px, 3vw, 30px); }
.pv-note { max-width: 70ch; margin: 12px 0 0; color: var(--muted); line-height: 1.6; }
.pv-midi .pv-note { padding: 12px 16px; border-left: 2px solid var(--gold); border-radius: 0 10px 10px 0; background: rgba(212, 166, 89, .06); color: var(--champagne, #f2e6cb); }
.pv-fine { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.pv-tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pv-track { display: grid; grid-template-columns: 40px 26px minmax(150px, 1.1fr) minmax(0, 2fr) 42px; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 14px; transition: background .2s; }
.pv-track:hover, .pv-track:has(.is-playing) { background: rgba(233, 201, 139, .05); }
.pv-play.play-btn { position: static; width: 40px; height: 40px; opacity: 1; transform: none; }
.pv-play.play-btn:hover { transform: scale(1.06); }
.pv-n { font: 500 12px var(--font-mono); color: var(--muted); text-align: right; }
.pv-name { display: grid; gap: 3px; min-width: 0; }
.pv-name b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-name small { font: 500 11px var(--font-mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-wave.waveform { height: 36px; margin: 0; gap: 2px; }
.pv-track:has(.is-playing) .pv-name b { color: var(--gold-3); }
.pv-dur { font: 500 12px var(--font-mono); color: var(--muted); text-align: right; }
.pv-player { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
.pv-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pv-shot { padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: none; cursor: zoom-in; }
.pv-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s; }
.pv-shot:hover img { transform: scale(1.04); }
@media (max-width: 720px) {
  .pv-track { grid-template-columns: 38px minmax(0, 1fr) 40px; gap: 10px; }
  .pv-n { display: none; }
  .pv-wave.waveform { grid-column: 1 / -1; height: 28px; order: 5; }
  .pv-wave.waveform span:nth-child(odd) { display: none; }
}

/* Services opens straight onto the four options (no scroll video) */
.services-head { padding-bottom: 8px; border-bottom: 0; }
.services-options { padding-top: 28px; }

/* Faculty hero: full-bleed photo; the frame is shifted right so the text never sits on Protonix's face */
.faculty-hero-bg { left: 0; }
.faculty-hero-bg img { position: absolute; top: 0; left: 0; width: 140%; max-width: none; object-position: 50% 30%;
  filter: saturate(.9) sepia(.06) brightness(.82) contrast(1.04); -webkit-mask-image: none; mask-image: none; }
.faculty-hero-bg::after { background:
  linear-gradient(90deg, rgba(3, 5, 10, .82) 0%, rgba(3, 5, 10, .5) 30%, rgba(3, 5, 10, 0) 52%),
  linear-gradient(180deg, rgba(3, 5, 10, .4) 0%, transparent 22%, transparent 70%, var(--bg) 100%); }
@media (min-width: 861px) { .faculty-hero h1 { font-size: min(112px, calc((100vw - 40px) / 11)); } .faculty-hero .lead { max-width: 40ch; } }
@media (max-width: 860px) {
  .faculty-hero-bg img { width: 100%; object-position: 48% 20%; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .faculty-hero-bg::after { background: linear-gradient(180deg, rgba(3, 5, 10, .35) 0%, transparent 30%); }
}

/* Store: the four category cards fit in one window on desktop/laptop — compact heading, cards sized to the viewport */
@media (min-width: 1181px) {
  .atmo-store { --atmo-pad-top: 18px; padding-bottom: 28px; }
  .atmo-store .crumbs { margin-bottom: 0; }
  .atmo-store h1 { margin: 6px 0 4px; font-size: clamp(34px, 3.4vw, 52px); }
  .atmo-store .lead { margin: 0; font-size: 16px; }
  .atmo-store .portals2 { margin-top: 22px; }
  .atmo-store .p2 { min-height: 0; height: clamp(430px, calc(100svh - var(--header-h) - 262px), 640px); }
  .atmo-store .p2-body { gap: 6px; padding: 0 22px 22px; }
  .atmo-store .p2-body small { min-height: 0; font-size: 14px; line-height: 1.5; }
  .atmo-store .p2-orn { margin: 4px 0 6px; }
  .atmo-store .p2-btn { height: 48px; }
}

/* Stardust over photographs: drawn above the picture and screen-blended into it (1-on-1, Mentorship, Faculty) */
.photo-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: 1; }
.faculty-hero { isolation: isolate; }
.faculty-gallery { position: relative; isolation: isolate; }
.faculty-gallery > .photo-dust { z-index: 2; }
.faculty-gallery .marquee { position: relative; z-index: 1; }

/* Planet names — editorial luxury: light serif capitals, wide tracking, champagne tone, a fine gold hairline.
   No extrusion; depth comes from a single soft shadow and a restrained glow on hover. */
.solar .planet-label { padding: 6px 10px 10px; }
.solar .planet-label b {
  position: relative; display: block;
  font: 500 clamp(19px, 1.75vw, 28px)/1 'Cormorant Garamond', Georgia, serif; letter-spacing: .2em; text-transform: uppercase;
  color: #f4ead6; background: none; -webkit-text-fill-color: currentColor; filter: none; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .95), 0 0 1px rgba(0, 0, 0, .6);
  transition: color .5s, text-shadow .5s, letter-spacing .7s cubic-bezier(.16, .84, .24, 1);
}
.solar .planet-label b::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; width: 38%; height: 1px; translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(226, 190, 122, .85), transparent);
  transition: width .7s cubic-bezier(.16, .84, .24, 1), opacity .5s; opacity: .7;
}
.solar .planet-label.is-on b { color: #fff8ea; letter-spacing: .24em; text-shadow: 0 2px 18px rgba(0, 0, 0, .95), 0 0 22px rgba(233, 201, 139, .35); }
.solar .planet-label.is-on b::after { width: 100%; opacity: 1; }
.solar .planet-label small { top: calc(100% + 6px); font: 500 10.5px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: #d9b36f; white-space: nowrap; }
@media (max-width: 700px) {
  .solar .planet-label b { font-size: 14px; letter-spacing: .14em; }
  .solar .planet-label b::after { bottom: -5px; }
}

/* Faculty: the official Protonix logo as the page heading */
.faculty-hero h1.faculty-logo { margin: 10px 0 6px -1.2%; font-size: 0; line-height: 0; text-transform: none; }
.faculty-logo img { display: block; width: min(600px, 50vw); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55)); }
@media (max-width: 860px) { .faculty-logo img { width: min(520px, 88vw); } }

/* Hero photos melt into the page: the photo layer itself fades out (mask) instead of ending on a solid colour,
   so the bottom dissolves into whatever the site backdrop is — nebula, stars and stardust included. */
.atmo-bg { background: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 74%, rgba(0, 0, 0, .18) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0, 0, 0, .55) 74%, rgba(0, 0, 0, .18) 88%, transparent 100%); }
.atmo-bg::after { background:
  linear-gradient(180deg, rgba(8, 8, 14, .35) 0%, transparent 18%),
  linear-gradient(90deg, rgba(8, 8, 14, .86) 0%, rgba(8, 8, 14, .62) 28%, rgba(8, 8, 14, .12) 60%, rgba(8, 8, 14, .28) 100%),
  radial-gradient(140% 110% at 62% 38%, transparent 45%, rgba(8, 8, 14, .6) 100%); }

/* ---------- Editorial typography ----------
   One voice for every headline: Cormorant Garamond (the Store-card and planet-label serif). Unbounded stays for the
   wordmark and small technical labels; Sora for body text. font-size-adjust keeps the serif's optical size close to
   the old headings, so layouts and line breaks hold. */
:root { --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; }
h1, h2, .page-title, .card-title, .service-card b, .flagship-card h2, .flagship-title h2 {
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1;
  font-size-adjust: .5;
}
h1, .page-title { font-weight: 500; line-height: .96; letter-spacing: -.018em; }
h2 { font-weight: 500; line-height: 1.02; }
.card-title, .service-card b { font-weight: 600; letter-spacing: 0; }
.p2-body b { font-size-adjust: none; }

/* ---------- Pointer light (media.js) ----------
   .spot: a soft spotlight under the pointer plus a gold light tracing the card's border (masked 1px ring).
   .cursor-light: one faint warm glow that follows the cursor across every page. */
.has-spot > .spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .45s ease; }
.has-spot > .spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: screen;
  background: radial-gradient(360px circle at var(--sx, 50%) var(--sy, 50%), rgba(246, 226, 181, .085), rgba(233, 201, 139, .03) 40%, transparent 70%); }
.has-spot > .spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(240, 206, 140, .75), rgba(233, 201, 139, .18) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.has-spot.spot-on > .spot { opacity: 1; }
.p2.has-spot > .spot::after { background: radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--pa) 90%, #fff), color-mix(in srgb, var(--pa) 25%, transparent) 45%, transparent 70%); }
.p2.has-spot > .spot::before { background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--pa) 16%, transparent), transparent 65%); }

.cursor-light { position: fixed; left: 0; top: 0; z-index: 40; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none;
  border-radius: 50%; mix-blend-mode: screen; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(closest-side, rgba(246, 222, 170, .075), rgba(200, 170, 255, .025) 45%, transparent 100%); will-change: transform; }
.cursor-light.is-on { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-light, .has-spot > .spot { display: none; } }

/* ---------- Homepage travel: fly into a planet (solar.js) ----------
   The veil at the end of the flight and the overlay the next page opens with are the SAME gradient, so the
   hand-over between documents is seamless; the browser's view transition cross-fades the swap itself. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease-out; }
:root { --warp-grad: radial-gradient(120% 90% at 50% 48%, color-mix(in srgb, var(--warp, #e9c98b) 42%, #03050a) 0%, color-mix(in srgb, var(--warp, #e9c98b) 14%, #03050a) 45%, #03050a 100%); }
.warp-veil { position: fixed; inset: 0; z-index: 4000; pointer-events: none; opacity: 0; background: var(--warp-grad); will-change: opacity; }
.solar.is-traveling .planet-label, .solar.is-traveling .solar-haze { opacity: 0 !important; transition: opacity .3s ease; }
.solar.is-traveling .planet { pointer-events: none; }
.solar-stars { will-change: transform, opacity; }
/* arrival: the new page opens out of the planet's colour */
html.warp-in body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: var(--warp-grad);
  animation: warpArrive .9s cubic-bezier(.4, 0, .2, 1) .05s both; }
html.warp-in main { animation: warpMain 1s cubic-bezier(.16, .84, .24, 1) both; }
@keyframes warpArrive { from { opacity: 1; } to { opacity: 0; } }
@keyframes warpMain { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.warp-in body::after { display: none; } html.warp-in main { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- Artwork-derived card light (media.js sets --glow from each card's own artwork) ----------
   Light sits mostly at the edges and corners and slightly behind the card, blending into the black; hover lets it
   bloom a little further. Default: warm gold until the artwork has been read. */
.p2, .card, .free-item { --glow: 214 170 100; }
.p2::after, .card::after, .free-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  box-shadow: inset 0 0 0 1px rgb(var(--glow) / .16), inset 0 0 38px -14px rgb(var(--glow) / .32), inset 0 -60px 80px -70px rgb(var(--glow) / .35);
  mix-blend-mode: screen; transition: box-shadow .8s cubic-bezier(.16, .84, .24, 1), opacity .8s; }
.p2 { border-color: rgb(var(--glow) / .26);
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95), 0 0 42px -18px rgb(var(--glow) / .3), 0 40px 80px -48px rgb(var(--glow) / .42), 0 0 120px -60px rgb(var(--glow) / .35); }
.p2:hover { border-color: rgb(var(--glow) / .5);
  box-shadow: 0 60px 100px -50px rgba(0, 0, 0, .95), 0 0 56px -16px rgb(var(--glow) / .45), 0 44px 100px -44px rgb(var(--glow) / .6), 0 0 180px -60px rgb(var(--glow) / .5); }
.p2:hover::after, .card:hover::after, .free-item:hover::after {
  box-shadow: inset 0 0 0 1px rgb(var(--glow) / .3), inset 0 0 50px -12px rgb(var(--glow) / .45), inset 0 -80px 100px -70px rgb(var(--glow) / .5); }
.card, .free-item { border-color: rgb(var(--glow) / .16);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9), 0 0 36px -20px rgb(var(--glow) / .28), 0 26px 60px -44px rgb(var(--glow) / .38); }
.card:hover, .free-item:hover { border-color: rgb(var(--glow) / .42);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 50px -18px rgb(var(--glow) / .42), 0 34px 90px -40px rgb(var(--glow) / .55), 0 0 140px -50px rgb(var(--glow) / .4); }
/* the bottom mood-light on the store portals follows the artwork too */
.p2 .p2-shade { background: linear-gradient(180deg, rgba(4, 5, 10, .15) 0%, transparent 18%, transparent 36%, rgba(4, 5, 10, .72) 56%, #05060b 70%, #05060b 100%),
  radial-gradient(120% 60% at 50% 100%, rgb(var(--glow) / .12), transparent 70%); }
.free-item { position: relative; }

/* ---------- Light emitted by the box itself ----------
   The card is the light source: a bright rim right at its edge, then layered halos in the artwork's colour that
   spread out and fade into space (no dark drop shadow swallowing it). Inside, the edges glow as if light leaks
   out of the box. It breathes very slowly; hover opens it up. */
@property --gl { syntax: '<number>'; inherits: true; initial-value: 1; }
.p2, .card, .free-item { --gl: 1; animation: boxBreathe 7s ease-in-out infinite alternate; }
.p2:nth-child(2n), .card:nth-child(2n) { animation-delay: -3.5s; }
@keyframes boxBreathe { from { --gl: .86; } to { --gl: 1.08; } }
.p2 {
  border-color: rgb(var(--glow) / calc(.38 * var(--gl)));
  box-shadow:
    0 0 0 1px rgb(var(--glow) / calc(.18 * var(--gl))),
    0 0 18px 1px rgb(var(--glow) / calc(.34 * var(--gl))),
    0 0 60px 6px rgb(var(--glow) / calc(.2 * var(--gl))),
    0 0 140px 24px rgb(var(--glow) / calc(.11 * var(--gl))),
    0 40px 120px 10px rgb(var(--glow) / calc(.08 * var(--gl)));
  transition: translate .7s cubic-bezier(.16, .84, .24, 1), border-color .6s, box-shadow .8s cubic-bezier(.16, .84, .24, 1);
}
.p2:hover {
  border-color: rgb(var(--glow) / .62);
  box-shadow:
    0 0 0 1px rgb(var(--glow) / .3),
    0 0 24px 2px rgb(var(--glow) / .5),
    0 0 80px 10px rgb(var(--glow) / .3),
    0 0 200px 40px rgb(var(--glow) / .16),
    0 50px 160px 20px rgb(var(--glow) / .12);
}
.card, .free-item {
  border-color: rgb(var(--glow) / calc(.3 * var(--gl)));
  box-shadow:
    0 0 14px 0 rgb(var(--glow) / calc(.26 * var(--gl))),
    0 0 46px 4px rgb(var(--glow) / calc(.14 * var(--gl))),
    0 0 110px 16px rgb(var(--glow) / calc(.07 * var(--gl)));
}
.card:hover, .free-item:hover {
  border-color: rgb(var(--glow) / .55);
  box-shadow:
    0 0 20px 1px rgb(var(--glow) / .42),
    0 0 70px 8px rgb(var(--glow) / .24),
    0 0 160px 28px rgb(var(--glow) / .12);
}
/* light leaking from inside the box, strongest at the rim */
.p2::after, .card::after, .free-item::after {
  box-shadow: inset 0 0 0 1px rgb(var(--glow) / .28), inset 0 0 26px -6px rgb(var(--glow) / .42), inset 0 0 70px -30px rgb(var(--glow) / .35);
}
.p2:hover::after, .card:hover::after, .free-item:hover::after {
  box-shadow: inset 0 0 0 1px rgb(var(--glow) / .45), inset 0 0 32px -6px rgb(var(--glow) / .6), inset 0 0 90px -30px rgb(var(--glow) / .5);
}
/* give the light room so neighbouring halos don't collide */
.portals2 { gap: 28px; }
@media (prefers-reduced-motion: reduce) { .p2, .card, .free-item { animation: none; } }
/* keep the light's hover easing on cards that also have the entrance motion */
.card.mo-up.in, .free-item.mo-up.in, .service-card.mo-up.in { transition: opacity .9s var(--mo-d, 0ms), translate 1s cubic-bezier(.16, .84, .24, 1) var(--mo-d, 0ms), transform .55s cubic-bezier(.16, .84, .24, 1), box-shadow .8s cubic-bezier(.16, .84, .24, 1), border-color .6s; }

/* Reading comfort: over cards and text, the trailing cursor light fades right down, and the card's own spotlight
   keeps only its edge light (no wash over the text). */
.cursor-light { transition: opacity .45s ease; }
html.light-dim .cursor-light.is-on { opacity: .12; }
.has-spot > .spot::before { transition: opacity .4s ease; }
.has-spot > .spot::before { opacity: .4; }

/* ---------- Card glow: minimal (readability first) ----------
   A fine rim and a soft halo outside the box only; nothing washes over the card's text. */
@keyframes boxBreathe { from { --gl: .92; } to { --gl: 1.04; } }
.p2::after, .card::after, .free-item::after { box-shadow: inset 0 0 0 1px rgb(var(--glow) / .2); mix-blend-mode: normal; }
.p2:hover::after, .card:hover::after, .free-item:hover::after { box-shadow: inset 0 0 0 1px rgb(var(--glow) / .38); }
.p2 { border-color: rgb(var(--glow) / calc(.3 * var(--gl)));
  box-shadow: 0 0 14px 0 rgb(var(--glow) / calc(.2 * var(--gl))), 0 0 50px 4px rgb(var(--glow) / calc(.1 * var(--gl))), 0 0 120px 14px rgb(var(--glow) / calc(.05 * var(--gl))); }
.p2:hover { border-color: rgb(var(--glow) / .5);
  box-shadow: 0 0 18px 0 rgb(var(--glow) / .3), 0 0 70px 6px rgb(var(--glow) / .15), 0 0 160px 24px rgb(var(--glow) / .08); }
.card, .free-item { border-color: rgb(var(--glow) / calc(.2 * var(--gl)));
  box-shadow: 0 0 10px 0 rgb(var(--glow) / calc(.14 * var(--gl))), 0 0 36px 2px rgb(var(--glow) / calc(.06 * var(--gl))); }
.card:hover, .free-item:hover { border-color: rgb(var(--glow) / .4);
  box-shadow: 0 0 14px 0 rgb(var(--glow) / .22), 0 0 54px 4px rgb(var(--glow) / .1); }
.has-spot > .spot::before { opacity: .25; }
/* text inside the cards sits on a calm, dark base */
.card-body, .p2-body { position: relative; z-index: 4; }

/* ---------- Store portal hover worlds (store-fx.js) ---------- */
.store-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 30; pointer-events: none; }
.site-aura { position: fixed; inset: 0; z-index: 25; pointer-events: none; mix-blend-mode: screen; }
.site-aura i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s cubic-bezier(.16, .84, .24, 1); }
.site-aura i[data-a="sample-packs"] { background: radial-gradient(70% 60% at 50% 0%, rgba(255, 176, 80, .2), transparent 70%), radial-gradient(60% 50% at 50% 100%, rgba(255, 150, 60, .1), transparent 70%); }
.site-aura i[data-a="presets"] { background: radial-gradient(70% 60% at 50% 100%, rgba(50, 230, 160, .18), transparent 70%), radial-gradient(60% 50% at 20% 10%, rgba(40, 200, 210, .1), transparent 70%); }
.site-aura i[data-a="midi"] { background: radial-gradient(70% 60% at 50% 20%, rgba(150, 90, 255, .22), transparent 70%), radial-gradient(50% 50% at 85% 90%, rgba(255, 110, 200, .1), transparent 70%); }
.site-aura i[data-a="plugins"] { background: radial-gradient(60% 55% at 55% 40%, rgba(255, 165, 70, .16), transparent 70%), radial-gradient(60% 60% at 15% 85%, rgba(80, 210, 245, .1), transparent 70%); }
html[data-aura="sample-packs"] .site-aura i[data-a="sample-packs"], html[data-aura="presets"] .site-aura i[data-a="presets"],
html[data-aura="midi"] .site-aura i[data-a="midi"], html[data-aura="plugins"] .site-aura i[data-a="plugins"] { opacity: 1; }
/* the other portals step back while one is open */
.portals2.has-focus .p2:not(:hover) { filter: brightness(.6) saturate(.8); }
.portals2 .p2 { transition: translate .7s cubic-bezier(.16, .84, .24, 1), border-color .6s, box-shadow .8s cubic-bezier(.16, .84, .24, 1), filter .7s ease; }
/* the page tint skips the open card, so its artwork keeps its true colours */
.site-aura.has-hole {
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) var(--hx) var(--hy) / var(--hw) var(--hh) no-repeat;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat exclude, linear-gradient(#000 0 0) var(--hx) var(--hy) / var(--hw) var(--hh) no-repeat;
}

/* Find my purchase: "orders on this device" rows wrap on phones (long emails / payment ids) */
.recent-orders a { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.recent-orders a > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .recent-orders a { display: grid; grid-template-columns: 1fr; } }

/* ── Legal / support layer ── */
.fine { flex-wrap: wrap; text-align: center; }
.delivery-note { margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(78, 205, 196, .05); }
.delivery-note b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
.delivery-note p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.business-card { display: grid; gap: 4px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.business-card b { color: var(--text); font-size: 15px; }
.business-card address { display: grid; font-style: normal; }
.business-card a { color: var(--gold-2); }
.policy .lead-sm { font-size: 16px; line-height: 1.65; color: var(--text-2); }
.policy-contact .business-card { margin-top: 8px; }
.policy ul { padding-left: 20px; }
.policy li { margin: 6px 0; }
.footer-bottom span { overflow-wrap: anywhere; }
.footer-grid > div { min-width: 0; }
.footer-grid > div > a:not(.brand) { overflow-wrap: anywhere; }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .policy-nav { flex-wrap: wrap; overflow: visible; } .policy-nav a { white-space: normal; } }
.contact-grid > * { min-width: 0; }
.contact-card, .contact-card a { overflow-wrap: anywhere; min-width: 0; }
.contact-card > div { min-width: 0; }

/* ── Global mini player: persistent across pages (nav.js), progress, volume, mobile safe areas ── */
.player { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
body.player-open { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.player-progress { position: absolute; left: 16px; right: 16px; top: 0; height: 22px; transform: translateY(-50%); cursor: pointer; touch-action: none; z-index: 2; outline: none; }
.player-progress i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(233, 201, 139, .16); }
.player-progress i::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--gold-2)); box-shadow: 0 0 12px rgba(233, 201, 139, .55); }
.player-progress i::after { content: ''; position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 4px rgba(233, 201, 139, .18), 0 0 14px rgba(233, 201, 139, .7); transform: scale(0); transition: transform .2s var(--ease); }
.player-progress:hover i::after, .player-progress:focus-visible i::after, .player-progress:active i::after { transform: scale(1); }
.player-progress:focus-visible i { box-shadow: 0 0 0 2px rgba(233, 201, 139, .35); }
.player-art { position: relative; flex-shrink: 0; display: block; }
.player-art img { display: block; }
.player-eq { position: absolute; right: 4px; bottom: 4px; display: none; align-items: flex-end; gap: 2px; height: 12px; padding: 2px 3px; border-radius: 4px; background: rgba(5, 9, 20, .72); }
.player-eq i { width: 2px; height: 30%; border-radius: 1px; background: var(--gold-2); animation: pa-eq .9s ease-in-out infinite; }
.player-eq i:nth-child(2) { animation-delay: -.3s; }
.player-eq i:nth-child(3) { animation-delay: -.6s; }
.player.is-playing .player-eq { display: flex; }
@keyframes pa-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .player-eq i { animation: none; height: 70%; } }
.player-now { display: block; font: 600 9.5px var(--font-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.player:not(.is-playing) .player-now { color: var(--muted); }
.player-vol { display: flex; align-items: center; flex-shrink: 0; }
.player-vol input { -webkit-appearance: none; appearance: none; width: 84px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-2), rgba(233, 201, 139, .18)); cursor: pointer; }
.player-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px rgba(233, 201, 139, .6); border: 0; }
.player-vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--gold-2); border: 0; }
.player-close { flex-shrink: 0; }
html.is-navigating main { opacity: .55; transition: opacity .15s; }
html.is-navigating { cursor: progress; }
@media (pointer: coarse), (max-width: 960px) { .player-vol { display: none; } }
@media (max-width: 960px) {
  .player { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.player-open { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.player-open .sticky-buy { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .player .player-inner { margin: 0; width: 100%; max-width: none; }   /* .wrap's page margins don't belong inside the floating bar */
  .player-progress { left: 12px; right: 12px; height: 28px; }
  .player-progress i::after { transform: scale(.85); }
  .player-toggle { width: 48px; height: 48px; }
  .player-close { width: 44px; height: 44px; }
  .player-time { font-size: 11px; white-space: nowrap; }
  .player-now { font-size: 8.5px; margin-bottom: 1px; }
  .toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
  .player-inner { gap: 8px; padding: 0 8px; }
  .player-art img { width: 38px; height: 38px; }
  .player-time { font-size: 10.5px; }
}
@media (max-width: 360px) { .player-art { display: none; } }

/* ---------- Currency selector (header + mobile menu + checkout) ---------- */
.cur { position: relative; display: flex; align-items: center; }
.cur-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 38px; padding: 0 10px 0 12px; border-radius: 11px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); cursor: pointer;
  font: 600 12.5px/1 var(--font-mono); letter-spacing: .04em; transition: border-color .2s, color .2s, background .2s;
}
.cur-btn:hover, .cur-btn[aria-expanded="true"] { border-color: rgba(212, 166, 89, .55); color: var(--gold-3); background: rgba(212, 166, 89, .08); }
.cur-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cur-sym { color: var(--gold-2); }
.cur-sym:empty { display: none; }
.cur-caret { opacity: .7; transition: transform .2s var(--ease); }
.cur-btn[aria-expanded="true"] .cur-caret { transform: rotate(180deg); }
.cur-menu, .cur-suggest {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 270px; padding: 10px;
  border: 1px solid var(--line-2); border-radius: 16px; background: rgba(14, 14, 22, .97); box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.cur-menu-head { display: block; padding: 4px 8px 8px; font: 600 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cur-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cur-menu [data-cur-set] {
  width: 100%; display: grid; grid-template-columns: 42px 34px 1fr; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text-2); cursor: pointer; text-align: left; font: inherit; font-size: 13.5px;
}
.cur-menu [data-cur-set] b { font: 700 12.5px var(--font-mono); letter-spacing: .04em; color: var(--text); }
.cur-menu [data-cur-set] span { color: var(--gold-2); font-weight: 600; }
.cur-menu [data-cur-set] em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.cur-menu [data-cur-set]:hover, .cur-menu [data-cur-set]:focus-visible { background: rgba(255, 255, 255, .05); outline: none; border-color: var(--line); }
.cur-menu [aria-selected="true"] { background: rgba(212, 166, 89, .1); border-color: rgba(212, 166, 89, .35); }
.cur-menu-note { margin: 8px 8px 2px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.cur-suggest { width: 280px; padding: 14px; }
.cur-suggest p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.cur-suggest div { display: flex; gap: 8px; flex-wrap: wrap; }
.mm-cur, .pay-cur-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-cur { padding: 4px 0 10px; }
.mm-cur [data-cur-set], .pay-cur-opts [data-cur-set] {
  min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--text-2); font: 600 12.5px var(--font-mono); letter-spacing: .03em; cursor: pointer;
}
.mm-cur [aria-checked="true"], .pay-cur-opts [aria-checked="true"] { border-color: var(--gold); color: var(--gold-3); background: rgba(212, 166, 89, .12); }
.pay-cur { margin-bottom: 14px; }
.pay-cur-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pay-cur-hint { margin: 10px 0 0; font-size: 13px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay-methods [hidden] { display: none; }
.sum-total small { font: 600 11px var(--font-mono); color: var(--muted); }
@media (max-width: 640px) {
  .cur-btn { height: 36px; padding: 0 8px; gap: 3px; font-size: 12px; }
  .cur-menu, .cur-suggest { position: fixed; top: calc(var(--header-h) + 6px); left: 16px; right: 16px; width: auto; }
  .cur-menu [data-cur-set], .mm-cur [data-cur-set], .pay-cur-opts [data-cur-set] { min-height: 44px; }
}
@media (max-width: 380px) { .cur-sym { display: none; } .cur-caret { display: none; } }

/* ---------- Product cards: artwork first, quieter price (polish pass 2026-10-05) ----------
   Hierarchy: artwork → category → title → price → Add to cart. The price keeps the gold, but uses the body face at a
   modest size instead of the wide display face, so it no longer competes with the cover. */
.card .card-foot .price { gap: 6px; }
.card .card-foot .price b { font: 600 16px/1.2 var(--font-body); letter-spacing: .01em; color: var(--gold-3); }
.card .card-foot .price s { font-size: 12.5px; }
.card-art img { background: #06060b; }

/* Tablet / large phone: two columns — art stays edge to edge, a compact body underneath. */
@media (max-width: 640px) {
  .card .card-foot .price b { font-size: 15px; }
  .card-foot .btn { --h: 40px; }
}

/* Phones: one column. The cover spans the card at its native 3:2, the body is a tight three-line block, and price +
   button share one row so the card stays short. */
@media (max-width: 520px) {
  .grid-cards, .grid-store { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .grid-cards > :nth-child(4) { display: flex; }
  .card { border-radius: 16px; }
  .card-art { aspect-ratio: 3 / 2; }
  .card-body { padding: 14px 16px 16px; }
  .card-meta { font-size: 10px; gap: 8px; margin-bottom: 6px; }
  .card-meta span + span { display: inline; }
  .card-title { font-size: 22px; line-height: 1.12; margin-bottom: 2px; }
  .card-sub { font-size: 13px; margin: 0 0 12px; }
  .card-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
  .card-foot .price { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0; }
  .card .card-foot .price b { font-size: 16px; }
  .card-foot .btn { width: auto; flex: 0 0 auto; --h: 44px; min-height: 44px; padding: 0 20px; font-size: 14px; }
  .card-play { width: 46px; height: 46px; right: 12px; bottom: 12px; }
}
@media (max-width: 360px) {
  .card-title { font-size: 20px; }
  .card-foot .btn { padding: 0 16px; font-size: 13.5px; }
}

/* Skip link: off-screen until focused with the keyboard, then a clear gold pill above everything. */
.skip-link {
  position: fixed; top: 10px; left: 50%; z-index: 1000; transform: translate(-50%, -160%);
  padding: 12px 20px; border-radius: 999px; background: var(--gold); color: #1a1206;
  font: 700 14px/1 var(--font-body); text-decoration: none; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8);
  transition: transform .2s var(--ease);
}
.skip-link:focus, .skip-link:focus-visible { transform: translate(-50%, 0); outline: 2px solid var(--gold-3); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
main#main:focus { outline: none; }
/* Touch screens of any width (tablets too): card buttons stay ≥44px tall. */
@media (pointer: coarse) { .card-foot .btn { min-height: 44px; } }

/* Longer nav labels (Studio Services · Learn with Protonix · Get to Know Protonix): tighter tracking and padding
   so all seven tabs still fit on one line from 1241px up; below 1241px the menu button takes over as before. */
@media (min-width: 1241px) { .main-nav > a { letter-spacing: .06em; } }
@media (min-width: 1241px) and (max-width: 1600px) { .site-header .header-inner { gap: 18px; } .main-nav > a { padding: 10px 8px; } .main-nav > a.is-active::after { left: 8px; right: 8px; } }
@media (min-width: 1241px) and (max-width: 1400px) { .main-nav > a { padding: 10px 6px; font-size: 11.5px; letter-spacing: .04em; } .main-nav > a.is-active::after { left: 6px; right: 6px; } }
/* With the longer labels the inline search field no longer fits beside seven tabs: the search icon (already used
   up to 1480px) opens the same search at every width. */
@media (min-width: 1241px) { .header-search { display: none; } .search-mobile { display: inline-grid; } }
/* two-line planet names (Learn with / Protonix · Get to Know / Protonix): balanced line height, centred */
.solar .planet-label b { line-height: 1.12; text-align: center; }

/* Homepage ambient space now sits BEHIND the planets, orbits and sun (z-index 2 < WebGL canvas 3), so it no longer
   needs to be dimmed by sitting over them; the particles themselves are drawn faint (app.js initAmbient). */
.solar-dust { z-index: 2; opacity: 1; }
/* "Digital Store" makes the row a little longer still: the tightest setting for 1241–1340px laptop widths */
@media (min-width: 1241px) and (max-width: 1340px) { .site-header .header-inner { gap: 12px; } .main-nav > a { padding: 10px 5px; font-size: 11px; letter-spacing: .03em; } .main-nav > a.is-active::after { left: 5px; right: 5px; } }
/* demo videos declare their real shape (width/height + aspect-ratio): scale with the column, no letterboxing */
.pv-player[width] { height: auto; }

/* ---------- Learn with Protonix (/classes): hero entrance, social showcase, enrol card ---------- */
/* title: words rise out of a soft blur one after another, then a slow gold light passes across now and then */
.learn-hero .split-title .w {
  display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(10px);
  background: linear-gradient(100deg, var(--champagne) 0%, var(--champagne) 42%, #fff4d6 50%, var(--champagne) 58%, var(--champagne) 100%);
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: learnWordIn 1.15s cubic-bezier(.16, .84, .24, 1) calc(.15s + var(--i) * .17s) forwards, learnSheen 9s ease-in-out calc(2.4s + var(--i) * .2s) infinite;
}
@keyframes learnWordIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes learnSheen { 0% { background-position: 100% 0; } 16%, 100% { background-position: 0 0; } }
/* topics arrive one by one after the title */
.learn-hero .topic-line .tp { display: inline-block; opacity: 0; transform: translateY(6px); animation: learnFadeUp .7s ease-out calc(.95s + var(--i) * .07s) forwards; }
.learn-hero .topic-line .tp + .tp::before { content: '·'; margin: 0 .55em; color: var(--muted); }
@keyframes learnFadeUp { to { opacity: 1; transform: none; } }

/* Follow Protonix: larger icon tiles with names — a proper showcase of the profiles */
.learn-hero .showcase-wrap { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 34px; }
.learn-hero .hs-label { font: 600 12px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-2); opacity: 0; animation: learnFadeUp .7s ease-out 1.15s forwards; }
.social-links.showcase { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.social-links.showcase li { opacity: 0; transform: translateY(10px) scale(.96); animation: learnTileIn .7s cubic-bezier(.16, .84, .24, 1) calc(1.25s + var(--i) * .08s) forwards; }
@keyframes learnTileIn { to { opacity: 1; transform: none; } }
.social-links.showcase a {
  display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; min-width: 0;
  border: 1px solid rgba(233, 201, 139, .22); background: rgba(12, 13, 20, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text); transition: transform .35s cubic-bezier(.16, .84, .24, 1), border-color .35s, box-shadow .35s, background .35s;
}
.social-links.showcase a > svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; color: var(--gold-2); background: rgba(212, 166, 89, .12); transition: background .35s, color .35s; }
.social-links.showcase b { font-size: 15px; font-weight: 600; color: var(--text); }
.social-links.showcase a:hover, .social-links.showcase a:focus-visible { transform: translateY(-3px); border-color: rgba(233, 201, 139, .55); background: rgba(20, 20, 30, .7); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .9), 0 0 24px -8px rgba(233, 201, 139, .35); }
.social-links.showcase a:hover > svg { background: rgba(212, 166, 89, .22); color: var(--gold-3); }
@media (max-width: 560px) {
  .social-links.showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .social-links.showcase a { padding: 6px 12px 6px 6px; gap: 10px; }
  .social-links.showcase a > svg { width: 36px; height: 36px; padding: 8px; }
  .social-links.showcase b { font-size: 14px; }
}

/* closing enrol card */
.enrol-cta { padding-top: 24px; }
.enrol-card { position: relative; text-align: center; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); border-radius: 24px; border: 1px solid var(--line-2);
  background: radial-gradient(80% 120% at 50% 0%, rgba(212, 166, 89, .12), transparent 60%), linear-gradient(180deg, rgba(20, 22, 34, .7), rgba(8, 10, 18, .7)); }
.enrol-card h2 { margin: 10px 0 8px; font-size: clamp(30px, 4vw, 46px); }
.enrol-card .flagship-meta, .enrol-card .flagship-perk { margin: 6px 0; }
.enrol-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 22px; }
.enrol-actions .price { margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .learn-hero .split-title .w, .learn-hero .topic-line .tp, .learn-hero .hs-label, .social-links.showcase li { animation: none; opacity: 1; transform: none; filter: none; }
}
/* serif headings render larger than their line box: give the flagship / enrol card titles room so the
   "30 classes · 3 months" line never touches the heading */
.flagship-card h2, .enrol-card h2 { line-height: 1.12; margin-bottom: 14px; }


/* ---------- Welcome-bonus announcement strip (above the header, normal flow) ---------- */
:root { --strip-h: 0px; }
:root:has(.welcome-strip) { --strip-h: 34px; }
.welcome-strip {
  position: relative; z-index: 51; display: flex; align-items: center; justify-content: center; height: var(--strip-h); overflow: hidden;
  border-bottom: 1px solid rgba(233, 201, 139, .16); color: var(--text-2); text-decoration: none; white-space: nowrap;
  background: linear-gradient(90deg, rgba(6, 7, 13, 1) 0%, rgba(22, 17, 9, 1) 30%, rgba(26, 20, 10, 1) 50%, rgba(22, 17, 9, 1) 70%, rgba(6, 7, 13, 1) 100%);
  font: 600 11.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
}
/* a slow sweep of light across the strip */
.welcome-strip::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255, 226, 170, .09) 50%, transparent 60%, transparent 100%);
  background-size: 250% 100%; animation: wsSweep 9s ease-in-out infinite; }
@keyframes wsSweep { 0% { background-position: 120% 0; } 45%, 100% { background-position: -20% 0; } }
.ws-track { display: inline-flex; align-items: center; }
.ws-item { display: inline-flex; align-items: center; gap: .75em; padding: 0 1.5em; }
.ws-item + .ws-item { display: none; }                         /* desktop: one centred line */
.ws-item b { color: var(--gold-2); font-weight: 700; }
.ws-item i { font-style: normal; color: rgba(233, 201, 139, .45); }
.ws-item code { font: 700 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--gold-3); padding: 4px 8px; border: 1px dashed rgba(233, 201, 139, .5); border-radius: 6px; background: rgba(212, 166, 89, .08); }
.ws-item em { font-style: normal; color: var(--champagne); }
.ws-spark { font-size: 12px; letter-spacing: 0; filter: saturate(.6); }
.welcome-strip:hover em, .welcome-strip:focus-visible em { color: var(--gold-3); text-decoration: underline; text-underline-offset: 3px; }
.welcome-strip:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* keep viewport-fitted sections inside the first screen */
.solar { height: calc(100svh - var(--header-h) - 28px - var(--strip-h)); }
.home-hero { min-height: calc(100svh - var(--header-h) - 28px - var(--strip-h)); }
@media (min-width: 1181px) { .atmo-store .p2 { height: clamp(430px, calc(100svh - var(--header-h) - 262px - var(--strip-h)), 640px); } }
@media (min-width: 1241px) and (max-width: 1340px) { .atmo-store .p2 { height: clamp(430px, calc(100svh - var(--header-h) - 262px - var(--strip-h)), 640px); } }
/* narrow screens: a slow single-line marquee instead of wrapping */
@media (max-width: 900px) {
  :root:has(.welcome-strip) { --strip-h: 32px; }
  .welcome-strip { justify-content: flex-start; font-size: 10.5px; letter-spacing: .14em; }
  .ws-item + .ws-item { display: inline-flex; }
  .ws-track { animation: wsMarquee 26s linear infinite; will-change: transform; }
  .welcome-strip:hover .ws-track, .welcome-strip:focus-visible .ws-track { animation-play-state: paused; }
  .ws-item code { font-size: 11px; padding: 3px 6px; }
}
@keyframes wsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .welcome-strip::after { animation: none; }
  .ws-track { animation: none !important; }
  .ws-item + .ws-item { display: none !important; }
  .welcome-strip { justify-content: center; }
}
@media print { .welcome-strip { display: none; } }
@media (prefers-reduced-motion: reduce) and (max-width: 900px) { .welcome-strip { justify-content: flex-start; } }

/* ---------- Welcome popup (20% welcome code; welcome.js) ---------- */
.wpop-lock { overflow: hidden; }
.wpop {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 0; margin: auto;
  border: 1px solid rgba(233, 201, 139, .28); border-radius: 22px; color: var(--text);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(212, 166, 89, .22), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(63, 193, 165, .10), transparent 70%),
    linear-gradient(180deg, #121320, #0a0b13);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 1px 0 rgba(255, 255, 255, .08) inset;
}
.wpop[open] { animation: wpop-in .45s var(--ease) both; }
.wpop::backdrop { background: rgba(3, 5, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes wpop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.wpop-body { padding: 34px 30px 26px; text-align: center; }
.wpop-x {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--text-2); font: 400 22px/1 var(--font-body); cursor: pointer;
}
.wpop-x:hover { color: var(--gold-3); border-color: var(--gold); }
.wpop-kicker { margin: 0 0 12px; font: 600 11px/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.wpop h2 { font-size: 24px; line-height: 1.15; color: var(--gold-3); }
.wpop-offer { margin: 14px 0 6px; font: 500 17px/1.35 var(--font-body); color: var(--text); }
.wpop-offer b {
  font: 800 30px/1 var(--font-display); letter-spacing: -.01em; vertical-align: -3px;
  background: linear-gradient(180deg, var(--gold-3), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wpop-sub { margin: 0 0 18px; font-size: 14px; color: var(--text-2); }
.wpop-form { display: grid; gap: 12px; text-align: left; }
.wpop-form .field input { width: 100%; }
.wpop-ferr { min-height: 0; font-size: 12px; color: var(--danger); }
.wpop-ferr:empty { display: none; }
.wpop-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wpop-err { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(228, 103, 122, .1); border: 1px solid rgba(228, 103, 122, .35); color: #f3b3bd; font-size: 13px; }
.wpop-cta { width: 100%; justify-content: center; min-height: 50px; letter-spacing: .06em; }
.wpop-cta:disabled { opacity: .7; cursor: progress; }
.wpop-fine { margin: 2px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); text-align: center; }
.wpop-fine a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 2px; }
.wpop-done .wpop-sub b { color: var(--gold-3); overflow-wrap: anywhere; }
.wpop-done .wpop-cta { margin: 8px 0 14px; }
@media (max-width: 480px) {
  .wpop { border-radius: 18px; }
  .wpop-body { padding: 26px 18px 18px; }
  .wpop h2 { font-size: 20px; padding: 0 28px; }
  .wpop-offer { margin-top: 10px; font-size: 15px; }
  .wpop-offer b { font-size: 25px; }
  .wpop-sub { margin-bottom: 14px; font-size: 13px; }
  .wpop-form { gap: 10px; }
  .wpop-x { top: 8px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .wpop[open] { animation: none; } }
@media print { .wpop { display: none; } }

/* ---------- Masterclasses (Admin → Masterclasses; views/masterclass.tsx) ---------- */
.mc-list-page .wrap { position: relative; }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 28px; }
.mc-grid.is-past { opacity: .82; }
.mc-h2 { margin: 56px 0 0; font-size: 22px; color: var(--gold-3); }
.mc-card { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.mc-card:hover, .mc-card:focus-visible { transform: translateY(-3px); border-color: rgba(212, 166, 89, .5); box-shadow: 0 24px 60px -30px rgba(212, 166, 89, .45); }
.mc-poster { position: relative; display: block; aspect-ratio: 1; background: radial-gradient(80% 80% at 50% 30%, #2a1d3f, #0b0d16); overflow: hidden; }
.mc-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-poster-empty { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--font-mono); letter-spacing: .3em; color: var(--gold); }
.mc-day { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 54px; padding: 7px 0 6px; border-radius: 12px;
  background: rgba(5, 8, 16, .78); border: 1px solid rgba(212, 166, 89, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); line-height: 1; }
.mc-day b { font: 700 20px var(--font-display); color: var(--gold-3); }
.mc-day i { font: 600 10px var(--font-mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); margin-top: 4px; }
.mc-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; flex: 1; }
.mc-body .eyebrow { margin: 0; }
.mc-title { font: 600 19px/1.25 var(--font-display); color: var(--gold-3); }
.mc-sub { font-size: 14px; color: var(--text-2); }
.mc-meta { font-size: 12.5px; color: var(--muted); }
.mc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.mc-price { font-weight: 700; color: var(--text); }

.mc-hero { position: relative; padding: calc(var(--header-h) + 28px) 0 40px; }
.mc-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: start; margin-top: 18px; }
.mc-hero-poster { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9); aspect-ratio: 1; position: relative;
  background: radial-gradient(80% 80% at 50% 30%, #2a1d3f, #0b0d16); }
.mc-hero-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-hero-copy h1 { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; color: var(--gold-3); margin: 6px 0 10px; }
.mc-hero-copy .lead { margin: 0 0 18px; }
.mc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .025); }
.mc-facts dt { font: 600 10.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.mc-facts dd { margin: 4px 0 0; font-size: 14.5px; color: var(--text); }
.mc-cta { display: grid; gap: 12px; justify-items: start; }
.mc-cta .price { margin: 0; }
.mc-register { display: grid; gap: 12px; width: 100%; max-width: 420px; }
.mc-done { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(88, 201, 154, .4); background: rgba(88, 201, 154, .08); color: var(--text); }
.mc-closed { padding: 14px 16px; border-left: 2px solid var(--gold); background: rgba(255, 255, 255, .03); border-radius: 0 12px 12px 0; color: var(--text-2); }
.mc-video { margin-top: 10px; }
.mc-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.mc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mc-details { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; padding: 36px 0 70px; }
.mc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mc-list li { position: relative; padding-left: 26px; color: var(--text-2); }
.mc-list li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(212, 166, 89, .6); }
.mc-list.is-req li::before { background: transparent; border: 1.5px solid var(--gold); box-shadow: none; }
.mc-teacher p { margin: 0 0 6px; }
@media (max-width: 860px) {
  .mc-hero-grid, .mc-details { grid-template-columns: 1fr; gap: 26px; }
  .mc-hero-poster { max-width: 460px; }
  .mc-hero { padding-bottom: 20px; }
}
@media (max-width: 480px) {
  .mc-facts { grid-template-columns: 1fr; }
  .mc-grid { grid-template-columns: 1fr; }
  .mc-cta .btn-lg, .mc-register .btn-lg { width: 100%; justify-content: center; }
}

/* Masterclass pages: Protonix's past remixes (click-to-play YouTube) */
.mc-remixes { padding: 20px 0 80px; }
.mc-remixes h2 { font-size: clamp(26px, 3vw, 36px); color: var(--gold-3); margin: 6px 0 8px; }
.mc-remixes .lead { max-width: 640px; margin: 0 0 24px; }
.mc-remix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 18px; }
.mc-remix { margin: 0; }
.mc-remix figcaption { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.mc-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: #000; cursor: pointer; }
.mc-yt img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; transition: opacity .3s, transform .5s var(--ease); }
.mc-yt:hover img, .mc-yt:focus-visible img { opacity: 1; transform: scale(1.03); }
.mc-yt-play { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
  background: rgba(5, 8, 16, .72); border: 1px solid rgba(212, 166, 89, .7); box-shadow: 0 0 30px rgba(212, 166, 89, .35); }
.mc-yt-play::after { content: ''; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--gold-3); }
.mc-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 480px) { .mc-remix-grid { grid-template-columns: 1fr; } }
.mc-remixes { scroll-margin-top: calc(var(--header-h) + 16px); }
.mc-remix-link { display: inline-flex; align-items: center; gap: 9px; margin: 2px 0 22px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(212, 166, 89, .45); background: rgba(212, 166, 89, .08); color: var(--gold-3); font-size: 14px; font-weight: 600;
  transition: background .25s, border-color .25s; }
.mc-remix-link:hover, .mc-remix-link:focus-visible { background: rgba(212, 166, 89, .16); border-color: var(--gold); }
.mc-remix-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(212, 166, 89, .8); }
.btn-whatsapp { background: #25d366; color: #06240f; border-color: #25d366; }
.btn-whatsapp:hover { background: #2fe476; color: #06240f; }