/* ============================================================
   CA YOUTH — AI-native learning platform
   Design tokens sampled from logo.png (coral / mint / sky)
   ============================================================ */

:root{
  /* brand */
  --coral:#FF7A59;
  --orange:#FFA24C;
  --mint:#3FD2C7;
  --teal:#17B3AE;
  --sky:#3B8EF0;
  --indigo:#2B5FD9;
  --lilac:#A98BFF;
  --rose:#FF8FB1;

  /* pastels */
  --p-peach:#FFE6DB;
  --p-mint:#D8F6F1;
  --p-sky:#DEEBFF;
  --p-lilac:#ECE4FF;
  --p-butter:#FFF3D6;
  --p-rose:#FFE2EC;

  /* neutrals */
  --canvas:#FBFAFF;
  --ink:#101636;
  --ink-2:#3A4166;
  --muted:#6B7398;
  --line:rgba(16,22,54,.08);
  --glass:rgba(255,255,255,.72);

  --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-2xl:44px;
  --shadow-sm:0 2px 10px rgba(16,22,54,.05);
  --shadow-md:0 12px 34px -12px rgba(16,22,54,.16);
  --shadow-lg:0 34px 80px -32px rgba(16,22,54,.28);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  /* `overflow-x:hidden` on the body turns it into a scroll container, and iOS
     Safari then anchors position:fixed children to THAT instead of the viewport:
     the fixed header drifts up and its top edge is clipped as you scroll. `clip`
     hides the same overflow without creating a scroll container. The hidden line
     is the fallback for anything that does not know `clip`. */
  overflow-x:hidden;
  overflow-x:clip;
}
::selection{background:var(--p-mint);color:var(--ink)}
h1,h2,h3,h4,.font-display{font-family:'Outfit','Inter',sans-serif;letter-spacing:-.025em}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--mint),var(--sky));border-radius:99px;border:3px solid var(--canvas)}

/* ---------- ambient background ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora span{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.55;will-change:transform;
}
.aurora .a1{width:52vw;height:52vw;left:-14vw;top:-16vw;background:radial-gradient(circle at 30% 30%,#FFD3C2,#FFE6DB 45%,transparent 70%);animation:drift1 26s var(--ease) infinite alternate}
.aurora .a2{width:46vw;height:46vw;right:-12vw;top:2vw;background:radial-gradient(circle at 60% 40%,#C9F0FF,#DCEBFF 45%,transparent 70%);animation:drift2 32s var(--ease) infinite alternate}
.aurora .a3{width:44vw;height:44vw;left:24vw;top:52vh;background:radial-gradient(circle at 50% 50%,#D6F6EF,#E7FBF6 50%,transparent 72%);animation:drift3 30s var(--ease) infinite alternate}
.aurora .a4{width:36vw;height:36vw;right:6vw;top:118vh;background:radial-gradient(circle at 50% 50%,#EFE4FF,#F6F1FF 50%,transparent 72%);animation:drift1 34s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(6vw,5vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-7vw,7vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(5vw,-6vh,0) scale(1.12)}}

.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.grid-fade{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(16,22,54,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(16,22,54,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 10%,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 10%,transparent 75%);
}

/* ---------- type helpers ---------- */
.grad-text{
  background:linear-gradient(100deg,var(--coral) 0%,var(--rose) 22%,var(--lilac) 42%,var(--sky) 66%,var(--mint) 92%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 9s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
  background:var(--glass);border:1px solid var(--line);
  padding:.45rem .85rem;border-radius:99px;backdrop-filter:blur(12px);
  box-shadow:var(--shadow-sm);
}

/* ---------- glass surfaces ---------- */
.glass{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
.card{
  position:relative;border-radius:var(--r-lg);
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(18px) saturate(1.3);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* gradient ring on hover — composited, no layout work */
.ring-hover::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,var(--coral),var(--rose),var(--lilac),var(--sky),var(--mint));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;
}
.ring-hover:hover::after{opacity:1}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;border-radius:99px;white-space:nowrap;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease);
  will-change:transform;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  color:#fff;padding:.9rem 1.6rem;
  background:linear-gradient(115deg,var(--coral),var(--rose) 34%,var(--lilac) 58%,var(--sky) 82%,var(--teal));
  background-size:200% 100%;
  box-shadow:0 12px 30px -10px rgba(59,142,240,.6),0 6px 18px -8px rgba(255,122,89,.5);
}
.btn-primary:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(59,142,240,.62),0 10px 24px -10px rgba(255,122,89,.55)}
.btn-ghost{
  padding:.9rem 1.5rem;color:var(--ink);
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* shine sweep */
.shine{overflow:hidden}
.shine::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .8s var(--ease);
}
.shine:hover::before{left:130%}

/* ---------- header ---------- */
/* The header floats over the hero, but it is STICKY, not fixed. iOS Safari
   positions fixed elements against the layout viewport, so while the address bar
   collapses during a scroll the bar drifts above the visible page and its top
   edge is cut off. A sticky element is laid out in flow and cannot drift; the
   negative margin pulls the page back underneath it, so it still floats exactly
   as the fixed one did. --nav-h must match the bar's collapsed height
   (logo 44px + py-3). */
#nav{
  /* --nav-h is the bar's own collapsed height. These two values are what it
     actually measures (the Log in button appears at sm and makes the row taller);
     app.js re-measures on load and resize so the offset can never drift. */
  --nav-h:68px;
  position:sticky;left:auto;right:auto;margin-bottom:calc(-1 * var(--nav-h));
}
@media(min-width:640px){#nav{--nav-h:77px}}
.nav{transition:background .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s var(--ease),padding .5s var(--ease)}
.nav.scrolled{
  background:rgba(251,250,255,.78);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(16,22,54,.4);
}
/* Nav links: no underline. Hover is a soft pill; the section you are actually
   in gets the tinted state, and the header itself carries the reading progress. */
.nav-link{
  position:relative;color:var(--ink-2);font-weight:500;
  padding:.42rem .8rem;border-radius:99px;
  transition:color .3s var(--ease),background .35s var(--ease);
}
.nav-link:hover{color:var(--ink);background:rgba(16,22,54,.05)}
/* Active destination. Driven by the scroll-spy on this one-pager, and by
   <body data-page="..."> once Classes and Experts are real pages — no JS needed
   there, just the attribute. */
.nav-link.on,
body[data-page="classes"] .nav-link[data-nav="classes"],
body[data-page="experts"] .nav-link[data-nav="experts"]{
  color:var(--ink);font-weight:600;
  background:linear-gradient(120deg,rgba(255,122,89,.14),rgba(169,139,255,.14),rgba(63,210,199,.16));
}

/* mobile menu rows share the same active treatment */
.nav-m{
  padding:.65rem .75rem;border-radius:16px;color:var(--ink-2);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.nav-m:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.nav-m.on,
body[data-page="classes"] .nav-m[data-nav="classes"],
body[data-page="experts"] .nav-m[data-nav="experts"]{
  color:var(--ink);font-weight:600;
  background:linear-gradient(120deg,rgba(255,122,89,.16),rgba(169,139,255,.16),rgba(63,210,199,.18));
}

/* Header hairline + reading progress (scaleX only — never animates width). */
.nav-rule{
  position:absolute;inset-inline:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(16,22,54,.1),transparent);
  opacity:0;transition:opacity .4s var(--ease);
}
.nav.scrolled .nav-rule{opacity:1}
.nav-progress{
  position:absolute;inset-inline:0;bottom:0;height:2.5px;pointer-events:none;z-index:2;
  transform-origin:left center;transform:scaleX(var(--nav-p,0));
  border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--coral) 0%,var(--rose) 26%,var(--lilac) 52%,var(--sky) 78%,var(--mint) 100%);
}

/* ---------- reveal system ---------- */
[data-reveal]{opacity:0;transform:translateY(26px) scale(.985);will-change:transform,opacity}
[data-reveal].in{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="zoom"]{transform:scale(.9)}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important}
  .aurora span,.grad-text,.float,.orb-ring,.marquee-track,.ai-ball,.ai-aura,.ai-wave i{animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- floats & orb ---------- */
.float{animation:float 7s ease-in-out infinite}
.float.d1{animation-delay:-1.4s}
.float.d2{animation-delay:-2.8s}
.float.d3{animation-delay:-4.2s}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}

.orb-wrap{position:relative;display:grid;place-items:center}
/* ===== Hero AI orb =======================================================
   The mentor as a friendly presence: a soft pastel sphere that is listening,
   with the question a teenager would actually ask it. No metrics, no charts —
   everything here is legible with every animation switched off. */
.ai-orb{
  position:relative;width:clamp(216px,28vw,288px);aspect-ratio:1;display:grid;place-items:center;
}
.ai-ball{
  position:relative;width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.95),rgba(255,255,255,0) 46%),
    linear-gradient(145deg,#FFB8A3 0%,#FFA9C6 19%,#C0AEFF 43%,#8FC0FF 64%,#7FE7DA 92%);
  box-shadow:
    0 40px 80px -28px rgba(120,110,220,.55),
    0 12px 30px -12px rgba(255,140,120,.4),
    inset 0 -18px 40px rgba(90,80,180,.18);
  animation:ballBreathe 7s ease-in-out infinite;
}
@keyframes ballBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.ai-gloss{
  position:absolute;left:16%;top:9%;width:44%;height:26%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  filter:blur(3px);transform:rotate(-14deg);pointer-events:none;
}

/* listening wave, straight through the middle of the sphere */
.ai-wave{display:flex;align-items:center;gap:5px;height:58px}
.ai-wave i{
  width:5px;border-radius:99px;background:rgba(255,255,255,.94);
  box-shadow:0 2px 6px rgba(60,50,140,.22);
  animation:aiEq 1.6s ease-in-out infinite;
}
@keyframes aiEq{0%,100%{transform:scaleY(.52)}50%{transform:scaleY(1)}}

/* soft "I'm listening" aura */
.ai-aura{
  position:absolute;inset:-9%;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(169,139,255,.28);
  animation:aura 4.6s ease-out infinite;
}
.ai-aura.a2{inset:-20%;border-color:rgba(63,210,199,.22);animation-delay:1.6s}
@keyframes aura{0%{transform:scale(.94);opacity:.85}70%{opacity:0}100%{transform:scale(1.16);opacity:0}}

/* the question capsule, sitting on the sphere's lower edge */
.ai-ask{
  position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.5rem;max-width:112%;
  padding:.62rem 1rem;border-radius:99px;white-space:nowrap;
  font-size:.95rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 18px 40px -18px rgba(16,22,54,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.ai-ask::after{
  content:"";position:absolute;left:26px;top:-6px;width:12px;height:12px;border-radius:3px;
  background:rgba(255,255,255,.92);transform:rotate(45deg);
}
#askText{display:inline-block;animation:askIn .5s var(--ease)}
@keyframes askIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* two drifting sparkles for the youth energy */
.ai-spark{position:absolute;opacity:.8;filter:drop-shadow(0 4px 10px rgba(16,22,54,.14))}
.ai-spark.s1{left:-7%;top:16%;color:var(--coral)}
.ai-spark.s2{right:-1%;top:4%;color:var(--teal)}
.ai-spark.s3{left:-4%;bottom:26%;color:var(--lilac)}

.orb-ring{
  position:absolute;border-radius:50%;border:1.5px dashed rgba(16,22,54,.14);
  animation:orbSpin 26s linear infinite;
}
.orb-ring.r2{animation-direction:reverse;animation-duration:38s;border-style:solid;border-color:rgba(16,22,54,.07)}
.orb-chip{
  position:absolute;display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .75rem;border-radius:99px;font-size:.75rem;font-weight:600;
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-md);backdrop-filter:blur(10px);
}

/* ---------- typing caret ---------- */
.caret{display:inline-block;width:3px;height:1em;vertical-align:-.12em;margin-left:.12em;border-radius:2px;
  background:linear-gradient(var(--coral),var(--sky));animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;padding:20px 0 32px;margin:-20px 0 -32px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:.85rem;width:max-content;animation:scrollX 52s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---------- category tile ---------- */
.cat{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:1.4rem;
  border:1px solid rgba(255,255,255,.8);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  box-shadow:var(--shadow-sm);
}
.cat:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.cat .blobby{
  position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:44% 56% 60% 40%/48% 42% 58% 52%;
  background:rgba(255,255,255,.55);transition:transform .7s var(--ease);
}
.cat:hover .blobby{transform:scale(1.35) rotate(24deg)}
.cat-ico{
  width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.8);box-shadow:var(--shadow-sm);font-size:1.35rem;
  transition:transform .5s var(--ease);
}
.cat:hover .cat-ico{transform:rotate(-8deg) scale(1.08)}

/* ---------- course thumb ---------- */
.thumb{position:relative;height:158px;border-radius:22px;overflow:hidden;display:grid;place-items:center}
.thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 15%,rgba(255,255,255,.65),transparent 55%)}
.thumb .glyph{font-size:3.2rem;filter:drop-shadow(0 8px 16px rgba(16,22,54,.18));transition:transform .6s var(--ease);z-index:1}
.card:hover .thumb .glyph{transform:scale(1.12) rotate(-6deg)}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;letter-spacing:.03em;
  padding:.3rem .6rem;border-radius:99px;background:rgba(255,255,255,.85);color:var(--ink-2);border:1px solid var(--line)}
.progress{height:6px;border-radius:99px;background:rgba(16,22,54,.08);overflow:hidden}
.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--sky));width:0;transition:width 1.4s var(--ease) .2s}
.in .progress i,
.progress.in i{width:var(--w,60%)}   /* .in on an ancestor (reveal) or on the bar itself */

/* ---------- path / journey ---------- */
.path-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(var(--p-peach),var(--p-sky),var(--p-mint));border-radius:2px}
.node{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-weight:800;color:#fff;
  box-shadow:0 14px 30px -12px rgba(16,22,54,.4)}

/* ---------- chat ---------- */
.chat-shell{border-radius:var(--r-xl);overflow:hidden}
/* --- WhatsApp-shaped conversation, in the Capital Academy palette --------
   Each bubble carries a notch on its bottom outer corner, drawn as a clip-path
   triangle on ::after so it inherits the bubble's exact fill (no seam, no SVG).
   The student surface is flat — a gradient could never join its own notch. */
:root{--chat-me:#2B5FD9;--chat-notch-w:9px;--chat-notch-h:11px;--chat-notch-overlap:3px}
@keyframes pop{to{opacity:1;transform:none}}

.chat-canvas{
  background-color:#F5F7FD;
  background-image:radial-gradient(rgba(16,22,54,.07) 1px,transparent 1px);
  background-size:22px 22px;background-attachment:local;
}
.chat-day{
  justify-self:center;margin:.15rem 0 .35rem;
  padding:.24rem .8rem;border-radius:99px;font-size:.68rem;font-weight:600;letter-spacing:.02em;
  color:var(--muted);background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.chat-row{display:flex;align-items:flex-end;gap:.45rem}
.chat-row.me{justify-content:flex-end}

.chat-ava{position:relative;display:block;overflow:hidden;border-radius:50%;flex:none;box-shadow:var(--shadow-sm)}
.chat-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chat-ava-msg{width:30px;height:30px;margin-bottom:1px;border:1.5px solid #fff}

.bubble{
  position:relative;max-width:78%;padding:.6rem .8rem .62rem;border-radius:14px;
  font-size:.9rem;line-height:1.55;
  opacity:0;transform:translateY(10px);animation:pop .5s var(--ease) forwards;
}
.bubble::after{content:"";position:absolute;bottom:0;width:var(--chat-notch-w);height:var(--chat-notch-h);pointer-events:none}
.bubble.ai{background:#fff;color:var(--ink);border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(16,22,54,.1)}
.bubble.ai::after{
  left:calc(var(--chat-notch-overlap) - var(--chat-notch-w));background:#fff;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.bubble.me{margin-left:auto;background:var(--chat-me);color:#fff;border-bottom-right-radius:4px;box-shadow:0 1px 2px rgba(16,22,54,.14)}
.bubble.me::after{
  right:calc(var(--chat-notch-overlap) - var(--chat-notch-w));background:var(--chat-me);
  clip-path:polygon(0 0,100% 100%,0 100%);
}
.bubble b{font-weight:700}
/* the stamp floats into the end of the last line, as WhatsApp does */
.stamp{
  float:right;margin-left:.55rem;transform:translateY(.42rem);
  display:inline-flex;align-items:center;gap:.15rem;
  font-size:.63rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);
}
.bubble.me .stamp{color:rgba(255,255,255,.72)}
.ticks{display:inline-flex;color:#8FE3FF}
.chat-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.dot-live{
  width:8px;height:8px;border-radius:50%;background:#22C55E;flex:none;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:live 2s ease-out infinite;
}
@keyframes live{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.dots{display:inline-flex;gap:4px;align-items:center}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bounce 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.wave{display:flex;align-items:center;gap:3px;height:22px}
.wave i{width:3px;border-radius:2px;background:linear-gradient(var(--mint),var(--sky));animation:eq 1.1s ease-in-out infinite}
@keyframes eq{0%,100%{height:6px}50%{height:20px}}

/* ---------- experts ---------- */
.avatar{
  width:84px;height:84px;border-radius:26px;display:grid;place-items:center;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:1.6rem;color:#fff;
  box-shadow:0 18px 36px -16px rgba(16,22,54,.45);transition:transform .55s var(--ease),border-radius .55s var(--ease)}
.card:hover .avatar{transform:scale(1.05) rotate(-4deg);border-radius:32px}

/* ---------- pricing ---------- */
.price-num{font-variant-numeric:tabular-nums}
.stepper{display:inline-flex;align-items:center;gap:.35rem;padding:5px;border-radius:99px;background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.stepper button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;font-weight:600;
  background:rgba(16,22,54,.05);color:var(--ink);transition:transform .35s var(--ease),background .35s var(--ease)}
.stepper button:hover:not(:disabled){background:linear-gradient(120deg,var(--mint),var(--sky));color:#fff;transform:scale(1.1)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.seat-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.62rem;font-weight:800;color:#fff;
  border:2px solid #fff;margin-left:-8px;animation:pop .45s var(--ease) forwards;opacity:0}

/* ---------- footer ---------- */
.f-link{color:var(--muted);transition:color .3s var(--ease),transform .3s var(--ease);display:inline-block}
.f-link:hover{color:var(--ink);transform:translateX(3px)}
.social{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.75);
  border:1px solid var(--line);transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.social:hover{transform:translateY(-3px);background:linear-gradient(120deg,var(--coral),var(--sky));color:#fff}

/* ---------- misc ---------- */
.noise-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.section{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0}
.count{font-variant-numeric:tabular-nums}
.mobile-menu{
  max-height:calc(100vh - 88px);overflow-y:auto;
  transition:opacity .4s var(--ease),transform .5s var(--ease),max-height .45s var(--ease),
             padding .45s var(--ease),margin-top .45s var(--ease),visibility .4s;
}
.mobile-menu[hidden-state="closed"]{
  opacity:0;transform:translateY(-12px);visibility:hidden;pointer-events:none;
  /* It must take up NO space. The header paints a background across its whole box
     once scrolled, and a closed-but-still-laid-out menu turned that into a slab
     covering most of a phone screen — invisible at the top, obvious after a scroll. */
  max-height:0;margin-top:0;padding-top:0;padding-bottom:0;border-width:0;overflow:hidden;
}

/* stacking fix: badges must sit above the thumb sheen */
.thumb .pill{z-index:2}

/* gradient text on the dark CTA — lift the dark stops out */
.grad-text.on-dark{
  background:linear-gradient(100deg,#FFB4A0 0%,#FFA9C6 26%,#C7B4FF 52%,#8CC4FF 76%,#7FE9DC 100%);
  background-size:220% 100%;
}

/* sticky-header-safe anchors */
section[id]{scroll-margin-top:96px}

/* ============================================================
   Lucide icons + real-photo cards (missions & experts)
   ============================================================ */
.lu{display:block;flex:none}
.ic-slot{display:inline-flex;align-items:center;justify-content:center}
.eyebrow .lu{margin-right:-.15rem}

/* Trust marquee — the hero's "Streak / 14 days" card, repeated and moving. */
.trust-card{
  display:inline-flex;align-items:center;gap:.7rem;flex:none;
  min-width:216px;padding:.72rem .95rem;border-radius:22px;
  background:var(--glass);border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.trust-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.trust-ic{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:13px;
  box-shadow:var(--shadow-sm);
}
.trust-txt{display:flex;flex-direction:column;min-width:0;line-height:1}
.trust-k{font-size:.74rem;color:var(--muted);white-space:nowrap}
.trust-v{
  font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;color:var(--ink);white-space:nowrap;margin-top:.28rem;
}

/* mission thumbnail (real 16:9 photo) */
.thumb-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--p-sky)}
.thumb-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease),filter .9s var(--ease);
}
.card:hover .thumb-img img{transform:scale(1.06)}
.thumb-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,22,54,.28) 0%,transparent 34%,transparent 72%,rgba(16,22,54,.14) 100%);
}
.thumb-img .pill{z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-color:rgba(255,255,255,.9)}

/* expert card — full-bleed portrait, scrim, action row */
.expert{
  position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:3/4;
  background:var(--p-lilac);box-shadow:var(--shadow-md);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.expert:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.expert img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.expert:hover img{transform:scale(1.05)}
.expert-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,12,32,.94) 0%,rgba(8,12,32,.7) 26%,rgba(8,12,32,.15) 55%,transparent 74%);
}
.expert-body{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.05rem 1.1rem}

/* ============================================================
   For-parents band
   ============================================================ */
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
}
.kicker i{display:block;width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--coral),var(--mint))}

