/* ============================================================
   Tokens
   ============================================================ */
:root{
  --ground:#F6F7F5; --surface:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#EEF1ED;
  --ink:#141B17; --ink-2:#48544D; --ink-3:#78857D;
  --rule:#E2E6DF; --rule-2:#CDD3C9;
  --accent:#0E6E5C; --accent-dark:#0A4C40; --accent-soft:#E1EFE9;
  --accent-glow:rgba(14,110,92,.16);
  --ochre:#A0691B; --ochre-soft:rgba(160,105,27,.14);
  --danger:#B3452F; --danger-soft:rgba(179,69,47,.12);

  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-xs:.78rem; --fs-sm:.88rem; --fs-md:1rem; --fs-lg:1.15rem;
  --fs-xl:1.4rem; --fs-2xl:1.85rem; --fs-3xl:2.4rem; --fs-4xl:clamp(2.4rem,5.5vw,3.6rem);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(20,27,23,.05), 0 1px 1px rgba(20,27,23,.04);
  --shadow-md:0 8px 24px rgba(20,27,23,.08), 0 2px 6px rgba(20,27,23,.04);
  --shadow-lg:0 24px 56px rgba(20,27,23,.14), 0 4px 12px rgba(20,27,23,.05);
  --glow:0 0 0 rgba(0,0,0,0);

  /* --accent-dark means "brighter" in dark mode (used for hover states), so
     it can't be reused here for a gradient that must stay dark in both
     themes - this gets its own fixed stops instead. */
  --cta-gradient:linear-gradient(135deg,#0A4C40,#0E6E5C);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0A0F0D; --surface:#141A17; --surface-2:#1A211D; --surface-3:#212A25;
    --ink:#ECF1EE; --ink-2:#A9B4AD; --ink-3:#77857D;
    --rule:#232D28; --rule-2:#333F38;
    --accent:#4FD1AC; --accent-dark:#9BE9D2; --accent-soft:#12261F;
    --accent-glow:rgba(79,209,172,.22);
    --ochre:#E3AE66; --ochre-soft:rgba(227,174,102,.14);
    --danger:#E08268; --danger-soft:rgba(224,130,104,.14);

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 8px 28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
    --shadow-lg:0 30px 64px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.4);
    --glow:0 0 64px var(--accent-glow);
    --cta-gradient:linear-gradient(135deg,#134B3D,#081310);
  }
}
:root[data-theme="dark"]{
  --ground:#0A0F0D; --surface:#141A17; --surface-2:#1A211D; --surface-3:#212A25;
  --ink:#ECF1EE; --ink-2:#A9B4AD; --ink-3:#77857D;
  --rule:#232D28; --rule-2:#333F38;
  --accent:#4FD1AC; --accent-dark:#9BE9D2; --accent-soft:#12261F;
  --accent-glow:rgba(79,209,172,.22);
  --ochre:#E3AE66; --ochre-soft:rgba(227,174,102,.14);
  --danger:#E08268; --danger-soft:rgba(224,130,104,.14);

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 8px 28px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 30px 64px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.4);
  --glow:0 0 64px var(--accent-glow);
  --cta-gradient:linear-gradient(135deg,#134B3D,#081310);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1 0 auto}
img{max-width:100%}
a{color:var(--accent-dark)}
h1,h2,h3,h4{font-family:var(--font-sans);letter-spacing:-.02em;text-wrap:balance}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:760px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}

.section{padding:var(--s-20) 0}
.section--tight{padding:var(--s-12) 0}
@media(max-width:700px){
  .section{padding:var(--s-16) 0}
  .section--tight{padding:var(--s-10) 0}
}
.section-head{max-width:640px;margin:0 0 var(--s-10)}
.section-head h2{font-size:var(--fs-2xl);margin:0 0 var(--s-2);font-weight:800}
.section-head p{color:var(--ink-2);margin:0;font-size:var(--fs-md)}
.section-head.center{max-width:640px;margin-left:auto;margin-right:auto;text-align:center}

