/* ============================================================
   VEDIC CHORDS
   Palette from Tanjore / Kerala mural pigments: vermilion (from
   the logo), turmeric ochre, indigo ink, malachite, lime plaster.
   ============================================================ */
:root{
  --paper:#FAF8F5; --surface:#FFFFFF; --surface-2:#F4F2ED; --surface-3:#EBE8E1;
  --ink:#171A2B; --ink-2:#4C5169; --ink-3:#7A7F96;
  --line:#E4E1DA; --line-2:#D2CEC5;
  --vermilion:#E23E17; --vermilion-ink:#B22F0F; --vermilion-soft:#FCEBE5; --vermilion-line:#F4C4B4;
  --ochre:#B27C22; --ochre-ink:#8A5E14; --ochre-soft:#FAF1DD; --ochre-line:#E9D2A4;
  --malachite:#1F6F5C; --malachite-ink:#175646; --malachite-soft:#E3F0EB; --malachite-line:#A9D3C7;
  --crimson:#A31621; --crimson-soft:#FAE8E9; --crimson-line:#EDBCC0;
  --indigo:#2E3A6E; --indigo-soft:#ECEEF7; --indigo-line:#C3CAE6;
  --shadow-sm:0 1px 2px rgba(23,26,43,.06), 0 1px 3px rgba(23,26,43,.04);
  --shadow:0 2px 4px rgba(23,26,43,.04), 0 8px 24px rgba(23,26,43,.07);
  --shadow-lg:0 4px 8px rgba(23,26,43,.05), 0 24px 56px rgba(23,26,43,.12);
  --ring:0 0 0 3px rgba(226,62,23,.28);
  --hero-ground:#12162A; --hero-ink:#F4F1EB; --hero-ink-2:#A9AFC6;

  --f-display:"Playfair Display","Iowan Old Style",Georgia,serif;
  --f-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r-xs:5px; --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --shell:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0E1120; --surface:#161A2B; --surface-2:#1D2236; --surface-3:#262C44;
    --ink:#EEEBE5; --ink-2:#AAB0C6; --ink-3:#7C8299;
    --line:#272E48; --line-2:#3A4265;
    --vermilion:#FF6B41; --vermilion-ink:#FF8F6B; --vermilion-soft:#2C1611; --vermilion-line:#5C2A18;
    --ochre:#E0A94D; --ochre-ink:#EDBE72; --ochre-soft:#2A2013; --ochre-line:#59431C;
    --malachite:#4FBFA0; --malachite-ink:#77D3BA; --malachite-soft:#0F241E; --malachite-line:#255045;
    --crimson:#F2707F; --crimson-soft:#2B1218; --crimson-line:#5B242E;
    --indigo:#8B99D8; --indigo-soft:#1A2038; --indigo-line:#333D66;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
    --shadow-lg:0 8px 16px rgba(0,0,0,.4), 0 32px 64px rgba(0,0,0,.5);
    --ring:0 0 0 3px rgba(255,107,65,.35);
    --hero-ground:#080B15; --hero-ink:#EFECE6; --hero-ink-2:#99A0B8;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1120; --surface:#161A2B; --surface-2:#1D2236; --surface-3:#262C44;
  --ink:#EEEBE5; --ink-2:#AAB0C6; --ink-3:#7C8299;
  --line:#272E48; --line-2:#3A4265;
  --vermilion:#FF6B41; --vermilion-ink:#FF8F6B; --vermilion-soft:#2C1611; --vermilion-line:#5C2A18;
  --ochre:#E0A94D; --ochre-ink:#EDBE72; --ochre-soft:#2A2013; --ochre-line:#59431C;
  --malachite:#4FBFA0; --malachite-ink:#77D3BA; --malachite-soft:#0F241E; --malachite-line:#255045;
  --crimson:#F2707F; --crimson-soft:#2B1218; --crimson-line:#5B242E;
  --indigo:#8B99D8; --indigo-soft:#1A2038; --indigo-line:#333D66;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.4);
  --shadow-lg:0 8px 16px rgba(0,0,0,.4), 0 32px 64px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(255,107,65,.35);
  --hero-ground:#080B15; --hero-ink:#EFECE6; --hero-ink-2:#99A0B8;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; font-weight:600; text-wrap:balance; line-height:1.15}
h1{font-family:var(--f-display); font-weight:500; font-size:clamp(38px,5.4vw,68px); letter-spacing:-.015em}
h2{font-family:var(--f-display); font-weight:500; font-size:clamp(27px,3.2vw,40px); letter-spacing:-.01em}
h3{font-size:19px; letter-spacing:-.005em}
h4{font-size:15px}
p{margin:0}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-xs)}
svg{display:block}
hr{border:none; border-top:1px solid var(--line); margin:0}
table{border-collapse:collapse; width:100%}

