:root {
  --black: #080808;
  --surface: #101012;
  --elevated: #17151b;
  --purple: #8956fb;
  --purple-deep: #5c32c8;
  --purple-glow: rgba(137, 86, 251, 0.34);
  --lilac: #e4cbff;
  --gold: #d4af37;
  --text: #f7f4ef;
  --muted: #aaa3b2;
  --line: rgba(212, 175, 55, 0.28);
  --display: "Fraunces", Georgia, serif;
  --ui: "Urbanist", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--black); color: var(--text); font-family: var(--ui); font-weight: 200; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 82% 10%, rgba(137,86,251,.14), transparent 28rem), linear-gradient(180deg, #080808 0%, #101012 48%, #080808 100%); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
button { cursor: pointer; }
strong { font-weight: 250; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; padding: .8rem 1rem; background: var(--gold); color: var(--black); }

.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 2.4rem); padding: .5rem clamp(1rem, 3.2vw, 3.2rem); background: rgba(8,8,8,.92); border-bottom: 1px solid rgba(137,86,251,.22); backdrop-filter: blur(18px); box-shadow: 0 .8rem 3rem rgba(0,0,0,.28); }
.brand { justify-self: start; }
.brand img { width: clamp(8.8rem, 10vw, 11.1rem); height: 4.35rem; object-fit: contain; }
.primary-nav { display: flex; align-items: center; gap: clamp(.65rem, 1.55vw, 1.45rem); color: var(--muted); font-size: .72rem; font-weight: 200; letter-spacing: .12em; text-transform: uppercase; }
.primary-nav { justify-self: center; }
.primary-nav a { position: relative; display: inline-flex; align-items: center; gap: .42rem; min-height: 2.2rem; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .18rem; height: 1px; background: linear-gradient(90deg, var(--gold), var(--purple)); transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--gold); text-shadow: 0 0 1.1rem rgba(137,86,251,.28); outline: none; }
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform: scaleX(1); opacity: 1; }
.home-icon { position: relative; width: .78rem; height: .66rem; border: 1px solid currentColor; border-top: 0; opacity: .9; }
.home-icon::before { content: ""; position: absolute; left: .05rem; top: -.36rem; width: .55rem; height: .55rem; border-left: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); background: transparent; }
.nav-cta, .primary-button, .secondary-button, .ghost-button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); padding: .85rem 1.15rem; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 250; transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.primary-button { background: linear-gradient(135deg, var(--gold), #f6df87); color: #14100a; border-color: transparent; font-weight: 250; }
.secondary-button, .ghost-button { color: var(--text); background: rgba(255,255,255,.03); }
.primary-button:hover { transform: translateY(-2px); color: #fff; background: linear-gradient(135deg, var(--purple-deep), var(--purple) 54%, #c8a7ff); border-color: rgba(228,203,255,.58); box-shadow: 0 0 0 1px rgba(228,203,255,.16), 0 1.2rem 3rem var(--purple-glow); }
.secondary-button:hover { transform: translateY(-2px); border-color: rgba(137,86,251,.72); background: rgba(137,86,251,.16); box-shadow: 0 .9rem 2.4rem rgba(137,86,251,.16); }
.nav-cta { border-color: rgba(212,175,55,.42); padding-inline: 1.35rem; }
.nav-cta::after { display: none; }
.nav-cta:hover, .nav-cta:focus-visible, .nav-cta:active { color: #fff; background: linear-gradient(135deg, var(--purple-deep), var(--purple) 56%, #b88cff); border-color: rgba(228,203,255,.45); box-shadow: 0 .8rem 2.2rem rgba(137,86,251,.24), inset 0 0 1.4rem rgba(255,255,255,.06); }
.small { min-height: 2.2rem; padding: .55rem .8rem; }
.nav-toggle { display: none; background: transparent; color: var(--text); border: 1px solid var(--line); padding: .7rem .9rem; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; }

.section { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) 0; }
.hero { --hero-x: 62%; --hero-y: 32%; position: relative; min-height: calc(100svh - 4.65rem); display: grid; align-items: start; overflow: hidden; padding: clamp(3.2rem, 5.4vw, 5.2rem) clamp(1rem, 6vw, 6rem) clamp(2.1rem, 5vw, 4rem); background: #070707; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 24% 28%, rgba(137,86,251,.24), transparent 17rem), radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(137,86,251,.26), transparent 14rem), linear-gradient(90deg, rgba(8,8,8,.98) 0%, rgba(8,8,8,.78) 42%, rgba(8,8,8,.16) 100%), linear-gradient(0deg, rgba(8,8,8,.82), rgba(8,8,8,.03) 48%); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.hero-cursor-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(137,86,251,.3), transparent 16rem); mix-blend-mode: screen; opacity: .72; transition: opacity .2s ease; }
.hero-copy { position: relative; z-index: 1; max-width: 585px; }
.eyebrow, .section-number { color: var(--gold); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 250; }
.hero .eyebrow { display: inline-block; max-width: 100%; color: var(--lilac); padding: .55rem .78rem; border: 1px solid rgba(137,86,251,.36); background: rgba(137,86,251,.12); box-shadow: inset 0 0 1rem rgba(137,86,251,.08); line-height: 1.45; overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--display); font-weight: 200; line-height: .98; margin: 0; font-variation-settings: "wght" 200; }
h1 { font-size: clamp(3rem, 7.3vw, 6.25rem); max-width: 10.7ch; letter-spacing: 0; }
.hero h1 { font-size: clamp(2.7rem, 6.55vw, 5.65rem); max-width: 10.9ch; }
h2 { font-size: clamp(2.15rem, 5.5vw, 5rem); letter-spacing: 0; }
h3 { font-size: clamp(1.35rem, 2.7vw, 1.9rem); letter-spacing: 0; }
.lede { color: var(--muted); font-size: clamp(1rem, 1.75vw, 1.22rem); line-height: 1.56; max-width: 38rem; }
.hero-note { color: var(--muted); line-height: 1.62; max-width: 42rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.35rem 0; }
.price-strip { display: grid; gap: .26rem; padding-left: 1rem; border-left: 1px solid var(--purple); max-width: 27rem; }
.price-strip strong, .pricing-card h2 { color: var(--gold); font-size: 2rem; }
.old-price { color: var(--muted); text-decoration: line-through; }
.price-strip small { color: var(--muted); }
.trust-strip { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; max-width: 43rem; }
.trust-strip span, .category-strip span, .included-list span { border: 1px solid rgba(137,86,251,.28); background: rgba(137,86,251,.09); color: var(--lilac); padding: .5rem .65rem; border-radius: 999px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

.split { display: grid; grid-template-columns: .55fr 1fr; gap: 3rem; }
.section-copy { color: var(--muted); line-height: 1.75; max-width: 31rem; }
.content-stack { display: grid; gap: 1rem; color: var(--muted); line-height: 1.8; }
.content-stack p { margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.feature-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.value-grid, .worth-grid, .pain-grid, .solution-grid, .learning-area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.worth-grid, .learning-area-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pain-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-card, .value-card, .pain-pill, .solution-card, .roadmap-phase, .blog-card, .pricing-card, .confirmation-card, .table-panel, .lesson-player-card, .support-card, .module-card, .outcome-card, .visual-card, .learning-area-card, .outcome-panel, .sample-card { background: linear-gradient(180deg, rgba(137,86,251,.08), rgba(23,21,27,.82)); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: clamp(1.1rem, 3vw, 1.7rem); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.feature-card:hover, .value-card:hover, .pain-pill:hover, .solution-card:hover, .roadmap-phase:hover, .blog-card:hover, .pricing-card:hover, .support-card:hover, .module-card:hover, .outcome-card:hover, .visual-card:hover, .learning-area-card:hover, .outcome-panel:hover, .about-panel:hover, .sample-card:hover { transform: translateY(-4px); border-color: rgba(137,86,251,.55); box-shadow: 0 1.4rem 3.4rem rgba(0,0,0,.28), 0 0 0 1px rgba(137,86,251,.11); }
.feature-card span { width: 2rem; height: 1px; display: block; background: var(--gold); margin-bottom: 1rem; }
.feature-card p, .value-card p, .solution-card p, .learning-area-card li, .outcome-panel li, .outcome-panel p { color: var(--muted); line-height: 1.62; }
.value-card span, .learning-area-card span { width: .55rem; height: .55rem; display: block; border-radius: 50%; background: var(--purple); box-shadow: 0 0 1rem var(--purple-glow); margin-bottom: 1rem; }
.value-card h3, .feature-card h3, .learning-area-card h3, .outcome-card h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.12; }
.pain-pill { color: var(--text); min-height: 4.2rem; display: flex; align-items: center; }
.solution-card small { color: var(--gold); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; }
.learning-area-card ul, .outcome-panel ul { margin: 1rem 0 0; padding-left: 1.1rem; }
.learning-area-card { padding: 0; overflow: hidden; }
.learning-area-card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: .45rem; background: radial-gradient(circle at 50% 42%, rgba(137,86,251,.1), transparent 14rem), #0b0b0d; border-bottom: 1px solid rgba(137,86,251,.24); }
.learning-area-card > span, .learning-area-card > h3, .learning-area-card > ul { margin-left: 1.1rem; margin-right: 1.1rem; }
.learning-area-card > span { margin-top: 1.1rem; }
.learning-area-card > ul { margin-bottom: 1.2rem; }
.visual-feature { padding: 0; overflow: hidden; }
.visual-feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid rgba(137,86,251,.22); }
.visual-feature div { padding: 1.1rem; }
.sample-showcase { display: grid; gap: 1.4rem; padding-top: clamp(3rem, 6vw, 5rem); }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; align-items: stretch; }
.sample-card { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 0; margin: 0; padding: 0; overflow: hidden; border-color: rgba(137,86,251,.28); background: radial-gradient(circle at 50% 36%, rgba(137,86,251,.12), transparent 12rem), #0b0b0d; }
.sample-card:first-child { grid-row: auto; }
.sample-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .45rem; border-bottom: 1px solid rgba(137,86,251,.2); transition: transform .45s ease, filter .45s ease; }
.sample-card:hover { transform: translateY(-5px); border-color: rgba(137,86,251,.7); box-shadow: 0 1.4rem 3rem rgba(0,0,0,.32), 0 0 0 1px rgba(212,175,55,.12), inset 0 0 2.2rem rgba(137,86,251,.08); }
.sample-card:hover img { transform: scale(1.025); filter: saturate(1.08); }
.sample-card figcaption { position: static; display: grid; gap: .3rem; padding: .85rem .9rem 1rem; background: linear-gradient(180deg, rgba(8,8,8,.36), rgba(137,86,251,.08)); border: 0; border-radius: 0; backdrop-filter: none; }
.sample-card figcaption strong { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; }
.sample-card figcaption span { color: var(--muted); line-height: 1.45; font-size: .78rem; }
.contact-support, .pricing-support { margin: 1.2rem 0; border-color: rgba(137,86,251,.34); box-shadow: inset 0 0 2rem rgba(137,86,251,.06); }
.contact-support span, .pricing-support span, .method-card span { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: .16em; font-size: .66rem; margin-bottom: .25rem; }
.contact-support h2 { color: var(--gold); font-size: clamp(2rem, 4vw, 3.4rem); margin: .3rem 0 .8rem; }
.contact-support p, .pricing-support p { color: var(--muted); line-height: 1.65; }
.method-card p { display: grid; gap: .15rem; margin: .75rem 0; }
.editorial-band { width: 100%; max-width: none; padding-inline: max(1rem, calc((100vw - 1180px) / 2)); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
.roadmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.roadmap-phase { padding: 0; overflow: hidden; }
.roadmap-phase:not(:has(> img)) { padding: clamp(1.1rem, 3vw, 1.7rem); }
.flow-steps .roadmap-phase { padding: 1.1rem; }
.roadmap-phase > img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .4rem; background: radial-gradient(circle at 50% 42%, rgba(137,86,251,.1), transparent 12rem), #0b0b0d; border-bottom: 1px solid rgba(137,86,251,.24); }
.roadmap-phase > div { padding: 1.1rem; }
.roadmap-phase p { color: var(--gold); }
.roadmap-phase h3 { font-size: clamp(1.08rem, 1.7vw, 1.32rem); line-height: 1.15; }
.roadmap-phase ul, .article ul { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.7; }
.roadmap-phase small { display: block; color: var(--muted); line-height: 1.65; }
.draft-pill { color: var(--gold); font-size: .72rem; margin-left: .35rem; }
.portfolio-showcase { display: grid; gap: 2rem; }
.section-kicker { display: grid; gap: 1rem; max-width: 760px; }
.section-kicker p:last-child { color: var(--muted); line-height: 1.7; }
.portfolio-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.portfolio-card { margin: 0; display: grid; grid-template-rows: auto 1fr; position: relative; overflow: hidden; border: 1px solid rgba(212,175,55,.28); border-radius: 8px; background: radial-gradient(circle at 50% 36%, rgba(137,86,251,.1), transparent 14rem), var(--surface); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.portfolio-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .5rem; border-bottom: 1px solid rgba(137,86,251,.2); transition: transform .45s ease, filter .45s ease; }
.portfolio-card:hover { transform: translateY(-4px); border-color: rgba(137,86,251,.58); box-shadow: 0 1.3rem 3rem rgba(0,0,0,.28); }
.portfolio-card:hover img { transform: scale(1.018); filter: saturate(1.06); }
.portfolio-card figcaption { position: static; padding: .85rem .9rem 1rem; background: linear-gradient(180deg, rgba(8,8,8,.28), rgba(137,86,251,.08)); border: 0; color: var(--text); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 250; backdrop-filter: none; }
.portfolio-card figcaption span { display: block; margin-top: .35rem; color: var(--muted); text-transform: none; letter-spacing: 0; line-height: 1.45; font-size: .76rem; }
.instructor { display: grid; grid-template-columns: .75fr 1fr; gap: 3rem; align-items: center; }
.instructor-copy, .instructor-media, .about-panel { border: 1px solid rgba(137,86,251,.18); border-radius: 8px; background: linear-gradient(180deg, rgba(137,86,251,.08), rgba(255,255,255,.02)); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.instructor-copy { padding: clamp(1.3rem, 3vw, 2rem); }
.instructor-copy p { color: var(--muted); line-height: 1.75; }
.instructor-copy blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 1px solid var(--purple); color: var(--lilac); font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.2; }
.instructor-media { padding: .65rem; }
.instructor-copy:hover, .instructor-media:hover { transform: translateY(-4px); border-color: rgba(137,86,251,.48); box-shadow: 0 1.4rem 3rem rgba(137,86,251,.12); }
.academy-office { border: 1px solid var(--line); border-radius: 8px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; box-shadow: 0 2rem 5rem rgba(0,0,0,.35); }
.portrait-placeholder, .vertical-player { min-height: 26rem; display: grid; place-items: center; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(212,175,55,.08), rgba(137,86,251,.06)), var(--surface); color: var(--muted); }
.final-cta { text-align: center; }
.final-cta h2 { margin-inline: auto; max-width: 13ch; }
.final-cta p { color: var(--muted); margin-inline: auto; max-width: 42rem; line-height: 1.7; }
.center-action { display: flex; justify-content: center; margin-top: 1.3rem; }
.feasibility-band { display: grid; gap: 1.3rem; border-top: 1px solid rgba(137,86,251,.2); border-bottom: 1px solid rgba(137,86,251,.2); }
.feasibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feasibility-grid article { padding: 1.2rem; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(255,255,255,.03); }
.feasibility-grid span { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: .13em; font-size: .7rem; margin-bottom: .6rem; }
.feasibility-grid strong { color: var(--text); font-size: 1.25rem; }
.home-pricing { max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: .7fr 1fr auto; align-items: center; }
.included-list { display: flex; flex-wrap: wrap; gap: .55rem; }

.page-hero { padding-top: clamp(2.8rem, 5vw, 4.6rem); padding-bottom: clamp(1.6rem, 3.5vw, 2.8rem); }
.page-hero h1 { font-size: clamp(2.7rem, 5.7vw, 5.3rem); max-width: 14ch; }
.compact-page-hero h1 { font-size: clamp(2.55rem, 5.3vw, 5rem); max-width: 14ch; }
.content-panel, .narrow { max-width: 820px; color: var(--muted); line-height: 1.8; }
.content-panel:has(.portfolio-grid), .content-panel:has(.about-panel), .content-panel:has(.feasibility-grid) { max-width: 1180px; }
.portfolio-grid, .blog-grid, .metric-grid, .learning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.blog-grid, .curriculum-timeline { padding-top: 1.4rem; }
.portfolio-grid .portfolio-card:nth-child(1) { grid-column: span 2; }
.blog-card { padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.blog-card .blog-image { display: block; overflow: hidden; border-bottom: 1px solid rgba(137,86,251,.24); background: radial-gradient(circle at 50% 36%, rgba(137,86,251,.1), transparent 13rem), #0b0b0d; }
.blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: .42rem; transition: transform .45s ease, filter .45s ease; }
.blog-card:hover { border-color: rgba(137,86,251,.58); box-shadow: 0 1.3rem 3rem rgba(0,0,0,.28), 0 0 0 1px rgba(212,175,55,.08); }
.blog-card:hover img { transform: scale(1.02); filter: saturate(1.06); }
.blog-card div { padding: 1.05rem 1.1rem 1.2rem; display: grid; gap: .55rem; align-content: start; }
.blog-card p { color: var(--muted); line-height: 1.6; }
.blog-card div > p:first-child { color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; }
.blog-card h2 { font-size: clamp(1.14rem, 1.7vw, 1.38rem); line-height: 1.16; }
.blog-card a:hover { color: var(--gold); }
.category-strip { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.4rem; }
details { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0; }
summary { color: var(--text); cursor: pointer; }
.pricing-layout { display: grid; grid-template-columns: .8fr 1fr; gap: 1.2rem; align-items: start; }
.pricing-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 880px; }
.featured-pricing { display: grid; min-height: 100%; max-width: none; border-color: rgba(212,175,55,.34); background: radial-gradient(circle at 24% 10%, rgba(137,86,251,.22), transparent 17rem), linear-gradient(180deg, rgba(212,175,55,.08), rgba(23,21,27,.9)); }
.pricing-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pricing-included { padding: 1.2rem; border: 1px solid rgba(137,86,251,.24); border-radius: 8px; background: rgba(137,86,251,.06); }
.payment-flow { display: grid; grid-template-columns: .45fr 1fr; gap: 2rem; align-items: start; }
.flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }

.course-hero { min-height: 72vh; display: grid; grid-template-columns: 1fr minmax(18rem, 26rem); gap: 2rem; align-items: center; background: radial-gradient(circle at 72% 14%, rgba(137,86,251,.22), transparent 18rem); }
.compact-course-hero { min-height: auto; padding-top: clamp(3.2rem, 6vw, 5.2rem); padding-bottom: clamp(2.6rem, 5vw, 4.4rem); }
.course-hero-copy h1 { max-width: 12ch; }
.compact-course-hero h1 { font-size: clamp(2.8rem, 6vw, 5.7rem); max-width: 13ch; }
.course-stat-panel { padding: 1.5rem; border: 1px solid rgba(137,86,251,.38); border-radius: 8px; background: linear-gradient(180deg, rgba(137,86,251,.14), rgba(23,21,27,.82)); box-shadow: 0 2rem 5rem rgba(0,0,0,.32); }
.course-stat-panel span { color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; }
.course-stat-panel strong { display: block; margin: 1rem 0; color: var(--gold); font-family: var(--display); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 200; }
.course-stat-panel p { color: var(--muted); line-height: 1.7; }
.course-overview { display: grid; grid-template-columns: .48fr 1fr; gap: 2rem; }
.outcome-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.outcome-card span { width: .55rem; height: .55rem; display: block; border-radius: 50%; background: var(--purple); box-shadow: 0 0 1rem var(--purple-glow); margin-bottom: 1rem; }
.outcome-card p { color: var(--muted); line-height: 1.65; margin: 0; }
.visual-learning { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-top: 0; }
.visual-card { margin: 0; padding: 0; overflow: hidden; }
.visual-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: .45rem; background: radial-gradient(circle at 50% 42%, rgba(137,86,251,.1), transparent 14rem), #0b0b0d; }
.visual-card figcaption { padding: 1rem 1.15rem; color: var(--lilac); text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; }
.course-modules h2 { margin: .4rem 0 1.5rem; }
.module-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.compact-modules { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.module-card { padding: 0; overflow: hidden; }
.text-module { padding: 0; }
.module-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .4rem; background: radial-gradient(circle at 50% 42%, rgba(137,86,251,.1), transparent 12rem), #0b0b0d; border-bottom: 1px solid rgba(137,86,251,.24); }
.module-card div { padding: 1rem; }
.module-card p { color: var(--gold); }
.module-card h3 { font-size: clamp(1.08rem, 1.7vw, 1.32rem); line-height: 1.18; }
.module-card ul { margin: .8rem 0 0; padding-left: 1rem; color: var(--muted); line-height: 1.6; }
.course-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.support-card p:last-child { color: var(--muted); line-height: 1.75; }
.course-preview-section { display: grid; gap: 1.4rem; padding-top: clamp(2rem, 5vw, 4rem); }
.course-preview-card { display: grid; grid-template-columns: minmax(18rem, .76fr) 1fr; gap: 1.2rem; align-items: center; border: 1px solid rgba(137,86,251,.28); border-radius: 8px; padding: .7rem; background: radial-gradient(circle at 26% 16%, rgba(137,86,251,.22), transparent 20rem), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); box-shadow: 0 1.8rem 4.2rem rgba(0,0,0,.28); }
.course-preview-card video { width: 100%; max-height: 34rem; aspect-ratio: 9 / 16; object-fit: contain; border: 1px solid rgba(212,175,55,.26); border-radius: 8px; background: #030303; }
.course-preview-card div { display: grid; gap: .8rem; padding: 1rem; }
.course-preview-card p { color: var(--muted); line-height: 1.65; }

.luxury-article { max-width: 920px; }
.article-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid rgba(137,86,251,.24); margin: 1.4rem 0; }
.article-body { color: var(--muted); line-height: 1.85; }
.article-body h2 { color: var(--text); margin-top: 2rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.about-panel { display: grid; grid-template-columns: .72fr 1fr; gap: 1.2rem; align-items: center; padding: 1rem; box-shadow: inset 0 0 2.5rem rgba(137,86,251,.05); }
.about-panel img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(137,86,251,.2); }
.about-panel .about-portrait { aspect-ratio: 4 / 5; object-position: center top; }
.about-panel p { color: var(--muted); }
.about-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.about-philosophy { max-width: none; margin-top: 1rem; padding: 1.25rem; border: 1px solid rgba(137,86,251,.18); border-radius: 8px; background: linear-gradient(180deg, rgba(137,86,251,.07), rgba(255,255,255,.02)); }
.curriculum-timeline { display: grid; gap: 1rem; }
.curriculum-phase { display: grid; grid-template-columns: minmax(14rem, .36fr) 1fr; gap: 1rem; padding: 1rem; border: 1px solid rgba(137,86,251,.22); border-radius: 8px; background: linear-gradient(180deg, rgba(137,86,251,.07), rgba(255,255,255,.02)); }
.curriculum-phase-head { display: grid; align-content: start; gap: .7rem; border-right: 1px solid rgba(212,175,55,.16); padding-right: 1rem; }
.curriculum-phase-head span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--line); color: var(--gold); border-radius: 50%; }
.curriculum-phase-head h2 { font-size: clamp(1.32rem, 2.1vw, 2rem); line-height: 1.12; }
.curriculum-phase-head img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid rgba(137,86,251,.24); }
.lesson-list { display: grid; gap: .7rem; }
.lesson-list section { padding: .95rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(0,0,0,.15); }
.lesson-list h3 { font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.18; }
.lesson-list p { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.course-video-library { display: grid; gap: 1.3rem; padding-top: 0; }
.video-chip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.video-chip { padding: 1rem; border: 1px solid rgba(137,86,251,.22); border-radius: 8px; background: linear-gradient(180deg, rgba(137,86,251,.08), rgba(255,255,255,.025)); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.video-chip:hover { transform: translateY(-3px); border-color: rgba(137,86,251,.55); box-shadow: 0 1rem 2.4rem rgba(137,86,251,.12); }
.video-chip span { display: block; margin-bottom: .45rem; color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; }
.video-chip strong { color: var(--text); line-height: 1.25; }

.enrollment-hero { padding-bottom: 1rem; }
.enrollment-hero h1 { max-width: 11ch; }
.form-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .42fr); gap: 1.2rem; align-items: start; padding-top: 1.4rem; }
.form-section .alert { grid-column: 1 / -1; }
.payment-panel, .enrollment-form, .lead-form { background: var(--surface); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 1.4rem; }
.payment-panel strong { color: var(--gold); font-size: 1.8rem; }
.compact-payment-panel { position: sticky; top: 6.1rem; display: grid; gap: .75rem; background: radial-gradient(circle at 18% 0%, rgba(137,86,251,.18), transparent 13rem), var(--surface); }
.compact-payment-panel h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.payment-amount-row { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.method-card { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0; color: var(--muted); }
.payment-steps { padding: .9rem; border: 1px solid rgba(137,86,251,.22); border-radius: 8px; background: rgba(137,86,251,.07); }
.payment-steps h3 { font-size: 1.18rem; }
.payment-steps ol { margin: .7rem 0 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.55; }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .7rem; }
.copy-row p { margin: 0; }
.is-copied { color: var(--gold); border-color: rgba(212,175,55,.58); }
.enrollment-form, .lead-form { display: grid; gap: 1rem; }
.admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.admin-form.compact { grid-template-columns: 1fr; align-content: start; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 1rem; }
.admin-form h3 { font-size: 1.4rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
label { display: grid; gap: .45rem; color: var(--muted); }
input, select { width: 100%; min-height: 2.9rem; border: 1px solid rgba(255,255,255,.13); border-radius: 6px; background: #0c0c0d; color: var(--text); padding: .8rem; }
label span, .alert { color: #ffb8b8; }
.alert { margin: 1rem 0; padding: 1rem; border: 1px solid rgba(255,184,184,.28); border-radius: 8px; background: rgba(255,184,184,.08); }
.alert.neutral { color: var(--lilac); border-color: rgba(228,203,255,.26); background: rgba(137,86,251,.08); }
.check-row { display: flex; align-items: center; gap: .7rem; }
.check-row input { width: auto; min-height: auto; }
.text-link { color: var(--gold); text-decoration: underline; text-underline-offset: .2rem; }
.inline-actions { display: inline-grid; margin: .15rem .15rem .15rem 0; }
.danger { border-color: rgba(255,120,120,.42); color: #ffc1c1; }
.muted-note { color: var(--muted); line-height: 1.7; }
.pwa-prompt { position: fixed; z-index: 20; left: 1rem; right: 1rem; bottom: 1rem; max-width: 36rem; margin: 0 auto; display: none; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; padding: .6rem; border: 1px solid rgba(137,86,251,.42); border-radius: 8px; background: rgba(8,8,8,.94); color: var(--muted); box-shadow: 0 -1rem 3rem rgba(0,0,0,.34), 0 0 0 1px rgba(212,175,55,.1); backdrop-filter: blur(16px); }
.pwa-prompt.is-visible { display: grid; }
.pwa-prompt span { font-size: .74rem; line-height: 1.3; }
.pwa-prompt button { min-height: 2.15rem; border: 1px solid rgba(137,86,251,.38); border-radius: 6px; padding: .45rem .6rem; color: var(--lilac); background: rgba(137,86,251,.1); text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; }
.pwa-prompt button:hover { color: var(--black); background: linear-gradient(135deg, var(--gold), #f6df87); border-color: transparent; }
.premium-confirmation { display: grid; grid-template-columns: .8fr 1fr; gap: 1.2rem; border-color: rgba(137,86,251,.34); background: radial-gradient(circle at 18% 8%, rgba(137,86,251,.2), transparent 18rem), var(--surface); }
.premium-confirmation h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); }
.premium-confirmation p { color: var(--muted); line-height: 1.7; }
.confirmation-facts { display: grid; gap: .45rem; padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(0,0,0,.18); }
.confirmation-facts p { margin: 0; }

.site-footer { position: relative; display: grid; grid-template-columns: minmax(16rem, .78fr) 1.4fr; gap: clamp(1.8rem, 5vw, 4.4rem); padding: 3rem clamp(1rem, 4vw, 4rem) 2.6rem; border-top: 1px solid rgba(137,86,251,.24); color: var(--muted); background: radial-gradient(circle at 18% 0%, rgba(137,86,251,.18), transparent 22rem), linear-gradient(180deg, rgba(23,21,27,.62), rgba(8,8,8,1)); }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), var(--purple), transparent); opacity: .72; }
.footer-brand { display: grid; gap: .82rem; align-content: start; }
.site-footer img { width: clamp(8rem, 10vw, 10.8rem); }
.footer-brand p { max-width: 32rem; line-height: 1.75; }
.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.site-footer nav { display: grid; gap: .75rem; align-content: start; }
.site-footer strong { color: var(--gold); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }
.site-footer a:hover { color: var(--lilac); }
.footer-copy { grid-column: 1 / -1; margin: .2rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); color: var(--muted); text-align: center; }
.footer-attribution { grid-column: 1 / -1; margin: -.35rem 0 0; color: rgba(170,163,178,.78); font-size: .72rem; line-height: 1.6; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.footer-attribution span { margin-right: .35rem; }
.footer-attribution a { color: var(--lilac); text-decoration: underline; text-decoration-color: rgba(137,86,251,.45); text-underline-offset: .22rem; transition: color .2s ease, text-decoration-color .2s ease; }
.footer-attribution a:hover, .footer-attribution a:focus-visible { color: var(--gold); text-decoration-color: var(--gold); outline: none; }
.footer-attribution a:focus-visible { box-shadow: 0 0 0 3px rgba(137,86,251,.32); border-radius: 3px; }
.mobile-cta, .mobile-action-bar { display: none; }

.app-shell, .student-shell { min-height: 100vh; display: grid; grid-template-columns: 16rem 1fr; background: var(--black); }
.sidebar { border-right: 1px solid rgba(255,255,255,.08); padding: 1rem; background: var(--surface); }
.sidebar img, .student-topbar img { width: 10rem; margin-bottom: 2rem; }
.sidebar nav { display: grid; gap: .5rem; }
.sidebar a { color: var(--muted); padding: .9rem; border-radius: 6px; }
.sidebar a:hover { background: rgba(255,255,255,.05); color: var(--text); }
.sidebar-logout { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-logout button { width: 100%; }
.workspace, .student-main { padding: clamp(1rem, 4vw, 3rem); }
.workspace-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.metric-grid article { background: radial-gradient(circle at 20% 0%, rgba(137,86,251,.14), transparent 12rem), var(--elevated); border: 1px solid rgba(255,255,255,.08); padding: 1.2rem; border-radius: 8px; }
.metric-grid span { color: var(--muted); display: block; margin-bottom: .5rem; }
.metric-grid strong { color: var(--gold); font-size: 1.6rem; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: .9rem; border-bottom: 1px solid rgba(255,255,255,.08); }
th { color: var(--gold); font-weight: 250; }
td { color: var(--muted); }
.admin-copy-row { grid-template-columns: minmax(8rem, 1fr) auto; align-items: center; }
.password-control { display: grid; grid-template-columns: minmax(11rem, 1fr) auto; gap: .45rem; align-items: center; }
.password-control input { min-height: 2.4rem; padding: .55rem .65rem; }
.status-form { display: grid; gap: .45rem; min-width: 10rem; }
.status-form select { min-height: 2.35rem; padding: .5rem .65rem; }
.status-badge { width: max-content; display: inline-flex; align-items: center; min-height: 1.8rem; padding: .28rem .55rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: var(--muted); background: rgba(255,255,255,.04); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.status-active { color: #dfffe8; border-color: rgba(81,220,124,.34); background: rgba(81,220,124,.12); }
.status-approved { color: #dfffe8; border-color: rgba(81,220,124,.34); background: rgba(81,220,124,.12); }
.status-pending { color: var(--lilac); border-color: rgba(137,86,251,.36); background: rgba(137,86,251,.12); }
.status-paused, .status-suspended { color: #d6d1dc; border-color: rgba(170,163,178,.28); background: rgba(170,163,178,.1); }
.status-resubmission_requested { color: #ffe0a3; border-color: rgba(212,175,55,.34); background: rgba(212,175,55,.1); }
.status-rejected { color: #ffc1c1; border-color: rgba(255,120,120,.34); background: rgba(255,120,120,.1); }
.media-upload-form { grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1fr) auto; align-items: end; }
.payment-proof { display: inline-grid; gap: .4rem; color: var(--gold); text-decoration: none; }
.payment-proof img { width: 6.4rem; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(137,86,251,.34); border-radius: 6px; background: #050505; }
.payment-proof.compact img { width: 5rem; }
.payment-proof span { text-decoration: underline; text-underline-offset: .2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.login-section { min-height: calc(100svh - 4.65rem); display: grid; place-items: center; }
.login-panel { width: min(100%, 34rem); display: grid; gap: 1.2rem; padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid rgba(137,86,251,.3); border-radius: 8px; background: radial-gradient(circle at 18% 0%, rgba(137,86,251,.2), transparent 18rem), linear-gradient(180deg, rgba(23,21,27,.92), rgba(8,8,8,.9)); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.38), inset 0 0 2rem rgba(137,86,251,.05); }
.login-panel h1 { font-size: clamp(3rem, 8vw, 5rem); max-width: 100%; }
.login-form { background: transparent; border: 0; padding: 0; }
.public-password-control { grid-template-columns: minmax(0, 1fr) auto; }
.admin-alert-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin: 1rem 0; padding: 1.1rem; border: 1px solid rgba(137,86,251,.3); border-radius: 8px; background: radial-gradient(circle at 16% 0%, rgba(137,86,251,.16), transparent 16rem), rgba(255,255,255,.03); }
.admin-alert-panel h2 { font-size: clamp(1.8rem, 4vw, 3.4rem); }
.admin-alert-panel p { color: var(--muted); line-height: 1.55; }
.progress-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.admin-progress-card { display: grid; gap: .85rem; padding: 1rem; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: linear-gradient(180deg, rgba(137,86,251,.08), rgba(23,21,27,.88)); }
.admin-progress-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.admin-progress-head span { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; }
.admin-progress-head h3 { margin: .35rem 0; font-size: clamp(1.35rem, 2.6vw, 2rem); }
.admin-progress-head p { color: var(--muted); margin: 0; }
.admin-progress-head > strong { color: var(--gold); font-family: var(--display); font-size: clamp(2.2rem, 5vw, 4rem); line-height: .9; }
.admin-progress-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.admin-progress-facts p { display: grid; gap: .2rem; margin: 0; padding: .7rem; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(0,0,0,.16); }
.admin-progress-facts span { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; }
.admin-progress-facts strong { color: var(--text); line-height: 1.25; }
.student-shell { display: block; }
.student-topbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; justify-content: space-between; align-items: center; padding: .7rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid rgba(137,86,251,.22); background: rgba(8,8,8,.94); backdrop-filter: blur(16px); }
.student-topbar img { margin: 0; }
.student-topbar img { width: 8.8rem; }
.student-nav { display: flex; justify-content: center; gap: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; }
.student-nav a { padding: .55rem .7rem; border: 1px solid transparent; border-radius: 6px; }
.student-nav a:hover, .student-nav a:focus-visible { color: var(--gold); border-color: rgba(137,86,251,.28); outline: none; }
.student-portal-attribution { margin: 0 clamp(1rem, 4vw, 3rem) 1.4rem; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,.08); color: rgba(170,163,178,.78); font-size: .68rem; letter-spacing: .1em; line-height: 1.6; text-align: center; text-transform: uppercase; }
.student-portal-attribution span { margin-right: .35rem; }
.student-portal-attribution a { color: var(--lilac); text-decoration: underline; text-decoration-color: rgba(137,86,251,.45); text-underline-offset: .22rem; transition: color .2s ease, text-decoration-color .2s ease; }
.student-portal-attribution a:hover, .student-portal-attribution a:focus-visible { color: var(--gold); text-decoration-color: var(--gold); outline: none; }
.student-portal-attribution a:focus-visible { box-shadow: 0 0 0 3px rgba(137,86,251,.32); border-radius: 3px; }
.student-hero { margin-bottom: 2rem; }
.premium-student-hero { min-height: auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(16rem, 24rem); gap: clamp(1rem, 4vw, 3rem); align-items: center; padding: clamp(1.4rem, 5vw, 3rem); border: 1px solid rgba(137,86,251,.28); border-radius: 8px; background: radial-gradient(circle at 12% 12%, rgba(137,86,251,.22), transparent 18rem), linear-gradient(135deg, rgba(23,21,27,.92), rgba(8,8,8,.9)); }
.premium-student-hero h1 { max-width: 12ch; font-size: clamp(3rem, 8vw, 6rem); }
.premium-student-hero p { color: var(--muted); line-height: 1.7; max-width: 43rem; }
.student-progress-card { display: grid; gap: .75rem; padding: 1.25rem; border: 1px solid rgba(137,86,251,.32); border-radius: 8px; background: radial-gradient(circle at 30% 0%, rgba(137,86,251,.24), transparent 14rem), rgba(8,8,8,.42); }
.student-progress-card span { color: var(--gold); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; }
.student-progress-card strong { color: var(--text); font-family: var(--display); font-size: clamp(3.3rem, 9vw, 6.8rem); font-weight: 200; line-height: .9; }
.student-progress-card p { margin: 0; }
.student-progress-track { width: 100%; height: .5rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.student-progress-track i { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--purple)); box-shadow: 0 0 1.1rem rgba(137,86,251,.36); }
.student-intro-video { max-width: 23rem; justify-self: end; }
.student-metrics { margin: 1rem 0 2rem; }
.secret-recipe-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin: 0 0 1rem; padding: 1rem; border: 1px solid rgba(212,175,55,.32); border-radius: 8px; background: radial-gradient(circle at 10% 0%, rgba(212,175,55,.18), transparent 16rem), radial-gradient(circle at 84% 18%, rgba(137,86,251,.18), transparent 15rem), linear-gradient(180deg, rgba(23,21,27,.92), rgba(8,8,8,.86)); box-shadow: 0 1rem 2.8rem rgba(0,0,0,.22); }
.secret-recipe-callout h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: .35rem; }
.secret-recipe-callout p { color: var(--muted); line-height: 1.55; max-width: 54rem; }
.student-continue-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem); gap: 1rem; align-items: center; margin: 0 0 2rem; padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.03); }
.student-continue-panel h2 { font-size: clamp(1.8rem, 4vw, 3.1rem); }
.student-continue-panel p { color: var(--muted); line-height: 1.55; }
.student-module-shell { display: grid; gap: 1rem; }
.student-roadmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0; }
.student-module-card { background: linear-gradient(180deg, rgba(137,86,251,.09), rgba(23,21,27,.88)); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.student-module-card:hover { transform: translateY(-3px); border-color: rgba(137,86,251,.48); box-shadow: 0 1rem 2.6rem rgba(0,0,0,.28); }
.student-module-head { padding: 1.1rem; border-bottom: 1px solid rgba(137,86,251,.22); background: radial-gradient(circle at 12% 0%, rgba(137,86,251,.18), transparent 12rem); }
.student-module-head span, .student-module-head p { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; }
.student-module-head h3 { margin: .4rem 0; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.05; }
.module-track { height: .34rem; margin-top: .75rem; }
.student-roadmap ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.student-roadmap li, .admin-roadmap li { display: flex; justify-content: space-between; gap: 1rem; }
.student-roadmap li { border-bottom: 1px solid rgba(255,255,255,.07); }
.student-roadmap li:last-child { border-bottom: 0; }
.student-roadmap a { width: 100%; display: grid; gap: .25rem; color: var(--text); padding: .9rem 1.1rem; }
.student-roadmap a:hover { background: rgba(137,86,251,.1); }
.student-roadmap small { color: var(--muted); }
.student-roadmap li.is-current a { background: linear-gradient(90deg, rgba(137,86,251,.18), rgba(255,255,255,0)); box-shadow: inset 3px 0 0 var(--purple); }
.student-roadmap li.is-done a { color: var(--lilac); }
.student-roadmap li.is-done a::after { content: "Complete"; width: max-content; color: #dfffe8; border: 1px solid rgba(81,220,124,.34); background: rgba(81,220,124,.1); border-radius: 999px; padding: .16rem .45rem; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.student-roadmap span, .admin-roadmap small { color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.admin-roadmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.admin-roadmap article { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 1rem; }
.lesson-layout { display: grid; grid-template-columns: 16rem minmax(16rem, 27rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.lesson-playlist { position: sticky; top: 6rem; max-height: calc(100svh - 7rem); overflow: auto; display: grid; gap: .55rem; padding: .9rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.03); }
.lesson-playlist strong { color: var(--gold); margin-top: .8rem; }
.lesson-playlist a { display: grid; gap: .18rem; padding: .8rem; background: var(--surface); border-radius: 6px; color: var(--muted); }
.lesson-playlist a small { color: var(--gold); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.lesson-playlist .active { color: var(--text); border: 1px solid var(--line); }
.lesson-playlist .done { color: var(--lilac); border: 1px solid rgba(81,220,124,.2); }
.lesson-stage { position: sticky; top: 6rem; display: grid; gap: .8rem; }
.vertical-player { min-height: 34rem; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; border: 1px solid rgba(137,86,251,.26); background: #030303; }
.vertical-player video, .compact-video-card video { width: 100%; height: 100%; object-fit: contain; background: #030303; }
.vertical-player span { min-height: inherit; display: grid; place-items: center; color: var(--muted); }
.speed-control { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .65rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.03); }
.speed-control span { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; margin-right: .2rem; }
.speed-control button { min-height: 2rem; border: 1px solid rgba(137,86,251,.28); border-radius: 999px; padding: .35rem .55rem; color: var(--lilac); background: rgba(137,86,251,.08); font-size: .68rem; }
.speed-control button.is-active, .speed-control button:hover { color: var(--black); border-color: transparent; background: linear-gradient(135deg, var(--gold), #f6df87); }
.lesson-stage-meta { display: flex; justify-content: space-between; gap: .75rem; padding: .85rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.03); }
.lesson-stage-meta span { color: var(--muted); }
.lesson-stage-meta strong { color: var(--gold); }
.lesson-next-prev { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.lesson-next-prev a:only-child { grid-column: 1 / -1; }
.compact-video-card { padding: .6rem; min-height: 0; }
.compact-video-card video { aspect-ratio: 9 / 16; max-height: 28rem; border-radius: 8px; border: 1px solid rgba(137,86,251,.24); }
.lesson-notes { color: var(--muted); line-height: 1.8; }
.lesson-notes h1 { font-size: clamp(2.7rem, 6vw, 5.2rem); max-width: 11ch; }
.lesson-progress-pill { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin: 1rem 0; padding: .85rem; border: 1px solid rgba(137,86,251,.26); border-radius: 8px; background: rgba(137,86,251,.08); }
.lesson-progress-pill span { color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; }
.lesson-progress-pill strong { color: var(--text); }
.lesson-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.lesson-detail-grid section { padding: 1rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
.lesson-detail-grid h2 { font-size: 1.45rem; margin-bottom: .6rem; }
.lesson-detail-grid .secondary-button { margin-top: .5rem; }
.secret-recipe-panel { grid-column: 1 / -1; border-color: rgba(212,175,55,.26) !important; background: radial-gradient(circle at 10% 0%, rgba(212,175,55,.14), transparent 15rem), rgba(137,86,251,.06) !important; }
.secret-recipe-panel > p { color: var(--muted); line-height: 1.6; }
.recipe-ingredient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.recipe-ingredient-grid p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; margin: 0; padding: .75rem; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: rgba(0,0,0,.18); }
.recipe-ingredient-grid span { color: var(--muted); line-height: 1.3; }
.recipe-ingredient-grid strong { color: var(--gold); white-space: nowrap; }
.recipe-steps { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.2rem; color: var(--muted); line-height: 1.55; }
.recipe-steps li::marker { color: var(--gold); }
.filter-pill { border: 1px solid rgba(137,86,251,.28); background: rgba(137,86,251,.09); color: var(--lilac); padding: .5rem .65rem; border-radius: 999px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.filter-pill:hover, .filter-pill:focus-visible, .filter-pill.is-active { color: var(--black); background: linear-gradient(135deg, var(--gold), #f6df87); border-color: transparent; box-shadow: 0 .8rem 1.8rem rgba(137,86,251,.16); outline: none; }
.portfolio-card[hidden] { display: none; }
.portfolio-card figcaption .text-link { display: inline-flex; margin-top: .65rem; text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; }
.instructor-portrait { object-position: center top; }
.search-form { grid-template-columns: minmax(16rem, 1fr) auto; align-items: end; margin-bottom: 1rem; }
.students-workspace-header { margin-bottom: 1rem; }
.student-control-panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); gap: 1rem; align-items: end; margin-bottom: 1rem; padding: 1.15rem; border: 1px solid rgba(137,86,251,.28); border-radius: 8px; background: radial-gradient(circle at 16% 0%, rgba(137,86,251,.17), transparent 16rem), linear-gradient(180deg, rgba(23,21,27,.88), rgba(8,8,8,.8)); }
.student-control-panel h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); margin-bottom: .35rem; }
.device-limit-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: end; }
.student-admin-metrics { margin-bottom: 1rem; }
.student-search-form { margin-bottom: 1rem; }
.student-directory { display: grid; gap: 1rem; }
.student-view-toolbar { display: flex; gap: .55rem; justify-content: flex-end; flex-wrap: wrap; }
.student-cards-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.student-table-section { display: none; margin-top: 0; }
.student-directory.is-table-view .student-cards-section { display: none; }
.student-directory.is-table-view .student-table-section { display: block; }
.student-admin-card { display: grid; gap: .9rem; padding: 1rem; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: radial-gradient(circle at 12% 0%, rgba(137,86,251,.15), transparent 15rem), linear-gradient(180deg, rgba(23,21,27,.92), rgba(8,8,8,.84)); box-shadow: 0 1rem 2.4rem rgba(0,0,0,.18); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.student-admin-card:hover { transform: translateY(-2px); border-color: rgba(137,86,251,.34); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.28), 0 0 0 1px rgba(212,175,55,.08); }
.student-card-topline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start; }
.student-avatar { width: 3rem; height: 3rem; display: inline-grid; place-items: center; border: 1px solid rgba(212,175,55,.36); border-radius: 50%; color: var(--gold); background: linear-gradient(135deg, rgba(212,175,55,.12), rgba(137,86,251,.16)); font-family: var(--display); font-size: 1.35rem; }
.student-card-topline h3 { margin: 0; font-size: clamp(1.32rem, 2.4vw, 1.9rem); line-height: 1.05; }
.student-card-topline p { margin: .28rem 0 0; color: var(--muted); line-height: 1.35; }
.student-card-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.student-card-facts p { min-width: 0; display: grid; gap: .22rem; margin: 0; padding: .72rem; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(0,0,0,.18); }
.student-card-facts span, .device-reset-form span { color: var(--muted); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.student-card-facts strong { color: var(--text); line-height: 1.25; overflow-wrap: anywhere; font-size: .92rem; }
.device-meter { height: .46rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.device-meter i { display: block; width: var(--device-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--gold)); }
.device-full .device-meter i { background: linear-gradient(90deg, var(--gold), #ffe8a8); }
.device-over .device-meter i { background: linear-gradient(90deg, #ff8c8c, var(--gold)); }
.student-card-actions { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.student-card-details { border-top: 1px solid rgba(255,255,255,.08); padding-top: .65rem; }
.student-card-details summary { cursor: pointer; width: max-content; color: var(--lilac); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }
.student-card-details summary:hover { color: var(--gold); }
.student-detail-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .8rem; }
.student-card-form { display: grid; gap: .6rem; align-content: start; padding: .75rem; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.03); }
.student-card-form p { display: grid; gap: .25rem; margin: 0; color: var(--muted); }
.student-card-form p strong { color: var(--text); font-weight: 250; }
.student-card-form .password-control { grid-template-columns: minmax(0, 1fr) auto; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .34s ease, transform .34s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1080px) {
  .site-header { z-index: 1000; }
  .brand, .nav-toggle { position: relative; z-index: 2; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; background: rgba(8,8,8,.9); }
  body.nav-open { overflow: hidden; }
  body.nav-open::before { content: ""; position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,.56); }
  .primary-nav { position: fixed; top: 4.8rem; left: .75rem; right: .75rem; z-index: 1001; display: grid; grid-template-columns: 1fr; gap: .2rem; max-height: calc(100svh - 6rem); overflow-y: auto; overscroll-behavior: contain; padding: .75rem; background: linear-gradient(180deg, rgba(15,11,22,.99), rgba(8,8,8,.99)); border: 1px solid rgba(137,86,251,.38); border-radius: 8px; box-shadow: 0 1.6rem 4rem rgba(0,0,0,.72), inset 0 0 0 1px rgba(212,175,55,.08); opacity: 0; pointer-events: none; transform: translateY(-.75rem); visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
  .primary-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
  .primary-nav a { min-height: 2.65rem; padding: .65rem .7rem; border-bottom: 1px solid rgba(255,255,255,.07); background: transparent; }
  .primary-nav a:hover, .primary-nav a:focus-visible { color: var(--gold); background: rgba(137,86,251,.12); outline: none; }
  .primary-nav .nav-cta { margin-top: .3rem; justify-content: center; border: 1px solid rgba(212,175,55,.42); }
  .hero, .split, .instructor, .form-section, .lesson-layout, .admin-form, .settings-grid, .pricing-layout, .payment-flow, .course-hero, .course-overview, .about-panel, .home-pricing, .curriculum-phase, .course-preview-card, .premium-confirmation, .premium-student-hero, .student-continue-panel, .secret-recipe-callout { grid-template-columns: 1fr; }
  .roadmap, .feature-grid, .feature-showcase, .portfolio-grid, .portfolio-strip, .blog-grid, .metric-grid, .learning-grid, .student-roadmap, .admin-roadmap, .lesson-detail-grid, .pricing-detail-grid, .flow-steps, .outcome-grid, .visual-learning, .module-grid, .compact-modules, .course-support, .footer-columns, .value-grid, .worth-grid, .pain-grid, .pain-grid.compact, .solution-grid, .learning-area-grid, .feasibility-grid, .video-chip-grid, .recipe-ingredient-grid { grid-template-columns: 1fr; }
  .about-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sample-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-grid .portfolio-card:nth-child(1) { grid-column: auto; }
  h1 { font-size: clamp(3.1rem, 16vw, 5rem); }
  .hero-copy { min-width: 0; max-width: 100%; }
  .site-header { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .brand { min-width: 0; }
  .nav-toggle { justify-self: end; }
  .hero { min-height: auto; padding-top: 4.6rem; padding-bottom: 4.2rem; }
  .hero-bg { object-fit: cover; object-position: 58% center; }
  .hero::after { background: linear-gradient(90deg, rgba(8,8,8,.96), rgba(8,8,8,.7)), linear-gradient(0deg, rgba(8,8,8,.88), rgba(8,8,8,.18)); }
  .pricing-card { flex-direction: column; align-items: flex-start; }
  .curriculum-phase-head { border-right: 0; border-bottom: 1px solid rgba(212,175,55,.16); padding-right: 0; padding-bottom: 1rem; }
  .site-footer { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 2.4rem; }
  .site-footer img { width: 10rem; }
  .footer-brand { gap: .65rem; }
  .mobile-action-bar { position: fixed; z-index: 6; left: .75rem; right: .75rem; bottom: .75rem; display: grid; grid-template-columns: 1fr auto auto; gap: .45rem; align-items: center; padding: .5rem; border: 1px solid rgba(137,86,251,.38); border-radius: 8px; background: rgba(8,8,8,.92); box-shadow: 0 -.8rem 2.6rem rgba(0,0,0,.38), 0 0 0 1px rgba(212,175,55,.12); backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transform: translateY(135%); transition: opacity .22s ease, transform .22s ease; }
  body.mobile-bar-visible .mobile-action-bar { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-action-bar span { color: var(--lilac); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
  .mobile-enroll, .mobile-whatsapp { min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; padding: .55rem .65rem; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 250; }
  .mobile-enroll { background: linear-gradient(135deg, var(--gold), #f6df87); color: var(--black); }
  .mobile-whatsapp { color: #fff; border: 1px solid rgba(137,86,251,.48); background: linear-gradient(135deg, var(--purple-deep), var(--purple)); }
  .site-footer { padding-bottom: 6.4rem; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .sidebar img { width: 7.8rem; margin-bottom: .7rem; }
  .sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .sidebar a { padding: .65rem .55rem; font-size: .72rem; }
  .sidebar-logout { margin-top: .65rem; padding-top: .65rem; }
  .admin-alert-panel, .progress-admin-grid { grid-template-columns: 1fr; }
  .admin-alert-panel .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .admin-progress-facts { grid-template-columns: 1fr; }
  .student-control-panel, .student-cards-section, .student-detail-panel { grid-template-columns: 1fr; }
  .student-view-toolbar { justify-content: flex-start; }
  .student-card-facts { grid-template-columns: 1fr; }
  .student-topbar { grid-template-columns: 1fr auto; }
  .student-nav { grid-column: 1 / -1; order: 3; justify-content: start; overflow-x: auto; padding-bottom: .2rem; }
  .student-intro-video { justify-self: start; max-width: 18rem; }
  .student-progress-card { order: -1; }
  .lesson-playlist, .lesson-stage { position: static; max-height: none; }
  .vertical-player { min-height: 28rem; max-height: 72svh; }
}

@media (max-width: 640px) {
  .section { width: min(100% - 1rem, 1180px); }
  .site-header { padding-inline: .75rem; }
  .brand img { width: 8.35rem; height: 3.45rem; }
  .student-main { padding: .75rem; }
  .student-topbar { gap: .55rem; padding: .55rem .75rem; }
  .student-topbar img { width: 7rem; }
  .student-topbar .ghost-button { min-height: 2.2rem; padding: .5rem .65rem; font-size: .62rem; }
  .student-portal-attribution { margin: 0 .75rem 5.2rem; font-size: .62rem; letter-spacing: .07em; }
  .student-portal-attribution span { display: block; margin-right: 0; }
  .pwa-prompt { grid-template-columns: 1fr auto; left: .5rem; right: .5rem; bottom: .5rem; }
  .pwa-prompt span { grid-column: 1 / -1; }
  .student-nav { gap: .45rem; font-size: .6rem; }
  .premium-student-hero { padding: 1rem; }
  .premium-student-hero h1 { font-size: clamp(2.7rem, 16vw, 4.4rem); }
  .student-progress-card strong { font-size: clamp(3rem, 19vw, 5.2rem); }
  .student-continue-panel { margin-bottom: 1rem; }
  .student-continue-panel .student-intro-video { max-width: 13rem; }
  .student-metrics { gap: .55rem; margin-bottom: 1rem; }
  .student-metrics article { padding: .85rem; }
  .student-metrics strong { font-size: 1.2rem; }
  .student-module-head, .student-roadmap a { padding-inline: .85rem; }
  .lesson-playlist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(68vw, 1fr); overflow-x: auto; overflow-y: hidden; }
  .lesson-playlist strong { display: none; }
  .lesson-playlist .eyebrow { grid-column: 1 / -1; }
  .speed-control { gap: .32rem; padding: .5rem; }
  .speed-control button { min-height: 1.85rem; padding-inline: .45rem; font-size: .62rem; }
  .lesson-next-prev { grid-template-columns: 1fr; }
  .lesson-progress-pill { display: grid; gap: .2rem; }
  .lesson-notes h1 { font-size: clamp(2.35rem, 13vw, 4rem); }
  .section { padding-top: 2.6rem; padding-bottom: 2.6rem; }
  h2 { font-size: clamp(1.9rem, 11vw, 3.05rem); }
  .hero-actions { display: grid; }
  .hero .eyebrow { font-size: .62rem; letter-spacing: .14em; width: 100%; }
  .lede { overflow-wrap: anywhere; }
  .price-strip small { max-width: 17rem; }
  .hero { padding-top: 4.2rem; padding-bottom: 3rem; }
  .trust-strip span, .included-list span { font-size: .62rem; padding: .42rem .5rem; }

  .sample-grid,
  .learning-area-grid,
  .roadmap,
  .portfolio-strip,
  .flow-steps,
  .visual-learning,
  .course-support {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78vw, 1fr);
    grid-template-columns: none;
    gap: .75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .15rem .1rem .85rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    overscroll-behavior-inline: contain;
  }

  .learning-area-grid {
    grid-auto-columns: minmax(0, 100%);
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .sample-grid::-webkit-scrollbar,
  .learning-area-grid::-webkit-scrollbar,
  .roadmap::-webkit-scrollbar,
  .portfolio-strip::-webkit-scrollbar,
  .flow-steps::-webkit-scrollbar,
  .visual-learning::-webkit-scrollbar,
  .course-support::-webkit-scrollbar { display: none; }

  .sample-card,
  .learning-area-card,
  .roadmap-phase,
  .portfolio-card,
  .flow-steps .roadmap-phase,
  .visual-card,
  .support-card { scroll-snap-align: start; }

  .sample-card, .sample-card:first-child { min-height: 0; grid-row: auto; }
  .sample-card img { min-height: 0; padding: .35rem; aspect-ratio: 16 / 10; }
  .learning-area-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }
  .module-card:not(.text-module) { display: grid; grid-template-columns: 7.2rem 1fr; min-height: 12rem; }
  .learning-area-card > img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-right: 0;
    border-bottom: 1px solid rgba(137,86,251,.24);
  }
  .module-card:not(.text-module) img { height: 100%; min-height: 10rem; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid rgba(137,86,251,.24); }
  .learning-area-card > span { display: none; }
  .learning-area-card > h3, .learning-area-card > ul { margin-left: .85rem; margin-right: .85rem; }
  .learning-area-card > h3 { margin-top: .85rem; font-size: 1.05rem; line-height: 1.18; }
  .learning-area-card ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding-left: 0; margin-top: .55rem; margin-bottom: .85rem; }
  .learning-area-card li { padding: .3rem .42rem; border: 1px solid rgba(137,86,251,.22); border-radius: 999px; font-size: .72rem; line-height: 1.25; }
  .learning-area-card li:nth-child(n+5) { display: none; }
  .core-idea { padding-top: 2.2rem; padding-bottom: 2.2rem; }
  .core-idea .content-stack { gap: .55rem; line-height: 1.45; }
  .core-idea .content-stack p { padding: .75rem; border: 1px solid rgba(137,86,251,.2); border-radius: 8px; background: rgba(137,86,251,.06); }
  .core-idea .content-stack p:nth-child(n+4) { display: none; }
  .problem-solution .section-kicker h2 { font-size: clamp(1.75rem, 9vw, 2.55rem); }
  .problem-solution .section-kicker p:last-child { display: none; }
  .pain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .pain-pill { justify-content: center; text-align: center; font-size: .78rem; line-height: 1.25; border-color: rgba(137,86,251,.24); background: rgba(137,86,251,.08); }
  .section-copy { line-height: 1.45; }
  .editorial-band { padding-top: 2.6rem; padding-bottom: 2.6rem; }
  .roadmap-phase > img, .portfolio-card img, .visual-card img { aspect-ratio: 16 / 10; }
  .roadmap-phase > div, .portfolio-card figcaption, .visual-card figcaption { padding: .85rem; }
  .roadmap-phase small, .portfolio-card figcaption span { line-height: 1.35; }
  .instructor { gap: .75rem; }
  .instructor-copy { padding: 1rem; }
  .instructor-copy p { line-height: 1.48; }
  .instructor-copy blockquote { font-size: 1.18rem; }
  .instructor-copy p:nth-of-type(n+3) { display: none; }
  .instructor-media { padding: .45rem; }
  .academy-office { max-height: 25rem; object-fit: cover; object-position: center top; }
  .portfolio-showcase { gap: 1rem; }
  .flow-steps .roadmap-phase { min-height: 10rem; }
  .flow-steps .roadmap-phase small { line-height: 1.38; }
  .module-card div { padding: .85rem; }
  .module-card h3 { font-size: 1.02rem; }
  .module-card small { line-height: 1.42; }
  .pain-pill { min-height: auto; padding: .8rem; }
  .form-section { gap: .8rem; padding-top: .6rem; }
  .enrollment-form, .payment-panel, .lead-form { padding: 1rem; }
  .compact-payment-panel { position: static; }
  .copy-row { grid-template-columns: 1fr; align-items: stretch; }
  .payment-steps { padding: .75rem; }
  .course-preview-card { padding: .45rem; }
  .course-preview-card div { padding: .75rem; }
  .course-preview-card video { max-height: 24rem; }
  .vertical-player { min-height: auto; max-height: 31rem; }
  .search-form { grid-template-columns: 1fr; }
  .student-control-panel { padding: .9rem; }
  .device-limit-form { grid-template-columns: 1fr; }
  .student-admin-card { padding: .85rem; gap: .7rem; }
  .student-card-topline { grid-template-columns: auto minmax(0, 1fr); }
  .student-card-topline .status-badge { grid-column: 1 / -1; }
  .student-card-actions { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .student-card-actions .text-link { display: inline-flex; min-height: 2.4rem; align-items: center; }
  .student-detail-panel { gap: .55rem; }
  .student-card-form { padding: .65rem; }
  .payment-amount-row strong { font-size: 1.45rem; }
  input, select { min-height: 2.65rem; padding: .7rem; }
  .mobile-action-bar { grid-template-columns: 1fr 4.8rem 5.7rem; left: .5rem; right: .5rem; bottom: .5rem; }
  .mobile-action-bar span { font-size: .6rem; }
  .mobile-enroll, .mobile-whatsapp { padding-inline: .45rem; font-size: .6rem; letter-spacing: .08em; }
  .site-footer { padding: 1.4rem .85rem 6.2rem; gap: .8rem; }
  .site-footer img { width: 5.8rem; }
  .footer-brand { justify-items: center; text-align: center; }
  .footer-brand .secondary-button { min-height: 2rem; padding: .5rem .65rem; font-size: .62rem; }
  .footer-brand p:nth-of-type(2) { display: none; }
  .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .site-footer nav { gap: .38rem; font-size: .7rem; min-width: 0; }
  .site-footer strong { font-size: .58rem; letter-spacing: .1em; }
  .footer-copy { font-size: .78rem; padding-top: .8rem; }
  .footer-attribution { margin-top: -.35rem; font-size: .66rem; letter-spacing: .06em; }
  .footer-attribution span { display: block; margin-right: 0; }
  .learning-area-grid { grid-auto-columns: minmax(0, 100%); gap: .65rem; }
  .learning-area-card { width: 100%; max-width: 100%; }
  .learning-area-card > img { max-height: 11.5rem; padding: .35rem; }
  .learning-area-card > h3 { margin-bottom: 0; }
  .learning-area-card ul { align-content: start; }
  .learning-area-card li { font-size: .7rem; }
  .learning-experience {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: 1fr;
    gap: .8rem;
    overflow: visible;
    padding-bottom: 2.6rem;
    scroll-snap-type: none;
  }
  .learning-experience .visual-card,
  .learning-experience .outcome-panel { scroll-snap-align: none; }
  .learning-experience .visual-card img { max-height: 12rem; object-fit: contain; padding: .35rem; background: #0b0b0d; }
  .learning-experience .visual-card figcaption,
  .learning-experience .outcome-panel { padding: .85rem; }
  .learning-experience .outcome-panel h2 { font-size: clamp(1.75rem, 9vw, 2.45rem); }
  .learning-experience .outcome-panel p,
  .learning-experience .outcome-panel li { line-height: 1.42; }
  .learning-experience .outcome-panel ul { margin-top: .7rem; padding-left: 1rem; }
  .pwa-prompt {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .38rem;
    padding: .48rem;
    bottom: .4rem;
  }
  .pwa-prompt span { grid-column: 1 / -1; font-size: .64rem; }
  .pwa-prompt button { min-height: 1.9rem; padding: .36rem .55rem; font-size: .56rem; }
  .student-topbar { grid-template-columns: auto auto; }
  .student-topbar img { width: 6.2rem; }
  .student-nav { width: 100%; }
  .student-roadmap { gap: .7rem; }
  .about-proof-grid { grid-template-columns: 1fr; }
}