/* ============================================================
   Header
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:40;
  background:var(--ground);
  background:color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.site-head .wrap{padding-top:16px;padding-bottom:16px}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:800;font-size:1.2rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
}
.brand img{display:block;border-radius:6px}
.site-head nav{display:flex;align-items:center;gap:20px}
.site-head nav a{font-size:.93rem;font-weight:600;text-decoration:none;color:var(--ink-2);transition:color .15s}
.site-head nav a:hover{color:var(--ink)}
.site-head nav a.btn{color:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .site-head nav a.btn{color:#08110D}}
:root[data-theme="dark"] .site-head nav a.btn{color:#08110D}

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink-2);cursor:pointer;flex:0 0 auto;
  transition:background .15s,color .15s,border-color .15s;
}
.theme-toggle:hover{background:var(--surface-3);color:var(--ink);border-color:var(--rule-2)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
}

.user-menu{position:relative}
.user-menu__trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 6px 4px 4px;border:1px solid var(--rule);border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.user-menu__trigger:hover{background:var(--surface-3);border-color:var(--rule-2)}
.user-menu__trigger:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.user-menu__trigger .avatar{width:26px;height:26px;font-size:.72rem}
.user-menu__chevron{width:14px;height:14px;transition:transform .15s}
.user-menu__trigger[aria-expanded="true"] .user-menu__chevron{transform:rotate(180deg)}

.user-menu__panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:50;
  min-width:220px;padding:6px;
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
}
.user-menu__header{padding:10px 12px 8px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.user-menu__name{margin:0;font-weight:700;font-size:.95rem;color:var(--ink)}
.user-menu__handle{margin:2px 0 0;font-size:.82rem;color:var(--ink-3)}
.user-menu__item{
  display:block;padding:9px 12px;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink-2);
  transition:background .12s,color .12s;
}
.user-menu__item:hover{background:var(--surface-3);color:var(--ink)}
.user-menu__item--danger:hover{color:var(--danger)}

@media(max-width:360px){
  .site-head .row{flex-wrap:wrap;row-gap:8px}
  .site-head nav{width:100%}
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;
  padding:11px 20px;border:0;border-radius:var(--r-sm);
  font:inherit;font-weight:700;font-size:.94rem;text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background .15s,color .15s,transform .15s,box-shadow .15s;
}
.btn:hover{background:var(--accent-dark);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn--big{display:block;width:100%;text-align:center;padding:13px 16px;font-size:1rem}
.btn--block{display:block;width:100%;text-align:center}
.btn--lg{padding:15px 28px;font-size:1.02rem;border-radius:var(--r-md)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
.btn--ghost:hover{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule-2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn:not(.btn--ghost),
  :root:not([data-theme="light"]) .btn:not(.btn--ghost):hover{color:#08110D}
}
:root[data-theme="dark"] .btn:not(.btn--ghost),
:root[data-theme="dark"] .btn:not(.btn--ghost):hover{color:#08110D}

/* ============================================================
   Landing hero
   ============================================================ */
.hero-landing{position:relative;padding:var(--s-24) 0 var(--s-20);overflow:hidden}
.hero-landing::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:520px;
  background:radial-gradient(60% 60% at 50% 20%, var(--accent-glow), transparent 70%);
  pointer-events:none;
}
.hero-landing__inner{position:relative;max-width:760px}
.hero-landing .eyebrow-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-pill);
  padding:6px 14px;font-size:.8rem;font-weight:700;color:var(--ink-2);margin-bottom:var(--s-5);
}
.hero-landing .eyebrow-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.display{font-size:var(--fs-4xl);line-height:1.06;letter-spacing:-.03em;font-weight:800;margin:0 0 var(--s-5)}
.text-accent{color:var(--accent)}
.hero-landing .lead{font-size:var(--fs-lg);color:var(--ink-2);max-width:52ch;margin:0 0 var(--s-8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:var(--s-10)}

.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-10)}
.trust-stat{display:flex;flex-direction:column;gap:2px}
.trust-stat strong{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em}
.trust-stat span{font-size:.82rem;color:var(--ink-3)}

/* ============================================================
   Eyebrow / tags / badges
   ============================================================ */
