:root {
  color-scheme: light;
  --ink: #17130e;
  --ink-2: #211a13;
  --ink-soft: #756d62;
  --gold: #cba54c;
  --gold-bright: #e2c373;
  --gold-deep: #9e7528;
  --cream: #f6f4ee;
  --paper: #fffefa;
  --line: #e7e1d5;
  --dark: #100d0a;
  --dark-2: #18120e;
  --serif: "Noto Naskh Arabic", "Amiri", "Geeza Pro", "Times New Roman", serif;
  --sans: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --shell: 1200px;
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: var(--sans); line-height: 1.8; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(var(--shell), calc(100% - 72px)); margin-inline: auto; }
.site-header { position: relative; z-index: 10; color: #f9f4e9; background: #100d0a; border-bottom: 1px solid rgba(228, 195, 115, .13); }
.nav-wrap { display: flex; height: 78px; align-items: center; gap: 42px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(221, 186, 102, .7); transform: rotate(45deg); border-radius: 8px; position: relative; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; background: var(--gold-bright); }
.brand-mark::before { width: 1px; height: 20px; }
.brand-mark::after { width: 20px; height: 1px; }
.brand-mark span { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 11px rgba(226,195,115,.8); }
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.brand-copy strong { font: 600 14px/1.1 var(--sans); letter-spacing: .21em; color: #f2dfae; }
.brand-copy small { margin-top: 5px; font: 7px/1 var(--sans); color: #9f9686; letter-spacing: .13em; direction: ltr; }
.primary-nav { display: flex; align-items: center; gap: clamp(20px, 4vw, 54px); margin-inline: auto; }
.primary-nav a { color: #a8a092; font-size: 12px; transition: color .2s ease; }
.primary-nav a:hover, .primary-nav a.is-current { color: var(--gold-bright); }
.primary-nav a.is-current::after { content: ""; display: block; width: 4px; height: 4px; margin: 5px auto 0; border-radius: 50%; background: var(--gold); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 8px; padding: 10px 17px; font-size: 12px; font-weight: 700; transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-gold { color: #241b0d; background: linear-gradient(135deg, #e3c472, #cda449); box-shadow: 0 6px 19px rgba(190, 148, 54, .16); }
.button-gold:hover { background: linear-gradient(135deg, #f0d78d, #dcba67); box-shadow: 0 8px 24px rgba(190, 148, 54, .25); }
.nav-cta { padding: 10px 16px; font-size: 11px; }
.menu-toggle { display: none; }
.hero { position: relative; overflow: visible; color: #f9f4e9; background: radial-gradient(ellipse at 72% 44%, rgba(72, 40, 19, .38), transparent 44%), linear-gradient(110deg, #100d0a 0%, #140e0a 58%, #1d100b 100%); border-bottom: 1px solid rgba(223,185,91,.13); }
.hero-layout { display: grid; min-height: 575px; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: 30px; padding-block: 56px 64px; }
.hero-copy { position: relative; z-index: 2; max-width: 520px; justify-self: start; padding-inline: 2px 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #bda96f; font-size: 11px; letter-spacing: .02em; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 12px rgba(226,195,115,.5); }
h1, h2, p { margin-top: 0; }
.hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(46px, 5.5vw, 73px); font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.hero h1 span { color: var(--gold-bright); }
.hero-lede { max-width: 440px; margin: 20px 0 23px; color: #b8b0a4; font-size: 13px; line-height: 2.05; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.button-large { min-height: 48px; padding-inline: 20px 14px; }
.arrow-circle { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #241b0d; background: rgba(255,255,255,.3); font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #b9ae9a; font-size: 11px; transition: color .2s ease; }
.text-link:hover { color: #f0d78d; }
.play-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(216,184,105,.55); border-radius: 50%; color: var(--gold-bright); font-size: 8px; }
.hero-note { display: flex; gap: 9px; align-items: center; margin-top: 31px; color: #837a6c; font-size: 10px; }
.tiny-stars { color: var(--gold); font-size: 10px; letter-spacing: .14em; }
.hero-instructor { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 14px; margin-top: 18px; padding: 8px 15px 8px 18px; border: 1px solid rgba(216,184,105,.2); border-radius: 60px; background: rgba(255,255,255,.035); }
.hero-coach-orbit { position: relative; display: grid; width: 96px; flex: 0 0 auto; aspect-ratio: 1; place-items: center; }
.hero-orbit-track { position: absolute; z-index: 1; inset: 1px; border: 1px dashed rgba(226,195,115,.45); border-radius: 50%; animation: phoenix-orbit 8s linear infinite; }
.hero-orbit-track::before, .hero-orbit-track::after { position: absolute; color: var(--gold-bright); content: "➤"; font-size: 10px; line-height: 1; text-shadow: 0 0 8px rgba(226,195,115,.65); }
.hero-orbit-track::before { top: -4px; inset-inline-start: 50%; transform: translateX(50%) rotate(45deg); }
.hero-orbit-track::after { top: 50%; inset-inline-end: -4px; transform: translateY(-50%) rotate(-45deg); }
.hero-coach-orbit img { position: relative; z-index: 2; display: block; width: 76px; height: 76px; border: 2px solid #eed78c; border-radius: 50%; object-fit: cover; object-position: center 35%; box-shadow: 0 0 0 5px rgba(226,195,115,.08), 0 6px 18px rgba(0,0,0,.35); }
.hero-coach-orbit::before { position: absolute; z-index: 3; inset: 7px; border: 2px solid rgba(240,215,137,.8); border-radius: 50%; box-shadow: 0 0 24px rgba(226,195,115,.65); content: ""; opacity: 0; pointer-events: none; animation: phoenix-burst-ring 2.1s ease-out .08s both; }
.hero-coach-orbit::after { position: absolute; z-index: 0; inset: -14px; border-radius: 50%; background: radial-gradient(circle,rgba(226,195,115,.28),rgba(226,195,115,.04) 46%,transparent 72%); content: ""; opacity: 0; pointer-events: none; animation: phoenix-burst-flash 1.7s ease-out .08s both; }
.hero-burst-shard { position: absolute; z-index: 4; inset: 10px; border-radius: 50%; background: url('/assets/instructor-ahmed.jpg') center 35%/cover no-repeat; opacity: 0; pointer-events: none; animation: phoenix-shard-burst 2s cubic-bezier(.16,.8,.24,1) .12s both; will-change: transform,opacity; }
.hero-burst-shard--north { clip-path: polygon(0 0,100% 0,50% 50%); --burst-x1: 0; --burst-y1: -52px; --burst-x2: 6px; --burst-y2: -118px; --burst-r1: 10deg; --burst-r2: 24deg; }
.hero-burst-shard--east { clip-path: polygon(100% 0,100% 100%,50% 50%); --burst-x1: 51px; --burst-y1: -2px; --burst-x2: 118px; --burst-y2: 8px; --burst-r1: 13deg; --burst-r2: 27deg; animation-delay: .16s; }
.hero-burst-shard--south { clip-path: polygon(100% 100%,0 100%,50% 50%); --burst-x1: 1px; --burst-y1: 52px; --burst-x2: -6px; --burst-y2: 118px; --burst-r1: -11deg; --burst-r2: -24deg; animation-delay: .2s; }
.hero-burst-shard--west { clip-path: polygon(0 100%,0 0,50% 50%); --burst-x1: -51px; --burst-y1: 2px; --burst-x2: -118px; --burst-y2: -7px; --burst-r1: -12deg; --burst-r2: -26deg; animation-delay: .24s; }
.hero-burst-particle { position: absolute; z-index: 5; color: #f2d786; font: 700 15px/1 var(--sans); opacity: 0; pointer-events: none; text-shadow: 0 0 15px rgba(226,195,115,.85); animation: phoenix-particle-burst 2.05s cubic-bezier(.15,.7,.28,1) .14s both; will-change: transform,opacity; }
.hero-burst--arrow { top: 10%; inset-inline-start: 40%; --burst-x1: -5px; --burst-y1: -43px; --burst-x2: -15px; --burst-y2: -112px; --burst-r: -15deg; }
.hero-burst--down { top: 42%; inset-inline-end: 5%; --burst-x1: 48px; --burst-y1: -4px; --burst-x2: 112px; --burst-y2: 12px; --burst-r: 15deg; animation-delay: .23s; }
.hero-burst--code { bottom: 9%; inset-inline-start: 3%; font-size: 11px; direction: ltr; --burst-x1: -44px; --burst-y1: 15px; --burst-x2: -112px; --burst-y2: 31px; --burst-r: -12deg; animation-delay: .27s; }
.hero-burst--binary { top: 0; inset-inline-end: 3%; color: #d4b361; font-size: 8px; letter-spacing: .12em; direction: ltr; --burst-x1: 38px; --burst-y1: -43px; --burst-x2: 88px; --burst-y2: -105px; --burst-r: 10deg; animation-delay: .31s; }
.hero-burst--euro { top: 16%; inset-inline-end: -6%; font-size: 17px; --burst-x1: 48px; --burst-y1: -38px; --burst-x2: 112px; --burst-y2: -88px; --burst-r: 18deg; animation-delay: .19s; }
.hero-burst--yen { bottom: 1%; inset-inline-end: 20%; font-size: 15px; --burst-x1: 35px; --burst-y1: 43px; --burst-x2: 81px; --burst-y2: 106px; --burst-r: -12deg; animation-delay: .35s; }
.hero-burst--dollar { top: 17%; inset-inline-start: 4%; font-size: 18px; --burst-x1: -39px; --burst-y1: -35px; --burst-x2: -99px; --burst-y2: -90px; --burst-r: -18deg; animation-delay: .26s; }
.hero-burst--pound { bottom: 5%; inset-inline-start: 35%; font-size: 17px; --burst-x1: -8px; --burst-y1: 51px; --burst-x2: -21px; --burst-y2: 119px; --burst-r: 14deg; animation-delay: .37s; }
.hero-burst--forex { top: 36%; inset-inline-end: 31%; color: #f0dcaa; font-size: 8px; letter-spacing: .08em; direction: ltr; --burst-x1: 25px; --burst-y1: -17px; --burst-x2: 66px; --burst-y2: -72px; --burst-r: 8deg; animation-delay: .29s; }
.hero-burst--braces { top: 46%; inset-inline-start: -4%; font-size: 14px; direction: ltr; --burst-x1: -35px; --burst-y1: 6px; --burst-x2: -104px; --burst-y2: 23px; --burst-r: -10deg; animation-delay: .33s; }
.hero-burst--code-line { bottom: 17%; inset-inline-end: 0; color: #d4b361; font-size: 8px; direction: ltr; --burst-x1: 35px; --burst-y1: 27px; --burst-x2: 92px; --burst-y2: 82px; --burst-r: 12deg; animation-delay: .4s; }
.hero-photo-copy { position: absolute; z-index: 7; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px; isolation: isolate; opacity: 0; pointer-events: none; animation: phoenix-copy-emerge 2s cubic-bezier(.14,.78,.22,1) var(--copy-delay,1.05s) forwards; }
.hero-photo-copy__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 1px solid rgba(241,216,139,.9); border-radius: 50%; background: url('/assets/instructor-ahmed.jpg') center 35%/cover no-repeat; box-shadow: 0 0 12px rgba(226,195,115,.35); animation: phoenix-photo-float 3.6s ease-in-out var(--float-delay,2.8s) infinite; }
.hero-photo-copy::before { position: absolute; z-index: 0; inset: -5px; border: 1px solid rgba(240,215,137,.86); border-radius: 50%; content: ""; opacity: 0; pointer-events: none; animation: phoenix-mini-ring 2.7s ease-out var(--mini-delay,2.7s) infinite; }
.hero-photo-copy::after { position: absolute; z-index: 2; top: -8px; inset-inline-end: -7px; color: #f2d786; content: "✦"; font-size: 11px; text-shadow: 0 0 9px rgba(226,195,115,.8); opacity: 0; animation: phoenix-mini-spark 2.7s ease-out var(--mini-delay,2.7s) infinite; }
.hero-photo-copy--one { --copy-x: clamp(-130px,-10vw,-46px); --copy-y: clamp(230px,32vh,420px); --copy-delay: 1.2s; --float-delay: 3.2s; --mini-delay: 3.3s; }
.hero-photo-copy--two { --copy-x: clamp(-240px,-18vw,-70px); --copy-y: clamp(255px,37vh,470px); --copy-delay: 1.34s; --float-delay: 3.4s; --mini-delay: 3.6s; }
.hero-photo-copy--three { --copy-x: clamp(-350px,-28vw,-100px); --copy-y: clamp(170px,24vh,325px); --copy-delay: 1.48s; --float-delay: 3.6s; --mini-delay: 3.9s; }
.hero-photo-copy--four { --copy-x: clamp(-440px,-36vw,-135px); --copy-y: clamp(190px,26vh,350px); --copy-delay: 1.62s; --float-delay: 3.8s; --mini-delay: 4.2s; }
.hero-photo-copy--five { --copy-x: clamp(-180px,-14vw,-52px); --copy-y: clamp(320px,45vh,530px); --copy-delay: 1.76s; --float-delay: 4s; --mini-delay: 4.5s; }
.hero-photo-copy--six { --copy-x: clamp(-300px,-24vw,-86px); --copy-y: clamp(350px,48vh,560px); --copy-delay: 1.9s; --float-delay: 4.2s; --mini-delay: 4.8s; }
.hero-coach-copy { display: grid; gap: 1px; }
.hero-coach-copy small { color: #a99b7c; font-size: 9px; }
.hero-coach-copy strong { color: #f0e2bf; font-size: 11px; letter-spacing: .07em; direction: ltr; text-align: right; }
.hero-coach-copy a { color: var(--gold-bright); font-size: 9px; }
@keyframes phoenix-orbit { to { transform: rotate(360deg); } }
@keyframes phoenix-burst-ring { 0% { opacity: 0; transform: scale(.55); } 12% { opacity: 1; transform: scale(1.2); } 34% { opacity: .75; transform: scale(6.6); } 100% { opacity: 0; transform: scale(7.2); } }
@keyframes phoenix-burst-flash { 0% { opacity: 0; transform: scale(.35); } 10% { opacity: .95; transform: scale(1.2); } 30% { opacity: .68; transform: scale(8.2); } 100% { opacity: 0; transform: scale(9.4); } }
@keyframes phoenix-shard-burst { 0% { opacity: .98; transform: translate(0,0) rotate(0) scale(1); } 38% { opacity: 1; transform: translate(var(--burst-x1),var(--burst-y1)) rotate(var(--burst-r1)) scale(1.05); } 100% { opacity: 0; transform: translate(var(--burst-x2),var(--burst-y2)) rotate(var(--burst-r2)) scale(.58); } }
@keyframes phoenix-particle-burst { 0% { opacity: 0; transform: translate(0,0) scale(.5); } 18% { opacity: 1; transform: translate(var(--burst-x1),var(--burst-y1)) scale(1.05); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--burst-x2),var(--burst-y2)) rotate(var(--burst-r)) scale(.9); } }
@keyframes phoenix-copy-emerge { 0% { opacity: 0; transform: translate(0,0) scale(.12); } 44% { opacity: 1; transform: translate(var(--copy-x),var(--copy-y)) scale(1.05); } 100% { opacity: .86; transform: translate(var(--copy-x),var(--copy-y)) scale(.82); } }
@keyframes phoenix-photo-float { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-13px) rotate(7deg); } }
@keyframes phoenix-mini-ring { 0%,100% { opacity: 0; transform: scale(.55); } 24% { opacity: .85; transform: scale(1.05); } 58% { opacity: 0; transform: scale(2.1); } }
@keyframes phoenix-mini-spark { 0%,100% { opacity: 0; transform: translate(0,0) scale(.4); } 26% { opacity: 1; transform: translate(4px,-6px) scale(1.1); } 65% { opacity: 0; transform: translate(9px,-13px) scale(.5); } }
@keyframes chart-reveal { to { stroke-dashoffset: 0; } }
@keyframes chart-fill-in { to { opacity: 1; } }
@keyframes chart-glow { 50% { filter: drop-shadow(0 0 8px rgba(240,215,131,.85)); transform: scale(1.2); } }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero-visual { position: relative; z-index: 1; min-height: 425px; isolation: isolate; display: flex; align-items: center; justify-content: center; }
.visual-art { position: absolute; z-index: -2; inset: -24px -28px -24px -20px; background-image: linear-gradient(90deg, #120d09 0%, rgba(18,13,9,.45) 34%, rgba(18,13,9,.05) 100%), linear-gradient(0deg, #120d09 0%, transparent 39%, rgba(18,13,9,.16) 100%), url('/assets/phoenix-hero.png'); background-position: center, center, 69% 48%; background-size: cover, cover, cover; opacity: .88; mask-image: radial-gradient(ellipse at 63% 49%, black 30%, rgba(0,0,0,.84) 57%, transparent 94%); }
.scene-glow { position: absolute; z-index: -1; inset: 13% 5% 8% 14%; border-radius: 50%; background: radial-gradient(ellipse, rgba(190,130,45,.12), transparent 65%); filter: blur(22px); }
.chart-card { position: relative; width: min(100%, 515px); margin-top: 34px; padding: 19px 21px 14px; overflow: hidden; border: 1px solid rgba(218,187,109,.24); border-radius: 13px; background: linear-gradient(145deg, rgba(22,19,15,.85), rgba(15,12,10,.71)); box-shadow: 0 28px 65px rgba(0,0,0,.33), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(12px); }
.chart-topline { display: flex; justify-content: space-between; align-items: center; color: #d0c9bc; font-size: 10px; }
.chart-period { padding: 4px 9px; border: 1px solid rgba(218,187,109,.18); border-radius: 5px; color: #cdbb88; font-size: 9px; }
.chart-summary { display: flex; align-items: baseline; gap: 11px; margin-top: 10px; }
.chart-summary strong { color: #e4c778; font: 600 22px/1.2 var(--sans); direction: ltr; }
.chart-summary span { color: #938a7d; font-size: 8px; }
.chart-svg { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.chart-grid { stroke: rgba(232,224,205,.1); stroke-width: 1; stroke-dasharray: 3 6; }
.chart-bars { stroke: rgba(207,167,76,.25); stroke-width: 6; stroke-linecap: round; }
.chart-area { fill: url(#chartFill); opacity: 0; animation: chart-fill-in .9s ease .35s forwards; }
.chart-line { fill: none; stroke: url(#chartLine); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; filter: drop-shadow(0 0 5px rgba(223,190,103,.38)); animation: chart-reveal 2.2s cubic-bezier(.2,.75,.25,1) .15s forwards; }
.chart-point { fill: #f0d789; stroke: #403019; stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: chart-glow 2.7s ease-in-out 2.3s infinite; }
.chart-axis { display: flex; justify-content: space-between; color: #746d62; font-size: 8px; }
.visual-chip { position: absolute; display: inline-flex; gap: 9px; align-items: center; padding: 9px 12px; border: 1px solid rgba(216,184,105,.19); border-radius: 9px; background: rgba(20,16,12,.82); box-shadow: 0 12px 30px rgba(0,0,0,.2); backdrop-filter: blur(8px); animation: chip-float 5.6s ease-in-out infinite; }
.visual-chip small, .visual-chip strong { display: block; }
.visual-chip small { color: #938a7d; font-size: 8px; line-height: 1.4; }
.visual-chip strong { color: #e7d7ad; font-size: 10px; line-height: 1.5; }
.chip-top { top: 18px; inset-inline-start: 9%; }
.chip-symbol { color: var(--gold-bright); font-size: 22px; }
.chip-bottom { bottom: 20px; inset-inline-end: 7%; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #acba79; box-shadow: 0 0 0 4px rgba(172,186,121,.12); }
.hero-ornament { position: absolute; bottom: -100px; inset-inline-start: 44%; width: 360px; height: 150px; background: rgba(130,79,35,.12); filter: blur(70px); pointer-events: none; }
.metrics { background: #18130e; border-bottom: 1px solid rgba(223,185,91,.13); color: #eee6d3; }
.metric-grid { display: grid; min-height: 112px; grid-template-columns: repeat(4, 1fr); align-items: center; }
.metric { display: flex; flex-direction: column; align-items: center; gap: 1px; border-inline-start: 1px solid rgba(239,222,183,.12); text-align: center; }
.metric:last-child { border-inline-start: 0; }
.metric strong { color: #e3c171; font: 600 22px/1.3 var(--sans); direction: ltr; }
.metric span { color: #9e9587; font-size: 10px; }
.section-pad { padding-block: 93px; }
.paths-section { background: var(--cream); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 31px; }
.eyebrow-dark { margin-bottom: 5px; color: #8d7750; }
.section-heading h2, .method-copy h2 { margin: 0; font-family: var(--serif); font-size: clamp(31px, 3.5vw, 42px); font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.section-heading h2 span, .method-copy h2 span { color: var(--gold-deep); }
.subtle-link { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 7px; color: #786e5e; font-size: 10px; transition: color .2s ease; }
.subtle-link:hover { color: var(--gold-deep); }
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.path-card { position: relative; display: flex; min-height: 275px; flex-direction: column; align-items: stretch; padding: 21px 21px 17px; border: 1px solid #e3ddcf; border-radius: 11px; color: var(--ink); background: var(--paper); text-align: right; cursor: pointer; box-shadow: 0 7px 21px rgba(44,34,20,.03); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease; }
.path-card:hover { transform: translateY(-5px); border-color: #c7a75b; box-shadow: 0 17px 32px rgba(44,34,20,.08); }
.path-card.is-selected { border-color: var(--gold-deep); background: #fffaf0; box-shadow: 0 0 0 2px rgba(203,165,76,.15), 0 15px 30px rgba(44,34,20,.08); }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #eee4c8; border-radius: 8px; color: #9e7d39; background: #faf7ef; }
.card-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.card-number { color: #b2a790; font: 11px/1 var(--sans); direction: ltr; }
.card-kicker { margin-top: 18px; color: #8b7a5e; font-size: 9px; }
.card-title { margin-top: 2px; color: #272118; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.card-description { min-height: 52px; margin-top: 5px; color: #756e63; font-size: 10px; line-height: 1.9; }
.card-meta { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 13px; color: #928777; font-size: 8px; }
.card-meta span:last-child { margin-inline-start: auto; color: #b68b38; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0ece3; color: #85775e; font-size: 9px; }
.card-bottom strong { color: #9b7836; font-size: 17px; font-weight: 400; transition: transform .2s ease; }
.path-card:hover .card-bottom strong { transform: translateX(-4px); }
.path-feedback { min-height: 20px; margin: 13px 0 -24px; color: #8d7137; font-size: 10px; }
.method-section { padding-block: 39px 79px; background: var(--cream); }
.method-panel { position: relative; display: grid; min-height: 456px; grid-template-columns: minmax(0,1.12fr) minmax(240px,.88fr); align-items: center; gap: 25px; overflow: hidden; padding: 51px 7.5%; border: 1px solid #292119; border-radius: 15px; color: #f5eee1; background: radial-gradient(ellipse at 18% 92%, rgba(95,49,25,.32), transparent 44%), linear-gradient(124deg, #15110d, #1d1710 72%, #120e0b); box-shadow: 0 14px 40px rgba(35,27,16,.07); }
.method-copy { position: relative; z-index: 1; max-width: 540px; }
.method-copy .eyebrow { margin-bottom: 10px; }
.method-copy h2 { font-size: clamp(30px, 3.3vw, 40px); color: #f3ead7; }
.method-copy h2 span { color: var(--gold-bright); }
.method-description { max-width: 470px; margin: 12px 0 18px; color: #a9a092; font-size: 11px; line-height: 2; }
.step-list { display: grid; gap: 10px; max-width: 450px; margin: 0 0 23px; padding: 0; list-style: none; }
.step-list li { display: flex; align-items: center; gap: 12px; }
.step-list li > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(213,179,93,.34); border-radius: 50%; color: var(--gold-bright); font: 9px var(--sans); direction: ltr; }
.step-list strong, .step-list small { display: block; }
.step-list strong { color: #e6dcc8; font-size: 10px; }
.step-list small { color: #948b7e; font-size: 9px; }
.button-outline { color: #dcd0b6; border-color: rgba(207,173,96,.43); background: rgba(255,255,255,.025); font-size: 10px; }
.button-outline:hover { color: #fff5dc; border-color: #d1ad5e; background: rgba(205,164,73,.12); }
.method-emblem { position: relative; display: flex; min-height: 300px; align-items: center; justify-content: center; }
.emblem-ring { position: relative; display: grid; width: clamp(180px, 20vw, 245px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(220,187,103,.5); border-radius: 50%; background: radial-gradient(circle, rgba(219,177,78,.16), rgba(216,174,74,.025) 51%, transparent 72%); box-shadow: inset 0 0 46px rgba(216,174,74,.075), 0 0 32px rgba(216,174,74,.07); }
.emblem-ring::before, .emblem-ring::after { position: absolute; content: ""; inset: 14px; border: 1px solid rgba(220,187,103,.14); border-radius: 50%; }
.emblem-ring::after { inset: 30px; border-style: dashed; border-color: rgba(220,187,103,.18); }
.emblem-star { color: #f0d783; font-size: 49px; text-shadow: 0 0 30px rgba(240,215,131,.38); }
.emblem-caption { position: absolute; inset-inline-end: 10%; bottom: 10%; display: flex; flex-direction: column; align-items: center; padding: 9px 14px; border: 1px solid rgba(220,187,103,.29); border-radius: 9px; background: #1a1510; transform: rotate(-4deg); }
.emblem-caption strong { color: #ead083; font: 16px/1.3 var(--sans); direction: ltr; }
.emblem-caption small { color: #a49a87; font-size: 8px; }
.emblem-orbit { position: absolute; width: 8px; height: 8px; inset-inline-start: 17%; top: 25%; border-radius: 50%; background: #e3c16a; box-shadow: 0 0 16px #cf9f3f; }
.risk-note { display: flex; align-items: flex-start; gap: 13px; margin-block: 0 74px; padding: 15px 18px; border: 1px solid #e6d9c8; border-radius: 9px; background: #fffdf9; }
.risk-icon { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border: 1px solid #b68b58; border-radius: 50%; color: #9a7549; font: 12px/1 Georgia, serif; }
.risk-note strong { display: block; margin-bottom: 2px; color: #514337; font-size: 9px; }
.risk-note p { margin: 0; color: #8a8177; font-size: 9px; line-height: 1.8; }
.site-footer { color: #ddd3bf; background: #100d0a; border-top: 1px solid rgba(223,185,91,.13); }
.footer-main { display: grid; grid-template-columns: 1.35fr .75fr .75fr 1fr; gap: 35px; padding-block: 43px 34px; }
.brand-footer .brand-mark { width: 32px; height: 32px; }
.footer-brand-block p { margin: 16px 0 0; color: #8f877a; font-size: 9px; line-height: 2; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-column > strong { margin-bottom: 4px; color: #d1b365; font-size: 10px; }
.footer-column a { color: #989082; font-size: 9px; transition: color .2s ease; }
.footer-column a:hover { color: #ebd38d; }
.footer-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-action > span { color: #a89f90; font-size: 9px; }
.footer-action .button { font-size: 10px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-block: 15px 17px; border-top: 1px solid rgba(226,214,186,.12); color: #797264; font-size: 8px; }
.toast { position: fixed; z-index: 30; inset-inline-start: 50%; bottom: 25px; max-width: min(400px, calc(100% - 32px)); padding: 11px 17px; border: 1px solid rgba(224,193,117,.35); border-radius: 8px; color: #f2e8d2; background: #211910; font-size: 11px; box-shadow: 0 10px 40px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .25s ease, transform .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1500px) { :root { --shell: 1280px; } .hero-layout { min-height: 635px; } }
@media (max-width: 900px) {
  .shell { width: min(var(--shell), calc(100% - 48px)); }
  .nav-wrap { gap: 22px; }
  .primary-nav { gap: 22px; }
  .hero-layout { min-height: 525px; grid-template-columns: 1fr 1fr; gap: 5px; }
  .hero h1 { font-size: clamp(43px, 6vw, 61px); }
  .hero-visual { min-height: 380px; }
  .chart-card { padding: 15px 15px 12px; }
  .visual-art { inset-inline: -25px -35px; }
  .method-panel { padding-inline: 6%; }
  .footer-main { gap: 23px; }
}
@media (max-width: 680px) {
  .shell { width: calc(100% - 38px); }
  .nav-wrap { height: 69px; gap: 13px; }
  .brand-mark { width: 31px; height: 31px; }
  .brand-copy strong { font-size: 12px; }
  .brand-copy small { font-size: 6px; }
  .nav-cta { margin-inline-start: auto; padding: 8px 11px; font-size: 9px; }
  .menu-toggle { display: flex; width: 34px; height: 34px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; order: 3; border: 1px solid rgba(226,195,115,.25); border-radius: 7px; color: #f2dfae; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 14px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .primary-nav { position: absolute; top: 69px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 7px 20px 17px; background: #100d0a; border-bottom: 1px solid rgba(226,195,115,.22); box-shadow: 0 14px 24px rgba(0,0,0,.25); }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 9px 4px; font-size: 12px; }
  .primary-nav a.is-current::after { display: none; }
  .hero-layout { display: flex; min-height: 0; flex-direction: column; align-items: stretch; gap: 7px; padding-block: 52px 45px; }
  .hero-copy { width: 100%; max-width: none; }
  .eyebrow { font-size: 10px; }
  .hero h1 { font-size: clamp(47px, 12vw, 64px); }
  .hero-lede { max-width: 470px; margin-block: 14px 18px; font-size: 12px; }
  .hero-actions { gap: 18px; }
  .button-large { min-height: 44px; }
  .hero-note { margin-top: 19px; }
  .hero-instructor { gap: 11px; margin-top: 15px; padding: 7px 10px; }
  .hero-coach-orbit { width: 78px; }
  .hero-coach-orbit img { width: 62px; height: 62px; }
  .hero-coach-copy strong { font-size: 10px; }
  .hero-photo-copy { width: 28px; height: 28px; margin: -14px; }
  .hero-photo-copy--one { --copy-x: clamp(-58px,-16vw,-42px); --copy-y: clamp(190px,30vh,310px); }
  .hero-photo-copy--two { --copy-x: clamp(-85px,-23vw,-58px); --copy-y: clamp(220px,34vh,350px); }
  .hero-photo-copy--three { --copy-x: clamp(-110px,-30vw,-70px); --copy-y: clamp(150px,24vh,260px); }
  .hero-photo-copy--four { --copy-x: clamp(-138px,-37vw,-86px); --copy-y: clamp(165px,26vh,280px); }
  .hero-photo-copy--five { --copy-x: clamp(-64px,-17vw,-42px); --copy-y: clamp(275px,42vh,410px); }
  .hero-photo-copy--six { --copy-x: clamp(-96px,-26vw,-60px); --copy-y: clamp(300px,46vh,440px); }
  .hero-visual { min-height: 313px; margin-top: 4px; }
  .visual-art { inset: -16px -15px -20px; background-position: center, center, 66% 50%; mask-image: radial-gradient(ellipse at 61% 50%, black 34%, rgba(0,0,0,.84) 68%, transparent 99%); }
  .chart-card { width: min(100%, 460px); margin-top: 30px; padding: 13px 14px 10px; }
  .chart-summary strong { font-size: 18px; }
  .chart-summary span { font-size: 7px; }
  .chip-top { top: 1px; inset-inline-start: 1%; }
  .chip-bottom { bottom: 3px; inset-inline-end: 3%; }
  .visual-chip { padding: 7px 9px; }
  .metrics .shell { width: 100%; }
  .metric-grid { min-height: 92px; }
  .metric strong { font-size: 18px; }
  .metric span { max-width: 80px; font-size: 8px; }
  .section-pad { padding-block: 62px; }
  .section-heading { align-items: flex-start; margin-bottom: 22px; }
  .section-heading h2 { font-size: 31px; }
  .subtle-link { margin-top: 31px; font-size: 9px; white-space: nowrap; }
  .path-grid { grid-template-columns: 1fr; gap: 12px; }
  .path-card { min-height: 0; padding: 17px 18px 15px; }
  .card-kicker { margin-top: 12px; }
  .card-title { font-size: 19px; }
  .card-description { min-height: 0; max-width: 440px; }
  .card-bottom { margin-top: 10px; }
  .path-feedback { margin-bottom: -18px; }
  .method-section { padding-block: 26px 50px; }
  .method-panel { grid-template-columns: 1fr; gap: 0; padding: 29px 23px 30px; }
  .method-copy h2 { font-size: 31px; }
  .method-description { font-size: 10px; }
  .step-list { gap: 9px; }
  .method-emblem { min-height: 170px; grid-row: 1; margin-bottom: 11px; }
  .emblem-ring { width: 154px; }
  .emblem-star { font-size: 38px; }
  .emblem-caption { inset-inline-end: 15%; bottom: 0; }
  .emblem-orbit { inset-inline-start: 19%; top: 13%; }
  .risk-note { gap: 10px; margin-bottom: 48px; padding: 13px; }
  .risk-note p { font-size: 8px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 28px 18px; padding-block: 32px 27px; }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-action { justify-content: center; }
  .footer-bottom { align-items: flex-start; gap: 10px; font-size: 7px; }
}
@media (max-width: 360px) {
  .shell { width: calc(100% - 30px); }
  .nav-wrap { gap: 8px; }
  .brand { gap: 8px; }
  .nav-cta { padding-inline: 8px; }
  .section-heading { display: block; }
  .subtle-link { margin: 9px 0 0; }
  .hero-actions { gap: 12px; }
  .hero-instructor { gap: 8px; padding-inline: 7px; }
  .hero-coach-orbit { width: 68px; }
  .hero-coach-orbit img { width: 53px; height: 53px; }
  .hero-coach-copy strong { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Shared secondary-page system: ivory reading surfaces, restrained gold accents, ink headings. */
#app-root[hidden], [hidden] { display: none !important; }
.app-page { min-height: 66vh; padding: clamp(40px, 6vw, 78px) 0 clamp(55px, 7vw, 100px); color: var(--ink); background: var(--cream); }
.page-frame { width: min(var(--shell), calc(100% - 72px)); margin-inline: auto; }
.page-heading { margin: 0 0 27px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.page-heading .eyebrow { margin-bottom: 2px; }
.page-heading h1 { margin: 0; color: #211a12; font: 500 clamp(33px, 4vw, 48px)/1.3 var(--serif); letter-spacing: -.02em; }
.app-page h2, .app-page h3 { color: #211a12; font-family: var(--serif); font-weight: 600; line-height: 1.45; }
.app-page h2 { font-size: clamp(23px, 3vw, 32px); }
.app-page h3 { font-size: 19px; }
.page-loading { padding: 60px 20px; color: var(--ink-soft); text-align: center; }
.button-small { min-height: 34px; padding: 6px 11px; font-size: 10px; }
.button-full { width: 100%; min-height: 46px; }
.button:disabled, button:disabled { opacity: .56; cursor: not-allowed; transform: none; }
.service-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid #dfd6bf; border-radius: 9px; color: #655640; background: #fffdf7; }
.service-notice.is-warning { border-color: #ead6b7; color: #684c2e; background: #fff8ed; }
.notice-symbol { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 12px/1 Georgia, serif; }
.service-notice strong { display: block; margin-bottom: 2px; font-size: 11px; }
.service-notice p { margin: 0; font-size: 10px; line-height: 1.8; }
.empty-state, .compact-empty { padding: 27px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.empty-state { text-align: center; }
.empty-state > span { color: var(--gold-deep); font-size: 28px; }
.empty-state h2 { margin: 3px 0 8px; }
.empty-state p, .compact-empty p { color: var(--ink-soft); font-size: 12px; }
.empty-state .button { margin: 7px 4px 0; }
.compact-empty { padding: 18px 20px; color: #4a4032; }
.compact-empty strong { display: block; margin-bottom: 4px; }
.compact-empty .button { margin-top: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }

/* Form controls shared by authentication, profile and administration. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.form-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #514637; font-size: 11px; }
.form-field > span { font-weight: 700; }
.form-field input, .form-field select, .form-field textarea, .chat-compose textarea, .admin-form input, .admin-form select, .admin-form textarea {
  width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #ded6c9; border-radius: 7px; outline: none; color: #272118; background: #fffefa; font: 12px/1.7 var(--sans); transition: border-color .18s ease, box-shadow .18s ease;
}
.form-field textarea, .admin-form textarea { min-height: 88px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .chat-compose textarea:focus, .admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { border-color: #b99446; box-shadow: 0 0 0 3px rgba(203,165,76,.14); }
.form-field input:disabled { color: #82796b; background: #f1eee7; }
.form-field small, .form-field > small { color: #817768; font-size: 9px; line-height: 1.65; }
.form-field-wide { grid-column: 1 / -1; }
.check-field { display: inline-flex; align-items: center; gap: 9px; color: #635846; font-size: 11px; }
.check-field input { accent-color: var(--gold-deep); }
.form-message { margin: 10px 0; padding: 9px 11px; border-radius: 6px; font-size: 10px; }
.form-message[data-kind="success"] { color: #355844; background: #edf6ed; }
.form-message[data-kind="error"] { color: #8a3c34; background: #fff0ed; }
.form-message[data-kind="info"] { color: #625437; background: #f7f1e2; }
.form-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

/* Login, sign-up and password recovery. */
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr); align-items: stretch; gap: 22px; }
.auth-card { padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: 0 16px 42px rgba(46,35,18,.045); }
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.auth-brand > span:last-child { display: flex; flex-direction: column; direction: ltr; }
.auth-brand strong { color: #312518; font-size: 13px; letter-spacing: .2em; }
.auth-brand small { color: #8f7b4d; font-size: 9px; letter-spacing: .13em; }
.auth-form { display: grid; gap: 15px; }
.form-between { display: flex; justify-content: flex-start; margin-top: -6px; }
.form-between .text-link, .auth-switch { color: #84765b; font-size: 10px; }
.auth-switch { margin: 2px 0 0; text-align: center; }
.auth-switch .text-link { color: #987633; font-weight: 700; }
.auth-privacy { margin: 0; color: #8d8578; font-size: 9px; }
.auth-aside { position: relative; display: flex; min-height: 370px; flex-direction: column; justify-content: center; overflow: hidden; padding: 36px; border: 1px solid #312719; border-radius: 13px; color: #f5ecd9; background: radial-gradient(ellipse at 70% 55%, rgba(169,117,40,.21), transparent 52%), linear-gradient(145deg,#17120d,#100d0a); }
.auth-aside .eyebrow { color: var(--gold-bright); }
.auth-aside h2 { color: #f1e5cc; font-size: 34px; }
.auth-aside p:last-child { color: #b4a793; font-size: 12px; }
.auth-aside-mark { position: absolute; inset-inline-end: 28px; bottom: -38px; color: rgba(222,184,91,.12); font-size: 210px; line-height: 1; }
.auth-success { padding: 24px; border: 1px solid #dfd3b5; border-radius: 9px; color: #50432d; background: #fbf8ef; }
.auth-success strong { display: block; color: #47381e; }
.auth-success p { margin: 5px 0 15px; color: #786d5c; font-size: 11px; }
.auth-success.is-error { border-color: #e8c8bf; background: #fff3ef; }
.success-icon { display: block; color: #99803f; font-size: 25px; }

/* Catalog, course detail, lessons and assessment. */
.catalog-intro { max-width: 760px; margin: -9px 0 22px; color: #746a5c; font-size: 12px; }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.course-card { overflow: hidden; border: 1px solid #e4ddcf; border-radius: 11px; background: var(--paper); box-shadow: 0 8px 24px rgba(48,35,15,.035); }
.course-card-rich { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.course-card-rich:hover { transform: translateY(-3px); border-color: #c7a75b; box-shadow: 0 15px 35px rgba(48,35,15,.08); }
.course-cover { display: grid; height: 135px; place-items: center; overflow: hidden; border-bottom: 1px solid #eee7da; color: #b08d45; background: linear-gradient(140deg,#f9f6ef,#ece5d5); }
.course-cover img { width: 100%; height: 100%; object-fit: cover; }
.course-card-mark { font-size: 37px; text-shadow: 0 5px 22px rgba(175,134,52,.2); }
.course-card-copy { padding: 17px 18px 19px; }
.course-card h2, .course-card h3 { margin: 5px 0; color: #282116; font: 600 20px/1.45 var(--serif); }
.course-card p { min-height: 44px; margin: 7px 0 13px; color: #756d61; font-size: 10px; }
.course-level { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid #e9dec4; border-radius: 30px; color: #816936; background: #faf6eb; font-size: 9px; }
.course-detail-hero { position: relative; display: flex; min-height: 228px; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; padding: clamp(22px, 5vw, 45px); border: 1px solid #32271a; border-radius: 13px; color: #f1e9db; background: radial-gradient(ellipse at 82% 46%,rgba(207,164,74,.18),transparent 42%),linear-gradient(120deg,#17120d,#21170f 70%,#120e0b); }
.course-detail-hero > div:first-child { position: relative; z-index: 1; max-width: 740px; }
.course-detail-hero h2 { margin: 8px 0; color: #f6eddb; font-size: clamp(27px, 4vw, 40px); }
.course-detail-hero p:not(.eyebrow) { color: #bcb09c; font-size: 12px; }
.course-detail-hero .eyebrow { color: var(--gold-bright); }
.course-detail-symbol { display: grid; width: 110px; height: 110px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(225,195,118,.35); border-radius: 50%; color: var(--gold-bright); background: radial-gradient(circle,rgba(208,165,74,.16),transparent 72%); font-size: 43px; }
.enroll-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 17px; }
.enroll-form small { color: #bcb09c; font-size: 9px; }
.course-status { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; color: #e5d6aa; font-size: 11px; }
.course-description { max-width: 800px; padding: 25px 0 4px; color: #696052; font-size: 12px; }
.course-description h3 { margin: 0 0 6px; }
.course-description p { margin: 0 0 7px; }
.course-lessons-section, .course-quiz-section, .dashboard-section, .profile-section { margin-top: 34px; }
.section-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.section-title-row h2 { margin: 0; }
.section-title-row .eyebrow { margin-bottom: 1px; }
.progress-copy { color: #766a53; font-size: 10px; }
.lesson-list { display: grid; gap: 12px; }
.lesson-item { padding: 18px 20px; border: 1px solid #e4ddd1; border-radius: 10px; background: var(--paper); }
.lesson-item.is-completed { border-color: #c9d8c5; }
.lesson-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #8d8067; font-size: 9px; }
.lesson-index { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #e7dcc0; border-radius: 7px; color: #917438; font-size: 10px; direction: ltr; }
.lesson-item h3 { margin: 7px 0; }
.lesson-content { color: #645d51; font-size: 11px; }
.preview-badge, .status-pill { display: inline-flex; padding: 3px 8px; border: 1px solid #e6dec9; border-radius: 20px; color: #826d42; background: #faf7ef; font-size: 9px; }
.lesson-complete { margin-inline-start: 9px; padding: 8px 12px; border: 1px solid #d9cfb9; border-radius: 6px; color: #665737; background: transparent; font-size: 9px; cursor: pointer; }
.lesson-complete[aria-pressed="true"] { border-color: #c4d3c1; color: #45624c; background: #f0f6ef; }
.lesson-video { width: min(100%, 800px); margin: 15px 0; overflow: hidden; border-radius: 9px; background: #13100c; aspect-ratio: 16/9; }
.lesson-video iframe, .lesson-video video { display: block; width: 100%; height: 100%; border: 0; }
.lesson-video iframe { aspect-ratio: 16/9; }
.quiz-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.quiz-link-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.quiz-link-card span { color: #877348; font-size: 9px; }
.quiz-link-card strong { grid-column: 1; font-size: 12px; }
.quiz-link-card b { grid-column: 2; grid-row: 1/3; align-self: center; color: var(--gold-deep); }
.quiz-intro { max-width: 740px; margin-bottom: 22px; padding: 20px; border: 1px solid #e6dece; border-radius: 10px; background: #fffdf8; }
.quiz-intro h2 { margin: 5px 0; }
.quiz-intro p:not(.eyebrow) { color: #756b5b; font-size: 11px; }
.quiz-intro small { color: #877950; font-size: 9px; }
.quiz-form { display: grid; gap: 13px; }
.quiz-question { margin: 0; padding: 18px; border: 1px solid #e2dacc; border-radius: 9px; background: var(--paper); }
.quiz-question legend { width: 100%; padding: 0 0 12px; color: #30291f; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.quiz-question legend span { display: block; margin-bottom: 3px; color: #937b49; font: 9px/1.5 var(--sans); }
.quiz-options { display: grid; gap: 8px; }
.quiz-options label { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border: 1px solid #eee9df; border-radius: 7px; color: #5d554a; background: #fffefa; font-size: 11px; cursor: pointer; }
.quiz-options label:has(input:checked) { border-color: #c8a85e; background: #fcf7e9; }
.quiz-options input { margin-top: 5px; accent-color: var(--gold-deep); }
.quiz-result { padding: 17px; border: 1px solid #cfddc9; border-radius: 8px; color: #345640; background: #f2f8ef; }
.quiz-result p { margin: 3px 0 0; font-size: 11px; }

/* Instructor profile: image and name are the only portrait treatment outside the home hero. */
.instructor-layout { display: grid; gap: 28px; }
.instructor-hero { display: grid; grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr); align-items: center; gap: clamp(24px, 5vw, 64px); padding: clamp(20px, 4vw, 40px); border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.instructor-portrait { display: flex; flex-direction: column; align-items: center; margin: 0; }
.portrait-frame { position: relative; display: grid; width: min(100%, 270px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(190,151,69,.44); border-radius: 50%; background: radial-gradient(circle,#f8f2e4,#e8dfcd 73%); }
.instructor-avatar-img { width: 88%; height: 88%; border: 3px solid #fffdf8; border-radius: 50%; object-fit: cover; object-position: center 35%; box-shadow: 0 12px 35px rgba(61,47,22,.17); }
.portrait-ring { position: absolute; inset: 7px; border: 1px solid rgba(167,131,56,.45); border-radius: 50%; pointer-events: none; }
.instructor-portrait figcaption { margin-top: 13px; color: #5f4c28; font: 600 13px/1.4 var(--sans); letter-spacing: .09em; direction: ltr; }
.instructor-intro h2 { max-width: 620px; margin: 5px 0 12px; font-size: clamp(27px, 3.4vw, 40px); }
.instructor-bio { max-width: 650px; margin-bottom: 18px; color: #6c6458; font-size: 12px; line-height: 2; }
.whatsapp-number { margin: 6px 0 0; color: #85785e; font: 10px/1.4 var(--sans); direction: ltr; text-align: right; }
.skill-list { display: flex; flex-wrap: wrap; gap: 9px; }
.skill-chip { padding: 7px 12px; border: 1px solid #e4dac3; border-radius: 30px; color: #6b5830; background: #fbf7ec; font-size: 10px; }
.profile-columns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.profile-section { padding: 21px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.profile-section h2 { margin: 3px 0 14px; font-size: 24px; }
.profile-bullets { display: grid; gap: 10px; margin: 0; padding-inline-start: 18px; color: #655d51; font-size: 11px; }
.profile-bullets li::marker { color: #b48d40; }
.profile-edit, .account-edit, .admin-form { padding: 20px; border: 1px solid #e5ddcf; border-radius: 10px; background: #fffdf9; }
.profile-edit h3, .account-edit h2, .admin-form h3 { margin: 0 0 16px; }
.profile-edit .form-grid { margin-bottom: 14px; }

/* Student workspace and progress. */
.dashboard-welcome, .admin-welcome, .developer-welcome { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; border: 1px solid #dfd6c6; border-radius: 11px; background: var(--paper); }
.dashboard-welcome h2, .admin-welcome h2, .developer-welcome h2 { margin: 3px 0; }
.dashboard-welcome p:not(.eyebrow), .admin-welcome p:not(.eyebrow), .developer-welcome p:not(.eyebrow) { margin: 0; color: #777063; font-size: 11px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin: 18px 0; }
.dashboard-metrics > article { display: flex; min-height: 96px; flex-direction: column; justify-content: center; gap: 4px; padding: 15px; border: 1px solid #e6dece; border-radius: 9px; background: #fffdf8; }
.dashboard-metrics article span { color: #807664; font-size: 9px; }
.dashboard-metrics article strong { color: #82672f; font: 600 23px/1.2 var(--sans); }
.dashboard-metrics article strong small { color: #a39a8c; font-size: 11px; }
.student-course-list, .suggestion-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.student-course-card, .suggestion-card { padding: 17px; border: 1px solid #e4ddd1; border-radius: 9px; background: var(--paper); }
.student-course-top, .progress-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.course-status-text { color: #748262; font-size: 9px; }
.student-course-card h3, .suggestion-card h3 { margin: 8px 0 4px; }
.student-course-card p, .suggestion-card p { min-height: 37px; color: #746b5d; font-size: 10px; }
.progress-line { height: 5px; overflow: hidden; border-radius: 8px; background: #eee9df; }
.progress-line span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#b89445,#ddc26e); }
.progress-meta { margin: 6px 0 8px; color: #8c816d; font-size: 9px; }
.progress-meta strong { color: #77602f; }
.dashboard-tools { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; margin: 26px 0; }
.dashboard-tools a { display: flex; min-height: 112px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 16px; border: 1px solid #e2d9c8; border-radius: 9px; color: #41351f; background: #fffdf8; transition: border-color .2s ease, transform .2s ease; }
.dashboard-tools a:hover { transform: translateY(-2px); border-color: #c8a85b; }
.dashboard-tools a > span { color: #a9853d; font-size: 18px; }
.dashboard-tools a strong { font-size: 11px; }
.dashboard-tools a small { color: #7c7365; font-size: 9px; }
.account-edit { margin-top: 22px; }
.account-edit h2 { font-size: 22px; }
.account-edit .form-grid { margin-bottom: 12px; }

/* Learning assistant, separated from the instructor/course imagery. */
.assistant-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 22px 25px; border: 1px solid #2e261b; border-radius: 11px; color: #efe7d9; background: radial-gradient(ellipse at 80% 40%,rgba(202,164,72,.15),transparent 40%),linear-gradient(120deg,#18130e,#21180f); }
.assistant-intro h2 { margin: 4px 0; color: #f5ead4; }
.assistant-intro .eyebrow { color: var(--gold-bright); }
.assistant-intro p:not(.eyebrow) { max-width: 730px; margin: 0; color: #b9ad98; font-size: 11px; }
.assistant-light { display: grid; width: 75px; height: 75px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(220,189,107,.45); border-radius: 50%; color: #e8cc78; background: radial-gradient(circle,rgba(207,164,72,.17),transparent 68%); font-size: 31px; }
.assistant-overview { padding: 24px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.assistant-overview > p { max-width: 620px; color: #6f6658; font-size: 12px; }
.assistant-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; }
.assistant-topics span { padding: 5px 10px; border: 1px solid #e6dcc6; border-radius: 30px; color: #7d693b; font-size: 9px; }
.assistant-workspace { display: grid; min-height: 520px; grid-template-columns: 230px minmax(0,1fr); overflow: hidden; border: 1px solid #e2dbcf; border-radius: 11px; background: var(--paper); }
.chat-history { padding: 16px 13px; border-inline-end: 1px solid #e8e1d6; background: #faf8f3; }
.chat-history-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #e8e1d6; }
.chat-history-title h3 { margin: 0; font-size: 16px; }
.chat-history-title .text-link { padding: 0; border: 0; background: transparent; cursor: pointer; }
.conversation-list { display: grid; gap: 6px; margin-top: 10px; }
.conversation-item { display: flex; flex-direction: column; gap: 3px; padding: 9px; border: 1px solid transparent; border-radius: 6px; color: #564a37; background: transparent; text-align: right; font-size: 10px; cursor: pointer; }
.conversation-item:hover { border-color: #e4dac6; background: #fffefa; }
.conversation-item small, .conversation-empty { color: #908573; font-size: 8px; }
.chat-panel { display: flex; min-width: 0; flex-direction: column; }
.chat-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; padding: 13px 15px; border-bottom: 1px solid #ece5da; }
.chat-controls .form-field { gap: 3px; font-size: 9px; }
.chat-controls select { min-height: 35px; padding: 6px 8px; font-size: 10px; }
.chat-stream { display: flex; min-height: 300px; max-height: 520px; flex: 1; flex-direction: column; gap: 14px; overflow-y: auto; padding: 20px; }
.chat-welcome { display: flex; min-height: 260px; flex-direction: column; align-items: center; justify-content: center; color: #7a6d51; text-align: center; }
.chat-welcome > span { color: #b59146; font-size: 27px; }
.chat-welcome h3 { margin: 4px 0; }
.chat-welcome p { color: #867d70; font-size: 10px; }
.prompt-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.prompt-suggestions button { padding: 7px 10px; border: 1px solid #e6decf; border-radius: 20px; color: #75643d; background: #fffdf8; font-size: 9px; cursor: pointer; }
.prompt-suggestions button:hover { border-color: #c7a75b; }
.chat-message { display: flex; align-items: flex-start; gap: 9px; max-width: 94%; }
.chat-message.from-student { align-self: flex-start; }
.chat-message.from-assistant { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border: 1px solid #e5d9bb; border-radius: 50%; color: #91743a; background: #faf6e9; font-size: 10px; }
.chat-message > div { padding: 9px 12px; border: 1px solid #eee8dc; border-radius: 9px; background: #fffefa; }
.chat-message.from-assistant > div { border-color: #e7dfcc; background: #faf7ef; }
.chat-message small { color: #95856a; font-size: 8px; }
.chat-message p { margin: 3px 0 0; color: #4e473d; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }
.assistant-typing { align-self: flex-end; color: #927943; font-size: 10px; }
.chat-compose { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 13px; border-top: 1px solid #ece5da; }
.chat-compose textarea { min-height: 62px; max-height: 140px; resize: vertical; }
.chat-compose .button { align-self: end; min-height: 43px; }
.chat-compose small { grid-column: 1/-1; color: #8b816f; font-size: 8px; }

/* Role-based administration and developer workspace. */
.admin-tabs { display: flex; gap: 6px; margin: 18px 0 12px; overflow-x: auto; padding-bottom: 3px; }
.admin-tabs button { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #ded7ca; border-radius: 20px; color: #6b6255; background: #fffdf8; font-size: 9px; cursor: pointer; }
.admin-tabs button.is-active { border-color: #b8964c; color: #5a4520; background: #f8f0dd; }
.admin-tab-panels { display: grid; gap: 14px; }
.admin-panel { padding: 18px; border: 1px solid #e2dbcf; border-radius: 10px; background: var(--paper); }
.admin-panel-content { margin-bottom: 18px; padding: 20px; border: 1px solid #e2dbcf; border-radius: 10px; background: var(--paper); }
.admin-panel-content:last-child { margin-bottom: 0; }
.admin-panel-content > .section-title-row { margin-bottom: 14px; }
.admin-form { margin-top: 17px; }
.admin-form .form-grid { margin-bottom: 14px; }
.admin-overview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.admin-overview-grid a { display: flex; min-height: 76px; flex-direction: column; justify-content: center; gap: 3px; padding: 12px; border: 1px solid #e6dece; border-radius: 8px; background: #fffdf8; }
.admin-overview-grid strong { color: #574724; font-size: 10px; }
.admin-overview-grid span, .admin-footnote { color: #82796c; font-size: 9px; }
.admin-footnote { margin: 14px 0 0; line-height: 1.8; }
.data-table { width: 100%; border-collapse: collapse; text-align: right; }
.table-scroll { width: 100%; overflow-x: auto; margin: 12px 0; border: 1px solid #ebe5dc; border-radius: 8px; background: #fffefa; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid #eee9e0; font-size: 9px; vertical-align: middle; }
.data-table th { color: #766746; background: #faf7ef; white-space: nowrap; }
.data-table td { color: #5c5449; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { color: #8c8376; font-size: 8px; }
.data-table select { min-width: 90px; padding: 5px; border: 1px solid #e2dacc; border-radius: 5px; color: #514532; background: #fffefa; font-size: 9px; }
.data-table code { color: #867047; font-size: 8px; }
.status-pill.is-live { border-color: #cbdac8; color: #537052; background: #f1f7ef; }
.status-pill.is-pending { border-color: #e8d8aa; color: #836d38; background: #fbf6e8; }
.developer-welcome { margin-bottom: 18px; border-color: #decf9f; background: linear-gradient(120deg,#fffdf8,#f6f0df); }
.developer-page .admin-panel-content { margin-bottom: 16px; }
.developer-privacy-note { padding: 14px 17px; border-inline-start: 3px solid #c1a25d; color: #65573a; background: #f6f0e1; }
.developer-privacy-note strong { font-size: 10px; }
.developer-privacy-note p { margin: 3px 0 0; color: #80735b; font-size: 9px; }

@media (max-width: 900px) {
  .page-frame { width: min(var(--shell), calc(100% - 48px)); }
  .primary-nav { gap: 12px; }
  .primary-nav a { font-size: 10px; }
  .course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .assistant-workspace { grid-template-columns: 190px minmax(0,1fr); }
}
@media (max-width: 680px) {
  .page-frame { width: calc(100% - 38px); }
  .app-page { padding-block: 31px 58px; }
  .page-heading { margin-bottom: 19px; }
  .page-heading h1 { font-size: 32px; }
  .form-grid, .profile-columns, .auth-layout, .instructor-hero, .assistant-workspace { grid-template-columns: 1fr; }
  .form-field-wide { grid-column: auto; }
  .auth-layout { gap: 13px; }
  .auth-aside { min-height: 210px; padding: 23px; }
  .auth-aside-mark { inset-inline-end: 10px; bottom: -80px; font-size: 160px; }
  .auth-card { padding: 20px; }
  .course-grid, .quiz-links, .student-course-list, .suggestion-grid, .admin-overview-grid { grid-template-columns: 1fr; }
  .course-cover { height: 110px; }
  .course-detail-hero { min-height: 190px; padding: 20px; }
  .course-detail-symbol { width: 62px; height: 62px; font-size: 27px; }
  .lesson-item { padding: 14px; }
  .instructor-hero { text-align: center; }
  .instructor-portrait { grid-row: 1; }
  .portrait-frame { width: min(62vw,235px); }
  .instructor-intro .eyebrow { justify-content: center; }
  .instructor-intro .button { margin-inline: auto; }
  .whatsapp-number { text-align: center; }
  .profile-section { padding: 17px; }
  .dashboard-welcome, .admin-welcome, .developer-welcome { align-items: flex-start; }
  .dashboard-welcome { flex-direction: column; }
  .dashboard-metrics { gap: 8px; }
  .dashboard-metrics > article { min-height: 79px; padding: 11px; }
  .dashboard-metrics article strong { font-size: 20px; }
  .dashboard-tools { grid-template-columns: 1fr; }
  .dashboard-tools a { min-height: 88px; }
  .assistant-intro { padding: 18px; }
  .assistant-light { width: 52px; height: 52px; font-size: 22px; }
  .assistant-workspace { min-height: 0; }
  .chat-history { border-inline-end: 0; border-bottom: 1px solid #e8e1d6; }
  .conversation-list { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 150px; overflow-y: auto; }
  .chat-controls { grid-template-columns: 1fr; }
  .chat-stream { min-height: 260px; max-height: 440px; padding: 13px; }
  .chat-compose { grid-template-columns: minmax(0,1fr); }
  .chat-compose .button { justify-self: start; }
  .admin-panel { padding: 12px; }
  .admin-panel-content, .admin-form { padding: 14px; }
  .admin-welcome, .developer-welcome { flex-direction: column; }
  .table-scroll { margin-inline: -1px; }
  .data-table th, .data-table td { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .course-card-rich, .dashboard-tools a { transition: none; }
  .hero-orbit-track, .hero-coach-orbit::before, .hero-coach-orbit::after, .hero-burst-shard, .hero-burst-particle, .hero-photo-copy, .hero-photo-copy__img { animation: none !important; }
  .hero-coach-orbit::before, .hero-coach-orbit::after, .hero-burst-shard, .hero-burst-particle, .hero-photo-copy { display: none !important; }
}