/* ---------- type utilities ---------- */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow-accent{color:var(--vermilion)}
.lede{font-size:clamp(16px,1.5vw,19px); line-height:1.65; color:var(--ink-2); max-width:62ch}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.small{font-size:13px}
.xs{font-size:12px}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.swara{font-family:var(--f-mono); letter-spacing:.08em; font-weight:500}
.serif{font-family:var(--f-display)}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:24px}.gap-6{gap:32px}.gap-7{gap:48px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:24px}.mt-6{margin-top:32px}.mt-7{margin-top:48px}
.hide{display:none !important}

/* ---------- brand mark ---------- */
.mark{width:auto; color:var(--vermilion); flex:none}
.wordmark{display:flex; align-items:center; gap:11px}
.wordmark .wm-text{display:flex; flex-direction:column; line-height:1}
.wordmark .wm-name{font-family:var(--f-display); font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.wordmark .wm-name em{font-style:normal; color:var(--vermilion)}
.wordmark .wm-tag{
  font-size:8px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3);
  margin-top:4px; font-weight:500;
}
.wordmark.lg .mark{height:56px} .wordmark.lg .wm-name{font-size:30px} .wordmark.lg .wm-tag{font-size:9px}
.wordmark.md .mark{height:38px} .wordmark.md .wm-name{font-size:21px}
.wordmark.sm .mark{height:30px} .wordmark.sm .wm-name{font-size:17px} .wordmark.sm .wm-tag{font-size:7px; letter-spacing:.26em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; letter-spacing:.005em;
  border:1px solid transparent; transition:.16s var(--ease);
  transition-property:background-color,border-color,color,transform,box-shadow;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--vermilion); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--vermilion-ink); box-shadow:var(--shadow)}
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary{color:#1A0C06}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-primary{color:#fff}}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:var(--surface)}
.btn-ghost:hover{border-color:var(--ink-3); background:var(--surface-2)}
.btn-quiet{color:var(--ink-2)}
.btn-quiet:hover{color:var(--ink); background:var(--surface-2)}
.btn-sm{height:32px; padding:0 13px; font-size:13px}
.btn-xs{height:27px; padding:0 10px; font-size:12px; border-radius:var(--r-sm)}
.btn-lg{height:48px; padding:0 26px; font-size:15px}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-join{background:var(--malachite); color:#fff}
.btn-join:hover{background:var(--malachite-ink)}
:root[data-theme="dark"] .btn-join{color:#08130F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-join{color:#08130F}}

/* ---------- pills / chips ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px;
  border-radius:var(--r-pill); font-size:11.5px; font-weight:600;
  letter-spacing:.03em; border:1px solid transparent; white-space:nowrap;
}
.pill-paid{background:var(--malachite-soft); color:var(--malachite); border-color:var(--malachite-line)}
.pill-due{background:var(--ochre-soft); color:var(--ochre); border-color:var(--ochre-line)}
.pill-over{background:var(--crimson-soft); color:var(--crimson); border-color:var(--crimson-line)}
.pill-live{background:var(--vermilion-soft); color:var(--vermilion); border-color:var(--vermilion-line)}
.pill-neutral{background:var(--surface-2); color:var(--ink-2); border-color:var(--line)}
.pill-info{background:var(--indigo-soft); color:var(--indigo); border-color:var(--indigo-line)}
.dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.dot-live{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- cards & surfaces ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--shadow-sm);
}
.card-flat{box-shadow:none}
.card-pad-0{padding:0; overflow:hidden}
.card-hd{padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px}
.card-bd{padding:20px}
.card-ft{padding:14px 20px; border-top:1px solid var(--line); background:var(--surface-2)}
.link-card{display:block; transition:.18s var(--ease); transition-property:transform,box-shadow,border-color}
.link-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-2)}

/* ---------- swara level badge (Sa Ri Ga Ma Pa Dha Ni) ---------- */
.swara-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex:none;
  font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.02em;
  border:1.5px solid currentColor;
}
.sw-1{color:var(--malachite)} .sw-2{color:var(--malachite)}
.sw-3{color:var(--indigo)}    .sw-4{color:var(--indigo)}
.sw-5{color:var(--ochre)}     .sw-6{color:var(--ochre)}
.sw-7{color:var(--vermilion)}

/* ---------- tala progress (rhythm-cycle meter) ---------- */
.tala{display:inline-flex; align-items:center; gap:5px}
.tala i{
  width:7px; height:7px; border-radius:50%; display:block;
  background:var(--line-2); transition:background .3s var(--ease);
}
.tala i.on{background:var(--vermilion)}
.tala i.sam{width:9px; height:9px; box-shadow:0 0 0 2px var(--vermilion-soft)}
.bar{height:5px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden}
.bar span{display:block; height:100%; border-radius:var(--r-pill); background:var(--vermilion); transition:width .5s var(--ease)}
.bar.ok span{background:var(--malachite)}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.label{font-size:12.5px; font-weight:600; color:var(--ink-2); letter-spacing:.01em}
.input,.select,.textarea{
  height:40px; padding:0 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font-size:14px; width:100%; transition:border-color .15s, box-shadow .15s;
}
.textarea{height:auto; padding:10px 12px; min-height:88px; resize:vertical; line-height:1.55}
.input:focus,.select:focus,.textarea:focus{border-color:var(--vermilion); box-shadow:var(--ring); outline:none}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.select{appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' stroke='%237A7F96' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; gap:2px}
.seg button{
  height:28px; padding:0 14px; border-radius:var(--r-pill); font-size:13px;
  font-weight:500; color:var(--ink-2); transition:.15s var(--ease);
}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}

/* ---------- tables ---------- */
.tbl{font-size:14px}
.tbl th{
  text-align:left; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- misc ---------- */
.avatar{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:13px; font-weight:600; color:#fff; letter-spacing:.01em; background:var(--indigo);
}
.avatar.a1{background:#2E3A6E} .avatar.a2{background:#1F6F5C} .avatar.a3{background:#B27C22}
.avatar.a4{background:#8C3B7A} .avatar.a5{background:#C0532A} .avatar.a6{background:#3A6E8C}
.avatar.sm{width:28px;height:28px;font-size:11px}
.avatar.lg{width:52px;height:52px;font-size:18px}
.divider{height:1px; background:var(--line)}
.rule-ornament{display:flex; align-items:center; gap:14px; color:var(--line-2)}
.rule-ornament::before,.rule-ornament::after{content:""; flex:1; height:1px; background:var(--line)}
.skel{background:var(--surface-2); border-radius:var(--r-sm)}
.toast-wrap{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{
  background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:500; box-shadow:var(--shadow-lg);
  animation:toastIn .35s var(--ease);
}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}


/* ============================================================
   PUBLIC SITE
   ============================================================ */
.shell{max-width:var(--shell); margin:0 auto; padding:0 28px}
.shell-narrow{max-width:820px; margin:0 auto; padding:0 28px}

.topbar{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(14px); border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar-in{display:flex; align-items:center; gap:28px; height:72px}
.nav{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav a{font-size:14px; color:var(--ink-2); transition:color .15s; position:relative; padding:4px 0}
.nav a:hover,.nav a.active{color:var(--ink)}
.nav a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--vermilion)}
.nav-actions{display:flex; align-items:center; gap:10px}
.burger{display:none}

/* hero */
.hero{position:relative; background:var(--hero-ground); color:var(--hero-ink); overflow:hidden}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.85}
.hero-veil{position:absolute; inset:0; background:
  radial-gradient(120% 90% at 78% 18%, rgba(226,62,23,.20), transparent 58%),
  radial-gradient(90% 70% at 8% 90%, rgba(46,58,110,.55), transparent 60%),
  linear-gradient(180deg, rgba(14,17,32,.42) 0%, rgba(14,17,32,.80) 78%, var(--paper) 100%);
}
.hero-in{position:relative; padding-top:96px; padding-bottom:108px; max-width:760px}
.hero h1{color:var(--hero-ink); font-size:clamp(42px,6.2vw,78px); line-height:1.04; font-weight:400}
.hero h1 em{font-style:italic; color:var(--vermilion); font-weight:500}
/* "or" is a connector, not content — the two note names are what the line is
   about. Sized down and dimmed so Sa and Do read as a pair, with a small
   optical lift because a short word sits low beside much larger letterforms. */
.hero h1 .conj{
  font-size:.42em; font-style:italic; font-weight:400;
  color:var(--hero-ink-2); vertical-align:.14em; padding:0 .04em;
}
/* The full stop scales down with it. A period sits on the baseline, so unlike
   the connector it needs no optical lift — only the size. */
.hero h1 .stop{font-size:.5em}
.hero .lede{color:var(--hero-ink-2); font-size:clamp(16px,1.6vw,20px); max-width:56ch}
.hero .eyebrow{color:#E9B9A6}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
.hero .btn-ghost{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.24); color:var(--hero-ink)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4)}
.hero-facts{display:flex; gap:38px; flex-wrap:wrap; margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14)}
.hero-fact .k{font-family:var(--f-display); font-size:30px; color:var(--hero-ink); line-height:1}
.hero-fact .v{font-size:12px; color:var(--hero-ink-2); margin-top:6px; letter-spacing:.05em; text-transform:uppercase}

/* section rhythm */
.sec{padding:86px 0}
.sec-tight{padding:56px 0}
.sec-alt{background:var(--surface-2)}
.sec-head{max-width:660px; margin-bottom:44px}
.sec-head h2{margin-top:12px}
.sec-head .lede{margin-top:14px}

/* discipline cards */
.disciplines{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.disc{
  position:relative; border:1px solid var(--line); border-radius:var(--r-xl); padding:28px 26px 26px;
  background:var(--surface); overflow:hidden; transition:.25s var(--ease);
  transition-property:transform,box-shadow,border-color;
}
.disc:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2)}
.disc::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent, var(--vermilion))}
.disc .glyph{font-family:var(--f-display); font-size:15px; color:var(--accent); letter-spacing:.02em}
.disc h3{margin-top:16px; font-size:22px; font-family:var(--f-display); font-weight:500}
.disc p{margin-top:10px; font-size:14px; color:var(--ink-2); line-height:1.6}
.disc .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
/* Each card carries a footnote below it, in the same register as the one under
   the swara ladder: a quiet, factual clarification rather than more selling.
   Subgrid is what keeps this honest — the cards share one row track and the
   notes share another, so cards stay level however long a note runs. Wrapping
   them in a plain flex column instead made the cards uneven, because each
   wrapper absorbed its own note's height. */