.eyebrow{
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin:0 0 var(--s-2);
}
.tags{margin:var(--s-2) 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tag{
  display:inline-flex;align-items:center;font-size:.74rem;font-weight:700;letter-spacing:.02em;
  background:var(--accent-soft);color:var(--accent-dark);
  padding:4px 10px;border-radius:var(--r-pill);
}
.tag--on{background:transparent;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--rule)}

/* ============================================================
   Value props
   ============================================================ */
.value-grid{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
@media(min-width:640px){.value-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.value-grid{grid-template-columns:repeat(4,1fr)}}
.value-card{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s-6);transition:transform .18s,box-shadow .18s,border-color .18s;
}
.value-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--rule-2)}
.value-icon{
  width:42px;height:42px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-4);
}
.value-icon svg{width:22px;height:22px}
.value-card h3{margin:0 0 6px;font-size:var(--fs-md);font-weight:800}
.value-card p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.55}

/* ============================================================
   Course cards
   ============================================================ */
.course-grid{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media(min-width:680px){.course-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.course-grid{grid-template-columns:repeat(3,1fr)}}

.course-card{
  display:flex;flex-direction:column;
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.course-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--rule-2)}
.course-card__cover{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,var(--accent-soft),var(--surface-3));
}
.course-card__cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.course-card:hover .course-card__cover img{transform:scale(1.045)}
.course-card__badge{
  position:absolute;top:12px;right:12px;background:var(--surface);color:var(--accent-dark);
  font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm);
}
.course-card__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.course-card__title{margin:2px 0 0;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em;line-height:1.3}
.course-card__title a{color:var(--ink);text-decoration:none}
.course-card__title a:hover{color:var(--accent-dark)}
.course-card__tagline{margin:0;font-size:.9rem;line-height:1.5}
.course-card__foot{margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:var(--s-3)}
.course-card__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}

/* ============================================================
   Generic hero (course / room)
   ============================================================ */
.hero-banner{
  width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:var(--r-lg);
  display:block;margin-top:var(--s-6);box-shadow:var(--shadow-md);
}
.hero{padding:var(--s-10) 0 var(--s-2)}
.hero h1{font-size:clamp(1.8rem,5vw,var(--fs-3xl));line-height:1.12;letter-spacing:-.025em;margin:0 0 var(--s-3);font-weight:800}
.hero .lead{font-size:1.06rem;color:var(--ink-2);margin:0;max-width:60ch}
.hero--course{padding-bottom:var(--s-8);border-bottom:1px solid var(--rule);margin-bottom:var(--s-8)}
.hero-stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:var(--s-3);color:var(--ink-2);font-size:.92rem}
.hero-mentor-byline{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-4);
  text-decoration:none;color:var(--ink-2);font-size:.92rem;
}
.hero-mentor-byline:hover{color:var(--ink)}
.hero-mentor-byline .avatar{width:26px;height:26px;font-size:.7rem}

/* ============================================================
   Layout: sidebar + body
   ============================================================ */
.layout{display:grid;grid-template-columns:1fr;gap:var(--s-8);padding-bottom:var(--s-20)}
/* The buy panel comes first in the DOM so phones see the price and the
   button without scrolling past the syllabus; desktop puts it back on the right. */
@media(min-width:860px){
  .layout{grid-template-columns:1fr 320px;gap:var(--s-10);align-items:start}
  .body{order:1}
  /* A pinned column taller than the screen strands its own bottom: at 700px
     of viewport the sidebar stands 798px, so the last 186px could never be
     scrolled to. Capping it makes the overflow scrollable instead - and the
     cap only bites when the column really is too tall, so the usual case
     still has no inner scrollbar. */
  .side{
    order:2;position:sticky;top:88px;
    max-height:calc(100vh - 104px);
    max-height:calc(100dvh - 104px);
    overflow-y:auto;scrollbar-width:thin;
  }
}
.body h2{font-size:var(--fs-xl);margin:var(--s-10) 0 var(--s-3);font-weight:800;letter-spacing:-.015em}
.body > .prose:first-child{margin-top:0}
.prose p{margin:0 0 var(--s-3)}
.prose ul,.prose ol{margin:0 0 var(--s-3);padding-left:1.3em}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--ink-3)}

.side > * + *{margin-top:var(--s-4)}

