:root {
  --as-emerald: #7c3aed;
  --as-emerald-deep: #6d28d9;
  --as-emerald-soft: #f5f3ff;
  --as-gold: #c9a227;
  --as-gold-bright: #d4af37;
  --as-gold-deep: #8a6d12;
  --as-bg: #ffffff;
  --as-bg-soft: #f7f8fa;
  --as-ink: #111827;
  --as-muted: #6b7280;
  --as-faint: #9ca3af;
  --as-card: #ffffff;
  --as-border: #e5e7eb;
  --as-border-strong: #d1d5db;
  --as-school-primary: var(--as-emerald);
  --as-school-accent: var(--as-gold);
  --as-radius: 16px;
  --as-radius-sm: 12px;
  --as-shadow: 0 12px 40px -18px rgba(17, 24, 39, 0.18);
  --as-shadow-soft: 0 4px 18px -8px rgba(17, 24, 39, 0.12);
  --as-font: "Outfit", system-ui, -apple-system, sans-serif;
  --as-display: "Outfit", system-ui, sans-serif;
  --as-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, video, svg { max-width: 100%; height: auto; }
body.as-body {
  margin: 0;
  font-family: var(--as-font);
  background: var(--as-bg);
  color: var(--as-ink);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.as-body::before { display: none; }
::selection {
  background: color-mix(in srgb, var(--as-emerald) 28%, white);
  color: var(--as-ink);
}

a { color: var(--as-emerald-deep); text-decoration: none; }
a:hover { color: var(--as-emerald); }

.as-skip { position: absolute; left: -999px; top: 0; }
.as-skip:focus {
  left: 1rem; top: 1rem; z-index: 80;
  background: #111; color: #fff; padding: .55rem 1rem; border-radius: 999px;
}

.as-wrap { width: min(1120px, calc(100% - 1.25rem)); margin: 0 auto; }

/* Header - clean white SaaS bar */
.as-top {
  position: sticky; top: 0; z-index: 60; /* above nav backdrop so menus stay clickable */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--as-border);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
body.as-nav-open .as-top {
  z-index: 70;
}
.as-top-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .75rem 0;
  position: relative;
}
.as-top-start {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
}
.as-brand {
  display: inline-flex; align-items: center; gap: .75rem;
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--as-ink); text-decoration: none; font-size: 1.4rem;
}
.as-brand:hover { color: var(--as-ink); }
.as-brand img {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 18px -10px rgba(124, 58, 237, 0.45);
  background: #fff;
}

/* Platform wordmark - aether (black) + Skill (accent / shine) */
.as-wordmark {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  font-weight: 800;
  font-size: 1.38em;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.as-wordmark-aether,
.as-wordmark-skill {
  display: inline-block;
}
.as-wordmark-aether {
  color: #000000;
  -webkit-text-fill-color: #000000;
  font-weight: 800;
}
.as-wordmark--shine .as-wordmark-aether {
  color: #000000;
  -webkit-text-fill-color: #000000;
}
/* Marketing: Skill carries the orb shimmer */
.as-wordmark-skill--shine {
  background-image: linear-gradient(
    110deg,
    #6d28d9 0%,
    #8b5cf6 24%,
    #a78bfa 40%,
    #f472b6 58%,
    #fb7185 72%,
    #c9a227 88%,
    #7c3aed 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: as-wordmark-shimmer 7.5s ease-in-out infinite;
}
.as-wordmark-skill--shine.is-js-shimmer {
  animation: none !important;
}
/* App chrome: readable solid split */
.as-wordmark--solid .as-wordmark-aether {
  color: #000000;
  -webkit-text-fill-color: #000000;
}
.as-wordmark--solid .as-wordmark-skill {
  color: #7c3aed;
  -webkit-text-fill-color: #7c3aed;
}
.as-wordmark--sm {
  font-size: 1.12em;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.as-foot .as-wordmark { font-size: 1.55rem; }
.as-powered .as-wordmark { vertical-align: baseline; font-size: 1.12em; }
.as-powered a { text-decoration: none; }
.as-powered a:hover .as-wordmark-skill {
  color: #6d28d9;
  -webkit-text-fill-color: #6d28d9;
}
@keyframes as-wordmark-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.as-brand em,
.as-foot strong em,
.as-powered em {
  font-style: normal;
  color: var(--as-gold-deep);
}
.as-brand-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--as-emerald), var(--as-emerald-deep));
}
.as-school-logo { border-radius: 50%; object-fit: cover; box-shadow: 0 8px 18px -10px rgba(124, 58, 237, 0.4); }

/* -- Public studio (/s/...) -- */
body.as-school-body {
  background:
    radial-gradient(900px 420px at 0% -10%, color-mix(in srgb, var(--as-school-primary) 16%, transparent), transparent 55%),
    radial-gradient(780px 380px at 100% 0%, color-mix(in srgb, var(--as-school-accent) 14%, transparent), transparent 50%),
    radial-gradient(600px 300px at 50% 100%, rgba(244, 114, 182, 0.06), transparent 55%),
    #f7f9f8;
}
.as-school-main { padding-bottom: 3rem; }
.as-school-wrap { padding-top: 1.25rem; }

.as-school-top {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -24px color-mix(in srgb, var(--as-school-primary) 55%, transparent);
}
.as-school-top-inner {
  flex-wrap: nowrap;
  gap: .75rem;
}
.as-school-top-actions {
  display: flex; align-items: center; gap: .55rem; flex-shrink: 0;
}
/* Hamburger only on small screens */
.as-school-body .as-menu-toggle--school { display: none; }
.as-school-nav-mobile { display: none !important; }

/* Single-row desktop nav: primary links + More */
.as-school-nav-desk {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: .15rem;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: .25rem;
}
.as-school-nav-desk > a {
  white-space: nowrap;
  color: var(--as-muted);
  font-weight: 650;
  font-size: .86rem;
  padding: .4rem .65rem;
  border-radius: 999px;
  text-decoration: none;
}
.as-school-nav-desk > a:hover,
.as-school-nav-desk > a.is-on {
  color: var(--as-school-primary);
  background: color-mix(in srgb, var(--as-school-primary) 10%, white);
  text-decoration: none;
}
.as-school-more {
  position: relative;
  flex-shrink: 0;
}
.as-school-more summary {
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  color: var(--as-muted);
  font-weight: 650;
  font-size: .86rem;
  padding: .4rem .65rem;
  border-radius: 999px;
  user-select: none;
}
.as-school-more summary::-webkit-details-marker { display: none; }
.as-school-more summary::after { content: " ▾"; font-size: .75em; opacity: .7; }
.as-school-more.is-active summary,
.as-school-more[open] summary,
.as-school-more summary:hover {
  color: var(--as-school-primary);
  background: color-mix(in srgb, var(--as-school-primary) 10%, white);
}
.as-school-more-panel {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 11rem;
  display: grid;
  gap: .15rem;
  padding: .5rem;
  background: #fff;
  border: 1px solid var(--as-border);
  border-radius: 14px;
  box-shadow: var(--as-shadow);
  z-index: 60;
}
.as-school-more-panel a {
  display: block;
  padding: .55rem .7rem;
  border-radius: 10px;
  color: var(--as-ink);
  font-weight: 650;
  font-size: .9rem;
  text-decoration: none;
}
.as-school-more-panel a:hover,
.as-school-more-panel a.is-on {
  background: color-mix(in srgb, var(--as-school-primary) 10%, white);
  color: var(--as-school-primary);
  text-decoration: none;
}

.as-school-page-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-end; justify-content: space-between;
  margin: 0 0 1.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}
.as-school-page-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--as-ink);
}
.as-school-page-sub {
  margin: .45rem 0 0;
  color: var(--as-muted);
  max-width: 36rem;
  font-size: 1.02rem;
}
.as-school-page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.as-school-hero {
  position: relative;
  overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 1.25rem 1.5rem;
  align-items: center;
  padding: 1.5rem 1.45rem 1.55rem;
  margin: 0 0 1.25rem;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--as-school-primary) 28%, #e5e7eb);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--as-school-primary) 12%, #fff) 0%,
      #ffffff 45%,
      color-mix(in srgb, var(--as-school-accent) 10%, #fff) 100%);
  box-shadow: 0 22px 50px -32px color-mix(in srgb, var(--as-school-primary) 45%, transparent);
}
.as-school-hero-glow {
  position: absolute; inset: auto -15% -40% 40%;
  width: 55%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--as-school-primary) 25%, transparent), rgba(244,114,182,0.12), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}
.as-school-hero-logo {
  position: relative; z-index: 1;
  width: 88px; height: 88px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  box-shadow:
    0 16px 32px -14px color-mix(in srgb, var(--as-school-primary) 55%, transparent),
    0 0 0 4px rgba(255,255,255,0.9);
  background: #fff;
}
.as-school-hero-copy { position: relative; z-index: 1; flex: 1 1 16rem; min-width: 0; }
.as-school-hero-copy h1 {
  margin: .4rem 0 .35rem;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--as-ink);
}
.as-school-hero-tagline {
  margin: 0 0 .55rem;
  font-size: 1.15rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--as-school-primary) 75%, #111827);
}
.as-school-hero-desc {
  margin: 0 0 1rem;
  color: var(--as-muted);
  max-width: 38rem;
  line-height: 1.55;
}
.as-school-hero-actions {
  display: flex; flex-wrap: wrap; gap: .55rem;
}