.disciplines{grid-template-rows:auto auto}
.disc-cell{display:grid; grid-row:span 2; grid-template-rows:subgrid}
.disc-note{padding:0 4px; line-height:1.55; margin:0}
.tag{font-size:11.5px; padding:3px 9px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line)}

/* the swara ladder — real level structure, used as the site's spine */
.ladder{display:grid; grid-template-columns:repeat(7,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.rung{padding:20px 16px; border-right:1px solid var(--line); position:relative; transition:background .2s}
.rung:last-child{border-right:none}
.rung:hover{background:var(--surface-2)}
.rung .n{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); letter-spacing:.1em}
.rung .s{font-family:var(--f-display); font-size:27px; margin-top:8px; line-height:1}
.rung .t{font-size:12px; color:var(--ink-2); margin-top:8px; line-height:1.45}
.rung .h{position:absolute; left:0; right:0; top:0; height:3px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.step{background:var(--surface); padding:24px 22px}
.step .n{font-family:var(--f-mono); font-size:12px; color:var(--vermilion); font-weight:600}
.step h4{margin-top:10px; font-size:15.5px}
.step p{margin-top:7px; font-size:13.5px; color:var(--ink-2); line-height:1.55}

/* teacher */
.teacher{display:grid; grid-template-columns:300px 1fr; gap:52px; align-items:start}
.portrait{
  aspect-ratio:3/4; border-radius:var(--r-xl); position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--indigo) 0%, #1B2140 55%, var(--vermilion-ink) 140%);
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.portrait .initials{font-family:var(--f-display); font-size:76px; color:rgba(255,255,255,.9)}
/* The supplied portrait is a studio shot on a plain backdrop. object-fit keeps
   the 3:4 frame whatever the source ratio, so swapping the photo later needs no
   CSS change. */
.portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.portrait .cap{position:absolute; left:0; right:0; bottom:0; padding:18px; background:linear-gradient(transparent, rgba(0,0,0,.6)); color:#fff}
.quote{font-family:var(--f-display); font-style:italic; font-size:clamp(20px,2.4vw,28px); line-height:1.45; color:var(--ink)}

/* pricing */
/* Cards share a row track and the feature list absorbs the slack, so the three
   stay the same height and the buttons line up even when one plan gains or
   loses a feature. Equalising by hand-matching bullet counts breaks the next
   time the copy changes. */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plan{
  display:flex; flex-direction:column; position:relative;
  border:1px solid var(--line); border-radius:var(--r-xl);
  background:var(--surface); padding:28px 26px;
}
.plan ul{flex:1}
.plan.featured{border-color:var(--vermilion); box-shadow:var(--shadow)}
.plan .badge{position:absolute; top:-11px; left:26px; background:var(--vermilion); color:#fff; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:3px 11px; border-radius:var(--r-pill)}
:root[data-theme="dark"] .plan .badge{color:#1A0C06}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plan .badge{color:#1A0C06}}
.plan .price{font-family:var(--f-display); font-size:44px; line-height:1; margin-top:14px; font-variant-numeric:tabular-nums}
/* "per month" shares the price's baseline but not its scale or its face: the
   figure is the display element, the unit is UI text sitting beside it. */
.plan .price .cadence{
  font-family:var(--f-sans); font-size:16px; font-weight:500;
  color:var(--ink-2); letter-spacing:0; margin-left:7px;
}
/* Class length, picked out under the price. align-self stops it stretching to
   the card width, since .plan is a flex column. */
.plan .duration{
  align-self:flex-start; margin-top:13px;
  padding:4px 11px; border-radius:var(--r-pill);
  background:var(--vermilion-soft); color:var(--vermilion-ink);
  border:1px solid var(--vermilion-line);
  font-size:12.5px; font-weight:600; letter-spacing:.01em;
}
.plan .per{font-size:13px; color:var(--ink-3); margin-top:8px}
.plan ul{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:11px}
.plan li{font-size:14px; color:var(--ink-2); display:flex; gap:10px; line-height:1.5}
.plan li::before{content:"—"; color:var(--vermilion); flex:none; font-family:var(--f-mono)}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:20px 0; cursor:pointer; list-style:none; display:flex; align-items:center; gap:16px;
  font-size:16px; font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; color:var(--vermilion); font-size:22px; font-weight:300; transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 0 22px; color:var(--ink-2); font-size:14.5px; line-height:1.65; max-width:72ch}

/* footer */
.footer{background:var(--hero-ground); color:var(--hero-ink-2); padding:64px 0 32px; margin-top:0}
.footer h4{color:var(--hero-ink); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px}
.footer a{display:block; font-size:14px; padding:5px 0; color:var(--hero-ink-2); transition:color .15s}
.footer a:hover{color:var(--vermilion)}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:44px}
.footer .wm-name{color:var(--hero-ink)} .footer .wm-tag{color:var(--hero-ink-2)}
.footer-base{margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; gap:20px; flex-wrap:wrap; font-size:13px}

/* catalog */
.catalog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.course-card{display:flex; flex-direction:column; gap:14px; padding:22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
.course-card .top{display:flex; align-items:flex-start; gap:12px}
.course-card h3{font-size:17px; line-height:1.3}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 0 26px; border-bottom:1px solid var(--line); margin-bottom:26px}
.chip{
  height:32px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--line-2);
  font-size:13px; color:var(--ink-2); background:var(--surface); transition:.15s var(--ease);
}
.chip:hover{border-color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* syllabus list */
.syllabus{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.syl-row{display:flex; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); align-items:flex-start}
.syl-row:last-child{border-bottom:none}
.syl-n{font-family:var(--f-mono); font-size:12px; color:var(--ink-3); width:26px; flex:none; padding-top:2px}
.check{
  width:19px; height:19px; border-radius:50%; border:1.5px solid var(--line-2); flex:none; margin-top:2px;
  display:grid; place-items:center; transition:.18s var(--ease); cursor:pointer;
}
.check.done{background:var(--malachite); border-color:var(--malachite)}
.check.done svg{color:#fff}
.check svg{opacity:0; width:11px; height:11px}
.check.done svg{opacity:1}

/* ============================================================
   APP SHELL (portal / console)
   ============================================================ */
.app{display:grid; grid-template-columns:246px 1fr; min-height:100vh; background:var(--surface-2)}
.side{
  background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.side-hd{padding:18px 18px 14px; border-bottom:1px solid var(--line)}
.side-nav{padding:12px 10px; display:flex; flex-direction:column; gap:1px; flex:1}
.side-group{font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); padding:16px 12px 7px}
.side-link{
  display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:var(--r-sm);
  font-size:14px; color:var(--ink-2); transition:.14s var(--ease); position:relative;
}
.side-link:hover{background:var(--surface-2); color:var(--ink)}
.side-link.active{background:var(--vermilion-soft); color:var(--vermilion-ink); font-weight:500}
.side-link .ic{width:17px; height:17px; flex:none; opacity:.85}
.side-link .count{margin-left:auto; font-size:11px; font-weight:600; background:var(--vermilion); color:#fff; border-radius:var(--r-pill); padding:1px 7px}
:root[data-theme="dark"] .side-link .count{color:#1A0C06}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .side-link .count{color:#1A0C06}}
.side-ft{padding:12px; border-top:1px solid var(--line)}

.main{min-width:0; display:flex; flex-direction:column}
.appbar{
  height:64px; display:flex; align-items:center; gap:16px; padding:0 26px;
  background:color-mix(in srgb, var(--surface-2) 90%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
}
.appbar h2{font-family:var(--f-sans); font-size:17px; font-weight:600; letter-spacing:-.005em}
.page{padding:26px; max-width:1240px; width:100%}
.page-head{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.page-head h2{font-family:var(--f-display); font-weight:500; font-size:29px}

.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.grid-main{display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start}

/* stat tiles */
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.stat .k{font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.stat .v{font-family:var(--f-display); font-size:31px; line-height:1.1; margin-top:9px; font-variant-numeric:tabular-nums}
.stat .d{font-size:12.5px; color:var(--ink-2); margin-top:6px; display:flex; align-items:center; gap:5px}
.trend-up{color:var(--malachite)} .trend-down{color:var(--crimson)}
.spark{height:34px; width:100%; margin-top:10px}

/* next-class hero card */
.nextclass{
  border-radius:var(--r-lg); padding:24px; color:#F2EFE9; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#171C33 0%,#232A4C 52%,#3A2A3F 100%);
  box-shadow:var(--shadow);
}
.nextclass::after{
  content:""; position:absolute; right:-40px; top:-40px; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle, rgba(226,62,23,.30), transparent 68%);
}
.nextclass .rel{position:relative; z-index:1}
.nextclass .t{font-family:var(--f-display); font-size:26px; margin-top:8px}
.nextclass .m{color:#AAB0C6; font-size:13.5px}
.countdown{display:flex; gap:12px; margin-top:18px}
.cd{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm); padding:8px 12px; min-width:60px; text-align:center}
.cd b{display:block; font-family:var(--f-mono); font-size:21px; font-weight:500; font-variant-numeric:tabular-nums}
.cd span{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#AAB0C6}

/* schedule */
.week{display:grid; grid-template-columns:56px repeat(7,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.week .hcell{padding:10px 8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); font-size:11.5px; font-weight:600; text-align:center; background:var(--surface-2)}
.week .hcell:last-child{border-right:none}
.week .tcell{border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); padding:5px 6px; text-align:right}
.week .cell{border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:52px; padding:3px; position:relative}
.week .cell:nth-child(8n+1){border-right:1px solid var(--line)}
.ev{
  border-radius:var(--r-xs); padding:5px 7px; font-size:11.5px; line-height:1.3; cursor:pointer;
  border-left:2.5px solid var(--vermilion); background:var(--vermilion-soft); color:var(--vermilion-ink);
  transition:.14s var(--ease); overflow:hidden;
}
.ev:hover{filter:brightness(.97); transform:translateX(1px)}
.ev b{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev.carnatic{border-left-color:var(--vermilion); background:var(--vermilion-soft); color:var(--vermilion-ink)}
.ev.western{border-left-color:var(--indigo); background:var(--indigo-soft); color:var(--indigo)}
.ev.film{border-left-color:var(--ochre); background:var(--ochre-soft); color:var(--ochre-ink)}
.ev.theory{border-left-color:var(--malachite); background:var(--malachite-soft); color:var(--malachite-ink)}

/* list rows */
.lrow{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); transition:background .12s}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:var(--surface-2)}
.lrow .ttl{font-size:14.5px; font-weight:500}
.lrow .sub{font-size:12.5px; color:var(--ink-3); margin-top:2px}

/* materials */
.mat{display:flex; gap:13px; padding:13px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); align-items:center; transition:.16s var(--ease)}
.mat:hover{border-color:var(--line-2); box-shadow:var(--shadow-sm)}
.mat-ic{width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.03em}
.mi-pdf{background:var(--crimson-soft); color:var(--crimson)}
.mi-audio{background:var(--malachite-soft); color:var(--malachite)}
.mi-video{background:var(--indigo-soft); color:var(--indigo)}
.mi-notes{background:var(--ochre-soft); color:var(--ochre)}

/* audio player strip */
.player{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2)}
.play-btn{width:34px; height:34px; border-radius:50%; background:var(--vermilion); color:#fff; display:grid; place-items:center; flex:none}
.wave{display:flex; align-items:center; gap:2px; height:26px; flex:1; overflow:hidden}
.wave i{flex:1; background:var(--line-2); border-radius:1px; min-width:2px}
.wave i.on{background:var(--vermilion)}

/* invoice / receipt */
.receipt{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.receipt-hd{padding:24px; border-bottom:1px dashed var(--line-2); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.receipt-bd{padding:24px}
.receipt-total{display:flex; justify-content:space-between; padding:14px 0; font-size:17px; font-weight:600; border-top:2px solid var(--ink); margin-top:8px}

/* modal */
.modal-bd{position:fixed; inset:0; background:rgba(14,17,32,.55); backdrop-filter:blur(3px); z-index:150; display:grid; place-items:center; padding:20px; animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); width:100%;
  max-width:520px; max-height:88vh; overflow-y:auto; animation:modalIn .28s var(--ease);
}
.modal.wide{max-width:760px}
@keyframes modalIn{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
.modal-hd{padding:22px 24px 0; display:flex; align-items:flex-start; gap:16px}
.modal-bd2{padding:18px 24px 24px}
.modal-ft{padding:16px 24px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; background:var(--surface-2)}

/* login */
/* The topbar sits above this, so the columns fill what is left of the viewport
   rather than a second full screen — otherwise the page is always taller than
   the window and the form's top edge gets cut. */
.auth{min-height:calc(100vh - 72px); display:grid; grid-template-columns:1fr 1fr}
.auth-art{
  /* The left edge dissolves into the page itself: the ground starts as --paper
     — white in light theme, night in dark — and reaches the panel colour by
     72px. The fade is a fixed length, not a percentage, so the text inset can
     clear it at every window width. */
  --edge-fade:linear-gradient(90deg, transparent 0px, rgba(0,0,0,.55) 34px, #000 72px);
  background:linear-gradient(90deg, var(--paper) 0px, var(--hero-ground) 72px);
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  padding:52px 52px 56px 96px;
}
/* Every layer above the ground fades on the same curve, or the strip stays dark. */
.auth-photo, .auth-scrim, .auth-art canvas{
  -webkit-mask-image:var(--edge-fade); mask-image:var(--edge-fade);
}
/* Photograph fills the panel; object-position holds her face near the top so
   the crop survives short viewports. The scrim carries the text: nearly opaque
   at the bottom where the wordmark and quote sit, light at the top so the
   picture still reads. The drone canvas stays, faintly, over both. */
.auth-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.82;
  /* No object-position here on purpose: the crop comes from the slot's focal
     point, so swapping in a different photograph reframes itself. */
}
/* The scrim stays heavy only where the words are. Lightening the top two stops
   lets the photograph read; the bottom stop is set by contrast measurement
   against the quote, not by eye. */
.auth-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(18,22,42,.18) 0%, rgba(18,22,42,.30) 42%,
    rgba(18,22,42,.80) 68%, rgba(18,22,42,.96) 100%);
}
.auth-art canvas{opacity:.3}
.auth-art canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.9}
.auth-art .q{position:relative; color:#F2EFE9; max-width:420px}
/* This panel is always the night ground, whatever the viewer's theme, so the
   wordmark cannot inherit --ink — in light mode that painted "Chords" navy on
   navy and it disappeared. The footer already handles this the same way. */
.auth-art .wm-name{color:var(--hero-ink)}
.auth-art .wm-tag{color:var(--hero-ink-2)}
/* Same reason as above, for the accent: over the night ground the light-theme
   vermilion measures 2.1:1 against the photograph at its brightest. The
   dark-theme tint clears the 3:1 large-text threshold. */
.auth-art .wm-name em{color:#FF6B41}
.auth-form{display:grid; place-items:center; padding:40px 28px; background:var(--paper)}
.auth-box{width:100%; max-width:390px}
.role-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
.role-btn{
  border:1px solid var(--line-2); border-radius:var(--r); padding:13px 14px; text-align:left;
  background:var(--surface); transition:.16s var(--ease);
}
.role-btn:hover{border-color:var(--ink-3)}
.role-btn[aria-pressed="true"]{border-color:var(--vermilion); background:var(--vermilion-soft); box-shadow:var(--shadow-sm)}
.role-btn b{display:block; font-size:14px; font-weight:600}
.role-btn span{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}

/* empty state */
.empty{text-align:center; padding:52px 20px; color:var(--ink-3)}
.empty h3{color:var(--ink-2); font-weight:500; margin-bottom:6px}

/* tabs */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto}
.tabs button{padding:10px 16px; font-size:14px; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:.15s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--vermilion); border-bottom-color:var(--vermilion); font-weight:500}

/* responsive */
@media (max-width:1080px){
  .grid-main{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .teacher{grid-template-columns:1fr; gap:30px}
  .portrait{max-width:260px}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed; z-index:100; width:246px; transform:translateX(-100%); transition:transform .28s var(--ease); box-shadow:var(--shadow-lg)}
  .side.open{transform:none}
  .burger{display:inline-flex}
  .disciplines,.plans,.grid-3{grid-template-columns:1fr}
  .ladder{grid-template-columns:repeat(4,1fr)}
  .rung{border-bottom:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px}
  .auth{grid-template-columns:1fr}
  .auth-art{display:none}
  .nav{display:none}
  .week{grid-template-columns:44px repeat(7,1fr); font-size:11px}
}
@media (max-width:640px){
  .shell,.shell-narrow{padding:0 18px}
  .sec{padding:56px 0}
  .grid-2,.grid-4{grid-template-columns:1fr}
  .ladder{grid-template-columns:repeat(2,1fr)}
  .page{padding:16px}
  .hero-in{padding-top:66px; padding-bottom:78px}
  .hero-facts{gap:20px 30px; margin-top:38px}
  .hero-fact .k{font-size:26px}
  .topbar-in{gap:12px; height:62px}
  .wordmark .wm-name{white-space:nowrap}
  .wordmark.sm .wm-name{font-size:15px}
  .wordmark.sm .wm-tag{display:none}
  .nav-actions .btn-ghost{display:none}
  .sec-head{margin-bottom:32px}
  .footer-grid{grid-template-columns:1fr}
  .week-scroll{overflow-x:auto} .week{min-width:660px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}

/* Honeypot: a field no person ever sees, and a script cannot resist. Positioned
   off-screen rather than display:none, because the simpler bots skip anything
   that is not rendered — and skipping it is exactly what we do not want. */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}