/* ============================================================
   Panels / cards
   ============================================================ */
.panel{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s-5);box-shadow:var(--shadow-sm);
}
.panel--quiet{background:var(--accent-soft);border-color:transparent;box-shadow:none}
.panel--accent{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset, var(--shadow-sm)}
.panel h3{margin:0 0 var(--s-2);font-size:1.02rem;font-weight:800}
/* `.body h2` carries a 40px top margin for spacing between page sections;
   inside a panel that lands on top of the panel's own padding. */
.panel > :first-child{margin-top:0}
/* Each buy button is its own form (they post different things), and forms
   carry no margin - without this the two sit flush against each other. */
.panel form + form,
.panel form + .installment-options{margin-top:var(--s-2)}
/* One or more "N oyga bo'lib to'lash" choices, each its own form+price pair. */
.installment-options{display:flex;flex-direction:column;gap:var(--s-3)}
.installment-option p{margin-top:6px}

.price{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.1}
.price span{font-size:.85rem;font-weight:600;color:var(--ink-3)}

.facts{margin:var(--s-4) 0 var(--s-5);display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:.9rem}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0;text-align:right;font-weight:600}

.seats{margin:6px 0 var(--s-3);font-size:.9rem;font-weight:700;color:var(--ochre)}

.mobile-buy-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--surface);border-top:1px solid var(--rule);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);
}
.mobile-buy-bar .price{font-size:1.3rem}
.mobile-buy-bar form,.mobile-buy-bar a.btn{flex:0 0 auto}
@media(min-width:860px){.mobile-buy-bar{display:none}}
/* The bar is fixed over the page, so the last 25px of the footer sat behind
   it with no way to scroll clear. Only pages that show the bar pay for it. */
@media(max-width:859px){body:has(.mobile-buy-bar){padding-bottom:88px}}

/* ============================================================
   Forms
   ============================================================ */
.waitlist{display:flex;flex-direction:column;gap:10px;margin-top:var(--s-4)}
.waitlist input{
  width:100%;padding:11px 14px;font:inherit;font-size:.95rem;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.waitlist input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

.promo-form{display:flex;gap:8px;margin-top:var(--s-3)}
.promo-form input{
  flex:1 1 auto;min-width:0;padding:10px 12px;font:inherit;font-size:.9rem;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);text-transform:uppercase;
  transition:border-color .15s,box-shadow .15s;
}
.promo-form input::placeholder{text-transform:none}
.promo-form input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.promo-form .btn{flex:0 0 auto;padding:10px 16px;font-size:.9rem}
.promo-applied{margin:var(--s-3) 0 0;color:var(--accent)}