.pitem{
  display:flex;align-items:flex-start;gap:.85rem;padding:1.1rem 1.15rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);
}
.pitem:hover{transform:translateY(-4px);background:rgba(255,255,255,.9);box-shadow:var(--shadow-md)}
.pitem-ic{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:13px;color:var(--indigo);
  background:linear-gradient(130deg,#FFFFFF,#E7EFFF);box-shadow:var(--shadow-sm);
}
.pitem b{display:block;font-size:1rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.pitem p{margin-top:.3rem;font-size:.9rem;line-height:1.6;color:var(--ink-2);opacity:.9}

/* Hero floats: they hang past the column on wide screens, tuck back in on small. */
.orb-wrap .f-tl{left:-18px;top:2%}
.orb-wrap .f-tr{right:-22px;top:16%}
.orb-wrap .f-bl{left:-16px;bottom:4%}
@media(max-width:1023px){
  .orb-wrap .f-tl,.orb-wrap .f-bl{left:0}
  .orb-wrap .f-tr{right:0}
  .ai-orb{width:clamp(196px,50vw,256px)}
}

/* ============================================================
   Language switcher
   ============================================================ */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem .7rem .55rem .75rem;border-radius:99px;
  font-size:.86rem;font-weight:600;color:var(--ink-2);
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(12px);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.lang-btn:hover{background:#fff;color:var(--ink);transform:translateY(-1px)}
.lang-code{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lang-chev{display:inline-flex;transition:transform .35s var(--ease);color:var(--muted)}
.lang.open .lang-chev{transform:rotate(180deg)}

.lang-menu{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:60;min-width:190px;
  padding:.4rem;border-radius:20px;list-style:none;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-lg);backdrop-filter:blur(18px) saturate(1.4);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{
  display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.5rem .65rem;border-radius:14px;font-size:.9rem;color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.lang-menu button:hover{background:rgba(16,22,54,.05);color:var(--ink)}
.lang-menu button[aria-selected="true"]{color:var(--ink);font-weight:600;
  background:linear-gradient(120deg,rgba(255,122,89,.12),rgba(169,139,255,.12),rgba(63,210,199,.14))}
.lang-name{flex:1;text-align:left}
.lang-tag{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.lang-tick{display:none;color:var(--teal)}
.lang-menu button[aria-selected="true"] .lang-tick{display:inline-flex}
.lang-menu button[aria-selected="true"] .lang-tag{display:none}

.lang-pill{
  padding:.4rem .7rem;border-radius:99px;font-size:.82rem;font-weight:600;text-transform:uppercase;
  color:var(--ink-2);background:rgba(16,22,54,.05);transition:all .3s var(--ease);
}
.lang-pill.on{color:#fff;background:linear-gradient(120deg,var(--coral),var(--lilac),var(--sky))}

/* ============================================================
   Course card — even rhythm, aligned rows, slicker hover
   ============================================================ */
/* The card must NOT clip: the ring is drawn over the card's own 1px border, so
   it replaces it instead of sitting inside it with a white line left over. Only
   the thumbnail needs clipping, and it rounds its own top corners. */
.course-card{
  display:flex;flex-direction:column;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.course-card .thumb-img{border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.course-card:hover{transform:translateY(-8px)}
.course-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg,var(--coral),var(--rose),var(--lilac),var(--sky),var(--mint));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;z-index:1;
}
.course-card:hover::after{opacity:1}

.course-body{display:flex;flex-direction:column;flex:1;padding:1.15rem 1.15rem 1.15rem}
.course-title{
  font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.08rem;line-height:1.35;
  letter-spacing:-.015em;
  min-height:2.7em;                        /* two lines, so every meta row lines up */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.course-meta{
  display:flex;align-items:center;gap:1rem;margin-top:.7rem;
  font-size:.84rem;color:var(--muted);
}
.course-meta span{display:inline-flex;align-items:center;gap:.4rem}
.course-foot{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
}
.course-card .course-foot{margin-top:1.05rem}
.go{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  font-size:.86rem;font-weight:600;color:var(--ink);
  transition:color .3s var(--ease);
}
.go .lu{transition:transform .45s var(--ease)}
.card:hover .go{color:var(--indigo)}
.card:hover .go .lu{transform:translateX(4px)}

/* the photo lifts and brightens with the card */
.card:hover .thumb-img img{transform:scale(1.07)}
.thumb-img img{transition:transform 1s var(--ease)}

/* flags in the language switcher (assets/flags, square-cropped, so a circle works) */
.flag{
  display:block;flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(16,22,54,.12),0 1px 3px rgba(16,22,54,.16);
}
.lang-menu .flag{width:24px;height:24px}
.lang-pill .flag{width:18px;height:18px}
.lang-pill{display:inline-flex;align-items:center;gap:.4rem}

/* ============================================================
   Expert roster — full-bleed marquee of expert cards
   ============================================================ */
.marquee-track.roster{gap:14px;animation-duration:86s}
.roster .expert{width:216px;flex:none}
@media(max-width:640px){.roster .expert{width:188px}}
/* the hovered card comes forward, the rest step back */
.marquee:hover .roster .expert{opacity:.55;filter:saturate(.72)}
.marquee .roster .expert:hover{opacity:1;filter:none}

/* ============================================================
   Certificate
   ============================================================ */
.cert{
  position:relative;border-radius:var(--r-xl);padding:14px;
  background:linear-gradient(140deg,#FFE6DB,#ECE4FF 42%,#DEEBFF 72%,#D8F6F1);
  box-shadow:0 40px 90px -40px rgba(16,22,54,.42);
  transform:rotate(-1.2deg);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
.cert:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 48px 110px -44px rgba(16,22,54,.5)}
.cert-in{
  position:relative;border-radius:calc(var(--r-xl) - 8px);
  padding:2.2rem 1.9rem 1.7rem;text-align:center;overflow:hidden;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.cert-in::before{                                  /* faint guilloche wash */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 15% 12%,rgba(255,122,89,.14),transparent 42%),
    radial-gradient(circle at 88% 82%,rgba(63,210,199,.16),transparent 44%);
}
.cert-seal{
  position:relative;display:grid;place-items:center;width:62px;height:62px;margin:0 auto 1.1rem;
  border-radius:50%;background:#fff;box-shadow:0 12px 26px -12px rgba(16,22,54,.45);
  border:1px solid rgba(16,22,54,.06);
}
.cert-seal img{width:40px;height:auto}
.cert-eyebrow{
  position:relative;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.cert-title{
  position:relative;font-family:'Outfit','Inter',sans-serif;font-weight:800;
  font-size:clamp(1.5rem,2.6vw,1.95rem);line-height:1.16;letter-spacing:-.03em;margin-top:.55rem;
}
.cert-name{
  position:relative;margin-top:1rem;font-size:1.35rem;color:var(--ink);
  font-family:'Outfit','Inter',sans-serif;font-weight:600;letter-spacing:-.01em;
}
.cert-rule{
  position:relative;display:block;width:132px;height:2px;margin:.55rem auto 1.2rem;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--lilac),var(--sky),transparent);
}
.cert-meta{
  position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem 1rem;
  padding-top:1.1rem;border-top:1px dashed rgba(16,22,54,.14);
}
.cert-meta span{display:flex;flex-direction:column;gap:.2rem;font-size:.7rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.cert-meta b{font-size:.94rem;color:var(--ink);letter-spacing:0;text-transform:none;
  font-family:'Outfit','Inter',sans-serif;font-weight:700}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;gap:.7rem}
.qa{
  border-radius:22px;overflow:hidden;
  background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(14px);
  transition:box-shadow .45s var(--ease),background .45s var(--ease);
}
.qa:hover{background:rgba(255,255,255,.9);box-shadow:var(--shadow-md)}
.qa[open]{background:rgba(255,255,255,.92);box-shadow:var(--shadow-md)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  padding:1.05rem 1.25rem;list-style:none;
  font-family:'Outfit','Inter',sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa-ico{
  display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;color:var(--ink-2);
  background:rgba(16,22,54,.05);transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.qa[open] .qa-ico{transform:rotate(180deg);color:#fff;background:linear-gradient(130deg,var(--lilac),var(--sky))}
.qa-a{padding:0 1.25rem 1.15rem;animation:qaIn .4s var(--ease)}
.qa-a p{font-size:.95rem;line-height:1.7;color:var(--ink-2);max-width:62ch}
@keyframes qaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* solid glyphs inside the expert action buttons (ca-fe fills these icons) */
.ic-solid .lu{fill:currentColor}

/* the roster cards lift on hover — give the strip room for their shadow */
.marquee-roster{padding:30px 0 52px;margin:-30px 0 -52px}

/* Capstone card: the media fills its grid column. `aspect-ratio` + `height:100%`
   would derive the width from the height and overflow the column instead. */
.capstone-media{
  aspect-ratio:auto;width:100%;height:100%;
  min-height:clamp(230px,25vw,330px);
}

/* certificate verification line */
.cert-verify{
  position:relative;display:inline-flex;align-items:center;gap:.4rem;margin-top:1.05rem;
  padding:.34rem .75rem;border-radius:99px;
  font-size:.72rem;font-weight:700;letter-spacing:.01em;color:#0F7A5A;
  background:linear-gradient(120deg,#D8F6F1,#DCEBFF);
  box-shadow:var(--shadow-sm);
}

/* ============================================================
   Classes page (classes.html)
   ============================================================ */
.crumbs{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
.crumbs a{color:var(--ink-2);transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

.stat-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  padding:1.1rem .6rem;border-radius:24px;text-align:center;
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(14px);
}
.stat-tile span:last-child{font-size:.78rem;color:var(--muted)}

.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;
  padding:.85rem 1rem;border-radius:26px;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-md);backdrop-filter:blur(16px) saturate(1.3);
}
.search{
  display:flex;align-items:center;gap:.6rem;flex:1 1 260px;min-width:0;
  padding:.6rem .9rem;border-radius:99px;color:var(--muted);
  background:#fff;border:1px solid var(--line);
  transition:box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.search:focus-within{border-color:transparent;box-shadow:0 0 0 2px rgba(59,142,240,.35),var(--shadow-sm)}
.search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-size:.95rem;color:var(--ink);font-family:inherit;
}
.search input::placeholder{color:var(--muted)}
.search input::-webkit-search-cancel-button{display:none}
.search button{
  flex:none;width:22px;height:22px;border-radius:50%;line-height:1;font-size:1rem;
  color:var(--muted);background:rgba(16,22,54,.06);transition:all .3s var(--ease);
}
.search button:hover{color:var(--ink);background:rgba(16,22,54,.12)}

.empty{
  display:grid;place-items:center;text-align:center;
  padding:4rem 1.5rem;margin-top:1rem;border-radius:var(--r-xl);color:var(--muted);
  background:rgba(255,255,255,.55);border:1px dashed rgba(16,22,54,.14);
}

/* ============================================================
   Experts grid (experts.html) — the person only, no class attached
   ============================================================ */
.ecard{
  position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:3/4;
  background:var(--p-lilac);box-shadow:var(--shadow-md);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.ecard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.ecard > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease);
}
.ecard:hover > img{transform:scale(1.06)}

/* stretched link: covers the card, sits under the action buttons */
.ecard-link{position:absolute;inset:0;z-index:2}
.ecard-link:focus-visible{outline:3px solid var(--sky);outline-offset:-3px;border-radius:inherit}

.ecard-go{
  position:absolute;top:.8rem;right:.8rem;z-index:3;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--ink);
  background:rgba(255,255,255,.9);box-shadow:var(--shadow-sm);backdrop-filter:blur(8px);
  opacity:0;transform:translate(6px,-6px) scale(.9);
  transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.ecard:hover .ecard-go{opacity:1;transform:none}

.ecard .expert-body{z-index:3;pointer-events:none}
.ecard-name{
  display:flex;align-items:center;gap:.3rem;
  font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;color:#fff;line-height:1.2;
}
.ecard-role{font-size:.8rem;color:rgba(255,255,255,.72);margin-top:.15rem;line-height:1.35}
.ecard-profile{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:.55rem;
  font-size:.78rem;font-weight:600;color:rgba(255,255,255,.9);
  opacity:0;max-height:0;overflow:hidden;
  transition:opacity .35s var(--ease),max-height .45s var(--ease);
}
.ecard:hover .ecard-profile{opacity:1;max-height:1.6rem}
.ecard-profile .lu{transition:transform .4s var(--ease)}
.ecard:hover .ecard-profile .lu{transform:translateX(3px)}
.ecard-actions{margin-top:.7rem;pointer-events:auto;position:relative;z-index:4}


/* ============================================================
   Class detail page (class.html)
   ============================================================ */
.cd-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.5rem;
  align-items:start;margin-top:1.6rem;
}
@media(max-width:1023px){.cd-grid{grid-template-columns:minmax(0,1fr);gap:2rem}}

/* ---- head ---- */
.cd-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.cd-title{
  font-family:'Outfit','Inter',sans-serif;font-weight:800;
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.06;letter-spacing:-.03em;
  color:var(--ink);margin-top:1rem;
}
.cd-intro{font-size:1.06rem;line-height:1.75;color:var(--ink-2);margin-top:1.1rem;max-width:62ch}
.cd-meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1.4rem;
  font-size:.88rem;color:var(--muted);
}
.cd-meta span{display:inline-flex;align-items:center;gap:.45rem}

/* ---- trailer ---- */
.cd-video{
  position:relative;margin-top:1.8rem;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:16/9;background:var(--p-sky);box-shadow:0 34px 80px -36px rgba(16,22,54,.45);
}
.cd-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cd-video-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,22,54,.3) 0%,transparent 34%,transparent 62%,rgba(16,22,54,.42) 100%);
}
.cd-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:74px;height:74px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.5);box-shadow:0 18px 40px -16px rgba(16,22,54,.7);
  transition:transform .45s var(--ease),background .45s var(--ease);
}
.cd-play:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.28)}
.cd-video-cap{
  position:absolute;left:1rem;bottom:1rem;display:inline-flex;align-items:center;gap:.45rem;
  padding:.34rem .75rem;border-radius:99px;font-size:.74rem;font-weight:700;color:#fff;
  background:rgba(16,22,54,.5);backdrop-filter:blur(8px);
}
.cd-live{width:7px;height:7px;border-radius:50%;background:#FF7A59;box-shadow:0 0 0 0 rgba(255,122,89,.6);
  animation:live 2s ease-out infinite}

/* ---- expert strip ---- */
.cd-expert{
  display:flex;align-items:center;gap:1rem;margin-top:1.4rem;padding:.9rem 1.1rem;
  border-radius:var(--r-lg);background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-sm);backdrop-filter:blur(14px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);
}
.cd-expert:hover{transform:translateY(-3px);background:rgba(255,255,255,.92);box-shadow:var(--shadow-md)}
.cd-expert-photo{position:relative;flex:none;width:62px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:var(--shadow-sm)}
.cd-expert-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd-expert-body{display:flex;flex-direction:column;min-width:0}
.cd-expert-k{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cd-expert-name{display:flex;align-items:center;gap:.3rem;margin-top:.2rem;
  font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.08rem;color:var(--ink)}
.cd-expert-role{font-size:.88rem;color:var(--muted);margin-top:.05rem}
.cd-expert-go{display:inline-flex;align-items:center;gap:.3rem;margin-top:.45rem;
  font-size:.8rem;font-weight:600;color:var(--indigo)}
.cd-expert-go .lu{transition:transform .4s var(--ease)}
.cd-expert:hover .cd-expert-go .lu{transform:translateX(3px)}

/* ---- sections ---- */
.cd-sec{margin-top:3rem}
.cd-kicker{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.cd-h2{
  font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.8vw,2rem);
  line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-top:.6rem;
}
.cd-p{font-size:1rem;line-height:1.8;color:var(--ink-2);margin-top:1rem;max-width:64ch}

.cd-list{display:grid;gap:.8rem;margin-top:1.3rem}
.cd-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:1rem;line-height:1.65;color:var(--ink-2)}
.cd-tick{
  display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;margin-top:.15rem;
  color:#fff;background:linear-gradient(130deg,var(--mint),var(--sky));
}