.as-school-quick {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin: 0 0 1.75rem;
}
.as-school-quick-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .85rem .55rem .5rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--as-border);
  box-shadow: var(--as-shadow-soft);
  text-decoration: none !important;
  color: var(--as-ink);
  font-weight: 700; font-size: .88rem;
  transition: transform .18s var(--as-ease), box-shadow .18s ease, border-color .18s ease;
}
.as-school-quick-chip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--as-school-primary) 40%, #e5e7eb);
  box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--as-school-primary) 50%, transparent);
  color: var(--as-ink);
}
.as-school-quick-ico {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: color-mix(in srgb, var(--as-school-primary) 14%, #fff);
  font-size: .85rem;
}
.as-school-quick-count {
  margin-left: .15rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: .75rem;
  color: var(--as-muted);
}

.as-school-section { margin: 0 0 2rem; }
.as-school-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  margin: 0 0 .9rem;
}
.as-school-section-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.as-school-section-head a {
  font-weight: 700; font-size: .9rem;
  color: color-mix(in srgb, var(--as-school-primary) 85%, #6d28d9);
}

.as-school-store-section {
  margin: 1.5rem 0 .85rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.as-school-store-section:empty { display: none; }

/* Public + studio store polish */
.as-store-hero {
  margin: 0 0 .35rem;
  padding: 1.35rem 1.4rem 1.3rem;
  border-radius: 22px;
  border: 1px solid #e5e7eb;
  background:
    radial-gradient(420px 180px at 10% -30%, color-mix(in srgb, var(--as-school-accent, #c9a227) 14%, transparent), transparent 60%),
    radial-gradient(380px 180px at 100% 0%, color-mix(in srgb, var(--as-school-primary, #7c3aed) 12%, transparent), transparent 55%),
    linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 14px 36px -28px rgba(15, 23, 42, 0.28);
}
.as-store-hero-kicker {
  margin: 0 0 .4rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--as-school-primary, #7c3aed) 70%, #64748b);
}
.as-store-hero h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.035em;
  font-weight: 800;
  line-height: 1.15;
}
.as-store-hero-intro {
  margin: .55rem 0 0;
  max-width: 40rem;
  color: #64748b;
  font-size: 1.02rem;
  line-height: 1.55;
}
.as-store-thumb {
  width: 7.5rem;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, #f5f3ff, #e2e8f0);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #6d28d9;
  font-size: 1.1rem;
}
.as-store-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.as-store-thumb.is-empty { border: 1px solid #e8eef5; }
@media (max-width: 640px) {
  .as-store-thumb { width: 100%; max-width: 12rem; }
}

.as-school-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .9rem;
}
.as-school-catalog--tight {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.as-school-catalog-card {
  display: block;
  text-decoration: none !important;
  color: inherit;
  padding: 1.2rem 1.15rem 1.25rem;
  border-radius: 18px;
  transition: transform .22s var(--as-ease), box-shadow .22s ease, border-color .22s ease;
}
.as-school-catalog-card--static { cursor: default; }
a.as-school-catalog-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--as-school-primary) 45%, #e5e7eb);
  box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--as-school-primary) 45%, transparent);
  color: inherit;
}
.as-school-catalog-ico {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  margin-bottom: .75rem;
  font-size: 1rem;
  background: linear-gradient(145deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
  box-shadow: 0 10px 18px -12px rgba(124, 58, 237, 0.5);
}
.as-school-catalog-ico--pink {
  background: linear-gradient(145deg, #fce7f3, #f9a8d4);
  color: #9d174d;
}
.as-school-catalog-ico--gold {
  background: linear-gradient(145deg, #fef3c7, #fcd34d);
  color: #92400e;
}
.as-school-catalog-card h3 {
  margin: 0 0 .4rem;
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.as-school-catalog-card p {
  margin: 0;
  color: var(--as-muted);
  font-size: .94rem;
  line-height: 1.45;
}
.as-school-catalog-meta { margin-top: .7rem !important; font-weight: 650; }
.as-school-catalog--courses {
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.as-school-course-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.as-school-course-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #f5f3ff 0%, #e2e8f0 100%);
  overflow: hidden;
}
.as-school-course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.as-school-course-cover.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.as-school-course-cover .as-school-catalog-ico {
  margin: 0;
}
.as-school-course-card-body {
  padding: 1rem 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}
.as-school-course-card-body h3 { margin: 0; }
.as-school-course-card-body > p { margin: 0; }
.as-school-course-card-body .as-pill { align-self: flex-start; margin: 0 0 .15rem; }
.as-school-catalog-meta strong {
  color: color-mix(in srgb, var(--as-school-primary) 80%, #6d28d9);
}
.as-school-empty { margin-top: .25rem; }

.as-school-auth {
  display: grid;
  place-items: center;
  padding: 1rem 0 2rem;
}
.as-school-auth-card {
  width: min(100%, 440px);
  padding: 1.6rem 1.45rem 1.5rem;
  text-align: center;
}
.as-school-auth-card .as-form { text-align: left; margin: 1rem auto 0; max-width: none; }
.as-school-auth-card h1 {
  margin: .55rem 0 .4rem;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.as-school-auth-logo {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  margin: 0 auto .65rem;
  display: block;
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--as-school-primary) 55%, transparent);
}
.as-school-auth-links { margin-top: 1.1rem; font-weight: 600; }
.as-school-auth-links a { font-weight: 750; }

.as-school-profile-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .7rem .28rem .28rem;
  border-radius: 999px;
  border: 1px solid var(--as-border);
  background: #fff;
  color: var(--as-ink);
  font-weight: 700; font-size: .86rem;
  text-decoration: none !important;
}
.as-school-profile-btn img,
.as-school-profile-btn-fallback {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover;
}
.as-school-profile-btn-fallback {
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--as-school-primary) 18%, #fff);
  color: var(--as-school-primary);
  font-size: .8rem; font-weight: 800;
}
.as-school-profile-btn:hover,
.as-school-profile-btn.is-on {
  border-color: color-mix(in srgb, var(--as-school-primary) 35%, #e5e7eb);
  background: color-mix(in srgb, var(--as-school-primary) 8%, #fff);
  color: var(--as-ink);
}

.as-school-profile {
  display: grid;
  grid-template-columns: 1.35fr 0.75fr;
  gap: 1rem;
  align-items: start;
}
.as-school-profile-card { padding: 1.35rem; }
.as-school-profile-side { padding: 1.25rem; }
.as-school-profile-avatar-wrap {
  display: flex; align-items: center; gap: .9rem;
}
.as-school-profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--as-school-primary) 50%, transparent);
}
.as-school-profile-avatar--fallback {
  display: grid; place-items: center;
  background: linear-gradient(145deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
  font-size: 2rem; font-weight: 800;
}
.as-school-profile-actions {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: .35rem;
}
@media (max-width: 900px) {
  .as-school-profile { grid-template-columns: 1fr; }
}

.as-school-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: start;
}
.as-school-form-card { max-width: none; padding: 1.25rem; }
.as-school-side-card { padding: 1.2rem; }
.as-school-avail { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.as-school-avail li {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-size: .92rem;
}
.as-school-avail span { color: var(--as-muted); }

/* Detail pages that still use plain h1 / as-page-title */
.as-school-body .as-school-wrap > h1,
.as-school-body .as-school-wrap > .as-page-title {
  margin: 0 0 .35rem;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.as-school-body .as-school-wrap > h1 + .as-muted,
.as-school-body .as-school-wrap > .as-page-title + .as-muted {
  margin-top: 0;
  margin-bottom: 1.15rem;
  max-width: 36rem;
}
.as-school-body .as-list { gap: 1rem; }
.as-school-body .as-list a.as-card {
  border-radius: 18px;
  transition: transform .2s var(--as-ease), box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .as-school-body .as-list a.as-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--as-school-primary) 40%, #e5e7eb);
    box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--as-school-primary) 40%, transparent);
  }
}

@media (max-width: 900px) {
  .as-school-hero {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 1.35rem 1.15rem;
  }
  .as-school-hero-actions { justify-content: center; width: 100%; }
  .as-school-hero-actions .as-btn { flex: 1 1 auto; justify-content: center; }
  .as-school-hero-desc { margin-left: auto; margin-right: auto; }
  .as-school-quick { justify-content: center; }
  .as-school-page-head { flex-direction: column; align-items: stretch; }
  .as-school-detail-grid { grid-template-columns: 1fr; }
  .as-school-catalog { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .as-school-hero-logo { width: 72px; height: 72px; }
  .as-school-hero-actions .as-btn { width: 100%; }
}

.as-nav { display: flex; flex-wrap: wrap; gap: .25rem .35rem; align-items: center; }
.as-nav > a:not(.as-btn) {
  color: var(--as-muted); font-weight: 600; font-size: .92rem;
  padding: .45rem .75rem; border-radius: 999px; text-decoration: none;
}
.as-nav > a:not(.as-btn):hover,
.as-nav > a:not(.as-btn).is-on {
  color: var(--as-ink);
  background: var(--as-bg-soft);
  text-decoration: none;
}

.as-main { padding: 0 0 4rem; }

/* Footer */
.as-foot {
  border-top: 1px solid var(--as-border);
  padding: 2.75rem 0;
  color: var(--as-muted);
  background: var(--as-bg-soft);
}
.as-foot-inner {
  display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
}
.as-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 1.75rem 2rem;
}
.as-foot-grid--school { grid-template-columns: 1.4fr 0.8fr; }
.as-foot strong { display: block; color: var(--as-ink); margin-bottom: .35rem; }
.as-foot p { margin: 0; max-width: 28rem; }
.as-foot-company {
  margin-top: 1rem !important;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--as-muted);
}
.as-foot-company a { color: var(--as-emerald-deep); font-weight: 600; }
.as-foot-copy { margin-top: .85rem !important; font-size: .84rem; color: var(--as-faint); }
.as-foot-links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.as-foot-links-col { flex-direction: column; align-items: flex-start; gap: .45rem; margin-top: .35rem; }
.as-foot-links a { color: var(--as-muted); font-weight: 500; }
.as-foot-links a:hover { color: var(--as-ink); }
.as-powered { font-size: .9rem; }
.as-powered a { color: var(--as-faint); }
.as-studio-foot-inner {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
}

/* Cookie banner */
#as-cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100;
  max-width: 720px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--as-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgba(17, 24, 39, 0.45);
  padding: 1rem 1.1rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
#as-cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
#as-cookie-banner[hidden] { display: none !important; }
.as-cookie-inner {
  display: flex; flex-wrap: wrap; gap: .85rem 1rem; align-items: flex-end;
  justify-content: space-between;
}
.as-cookie-copy {
  display: grid; gap: .35rem; flex: 1 1 16rem; font-size: .9rem; color: var(--as-muted);
}
.as-cookie-copy strong { color: var(--as-ink); font-size: .95rem; }
.as-cookie-copy a { font-weight: 650; }
.as-cookie-actions { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Turnstile - reserve space so the iframe doesn't shove the auth form around */
.as-turnstile {
  margin: .55rem 0 .25rem;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.as-turnstile .cf-turnstile {
  min-height: 65px;
  min-width: 300px;
}
.as-school-auth-card .as-turnstile,
.as-auth-card .as-turnstile {
  align-items: center;
  width: 100%;
}
.as-turnstile-note {
  margin: .35rem 0 0; font-size: .72rem; color: var(--as-faint); text-align: center;
}
.as-ts-gate {
  min-width: 11.5rem; /* Security check... -> Sign in shouldn't reflow the card */
  justify-content: center;
}
.as-ts-gated { opacity: .72; cursor: wait; }

/* Legal pages */
.as-legal-wrap { max-width: 760px; }
.as-legal-prose h2 {
  margin: 1.6rem 0 .55rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.as-legal-prose p, .as-legal-prose li { color: var(--as-muted); }
.as-legal-prose ul { padding-left: 1.2rem; }
@media (max-width: 900px) {
  .as-foot-grid { grid-template-columns: 1fr; }
  #as-cookie-banner { left: .65rem; right: .65rem; bottom: .65rem; }
}

/* Buttons */
.as-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; border-radius: 999px; padding: .78rem 1.35rem;
  font-weight: 700; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; font: inherit; font-size: .95rem;
  transition: transform .15s var(--as-ease), box-shadow .15s ease, background .15s ease;
}
.as-btn:hover { text-decoration: none; transform: translateY(-1px); }
.as-btn-sm { padding: .48rem 1rem; font-size: .88rem; }
.as-btn-gold {
  background: linear-gradient(135deg, #e4c04a, var(--as-gold));
  color: #2a1f05;
  box-shadow: 0 10px 24px -12px rgba(201, 162, 39, 0.65);
}
.as-btn-gold:hover { color: #2a1f05; }
.as-btn-emerald {
  background: var(--as-emerald);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(124, 58, 237, 0.55);
}
.as-btn-emerald:hover { color: #fff; background: var(--as-emerald-deep); }
.as-btn-ghost {
  background: #fff;
  border-color: var(--as-border);
  color: var(--as-ink);
}
.as-btn-ghost:hover {
  border-color: var(--as-border-strong);
  background: var(--as-bg-soft);
  color: var(--as-ink);
}
.as-school-body .as-btn-emerald {
  background: var(--as-school-primary);
  color: #fff;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--as-school-primary) 55%, transparent);
}
.as-school-body .as-btn-emerald:hover {
  color: #fff;
  filter: brightness(0.95);
}
/* Keep true gold - do NOT remap to muddy studio accent browns */

/* Hero - big type, white, soft product panel */
.as-hero {
  padding: 2.5rem 0 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  overflow: visible;
}
.as-hero-panel {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.as-hero-copy { position: relative; z-index: 1; }
.as-hero-orb {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 259px;
  padding: 16px 0 22px;
}
.as-hero-orb-float {
  position: relative;
  z-index: 1;
  display: block;
  animation: as-orb-float 2.8s ease-in-out infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.as-hero-orb::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.16), rgba(244, 114, 182, 0.08) 45%, transparent 72%);
  filter: blur(26px);
  z-index: 0;
  pointer-events: none;
  animation: as-orb-glow 6s ease-in-out infinite;
}
.as-hero-orb::after {
  content: "";
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 38%;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(15, 23, 42, 0.14), transparent 70%);
  filter: blur(5px);
  z-index: 0;
  pointer-events: none;
  animation: as-orb-shadow 3.6s ease-in-out infinite;
}

/* Soft abstract aether rings (replaces glossy 3D orb photo) */
.as-aether-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(100%, 236px);
  aspect-ratio: 1;
}
.as-aether-mark--md { width: min(100%, 191px); }
.as-aether-mark--lg { width: min(100%, 236px); }
.as-aether-mark-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 18px 32px rgba(124, 58, 237, 0.18));
}
/* Motion is JS-only - SVG rotate(angle 120 120) on <g> groups, no CSS ring transforms */
.as-aether-mark-halo { opacity: 0.55; }
.as-aether-mark-spark { opacity: 0.9; }

@keyframes as-orb-float {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -10px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes as-orb-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .55; }
  50% { transform: translateX(-50%) scaleX(0.7); opacity: .2; }
}
@keyframes as-orb-glow {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Soften background glow only - ring/bob motion stays (JS-driven on Windows) */
  .as-hero-orb::before,
  .as-hero-orb::after {
    animation: none !important;
  }
}

.as-hero-orb-frame {
  width: min(100%, 380px);
  aspect-ratio: 1;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--as-border);
  box-shadow: var(--as-shadow);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.as-hero-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 0 1rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--as-emerald-soft);
  color: var(--as-emerald-deep);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase;
  border: 0;
}
.as-hero h1 {
  font-family: var(--as-display);
  font-weight: 750;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  color: var(--as-ink);
  max-width: 14ch;
}
.as-hero h1 em {
  font-style: normal;
  color: var(--as-emerald);
}
.as-hero p.lead {
  font-size: 1.125rem;
  color: var(--as-muted);
  max-width: 34rem;
  margin: 0 0 1.5rem;
}
.as-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.as-hero-meta {
  display: flex; flex-wrap: wrap; gap: .65rem 1.25rem;
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: 0;
  color: var(--as-muted); font-size: .92rem; font-weight: 500;
}
.as-hero-meta strong { color: var(--as-ink); font-weight: 700; }
.as-trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: 1rem;
  color: var(--as-faint);
  font-size: .88rem;
  font-weight: 600;
}
.as-trust span::before {
  content: "✓ ";
  color: var(--as-emerald);
  font-weight: 800;
}

/* Sections */
.as-section { padding: 3.25rem 0 0; }
.as-section-alt {
  margin-top: 3.25rem;
  padding: 3.25rem 0;
  background: var(--as-bg-soft);
  border-top: 1px solid var(--as-border);
  border-bottom: 1px solid var(--as-border);
}
.as-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
}
.as-section-head.left { text-align: left; margin-left: 0; }
.as-section h2,
.as-page-title {
  font-family: var(--as-display);
  font-weight: 750;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--as-ink);
}
.as-section .as-section-sub {
  margin: .65rem 0 0;
  color: var(--as-muted);
  font-size: 1.05rem;
}

.as-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.as-card {
  background: var(--as-card);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  padding: 1.4rem 1.35rem;
  box-shadow: var(--as-shadow-soft);
  transition: transform .18s var(--as-ease), box-shadow .18s ease, border-color .18s ease;
}
.as-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--as-shadow);
  border-color: #cfe8dc;
}
.as-card h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--as-ink); font-weight: 700; }
.as-card p { margin: 0; color: var(--as-muted); font-size: .95rem; }
.as-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: .9rem;
  background: var(--as-emerald-soft);
  color: var(--as-emerald-deep);
  font-size: 1.1rem;
  border: 1px solid #ede9fe;
}

.as-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1.1rem;
  align-items: stretch;
}
.as-panel {
  border-radius: var(--as-radius);
  border: 1px solid #e9d5ff;
  background: linear-gradient(160deg, #f5f3ff, #ede9fe 60%, #fef9e7);
  color: var(--as-ink);
  padding: 2rem;
  box-shadow: var(--as-shadow-soft);
  transition:
    transform .28s var(--as-ease),
    box-shadow .28s ease,
    border-color .28s ease;
}
.as-panel h3 {
  font-family: var(--as-display);
  font-weight: 750;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  margin: 0 0 .55rem;
  color: var(--as-emerald-deep);
}
.as-panel p { margin: 0 0 1.25rem; color: var(--as-muted); max-width: 30rem; }

.as-quote {
  border-radius: var(--as-radius);
  border: 1px solid var(--as-border);
  background: #fff;
  padding: 2rem;
  box-shadow: var(--as-shadow-soft);
  transition:
    transform .28s var(--as-ease),
    box-shadow .28s ease,
    border-color .28s ease;
}
.as-quote blockquote {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--as-ink);
  transition: color .25s ease;
}
.as-quote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  color: var(--as-muted);
  font-size: .92rem; font-weight: 600;
}