/* Installment schedule in the student's cabinet */
.pay-plan{list-style:none;margin:0 0 var(--s-3);padding:0;display:flex;flex-direction:column;gap:2px}
.pay-part{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-3);
  font-size:.92rem;
}
.pay-part__amount{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pay-part__when{color:var(--ink-3);font-size:.85rem;text-align:right}
.pay-part.is-paid{background:var(--accent-soft)}
.pay-part.is-paid .pay-part__when{color:var(--accent)}
.pay-part.is-overdue{background:var(--danger-soft)}
.pay-part.is-overdue .pay-part__when{color:var(--danger)}

.leetcode-handle{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0}
.leetcode-handle a:first-child{font-weight:600}

/* ============================================================
   Flash messages
   ============================================================ */
.flash{
  margin:16px 0 0;padding:12px 16px;border-radius:var(--r-sm);font-size:.93rem;
  background:var(--accent-soft);color:var(--ink);
  border-left:3px solid var(--accent);
}
.flash--error{background:var(--danger-soft);border-left-color:var(--danger)}
.flash--warning{background:var(--ochre-soft);border-left-color:var(--ochre)}
.flash--info{background:var(--rule);border-left-color:var(--ink-3)}

/* ============================================================
   Footer
   ============================================================ */
.site-foot{border-top:1px solid var(--rule);margin-top:var(--s-20);padding:var(--s-12) 0 var(--s-8);background:var(--surface)}
.site-foot__grid{display:grid;grid-template-columns:1fr;gap:var(--s-8);margin-bottom:var(--s-8)}
@media(min-width:640px){.site-foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-foot .brand{margin-bottom:var(--s-3)}
.site-foot__grid p{margin:0;color:var(--ink-2);font-size:.9rem;max-width:34ch}
.site-foot h4{margin:0 0 var(--s-3);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.site-foot__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-foot__links a{color:var(--ink-2);text-decoration:none;font-size:.92rem}
.site-foot__links a:hover{color:var(--accent-dark)}
.site-foot__bottom{border-top:1px solid var(--rule);padding-top:var(--s-5);font-size:.85rem;color:var(--ink-3)}

/* ============================================================
   People / avatars
   ============================================================ */
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.people li{border-bottom:1px solid var(--rule)}
.people li:last-child{border-bottom:none}
.person{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  color:inherit;text-decoration:none;border-radius:var(--r-sm);
}
a.person:hover{background:var(--surface-3);margin:0 -8px;padding:10px 8px}
a.person:hover .person-name{color:var(--accent-dark)}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.avatar--placeholder{
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-dark);
  font-weight:700;font-size:.85rem;text-transform:uppercase;
}
.person-name{flex:1 1 auto;font-weight:600}
.person-tg{font-size:.88rem;color:var(--ink-3)}

.avatar-grid{display:flex;flex-wrap:wrap;gap:10px;margin:var(--s-3) 0 0}
.avatar-grid .avatar{width:40px;height:40px;box-shadow:0 0 0 2px var(--surface-2)}
.avatar-grid .avatar--placeholder{font-size:.95rem}

/* ============================================================
   Mentor
   ============================================================ */
.mentor-full{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-4)}
.avatar--lg{width:76px;height:76px;font-size:1.6rem;box-shadow:var(--shadow-sm)}
.mentor-full h3{margin:0 0 2px;font-size:1.2rem;font-weight:800}
.mentor-full .muted{margin:0}

.mentor-logo-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:var(--r-sm);padding:7px 14px;box-shadow:var(--shadow-sm);
}
.mentor-logo-chip img{height:20px;width:auto;max-width:88px;object-fit:contain;display:block}

.workplace-highlights{list-style:none;margin:var(--s-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.workplace-highlights li{display:flex;align-items:center;gap:var(--s-3)}
.workplace-highlights .mentor-logo-chip{flex:0 0 auto}
.workplace-highlights p{margin:0;color:var(--ink-2);font-size:.93rem}

/* ============================================================
   Pricing / discount
   ============================================================ */
.price-row{margin:0 0 4px;display:flex;align-items:center;gap:8px}
.price-original{color:var(--ink-3);text-decoration:line-through;font-size:.95rem}
.discount-badge{
  display:inline-block;background:var(--ochre-soft);color:var(--ochre);
  font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);
}

/* ============================================================
   Before / after
   ============================================================ */
.before-after{display:grid;grid-template-columns:1fr;gap:var(--s-5);margin:var(--s-5) 0}
@media(min-width:600px){.before-after{grid-template-columns:1fr 1fr}}
.before-after > div{padding:var(--s-5);border-radius:var(--r-lg)}
.before-after > div:first-child{background:var(--surface-3)}
.before-after > div:last-child{background:var(--accent-soft)}
.before-after h3{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s-2);font-weight:800;
}
.before-after > div:last-child h3{color:var(--accent-dark)}
.before-after .prose p:last-child{margin-bottom:0}

/* ============================================================
   Checklist ("what's included")
   ============================================================ */
.checklist{margin:0}
.checklist ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){.checklist ul{grid-template-columns:1fr 1fr}}
.checklist li{position:relative;padding-left:30px;font-size:.94rem}
.checklist li::before{
  content:"✓";position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-dark);font-size:.72rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   Curriculum modules
   ============================================================ */