/* ---- topics ---- */
.cd-topics{display:grid;gap:.6rem;margin-top:1.3rem;counter-reset:t}
.cd-topic{
  display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.15rem;border-radius:22px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(12px);
  transition:transform .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
}
.cd-topic:hover{transform:translateX(4px);background:rgba(255,255,255,.92);box-shadow:var(--shadow-md)}
.cd-topic-n{
  flex:none;font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.05rem;
  background-image:linear-gradient(140deg,var(--coral),var(--lilac) 55%,var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:.75;
}
.cd-topic b{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.02rem;color:var(--ink)}
.cd-topic p{font-size:.92rem;line-height:1.6;color:var(--ink-2);opacity:.9;margin-top:.25rem}

/* ---- final activity ---- */
.cd-activity{
  margin-top:1.3rem;padding:1.6rem;border-radius:var(--r-xl);
  background:linear-gradient(150deg,#FFF4EE 0%,#F3F1FF 46%,#E9F8F5 100%);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 70px -40px rgba(16,22,54,.35);
}
.cd-activity-head{display:flex;align-items:flex-start;gap:1rem}
.cd-activity-ic{
  display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:16px;color:var(--coral);
  background:#fff;box-shadow:var(--shadow-sm);
}
.cd-steps{display:grid;gap:.55rem;margin-top:1.3rem}
.cd-steps li{
  display:flex;align-items:center;gap:.8rem;padding:.75rem .95rem;border-radius:16px;
  font-size:.98rem;color:var(--ink-2);background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.9);
}
.cd-step-n{
  display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  font-size:.78rem;font-weight:800;color:#fff;background:linear-gradient(130deg,var(--coral),var(--lilac));
}

/* ---- skills ---- */
.cd-skills{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.3rem}
.cd-skill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:99px;
  font-size:.92rem;font-weight:600;color:var(--ink-2);
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.cd-skill .lu{color:var(--lilac)}
.cd-skill:hover{transform:translateY(-2px);color:var(--ink);background:#fff}

/* ---- "outline coming" fallback ---- */
.cd-soon{
  display:grid;place-items:center;text-align:center;gap:.3rem;
  margin-top:2.5rem;padding:3rem 1.5rem;border-radius:var(--r-xl);color:var(--muted);
  background:rgba(255,255,255,.55);border:1px dashed rgba(16,22,54,.14);
}

/* ---- sticky sidebar ---- */
.cd-side{position:sticky;top:96px}
@media(max-width:1023px){.cd-side{position:static}}
.cd-card{
  border-radius:var(--r-xl);overflow:hidden;background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-lg);backdrop-filter:blur(18px) saturate(1.3);
}
.cd-card-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--p-sky)}
.cd-card-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd-card-body{padding:1.2rem}
.cd-card-price{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink)}
.cd-card-sub{font-size:.84rem;color:var(--muted);margin-top:.2rem}
.cd-facts{display:grid;gap:.7rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.cd-facts li{display:flex;align-items:flex-start;gap:.6rem;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.cd-facts .lu{flex:none;margin-top:.12rem}

/* class cards link to their detail page; the link covers the card */
.card-link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.card-link:focus-visible{outline:3px solid var(--sky);outline-offset:-3px}
.course-card .course-foot .go{position:relative;z-index:4}

/* the FAQ list needs the same breathing room under a heading as the other blocks */
.cd-sec .faq{margin-top:1.5rem}

/* ============================================================
   Expert detail page (expert.html)
   ============================================================ */
.xd-head{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.xd-avatar{
  position:relative;flex:none;width:132px;aspect-ratio:1;border-radius:34px;overflow:hidden;
  background:var(--p-lilac);box-shadow:0 26px 60px -28px rgba(16,22,54,.5);
}
.xd-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xd-title{display:flex;align-items:center;gap:.55rem;margin-top:0;flex-wrap:wrap}
.xd-role{font-size:1.05rem;color:var(--muted);margin-top:.5rem}
.xd-actions{margin-top:1.1rem}
.xd-bio{margin-top:1.6rem}

.xd-classes{display:grid;gap:.7rem;margin-top:1.4rem}
.xclass{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:1.1rem;
  padding:.8rem 1.1rem .8rem .8rem;border-radius:24px;
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(12px);
  transition:transform .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
}
.xclass:hover{transform:translateX(4px);background:rgba(255,255,255,.94);box-shadow:var(--shadow-md)}
.xclass-thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--p-sky)}
.xclass-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.xclass:hover .xclass-thumb img{transform:scale(1.07)}
.xclass-body{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.xclass-body .pill{align-self:flex-start}
.xclass-body b{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.05rem;
  letter-spacing:-.015em;color:var(--ink);line-height:1.3}
.xclass-meta{display:flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--muted);flex-wrap:wrap}
.xclass-meta .lu{margin-left:.5rem}
.xclass-meta .lu:first-child{margin-left:0}
.xclass-go{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;color:var(--ink-2);
  background:rgba(16,22,54,.05);transition:all .4s var(--ease);
}
.xclass:hover .xclass-go{color:#fff;background:linear-gradient(130deg,var(--lilac),var(--sky));transform:translateX(3px)}

@media(max-width:640px){
  .xclass{grid-template-columns:84px minmax(0,1fr);gap:.85rem}
  .xclass-go{display:none}
  .xd-avatar{width:96px}
}

/* ---- expert page sidebar: their AI, not an enrol card ---- */
.ai-panel{
  border-radius:var(--r-xl);overflow:hidden;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);
  box-shadow:var(--shadow-lg);backdrop-filter:blur(18px) saturate(1.3);
}
.ai-panel-head{
  display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;
  background:linear-gradient(120deg,#FFF0E9,#F0EEFF 52%,#E6F7F3);
  border-bottom:1px solid rgba(255,255,255,.9);
}
.ai-panel-ava{position:relative;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:2px solid #fff;box-shadow:var(--shadow-sm)}
.ai-panel-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ai-panel-name{display:flex;align-items:center;gap:.3rem;
  font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1rem;color:var(--ink)}
.ai-panel-state{display:flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--muted);margin-top:.15rem}

.ai-panel-chat{
  /* Fixed height, not min-height: the box must not grow while the greeting types
     itself out. The finished conversation measures 254px in the desktop sidebar
     and 260px in a 300px-wide panel, so 272px covers every width with headroom.
     The waiting rows already hold their space (visibility, not display). */
  padding:.9rem .9rem 1.1rem;display:grid;gap:.5rem;align-content:start;
  height:272px;overflow:hidden;
}
.ai-panel-chat .bubble{max-width:88%;font-size:.86rem}
.ai-panel-k{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ai-panel-foot-bar{
  padding:1.1rem 1.1rem 1.2rem;border-top:1px solid var(--line);background:rgba(255,255,255,.7);
}

.ai-panel-foot{
  display:flex;align-items:flex-start;gap:.45rem;margin-top:1.1rem;
  font-size:.76rem;line-height:1.5;color:var(--muted);
}
.ai-panel-foot .lu{flex:none;margin-top:.1rem;color:var(--teal)}

/* ============================================================
   Student dashboard (dashboard.html)
   ============================================================ */
.dash-body-bg{background:#F7F8FD}
.dash{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}

/* ---- sidebar ---- */
.ds-side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:.35rem;
  padding:1.4rem 1rem;background:rgba(255,255,255,.72);
  border-right:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.3);
}
.ds-logo{display:block;padding:.2rem .6rem 1.4rem}
.ds-logo img{height:42px;width:auto}
.ds-nav{display:grid;gap:.2rem}
.ds-navlink{
  display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:14px;
  font-size:.92rem;font-weight:500;color:var(--ink-2);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.ds-navlink:hover{background:rgba(16,22,54,.05);color:var(--ink)}
.ds-navlink.on{
  color:var(--ink);font-weight:600;
  background:linear-gradient(120deg,rgba(255,122,89,.14),rgba(169,139,255,.14),rgba(63,210,199,.16));
}
.ds-navlink .lu{flex:none;color:var(--muted)}
.ds-navlink.on .lu{color:var(--indigo)}
.ds-navlock{margin-left:auto;color:var(--muted);opacity:.7}
.ds-signout{margin-top:auto;color:var(--muted)}
.ds-signout .lu{transform:rotate(0)}

.ds-side-card{
  margin-top:1.2rem;padding:.95rem;border-radius:20px;
  background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.ds-side-card.is-cta{background:linear-gradient(150deg,#FFF0E9,#EFEBFF 55%,#E6F7F3);border-color:rgba(255,255,255,.9)}
.ds-side-k{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ds-side-v{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);margin-top:.25rem}
.ds-side-note{font-size:.76rem;color:var(--muted);margin-top:.5rem}

/* ---- main ---- */
.ds-main{padding:1.6rem clamp(1rem,3vw,2.4rem) 3rem;min-width:0}
.ds-top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.ds-hello{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);
  letter-spacing:-.025em;color:var(--ink)}
.ds-sub{font-size:.94rem;color:var(--muted);margin-top:.3rem}
.ds-top-right{display:flex;align-items:center;gap:.5rem}
.ds-chip{
  display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;border-radius:99px;
  font-size:.86rem;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.ds-ava{position:relative;display:block;width:42px;height:42px;border-radius:50%;overflow:hidden;
  border:2px solid #fff;box-shadow:var(--shadow-sm)}
.ds-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}

.ds-demo{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:1.1rem;padding:.3rem;border-radius:99px;
  font-size:.78rem;background:rgba(16,22,54,.05);border:1px dashed rgba(16,22,54,.14);
}
.ds-demo span{padding:0 .6rem;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.66rem}
.ds-demo a{padding:.35rem .8rem;border-radius:99px;color:var(--ink-2);font-weight:600;transition:all .3s var(--ease)}
.ds-demo a.on{color:#fff;background:linear-gradient(120deg,var(--coral),var(--lilac),var(--sky))}

.ds-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.4rem;margin-top:1.4rem;align-items:start}
.ds-col{display:grid;gap:1.4rem;min-width:0}

.ds-k{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.ds-h2{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--ink);margin-top:.35rem}
.ds-note{font-size:.86rem;color:var(--muted);line-height:1.55}

/* ---- continue ---- */
.ds-continue{
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.3rem;padding:1rem;
  border-radius:var(--r-lg);background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-md);
}
.ds-continue-media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/11;background:var(--p-sky)}
.ds-continue-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds-continue-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.2);backdrop-filter:blur(8px);border:1.5px solid rgba(255,255,255,.5);
}
.ds-continue-body{display:flex;flex-direction:column;justify-content:center;padding-right:.4rem}
.ds-continue-cta{display:flex;align-items:center;gap:.9rem;margin-top:1rem;flex-wrap:wrap}

/* ---- unlock (new account) ---- */
.ds-unlock{
  position:relative;overflow:hidden;padding:1.7rem;border-radius:var(--r-lg);
  background:linear-gradient(150deg,#FFF4EE 0%,#F3F1FF 46%,#E9F8F5 100%);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-md);
}
.ds-unlock-h{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.12;letter-spacing:-.03em;color:var(--ink);margin-top:.9rem}
.ds-unlock-list{display:grid;gap:.5rem;margin-top:1.2rem}
.ds-unlock-list li{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--ink-2)}
.ds-unlock-list .lu{flex:none;padding:3px;border-radius:50%;color:#fff;
  background:linear-gradient(130deg,var(--mint),var(--sky));box-sizing:content-box}

/* ---- stats ---- */
.ds-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.ds-stat{
  display:flex;align-items:center;gap:.7rem;padding:.9rem;border-radius:20px;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
}
.ds-stat.is-locked{opacity:.65}
.ds-stat-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:13px;color:var(--ink)}
.ds-stat-v{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ds-stat-l{font-size:.76rem;color:var(--muted)}

/* ---- sections & cards ---- */
.ds-sec-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.ds-more{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--indigo)}
.ds-more .lu{transition:transform .35s var(--ease)}
.ds-more:hover .lu{transform:translateX(3px)}

.ds-card{
  padding:1.1rem;border-radius:var(--r-lg);background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
}
.ds-card-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.ds-card-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:14px;color:var(--ink)}
.ds-card-t{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1rem;color:var(--ink)}
.ds-mini-chat{padding:.7rem;border-radius:18px}
.ds-mini-chat .bubble{max-width:100%;font-size:.84rem}
.ds-locked-box{
  display:grid;place-items:center;gap:.5rem;text-align:center;padding:1.5rem 1rem;border-radius:18px;
  color:var(--muted);background:rgba(16,22,54,.035);border:1px dashed rgba(16,22,54,.14);
}
.ds-locked-box p{font-size:.84rem;line-height:1.5;max-width:30ch}

.xclass.is-locked{opacity:.72}
.xclass.is-locked:hover{transform:none}
.ds-lock{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:rgba(16,22,54,.45);backdrop-filter:blur(2px);
}

@media(max-width:1180px){.ds-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  .dash{grid-template-columns:minmax(0,1fr)}
  .ds-side{position:static;height:auto;flex-direction:row;align-items:center;gap:.5rem;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--line);padding:.7rem 1rem}
  .ds-logo{padding:0 .8rem 0 0}
  .ds-logo img{height:34px}
  .ds-nav{display:flex;gap:.2rem}
  .ds-navlink span{display:none}
  .ds-side-card,.ds-signout{display:none}
  .ds-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-continue{grid-template-columns:minmax(0,1fr)}
}