.as-muted { color: var(--as-muted); }
.as-pill {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem; border-radius: 999px;
  background: var(--as-emerald-soft); color: var(--as-emerald-deep);
  border: 1px solid #ede9fe;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}

.as-flash {
  padding: .9rem 1.05rem; border-radius: 12px; margin: 1rem 0;
  border: 1px solid var(--as-border); background: #fff;
  box-shadow: var(--as-shadow-soft);
}
.as-flash-ok, .as-flash-success { background: var(--as-emerald-soft); border-color: #ddd6fe; }
.as-flash-err, .as-flash-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.as-form { display: grid; gap: 1rem; max-width: 420px; }
.as-form.wide { max-width: 640px; }
.as-label { display: grid; gap: .4rem; font-weight: 600; font-size: .92rem; color: var(--as-ink); }
.as-input, .as-textarea, .as-select {
  width: 100%; padding: .78rem .9rem; border-radius: 10px;
  border: 1px solid var(--as-border); font: inherit;
  background: #fff; color: var(--as-ink);
}
.as-input:focus, .as-textarea:focus, .as-select:focus {
  outline: none;
  border-color: #c4b5fd;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.as-textarea { min-height: 110px; resize: vertical; }
.as-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }

.as-auth-card {
  max-width: 440px; margin: 2.5rem auto; padding: 2rem;
  background: #fff; border-radius: 18px;
  border: 1px solid var(--as-border); box-shadow: var(--as-shadow);
}
.as-auth-card h1 {
  margin: 0 0 .35rem;
  font-weight: 750;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--as-ink);
}
.as-auth-card .sub { color: var(--as-muted); margin: 0 0 1.35rem; }

.as-school-top .as-nav a.is-on {
  color: var(--as-school-primary);
  background: color-mix(in srgb, var(--as-school-primary) 10%, white);
}
.as-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.as-list a.as-card { display: block; color: inherit; }
.as-list a.as-card:hover { border-color: #ddd6fe; text-decoration: none; color: inherit; }

/* Studio / dashboard chrome - marketing energy inside the product */
body.as-studio-body {
  background:
    radial-gradient(980px 460px at -5% -15%, rgba(244, 114, 182, 0.14), transparent 55%),
    radial-gradient(900px 420px at 105% -5%, rgba(124, 58, 237, 0.14), transparent 52%),
    radial-gradient(700px 380px at 70% 0%, rgba(201, 162, 39, 0.08), transparent 50%),
    #f6f8f7;
}
body.as-studio-body::before { display: none; }
.as-studio-top {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(229, 231, 235, 0.9);
  box-shadow: 0 12px 40px -28px rgba(124, 58, 237, 0.45);
  backdrop-filter: blur(16px);
}
.as-studio-foot { background: transparent; border-top-color: transparent; }

.as-studio-shell {
  display: grid; grid-template-columns: 260px 1fr; gap: 1.35rem;
  padding: 1.35rem 0 3rem; align-items: start;
}
.as-studio-nav {
  display: grid; gap: .1rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248, 250, 252, 0.96));
  border: 1px solid rgba(237, 233, 254, 0.85);
  border-radius: 22px;
  padding: .9rem .75rem 1.05rem; position: sticky; top: 5rem;
  box-shadow:
    0 18px 50px -28px rgba(124, 58, 237, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.9);
  max-height: calc(100vh - 6rem);
  overflow: auto;
}
.as-studio-nav-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .7rem .95rem;
  margin: -.15rem -.1rem .45rem;
  border-radius: 16px;
  background:
    radial-gradient(120px 60px at 100% 0%, rgba(244, 114, 182, 0.16), transparent 70%),
    linear-gradient(135deg, #f5f3ff, #ffffff 60%);
  border-bottom: 0;
}
.as-studio-nav-head strong {
  display: block; font-size: .95rem; letter-spacing: -0.02em;
  color: var(--as-ink); font-weight: 750;
}
.as-studio-nav-head .as-muted { font-size: .78rem; font-weight: 650; color: #6d28d9; }
.as-studio-nav-logo {
  width: 42px; height: 42px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--as-border); flex-shrink: 0;
}
.as-studio-nav-logo--orb {
  border-radius: 50%;
  border: none;
  box-shadow:
    0 10px 22px -10px rgba(124, 58, 237, 0.55),
    0 0 0 3px rgba(237, 233, 254, 0.9);
  background: #fff;
}
.as-studio-nav-mark {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background:
    linear-gradient(145deg, rgba(232, 197, 71, 0.55), transparent 42%),
    linear-gradient(135deg, var(--as-studio-accent, var(--as-emerald)), var(--as-emerald-deep));
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--as-studio-accent, var(--as-emerald)) 70%, transparent);
}
.as-studio-nav-group {
  display: grid; gap: .1rem;
  margin-bottom: .55rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(229, 231, 235, 0.9);
}
.as-studio-nav-group:last-child {
  margin-bottom: 0; padding-bottom: 0; border-bottom: 0;
}
.as-studio-nav-label {
  margin: .45rem .55rem .2rem;
  font-size: .66rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: #94a3b8;
}
.as-studio-nav a {
  display: flex; align-items: center; gap: .55rem;
  padding: .52rem .55rem; border-radius: 12px; color: #64748b;
  font-weight: 650; text-decoration: none; font-size: .9rem;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.as-studio-nav-ico {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 9px;
  font-size: .82rem;
  background: #f1f5f9;
  color: #475569;
  flex-shrink: 0;
}
.as-studio-nav a:hover {
  background: #faf5ff; color: var(--as-emerald-deep); text-decoration: none;
  border-color: #ede9fe;
}
.as-studio-nav a:hover .as-studio-nav-ico {
  background: linear-gradient(145deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
}
.as-studio-nav a.is-on {
  background: linear-gradient(135deg, #f5f3ff, #faf5ff);
  color: #5b21b6;
  border-color: #d8b4fe;
  box-shadow: 0 10px 22px -14px rgba(124, 58, 237, 0.55);
  text-decoration: none;
}
.as-studio-nav a.is-on .as-studio-nav-ico {
  background: linear-gradient(145deg, #a78bfa, #7c3aed);
  color: #fff;
  box-shadow: 0 8px 14px -10px rgba(124, 58, 237, 0.7);
}

.as-studio-main {
  min-width: 0;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(237, 233, 254, 0.7);
  border-radius: 24px;
  padding: 1.4rem 1.45rem 1.85rem;
  box-shadow:
    0 22px 60px -36px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
}
.as-studio-main h1 {
  margin-top: 0;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--as-ink);
}
.as-studio-hero {
  position: relative;
  overflow: hidden;
  display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  align-items: center;
  padding: 1.35rem 1.35rem 1.4rem;
  margin: -.25rem -.15rem 1.35rem;
  border-radius: 20px;
  border: 1px solid rgba(167, 243, 208, 0.9);
  background:
    radial-gradient(420px 180px at 100% -10%, rgba(244, 114, 182, 0.22), transparent 55%),
    radial-gradient(380px 160px at 0% 110%, rgba(124, 58, 237, 0.18), transparent 50%),
    linear-gradient(135deg, #f5f3ff 0%, #ffffff 48%, #fff7ed 100%);
  box-shadow: 0 16px 40px -28px rgba(124, 58, 237, 0.45);
}
.as-studio-hero-orb {
  width: 41px; height: 41px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  box-shadow:
    0 10px 22px -12px rgba(124, 58, 237, 0.4),
    0 0 0 3px rgba(255,255,255,0.9);
  /* flat mark - no bounce */
}
.as-studio-hero-copy { position: relative; z-index: 1; flex: 1 1 14rem; min-width: 0; }
.as-studio-hero h1 {
  margin: .45rem 0 .4rem;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  letter-spacing: -0.035em;
}
.as-studio-hero-actions {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: .55rem;
}

.as-table {
  width: 100%; border-collapse: collapse;
  background: #fff;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--as-border);
}
.as-table th, .as-table td {
  text-align: left; padding: .85rem 1rem;
  border-bottom: 1px solid var(--as-border); font-size: .94rem;
}
.as-table th { background: #f7f3ff; font-weight: 700; color: var(--as-emerald-deep); }

.as-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.as-stat-grid-rich { gap: 1rem; }
.as-stat {
  position: relative;
  overflow: hidden;
  background: #fff; border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px; padding: 1.15rem 1.15rem 1.05rem;
  box-shadow: var(--as-shadow-soft);
  transition: transform .18s var(--as-ease), box-shadow .18s ease, border-color .18s ease;
}
.as-stat::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #a78bfa, #f472b6 55%, #fbbf24);
  opacity: .85;
}
.as-stat:hover { transform: translateY(-3px); box-shadow: var(--as-shadow); border-color: #e9d5ff; }
.as-stat-accent {
  border-color: #d8b4fe;
  background: linear-gradient(165deg, #f5f3ff, #fff 55%);
}
.as-stat strong {
  display: block; font-size: 1.7rem; color: #6d28d9;
  letter-spacing: -0.03em; font-weight: 800;
}
.as-stat span { color: var(--as-muted); font-size: .86rem; font-weight: 700; letter-spacing: .01em; }

.as-card-link {
  color: inherit; text-decoration: none; display: block;
  position: relative; overflow: hidden;
  border-radius: 18px;
  transition: transform .18s var(--as-ease), box-shadow .18s ease, border-color .18s ease;
}
.as-card-link:hover {
  text-decoration: none; color: inherit;
  border-color: #d8b4fe;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(124, 58, 237, 0.4);
}
.as-studio-home-grid { margin-top: .25rem; }
.as-studio-section-label {
  margin: 0 0 .85rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.as-studio-tile h3 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.as-studio-tile p { margin: 0; }
.as-studio-tile-ico {
  display: grid; place-items: center;
  width: 2.55rem; height: 2.55rem;
  border-radius: 50%;
  margin-bottom: .85rem;
  font-size: 1.05rem;
  background: linear-gradient(145deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
  box-shadow: 0 10px 20px -12px rgba(124, 58, 237, 0.55);
}
.as-studio-tile--pink .as-studio-tile-ico {
  background: linear-gradient(145deg, #fce7f3, #f9a8d4);
  color: #9d174d;
  box-shadow: 0 10px 20px -12px rgba(244, 114, 182, 0.55);
}
.as-studio-tile--gold .as-studio-tile-ico {
  background: linear-gradient(145deg, #fef3c7, #fcd34d);
  color: #92400e;
  box-shadow: 0 10px 20px -12px rgba(201, 162, 39, 0.55);
}
.as-studio-tile--ink .as-studio-tile-ico {
  background: linear-gradient(145deg, #1f2937, #0f172a);
  color: #c4b5fd;
  box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.55);
}
.as-studio-tip {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(320px 140px at 100% 0%, rgba(244, 114, 182, 0.14), transparent 60%),
    linear-gradient(135deg, #ffffff, #faf5ff);
  border-color: #e9d5ff;
  box-shadow: 0 14px 36px -26px rgba(124, 58, 237, 0.4);
}
.as-studio-tip h3 { letter-spacing: -0.02em; }

/* Creator dashboard - guided next steps */
.as-studio-next { margin: 0 0 1.5rem; }
.as-studio-next-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem .85rem; margin: 0 0 .85rem;
}
.as-studio-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}
.as-studio-next-card {
  display: block;
  text-decoration: none !important;
  color: inherit;
  transition: transform .22s var(--as-ease), box-shadow .22s ease, border-color .22s ease;
}
.as-studio-next-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--as-emerald) 35%, #e5e7eb);
  box-shadow: 0 18px 36px -22px rgba(124, 58, 237, 0.45);
  color: inherit;
}
.as-studio-next-card h3 {
  margin: 0 0 .4rem;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.as-studio-next-card p {
  margin: 0 0 .85rem;
  color: var(--as-muted);
  font-size: .9rem;
  line-height: 1.45;
}
.as-studio-next-cta {
  font-weight: 750;
  font-size: .88rem;
  color: color-mix(in srgb, var(--as-emerald-deep) 90%, #6d28d9);
}

/* Public studio crumbs + money pages */
.as-school-crumb {
  margin: 0 0 1rem;
  font-size: .92rem;
  font-weight: 600;
}
.as-school-crumb a { color: var(--as-muted); text-decoration: none; }
.as-school-crumb a:hover { color: var(--as-emerald-deep); }

.as-course-hero,
.as-event-hero,
.as-offer-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.75fr);
  gap: 1.25rem 1.5rem;
  align-items: start;
  margin: 0 0 1.5rem;
}
.as-course-hero-cover {
  margin: 0 0 1rem;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e2e8f0;
  box-shadow: 0 14px 32px -20px rgba(15, 23, 42, 0.35);
}
.as-course-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.as-course-hero-copy h1,
.as-event-hero-copy h1,
.as-offer-hero-copy h1 {
  margin: .35rem 0 .75rem;
  font-size: clamp(1.85rem, 4vw, 2.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.as-course-hero-summary {
  margin: 0 0 1rem;
  color: var(--as-muted);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 40rem;
}
.as-course-hero-meta,
.as-offer-perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .9rem;
}
.as-course-hero-meta li,
.as-offer-perks li {
  font-size: .92rem;
  color: var(--as-muted);
}
.as-course-hero-meta strong,
.as-offer-perks strong { color: var(--as-ink); font-weight: 750; }
.as-offer-perks {
  flex-direction: column;
  gap: .45rem;
  margin-top: 1rem;
}
.as-offer-perks li {
  position: relative;
  padding-left: 1.15rem;
}
.as-offer-perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--as-emerald-deep);
  font-weight: 800;
}
.as-event-when {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--as-school-primary) 80%, #0f172a);
}

.as-course-buy,
.as-event-rsvp,
.as-offer-buy {
  position: sticky;
  top: 1rem;
  padding: 1.35rem 1.25rem 1.4rem;
  border-radius: 18px;
  background:
    radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--as-school-accent) 18%, transparent), transparent 70%),
    linear-gradient(160deg, #ffffff, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--as-school-primary) 18%, #e5e7eb);
  box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--as-school-primary) 55%, transparent);
}
.as-course-buy-price,
.as-offer-buy-price {
  margin: 0 0 .35rem;
  font-size: clamp(1.85rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--as-ink);
  line-height: 1.1;
}
.as-offer-buy-price span {
  display: inline-block;
  margin-left: .25rem;
  font-size: .95rem;
  font-weight: 650;
  color: var(--as-muted);
  letter-spacing: 0;
}

.as-course-about { margin: 0 0 1.5rem; }
.as-course-about h2,
.as-course-curriculum > h2 {
  margin: 0 0 .85rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.as-course-curriculum { margin: 0 0 1rem; }
.as-course-module { margin: 0 0 .9rem; padding: 1.1rem 1.15rem 1.05rem; }
.as-course-module-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .75rem;
  margin: 0 0 .85rem;
}
.as-course-module-num {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--as-school-primary) 75%, #64748b);
}
.as-course-module-head h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.as-course-lessons { display: grid; gap: .45rem; }
.as-course-lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.as-course-lesson.is-locked { opacity: .72; }
.as-course-lesson-main {
  display: flex; align-items: flex-start; gap: .7rem; min-width: 0;
}
.as-course-lesson-idx {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-size: .78rem;
  font-weight: 750;
  color: var(--as-muted);
}
.as-course-lesson.is-open .as-course-lesson-idx {
  background: color-mix(in srgb, var(--as-school-primary) 14%, #fff);
  border-color: color-mix(in srgb, var(--as-school-primary) 28%, #e5e7eb);
  color: color-mix(in srgb, var(--as-school-primary) 85%, #5b21b6);
}
.as-course-lesson.is-done .as-course-lesson-idx {
  background: #f5f3ff;
  border-color: #d8b4fe;
  color: #6d28d9;
}
.as-course-lesson-tags {
  display: flex; flex-wrap: wrap; gap: .35rem .55rem;
  margin-top: .25rem; align-items: center;
}
.as-course-lock {
  font-size: .8rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}
.as-course-curriculum-head {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 1rem;
}
.as-course-curriculum-head h2 { margin: 0; }
.as-course-overall-progress {
  min-width: min(16rem, 100%);
  flex: 1 1 12rem;
  max-width: 20rem;
  font-size: .88rem;
  font-weight: 650;
  color: #334155;
}
.as-course-overall-track { margin-top: .4rem; height: .35rem; }
.as-course-alt-access {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid #eef2f7;
}
/* Centralised course showcase */
.as-course-showcase {
  max-width: 1100px;
  margin: 0 auto 2rem;
  text-align: center;
}
.as-course-showcase-kicker {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6d28d9;
}
.as-course-showcase-title {
  margin: 0 0 .45rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}
.as-course-showcase-sub {
  margin: 0 auto 1.5rem;
  max-width: 36rem;
  color: var(--as-muted);
  font-size: .95rem;
  line-height: 1.5;
}
.as-course-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 1.1rem;
  align-items: stretch;
  text-align: left;
}
.as-course-showcase-grid--1 {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.as-course-showcase-grid--2 {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.as-course-showcase-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .as-course-showcase-grid--2,
  .as-course-showcase-grid--3 {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.as-course-showcase-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8eef5;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.as-course-showcase-card:hover {
  border-color: #ddd6fe;
  box-shadow: 0 18px 40px -26px rgba(124, 58, 237, 0.45);
  transform: translateY(-3px);
}
.as-course-showcase-card.is-featured {
  border-color: #c4b5fd;
  box-shadow: 0 22px 48px -28px rgba(124, 58, 237, 0.55);
}
.as-course-showcase-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  margin: 0;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .02em;
}
.as-course-showcase-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #f5f3ff, #e2e8f0);
  overflow: hidden;
  text-decoration: none;
}
.as-course-showcase-media.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.as-course-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.as-course-showcase-body {
  padding: 1.15rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 1;
}
.as-course-showcase-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.as-course-showcase-name a {
  color: inherit;
  text-decoration: none;
}
.as-course-showcase-name a:hover { color: var(--as-emerald-deep); }
.as-course-showcase-pitch {
  margin: 0;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.as-course-showcase-price {
  margin: .1rem 0 0;
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
}
.as-course-showcase-price strong {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.as-course-showcase-price span {
  color: #64748b;
  font-weight: 600;
  font-size: .88rem;
}
.as-course-showcase-body .as-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* Centralised membership pricing comparison */
.as-mem-pricing {
  max-width: 1100px;
  margin: 0 auto 2rem;
  text-align: center;
}
.as-mem-pricing-kicker {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6d28d9;
}
.as-mem-pricing-title {
  margin: 0 0 .45rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}
.as-mem-pricing-sub {
  margin: 0 auto 1.5rem;
  max-width: 36rem;
  color: var(--as-muted);
  font-size: .95rem;
  line-height: 1.5;
}
.as-mem-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
  gap: 1.1rem;
  align-items: stretch;
  text-align: left;
}
.as-mem-pricing-grid--1 {
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
.as-mem-pricing-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .as-mem-pricing-grid--3 {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
  }
}
.as-mem-tier {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8eef5;
  position: relative;
}
.as-mem-tier.is-featured {
  border-color: #c4b5fd;
  box-shadow: 0 22px 48px -28px rgba(124, 58, 237, 0.55);
  transform: translateY(-4px);
}
@media (max-width: 900px) {
  .as-mem-tier.is-featured { transform: none; }
}
.as-mem-tier-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  margin: 0;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: #7c3aed;
  color: #fff;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .02em;
}
.as-mem-tier-cover {
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #f5f3ff, #e2e8f0);
  overflow: hidden;
}
.as-mem-tier-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.as-mem-tier-body {
  padding: 1.15rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 1;
}
.as-mem-tier-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.as-mem-tier-pitch {
  margin: 0;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.45;
}
.as-mem-tier-price {
  margin: .15rem 0 0;
  display: flex;
  align-items: baseline;
  gap: .35rem;
  flex-wrap: wrap;
}
.as-mem-tier-price strong {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.as-mem-tier-price span {
  color: #64748b;
  font-weight: 600;
  font-size: .9rem;
}
.as-mem-tier-benefits {
  list-style: none;
  margin: .25rem 0 .35rem;
  padding: 0;
  display: grid;
  gap: .45rem;
  flex: 1;
}
.as-mem-tier-benefits li {
  position: relative;
  padding-left: 1.25rem;
  font-size: .9rem;
  line-height: 1.4;
  color: #334155;
}
.as-mem-tier-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .4rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}
.as-mem-tier-body .as-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.as-membership-course-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.as-membership-course-list li {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  align-items: baseline;
  padding: .7rem .8rem;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
}
.as-membership-course-list a {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
.as-membership-course-list a:hover { color: var(--as-emerald-deep); }

.as-lesson-progress {
  position: sticky;
  /* Sit under the sticky school header (.as-top z-index 60), not under lesson text */
  top: 4.75rem;
  top: calc(4.25rem + env(safe-area-inset-top, 0px));
  z-index: 55;
  margin: 0 0 1rem;
  padding: .65rem .85rem;
  border-radius: 12px;
  border: 1px solid #d8b4fe;
  background: #f5f3ff;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.as-lesson-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .35rem;
  font-size: .9rem;
}
.as-lesson-progress-top span {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #6d28d9;
}
.as-lesson-progress-track {
  height: .35rem;
  border-radius: 999px;
  background: #f3e8ff;
  overflow: hidden;
  border: 1px solid #e9d5ff;
}
.as-lesson-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width .25s ease;
}
.as-lesson-progress-hint {
  margin: .35rem 0 0;
  font-size: .8rem;
}

.as-lesson-hero { margin: 0 0 1rem; }
.as-lesson-hero h1 {
  margin: .35rem 0 0;
  font-size: clamp(1.55rem, 3.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.as-lesson-section-title {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
  font-weight: 750;
}
.as-lesson-video {
  margin: 0 0 1rem;
  padding: 0;
  overflow: hidden;
  background: #0f172a;
}
.as-lesson-video video {
  display: block;
  width: 100%;
  max-height: min(70vh, 520px);
  background: #0f172a;
}
.as-lesson-figures {
  margin: 0 0 1rem;
  display: grid;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}
.as-lesson-figure { margin: 0; min-width: 0; max-width: 100%; }
.as-lesson-figure img,
.as-ce-figure img {
  display: block;
  width: 100%;
  max-width: min(520px, 100%);
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--as-border, #e8eef5);
  background: #f8fafc;
}
.as-lesson-figure svg,
.as-ce-figure svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--as-border, #e8eef5);
  background: #f8fafc;
}
.as-lesson-figure figcaption {
  margin: .45rem 0 0;
  max-width: 520px;
  color: #64748b;
  font-size: .9rem;
}
.as-ce-figures {
  display: grid;
  gap: .85rem;
  margin: 0 0 .85rem;
  min-width: 0;
  max-width: 100%;
}
.as-ce-figure {
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 12px;
  padding: .75rem;
  min-width: 0;
  max-width: 100%;
}
.as-ce-figure-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: flex-end;
  margin-top: .65rem;
}
.as-ce-figure-row .as-label {
  flex: 1 1 220px;
  margin: 0;
}
.as-ce-diagram-add {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid #e8eef5;
}
.as-ce-diagram-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem .75rem;
}
@media (max-width: 640px) {
  .as-ce-diagram-steps { grid-template-columns: 1fr; }
}
.as-lesson-resource { margin: 0 0 1rem; }
.as-lesson-resource-img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--as-border);
}
.as-lesson-sheet { max-width: none; width: 100%; }
.as-lesson-sheet .as-lesson-video {
  margin: 1rem 0 0;
  border-radius: 14px;
}
.as-lesson-doc { margin-top: 1rem; }
.as-lesson-doc > :first-child { margin-top: 0; }
.as-lesson-doc h2 {
  margin: 1.2rem 0 .4rem;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.as-lesson-doc h3 {
  margin: 1rem 0 .35rem;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.as-lesson-doc p {
  margin: 0 0 .75rem;
  line-height: 1.65;
  white-space: normal;
}
.as-lesson-doc ul,
.as-lesson-doc ol {
  margin: 0 0 .95rem;
  padding-left: 1.25rem;
}
.as-lesson-doc li {
  margin: .22rem 0;
  line-height: 1.5;
}
.as-lesson-doc .as-lesson-figure { margin: .2rem 0 1rem; }
.as-lesson-doc .as-lesson-figure img {
  width: 100%;
  max-width: 100%;
}
.as-lesson-doc .as-lesson-figure svg {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.as-lesson-callout {
  padding: .75rem .9rem;
  border-radius: 12px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
}
.as-course-lesson-excerpt {
  display: block;
  margin-top: .15rem;
  color: var(--as-muted);
  font-size: .88rem;
  font-weight: 450;
  line-height: 1.4;
}
.as-lesson-body { margin: 0 0 1.25rem; }
.as-lesson-body-text { white-space: normal; }
.as-lesson-complete {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
}
.as-lesson-complete-hint {
  margin: .25rem 0 0;
  font-size: .88rem;
}
.as-lesson-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
}

.as-module { margin: 1.25rem 0; }
.as-module h3 { margin: 0 0 .65rem; color: var(--as-ink); }
.as-lesson-row {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: .85rem 1rem; background: #fff;
  border: 1px solid var(--as-border); border-radius: 12px; margin-bottom: .55rem;
}
.as-prose { max-width: 48rem; }
.as-prose p { white-space: pre-wrap; }

.as-cta-band {
  margin-top: 3.5rem;
  padding: 3rem 0;
  text-align: center;
  background: linear-gradient(180deg, #ffffff, #f5f3ff);
  border-top: 1px solid var(--as-border);
}
.as-cta-band h2 { margin-bottom: .75rem; }
.as-cta-band p { color: var(--as-muted); margin: 0 0 1.35rem; }

/* Home - exciting stack showcase (not a tile dump) */
.as-stack-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(244, 114, 182, 0.14), transparent 55%),
    radial-gradient(800px 380px at 90% 0%, rgba(124, 58, 237, 0.12), transparent 50%),
    var(--as-bg-soft);
}
.as-stack-head .as-pill { margin-bottom: .75rem; }
.as-stack-head h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}
/* Dual-row toolkit ribbon - counter-scrolling, orb-tinted pills */
.as-toolkit-ribbon {
  position: relative;
  margin: 1.85rem 0 2.15rem;
  padding: .35rem 0 .55rem;
  display: grid;
  gap: .7rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.as-toolkit-ribbon-fade {
  pointer-events: none;
  position: absolute; inset: -8% 0;
  background:
    radial-gradient(420px 120px at 20% 40%, rgba(244, 114, 182, 0.12), transparent 70%),
    radial-gradient(420px 120px at 80% 60%, rgba(124, 58, 237, 0.12), transparent 70%);
  z-index: 0;
}
.as-toolkit-row {
  position: relative; z-index: 1;
  overflow: hidden;
}
.as-toolkit-track {
  display: flex; gap: .7rem; width: max-content;
  will-change: transform;
}
/* CSS fallback - JS (.is-js) takes over so Windows reduced-motion PCs still scroll */
.as-toolkit-row--left .as-toolkit-track {
  animation: as-toolkit-left 55s linear infinite;
}
.as-toolkit-row--right .as-toolkit-track {
  animation: as-toolkit-right 62s linear infinite;
}
.as-toolkit-ribbon.is-js .as-toolkit-track {
  animation: none !important;
}
.as-toolkit-ribbon.is-paused .as-toolkit-track {
  animation-play-state: paused;
}
.as-toolkit-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .42rem .95rem .42rem .42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(17, 24, 39, 0.06);
  box-shadow:
    0 10px 28px -18px rgba(17, 24, 39, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  transition: transform .2s var(--as-ease), box-shadow .2s ease;
}
.as-toolkit-pill:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 32px -16px rgba(124, 58, 237, 0.35);
}
.as-toolkit-ico {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  font-size: .95rem;
  font-weight: 700;
  flex-shrink: 0;
}
.as-toolkit-label {
  font-weight: 750;
  font-size: .9rem;
  letter-spacing: -0.01em;
  color: var(--as-ink);
  padding-right: .2rem;
}
.as-toolkit-pill--emerald .as-toolkit-ico {
  background: linear-gradient(145deg, #ede9fe, #c4b5fd);
  color: #5b21b6;
  box-shadow: 0 8px 16px -10px rgba(124, 58, 237, 0.7);
}
.as-toolkit-pill--pink .as-toolkit-ico {
  background: linear-gradient(145deg, #fce7f3, #f9a8d4);
  color: #9d174d;
  box-shadow: 0 8px 16px -10px rgba(244, 114, 182, 0.7);
}
.as-toolkit-pill--gold .as-toolkit-ico {
  background: linear-gradient(145deg, #fef3c7, #fcd34d);
  color: #92400e;
  box-shadow: 0 8px 16px -10px rgba(201, 162, 39, 0.7);
}
.as-toolkit-pill--ink .as-toolkit-ico {
  background: linear-gradient(145deg, #1f2937, #111827);
  color: #c4b5fd;
  box-shadow: 0 8px 16px -10px rgba(17, 24, 39, 0.7);
}
@keyframes as-toolkit-left {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}
@keyframes as-toolkit-right {
  from { transform: translateX(-33.333%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep a gentle scroll - Windows often sets reduced-motion and was freezing the ribbon on PC */
  .as-toolkit-row--left .as-toolkit-track {
    animation-duration: 90s;
  }
  .as-toolkit-row--right .as-toolkit-track {
    animation-duration: 100s;
  }
}
@media (max-width: 640px) {
  .as-toolkit-pill { padding-right: .8rem; }
  .as-toolkit-label { font-size: .82rem; }
  .as-toolkit-ico { width: 1.75rem; height: 1.75rem; font-size: .85rem; }
}

.as-stack-bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}
.as-stack-panel {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 1.55rem 1.45rem 1.4rem;
  border: 1px solid var(--as-border);
  background: #fff;
  box-shadow: var(--as-shadow-soft);
  min-height: 100%;
  transition:
    transform .28s var(--as-ease),
    box-shadow .28s ease,
    border-color .28s ease;
  will-change: transform;
}
.as-stack-panel--hero {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  padding: 1.85rem 1.65rem;
}
.as-stack-panel-glow {
  position: absolute; inset: auto -20% -30% auto;
  width: 70%; height: 70%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(28px);
  opacity: .85;
  transition: opacity .35s ease, transform .45s var(--as-ease), filter .35s ease;
}
.as-stack-panel--emerald {
  background: linear-gradient(160deg, #f5f3ff 0%, #ffffff 42%, #fff 100%);
  border-color: #e9d5ff;
}
.as-stack-panel--emerald .as-stack-panel-glow {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.35), transparent 70%);
}
.as-stack-panel--gold {
  background: linear-gradient(160deg, #fffbeb 0%, #ffffff 50%);
  border-color: #fde68a;
}
.as-stack-panel--gold .as-stack-panel-glow {
  background: radial-gradient(circle, rgba(201, 162, 39, 0.32), transparent 70%);
}
.as-stack-panel--pink {
  background: linear-gradient(160deg, #fdf2f8 0%, #ffffff 48%);
  border-color: #fbcfe8;
}
.as-stack-panel--pink .as-stack-panel-glow {
  background: radial-gradient(circle, rgba(244, 114, 182, 0.3), transparent 70%);
}
/* Ink panel stays premium but stays readable: light surface, dark type, ink accent */
.as-stack-panel--ink {
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 55%, #eef2ff 100%);
  border-color: #cbd5e1;
  color: #0f172a;
  box-shadow:
    var(--as-shadow-soft),
    inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}
.as-stack-panel--ink .as-stack-eyebrow {
  color: #0f766e;
}
.as-stack-panel--ink h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
  background: none;
  text-shadow: none;
  font-weight: 800;
}
.as-stack-panel--ink .as-stack-blurb {
  color: #334155;
  font-weight: 500;
  opacity: 1;
  text-shadow: none;
}
.as-stack-panel--ink .as-stack-panel-glow {
  z-index: 0;
  opacity: .55;
  width: 60%;
  height: 60%;
  inset: auto -22% -32% auto;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.1), rgba(124, 58, 237, 0.12), transparent 70%);
}
.as-stack-panel--ink .as-stack-tools li {
  background: #0f172a;
  border-color: #0f172a;
  color: #f5f3ff;
  font-weight: 750;
  box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.55);
}
.as-stack-eyebrow {
  position: relative; z-index: 1;
  margin: 0 0 .55rem;
  font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--as-emerald-deep);
}
.as-stack-panel h3 {
  position: relative; z-index: 1;
  margin: 0 0 .65rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 750; letter-spacing: -0.03em;
  color: var(--as-ink);
}
.as-stack-panel--hero h3 { font-size: clamp(1.7rem, 3vw, 2.35rem); max-width: 12ch; }
.as-stack-blurb {
  position: relative; z-index: 1;
  margin: 0 0 1.15rem;
  color: var(--as-muted);
  font-size: 1.02rem;
  max-width: 36rem;
  line-height: 1.55;
}
.as-stack-tools {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.as-stack-tools li {
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(17, 24, 39, 0.08);
  font-size: .82rem; font-weight: 700;
  color: var(--as-ink);
  transition: transform .2s var(--as-ease), box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* Sexy hover - stack cards + studio/demo panels (pointer devices only) */
@media (hover: hover) and (pointer: fine) {
  .as-stack-panel:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow:
      0 28px 56px -28px rgba(124, 58, 237, 0.45),
      0 12px 28px -18px rgba(244, 114, 182, 0.28);
  }
  .as-stack-panel:hover .as-stack-panel-glow {
    opacity: 1;
    transform: scale(1.18) translate(-4%, -6%);
    filter: blur(22px);
  }
  .as-stack-panel:hover .as-stack-tools li {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.35);
  }
  .as-stack-panel--emerald:hover { border-color: #a78bfa; }
  .as-stack-panel--gold:hover { border-color: #fbbf24; }
  .as-stack-panel--pink:hover {
    border-color: #f472b6;
    box-shadow:
      0 28px 56px -28px rgba(244, 114, 182, 0.4),
      0 12px 28px -18px rgba(124, 58, 237, 0.2);
  }
  .as-stack-panel--ink:hover {
    border-color: #64748b;
    box-shadow:
      0 28px 56px -28px rgba(15, 23, 42, 0.35),
      0 12px 28px -18px rgba(124, 58, 237, 0.25);
  }
  .as-stack-panel--ink:hover .as-stack-tools li {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #f5f3ff;
  }

  .as-panel,
  .as-quote {
    transition:
      transform .28s var(--as-ease),
      box-shadow .28s ease,
      border-color .28s ease;
  }
  .as-panel:hover {
    transform: translateY(-7px) scale(1.012);
    border-color: #a78bfa;
    box-shadow:
      0 26px 52px -26px rgba(124, 58, 237, 0.5),
      0 10px 24px -16px rgba(201, 162, 39, 0.3);
  }
  .as-quote:hover {
    transform: translateY(-7px) scale(1.012);
    border-color: #f9a8d4;
    box-shadow:
      0 26px 52px -26px rgba(244, 114, 182, 0.35),
      0 10px 24px -16px rgba(124, 58, 237, 0.2);
  }
  .as-quote:hover blockquote {
    color: #6d28d9;
  }

  .as-section .as-grid > .as-card {
    transition:
      transform .28s var(--as-ease),
      box-shadow .28s ease,
      border-color .28s ease;
  }
  .as-section .as-grid > .as-card:hover {
    transform: translateY(-6px);
    border-color: #d8b4fe;
    box-shadow: 0 22px 44px -24px rgba(124, 58, 237, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .as-stack-panel,
  .as-panel,
  .as-quote,
  .as-section .as-grid > .as-card {
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .as-stack-panel:hover,
  .as-panel:hover,
  .as-quote:hover,
  .as-section .as-grid > .as-card:hover {
    transform: none;
  }
}
.as-stack-footnote {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .75rem 1rem;
  margin-top: 1.75rem;
  text-align: center;
}
.as-stack-footnote p {
  margin: 0;
  width: 100%;
  color: var(--as-muted);
}
@media (max-width: 900px) {
  .as-stack-bento { grid-template-columns: 1fr; }
  .as-stack-panel--hero {
    grid-row: auto;
    min-height: 0;
  }
}

/* Features page - deep sexy layout */
.as-features-hero .as-hero-orb { min-height: 214px; }
.as-features-orb .as-aether-mark { width: min(100%, 191px); }
.as-features-ribbon-wrap { padding-bottom: 2rem; }
.as-features-jump {
  display: flex; flex-wrap: wrap; gap: .55rem;
  justify-content: center;
  margin: .25rem 0 0.5rem;
}
.as-features-jump-link {
  display: inline-flex; align-items: center;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-weight: 750; font-size: .88rem;
  text-decoration: none !important;
  border: 1px solid var(--as-border);
  background: #fff;
  color: var(--as-ink);
  box-shadow: var(--as-shadow-soft);
  transition: transform .15s var(--as-ease), border-color .15s ease;
}
.as-features-jump-link:hover { transform: translateY(-2px); color: var(--as-ink); }
.as-features-jump-link--emerald { border-color: #e9d5ff; background: #f5f3ff; color: #5b21b6; }
.as-features-jump-link--gold { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.as-features-jump-link--pink { border-color: #fbcfe8; background: #fdf2f8; color: #9d174d; }
.as-features-jump-link--ink { border-color: #374151; background: #111827; color: #c4b5fd; }

.as-features-deep {
  padding: 3.25rem 0;
  border-top: 1px solid var(--as-border);
  position: relative;
  overflow: hidden;
}
.as-features-deep--emerald {
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 38%, #ffffff 100%);
}
.as-features-deep--gold {
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 40%, #ffffff 100%);
}
.as-features-deep--pink {
  background: linear-gradient(180deg, #fdf2f8 0%, #ffffff 40%, #ffffff 100%);
}
.as-features-deep--ink {
  background: linear-gradient(180deg, #0f172a 0%, #111827 45%, #0b1220 100%);
  color: #f9fafb;
  border-top-color: #1f2937;
}
.as-features-deep--ink h2 { color: #fff; }
.as-features-deep--ink .as-section-sub { color: #9ca3af; }
.as-features-deep--ink .as-stack-eyebrow { color: #c4b5fd; }

.as-features-deep-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.as-features-deep-head h2 {
  margin: .35rem 0 .5rem;
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.as-features-deep-count {
  display: grid; place-items: center;
  width: 5.5rem; height: 5.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--as-border);
  box-shadow: var(--as-shadow-soft);
  text-align: center;
}
.as-features-deep-count strong {
  display: block; font-size: 1.75rem; line-height: 1;
  color: var(--as-emerald-deep); letter-spacing: -0.03em;
}
.as-features-deep-count span {
  font-size: .72rem; font-weight: 750; text-transform: uppercase;
  letter-spacing: .06em; color: var(--as-muted);
}
.as-features-deep--ink .as-features-deep-count {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.as-features-deep--ink .as-features-deep-count strong { color: #c4b5fd; }
.as-features-deep--ink .as-features-deep-count span { color: #9ca3af; }

.as-features-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .85rem;
}
.as-features-mosaic-card {
  grid-column: span 4;
  position: relative;
  padding: 1.25rem 1.2rem 1.3rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.07);
  box-shadow: var(--as-shadow-soft);
  transition: transform .18s var(--as-ease), box-shadow .18s ease;
}
.as-features-mosaic-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--as-shadow);
}
.as-features-mosaic-card--lead {
  grid-column: span 6;
  padding: 1.55rem 1.45rem;
  background: linear-gradient(155deg, rgba(255,255,255,0.98), rgba(236, 253, 245, 0.9));
}
.as-features-deep--gold .as-features-mosaic-card--lead {
  background: linear-gradient(155deg, #fff, #fffbeb);
}
.as-features-deep--pink .as-features-mosaic-card--lead {
  background: linear-gradient(155deg, #fff, #fdf2f8);
}
.as-features-deep--ink .as-features-mosaic-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
}
.as-features-deep--ink .as-features-mosaic-card--lead {
  background: linear-gradient(155deg, rgba(255,255,255,0.09), rgba(139, 92, 246, 0.12));
}
.as-features-deep--ink .as-features-mosaic-card h3 { color: #fff; }
.as-features-deep--ink .as-features-mosaic-card p { color: #9ca3af; }
.as-features-mosaic-ico {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  margin-bottom: .75rem;
  font-size: 1.05rem;
  background: linear-gradient(145deg, #ede9fe, #ddd6fe);
  color: #5b21b6;
  box-shadow: 0 10px 20px -12px rgba(124, 58, 237, 0.55);
}
.as-features-deep--gold .as-features-mosaic-ico {
  background: linear-gradient(145deg, #fef3c7, #fcd34d);
  color: #92400e;
}
.as-features-deep--pink .as-features-mosaic-ico {
  background: linear-gradient(145deg, #fce7f3, #f9a8d4);
  color: #9d174d;
}
.as-features-deep--ink .as-features-mosaic-ico {
  background: linear-gradient(145deg, #1f2937, #111827);
  color: #c4b5fd;
  border: 1px solid rgba(110, 231, 153, 0.25);
}
.as-features-mosaic-card h3 {
  margin: 0 0 .4rem;
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.as-features-mosaic-card--lead h3 { font-size: 1.35rem; }
.as-features-mosaic-card p {
  margin: 0;
  color: var(--as-muted);
  font-size: .95rem;
  line-height: 1.5;
}

.as-features-proof {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 1.75rem;
  align-items: stretch;
  padding: 1rem 0 0;
}
.as-features-proof-copy h2 {
  margin: .65rem 0 .75rem;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}
.as-features-proof-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 1.75rem 1.5rem;
  background: linear-gradient(160deg, #111827, #0f172a 60%, #064e3b);
  color: #f9fafb;
  border: 1px solid #1f2937;
  box-shadow: var(--as-shadow);
  display: flex; flex-direction: column; gap: .75rem;
  justify-content: flex-end;
}
.as-features-proof-glow {
  position: absolute; width: 70%; height: 70%;
  right: -20%; top: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.35), rgba(124, 58, 237, 0.2), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.as-features-proof-card .as-stack-eyebrow { color: #c4b5fd; position: relative; z-index: 1; }
.as-features-proof-card h3 {
  margin: 0; position: relative; z-index: 1;
  font-size: 1.75rem; color: #fff; letter-spacing: -0.02em;
}
.as-features-proof-card p {
  margin: 0 0 .5rem; position: relative; z-index: 1;
  color: #d1d5db;
}
.as-features-proof-card .as-btn { position: relative; z-index: 1; align-self: flex-start; }
.as-features-cta {
  background:
    radial-gradient(700px 280px at 50% 0%, rgba(244, 114, 182, 0.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f5f3ff);
}

@media (max-width: 900px) {
  .as-features-mosaic-card,
  .as-features-mosaic-card--lead { grid-column: span 6; }
  .as-features-proof { grid-template-columns: 1fr; }
  .as-features-deep { padding: 2.35rem 0; }
}
@media (max-width: 640px) {
  .as-features-mosaic-card,
  .as-features-mosaic-card--lead { grid-column: span 12; }
  .as-features-jump { gap: .4rem; }
  .as-features-jump-link { font-size: .8rem; padding: .45rem .8rem; }
}

/* Marketing - dense feature grids (legacy / other pages) */
.as-feature-dense {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .9rem;
}
.as-feature-tile {
  padding: 1.15rem 1.15rem 1.2rem;
}
.as-feature-tile h3 {
  font-size: 1rem;
  margin: 0 0 .35rem;
}
.as-feature-tile p { font-size: .9rem; }
.as-feature-tile .as-card-icon {
  width: 38px; height: 38px; margin-bottom: .7rem; font-size: 1rem;
}
.as-pillar-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.as-pillar-card {
  background: linear-gradient(160deg, #ffffff, #fbf9ff);
  border-color: #dcefE3;
}
.as-check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}
.as-check-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--as-muted);
  font-size: .95rem;
}
.as-check-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--as-emerald);
  font-weight: 800;
}
.as-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 860px;
  margin: 1.75rem auto 0;
}
.as-pricing-grid-3 { max-width: 1100px; }
.as-pricing-card { padding: 1.6rem 1.5rem; }
.as-pricing-featured {
  border-color: #d8b4fe;
  background: linear-gradient(165deg, #f5f3ff, #ffffff 45%);
  box-shadow: var(--as-shadow);
}
.as-pricing-current {
  outline: 2px solid var(--as-emerald);
  outline-offset: 2px;
}
.as-pill-ghost {
  background: #f3f4f6;
  color: var(--as-muted);
}
.as-pill-danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.as-plan-badge {
  display: inline-flex; align-items: center;
  padding: .28rem .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none !important;
}
.as-plan-badge--starter { background: #f3f4f6; color: #374151; }
.as-plan-badge--creator { background: var(--as-emerald-soft); color: var(--as-emerald-deep); }
.as-plan-badge--growth {
  background: linear-gradient(135deg, #f5f3ff, #fef9c3);
  color: #854d0e;
}
.as-studio-nav a.is-locked {
  opacity: .72;
  color: var(--as-muted);
}
.as-studio-nav a.is-locked .as-nav-lock {
  margin-left: auto;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .4rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
}
.as-studio-nav-upgrade {
  margin: 1rem .35rem 1.5rem;
  padding: .9rem;
  border-radius: 12px;
  background: linear-gradient(165deg, #f5f3ff, #ffffff);
  border: 1px solid #ede9fe;
}
.as-studio-nav-upgrade p { margin: 0 0 .35rem; font-size: .88rem; }
.as-studio-nav-upgrade .as-btn { margin-top: .5rem; }
.as-upgrade-panel { max-width: 40rem; padding: .5rem 0 2rem; }
.as-upgrade-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.as-plan-summary-row {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 1rem;
}
.as-plan-summary-row .as-btn { margin-left: .35rem; }
.as-stat-limit { font-size: .55em; font-weight: 600; color: var(--as-muted); }
.as-admin-plan-form {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.as-admin-plan-form .as-input {
  padding: .35rem .55rem; font-size: .88rem; width: auto;
}
.as-table-wrap { overflow-x: auto; }
.as-plan-matrix th:not(:first-child),
.as-plan-matrix td:not(:first-child) { text-align: center; }
.as-price {
  margin: .65rem 0 0.85rem;
  display: flex; align-items: baseline; gap: .35rem;
}
.as-price strong {
  font-size: 2.6rem;
  letter-spacing: -0.03em;
  color: var(--as-emerald-deep);
}
.as-price span { color: var(--as-muted); font-weight: 600; }

/* Community / forum */
.as-community-head {
  display: flex; justify-content: space-between; gap: 1rem;
  align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.as-community-cats { display: grid; gap: 1rem; }
.as-community-cat-top {
  display: flex; justify-content: space-between; gap: 1rem;
  align-items: flex-start; flex-wrap: wrap;
}
.as-community-cat h2 {
  margin: 0 0 .35rem; font-size: 1.2rem; font-weight: 750; letter-spacing: -0.02em;
}
.as-community-cat h2 a { color: var(--as-ink); text-decoration: none; }
.as-community-cat h2 a:hover { color: var(--as-emerald-deep); }
.as-community-thread-list {
  list-style: none; padding: 0; margin: 1rem 0 0;
  border-top: 1px solid var(--as-border);
}
.as-community-thread-list li { border-bottom: 1px solid var(--as-border); }
.as-community-thread-list a {
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  padding: .9rem 0; color: inherit; text-decoration: none;
}
.as-community-thread-list a strong { font-size: .98rem; }
.as-community-thread-list a:hover strong { color: var(--as-emerald-deep); }
.as-community-table { box-shadow: none; border: 0; border-radius: 0; }
.as-community-post, .as-community-reply { margin-bottom: .85rem; }
.as-community-post-meta {
  display: flex; flex-wrap: wrap; gap: .4rem .65rem; align-items: center;
  margin-bottom: .75rem;
}
.as-community-actions {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem;
  padding-top: .85rem; border-top: 1px solid var(--as-border);
}
.as-studio-main .as-community-actions {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.as-inline-form { display: inline; margin: 0; }

.as-community-studio-cats {
  display: grid;
  gap: .75rem;
}
.as-community-studio-cat {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.as-community-studio-cat-main {
  min-width: 0;
  flex: 1 1 16rem;
}

.as-community-author {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.as-community-author-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #e2e8f0;
  border: 1px solid #e5e7eb;
}
.as-community-author-avatar--fallback {
  display: grid; place-items: center;
  font-size: .72rem;
  font-weight: 800;
  color: #5b21b6;
  background: linear-gradient(145deg, #ede9fe, #ddd6fe);
  border-color: #ddd6fe;
}
.as-community-author-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--as-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}
.as-community-thread-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .65rem;
  width: 100%;
  font-size: .88rem;
}
.as-community-thread-list .as-community-author-name { font-weight: 650; font-size: .85rem; }
.as-community-thread-list .as-community-author-avatar { width: 22px; height: 22px; }

/* Studio calendar */
.as-weekday-fieldset {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}
.as-weekday-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .35rem;
}
.as-weekday-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: .55rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--as-border);
  background: #fff;
  font-weight: 700;
  font-size: .88rem;
  color: var(--as-muted);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.as-weekday-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.as-weekday-chip:hover {
  border-color: #ddd6fe;
  color: var(--as-emerald-deep);
}
.as-weekday-chip.is-on,
.as-weekday-chip:has(input:checked) {
  background: var(--as-emerald-soft);
  border-color: #c4b5fd;
  color: var(--as-emerald-deep);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.as-calendar-avail-summary {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.as-calendar-avail-summary li {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  align-items: baseline;
  padding: .55rem .75rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e8eef5;
  font-size: .92rem;
}
.as-calendar-appts {
  display: grid;
  gap: .75rem;
}
.as-calendar-appt {
  margin: 0;
}
.as-calendar-appt-main {
  min-width: 0;
}
.as-calendar-ai-panel {
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid #ede9fe;
  background: linear-gradient(180deg, #f5f3ff 0%, #fff 70%);
}

/* -- Mobile / tablet chrome -- */
.as-menu-toggle {
  display: none;
  align-items: center; gap: .45rem;
  border: 1px solid var(--as-border);
  background: #fff;
  border-radius: 999px;
  padding: .45rem .75rem .45rem .55rem;
  font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--as-ink); cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.as-menu-toggle:hover { background: var(--as-bg-soft); }
.as-menu-toggle[aria-expanded="true"] {
  border-color: #d8b4fe;
  background: var(--as-emerald-soft);
  color: var(--as-emerald-deep);
}
.as-menu-toggle-bars {
  display: grid; gap: 3px; width: 18px;
}
.as-menu-toggle-bars span {
  display: block; height: 2px; border-radius: 2px;
  background: currentColor;
}
.as-menu-toggle-text { line-height: 1; }
.as-nav-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 50;
  background: rgba(17, 24, 39, 0.35);
  /* no blur - felt like a stuck haze over the UI */
  pointer-events: auto;
}
.as-nav-backdrop.is-open { display: block; }
body.as-nav-open { overflow: hidden; touch-action: none; }
.as-drawer-close {
  display: none;
  margin-left: auto;
  border: 0; background: transparent;
  font-size: 1.6rem; line-height: 1;
  color: var(--as-muted); cursor: pointer;
  padding: .2rem .45rem; border-radius: 8px;
}
.as-drawer-close:hover { background: var(--as-bg-soft); color: var(--as-ink); }
.as-brand-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: min(42vw, 16rem);
}
.as-brand { min-width: 0; }

/* iPad / tablet landscape tweaks */
@media (max-width: 1100px) {
  .as-studio-shell { grid-template-columns: 220px 1fr; gap: 1rem; }
  .as-pricing-grid { max-width: none; }
}

/* Phones + small tablets: hamburger + drawer */
@media (max-width: 900px) {
  .as-menu-toggle { display: inline-flex; }
  .as-menu-toggle--studio { display: inline-flex; }
  .as-menu-toggle--account { display: inline-flex; }
  .as-school-body .as-menu-toggle--school { display: inline-flex; }
  .as-school-top-desk { display: none !important; }
  .as-school-nav-desk { display: none !important; }

  .as-top-inner { flex-wrap: nowrap; }
  .as-nav {
    display: none;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 3.75rem);
    right: .75rem;
    left: auto;
    width: min(20rem, calc(100vw - 1.5rem));
    max-height: min(70vh, 28rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .65rem;
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: 16px;
    box-shadow: var(--as-shadow);
    z-index: 80;
  }
  .as-nav.is-open { display: flex; }
  .as-school-nav-mobile {
    display: none !important;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 3.75rem);
    right: .75rem;
    left: auto;
    width: min(20rem, calc(100vw - 1.5rem));
    max-height: min(75vh, 32rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .65rem;
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: 16px;
    box-shadow: var(--as-shadow);
    z-index: 80;
  }
  .as-school-nav-mobile.is-open {
    display: flex !important;
  }
  .as-school-nav-mobile > a {
    width: 100%;
    justify-content: flex-start;
    border-radius: 10px;
    padding: .7rem .85rem;
    font-size: .95rem;
  }
  .as-nav > a:not(.as-btn),
  .as-nav > .as-plan-badge,
  .as-nav > .as-btn {
    width: 100%;
    justify-content: flex-start;
    border-radius: 10px;
    padding: .7rem .85rem;
    font-size: .95rem;
  }
  .as-nav > .as-btn { text-align: center; justify-content: center; }

  .as-hero { padding-top: 1.25rem; }
  .as-hero-panel { grid-template-columns: 1fr; gap: 1.25rem; }
  .as-hero-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .as-hero-kicker {
    margin-left: auto;
    margin-right: auto;
  }
  .as-hero-orb {
    order: -1;
    min-height: 0;
    padding: 12px 0 20px;
    justify-items: center;
    margin: 0 auto;
  }
  .as-aether-mark {
    width: min(100%, 158px);
    margin: 0 auto;
  }
  .as-hero h1 {
    max-width: none;
    font-size: clamp(2rem, 8vw, 2.75rem);
    text-align: center;
  }
  .as-hero p.lead {
    font-size: 1.02rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .as-hero-actions .as-btn { width: 100%; }
  .as-hero-actions {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 22rem;
  }
  .as-trust {
    justify-content: center;
    text-align: center;
  }

  .as-section { padding-top: 2.25rem; }
  .as-section-alt { margin-top: 2.25rem; padding: 2.25rem 0; }
  .as-section-head { margin-bottom: 1.35rem; }
  .as-split { grid-template-columns: 1fr; }
  .as-cta-band { margin-top: 2.25rem; padding: 2.25rem 0; }

  .as-grid { grid-template-columns: 1fr; }
  .as-feature-dense { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .as-pricing-grid,
  .as-pricing-grid-3 {
    grid-template-columns: 1fr;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
  }
  .as-price strong { font-size: 2.2rem; }

  .as-auth-card {
    margin: 1.5rem auto;
    padding: 1.35rem 1.15rem;
    border-radius: 14px;
  }

  .as-studio-shell {
    grid-template-columns: 1fr;
    padding: 1rem 0 2.5rem;
  }
  .as-studio-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(20rem, 88vw);
    max-height: none;
    z-index: 90; /* above backdrop + header */
    border-radius: 0 18px 18px 0;
    padding: .75rem .65rem 1.25rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 12px 0 40px -18px rgba(17, 24, 39, 0.35);
  }
  .as-studio-nav.is-open { display: grid; }
  .as-studio-nav-head {
    position: sticky; top: 0; z-index: 1;
    background: linear-gradient(135deg, #f5f3ff, #ffffff 60%);
  }
  .as-studio-hero { align-items: flex-start; }
  .as-studio-hero-orb { width: 32px; height: 32px; }
  .as-drawer-close { display: inline-flex; }
  .as-studio-main {
    padding: 1.05rem 1rem 1.35rem;
    border-radius: 16px;
  }
  .as-studio-main h1 { font-size: 1.45rem; }
  .as-studio-hero {
    margin: -.15rem -.1rem 1rem;
    padding: 1rem;
  }
  .as-studio-hero-actions .as-btn { width: 100%; }
  .as-studio-hero-actions { width: 100%; }
  .as-brand-prefix { display: none; }
  .as-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-stat strong { font-size: 1.35rem; }

  .as-lesson-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .as-course-hero,
  .as-event-hero,
  .as-offer-hero {
    grid-template-columns: 1fr;
  }
  .as-course-buy,
  .as-event-rsvp,
  .as-offer-buy {
    position: static;
    order: -1;
  }
  .as-course-lesson {
    flex-wrap: wrap;
  }
  .as-lesson-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .as-lesson-pager .as-btn { width: 100%; text-align: center; justify-content: center; }
  .as-studio-next-grid { grid-template-columns: 1fr; }

  .as-table,
  .as-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .as-table { min-width: 32rem; }
  .as-table-wrap .as-table { display: table; min-width: 32rem; }

  .as-form, .as-form.wide { max-width: none; }
  .as-plan-summary-row { flex-direction: column; }
  .as-plan-summary-row .as-btn { margin-left: 0; }
  .as-admin-plan-form { width: 100%; }
  .as-admin-plan-form .as-input { flex: 1; min-width: 7rem; }

  .as-foot { padding: 2rem 0; }
  .as-foot-inner { flex-direction: column; gap: 1rem; }
}

/* Narrow phones */
@media (max-width: 640px) {
  .as-wrap { width: min(1120px, calc(100% - 1rem)); }
  .as-menu-toggle-text { display: none; }
  .as-menu-toggle { padding: .55rem; border-radius: 12px; }
  .as-brand img { width: 40px; height: 40px; }
  .as-brand { font-size: 1.2rem; gap: .6rem; }
  .as-brand .as-wordmark { font-size: 1.28em; }
  .as-brand-text { max-width: min(52vw, 12rem); }
  .as-feature-dense { grid-template-columns: 1fr; }
  .as-aether-mark { width: min(100%, 124px); margin: 0 auto; }
  .as-card { padding: 1.15rem 1.05rem; }
  .as-stat-grid { gap: .65rem; }
  .as-btn { padding: .72rem 1.15rem; }
  .as-btn:hover { transform: none; } /* avoid sticky hover on touch */
  .as-card:hover { transform: none; }
  .as-stat:hover { transform: none; }
}

/* Touch-friendly tap targets */
@media (hover: none) and (pointer: coarse) {
  .as-nav > a:not(.as-btn),
  .as-studio-nav a {
    min-height: 44px;
  }
  .as-btn { min-height: 44px; }
  .as-btn:hover,
  .as-card:hover,
  .as-stat:hover { transform: none; }
}

/* Prefer reduced motion already handled for orb; calm UI motion on small screens */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .as-nav, .as-studio-nav, .as-nav-backdrop {
    transition: none !important;
  }
}

/* Platform admin shell (reuses studio layout tokens) */
body.as-admin-body {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(124, 58, 237, 0.12), transparent 55%),
    radial-gradient(700px 380px at 78% 0%, rgba(59, 130, 246, 0.07), transparent 50%),
    #f4f7f6;
}
body.as-admin-body::before { display: none; }
.as-admin-shell.as-studio-shell {
  gap: 1.5rem;
}
.as-admin-main h1 {
  letter-spacing: -0.02em;
}
.as-admin-nav .as-studio-nav-link.is-on {
  background: rgba(124, 58, 237, 0.12);
}
.as-admin-health.is-ok {
  border-color: #ddd6fe;
  background: linear-gradient(180deg, #f5f3ff, #fdfaff);
}
.as-admin-health.is-warn {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffbeb, #fffdf7);
}
.as-admin-health strong { font-size: 1.15rem; }
.as-admin-caps {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem 1rem;
}
.as-admin-caps .as-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 800px) {
  .as-admin-caps { grid-template-columns: 1fr 1fr; }
}

/* Studio analytics charts */
.as-analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.as-analytics-chart-card {
  margin: 0;
  overflow: hidden;
}
.as-analytics-chart-head h2 {
  margin: 0 0 .25rem;
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.as-analytics-chart-head .as-muted {
  margin: 0 0 1rem;
  font-size: .9rem;
}
.as-analytics-chart-wrap {
  position: relative;
  height: 260px;
}
.as-analytics-chart-wrap--bar { height: 320px; }
@media (max-width: 900px) {
  .as-analytics-chart-grid { grid-template-columns: 1fr; }
  .as-analytics-chart-wrap { height: 220px; }
  .as-analytics-chart-wrap--bar { height: 280px; }
}

/* Studio overview — soft welcome banner (light, not imposing) */
.as-ov-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.1rem;
  padding: 1.35rem 1.4rem 1.3rem;
  border-radius: 22px;
  border: 1px solid #e5e7eb;
  background:
    radial-gradient(420px 180px at 8% -20%, color-mix(in srgb, var(--as-school-accent, #c9a227) 16%, transparent), transparent 60%),
    radial-gradient(380px 200px at 96% 0%, color-mix(in srgb, var(--as-school-primary, #7c3aed) 14%, transparent), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--as-ink);
  box-shadow: 0 14px 36px -28px rgba(15, 23, 42, 0.28);
}
.as-ov-hero-glow {
  position: absolute;
  inset: auto -8% -50% 45%;
  height: 140px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--as-school-primary, #7c3aed) 12%, transparent), transparent);
  pointer-events: none;
  filter: blur(10px);
}
.as-ov-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem 1.5rem;
}
.as-ov-hero-main {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 18rem;
}
.as-ov-hero-logo-wrap {
  flex-shrink: 0;
  padding: 2px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--as-school-accent, #c9a227) 55%, white), color-mix(in srgb, var(--as-school-primary, #7c3aed) 55%, white));
  box-shadow: 0 8px 20px -14px rgba(15, 23, 42, 0.35);
}
.as-ov-hero-logo {
  display: block;
  width: 64px; height: 64px;
  border-radius: 16px;
  object-fit: cover;
  background: #fff;
}
.as-ov-kicker {
  margin: 0 0 .4rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--as-school-primary, #7c3aed) 75%, #64748b);
}
.as-ov-hero-copy h1 {
  margin: .45rem 0 .3rem;
  font-family: var(--as-display);
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
}
.as-ov-hero-sub {
  margin: 0;
  color: #64748b;
  font-size: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .45rem;
  align-items: baseline;
}
.as-ov-hero-sub strong { color: #0f172a; font-weight: 700; }
.as-ov-dot { opacity: .45; }
.as-ov-meta {
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.as-ov-chip {
  display: inline-flex; align-items: center;
  padding: .24rem .65rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: .74rem;
  font-weight: 750;
  color: #475569;
  letter-spacing: .01em;
}
.as-ov-chip.is-live {
  border-color: #d8b4fe;
  background: #f5f3ff;
  color: #6d28d9;
}
.as-ov-chip-link {
  text-decoration: none !important;
  color: #6d28d9;
  border-color: #e9d5ff;
  background: #faf5ff;
}
.as-ov-chip-link:hover { background: #f3e8ff; color: #5b21b6; }
.as-ov-hero-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.15rem;
}
.as-ov-progress {
  position: relative;
  width: 68px; height: 68px;
  flex-shrink: 0;
}
.as-ov-progress svg { display: block; transform: rotate(-90deg); }
.as-ov-progress-track {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 6;
}
.as-ov-progress-val {
  fill: none;
  stroke: color-mix(in srgb, var(--as-school-primary, #7c3aed) 75%, var(--as-school-accent, #c9a227));
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dasharray .5s var(--as-ease);
}
.as-ov-progress-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.05;
}
.as-ov-progress-label strong {
  font-size: .9rem;
  font-weight: 800;
  color: #0f172a;
}
.as-ov-progress-label span {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.as-ov-hero-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center;
}
.as-ov-btn-light {
  background: #fff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
.as-ov-btn-light:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

.as-ov-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin: 0 0 1.15rem;
}
.as-ov-quick-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem .95rem;
  border-radius: 14px;
  border: 1px solid #e8eef5;
  background: #fff;
  text-decoration: none !important;
  color: inherit;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 22px -20px rgba(15, 23, 42, 0.45);
  transition: transform .18s var(--as-ease), border-color .18s ease, box-shadow .18s ease;
}
.as-ov-quick-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--as-school-primary, #7c3aed) 35%, #e2e8f0);
  box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--as-school-primary, #7c3aed) 45%, transparent);
  color: inherit;
}
.as-ov-quick-ico {
  width: 2rem; height: 2rem;
  border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--as-school-primary, #7c3aed) 12%, white);
  color: var(--as-school-primary, #7c3aed);
  font-size: .95rem;
  flex-shrink: 0;
}

.as-ov-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1.35rem;
}
.as-ov-kpi {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 18px;
  padding: 1.05rem 1.05rem .95rem;
  box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.45);
  transition: transform .18s var(--as-ease), border-color .18s ease, box-shadow .18s ease;
}
.as-ov-kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--as-school-primary, #7c3aed), var(--as-school-accent, #c9a227));
  opacity: .85;
}
.as-ov-kpi:hover {
  transform: translateY(-3px);
  border-color: #ede9fe;
  box-shadow: 0 18px 34px -22px rgba(124, 58, 237, 0.35);
}
.as-ov-kpi-ico {
  display: grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  margin-bottom: .55rem;
  border-radius: 8px;
  background: #faf5ff;
  color: #6d28d9;
  font-size: .78rem;
  font-weight: 800;
}
.as-ov-kpi-label {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: .4rem;
}
.as-ov-kpi strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0f172a;
  line-height: 1.1;
}
.as-ov-kpi-cap { color: #94a3b8; font-weight: 700; font-size: .85em; }
.as-ov-kpi-sub {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  color: #64748b;
  font-weight: 600;
}
.as-ov-kpi--money strong { color: #6d28d9; }

.as-ov-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 0 0 .35rem;
}
.as-ov-panel {
  margin: 0;
  border-radius: 20px;
  padding: 1.2rem 1.25rem 1.25rem;
  box-shadow: 0 14px 32px -26px rgba(15, 23, 42, 0.4);
}
.as-ov-panel.as-card:hover {
  transform: none;
  box-shadow: 0 14px 32px -26px rgba(15, 23, 42, 0.4);
  border-color: var(--as-border);
}
.as-ov-panel-kicker {
  margin: 0 0 .2rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #94a3b8;
}
.as-ov-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  margin: 0 0 .85rem;
}
.as-ov-panel-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.as-ov-bar {
  height: 7px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
  margin: 0 0 1rem;
}
.as-ov-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--as-school-primary, #7c3aed), var(--as-school-accent, #c9a227));
  min-width: 0;
  transition: width .45s var(--as-ease);
}
.as-ov-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .65rem;
}
.as-ov-checklist li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .8rem .85rem;
  border-radius: 14px;
  border: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.as-ov-check-num {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--as-school-primary, #7c3aed) 12%, white);
  border: 1px solid color-mix(in srgb, var(--as-school-primary, #7c3aed) 22%, #e2e8f0);
  font-size: .78rem;
  font-weight: 800;
  color: var(--as-school-primary, #7c3aed);
}
.as-ov-check-body strong {
  display: block;
  font-size: .95rem;
  letter-spacing: -0.01em;
}
.as-ov-check-body p {
  margin: .15rem 0 0;
  font-size: .84rem;
  color: #64748b;
  line-height: 1.4;
}
.as-ov-complete {
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid #e9d5ff;
  background: #faf5ff;
}
.as-ov-complete-title {
  margin: 0 0 .35rem;
  font-weight: 800;
  color: #6d28d9;
}
.as-ov-plan-points {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  color: #475569;
  font-size: .92rem;
  line-height: 1.5;
}
.as-ov-plan-points li {
  position: relative;
  margin: 0 0 .45rem;
  padding-left: 1.15rem;
}
.as-ov-plan-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--as-school-primary, #7c3aed);
  font-weight: 800;
  font-size: .85em;
}
.as-ov-panel-actions {
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.as-ov-panel--plan {
  background:
    radial-gradient(320px 140px at 100% 0%, color-mix(in srgb, var(--as-school-primary, #7c3aed) 14%, transparent), transparent 60%),
    radial-gradient(240px 120px at 0% 100%, color-mix(in srgb, var(--as-school-accent, #c9a227) 12%, transparent), transparent 55%),
    #fff;
}
.as-ov-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.65rem 0 .65rem;
}
.as-ov-section-head .as-studio-section-label { margin: 0; }
.as-ov-section-count {
  font-size: .75rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.as-ov-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .7rem;
}
.as-ov-tool {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .95rem 1rem;
  border-radius: 16px;
  border: 1px solid #e8eef5;
  background: #fff;
  text-decoration: none !important;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--as-ease);
  box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.4);
}
.as-ov-tool:hover {
  border-color: color-mix(in srgb, var(--as-school-primary, #7c3aed) 40%, #e2e8f0);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--as-school-primary, #7c3aed) 40%, transparent);
  color: inherit;
}
.as-ov-tool-ico {
  width: 2.35rem; height: 2.35rem;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #f8fafc, color-mix(in srgb, var(--as-school-primary, #7c3aed) 8%, white));
  border: 1px solid #eef2f7;
  font-size: 1rem;
  flex-shrink: 0;
}
.as-ov-tool-copy {
  min-width: 0;
}
.as-ov-tool-copy strong {
  display: block;
  font-size: .95rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  margin-bottom: .15rem;
}
.as-ov-tool-copy span {
  font-size: .8rem;
  color: #64748b;
  font-weight: 600;
}
.as-ov-tool-go {
  color: #94a3b8;
  font-weight: 700;
  transition: transform .18s var(--as-ease), color .18s ease;
}
.as-ov-tool:hover .as-ov-tool-go {
  color: var(--as-school-primary, #7c3aed);
  transform: translateX(2px);
}

@media (max-width: 1100px) {
  .as-ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-ov-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .as-ov-columns { grid-template-columns: 1fr; }
  .as-ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-ov-hero { padding: 1.25rem 1.15rem 1.2rem; }
  .as-ov-hero-side { width: 100%; justify-content: space-between; }
  .as-ov-hero-actions { width: 100%; }
  .as-ov-hero-actions .as-btn { flex: 1 1 auto; justify-content: center; }
  .as-ov-checklist li { grid-template-columns: auto 1fr; }
  .as-ov-checklist li .as-btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 520px) {
  .as-ov-quick { grid-template-columns: 1fr; }
  .as-ov-hero-logo { width: 60px; height: 60px; }
}

/* ------------------------------------------------------------------ */
/* Studio course editor (simple guided flow)                           */
/* ------------------------------------------------------------------ */
.as-ce-head {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 .85rem;
}
.as-ce-title {
  margin: 0 0 .3rem;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  letter-spacing: -0.03em;
}
.as-ce-meta { margin: 0; font-size: .9rem; }
.as-ce-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.as-ce-guide {
  margin: 0 0 1.15rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  color: #4c1d95;
  font-size: .95rem;
}
.as-ce-block { margin-bottom: 1.15rem; }
.as-ce-step {
  margin: 0 0 .2rem;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--as-emerald-deep);
}
.as-ce-block-title {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.as-ce-empty {
  padding: 1rem;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
}
.as-ce-empty-form {
  margin-top: 1rem;
  max-width: 28rem;
}
.as-ce-hint { margin: 0 0 .75rem; font-size: .9rem; }

.as-ce-section {
  border: 1px solid #e8eef5;
  border-radius: 14px;
  background: #fafbfc;
  padding: 1rem;
  margin: 0 0 .85rem;
}
.as-ce-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 .85rem;
}
.as-ce-section-kicker {
  display: block;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--as-emerald-deep);
}
.as-ce-section-name {
  margin: .15rem 0 0;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.as-ce-lessons {
  list-style: none;
  margin: 0 0 .85rem;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.as-ce-lessons li {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .8rem;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fff;
}
.as-ce-lessons li.is-on {
  border-color: #c4b5fd;
  background: #f5f3ff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.as-ce-lessons li.as-ce-flash,
.as-ce-section.as-ce-flash {
  animation: as-ce-flash-pulse 1.4s ease-out 1;
}
@keyframes as-ce-flash-pulse {
  0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45); background: #ede9fe; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.as-ce-lesson-link {
  flex: 1 1 12rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  display: grid;
  gap: .15rem;
}
.as-ce-lesson-link:hover strong { color: var(--as-emerald-deep); }
.as-ce-lesson-link .as-muted { font-size: .82rem; }

.as-ce-add-lesson {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  padding: .65rem .7rem;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #fff;
}
.as-ce-add-lesson .as-input {
  flex: 1 1 12rem;
  min-width: 8rem;
  padding: .55rem .75rem;
}
.as-ce-add-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--as-border);
  max-width: 28rem;
}

.as-ce-more {
  position: relative;
  flex: 0 0 auto;
}
.as-ce-more > summary {
  cursor: pointer;
  list-style: none;
  font-size: .85rem;
  font-weight: 650;
  color: #475569;
  padding: .35rem .55rem;
  border-radius: 8px;
  user-select: none;
  border: 1px solid transparent;
}
.as-ce-more > summary::-webkit-details-marker { display: none; }
.as-ce-more > summary::marker { content: ""; }
.as-ce-more > summary:hover { background: #f1f5f9; }
.as-ce-more[open] > summary {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}
.as-ce-more-panel {
  /* Expand in-flow (not a floating sticky popover) so it closes/scrolls with the section */
  position: static;
  margin-top: .55rem;
  min-width: 0;
  width: min(22rem, 100%);
  padding: .85rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: .65rem;
}
.as-ce-section-head .as-ce-more {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 100%;
}
.as-ce-more-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.as-ce-more--inline {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}
.as-ce-more--inline .as-ce-more-panel {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  width: auto;
  min-width: 0;
  margin-top: .35rem;
}

/* Lesson focus editor */
.as-ce-focus {
  margin-bottom: 1.15rem;
  border-color: #ddd6fe;
  background:
    radial-gradient(320px 140px at 100% 0%, rgba(124, 58, 237, 0.08), transparent 60%),
    #fff;
}
.as-ce-focus-head {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 1rem;
}
.as-ce-focus-title {
  margin: .15rem 0 0;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.as-ce-focus-sub { margin: .25rem 0 0; }
.as-ce-lesson-form.wide { max-width: none; }
/* AI busy overlay (GGT-style) — must live on document.body (studio main uses backdrop-filter) */
body.as-ai-busy { overflow: hidden !important; }
.as-ai-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding: max(1.25rem, 8vh) 1.25rem 1.25rem;
  margin: 0 !important;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.as-ai-overlay[hidden] { display: none !important; }
.as-ai-overlay-card {
  width: min(460px, 100%);
  text-align: center;
  color: #f8fafc;
  padding: 1.6rem 1.45rem 1.35rem;
  border-radius: 22px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.85);
}
.as-ai-overlay-spinner {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px solid rgba(148, 163, 184, 0.25);
  border-top-color: #a78bfa;
  animation: as-ai-spin .8s linear infinite;
}
@keyframes as-ai-spin { to { transform: rotate(360deg); } }
.as-ai-overlay-card h2 {
  margin: 0 0 .35rem;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  font-weight: 750;
}
#as-ai-overlay-step {
  margin: 0 0 1rem;
  color: #c4b5fd;
  font-weight: 700;
  font-size: .95rem;
}
.as-ai-overlay-progress {
  margin: 0 0 1rem;
  text-align: left;
}
.as-ai-overlay-progress[hidden] { display: none !important; }
.as-ai-overlay-progress-track {
  height: .55rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.as-ai-overlay-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  transition: width .35s ease;
}
.as-ai-overlay-progress-meta {
  margin: .45rem 0 0;
  font-size: .78rem;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.as-ai-overlay-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: none;
  overflow: hidden; /* no scrollbar — we keep only recent lines in JS */
}
.as-ai-overlay-steps li {
  font-size: .84rem;
  color: #94a3b8;
  padding: .4rem .65rem;
  border-radius: 10px;
  border: 1px solid transparent;
  line-height: 1.35;
}
.as-ai-overlay-steps li.is-done {
  color: #e9d5ff;
  background: rgba(167, 139, 250, 0.1);
}
.as-ai-overlay-steps li.is-on {
  color: #f8fafc;
  font-weight: 700;
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.3);
}
.as-ai-overlay-note {
  margin: 1rem 0 0;
  font-size: .78rem;
  color: #94a3b8;
}
.as-ai-overlay-cancel {
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  background: rgba(15, 23, 42, 0.35) !important;
}
.as-ai-overlay-cancel:hover {
  background: rgba(248, 113, 113, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}
.as-ai-overlay.is-error .as-ai-overlay-spinner {
  border-top-color: #f87171;
  animation: none;
}
.as-ai-overlay.is-error .as-ai-overlay-card {
  border-color: rgba(248, 113, 113, 0.45);
}
.as-ai-overlay.is-error #as-ai-overlay-step {
  color: #fecaca;
}

/* AI course builder */
.as-ai-card {
  margin-bottom: 1.15rem;
  border-color: #ddd6fe;
  background:
    radial-gradient(280px 120px at 0% 0%, rgba(124, 58, 237, 0.08), transparent 55%),
    #fff;
}
.as-ai-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  margin: 0 0 1rem;
}
.as-ai-preview-label {
  margin: 0 0 .85rem;
  font-weight: 750;
  color: #6d28d9;
}
.as-ai-preview-savebanner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 1.1rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 2px solid #a78bfa;
  background: linear-gradient(180deg, #f5f3ff 0%, #faf5ff 100%);
  box-shadow: 0 10px 28px -18px rgba(124, 58, 237, 0.55);
}
.as-ai-preview-actions--banner {
  margin: 0;
  flex: 0 0 auto;
}
.as-ai-preview-actions--banner .as-btn-emerald {
  font-weight: 750;
  font-size: .95rem;
  padding: .7rem 1.1rem;
}
.as-ai-preview-section {
  border: 1px solid #e8eef5;
  border-radius: 14px;
  background: #f8fafc;
  padding: .85rem;
  margin: 0 0 .85rem;
}
.as-ai-preview-lesson {
  display: grid;
  gap: .55rem;
  margin: .65rem 0 0;
  padding: .65rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef2f7;
}
.as-ai-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
}
.as-ai-preview-actions .as-btn {
  margin: 0;
}
.as-ai-discard-form {
  display: none;
}
.as-ai-build-mode {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid #e9d5ff;
  border-radius: 14px;
  background: #faf5ff;
  display: grid;
  gap: .65rem;
}
.as-ai-build-mode legend {
  font-weight: 750;
  padding: 0 .25rem;
}
.as-ai-build-mode .as-check {
  align-items: flex-start;
  gap: .55rem;
}
.as-ai-build-mode .as-check span,
.as-ai-write-all .as-check span {
  min-width: 0;
}
.as-ai-preview-body {
  margin-top: .45rem;
}
.as-ai-preview-body > summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 650;
  color: #6d28d9;
}
.as-ai-preview-pre {
  margin: .5rem 0 0;
  padding: .75rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: .88rem;
  line-height: 1.45;
  max-height: 12rem;
  overflow: auto;
}
.as-ai-write-all {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 1px solid #e9d5ff;
  border-radius: 14px;
  background: #faf5ff;
  display: grid;
  gap: .45rem;
}
.as-ai-write-all-title {
  margin: 0;
  font-weight: 750;
}
.as-ai-lesson-form {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid #e9d5ff;
  border-radius: 14px;
  background: #faf5ff;
}
.as-ai-lesson-title {
  margin: 0 0 .25rem;
  font-weight: 750;
}
.as-ai-lesson-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: flex-end;
  margin: .65rem 0;
}
.as-ai-check-pad { margin-bottom: .35rem; }
.as-ai-lesson-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.as-ai-lesson-inline {
  margin-top: .85rem;
  padding: .85rem;
  border-radius: 12px;
  border: 1px solid #e9d5ff;
  background: #faf5ff;
}
.as-ai-lesson-inline--top {
  margin: 0 0 1rem;
}
.as-ce-lesson-ai {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  flex: 0 1 auto;
}
.as-ce-cover-preview {
  margin: .35rem 0 .85rem;
}
.as-ce-cover-preview img {
  display: block;
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  border: 1px solid #e8eef5;
  background: #0f172a;
}
.as-ai-cover-form {
  display: grid;
  gap: .85rem;
  margin-top: 1.5rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 14px;
  border: 1px solid #ede9fe;
  background: #faf5ff;
}
.as-ai-cover-title {
  margin: 0;
  font-weight: 750;
}
.as-ai-cover-form .as-ce-hint {
  margin: 0;
}
.as-ai-cover-form .as-label {
  margin: 0;
}
.as-ai-cover-actions {
  margin-top: .35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}
.as-ai-cover-actions .as-btn {
  margin: 0;
}
.as-product-file-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.as-product-file-list li {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .85rem;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
}
.as-product-file-list strong {
  font-weight: 700;
}
.as-media-locked-banner {
  margin: .85rem 0 0;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
}
.as-media-locked-banner strong {
  color: #92400e;
}
.as-media-usage-list {
  list-style: none;
  margin: .65rem 0 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.as-media-usage-list li {
  font-size: .9rem;
  font-weight: 650;
  color: #78350f;
}
.as-media-usage-list a {
  color: #92400e;
  text-decoration: underline;
}
.as-media-usage-list a:hover {
  color: #6d28d9;
}
button.as-btn:disabled,
button.as-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.as-podcast-episode-list {
  display: grid;
  gap: .85rem;
}
.as-podcast-episode {
  margin: 0;
  padding: 1rem 1.1rem;
}
.as-podcast-episode-head {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-start;
  justify-content: space-between;
}
.as-podcast-audio-box {
  display: grid;
  gap: .75rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px dashed #c4b5fd;
  background: #faf5ff;
}
.as-podcast-audio-box-title {
  margin: 0;
  font-weight: 750;
  color: #6d28d9;
}
.as-file-upload {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
}
.as-file-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.as-file-upload .as-btn {
  pointer-events: none;
}
.as-file-upload-name {
  font-size: .88rem;
}
.as-ce-save-banner {
  margin: 0 0 1.15rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}
.as-ce-save-banner p {
  margin: 0 0 .55rem;
}
.as-ce-save-banner ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .35rem;
  font-size: .92rem;
  line-height: 1.45;
}
.as-ce-save-banner-rev {
  margin: .75rem 0 0 !important;
  font-size: .9rem;
}
.as-ce-rev-save {
  margin: 1rem 0 0;
  max-width: 28rem;
}
.as-ce-rev-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.as-ce-rev-list li {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .85rem;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
}
.as-ce-later {
  margin-bottom: 1.15rem;
  padding: .85rem 1rem;
}
.as-ce-later-sum {
  cursor: pointer;
  list-style: none;
  display: grid;
  gap: .15rem;
}
.as-ce-later-sum::-webkit-details-marker { display: none; }
.as-ce-later-sum::marker { content: ""; }
.as-ce-later-sum .as-ce-step { margin: 0; }
.as-ce-later-sum strong {
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}
.as-ce-later[open] .as-ce-later-sum {
  margin-bottom: .85rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #eef2f7;
}

.as-ce-membership-tags {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  background: #fafbfc;
}
.as-ce-membership-tags legend {
  font-weight: 750;
  padding: 0 .35rem;
}
.as-ce-check-grid {
  display: grid;
  gap: .45rem;
  margin-top: .35rem;
}
.as-ce-content-intro {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-radius: 12px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  color: #4c1d95;
  font-size: .92rem;
}
.as-ce-asset {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 1rem;
  margin: 0 0 .85rem;
}
.as-ce-asset-title {
  margin: 0 0 .35rem;
  font-weight: 750;
  font-size: 1rem;
}
.as-ce-video-box {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  padding: 1rem;
  margin: 0 0 .35rem;
}
.as-ce-video-label {
  margin: 0 0 .65rem;
  font-weight: 750;
  font-size: .98rem;
}
.as-ce-video {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  background: #0f172a;
  margin: 0 0 .75rem;
  display: block;
}
.as-ce-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 .35rem;
}
.as-ce-advanced {
  margin: .75rem 0 0;
  border-top: 1px solid #eef2f7;
  padding-top: .75rem;
}
.as-ce-advanced > summary {
  cursor: pointer;
  font-weight: 650;
  color: #475569;
  list-style: none;
}
.as-ce-advanced > summary::-webkit-details-marker { display: none; }
.as-ce-advanced > summary::marker { content: ""; }
.as-ce-advanced > summary::before { content: "▸ "; }
.as-ce-advanced[open] > summary::before { content: "▾ "; }
.as-ce-advanced-body {
  display: grid;
  gap: .85rem;
  margin-top: .85rem;
  max-width: 36rem;
}
.as-ce-danger {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid #fee2e2;
}
.as-ce-outline-toggle {
  margin: 0 0 1.15rem;
}
.as-ce-outline-toggle > summary {
  cursor: pointer;
  font-weight: 650;
  color: #475569;
  padding: .65rem .85rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  list-style: none;
  margin-bottom: .85rem;
}
.as-ce-outline-toggle > summary::-webkit-details-marker { display: none; }
.as-ce-outline-toggle > summary::marker { content: ""; }
.as-ce-outline-toggle > summary::before { content: "▸ "; }
.as-ce-outline-toggle[open] > summary::before { content: "▾ "; }
.as-ce-outline-toggle[open] > summary { margin-bottom: 1rem; }

/* Studio courses — builder chooser + library */
.as-courses-builders { margin: 0 0 1.25rem; }
.as-courses-builders-title {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.as-courses-builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .85rem;
}
.as-courses-builder-card {
  display: grid;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  padding: 1.1rem 1.15rem;
  border: 1px solid #e8eef5;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.as-courses-builder-card:hover {
  border-color: #c4b5fd;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.as-courses-builder-card.is-on {
  border-color: #a78bfa;
  background: #faf5ff;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.as-courses-builder-card.is-locked { opacity: .92; }
.as-courses-builder-kicker {
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--as-emerald-deep);
}
.as-courses-builder-card strong {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}
.as-courses-create-panel {
  margin-bottom: 1.25rem;
}
.as-courses-library-title {
  margin: 1.5rem 0 .85rem;
  font-size: 1.1rem;
}
.as-ce-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1.15rem;
  padding: .35rem;
  border-radius: 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.as-ce-mode-btn {
  flex: 1 1 10rem;
  text-align: center;
  text-decoration: none;
  color: #475569;
  font-weight: 700;
  font-size: .95rem;
  padding: .7rem .9rem;
  border-radius: 11px;
}
.as-ce-mode-btn:hover { color: #0f172a; background: #fff; }
.as-ce-mode-btn.is-on {
  background: #fff;
  color: #6d28d9;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.as-courses-create > summary {
  outline: none;
}
.as-courses-create > summary::-webkit-details-marker { display: none; }
.as-courses-create > summary::after {
  content: " ▾";
  font-size: .85em;
  opacity: .65;
}
.as-courses-library {
  display: grid;
  gap: .75rem;
}
.as-courses-card {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
}
@media (max-width: 720px) {
  .as-courses-card { grid-template-columns: 1fr; }
}
.as-courses-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #f5f3ff 0%, #e2e8f0 100%);
  overflow: hidden;
}
.as-courses-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.as-courses-card-media-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .75rem;
  text-align: center;
  color: #64748b;
  font-size: .85rem;
  font-weight: 650;
}
.as-courses-card-media-empty small {
  font-size: .72rem;
  font-weight: 500;
  color: #94a3b8;
  max-width: 10rem;
  line-height: 1.3;
}
.as-courses-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.1rem;
}
.as-courses-card-copy { min-width: 0; flex: 1 1 16rem; }
.as-courses-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  align-items: baseline;
  justify-content: space-between;
}
.as-courses-card-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.as-courses-card-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.as-courses-card-price {
  font-size: .9rem;
  font-weight: 700;
  color: #334155;
}
.as-courses-card-meta {
  margin: 0;
  font-size: .88rem;
}
.as-courses-card-summary {
  margin: .55rem 0 0;
  color: #64748b;
  font-size: .92rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.as-courses-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .55rem .85rem;
  margin: .85rem 0 0;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.as-courses-meta--editor {
  margin-top: .75rem;
  max-width: 40rem;
}
.as-courses-meta > div {
  min-width: 0;
}
.as-courses-meta dt {
  margin: 0;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.as-courses-meta dd {
  margin: .15rem 0 0;
  font-size: .9rem;
  font-weight: 650;
  color: #0f172a;
}
.as-courses-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

/* ------------------------------------------------------------------ */
/* Setup wizard                                                        */
/* ------------------------------------------------------------------ */
.as-setup { max-width: 44rem; }
.as-setup-top {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-start; justify-content: space-between;
  margin: 0 0 1.25rem;
}
.as-setup-kicker {
  margin: 0 0 .35rem;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--as-school-primary, #7c3aed) 70%, #64748b);
}
.as-setup-top h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  letter-spacing: -0.03em;
}
.as-setup-rail {
  list-style: none; margin: 0 0 1.35rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
}
.as-setup-rail li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: .82rem; font-weight: 700; color: #94a3b8;
}
.as-setup-rail li.is-on {
  border-color: color-mix(in srgb, var(--as-school-primary, #7c3aed) 35%, #e2e8f0);
  background: #f5f3ff; color: #6d28d9;
}
.as-setup-rail li.is-done { color: #64748b; border-color: #e9d5ff; }
.as-setup-rail-num {
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 800;
  background: #f1f5f9; color: inherit;
}
.as-setup-rail li.is-on .as-setup-rail-num { background: #fff; }
.as-setup-panel h2 { margin: 0 0 .35rem; letter-spacing: -0.02em; }
.as-setup-panel > .as-muted { margin: 0 0 1rem; }
.as-setup-launch-box {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  padding: 1rem 1.1rem; border-radius: 14px;
  border: 1px solid #e8eef5; background: #f8fafc;
}
.as-setup-launch-url { margin: 0; font-size: .95rem; }
.as-setup-banner {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  margin: 0 0 1.15rem;
  padding: 1rem 1.15rem;
  border-color: #e9d5ff;
  background: linear-gradient(180deg, #faf5ff, #fff);
}
.as-setup-banner-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

/* Live rooms — cinematic stage */
.as-live-shell {
  margin: 0 0 2.5rem;
  --live-ink: #e2e8f0;
  --live-muted: #94a3b8;
  --live-line: rgba(148, 163, 184, 0.18);
  --live-emerald: #a78bfa;
  --live-emerald-deep: #7c3aed;
}
.as-live-debug {
  display: none !important;
}
.as-live-shell.is-debug .as-live-debug {
  display: block !important;
  margin: 0 0 1rem;
  padding: .55rem .75rem;
  border-radius: 10px;
  background: #0f172a;
  color: #94a3b8;
  font-size: .72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.45;
  word-break: break-word;
}
.as-live-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 1.1rem;
}
.as-live-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .75rem;
  margin: 0 0 .45rem;
}
.as-live-livepill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.as-live-livepill i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: as-live-broadcast 1.6s ease-out infinite;
}
@keyframes as-live-broadcast {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.as-live-shell.is-joined .as-live-livepill {
  background: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
}
.as-live-shell.is-joined .as-live-livepill i {
  background: #8b5cf6;
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5);
  animation-name: as-live-broadcast-on;
}
@keyframes as-live-broadcast-on {
  0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
.as-live-kicker-meta {
  color: #64748b;
  font-size: .8rem;
  font-weight: 600;
}
.as-live-title {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.as-live-status {
  margin: .4rem 0 0;
  color: #64748b;
  font-size: .92rem;
  font-weight: 600;
}
.as-live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .35rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.as-live-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: .55rem .9rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: #334155;
  background: transparent;
  transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.as-live-btn:hover:not(:disabled) {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.as-live-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.as-live-btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.25);
}
.as-live-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff;
}
.as-live-btn-danger:hover:not(:disabled) {
  background: #fef2f2;
  color: #b91c1c;
}
.as-live-btn.is-active {
  background: #f5f3ff;
  color: #6d28d9;
  box-shadow: inset 0 0 0 1px #ddd6fe;
}
.as-live-hint {
  margin: 0 0 1rem;
  color: #64748b;
  font-size: .86rem;
  line-height: 1.45;
}
.as-live-shell.is-joined .as-live-hint { display: none; }
.as-live-sound-unlock {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1rem;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: .65rem 1rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.28);
}
.as-live-sound-unlock[hidden] { display: none !important; }

.as-live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
  gap: 1rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.as-live-stage {
  position: relative;
  border-radius: 24px;
  padding: .85rem;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(139, 92, 246, 0.18), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(56, 189, 248, 0.12), transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #020617 55%, #07111f 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 30px 80px rgba(2, 6, 23, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  min-height: 22rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.as-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: .75rem;
  min-height: 18rem;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.as-live-stage.is-screening .as-live-grid {
  grid-template-columns: minmax(0, 1fr);
}
.as-live-stage.is-screening .as-live-tile.is-screen {
  grid-column: 1 / -1;
  order: -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  max-height: min(62vh, 32rem);
  height: auto;
  min-height: 0;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 20px 50px rgba(0, 0, 0, 0.35);
}
.as-live-stage.is-screening .as-live-tile:not(.is-screen) {
  max-width: 200px;
  width: 100%;
  justify-self: start;
}
.as-live-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  text-align: center;
  gap: .35rem;
  padding: 3rem 1.25rem;
  color: var(--live-muted);
}
.as-live-shell.is-joined .as-live-empty { display: none; }
.as-live-empty-orb {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: .65rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #c4b5fd, transparent 40%),
    radial-gradient(circle at 70% 70%, #38bdf8, transparent 42%),
    radial-gradient(circle at 50% 50%, #1e293b, #020617 70%);
  box-shadow: 0 0 40px rgba(167, 139, 250, 0.25);
  animation: as-live-orb 4s ease-in-out infinite;
}
@keyframes as-live-orb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.04); }
}
.as-live-empty-title {
  margin: 0;
  color: #f8fafc;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.as-live-empty-copy {
  margin: 0;
  max-width: 26rem;
  font-size: .9rem;
  line-height: 1.45;
  color: #94a3b8;
}
.as-live-sharing {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #f5f3ff;
  font-size: .75rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(167, 139, 250, 0.35);
}
.as-live-sharing[hidden] { display: none !important; }
.as-live-sharing-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #a78bfa;
  animation: as-live-pulse 1.25s ease-in-out infinite;
}

.as-live-tile {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-width: 0;
  max-width: 100%;
}
.as-live-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.as-live-tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.75), transparent);
  pointer-events: none;
  z-index: 1;
}
.as-live-tile video.as-live-main,
.as-live-tile > video:not(.as-live-pip) {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  display: block;
  background: #020617;
}
.as-live-tile.is-screen video.as-live-main,
.as-live-tile.is-screen > video:not(.as-live-pip) {
  object-fit: contain;
  background: #020617;
  position: absolute;
  inset: 0;
}
.as-live-pip {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  z-index: 4;
  width: clamp(96px, 26%, 168px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  background: #0f172a;
  border: 2px solid rgba(248, 250, 252, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  display: block;
}
.as-live-pip[hidden] { display: none !important; }
.as-live-tile.has-pip .as-live-tile-name {
  max-width: calc(100% - 7.5rem);
}
.as-live-tile:fullscreen .as-live-pip,
.as-live-tile:-webkit-full-screen .as-live-pip {
  width: clamp(120px, 18vw, 220px);
  right: 1.25rem;
  bottom: 1.25rem;
}
.as-live-tile-name {
  position: absolute; left: .7rem; bottom: .6rem;
  padding: .28rem .65rem; border-radius: 999px;
  background: rgba(2, 6, 23, 0.72);
  color: #f8fafc; font-size: .78rem; font-weight: 700;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: calc(100% - 1.4rem);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.as-live-tile-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.as-live-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.25);
  vertical-align: middle;
}
.as-live-dot.is-good,
.as-live-dot.is-local { background: #22c55e; }
.as-live-dot.is-fair { background: #f59e0b; }
.as-live-dot.is-poor { background: #ef4444; }
.as-live-dot.is-connecting {
  background: #94a3b8;
  animation: as-live-pulse 1.25s ease-in-out infinite;
}
@keyframes as-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(0.85); }
}
.as-live-fs {
  position: absolute; right: .55rem; top: .55rem;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  padding: .32rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  color: #f8fafc;
  background: rgba(2, 6, 23, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.as-live-tile:hover .as-live-fs,
.as-live-tile:focus-within .as-live-fs {
  opacity: 1;
}
@media (hover: none) {
  .as-live-fs { opacity: 0.92; }
}
.as-live-fs:hover { background: rgba(124, 58, 237, 0.92); }
.as-live-tile.is-local {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.85), 0 12px 30px rgba(0, 0, 0, 0.25);
}
.as-live-tile video:fullscreen,
.as-live-tile:fullscreen video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.as-live-tile-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 2rem; color: #64748b;
  background:
    radial-gradient(circle at 30% 25%, rgba(167, 139, 250, 0.12), transparent 40%),
    linear-gradient(145deg, #1e293b, #0f172a);
}

.as-live-people {
  margin: 0;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e8eef5;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}
.as-live-people-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .35rem;
}
.as-live-people-title {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.as-live-people-count {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  color: #64748b;
}
.as-live-people-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.as-live-person {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  align-items: center;
  padding: .6rem .7rem;
  border-radius: 14px;
  border: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fff, #f8fafc);
  font-size: .9rem;
  transition: border-color .15s ease, background .15s ease;
}
.as-live-person.is-host {
  border-color: #e9d5ff;
  background: linear-gradient(180deg, #faf5ff, #f5f3ff);
}
.as-live-person.is-you { box-shadow: inset 0 0 0 1px #d8b4fe; }
.as-live-person.is-lobby {
  border-style: dashed;
  opacity: 0.92;
}
.as-live-gate {
  margin: 0 0 1rem;
}
.as-live-gate-card {
  max-width: 26rem;
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
.as-live-gate-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.as-live-gate-form .as-label { margin-bottom: .75rem; }
.as-live-waiting-banner {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 16px;
  border: 1px solid #fde68a;
  background: #fffbeb;
}
.as-live-waiting-banner[hidden] { display: none !important; }
.as-live-waiting-pulse {
  width: .7rem;
  height: .7rem;
  margin-top: .35rem;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  animation: as-live-pulse 1.25s ease-in-out infinite;
}
.as-live-waiting-host {
  margin: 0 0 .85rem;
  padding: .75rem;
  border-radius: 14px;
  border: 1px dashed #fbbf24;
  background: #fffbeb;
}
.as-live-waiting-host[hidden] { display: none !important; }
.as-live-waiting-host-title {
  margin: 0 0 .5rem;
  font-size: .85rem;
  font-weight: 800;
  color: #92400e;
}
.as-live-waiting-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.as-live-waiting-item {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .55rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #fde68a;
  font-size: .88rem;
}
.as-live-waiting-actions {
  display: inline-flex;
  gap: .3rem;
}
.as-live-person-badges { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.as-live-person-conn {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
.as-live-conn-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .85rem;
  margin: 0 0 .85rem;
  font-size: .72rem;
  color: #64748b;
  font-weight: 600;
}
.as-live-conn-legend span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.as-live-people .as-live-dot {
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
}
@media (max-width: 900px) {
  .as-live-layout { grid-template-columns: 1fr; }
  .as-live-actions { border-radius: 18px; }
}