.module-list{margin:var(--s-4) 0 0;display:flex;flex-direction:column;gap:10px}
.module{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-md);
  overflow:hidden;
}
.module summary{
  list-style:none;cursor:pointer;padding:var(--s-4) var(--s-5);
  display:flex;align-items:center;gap:12px;font-weight:700;
}
.module summary::-webkit-details-marker{display:none}
.module summary .module-no{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;
}
.module summary .module-title{flex:1 1 auto}
.module summary .module-count{flex:0 0 auto;color:var(--ink-3);font-size:.82rem;font-weight:600}
.module summary .module-chevron{flex:0 0 auto;color:var(--ink-3);transition:transform .2s}
.module[open] summary .module-chevron{transform:rotate(180deg)}
.module-body{padding:0 var(--s-5) var(--s-5) calc(28px + var(--s-5) + 12px)}
.module-body p{margin:0 0 var(--s-3);color:var(--ink-2)}
.module-body ul{margin:0;padding-left:1.1em}
.module-body li{margin-bottom:6px}

/* ============================================================
   Course tabs + weekly homework
   ============================================================ */
.course-tabs{
  display:flex;gap:4px;margin:var(--s-6) 0 var(--s-5);
  border-bottom:1px solid var(--rule);
}
.course-tabs a{
  padding:10px 16px;font-weight:700;font-size:.94rem;color:var(--ink-2);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.course-tabs a:hover{color:var(--ink)}
.course-tabs a.is-active{color:var(--accent);border-bottom-color:var(--accent)}

.weeks{list-style:none;margin:0 0 var(--s-6);padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.week > details{
  background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-md);
  overflow:hidden;
}
.week summary{
  list-style:none;cursor:pointer;padding:var(--s-4) var(--s-5);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:700;
}
.week summary::-webkit-details-marker{display:none}
.week-no{
  flex:0 0 auto;padding:3px 10px;border-radius:999px;
  background:var(--surface-3);color:var(--ink-2);font-size:.8rem;font-weight:800;
}
.week-title{flex:1 1 140px}
.week-meta{flex:0 0 auto;display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:.82rem;font-weight:600}
.week summary .module-chevron{flex:0 0 auto;color:var(--ink-3);transition:transform .2s}
.week > details[open] summary .module-chevron{transform:rotate(180deg)}
.week-body{padding:0 var(--s-5) var(--s-5)}
.week-topics{margin:0 0 var(--s-3);color:var(--ink-2);font-size:.9rem}
.week-badge{
  padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:.74rem;font-weight:800;letter-spacing:.02em;
}
/* The week in progress leads; the ones already taught step back. */
.week--current > details{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.week--current .week-no{background:var(--accent-soft);color:var(--accent-dark)}
.week--done > details{background:transparent}
.week--done .week-title,.week--done .week-no{color:var(--ink-3)}

/* ============================================================
   Progress table
   ============================================================ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.progress-bar-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  flex-wrap:wrap;margin-bottom:var(--s-5);
}
.progress-bar-row p{margin:0}
.sort-toggle{display:flex;gap:2px;background:var(--surface-3);padding:3px;border-radius:var(--r-sm)}
.sort-toggle a{
  padding:7px 14px;border-radius:calc(var(--r-sm) - 2px);font-size:.88rem;font-weight:700;
  color:var(--ink-2);text-decoration:none;
}
.sort-toggle a.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}

.progress-week{margin-bottom:var(--s-8)}
.progress-week h2{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:1.05rem;font-weight:800;margin:0 0 var(--s-3);
}
.progress-week.is-current h2{color:var(--accent)}

/* The table is wider than any phone once a cohort fills up, so it scrolls in
   its own box rather than pushing the page sideways. */
.table-scroll{
  overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-md);
  background:var(--surface-2);
}
.progress-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:.9rem}
.progress-table th,.progress-table td{border-bottom:1px solid var(--rule);padding:8px 10px;text-align:left}
.progress-table tbody tr:last-child th,.progress-table tbody tr:last-child td{border-bottom:0}

/* The problem name stays put while the students scroll past it. */
.progress-table .problem-col{
  position:sticky;left:0;z-index:2;background:var(--surface-2);
  min-width:210px;max-width:280px;font-weight:600;
  border-right:1px solid var(--rule);
}
.progress-table thead .problem-col{z-index:3}
.progress-table thead th{
  position:sticky;top:0;background:var(--surface-2);font-size:.82rem;
  vertical-align:bottom;
}
.student-col{min-width:92px;max-width:150px;text-align:center!important}
/* Names wrap rather than truncate - a column headed "Mukhamma..." is no use
   for telling two students apart. */