/* ---- AI tutor add-on checkbox on the plans ---- */
.addon{
  display:flex;align-items:flex-start;gap:.75rem;margin-top:1.5rem;padding:.9rem 1rem;
  border-radius:20px;cursor:pointer;
  background:rgba(255,255,255,.7);border:1px solid var(--line);
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.addon:hover{background:#fff;box-shadow:var(--shadow-sm)}
.addon input{position:absolute;opacity:0;width:0;height:0}
.addon-box{
  display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;margin-top:.1rem;
  color:transparent;background:#fff;border:1.5px solid rgba(16,22,54,.2);
  transition:all .3s var(--ease);
}
.addon input:checked ~ .addon-box{
  color:#fff;border-color:transparent;
  background:linear-gradient(130deg,var(--mint),var(--sky));
}
.addon input:focus-visible ~ .addon-box{outline:3px solid rgba(59,142,240,.4);outline-offset:2px}
.addon:has(input:checked){
  border-color:transparent;background:linear-gradient(120deg,#EFFBF7,#F1F5FF);
  box-shadow:inset 0 0 0 1.5px rgba(63,210,199,.4);
}
.addon-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.addon-body b{font-size:.92rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.addon-body span{font-size:.82rem;color:var(--muted);line-height:1.5}
.addon-price{
  font-size:.72rem;font-weight:800;letter-spacing:.02em;color:#0F7A5A;
  padding:.18rem .5rem;border-radius:99px;background:#D8F6F1;
}

/* ---- per-class AI tutor marker on dashboard class rows ---- */
.xclass{position:relative}
.ds-tutor{
  position:absolute;top:.55rem;right:.55rem;z-index:2;
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  color:var(--muted);background:rgba(16,22,54,.06);border:1px solid var(--line);
}
.ds-tutor.on{color:#fff;border-color:transparent;background:linear-gradient(130deg,var(--lilac),var(--sky))}
.ds-addon-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--indigo);font-weight:600}
.ds-addon-link:hover{text-decoration:underline}

/* ============================================================
   Dashboard chrome: academy link + realtime notifications
   ============================================================ */
.ds-chrome{display:flex;align-items:center;gap:.55rem}
.ds-academy{
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border-radius:99px;
  font-size:.85rem;font-weight:600;color:var(--ink-2);
  background:rgba(255,255,255,.85);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:all .35s var(--ease);
}
.ds-academy:hover{color:var(--ink);background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.ds-academy .lu:last-child{color:var(--muted)}
@media(max-width:760px){.ds-academy span{display:none}}

.nt{position:relative}
.nt-btn{
  position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--ink-2);background:rgba(255,255,255,.85);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:all .35s var(--ease);
}
.nt-btn:hover{color:var(--ink);background:#fff}
.nt-dot{
  position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;
  background:#FF7A59;border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(255,122,89,.6);animation:live 2s ease-out infinite;
}
.nt-panel{
  position:absolute;top:calc(100% + .6rem);right:0;z-index:70;width:min(340px,86vw);
  border-radius:22px;overflow:hidden;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-lg);backdrop-filter:blur(18px) saturate(1.4);
  display:flex;flex-direction:column;max-height:min(70vh,430px);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility .3s;
}
.nt.open .nt-panel{opacity:1;visibility:visible;transform:none}
.nt-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.nt-head p{display:flex;align-items:center;gap:.5rem;font-family:'Outfit','Inter',sans-serif;
  font-weight:700;font-size:.95rem;color:var(--ink)}
.nt-clear{font-size:.76rem;font-weight:600;color:var(--indigo)}
.nt-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.nt-item{display:flex;gap:.7rem;padding:.85rem 1rem;border-bottom:1px solid rgba(16,22,54,.05);position:relative}
.nt-item.is-unread{background:rgba(59,142,240,.05)}
.nt-item.is-unread::before{content:"";position:absolute;left:.35rem;top:1.15rem;width:6px;height:6px;
  border-radius:50%;background:var(--sky)}
.nt-item.is-new{animation:ntIn .5s var(--ease)}
@keyframes ntIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nt-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:12px;color:var(--ink)}
.nt-t{font-weight:600;font-size:.88rem;color:var(--ink)}
.nt-d{font-size:.8rem;color:var(--muted);line-height:1.45;margin-top:.1rem}
.nt-w{font-size:.7rem;color:var(--muted);opacity:.8;margin-top:.25rem}

/* ---- per-class certificates on the student dashboard ---- */
.ds-certs{display:grid;gap:.5rem}
.ds-certs li{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .7rem;border-radius:14px;
  background:rgba(255,255,255,.7);border:1px solid var(--line)}
.ds-certs li.is-pending{opacity:.75}
.ds-certs b{display:block;font-size:.88rem;font-weight:600;color:var(--ink)}
.ds-cert-ic{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;color:#fff;
  background:linear-gradient(130deg,var(--mint),var(--sky))}
.ds-cert-ic.is-pending{color:var(--muted);background:rgba(16,22,54,.08)}

/* ============================================================
   Family owner dashboard (family.html)
   ============================================================ */
.fm-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:1rem;
  padding:.95rem 1.1rem;border-radius:22px;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.fm-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.fm-ava{
  display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:16px;color:#fff;
  font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.15rem;
  box-shadow:var(--shadow-sm);
}
.fm-name{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1rem;color:var(--ink);
  display:flex;align-items:center;gap:.45rem}
.fm-age{font-size:.72rem;font-weight:700;color:var(--muted);padding:.1rem .45rem;border-radius:99px;
  background:rgba(16,22,54,.06)}
.fm-meta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}
.fm-ai{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:99px;
  font-size:.76rem;font-weight:600;color:var(--muted);background:rgba(16,22,54,.05)}
.fm-ai.on{color:#fff;background:linear-gradient(130deg,var(--lilac),var(--sky))}
.fm-manage{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted);
  background:rgba(16,22,54,.05);transition:all .35s var(--ease)}
.fm-manage:hover{color:var(--ink);background:rgba(16,22,54,.1)}

.fm-invite{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:1rem;
  padding:.8rem 1.1rem;border-radius:20px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);
}
.fm-invite-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;
  color:var(--ink-2);background:rgba(16,22,54,.05)}
.fm-invite-cta{display:flex;gap:.4rem}
.fm-state{padding:.3rem .65rem;border-radius:99px;font-size:.74rem;font-weight:700}
.fm-state.is-pending{color:#8A6100;background:#FFF3D6}
.fm-state.is-accepted{color:#0F7A5A;background:#D8F6F1}
.fm-invite-add{
  display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem;border-radius:20px;
  font-size:.9rem;font-weight:600;color:var(--ink-2);
  background:rgba(255,255,255,.5);border:1px dashed rgba(16,22,54,.18);
  transition:all .35s var(--ease);
}
.fm-invite-add:hover{color:var(--ink);background:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}

.fm-bill{display:grid;gap:.55rem}
.fm-bill li{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--muted)}
.fm-bill b{font-family:'Outfit','Inter',sans-serif;font-weight:700;color:var(--ink);text-align:right}
.fm-week{display:grid;gap:.6rem}
.fm-week li{display:flex;align-items:center;gap:.55rem;font-size:.88rem;color:var(--ink-2)}

@media(max-width:760px){
  .fm-row{grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem}
  .fm-meta{grid-column:2 / span 2;justify-content:flex-start;margin-top:.2rem}
  .fm-invite{grid-template-columns:auto minmax(0,1fr) auto}
  .fm-invite-cta{grid-column:2 / span 2;justify-content:flex-start}
}

/* Capstone card: same reasoning as .course-card — it stops clipping, and its
   media rounds the corners it actually touches. */
#capstone article{overflow:visible}
.capstone-media{border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
@media(min-width:768px){
  .capstone-media{border-radius:calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px)}
}

/* achievement badges under the finished-class list */
.ds-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.ds-badge{
  display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:99px;
  font-size:.76rem;font-weight:700;color:#fff;
  background:linear-gradient(130deg,var(--coral),var(--lilac));
}
.ds-badge:nth-child(2){background:linear-gradient(130deg,var(--sky),var(--mint))}
.ds-badge.is-muted{color:var(--muted);background:rgba(16,22,54,.06)}

/* ============================================================
   Progress page (progress.html)
   ============================================================ */
.pg-chart{display:flex;align-items:flex-end;gap:.6rem;height:130px;padding:0 .2rem}
.pg-bar{
  position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;gap:.35rem;
}
.pg-bar i{
  display:block;width:100%;max-width:34px;height:var(--h);border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,var(--sky),var(--mint));
  box-shadow:0 6px 14px -8px rgba(59,142,240,.8);
  transition:filter .3s var(--ease);
}
.pg-bar:hover i{filter:brightness(1.08)}
.pg-bar b{position:absolute;top:0;font-size:.74rem;font-weight:700;color:var(--ink-2)}
.pg-bar span{font-size:.68rem;color:var(--muted)}

.pg-streak{display:flex;align-items:center;gap:.25rem;margin-top:1.1rem;flex-wrap:wrap}
.pg-day{width:14px;height:14px;border-radius:5px;background:rgba(16,22,54,.07)}
.pg-day.on{background:linear-gradient(140deg,var(--coral),var(--orange))}
.pg-day.is-today{box-shadow:0 0 0 2px rgba(255,122,89,.35)}

.pg-modules{display:grid;gap:.5rem}
.pg-modules li{
  display:flex;align-items:flex-start;gap:.7rem;padding:.7rem .8rem;border-radius:16px;
  background:rgba(255,255,255,.7);border:1px solid var(--line);
}
.pg-modules li.is-now{background:linear-gradient(120deg,#F1F6FF,#EFFBF7);border-color:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(59,142,240,.28)}
.pg-modules li.is-todo{opacity:.6}
.pg-modules b{display:block;font-size:.9rem;font-weight:600;color:var(--ink)}
.pg-mod-ic{
  display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;margin-top:.1rem;
  color:#fff;background:linear-gradient(130deg,var(--mint),var(--sky));
}
.pg-modules li.is-now .pg-mod-ic{background:linear-gradient(130deg,var(--coral),var(--lilac))}
.pg-modules li.is-todo .pg-mod-ic{color:var(--muted);background:rgba(16,22,54,.08)}

.pg-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;
  padding:.8rem 1.1rem .8rem .8rem;border-radius:22px;
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pg-row:hover{transform:translateX(3px);box-shadow:var(--shadow-md)}
.pg-row.is-idle{opacity:.72}
.pg-thumb{position:relative;display:block;width:86px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--p-sky)}
.pg-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-body{display:flex;flex-direction:column;min-width:0}
.pg-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pg-top b{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.98rem;color:var(--ink)}
.pg-state{
  display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border-radius:99px;
  font-size:.7rem;font-weight:700;color:var(--muted);background:rgba(16,22,54,.06);
}
.pg-state.is-done{color:#0F7A5A;background:#D8F6F1}
.pg-state.is-active{color:#2B5FD9;background:#DEEBFF}
.pg-pct{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);
  font-variant-numeric:tabular-nums}

.pg-quiz{display:grid;gap:.55rem}
.pg-quiz li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.6rem .7rem;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid var(--line)}
.pg-quiz b{display:block;font-size:.86rem;font-weight:600;color:var(--ink)}
.pg-score{flex:none;padding:.25rem .55rem;border-radius:99px;font-size:.78rem;font-weight:800;
  color:#2B5FD9;background:#DEEBFF}
.pg-score.is-full{color:#0F7A5A;background:#D8F6F1}

@media(max-width:640px){
  .pg-row{grid-template-columns:auto minmax(0,1fr);gap:.75rem}
  .pg-pct{grid-column:2;justify-self:end}
  .pg-chart{height:110px;gap:.35rem}
}

/* progress page layout */
.pg-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.4rem;margin-top:1.4rem;align-items:start}
.pg-wrap{display:grid;gap:1.4rem;min-width:0}
.pg-rail{display:grid;gap:1.4rem;position:sticky;top:1.6rem}
@media(max-width:1180px){.pg-grid{grid-template-columns:minmax(0,1fr)}.pg-rail{position:static}}

/* ---- rows / grid toggle ---- */
.pg-tools{display:flex;align-items:center;gap:.8rem}
.pg-view{display:inline-flex;padding:3px;border-radius:99px;background:rgba(16,22,54,.06);border:1px solid var(--line)}
.pg-view button{
  display:grid;place-items:center;width:32px;height:28px;border-radius:99px;color:var(--muted);
  transition:all .3s var(--ease);
}
.pg-view button:hover{color:var(--ink)}
.pg-view button.on{color:var(--ink);background:#fff;box-shadow:var(--shadow-sm)}

.pg-list{display:grid;gap:.65rem}
.pg-list.is-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
@media(max-width:1240px){.pg-list.is-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.pg-list.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.pg-list.is-grid{grid-template-columns:minmax(0,1fr)}}
/* grid view: the row becomes a card, thumbnail on top */
.pg-list.is-grid .pg-row{
  grid-template-columns:minmax(0,1fr);align-items:stretch;gap:.75rem;padding:.7rem;
}
.pg-list.is-grid .pg-thumb{width:100%;aspect-ratio:16/10;border-radius:16px}
.pg-list.is-grid .pg-top{flex-direction:column;align-items:flex-start;gap:.35rem}
.pg-list.is-grid .pg-top b{font-size:.88rem;line-height:1.3}
.pg-list.is-grid .pg-pct{
  position:absolute;top:1.1rem;right:1.1rem;z-index:2;
  padding:.15rem .45rem;border-radius:99px;font-size:.76rem;
  background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);
}
.pg-list.is-grid .pg-row{position:relative}
.pg-list.is-grid .pg-row:hover{transform:translateY(-4px)}

/* ---- the ring ---- */
.pg-ring-card{display:grid;justify-items:center;text-align:center}
.pg-ring{position:relative;width:190px;max-width:100%}
.pg-ring svg{display:block;width:100%;transform:rotate(-90deg)}
.pg-ring circle{fill:none;stroke-width:9}
.pg-ring-track{stroke:rgba(16,22,54,.08)}
.pg-ring-fill{stroke:url(#pgRing)}
.pg-ring-mid{position:absolute;inset:0;display:grid;place-content:center;gap:.1rem}
.pg-ring-n{
  font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:2.6rem;line-height:1;
  letter-spacing:-.03em;
  background-image:linear-gradient(140deg,var(--coral),var(--lilac) 55%,var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pg-ring-n span{font-size:.45em;-webkit-text-fill-color:var(--muted)}
.pg-ring-sub{margin-top:.9rem;font-size:.84rem;color:var(--muted)}

/* ---- the path ---- */
.pg-path{display:grid;gap:.1rem;position:relative}
.pg-path li{display:flex;align-items:center;gap:.7rem;padding:.35rem 0;position:relative}
.pg-path li::before{
  content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:rgba(16,22,54,.08);
}
.pg-path li:first-child::before{top:50%}
.pg-path li:last-child::before{bottom:50%}
.pg-path li.is-done::before{background:linear-gradient(var(--mint),var(--sky))}
.pg-path-dot{
  position:relative;z-index:1;display:grid;place-items:center;flex:none;width:28px;height:28px;
  border-radius:50%;font-size:.72rem;font-weight:800;color:var(--muted);
  background:#fff;box-shadow:0 0 0 2px rgba(16,22,54,.08) inset;
}
.pg-path li.is-done .pg-path-dot{color:#fff;background:linear-gradient(130deg,var(--mint),var(--sky));box-shadow:none}
.pg-path li.is-active .pg-path-dot{
  color:#fff;background:linear-gradient(130deg,var(--coral),var(--lilac));box-shadow:none;
  animation:live 2.4s ease-out infinite;
}
.pg-path-t{flex:1;min-width:0;font-size:.86rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-path li.is-idle .pg-path-t{color:var(--muted)}
.pg-path li.is-active .pg-path-t{font-weight:600;color:var(--ink)}
.pg-path-p{font-size:.76rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

/* grid view: keep the bars on one line across a row whatever the title length */
.pg-list.is-grid .pg-body{flex:1}
.pg-list.is-grid .pg-body .progress{margin-top:auto!important}
.pg-list.is-grid .pg-body .ds-note{margin-bottom:.6rem}

/* ============================================================
   Achievements — a trophy case, not a stats page
   ============================================================ */
.tc-band{
  position:relative;overflow:hidden;margin-top:1.4rem;padding:1.6rem 1.8rem;border-radius:var(--r-xl);
  background:linear-gradient(135deg,#14224E,#2A2668 42%,#123A63 74%,#0E4A52);
  box-shadow:0 30px 70px -40px rgba(16,22,54,.7);
}
.tc-band-glow{
  position:absolute;inset:-40% -10% auto -10%;height:150%;pointer-events:none;
  background:
    radial-gradient(40% 60% at 18% 30%,rgba(255,122,89,.5),transparent 70%),
    radial-gradient(40% 60% at 78% 40%,rgba(63,210,199,.45),transparent 70%),
    radial-gradient(35% 55% at 50% 90%,rgba(169,139,255,.45),transparent 70%);
  filter:blur(18px);
}
.tc-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tc-confetti i{
  position:absolute;top:-12px;left:var(--x);width:7px;height:11px;border-radius:2px;
  background:linear-gradient(var(--coral),var(--lilac));opacity:.75;
  transform:rotate(var(--r));
  animation:tcFall 6s linear infinite var(--d);
}
.tc-confetti i:nth-child(3n){background:linear-gradient(var(--mint),var(--sky))}
.tc-confetti i:nth-child(3n+1){background:linear-gradient(var(--orange),var(--rose))}
@keyframes tcFall{
  0%{transform:translateY(-20px) rotate(var(--r));opacity:0}
  12%{opacity:.8}
  100%{transform:translateY(240px) rotate(calc(var(--r) + 220deg));opacity:0}
}
.tc-band-in{position:relative;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.tc-band-medal{
  position:relative;display:grid;place-items:center;flex:none;width:88px;height:88px;border-radius:50%;
  color:#fff;overflow:hidden;
  box-shadow:0 16px 36px -14px rgba(0,0,0,.6),inset 0 0 0 4px rgba(255,255,255,.28);
}
.tc-band-k{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.tc-band-t{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:clamp(1.4rem,2.4vw,1.9rem);
  color:#fff;letter-spacing:-.02em;margin-top:.25rem}
.tc-band-d{font-size:.95rem;color:rgba(255,255,255,.72);margin-top:.2rem}
.tc-band-stats{display:flex;gap:1.6rem;margin-left:auto}
.tc-band-stats div{display:flex;flex-direction:column}
.tc-band-stats b{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.5rem;color:#fff;line-height:1.1}
.tc-band-stats span{font-size:.76rem;color:rgba(255,255,255,.6)}
@media(max-width:720px){.tc-band-stats{margin-left:0;width:100%;justify-content:space-between}}

/* ---- medal wall ---- */
.mw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem}
.mw-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;
  padding:1.3rem 1rem 1.1rem;border-radius:24px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.mw-tile.is-big{grid-column:span 2}
@media(max-width:560px){.mw-tile.is-big{grid-column:span 1}}
.mw-tile.is-on:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.mw-tile:not(.is-on){opacity:.72;background:rgba(255,255,255,.5);border-style:dashed;border-color:rgba(16,22,54,.14)}
.mw-medal{
  position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;overflow:hidden;
  color:#fff;background:rgba(16,22,54,.08);
  box-shadow:0 12px 26px -12px rgba(16,22,54,.5),inset 0 0 0 3px rgba(255,255,255,.35);
}
.mw-tile:not(.is-on) .mw-medal{color:var(--muted);box-shadow:none;background:rgba(16,22,54,.07)}
.mw-shine{
  position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);
}
.mw-tile.is-on:hover .mw-shine,.tc-band-medal .mw-shine{animation:mwShine 2.6s ease-in-out infinite}
@keyframes mwShine{0%{left:-120%}45%,100%{left:140%}}
.mw-tile b{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1rem;color:var(--ink)}
.mw-tile p{font-size:.82rem;line-height:1.45;color:var(--muted)}
.mw-tag{
  margin-top:.2rem;padding:.22rem .6rem;border-radius:99px;font-size:.7rem;font-weight:800;
  color:#0F7A5A;background:#D8F6F1;
}
.mw-tag.is-muted{color:var(--muted);background:rgba(16,22,54,.06)}
.mw-meter{display:block;width:70%;height:5px;border-radius:99px;background:rgba(16,22,54,.09);overflow:hidden;margin-top:.35rem}
.mw-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--lilac))}

/* ---- certificate shelf ---- */
.tc-shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;padding:.4rem .2rem}
@media(max-width:1400px){.tc-shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){.tc-shelf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.tc-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tc-shelf{grid-template-columns:minmax(0,1fr)}}
.tc-cert{
  overflow:hidden;border-radius:22px;
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.tc-cert:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.tc-cert.is-locked{opacity:.66;box-shadow:var(--shadow-sm)}
.tc-cert.is-locked:hover{transform:none}
.tc-cert-top{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--p-sky)}
.tc-cert-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tc-cert-seal,.tc-cert-lock{
  position:absolute;top:.6rem;right:.6rem;display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;color:#fff;background:linear-gradient(130deg,var(--mint),var(--sky));
  box-shadow:var(--shadow-sm);
}
.tc-cert-lock{color:var(--ink-2);background:rgba(255,255,255,.9)}
.tc-cert-body{padding:.9rem 1rem 1rem}
.tc-cert-k{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tc-cert-body b{display:block;font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.98rem;
  line-height:1.3;color:var(--ink);margin:.3rem 0 .35rem}
.tc-cert-cta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}

/* ---- progress: exam-ready state ---- */
.pg-row{position:relative}
.pg-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.pg-link:focus-visible{outline:3px solid var(--sky);outline-offset:-3px;border-radius:inherit}
.pg-row.is-ready{box-shadow:0 0 0 1.5px rgba(255,162,76,.45),var(--shadow-sm)}
.pg-state.is-ready{color:#8A6100;background:#FFF3D6}
.pg-state.is-certified{color:#0F7A5A;background:#D8F6F1}
.pg-exam{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  margin-top:.75rem;padding:.45rem .85rem;border-radius:99px;
  font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--orange),var(--coral));
  box-shadow:0 8px 18px -8px rgba(255,122,89,.9);
  transition:transform .35s var(--ease),filter .35s var(--ease);
}
.pg-exam:hover{transform:translateY(-2px);filter:brightness(1.05)}

.pg-moved{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;border-radius:20px;
  font-size:.9rem;color:var(--ink-2);
  background:linear-gradient(120deg,#EFFBF7,#F2F1FF);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pg-moved:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pg-moved .lu:first-child{color:var(--orange);flex:none}
.pg-moved .lu:last-child{color:var(--muted);margin-left:auto;flex:none}
.pg-moved b{color:var(--ink)}

/* path: certified and exam-ready states */
.pg-path li.is-certified::before{background:linear-gradient(var(--mint),var(--sky))}
.pg-path li.is-certified .pg-path-dot{color:#fff;background:linear-gradient(130deg,var(--mint),var(--sky));box-shadow:none}
.pg-path li.is-ready .pg-path-dot{color:#fff;background:linear-gradient(130deg,var(--orange),var(--coral));box-shadow:none}
.pg-path li.is-ready .pg-path-t{font-weight:600;color:var(--ink)}

/* achievements: the certificate you are one exam away from */
.tc-cert.is-ready{box-shadow:0 0 0 1.5px rgba(255,162,76,.5),var(--shadow-md);opacity:1}
.tc-cert-seal.is-ready{color:#8A6100;background:linear-gradient(130deg,#FFE6AE,#FFD277)}

/* ============================================================
   Account page (account.html) — the profile a learner owns, and their details
   ============================================================ */
.ac-col{display:grid;gap:1.2rem;max-width:720px;margin-top:1.5rem}

.ac-profile{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  padding:1.7rem 1.8rem;border-radius:var(--r-xl);
  background:linear-gradient(135deg,#FFF3EE,#F2F0FF 46%,#E9F8F5);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-md);
}
.ac-profile-glow{
  position:absolute;inset:-30% auto auto -10%;width:60%;height:160%;pointer-events:none;
  background:radial-gradient(45% 50% at 30% 40%,rgba(255,143,177,.28),transparent 70%),
             radial-gradient(45% 50% at 70% 60%,rgba(63,210,199,.26),transparent 70%);
  filter:blur(16px);
}
.ac-avatar-wrap{position:relative;flex:none}
.ac-avatar{
  position:relative;display:block;width:104px;height:104px;border-radius:32px;overflow:hidden;
  background:var(--p-lilac);border:3px solid #fff;box-shadow:0 18px 40px -18px rgba(16,22,54,.55);
}
.ac-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ac-avatar-btn{
  position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;color:#fff;background:linear-gradient(130deg,var(--coral),var(--lilac));
  border:2px solid #fff;box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease),filter .35s var(--ease);
}
.ac-avatar-btn:hover{transform:scale(1.08);filter:brightness(1.05)}

.ac-profile-body{position:relative;flex:1;min-width:240px}
.ac-label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ac-name{
  display:block;width:100%;margin-top:.4rem;padding:.6rem .9rem;border-radius:16px;
  font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:-.02em;
  color:var(--ink);background:rgba(255,255,255,.92);border:1px solid var(--line);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.ac-name:focus{outline:0;border-color:transparent;box-shadow:0 0 0 2px rgba(59,142,240,.4)}
.ac-hint{font-size:.82rem;color:var(--muted);margin-top:.5rem}
.ac-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.ac-actions .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.ac-saved{
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:99px;
  font-size:.78rem;font-weight:700;color:#0F7A5A;background:#D8F6F1;
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.ac-saved.show{opacity:1;transform:none}

.ac-list{display:grid;gap:.2rem}
.ac-list li{display:flex;align-items:center;gap:.8rem;padding:.7rem .2rem;border-bottom:1px solid rgba(16,22,54,.05)}
.ac-list li:last-child{border-bottom:0}
.ac-list-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:11px;
  color:var(--ink-2);background:rgba(16,22,54,.05)}
.ac-list-k{display:block;font-size:.74rem;color:var(--muted)}
.ac-list b{display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin-top:.1rem}

.ac-foot{
  display:flex;align-items:flex-start;gap:.5rem;padding:0 .3rem;
  font-size:.84rem;line-height:1.6;color:var(--muted);
}
.ac-foot .lu{flex:none;margin-top:.2rem;color:var(--teal)}

/* the three steps from class certificates to the final credential */
.cert-ladder{display:grid;gap:.7rem;margin-top:1.9rem;counter-reset:step}
.cert-ladder li{
  position:relative;display:flex;align-items:flex-start;gap:.9rem;
  padding:.85rem 1rem;border-radius:20px;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-sm);
}
.cert-ladder li::after{                 /* the connector between steps */
  content:"";position:absolute;left:2.05rem;top:100%;width:2px;height:.7rem;
  background:linear-gradient(rgba(16,22,54,.16),transparent);
}
.cert-ladder li:last-child::after{display:none}
.cl-ic{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:13px;color:#fff;
  background:linear-gradient(130deg,var(--coral),var(--lilac));
  box-shadow:0 8px 18px -10px rgba(169,139,255,.9);
}
.cert-ladder li:nth-child(2) .cl-ic{background:linear-gradient(130deg,var(--lilac),var(--sky))}
.cert-ladder li:nth-child(3) .cl-ic{background:linear-gradient(130deg,var(--sky),var(--mint))}
.cert-ladder b{display:block;font-family:'Outfit','Inter',sans-serif;font-weight:700;
  font-size:.98rem;color:var(--ink);line-height:1.3}
.cert-ladder span span{display:block;font-size:.86rem;line-height:1.5;color:var(--muted);margin-top:.2rem}

/* ============================================================
   Final exam band — the last step of the credential ladder
   ============================================================ */
.fx-band{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  margin-top:1.4rem;padding:1.3rem 1.5rem;border-radius:var(--r-lg);
  background:linear-gradient(135deg,#FFF6EE,#F3F0FF 48%,#EAF7FF);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-md);
}
.fx-band.is-locked{background:rgba(255,255,255,.66);border-style:dashed;border-color:rgba(16,22,54,.14)}
.fx-band.is-passed{background:linear-gradient(135deg,#FFF3D6,#FFE6DB 45%,#ECE4FF)}
.fx-glow{
  position:absolute;inset:-40% auto auto -5%;width:45%;height:180%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,162,76,.28),transparent 70%);
  filter:blur(20px);
}
.fx-band.is-locked .fx-glow{display:none}
.fx-ic{
  position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:20px;
  color:#fff;background:linear-gradient(130deg,var(--orange),var(--coral));
  box-shadow:0 12px 26px -12px rgba(255,122,89,.9);
}
.fx-band.is-locked .fx-ic{color:var(--muted);background:rgba(16,22,54,.07);box-shadow:none}
.fx-body{position:relative;flex:1;min-width:220px}
.fx-k{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fx-t{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;
  color:var(--ink);margin-top:.25rem}
.fx-d{font-size:.88rem;color:var(--muted);margin-top:.25rem}
.fx-meter{height:6px;border-radius:99px;background:rgba(16,22,54,.09);overflow:hidden;margin-top:.7rem;max-width:320px}
.fx-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--lilac),var(--sky))}
.fx-cta{
  position:relative;display:inline-flex;align-items:center;gap:.45rem;flex:none;
  padding:.6rem 1.1rem;border-radius:99px;font-size:.86rem;font-weight:700;color:#fff;
  background:linear-gradient(120deg,var(--coral),var(--lilac),var(--sky));
  box-shadow:0 10px 24px -10px rgba(169,139,255,.9);
  transition:transform .35s var(--ease),filter .35s var(--ease);
}
.fx-cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
.fx-cta.is-off{color:var(--muted);background:rgba(16,22,54,.06);box-shadow:none;cursor:not-allowed}
.fx-cta.is-off:hover{transform:none}

/* dashboard: the same goal, one line */
.ds-final{
  display:flex;align-items:flex-start;gap:.45rem;margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--line);font-size:.84rem;line-height:1.5;color:var(--muted);
}
.ds-final .lu{flex:none;margin-top:.15rem;color:var(--orange)}
.ds-final b{color:var(--ink)}

/* compact form of the final-exam band, for a sidebar rail */
.fx-band.is-compact{
  flex-direction:column;align-items:flex-start;gap:.9rem;margin-top:0;padding:1.2rem;
}
.fx-band.is-compact .fx-ic{width:46px;height:46px;border-radius:16px}
.fx-band.is-compact .fx-body{min-width:0;width:100%}
.fx-band.is-compact .fx-t{font-size:1.02rem}
.fx-band.is-compact .fx-meter{max-width:none}
.fx-band.is-compact .fx-cta{width:100%;justify-content:center}

/* ============================================================
   The learning page (learn.html) — one chapter list, five modes
   ============================================================ */
.lp{min-height:100vh;display:flex;flex-direction:column}
.lp-top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;
  padding:.9rem clamp(1rem,3vw,2rem);
  background:rgba(255,255,255,.82);border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(1.3);
}
.lp-back{
  display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;
  color:var(--ink-2);background:rgba(16,22,54,.05);transition:all .35s var(--ease);
}
.lp-back .lu{transform:rotate(180deg)}
.lp-back:hover{color:var(--ink);background:rgba(16,22,54,.1)}
.lp-top-k{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lp-top-t{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.02rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-top-progress{display:flex;align-items:center;gap:.7rem;margin-left:auto;flex:none}
/* the progress block used to push the chrome right; it is gone, so do it here */
.lp-top .ds-chrome{margin-left:auto;flex:none}
@media(max-width:900px){.lp-top-progress{display:none}}

.lp-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.4rem;
  padding:1.4rem clamp(1rem,3vw,2rem) 3rem;align-items:start}
@media(max-width:1080px){.lp-body{grid-template-columns:minmax(0,1fr)}}
.lp-main{min-width:0;display:grid;gap:1rem}

/* ---- mode switcher ---- */
.lp-modes{
  display:flex;gap:.25rem;padding:.3rem;border-radius:99px;overflow-x:auto;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
}
.lp-mode{
  display:inline-flex;align-items:center;gap:.45rem;flex:none;padding:.6rem 1rem;border-radius:99px;
  font-size:.88rem;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:all .3s var(--ease);
}
.lp-mode:hover{color:var(--ink);background:rgba(16,22,54,.05)}
.lp-mode.on{color:#fff;background:linear-gradient(120deg,var(--coral),var(--lilac),var(--sky));
  box-shadow:0 8px 20px -10px rgba(169,139,255,.9)}
.lp-mode .lu{flex:none}

/* ---- stage ---- */
.lp-stage{
  border-radius:var(--r-xl);overflow:hidden;
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-md);
}
.lp-h{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink)}
.lp-p{font-size:.95rem;line-height:1.65;color:var(--ink-2);margin-top:.4rem}
.lp-under{padding:0 .3rem}
.lp-under .lp-p{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.lp-page-k{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* video */
.lp-screen{position:relative;aspect-ratio:16/9;background:var(--p-sky);overflow:hidden}
.lp-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,22,54,.35),transparent 40%,rgba(16,22,54,.5))}
.lp-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:84px;height:84px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 20px 44px -18px rgba(16,22,54,.8);transition:transform .4s var(--ease),background .4s var(--ease);
}
.lp-play:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(255,255,255,.3)}
.lp-play.is-playing{opacity:0;pointer-events:none}
.lp-badge{
  position:absolute;left:1rem;top:1rem;display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .7rem;border-radius:99px;font-size:.74rem;font-weight:700;color:#fff;
  background:rgba(16,22,54,.5);backdrop-filter:blur(8px);
}
.lp-controls{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;background:rgba(255,255,255,.7)}
.lp-controls.is-pod{padding:.9rem 0 0;background:transparent}
.lp-ctl{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;color:#fff;
  background:linear-gradient(130deg,var(--coral),var(--lilac));box-shadow:0 8px 18px -8px rgba(169,139,255,.9);
}
.lp-ctl.is-big{width:48px;height:48px}
.lp-time{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.lp-track{flex:1;height:6px;border-radius:99px;background:rgba(16,22,54,.1);overflow:hidden;cursor:pointer}
.lp-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--coral),var(--sky));transition:width .3s linear}
.lp-chip{flex:none;padding:.2rem .5rem;border-radius:8px;font-size:.72rem;font-weight:700;
  color:var(--ink-2);background:rgba(16,22,54,.06)}

/* book */
.lp-page{padding:clamp(1.4rem,3vw,2.4rem);max-width:70ch}
.lp-page-h{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.025em;
  color:var(--ink);margin:.5rem 0 1rem}
.lp-page p{font-size:1rem;line-height:1.8;color:var(--ink-2);margin-bottom:1rem}
.lp-try{
  display:flex;gap:.9rem;padding:1rem 1.1rem;border-radius:20px;margin:1.4rem 0;
  background:linear-gradient(120deg,#FFF3D6,#FFE6DB);
}
.lp-try-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:13px;
  color:var(--orange);background:#fff;box-shadow:var(--shadow-sm)}
.lp-try b{display:block;font-family:'Outfit','Inter',sans-serif;font-weight:700;color:var(--ink)}
.lp-try p{font-size:.9rem;margin:.2rem 0 0}
.lp-quote{
  font-family:'Outfit','Inter',sans-serif;font-size:1.1rem;font-style:italic;color:var(--ink);
  padding-left:1rem;border-left:3px solid;border-image:linear-gradient(var(--coral),var(--sky)) 1;
}
.lp-pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;border-top:1px solid var(--line);background:rgba(255,255,255,.6)}
.lp-pager .btn:first-child .lu{transform:rotate(180deg)}
.lp-dots{display:flex;gap:.35rem}
.lp-dots i{width:7px;height:7px;border-radius:50%;background:rgba(16,22,54,.15)}
.lp-dots i.on{background:linear-gradient(130deg,var(--coral),var(--sky));transform:scale(1.2)}

/* podcast */
.lp-pod-in{display:flex;gap:1.4rem;padding:1.4rem;flex-wrap:wrap}
.lp-pod-art{position:relative;flex:none;width:190px;aspect-ratio:1;border-radius:24px;overflow:hidden;
  box-shadow:0 20px 44px -20px rgba(16,22,54,.6)}
.lp-pod-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-pod-body{flex:1;min-width:240px}
.lp-wave{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:1.1rem}
.lp-wave i{flex:1;height:var(--h);border-radius:3px;background:linear-gradient(var(--sky),var(--mint));opacity:.5}
.lp-wave.is-on i{animation:lpWave 1.1s ease-in-out infinite var(--d);opacity:1}
@keyframes lpWave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* quiz */
.lp-quiz{padding:clamp(1.4rem,3vw,2rem)}
.lp-quiz-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.lp-quiz-meter{display:flex;gap:.3rem}
.lp-quiz-meter i{width:26px;height:5px;border-radius:99px;background:rgba(16,22,54,.1)}
.lp-quiz-meter i.done{background:linear-gradient(90deg,var(--mint),var(--sky))}
.lp-quiz-meter i.on{background:linear-gradient(90deg,var(--coral),var(--lilac))}
.lp-options{display:grid;gap:.6rem;margin-top:1.2rem}
.lp-option{
  display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:18px;text-align:left;
  font-size:.98rem;color:var(--ink-2);
  background:rgba(255,255,255,.8);border:1.5px solid var(--line);
  transition:all .3s var(--ease);
}
.lp-option:hover:not(:disabled){border-color:rgba(59,142,240,.5);background:#fff;transform:translateX(3px)}
.lp-option-k{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;
  font-size:.8rem;font-weight:800;color:var(--ink-2);background:rgba(16,22,54,.06)}
.lp-option-ic{margin-left:auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  color:#fff;background:linear-gradient(130deg,var(--mint),var(--teal))}
.lp-option.is-right{border-color:transparent;background:#E9FAF5;box-shadow:inset 0 0 0 1.5px rgba(23,179,174,.5)}
.lp-option.is-wrong{border-color:transparent;background:#FFEFEF;box-shadow:inset 0 0 0 1.5px rgba(255,122,89,.5)}
.lp-option.is-dim{opacity:.5}
.lp-why{margin-top:1.1rem;padding:1rem 1.1rem;border-radius:18px;background:#FFF3E9}
.lp-why.is-right{background:#E9FAF5}
.lp-why b{font-family:'Outfit','Inter',sans-serif;font-weight:700;color:var(--ink)}
.lp-why p{font-size:.92rem;line-height:1.6;color:var(--ink-2);margin-top:.25rem}
.lp-done{display:grid;place-items:center;text-align:center;padding:2.5rem 1rem}
.lp-done-ic{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;color:#fff;margin-bottom:1rem;
  background:linear-gradient(130deg,var(--orange),var(--coral));box-shadow:0 16px 34px -14px rgba(255,122,89,.9)}

/* flashcards */
.lp-cards{display:grid;justify-items:center;gap:1rem;padding:clamp(1.4rem,3vw,2rem)}
.lp-card{width:min(100%,520px);aspect-ratio:16/10;perspective:1200px;cursor:pointer}
.lp-card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .6s var(--ease)}
.lp-card.is-flipped .lp-card-in{transform:rotateY(180deg)}
.lp-card-face{
  position:absolute;inset:0;display:grid;place-content:center;gap:.7rem;text-align:center;
  padding:1.8rem;border-radius:26px;backface-visibility:hidden;
  box-shadow:0 24px 50px -24px rgba(16,22,54,.5);
}
.lp-card-front{background:linear-gradient(140deg,#FFF3EE,#F1EFFF 55%,#E9F8F5);border:1px solid rgba(255,255,255,.9)}
.lp-card-back{transform:rotateY(180deg);color:#fff;
  background:linear-gradient(140deg,#2B3A72,#3B4E9E 45%,#17756E)}
.lp-card-k{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lp-card-back .lp-card-k{color:rgba(255,255,255,.6)}
.lp-card-front p{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.6rem;
  letter-spacing:-.02em;color:var(--ink)}
.lp-card-back p{font-size:1.05rem;line-height:1.6;max-width:36ch}
.lp-card-hint{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--muted);margin-top:.4rem}
.lp-card-cta{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}

.lp-empty{display:grid;place-items:center;text-align:center;gap:.4rem;padding:3.5rem 1.5rem;color:var(--muted)}

/* ---- footer bar ---- */
.lp-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.lp-foot .btn:first-child .lu{transform:rotate(180deg)}
.lp-complete{
  display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.2rem;border-radius:99px;
  font-size:.88rem;font-weight:700;color:var(--ink-2);
  background:rgba(255,255,255,.8);border:1.5px dashed rgba(16,22,54,.2);
  transition:all .35s var(--ease);
}
.lp-complete:hover{color:var(--ink);border-color:rgba(63,210,199,.7);background:#fff}
.lp-complete.is-done{color:#0F7A5A;background:#D8F6F1;border-style:solid;border-color:transparent}

/* ---- chapters ---- */
.lp-side{
  position:sticky;top:82px;border-radius:var(--r-xl);overflow:hidden;
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-md);
}
@media(max-width:1080px){.lp-side{position:static}}
.lp-side-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.lp-side-t{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1rem;color:var(--ink)}
.lp-chapters{max-height:min(58vh,560px);overflow-y:auto;padding:.5rem;
  scrollbar-width:thin;scrollbar-color:rgba(16,22,54,.2) transparent}
.lp-chapters::-webkit-scrollbar{width:6px}
.lp-chapters::-webkit-scrollbar-thumb{background:rgba(16,22,54,.18);border-radius:99px}
.lp-chapters::-webkit-scrollbar-track{background:transparent}
/* Long classes must not push the certificate row off screen: the sidebar owns the
   viewport height, the chapter list takes what is left and scrolls inside it. */
@media(min-width:1081px){
  .lp-side{display:flex;flex-direction:column;max-height:calc(100vh - 102px)}
  .lp-tutor,.lp-side-head,.lp-side-bar,.lp-exam{flex:none}
  .lp-chapters{flex:1 1 auto;min-height:140px;max-height:none}
}
.lp-chapter{
  display:flex;align-items:flex-start;gap:.7rem;width:100%;padding:.7rem .75rem;border-radius:16px;
  text-align:left;transition:background .3s var(--ease);
}
.lp-chapter:hover{background:rgba(16,22,54,.04)}
.lp-chapter.on{background:linear-gradient(120deg,rgba(255,122,89,.12),rgba(169,139,255,.12),rgba(63,210,199,.14))}
.lp-chapter-n{
  display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;
  font-size:.74rem;font-weight:800;color:var(--muted);background:rgba(16,22,54,.06);
}
.lp-chapter.on .lp-chapter-n{color:#fff;background:linear-gradient(130deg,var(--coral),var(--lilac))}
.lp-chapter.is-done .lp-chapter-n{color:#fff;background:linear-gradient(130deg,var(--mint),var(--sky))}
.lp-chapter b{display:block;font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.35}
.lp-chapter-m{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;margin-top:.3rem;
  font-size:.72rem;color:var(--muted)}
.lp-chapter-m .lu{margin-left:.35rem}
.lp-chapter-m .lu:first-child{margin-left:0}
.lp-side-foot{display:flex;align-items:flex-start;gap:.5rem;padding:.9rem 1.1rem;
  border-top:1px solid var(--line);font-size:.82rem;line-height:1.5;color:var(--muted);
  background:rgba(255,255,255,.6)}
.lp-side-foot .lu{flex:none;margin-top:.15rem;color:var(--lilac)}
.lp-side-foot b{color:var(--ink)}

/* ---- the class tutor in the learn header ----
   The one vivid card in a page of white ones: this is the thing we want a
   student to reach for. Chat is the wide button, calls are the two orbs. */
.lp-tutor{
  position:relative;overflow:hidden;padding:1rem 1.05rem 1.05rem;
  background:linear-gradient(140deg,#151B45 0%,#2B5FD9 55%,#7A5BE0 100%);color:#fff;
}
.lp-tutor-aura{
  position:absolute;left:-15%;right:-15%;top:-70%;height:220px;pointer-events:none;
  background:radial-gradient(58% 100% at 22% 55%,rgba(63,210,199,.55),transparent 70%),
             radial-gradient(52% 100% at 80% 30%,rgba(255,122,89,.42),transparent 72%);
  animation:tutorDrift 11s var(--ease) infinite alternate;
}
@keyframes tutorDrift{from{transform:translate3d(-5%,0,0)}to{transform:translate3d(5%,6%,0)}}

.lp-tutor-who{position:relative;display:flex;align-items:center;gap:.7rem}
.lp-tutor-ava{
  position:relative;flex:none;width:48px;height:48px;border-radius:50%;padding:2px;
  background:linear-gradient(135deg,var(--mint),var(--orange),var(--rose));
}
.lp-tutor-ava img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:2px solid #1B2150}
.lp-tutor-n{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.06rem;
  letter-spacing:-.02em;color:#fff}
.lp-tutor-s{display:flex;align-items:center;gap:.35rem;font-size:.73rem;color:rgba(255,255,255,.74)}

.lp-tutor-acts{position:relative;display:flex;gap:.4rem;margin-top:.9rem}
.lp-tutor-main{
  flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  height:40px;border-radius:99px;font-size:.86rem;font-weight:700;color:#151B45;background:#fff;
  box-shadow:0 12px 24px -14px rgba(0,0,0,.8);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.lp-tutor-main:hover{transform:translateY(-2px);box-shadow:0 18px 32px -16px rgba(0,0,0,.9)}
.lp-tutor-act{
  display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  transition:all .3s var(--ease);
}
.lp-tutor-act:hover{background:#fff;color:#151B45;transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.lp-tutor-aura{animation:none}}

/* ---- tutor drawer ---- */
.lp-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(390px,92vw);z-index:60;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.97);border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -30px rgba(16,22,54,.5);backdrop-filter:blur(20px);
  transform:translateX(100%);transition:transform .45s var(--ease);
}
.lp.tutor-open .lp-drawer{transform:none}
/* A call takes the whole screen, and sliding a full-screen surface in from the
   right reads like the page moved. Calls fade up on the spot instead. */
.lp.tutor-call .lp-drawer{
  transform:scale(1.02);opacity:0;
  transition:opacity .4s var(--ease),transform .45s var(--ease);
}
.lp.tutor-call.tutor-open .lp-drawer{transform:none;opacity:1}
@media(min-width:1280px){
  .lp-body,.lp-top{transition:padding-right .45s var(--ease)}
  .lp.tutor-open .lp-body,.lp.tutor-open .lp-top{padding-right:calc(min(390px,92vw) + clamp(1rem,3vw,2rem))}
}
.lp-scrim-bg{
  position:fixed;inset:0;z-index:55;background:rgba(16,22,54,.35);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
@media(max-width:1279px){.lp.tutor-open .lp-scrim-bg{opacity:1;visibility:visible}}
.lp-dr-top{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,#FFF0E9,#F0EEFF 52%,#E6F7F3)}
.lp-dr-name{display:flex;align-items:center;gap:.3rem;font-family:'Outfit','Inter',sans-serif;
  font-weight:700;font-size:.98rem;color:var(--ink)}
.lp-dr-state{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--muted);margin-top:.1rem}
.lp-dr-x{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;
  color:var(--muted);background:rgba(16,22,54,.06);transition:all .3s var(--ease)}
.lp-dr-x:hover{color:var(--ink);background:rgba(16,22,54,.12)}
.lp-dr-body{flex:1;display:flex;flex-direction:column;min-height:0}
.lp-chat{flex:1;overflow-y:auto;padding:.9rem;display:grid;gap:.5rem;align-content:start}
.lp-chat-chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.7rem .9rem 0}
.lp-composer{
  display:flex;align-items:center;gap:.5rem;margin:.8rem .9rem 1rem;padding:.6rem .9rem;border-radius:99px;
  font-size:.86rem;color:var(--muted);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.lp-composer span:first-child{flex:1;min-width:0}
.lp-send{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;color:#fff;
  background:linear-gradient(130deg,var(--coral),var(--lilac),var(--sky))}

/* call states */
.lp-call{flex:1;display:grid;justify-items:center;align-content:center;gap:.5rem;padding:1.5rem;text-align:center}
.lp-call-ava{position:relative;display:block;width:132px;height:132px;border-radius:50%;overflow:hidden;
  border:4px solid #fff;box-shadow:0 24px 50px -22px rgba(16,22,54,.6)}
.lp-call-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-call-ava i{position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(63,210,199,.5);
  animation:aura 2.6s ease-out infinite}
.lp-call-screen{position:relative;width:100%;aspect-ratio:3/4;border-radius:24px;overflow:hidden;
  box-shadow:0 24px 50px -22px rgba(16,22,54,.6)}
.lp-call-screen > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-call-self{position:absolute;right:.6rem;bottom:.6rem;width:74px;aspect-ratio:3/4;border-radius:14px;
  overflow:hidden;border:2px solid rgba(255,255,255,.85);box-shadow:var(--shadow-md)}
.lp-call-self img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-call-name{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink);margin-top:.8rem}
.lp-call-state{display:flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--muted)}
.lp-call-wave{display:flex;align-items:center;gap:3px;height:38px;margin:.6rem 0}
.lp-call-wave i{width:3px;height:var(--h);border-radius:2px;background:linear-gradient(var(--mint),var(--sky));
  animation:lpWave 1.2s ease-in-out infinite var(--d)}
.lp-call-cta{display:flex;gap:.6rem;margin-top:.5rem}
.lp-call-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--ink-2);
  background:rgba(16,22,54,.06);transition:all .3s var(--ease)}
.lp-call-btn:hover{background:rgba(16,22,54,.12)}
.lp-call-btn.is-end{color:#fff;background:linear-gradient(130deg,#FF7A59,#EF4444);transform:rotate(135deg)}
.lp-call-note{display:flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--muted);margin-top:.8rem}

/* ---- podcast: two hosts + notebook-style ribbons ---- */
.lp-hosts{display:grid;grid-template-columns:1fr minmax(0,1.4fr) 1fr;align-items:center;gap:1rem;
  padding:1.6rem 1.4rem 1rem}
@media(max-width:720px){.lp-hosts{grid-template-columns:1fr 1fr;gap:.8rem}.lp-ribbon{grid-column:1/-1;order:3}}
.lp-host{display:grid;justify-items:center;gap:.35rem;text-align:center;position:relative}
.lp-host-ava{position:relative;display:block;width:96px;height:96px;border-radius:50%;overflow:hidden;
  border:3px solid #fff;box-shadow:0 18px 38px -18px rgba(16,22,54,.55);
  transition:transform .5s var(--ease)}
.lp-host-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-host-ring{
  position:absolute;top:-8px;width:112px;height:112px;border-radius:50%;pointer-events:none;
  border:2px solid transparent;
}
.lp-host.is-talking .lp-host-ring{
  border-color:rgba(63,210,199,.65);
  animation:aura 2s ease-out infinite;
}
.lp-host.is-talking .lp-host-ava{transform:scale(1.06)}
.lp-host:not(.is-talking) .lp-host-ava{filter:saturate(.75);opacity:.75}
.lp-pod.is-live .lp-host b{color:var(--ink)}
.lp-host b{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink-2)}
.lp-host span:last-child{font-size:.74rem;color:var(--muted)}

.lp-ribbon{position:relative;height:96px}
.lp-ribbon svg{width:100%;height:100%;overflow:visible}
.lp-ribbon .rb{fill:none;stroke-width:3;stroke-linecap:round;opacity:.35;
  transform-origin:center;transform:scaleY(.35)}
.lp-pod.is-live .rb{opacity:.9}
.lp-pod.is-live .rb-1{animation:rbFlow 3.2s ease-in-out infinite}
.lp-pod.is-live .rb-2{animation:rbFlow 2.4s ease-in-out infinite .3s}
.lp-pod.is-live .rb-3{animation:rbFlow 4s ease-in-out infinite .6s}
@keyframes rbFlow{
  0%,100%{transform:scaleY(.35) translateX(0)}
  50%{transform:scaleY(1.15) translateX(-6px)}
}
.lp-pod-foot{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  padding:1rem 1.4rem 1.3rem;border-top:1px solid var(--line)}
.lp-pod-foot .lp-controls{flex:1;min-width:260px}

/* ---- class progress + exam in the chapters panel ---- */
.lp-side-pct{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1rem;color:var(--ink)}
.lp-side-bar{padding:.8rem 1.1rem 0}
.lp-side-bar .progress{display:block}
/* a fade over the last visible chapter, so a clipped list reads as scrollable */
.lp-exam::before{
  content:"";position:absolute;left:-.5rem;right:-.5rem;bottom:100%;height:24px;pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.92),rgba(255,255,255,0));
}
.lp-exam{
  position:relative;
  /* the sidebar is ~340px: title and CTA cannot share a row without both being squeezed */
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.75rem;
  margin:.5rem;padding:.85rem .9rem;border-radius:18px;
  background:linear-gradient(120deg,#FFF3D6,#FFE6DB);border:1px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.lp-exam:hover{transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(255,122,89,.8)}
/* once it is won, the row stops selling the exam and shows the credential */
.lp-exam.is-earned{background:linear-gradient(120deg,#D8F6F1,#DEEBFF)}
.lp-exam.is-earned:hover{box-shadow:0 16px 30px -16px rgba(23,179,174,.8)}
.lp-exam.is-earned .lp-exam-ic{background:linear-gradient(130deg,var(--mint),var(--teal))}
.lp-exam.is-earned .lp-exam-cta{background:linear-gradient(120deg,var(--teal),var(--sky));
  box-shadow:0 10px 20px -12px rgba(23,179,174,.9)}
.lp-exam-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:12px;
  color:#fff;background:linear-gradient(130deg,var(--orange),var(--coral))}
.lp-exam b{display:block;font-size:.9rem;font-weight:700;color:var(--ink)}
/* scoped to the text column: the CTA is a <span> too and was inheriting this */
.lp-exam > div span{display:block;font-size:.76rem;line-height:1.45;color:var(--muted);margin-top:.1rem}
.lp-exam-cta{
  grid-column:1 / -1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  white-space:nowrap;padding:.55rem .9rem;border-radius:99px;
  font-size:.8rem;font-weight:700;color:#fff;background:linear-gradient(120deg,var(--orange),var(--coral));
  box-shadow:0 10px 20px -12px rgba(255,122,89,.9);
}


/* suggested prompts in the tutor drawer (the .ai-prompt rules left with the old expert panel) */
.ai-prompt{
  padding:.42rem .75rem;border-radius:99px;font-size:.78rem;font-weight:500;text-align:left;
  color:var(--ink-2);background:rgba(16,22,54,.045);border:1px solid var(--line);
  transition:all .3s var(--ease);
}
.ai-prompt:hover{color:#fff;border-color:transparent;background:linear-gradient(120deg,var(--lilac),var(--sky))}

/* tutor drawer: tools on the right edge, and a full-page mode */
.lp-dr-tools{display:flex;gap:.25rem;margin-left:auto;flex:none}
.lp.tutor-max .lp-drawer{width:100%;border-left:0}
@media(min-width:1280px){.lp.tutor-max .lp-body,.lp.tutor-max .lp-top{padding-right:clamp(1rem,3vw,2rem)}}
.lp.tutor-max.tutor-open .lp-scrim-bg{opacity:1;visibility:visible}
.lp.tutor-max .lp-chat{max-width:820px;margin:0 auto;width:100%}
.lp.tutor-max .lp-composer,.lp.tutor-max .lp-disclaimer{max-width:820px;margin-left:auto;margin-right:auto;width:100%}
.lp.tutor-max .lp-call{max-width:520px;margin:0 auto}

.lp-disclaimer{
  padding:0 .9rem 1rem;text-align:center;font-size:.72rem;line-height:1.5;color:var(--muted);
}

/* the chapters card holds the tutor now, so its own footer note is gone */
.lp-side-head{padding-top:.9rem}

/* ---- podcast: the middle column and its join button ---- */
.lp-mid{display:grid;justify-items:center;gap:.6rem}
.lp-mid .lp-ribbon{width:100%}
.lp-join{
  display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.1rem;border-radius:99px;
  font-size:.85rem;font-weight:700;color:#fff;
  background:linear-gradient(120deg,#10B981,#22C55E);
  box-shadow:0 10px 22px -10px rgba(16,185,129,.9);
  transition:transform .35s var(--ease),filter .35s var(--ease);
}
.lp-join:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* ---- generate / generating states ---- */
.lp-gen{display:grid;place-items:center;text-align:center;gap:.35rem;padding:3rem 1.5rem}
.lp-gen-orb{
  display:grid;place-items:center;width:74px;height:74px;border-radius:50%;color:#fff;margin-bottom:.9rem;
  background:linear-gradient(140deg,var(--coral),var(--lilac) 55%,var(--sky));
  box-shadow:0 18px 38px -16px rgba(169,139,255,.9);
}
.lp-gen-orb.is-idle{color:var(--muted);background:rgba(16,22,54,.06);box-shadow:none}
.lp-gen.is-loading .lp-gen-orb{animation:genPulse 1.6s ease-in-out infinite}
@keyframes genPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.lp-gen-steps{display:grid;gap:.5rem;margin-top:1rem;text-align:left}
.lp-gen-steps li{
  display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-2);
  opacity:.25;animation:genStep .5s var(--ease) forwards var(--d);
}
.lp-gen-steps .lu{padding:3px;border-radius:50%;color:#fff;box-sizing:content-box;
  background:linear-gradient(130deg,var(--mint),var(--sky))}
@keyframes genStep{to{opacity:1}}
.lp-gen-bar{display:block;width:min(280px,70%);height:5px;border-radius:99px;margin-top:1.4rem;
  background:rgba(16,22,54,.08);overflow:hidden}
.lp-gen-bar i{display:block;height:100%;width:35%;border-radius:99px;
  background:linear-gradient(90deg,var(--coral),var(--lilac),var(--sky));
  animation:genBar 1.5s ease-in-out infinite}
@keyframes genBar{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.lp-gen-note{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.85rem;color:var(--muted)}

/* ---- flashcard hint ---- */
.lp-card-hintbtn,.lp-card-hintbox{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;padding:.35rem .8rem;border-radius:99px;
  font-size:.8rem;font-weight:600;
}
.lp-card-hintbtn{color:var(--ink-2);background:rgba(16,22,54,.06);transition:all .3s var(--ease)}
.lp-card-hintbtn:hover{color:#fff;background:linear-gradient(120deg,var(--lilac),var(--sky))}
.lp-card-hintbox{color:#8A6100;background:#FFF3D6}
.lp-card-front p{font-size:1.35rem;line-height:1.35;max-width:26ch}

/* regenerate control on generated quizzes and decks */
.lp-regen{
  display:inline-flex;align-items:center;gap:.35rem;flex:none;padding:.35rem .7rem;border-radius:99px;
  font-size:.74rem;font-weight:700;color:var(--ink-2);
  background:rgba(16,22,54,.05);border:1px solid var(--line);
  transition:all .3s var(--ease);
}
.lp-regen:hover{color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--coral),var(--lilac),var(--sky))}
.lp-regen .lu{flex:none}
.lp-cards-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}
.lp-regen-float{position:absolute;top:1.2rem;right:1.2rem}
.lp-quiz{position:relative}

/* full-screen chat: the whole surface is the chat canvas, not a white page */
.lp.tutor-max .lp-dr-body{
  background-color:#F5F7FD;
  background-image:radial-gradient(rgba(16,22,54,.07) 1px,transparent 1px);
  background-size:22px 22px;
}
.lp.tutor-max .lp-chat{background:none}
.lp.tutor-max .lp-composer{background:#fff}

/* ============================================================
   AI actions get their own colour, away from the coral primary
   ============================================================ */
.btn-ai{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(120deg,#4C3AE3,#7C5CFF 48%,#3B8EF0);
  box-shadow:0 12px 28px -12px rgba(76,58,227,.9);
}
.btn-ai::before{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);animation:aiSheen 3.4s ease-in-out infinite;
}
@keyframes aiSheen{0%{left:-120%}45%,100%{left:150%}}
.btn-ai:hover{transform:translateY(-2px);filter:brightness(1.06)}
.lp-regen:hover{background:linear-gradient(120deg,#4C3AE3,#7C5CFF 48%,#3B8EF0)}
.lp-gen-orb{background:linear-gradient(140deg,#4C3AE3,#7C5CFF 55%,#3B8EF0)}
.lp-gen-bar i{background:linear-gradient(90deg,#4C3AE3,#7C5CFF,#3B8EF0)}

/* ============================================================
   Flashcards: a real deck
   ============================================================ */
.lp-deck{position:relative;width:min(100%,520px);margin:.4rem auto .2rem;transition:transform .26s var(--ease),opacity .26s var(--ease)}
.lp-deck.is-left{transform:translateX(-40px) rotate(-4deg);opacity:0}
.lp-deck.is-right{transform:translateX(40px) rotate(4deg);opacity:0}
.lp-deck-back{
  position:absolute;inset:0;border-radius:26px;background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 30px -20px rgba(16,22,54,.5);
}
.lp-deck-back-1{transform:translateY(10px) scale(.965)}
.lp-deck-back-2{transform:translateY(20px) scale(.93);opacity:.7}
.lp-deck .lp-card{width:100%;margin:0;position:relative;z-index:2}
.lp-card:focus-visible{outline:3px solid var(--sky);outline-offset:4px;border-radius:26px}

.lp-deck-dots{display:flex;gap:.3rem}
.lp-deck-dots i{width:22px;height:5px;border-radius:99px;background:rgba(16,22,54,.1)}
.lp-deck-dots i.done{background:linear-gradient(90deg,var(--mint),var(--sky))}
.lp-deck-dots i.on{background:linear-gradient(90deg,var(--coral),var(--lilac))}

.lp-deck-btn{
  display:inline-flex;align-items:center;gap:.45rem;padding:.7rem 1.3rem;border-radius:99px;
  font-size:.9rem;font-weight:700;transition:all .35s var(--ease);
}
.lp-deck-btn.is-again{color:#8A6100;background:#FFF3D6}
.lp-deck-btn.is-again:hover{background:#FFE9B8;transform:translateY(-2px)}
.lp-deck-btn.is-known{color:#fff;background:linear-gradient(130deg,var(--mint),var(--teal));
  box-shadow:0 10px 22px -10px rgba(23,179,174,.9)}
.lp-deck-btn.is-known:hover{transform:translateY(-2px);filter:brightness(1.05)}
.lp-deck-tally{font-size:.78rem;color:var(--muted);text-align:center}
.lp-deck-done{display:grid;place-items:center;text-align:center;padding:2.2rem 1rem}
.lp-card-hint.is-light{color:rgba(255,255,255,.7)}

/* ============================================================
   FaceTime-style call, full screen
   ============================================================ */
.lp.tutor-call.tutor-max .lp-dr-top{display:none}
.lp.tutor-call.tutor-max .lp-dr-body{background:none;padding:0}
.lp.tutor-call.tutor-max .lp-drawer{background:#0B1024}

.fc{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.fc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc.is-voice .fc-bg{filter:blur(26px) saturate(1.2);transform:scale(1.15);opacity:.55}
.fc-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,16,36,.7),rgba(11,16,36,.25) 30%,rgba(11,16,36,.35) 62%,rgba(11,16,36,.9));
}
.fc.is-voice .fc-veil{background:linear-gradient(180deg,rgba(11,16,36,.75),rgba(11,16,36,.6) 50%,rgba(11,16,36,.92))}

.fc-top{
  position:relative;z-index:2;display:flex;align-items:center;gap:1rem;width:100%;
  padding:1.1rem clamp(1rem,3vw,2rem);
}
.fc-id{flex:1;text-align:center;color:#fff}
.fc-id b{display:block;font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.02rem}
.fc-id span{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums}
.fc-net{display:inline-flex;align-items:center;gap:.3rem;flex:none;padding:.28rem .6rem;border-radius:99px;
  font-size:.7rem;font-weight:800;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px)}

.fc-centre{position:relative;z-index:2;flex:1;display:grid;place-content:center;justify-items:center;gap:.5rem;text-align:center}
.fc-ava{position:relative;display:block;width:clamp(120px,22vh,180px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.5);box-shadow:0 30px 60px -24px rgba(0,0,0,.8)}
.fc-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-ava i{position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(63,210,199,.55);
  animation:aura 2.6s ease-out infinite}
.fc-centre h2{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.5rem;color:#fff;margin-top:1rem}
.fc-centre p{font-size:.95rem;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}

.fc.is-video{justify-content:flex-end}

.fc-bar{
  position:relative;z-index:3;display:flex;gap:1rem;margin-top:auto;padding:0 1rem;
}
.fc-btn{
  display:grid;place-items:center;width:60px;height:60px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.16);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.fc-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.28)}
.fc-btn.is-end{background:linear-gradient(130deg,#FF7A59,#EF4444);border-color:transparent;transform:rotate(135deg)}
.fc-btn.is-end:hover{transform:rotate(135deg) translateY(-2px)}
.fc-note{
  position:relative;z-index:3;display:flex;align-items:center;gap:.4rem;
  margin:1.2rem 0 1.6rem;font-size:.76rem;color:rgba(255,255,255,.6);
}

/* outgoing-call state */
.fc-calling{
  display:inline-flex;align-items:baseline;gap:1px;
  font-size:.8rem;color:rgba(255,255,255,.7);letter-spacing:.02em;
}
.fc-calling.is-big{font-size:1rem;margin-top:.4rem}
.fc-calling i{
  width:3px;height:3px;border-radius:50%;background:currentColor;margin-left:1px;
  animation:fcDot 1.4s ease-in-out infinite;
}
.fc-calling i:nth-child(2){animation-delay:.2s}
.fc-calling i:nth-child(3){animation-delay:.4s}
@keyframes fcDot{0%,60%,100%{opacity:.2}30%{opacity:1}}
.fc-id{flex:1;text-align:center;color:#fff}
.fc-top{justify-content:space-between}

/* the credential at the end of the path */
.pg-path-final{
  display:flex;align-items:center;gap:.7rem;position:relative;
  margin-top:.5rem;padding:.55rem .6rem;border-radius:14px;
  background:rgba(16,22,54,.03);border:1px dashed rgba(16,22,54,.16);
}
.pg-path-final::before{
  content:"";position:absolute;left:13px;top:-.55rem;width:2px;height:.55rem;
  background:rgba(16,22,54,.12);
}
.pg-path-final .pg-path-dot{color:var(--muted);background:#fff;box-shadow:0 0 0 2px rgba(16,22,54,.08) inset}
.pg-path-final .pg-path-t{font-weight:700;color:var(--ink-2)}
.pg-path-final.is-ready,.pg-path-final.is-passed{
  border-style:solid;border-color:transparent;
  background:linear-gradient(120deg,#FFF3D6,#FFE6DB);
}
.pg-path-final.is-ready .pg-path-dot,.pg-path-final.is-passed .pg-path-dot{
  color:#fff;background:linear-gradient(130deg,var(--orange),var(--coral));box-shadow:none;
}
.pg-path-final.is-ready .pg-path-t,.pg-path-final.is-passed .pg-path-t{color:var(--ink)}
.pg-path-final.is-passed .pg-path-p{color:#0F7A5A;font-weight:800}

/* pinned footer under the scrolling notification list */
.nt-foot{
  display:flex;align-items:center;justify-content:center;gap:.4rem;flex:none;
  padding:.85rem 1rem;border-top:1px solid var(--line);
  font-size:.85rem;font-weight:700;color:var(--indigo);background:rgba(255,255,255,.9);
  transition:background .3s var(--ease);
}
.nt-foot:hover{background:rgba(59,142,240,.08)}
.nt-foot .lu{transition:transform .35s var(--ease)}
.nt-foot:hover .lu{transform:translateX(3px)}

/* ============================================================
   Notifications page (notifications.html)
   ============================================================ */
.nf-tools{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.nf-filters{display:flex;flex-wrap:wrap;gap:.4rem}
.nf-filters .pill{display:inline-flex;align-items:center;gap:.45rem;transition:all .3s var(--ease)}
.nf-filters .pill:hover{background:#fff}
.nf-filters .pill.is-on{
  color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--coral),var(--lilac),var(--sky));
}
.nf-count{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 .35rem;border-radius:99px;
  font-size:.7rem;font-weight:800;color:var(--ink-2);background:rgba(16,22,54,.07);
}
.nf-filters .pill.is-on .nf-count{color:#fff;background:rgba(255,255,255,.25)}
#nfReadAll:disabled{opacity:.45;cursor:not-allowed}

.nf-wrap{display:grid;gap:1.6rem;margin-top:1.4rem;max-width:900px}
.nf-day{
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.6rem;
}
.nf-list{display:grid;gap:.5rem}
.nf-row{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.9rem;
  padding:.9rem 1.1rem;border-radius:20px;
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease);
}
.nf-row:hover{transform:translateX(3px);background:#fff;box-shadow:var(--shadow-md)}
.nf-row.is-unread{background:rgba(59,142,240,.06)}
.nf-row.is-unread::before{
  content:"";position:absolute;left:.45rem;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--sky);
}
.nf-ic{
  display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:14px;
  color:var(--ink-2);background:rgba(16,22,54,.05);
}
.nf-row.is-unread .nf-ic{color:#fff;background:linear-gradient(130deg,var(--lilac),var(--sky))}
.nf-body{display:flex;flex-direction:column;min-width:0}
.nf-t{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.96rem;color:var(--ink)}
.nf-d{font-size:.86rem;line-height:1.5;color:var(--muted);margin-top:.1rem}
.nf-w{flex:none;font-size:.76rem;color:var(--muted);white-space:nowrap}
.nf-go{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  color:var(--muted);background:rgba(16,22,54,.05);transition:all .35s var(--ease)}
.nf-row:hover .nf-go{color:#fff;background:linear-gradient(130deg,var(--lilac),var(--sky))}

.nf-empty{
  display:grid;place-items:center;text-align:center;padding:4rem 1.5rem;border-radius:var(--r-xl);
  color:var(--muted);background:rgba(255,255,255,.55);border:1px dashed rgba(16,22,54,.14);
}
@media(max-width:640px){
  .nf-row{grid-template-columns:auto minmax(0,1fr) auto}
  .nf-go{display:none}
}

/* delete a single notification */
.nf-del{
  display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;
  color:var(--muted);background:rgba(16,22,54,.05);transition:all .3s var(--ease);
}
.nf-del:hover{color:#fff;background:linear-gradient(130deg,#FF7A59,#EF4444)}
.nf-row.is-going{opacity:0;transform:translateX(24px);transition:opacity .22s var(--ease),transform .22s var(--ease)}

/* ============================================================
   Family members page (members.html) — a profile card per learner
   ============================================================ */
.mb-tools{margin-top:1.5rem;gap:.9rem 1rem}
.mb-tools .search{flex:1 1 240px}
.mb-tools .pill{display:inline-flex;align-items:center;gap:.45rem;transition:all .3s var(--ease)}
.mb-tools .pill.is-on{color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--coral),var(--lilac),var(--sky))}
.mb-tools .pill.is-on .nf-count{color:#fff;background:rgba(255,255,255,.25)}

.mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem;margin-top:1.4rem;max-width:1100px}
.mb-card{
  position:relative;display:grid;justify-items:center;text-align:center;gap:.15rem;
  padding:0 1.2rem 1.3rem;border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.mb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.mb-band{display:block;width:calc(100% + 2.4rem);height:62px;margin:0 -1.2rem .9rem;opacity:.22}
.mb-card.is-invited .mb-band{opacity:.14}
.mb-ava{
  display:grid;place-items:center;width:66px;height:66px;border-radius:50%;margin-top:-46px;
  color:#fff;font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.55rem;
  border:3px solid #fff;box-shadow:0 14px 28px -12px rgba(16,22,54,.55);
}
.mb-name{margin-top:.7rem;font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.06rem;
  letter-spacing:-.015em;color:var(--ink)}
.mb-mail{font-size:.82rem;color:var(--muted)}

.mb-stats{
  display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-top:1.1rem;padding-top:1rem;
  border-top:1px solid var(--line);
}
.mb-stats div{position:relative}
.mb-stats div + div::before{
  content:"";position:absolute;left:0;top:12%;height:76%;width:1px;background:var(--line);
}
.mb-stats b{display:block;font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.15rem;color:var(--ink)}
.mb-stats span{font-size:.68rem;color:var(--muted)}

.mb-ai{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:1.1rem;padding:.35rem .8rem;border-radius:99px;
  font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:linear-gradient(130deg,var(--lilac),var(--sky));
}
.mb-ai.is-off{color:var(--muted);background:rgba(16,22,54,.06)}

.mb-card.is-invited{border-style:dashed;border-color:rgba(16,22,54,.18);background:rgba(255,255,255,.62)}
.mb-card.is-invited .mb-ava{border-style:dashed;border-color:rgba(255,255,255,.9)}
.mb-invited-note{margin-top:1rem;font-size:.8rem;line-height:1.6;color:var(--muted)}
.mb-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.9rem}

/* the switch, used by the members page (its rules left with the old account cards) */
.ac-switch{
  position:relative;flex:none;width:46px;height:26px;border-radius:99px;
  background:rgba(16,22,54,.14);transition:background .35s var(--ease);
}
.ac-switch i{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease);
}
.ac-switch.on{background:linear-gradient(120deg,var(--mint),var(--sky))}
.ac-switch.on i{transform:translateX(20px)}

/* a <span class="progress"> needs to be a block to have any width */
.progress{display:block}

/* member card: the AI tutor is a state, not a control */
.mb-ai{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:99px;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;background:linear-gradient(130deg,var(--lilac),var(--sky));
}
.mb-ai.is-off{color:var(--muted);background:rgba(16,22,54,.06)}
.mb-foot{justify-items:start}

/* ---- invite dialog ---- */
.mdl{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.2rem;
  background:rgba(16,22,54,.45);backdrop-filter:blur(4px);
  animation:mdlIn .25s var(--ease);
}
@keyframes mdlIn{from{opacity:0}to{opacity:1}}
.mdl-card{
  width:min(440px,100%);border-radius:var(--r-xl);overflow:hidden;
  background:#fff;box-shadow:0 40px 90px -30px rgba(16,22,54,.6);
  animation:mdlCard .35s var(--ease);
}
@keyframes mdlCard{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.mdl-top{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,#FFF0E9,#F0EEFF 52%,#E6F7F3)}
.mdl-t{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.08rem;color:var(--ink)}
.mdl-body{display:grid;gap:.9rem;padding:1.2rem}
.fld{display:grid;gap:.35rem}
.fld > span{display:flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--ink-2)}
.fld > span i{font-style:normal;font-weight:500;color:var(--muted)}
.fld input,.fld textarea{
  width:100%;padding:.65rem .9rem;border-radius:14px;font-family:inherit;font-size:.94rem;color:var(--ink);
  background:rgba(255,255,255,.9);border:1px solid var(--line);resize:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.fld input:focus,.fld textarea:focus{outline:0;border-color:transparent;box-shadow:0 0 0 2px rgba(59,142,240,.4)}
.mdl-note{display:flex;align-items:flex-start;gap:.4rem;font-size:.78rem;line-height:1.5;color:var(--muted)}
.mdl-note .lu{flex:none;margin-top:.1rem;color:var(--teal)}
.mdl-err{font-size:.8rem;font-weight:600;color:#C2410C;background:#FFF1E7;padding:.5rem .7rem;border-radius:12px}
.mdl-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.2rem;border-top:1px solid var(--line);
  background:rgba(255,255,255,.7)}
.mdl-done{display:grid;place-items:center;text-align:center;padding:2rem 1.5rem 2.2rem}
.mdl-done .ds-note{max-width:34ch;margin-top:.4rem}
.mdl-done-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#fff;margin-bottom:1rem;
  background:linear-gradient(130deg,var(--mint),var(--sky));box-shadow:0 16px 32px -14px rgba(23,179,174,.9)}

/* ---- seats: the number, the empty state, the add-seats dialog ---- */
.mb-card{padding-top:0}
.mb-seat{
  position:absolute;top:.7rem;left:.8rem;z-index:2;
  padding:.22rem .55rem;border-radius:99px;
  font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(255,255,255,.9);box-shadow:var(--shadow-sm);
}
.mb-card.is-empty{
  justify-items:center;padding:2.6rem 1.2rem 1.6rem;
  border-style:dashed;border-color:rgba(16,22,54,.18);background:rgba(255,255,255,.55);
}
.mb-card.is-empty:hover{background:rgba(255,255,255,.8)}
.mb-empty-ic{
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;margin-bottom:.7rem;
  color:var(--muted);background:rgba(16,22,54,.05);
}
.mb-card.is-empty .mb-name{margin-top:0}

.sd-qty{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1rem;border-radius:18px;background:rgba(16,22,54,.03);
}
.sd-qty b{display:block;font-size:.95rem;color:var(--ink)}
.sd-sum{display:grid;gap:.55rem}
.sd-sum li{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--muted)}
.sd-sum b{font-family:'Outfit','Inter',sans-serif;font-weight:700;color:var(--ink)}
.mdl-top{display:grid;gap:.15rem}

/* ============================================================
   BILLING (billing.html)
   A subscription card carries its own invoice; closed periods
   become rows. The plan is the loud one, add-ons stay quiet.
   ============================================================ */
.bl-sub{
  position:relative;padding:1.25rem;border-radius:var(--r-lg);
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-sm);transition:box-shadow .4s var(--ease);
}
.bl-sub.is-primary{
  padding-top:1.9rem;background:rgba(255,255,255,.95);box-shadow:var(--shadow-md);
  border-color:transparent;
}
/* gradient hairline, painted not laid out */
.bl-sub.is-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,var(--sky),var(--lilac),var(--mint));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.bl-sub.is-off.is-primary::after{background:linear-gradient(135deg,var(--orange),#FFD08A)}

.bl-flag{
  /* the gradient ring is an ::after, so it paints last — lift the ribbon over it */
  position:absolute;z-index:1;top:0;left:1.25rem;transform:translateY(-50%);
  padding:.3rem .7rem;border-radius:99px;color:#fff;
  font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(120deg,var(--sky),var(--lilac));box-shadow:var(--shadow-sm);
}
.bl-sub.is-off .bl-flag{background:linear-gradient(120deg,var(--orange),var(--coral))}

.bl-sub-top{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.bl-sub-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:15px;color:var(--ink)}
.bl-sub-n{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.12rem;color:var(--ink)}
.bl-price{margin-left:auto;display:flex;align-items:baseline;gap:.25rem}
.bl-price b{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.03em;
  background-image:linear-gradient(120deg,var(--indigo),var(--lilac));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bl-price span{font-size:.82rem;color:var(--muted)}

.bl-state{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.bl-tag{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .7rem;border-radius:99px;
  font-size:.74rem;font-weight:700}
.bl-tag.is-live{color:#0F7A5A;background:#D8F6F1}
.bl-tag.is-auto{color:#1E4FB8;background:#DEEBFF}
.bl-tag.is-warn{color:#8A6100;background:#FFF3D6}

.bl-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.9rem 1.2rem;
  margin-top:1.1rem;padding-top:1.05rem;border-top:1px solid var(--line)}
.bl-meta dt{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bl-meta dd{margin-top:.2rem;font-size:.88rem;font-weight:600;color:var(--ink)}
.bl-meta dd i{display:block;margin-top:.1rem;font-style:normal;font-size:.8rem;font-weight:500;color:var(--muted)}
.bl-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem !important;
  font-weight:500 !important;color:var(--ink-2) !important;word-break:break-all}

.bl-inv{display:flex;align-items:center;gap:.75rem;margin-top:1.1rem;padding:.7rem .8rem;
  border-radius:18px;background:rgba(16,22,54,.035);border:1px solid var(--line)}
.bl-inv-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;
  color:var(--indigo);background:#fff;box-shadow:var(--shadow-sm)}
.bl-inv-n{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.92rem;color:var(--ink)}
.bl-dl{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;flex:none;
  padding:.45rem .8rem;border-radius:99px;font-size:.8rem;font-weight:700;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);transition:all .3s var(--ease)}
.bl-dl:hover{color:var(--indigo);border-color:rgba(59,142,240,.35);transform:translateY(-2px);box-shadow:var(--shadow-sm)}

.bl-warn{display:flex;align-items:flex-start;gap:.5rem;margin-top:.9rem;padding:.75rem .85rem;
  border-radius:16px;font-size:.84rem;line-height:1.55;color:#8A6100;background:#FFF6E2;
  border:1px solid rgba(255,162,76,.3)}
.bl-warn .lu{flex:none;margin-top:.12rem}

.bl-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem}
.bl-cancel{
  margin-left:auto;padding:.62rem 1rem;border-radius:99px;font-size:.85rem;font-weight:700;
  color:var(--muted);background:transparent;border:1px solid var(--line);transition:all .3s var(--ease);
}
.bl-cancel:hover{color:#C2410C;border-color:rgba(194,65,12,.35);background:#FFF1E7}
.bl-cancel.is-solid{margin-left:0;color:#fff;border-color:transparent;background:linear-gradient(120deg,#F0703B,#E0452B)}
.bl-cancel.is-solid:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(224,69,43,.7)}

/* ---- closed periods ---- */
.bl-hist{display:grid;gap:.4rem}
.bl-row{
  display:grid;grid-template-columns:36px minmax(0,1.7fr) minmax(0,1fr) 78px 92px 40px;
  align-items:center;gap:.85rem;padding:.75rem .9rem;border-radius:20px;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);
  transition:all .35s var(--ease);
}
.bl-row:hover{background:#fff;box-shadow:var(--shadow-sm);transform:translateX(2px)}
.bl-row-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;
  color:var(--muted);background:rgba(16,22,54,.05)}
.bl-row-n{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.92rem;color:var(--ink)}
.bl-row-main{min-width:0}
.bl-row-main p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-row-p{font-size:.82rem;color:var(--muted);white-space:nowrap}
.bl-row-a{font-family:'Outfit','Inter',sans-serif;font-weight:800;font-size:.98rem;color:var(--ink);text-align:right}
.bl-row-s{justify-self:center;padding:.3rem .65rem;border-radius:99px;font-size:.72rem;font-weight:700}
.bl-row-s.is-renewed{color:#0F7A5A;background:#D8F6F1}
.bl-row-s.is-upgraded{color:#5B3BC4;background:#ECE4FF}
.bl-row-s.is-ended{color:var(--muted);background:rgba(16,22,54,.06)}
.bl-row .bl-dl{width:36px;height:36px;padding:0;justify-content:center;border-radius:12px}

/* ---- right rail ---- */
.bl-next{display:grid;gap:.5rem}
.bl-next li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.6rem .75rem;border-radius:16px;background:rgba(16,22,54,.035)}
.bl-next-n{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink)}
.bl-next li b{font-family:'Outfit','Inter',sans-serif;font-weight:800;color:var(--ink)}
.bl-next-off{display:flex;align-items:flex-start;gap:.4rem;margin-top:.7rem;font-size:.8rem;
  line-height:1.5;color:#8A6100}
.bl-next-off .lu{flex:none;margin-top:.1rem}

.bl-card{
  position:relative;overflow:hidden;padding:1rem;border-radius:20px;color:#fff;
  background:linear-gradient(130deg,#2B5FD9,#5B3BC4 55%,#A98BFF);box-shadow:var(--shadow-md);
}
.bl-card::after{content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.14)}
.bl-card-brand{position:relative;font-family:'Outfit','Inter',sans-serif;font-weight:800;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.bl-card-num{position:relative;margin-top:1.4rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1rem;letter-spacing:.06em}
.bl-card-foot{position:relative;display:flex;justify-content:space-between;gap:1rem;margin-top:.9rem;
  font-size:.76rem;opacity:.85}

.bl-facts{display:grid;gap:.7rem}
.bl-facts li{display:flex;align-items:flex-start;gap:.55rem;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.bl-facts b{color:var(--ink)}
.bl-facts .lu{flex:none;margin-top:.15rem;color:var(--teal)}
.bl-facts li:nth-child(3) .lu{color:var(--coral)}
.bl-facts li:nth-child(4) .lu{color:var(--sky)}

@media (max-width:900px){
  .bl-row{grid-template-columns:36px minmax(0,1fr) 84px;grid-template-areas:"i n a" "i p s";row-gap:.35rem}
  .bl-row-ic{grid-area:i}
  .bl-row-main{grid-area:n}
  .bl-row-p{grid-area:p}
  .bl-row-a{grid-area:a}
  .bl-row-s{grid-area:s;justify-self:end}
  .bl-row .bl-dl{display:none}
  .bl-price{margin-left:0;width:100%}
}

/* ============================================================
   SUMMARY MODE (learn.html)
   Not a widget — an AI answer. Reads like a reply from the class
   tutor, typed out live the first time it is generated.
   ============================================================ */
.lp-summary{display:block;padding:clamp(1.4rem,3vw,2rem)}   /* every stage brings its own padding */
.lp-sum-head{display:flex;align-items:center;gap:.7rem;padding-bottom:.9rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--line)}
.lp-sum-ava{position:relative;flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;
  border:2px solid #fff;box-shadow:var(--shadow-sm)}
.lp-sum-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-sum-who{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink)}
.lp-sum-head .lp-regen{margin-left:auto}

.lp-sum-body{max-width:64ch;min-height:200px;font-size:.95rem;line-height:1.72;color:var(--ink-2)}
.lp-sum-body h3{
  margin:1.5rem 0 .5rem;font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:-.01em;color:var(--ink);
}
.lp-sum-body h3:first-child{margin-top:0}
.lp-sum-body p{margin:0 0 .7rem}
.lp-sum-body b{color:var(--ink);font-weight:700}
.lp-sum-body i{font-style:italic}
.lp-sum-body u{text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;
  text-underline-offset:4px;color:var(--ink);font-weight:600}
.lp-sum-body ul{display:grid;gap:.5rem;margin:.2rem 0 .9rem;padding:0;list-style:none}
.lp-sum-body li{position:relative;padding-left:1.35rem}
.lp-sum-body li::before{
  content:"";position:absolute;left:.25rem;top:.62em;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(130deg,var(--coral),var(--lilac));
}
.lp-sum-tip{
  display:block;margin-top:1.1rem;padding:.85rem 1rem;border-radius:18px;font-size:.9rem;line-height:1.65;
  color:var(--ink-2);background:linear-gradient(120deg,#FFF3D6,#FFE6DB);
}
.lp-sum-fine{display:flex;align-items:center;gap:.35rem;margin-top:1.4rem;font-size:.76rem;color:var(--muted)}
.lp-sum-fine .lu{flex:none;width:14px;height:14px;color:var(--lilac)}

/* ============================================================
   CLASS EXAM (exam.html)
   Focus mode: the learn page's top bar, one card, nothing else.
   ============================================================ */
.ex-wrap{display:grid;justify-items:center;padding:clamp(1.4rem,4vw,3rem) clamp(1rem,3vw,2rem) 4rem}
.ex-card{
  position:relative;overflow:hidden;width:min(100%,720px);
  padding:clamp(1.6rem,3.5vw,2.4rem);border-radius:var(--r-xl);
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-md);
}
.ex-badge{
  display:grid;place-items:center;width:64px;height:64px;border-radius:22px;color:#fff;margin-bottom:1.1rem;
  background:linear-gradient(130deg,var(--orange),var(--coral));box-shadow:0 16px 32px -16px rgba(255,122,89,.9);
}
.ex-badge.is-gold{background:linear-gradient(130deg,#FFC65C,#FF8A3D);box-shadow:0 18px 36px -16px rgba(255,166,60,.9)}
.ex-badge.is-miss{background:linear-gradient(130deg,var(--lilac),var(--sky));box-shadow:0 16px 32px -16px rgba(169,139,255,.9)}
.ex-h{margin-top:.35rem;font-family:'Outfit','Inter',sans-serif;font-weight:800;
  font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em;color:var(--ink)}
.ex-lead{margin-top:.5rem;font-size:.98rem;line-height:1.6;color:var(--ink-2);max-width:52ch}

.ex-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-top:1.5rem}
.ex-fact{display:flex;align-items:center;gap:.6rem;padding:.75rem .85rem;border-radius:18px;
  background:rgba(16,22,54,.035)}
.ex-fact-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:12px;
  color:var(--indigo);background:#fff;box-shadow:var(--shadow-sm)}
.ex-fact-k{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ex-fact-v{font-family:'Outfit','Inter',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink);margin-top:.1rem}

.ex-rules{display:grid;gap:.55rem;margin-top:1.4rem}
.ex-rules li{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.ex-rules .lu{flex:none;margin-top:.15rem;color:var(--teal)}
.ex-rules li:last-child .lu{color:var(--orange)}
.ex-prev{display:flex;align-items:center;gap:.4rem;margin-top:1.2rem;padding:.7rem .85rem;border-radius:16px;
  font-size:.86rem;color:var(--ink-2);background:linear-gradient(120deg,#FFF3D6,#FFE6DB)}
.ex-prev .lu{flex:none;color:var(--orange)}

/* ---- sitting the paper ---- */
.ex-run-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ex-count{display:inline-flex;align-items:center;padding:.4rem .8rem;border-radius:99px;flex:none;
  font-size:.8rem;font-weight:600;color:var(--muted);background:rgba(16,22,54,.05)}
.ex-meter{display:flex;gap:.3rem;margin-top:1rem}
.ex-meter i{flex:1;height:5px;border-radius:99px;background:rgba(16,22,54,.1)}
.ex-meter i.done{background:linear-gradient(90deg,var(--mint),var(--sky))}
.ex-meter i.on{background:linear-gradient(90deg,var(--coral),var(--lilac))}
.ex-q{margin:1.5rem 0 1.1rem;font-family:'Outfit','Inter',sans-serif;font-weight:700;
  font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.4;letter-spacing:-.02em;color:var(--ink)}
.ex-q i{display:block;margin-top:.5rem;font-size:.95rem;font-weight:500;font-style:italic;color:var(--ink-2)}
.ex-card .lp-options{display:grid;gap:.55rem}
.lp-option.is-picked{border-color:var(--indigo);background:#fff;box-shadow:0 10px 24px -14px rgba(43,95,217,.8)}
.lp-option.is-picked .lp-option-k{color:#fff;background:linear-gradient(130deg,var(--sky),var(--indigo))}
.ex-run-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:1.5rem}
.ex-run-foot .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.ex-run-foot #exBack .lu{transform:rotate(180deg)}
.ex-warn{display:flex;align-items:center;gap:.4rem;margin-top:.8rem;font-size:.82rem;color:#8A6100}
.ex-warn .lu{flex:none}

/* ---- results ---- */
.ex-bar{position:relative;height:10px;border-radius:99px;margin-top:1.4rem;background:rgba(16,22,54,.08)}
.ex-bar i{display:block;height:100%;width:var(--w);border-radius:99px;
  background:linear-gradient(90deg,var(--lilac),var(--sky))}
.ex-bar-pass{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:2px;background:var(--coral)}
.ex-bar-k{margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.ex-review-k{margin-top:1.6rem;font-size:.7rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.ex-review{display:grid;gap:.4rem;margin-top:.6rem}
.ex-review a{display:flex;align-items:center;gap:.75rem;padding:.7rem .8rem;border-radius:16px;
  background:rgba(16,22,54,.035);transition:all .3s var(--ease)}
.ex-review a:hover{background:#fff;box-shadow:var(--shadow-sm);transform:translateX(3px)}
.ex-review-n{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;
  font-size:.76rem;font-weight:800;color:var(--ink-2);background:#fff;box-shadow:var(--shadow-sm)}
.ex-review b{display:block;font-size:.9rem;font-weight:700;color:var(--ink)}
.ex-review i{display:block;font-style:normal;font-size:.78rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-review .lu{margin-left:auto;flex:none;color:var(--muted)}

.ex-card.is-pass{background:linear-gradient(150deg,#FFF8EC,#FFF3F0 55%,#F3F0FF)}
.ex-cert{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;
  margin-top:1.5rem;padding:1rem 1.1rem;border-radius:20px;
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-sm)}
.ex-cred{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem !important;letter-spacing:.02em}
.ex-closed{display:flex;align-items:flex-start;gap:.45rem;margin-top:1.1rem;font-size:.84rem;
  line-height:1.55;color:var(--muted)}
.ex-closed .lu{flex:none;margin-top:.15rem}
.ex-acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}