.student-name{display:block;font-weight:700;white-space:normal;overflow-wrap:break-word;line-height:1.25}
.student-count{display:block;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
/* One rule between students, so the eye stays in a column. */
.progress-table .student-col + .student-col,
.progress-table .cell + .cell{border-left:1px solid var(--rule)}
.cell{text-align:center!important;color:var(--ink-3)}
.cell--solved{color:var(--accent);font-weight:800}
.cell--late{color:var(--ink-3);font-weight:700}

/* Cohort roster (mentor only) */
.roster-table{border-collapse:collapse;width:100%;font-size:.93rem}
.roster-table th,.roster-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule)}
.roster-table tbody tr:last-child th,.roster-table tbody tr:last-child td{border-bottom:0}
.roster-table thead th{font-size:.8rem;color:var(--ink-3);font-weight:700;letter-spacing:.02em}
.roster-table tbody th{font-weight:700}
.roster-no,.roster-date{color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.roster-note{
  margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--ochre-soft);color:var(--ochre);
  font-size:.72rem;font-weight:700;white-space:nowrap;vertical-align:middle;
}

/* A mentor's groups on "Mening kurslarim" */
.group-heading{font-size:1.1rem;font-weight:800;margin:var(--s-6) 0 var(--s-3)}
.group-grid{display:grid;grid-template-columns:1fr;gap:var(--s-4);margin-bottom:var(--s-8)}
@media(min-width:680px){.group-grid{grid-template-columns:1fr 1fr}}
.group-card h3{margin:0 0 var(--s-1)}
.group-card > p{margin:0 0 var(--s-4)}
.group-links{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.btn--sm{padding:8px 14px;font-size:.88rem}

.profile-form{text-align:left}
.profile-form label{font-size:.85rem;font-weight:700;color:var(--ink-2);margin-bottom:calc(var(--s-1) * -1)}
.module-problems-head{
  margin:var(--s-4) 0 var(--s-2) !important;
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3) !important;
}
.module-problems{margin:0;padding-left:1.4em;columns:2;column-gap:var(--s-6)}
.module-problems li{margin-bottom:6px;font-size:var(--fs-sm);color:var(--ink-2);break-inside:avoid}
.module-problems a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.module-problems a:hover{color:var(--accent)}
@media(max-width:640px){.module-problems{columns:1}}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials{display:grid;grid-template-columns:1fr;gap:var(--s-5);margin:var(--s-4) 0}
@media(min-width:700px){.testimonials{grid-template-columns:1fr 1fr}}
.testimonials--row{grid-template-columns:1fr}
@media(min-width:700px){.testimonials--row{grid-template-columns:repeat(3,1fr)}}
.testimonial{
  margin:0;padding:var(--s-5);background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:var(--s-4);
}
.testimonial p{margin:0;font-style:normal;color:var(--ink);line-height:1.6;flex:1}
.testimonial footer{display:flex;align-items:center;gap:10px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin:var(--s-4) 0;display:flex;flex-direction:column;gap:8px}
.faq-item{
  padding:var(--s-4) var(--s-5);border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface-2);
}
.faq-item summary{
  cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:0 0 auto;font-size:1.2rem;font-weight:400;color:var(--ink-3);transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:var(--s-3) 0 0;color:var(--ink-2);line-height:1.6}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  background:var(--cta-gradient);
  border-radius:var(--r-xl);padding:var(--s-12) var(--s-8);text-align:center;color:#fff;
}
.cta-band h2{margin:0 0 var(--s-3);font-size:var(--fs-2xl);font-weight:800;color:#fff}
.cta-band p{margin:0 0 var(--s-6);color:rgba(255,255,255,.85);font-size:1.02rem}
.cta-band .btn{background:#fff;color:var(--accent-dark)}
.cta-band .btn:hover{background:#fff;color:var(--accent-dark);opacity:.92}

/* ============================================================
   Utilities
   ============================================================ */
.muted{color:var(--ink-2)}
.small{font-size:.85rem}
.center{text-align:center}
.err{color:var(--danger);font-size:.83rem;margin:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}