:root{
    --navy:#0D274A;
    --navy-rgb:13,39,74;
    --sky:#78B9E8;
    --sky-rgb:120,185,232;
    --mint:#91CFB7;
    --mint-rgb:145,207,183;
    --yellow:#F9C441;
    --yellow-rgb:249,196,65;
    --sand:#F5EFE5;

    --ink:var(--navy);
    --ink-70: rgba(var(--navy-rgb),.72);
    --ink-60: rgba(var(--navy-rgb),.66); /* WCAG AA: >=4.5:1 on cream/white for body text */
    --ink-50: rgba(var(--navy-rgb),.66); /* was .50 — failed contrast (~3:1) on light backgrounds */
    --ink-40: rgba(var(--navy-rgb),.52); /* was .40 — icons/labels, meets 3:1 non-text minimum */
    --line: rgba(var(--navy-rgb),.10);
    --line-soft: rgba(var(--navy-rgb),.06);

    --glass-bg: rgba(255,255,255,.64);
    --glass-bg-strong: rgba(255,255,255,.85);
    --glass-border: rgba(var(--navy-rgb),.13);

    --radius: 16px;
    --radius-lg: 28px;

    --shadow-glass: 0 18px 44px rgba(var(--navy-rgb),.11);
    --shadow-premium: 0 30px 80px rgba(var(--navy-rgb),.16);
    --shadow-cta: 0 10px 26px rgba(var(--yellow-rgb),.38);
    --shadow-cta-hover: 0 18px 40px rgba(var(--yellow-rgb),.5);

    --ease: cubic-bezier(.4,0,.2,1);
    --ease-out: cubic-bezier(.16,1,.3,1);

    --fs-h1: clamp(1.9rem, 1.1rem + 3.9vw, 4.7rem);
    --fs-h2: clamp(1.6rem, 1.22rem + 1.8vw, 3rem);
    --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    --fs-lead: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
    --fs-body: clamp(0.95rem, 0.91rem + 0.16vw, 1.0625rem);

    --gutter: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --section-pad: clamp(2.75rem, 1.9rem + 3.6vw, 6rem);

    color-scheme: light;
  }

  *,*::before,*::after{box-sizing:border-box;}

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--sand);
    color:var(--ink);
    font-family:"Manrope","Inter","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:var(--fs-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    overflow-wrap:anywhere;
    position:relative;
  }

  h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-0.03em; color:var(--navy); text-wrap:balance; }
  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
  img,svg{ display:block; max-width:100%; }
  ul{ margin:0; padding:0; list-style:none; }

  :focus-visible{
    outline:2.5px solid var(--sky);
    outline-offset:3px;
    border-radius:6px;
  }

  .container{
    width:100%;
    max-width:1240px;
    margin-inline:auto;
    padding-inline:var(--gutter);
  }

  .section{ padding-top:var(--section-pad); position:relative; }

  /* A whisper-thin rule for the couple of spots where two light sections
     sit back-to-back with no colour or card to mark the seam (FAQ, reviews).
     Not used between every section on purpose — most transitions already
     read fine on whitespace + the alternating card/dark-panel rhythm alone,
     and a line at every boundary would look like a dashboard, not a page. */
  .section-hr{
    margin:0 0 clamp(1.5rem,1.2rem + 1vw,2.25rem); border:0; height:1px;
    background:var(--line-soft);
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:2.25rem;
    padding:0.5rem 1rem;
    border-radius:999px;
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:var(--shadow-glass);
    font-size:0.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--ink-60);
  }

  .eyebrow--dark{
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.7);
    box-shadow:none;
  }

  .section-head{ max-width:44rem; margin-bottom:clamp(2.75rem,2.2rem + 2.6vw,4.5rem); }
  .section-head h2{ margin-top:1.1rem; font-size:var(--fs-h2); line-height:1.12; }
  .section-head p{ margin-top:1.1rem; font-size:var(--fs-lead); line-height:1.65; color:var(--ink-60); max-width:38rem; }
  .section-head p.section-intro{ margin-top:0.75rem; font-size:1rem; color:var(--ink-50); }

  /* ---------- decorative background blobs ---------- */
  .ambient{ position:fixed; z-index:-1; border-radius:50%; filter:blur(110px); opacity:.55; pointer-events:none; }
  .ambient--a{ left:-14rem; top:6rem; width:34rem; height:34rem; background:rgba(var(--sky-rgb),.45); }
  .ambient--b{ right:-16rem; top:44rem; width:38rem; height:38rem; background:rgba(var(--yellow-rgb),.4); }
  .ambient--c{ bottom:-14rem; left:38%; width:32rem; height:32rem; background:rgba(var(--mint-rgb),.4); }

  /* ---------- header ---------- */
  header.site{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:60;
    padding-top:clamp(0.75rem,0.6rem + 0.5vw,1rem);
    /* Own compositing layer: Chromium can otherwise paint a sticky element
       one frame behind while backdrop-filter is active on it. */
    transform:translateZ(0);
  }
  header.site > .container{ position:relative; }

  .headbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    min-height:4rem;
    padding:0.5rem 0.75rem 0.5rem 1rem;
    border-radius:var(--radius-lg);
    border:1px solid rgba(var(--navy-rgb),.10);
    background:rgba(255,255,255,.8);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    box-shadow:0 16px 40px rgba(var(--navy-rgb),.10);
  }

  .brand{ display:flex; align-items:center; gap:0.55rem; flex-shrink:0; }
  .brand-mark{ width:2.35rem; height:2.35rem; flex-shrink:0; }

  /* ---------- living lens mark ---------- */
  .lens-spark{
    transform-box:fill-box; transform-origin:50% 50%;
    animation:lensPulse 3.4s ease-in-out infinite;
  }
  .lens-pupil{ transition:transform .22s var(--ease-out); }
  @keyframes lensPulse{
    0%, 100%{ opacity:.85; transform:scale(1); }
    50%{ opacity:.45; transform:scale(1.35); }
  }
  .brand-word{ font-weight:800; font-size:1.05rem; letter-spacing:-0.02em; color:var(--navy); line-height:1; }
  .brand-word span{ font-weight:500; color:var(--ink-50); }

  nav.primary{ display:none; align-items:center; gap:clamp(1.1rem,0.4rem + 2vw,2rem); flex-wrap:nowrap; }
  nav.primary a{
    font-size:0.9rem; font-weight:700; color:var(--ink-70); white-space:nowrap;
    transition:color .25s var(--ease);
    position:relative;
  }
  nav.primary a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:var(--yellow); transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease-out);
  }
  nav.primary a:hover{ color:var(--navy); }
  nav.primary a:hover::after{ transform:scaleX(1); }

  .head-actions{ display:flex; align-items:center; gap:0.5rem; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:3rem; padding-inline:1.5rem; border-radius:999px;
    font-size:0.88rem; font-weight:800; white-space:nowrap;
    transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s var(--ease);
  }
  .btn-cta{
    background:var(--yellow); color:var(--navy); box-shadow:var(--shadow-cta);
    position:relative; overflow:hidden; isolation:isolate;
  }
  .btn-cta:hover{ transform:translateY(-3px); box-shadow:var(--shadow-cta-hover); background:#fbcf5c; }
  .btn-cta:active{ transform:translateY(-1px); }
  .btn-cta::after{
    content:""; position:absolute; top:-40%; left:-45%; width:26%; height:180%;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));
    transform:skewX(-22deg); opacity:0; pointer-events:none;
  }
  .btn-cta:hover::after{ opacity:1; animation:shimmer .9s ease forwards; }
  @keyframes shimmer{ from{ left:-45%; } to{ left:120%; } }

  .header-cta{ display:none; }
  @media (min-width:560px){ .header-cta{ display:inline-flex; } }

  .menu-btn{
    display:flex; align-items:center; justify-content:center;
    width:3rem; height:3rem; border-radius:999px; flex-shrink:0;
    border:1px solid var(--line); background:rgba(255,255,255,.7);
    box-shadow:0 4px 14px rgba(var(--navy-rgb),.06);
    transition:background-color .25s var(--ease);
  }
  .menu-btn:hover{ background:#fff; }
  .menu-btn svg{ width:1.25rem; height:1.25rem; }
  .menu-btn .icon-close{ display:none; }
  .menu-btn[aria-expanded="true"] .icon-menu{ display:none; }
  .menu-btn[aria-expanded="true"] .icon-close{ display:block; }

  @media (min-width:860px){
    nav.primary{ display:flex; }
    .menu-btn{ display:none; }
  }

  .mobile-panel{
    position:absolute; left:var(--gutter); right:var(--gutter); top:calc(100% + 0.5rem);
    z-index:70; opacity:0; transform:translateY(-8px) scale(0.98); transform-origin:top center;
    pointer-events:none;
    border-radius:var(--radius-lg); border:1px solid var(--glass-border);
    background:var(--glass-bg-strong); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--shadow-premium);
    transition:opacity .28s var(--ease), transform .28s var(--ease-out);
  }
  .mobile-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .mobile-panel nav{ display:flex; flex-direction:column; gap:0.2rem; padding:0.75rem; }
  .mobile-panel a{
    display:flex; align-items:center; min-height:3rem; padding-inline:1rem;
    border-radius:12px; font-weight:700; font-size:0.92rem; color:var(--navy);
    transition:background-color .2s var(--ease);
  }
  .mobile-panel a:hover{ background:rgba(var(--sky-rgb),.12); }
  .mobile-panel a.mobile-cta{
    margin-top:0.35rem; justify-content:center; background:var(--yellow);
    box-shadow:var(--shadow-cta); font-weight:800;
  }
  @media (min-width:860px){ .mobile-panel{ display:none; } }

  /* ---------- hero ---------- */
  .hero-section{ padding-top:clamp(1.5rem, 1rem + 2vw, 3rem); }
  .hero-grid{
    display:grid; gap:3.25rem; align-items:center;
  }
  @media (min-width:1024px){
    .hero-grid{ grid-template-columns:0.95fr 1.05fr; gap:4rem; }
  }

  .hero-copy h1{ font-size:var(--fs-h1); line-height:1.1; max-width:40rem; }
  /* From here up, the two-column hero-grid squeezes the text column to
     ~430-530px regardless of viewport — but --fs-h1 keeps scaling with the
     full viewport width, so past ~1000px the heading kept growing while its
     column didn't, wrapping into 4-5 ragged lines. Retune to the column's
     actual width instead. */
  @media (min-width:768px){
    .hero-copy h1{ font-size:clamp(2rem, 0.85rem + 2.7vw, 3.4rem); }
  }
  @media (min-width:768px){ .nowrap-md{ white-space:nowrap; } }
  .badge-row{ margin-top:1.4rem; }
  .badge-soft{
    display:inline-flex; align-items:center; gap:0.4rem; min-height:2.5rem;
    padding:0.5rem 1rem; border-radius:999px; border:1px solid var(--glass-border);
    background:var(--glass-bg); box-shadow:var(--shadow-glass); backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px); font-size:0.88rem; font-weight:700; color:var(--ink-70);
  }
  @media (max-width:380px){ .badge-soft{ padding:0.45rem 0.8rem; font-size:0.82rem; } }
  .hero-copy .lead{ margin-top:1.5rem; max-width:34rem; font-size:var(--fs-lead); line-height:1.65; color:var(--ink-60); }

  .hero-actions{
    margin-top:2rem; display:flex; flex-direction:column; gap:1rem;
  }
  @media (min-width:560px){ .hero-actions{ flex-direction:row; align-items:center; } }
  .hero-actions .btn-cta{ min-height:3.5rem; padding-inline:1.75rem; width:100%; }
  @media (min-width:560px){ .hero-actions .btn-cta{ width:auto; } }
  .hero-note{ font-size:0.88rem; font-weight:600; color:var(--ink-40); }

  /* Buffer zone above the main tier: a resized browser window at, say,
     700-900px tall previously got ZERO compression (vs. the big cut just
     below 700px) — a hard cliff that left only a few px of spare room
     right above the threshold. This tier closes that gap gradually so
     there's real margin everywhere, not just at the two tested extremes. */
  @media (max-height:900px){
    .hero-section{ padding-top:clamp(1rem, 0.5rem + 1.2vh, 2rem); }
    .badge-row{ margin-top:1rem; }
    .hero-copy .lead{ margin-top:1rem; }
    .hero-actions{ margin-top:1.4rem; }
  }
  /* Short viewports (landscape phones, a small resized browser window):
     compress the hero's own rhythm so the CTA button is never pushed
     below the fold. Independent of width — a tall vw-based heading on a
     wide-but-short landscape phone is exactly the failure case this guards. */
  @media (max-height:700px){
    .hero-section{ padding-top:clamp(0.6rem, 0.3rem + 1vh, 1.25rem); }
    .hero-copy h1{ font-size:clamp(1.5rem, 1.1rem + 2vw, 2.5rem); line-height:1.15; }
    .badge-row{ margin-top:0.6rem; }
    .badge-soft{ min-height:2.1rem; padding:0.4rem 0.85rem; }
    .hero-copy .lead{ margin-top:0.6rem; }
    .hero-actions{ margin-top:0.8rem; gap:0.6rem; }
    .hero-actions .btn-cta{ min-height:2.75rem; }
    .hero-visual{ display:none; }
  }
  /* Extreme case: older phones in landscape (≈320–360px tall). One more
     notch: smaller sticky header, and the tagline steps aside so the
     button is guaranteed to stay above the fold. */
  @media (max-height:420px){
    header.site{ padding-top:0.3rem; }
    .headbar{ min-height:3rem; }
    .eyebrow{ min-height:1.9rem; padding:0.3rem 0.75rem; }
    .hero-copy h1{ font-size:clamp(1.25rem, 1rem + 1.6vw, 1.9rem); }
    .badge-row{ margin-top:0.4rem; }
    .hero-copy .lead{ display:none; }
    .hero-actions{ margin-top:0.5rem; }
  }

  .hero-visual{ position:relative; }
  @media (max-width:639px){ .hero-visual{ display:none; } }
  .hero-ring{
    position:absolute; right:-1.5rem; bottom:-2rem; width:15rem; height:15rem;
    border-radius:50%; border:1px solid rgba(var(--sky-rgb),.28); pointer-events:none;
  }
  .lens-frame{
    position:relative; overflow:hidden; min-height:22rem;
    border:1px solid var(--glass-border);
    background:linear-gradient(155deg, rgba(var(--sky-rgb),.18), rgba(var(--navy-rgb),.9));
    box-shadow:var(--shadow-premium);
    border-radius:44% 56% 68% 32% / 42% 48% 58% 52%;
  }
  @media (min-width:640px){ .lens-frame{ min-height:27rem; } }
  @media (min-width:1024px){ .lens-frame{ min-height:32rem; } }
  .lens-frame svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

  .benefit-grid{
    margin-top:clamp(3.5rem,2.6rem + 3.4vw,5.5rem);
    display:grid; grid-template-columns:1fr; gap:1.4rem;
  }
  @media (min-width:768px){ .benefit-grid{ grid-template-columns:repeat(var(--cols,3),1fr); } }

  .glass-card{
    border-radius:var(--radius-lg);
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    box-shadow:var(--shadow-glass);
    transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  }
  .glass-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-premium); }

  .benefit-card{ display:flex; gap:1.25rem; padding:1.5rem; min-height:9.5rem; }
  .benefit-icon{
    flex-shrink:0; width:3.5rem; height:3.5rem; border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center;
  }
  .benefit-icon svg{ width:1.5rem; height:1.5rem; }
  .benefit-card h3{ font-size:1.1rem; letter-spacing:-0.02em; }
  .benefit-card p{ margin-top:0.5rem; font-size:0.92rem; line-height:1.6; color:var(--ink-60); }

  /* ---------- skills ---------- */
  .skills-panel{
    position:relative; overflow:hidden; border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--navy),#162B4C 55%,#1C2541);
    box-shadow:var(--shadow-premium);
    padding:clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
    border:1px solid rgba(255,255,255,.08);
  }
  .skills-grid{
    display:flex; gap:1rem; margin:0; padding:0.1rem 0.1rem 0.2rem;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .skills-grid::-webkit-scrollbar{ display:none; }
  .skill{
    flex:1 0 min(82%, 16rem); scroll-snap-align:start;
    position:relative; overflow:hidden;
    border-radius:20px; border:1px solid rgba(255,255,255,.09);
    background:rgba(255,255,255,.045);
    padding:1.5rem 1.4rem 1.45rem;
    transition:background-color .3s var(--ease), transform .4s var(--ease-out);
  }
  @media (min-width:640px){ .skill{ flex-basis:calc(50% - 0.5rem); } }
  @media (min-width:1024px){ .skill{ flex-basis:calc(25% - 0.75rem); } }
  .skill:hover{ background:rgba(255,255,255,.07); transform:translateY(-3px); }
  .skill::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); }
  .skill-icon{
    width:3rem; height:3rem; border-radius:14px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.07); color:var(--accent); border:1px solid rgba(255,255,255,.08);
  }
  .skill-icon svg{ width:1.45rem; height:1.45rem; }
  .skill h3{ margin-top:1.15rem; color:#fff; font-size:1.08rem; font-weight:800; letter-spacing:-0.02em; }
  .skill p{ margin-top:0.5rem; font-size:0.9rem; line-height:1.6; color:rgba(255,255,255,.64); }
  .section-head p strong{ color:var(--navy); font-weight:800; }

  /* ---------- session preview ---------- */
  .preview-panel{
    position:relative; display:block; width:100%; min-height:18rem;
    overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--glass-border);
    background:linear-gradient(160deg,var(--navy),#122544 65%,#0B1C36);
    box-shadow:var(--shadow-premium);
  }
  @media (min-width:640px){ .preview-panel{ min-height:24rem; } }
  @media (min-width:1024px){ .preview-panel{ min-height:32rem; } }
  .preview-panel svg.scene{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; pointer-events:none; }
  .preview-play{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:5.5rem; height:5.5rem; border-radius:50%; background:#fff; color:var(--navy);
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-premium);
    transition:transform .3s var(--ease-out);
  }
  @media (min-width:768px){ .preview-play{ width:6.5rem; height:6.5rem; } }
  .preview-panel:hover .preview-play{ transform:translate(-50%,-50%) scale(1.06); }
  .preview-play svg{ width:1.8rem; height:1.8rem; margin-left:3px; }
  .preview-note{
    position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%);
    background:rgba(var(--navy-rgb),.82); color:#fff; font-size:0.78rem; font-weight:700;
    padding:0.5rem 1rem; border-radius:999px; backdrop-filter:blur(10px);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
    white-space:nowrap;
  }
  .preview-note.show{ opacity:1; }

  /* ---------- carousel head + arrows (themes / teachers) ---------- */
  .carousel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:clamp(1.75rem,1.2rem + 1.6vw,2.5rem); }
  .carousel-head .section-head{ margin-bottom:0; min-width:0; }
  .carousel-arrows{ display:flex; gap:0.5rem; flex-shrink:0; padding-top:0.3rem; }
  .carousel:not(.has-overflow) .carousel-arrows{ display:none; }

  /* full-bleed track: cards align to the container edge, and card shadows
     sit in the gutter padding instead of being clipped into a seam */
  .carousel-track,
  .theme-grid, .teachers-track{
    display:flex; margin-inline:calc(-1 * var(--gutter));
    padding:1.5rem var(--gutter) 2.75rem;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scroll-padding-inline:var(--gutter); scrollbar-width:none;
  }
  .theme-grid::-webkit-scrollbar, .teachers-track::-webkit-scrollbar{ display:none; }

  /* ---------- monthly themes ---------- */
  .theme-grid{ gap:1.4rem; }
  .theme-card{
    flex:1 0 min(84%, 20rem); scroll-snap-align:start; overflow:hidden;
    background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:0 8px 22px rgba(var(--navy-rgb),.10);
    transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  }
  .theme-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(var(--navy-rgb),.14); }
  .theme-media{ height:13rem; overflow:hidden; position:relative; }
  .theme-media svg{ width:100%; height:100%; transition:transform .5s var(--ease-out); }
  .theme-card:hover .theme-media svg{ transform:scale(1.06); }
  .theme-body{ padding:1.5rem; }
  .theme-card h3{ margin-top:0; font-size:1.2rem; letter-spacing:-0.02em; }
  .theme-card p{ margin-top:0.5rem; font-size:0.92rem; line-height:1.6; color:var(--ink-60); }


  /* ---------- age groups ---------- */
  .age-grid{ display:grid; gap:1.5rem; align-items:stretch; }
  @media (min-width:1024px){ .age-grid{ grid-template-columns:repeat(2,1fr); } }

  .age-card{
    height:100%; min-height:22rem; border-radius:var(--radius-lg);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:var(--shadow-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:2rem; display:grid; gap:1.75rem; align-items:center;
    grid-template-columns:1fr; overflow:hidden;
    transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  }
  .age-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-premium); }
  @media (min-width:640px){ .age-card{ grid-template-columns:1fr 15rem; } }
  /* compact on phones so both groups fit comfortably */
  @media (max-width:639px){
    .age-card{ min-height:0; padding:1.35rem; gap:0.75rem; }
    .age-number{ margin-top:0.4rem; font-size:2.4rem; }
    .age-number small{ margin-top:0.2rem; font-size:0.95rem; }
    .age-card p{ margin-top:0.6rem; font-size:0.9rem; }
  }

  .age-card--jr{ background:linear-gradient(140deg, rgba(var(--sky-rgb),.22), rgba(255,255,255,.55)); }
  .age-card--sr{ background:linear-gradient(140deg, rgba(var(--yellow-rgb),.16), rgba(255,255,255,.55)); }

  .age-eyebrow{ font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.09em; color:var(--ink-40); }
  .age-number{ margin-top:0.9rem; font-size:clamp(2.6rem,2.2rem + 1.6vw,4rem); font-weight:800; letter-spacing:-0.04em; line-height:1; }
  .age-number small{ display:block; margin-top:0.35rem; font-size:1.05rem; font-weight:700; letter-spacing:0; color:var(--ink-60); }
  .age-card p{ margin-top:1.1rem; font-size:0.95rem; line-height:1.65; color:var(--ink-60); max-width:26rem; }
  .age-art{ margin-inline:auto; width:100%; max-width:15rem; }
  @media (min-width:640px){ .age-art{ margin-left:auto; } }

  /* ---------- teachers: full-width swipeable cards ---------- */
  .teachers-carousel{ position:relative; }
  .teachers-head{ align-items:center; }
  .teachers-eyebrow{ display:inline-block; }
  .teachers-track{ gap:1.1rem; }
  .teacher-card2{
    flex:1 0 min(86%, 24rem); scroll-snap-align:start;
    display:flex; flex-direction:column; gap:1.1rem;
    border-radius:var(--radius-lg); padding:1.6rem; color:#fff;
    background:linear-gradient(150deg,var(--navy),#1C3158);
    box-shadow:0 12px 26px rgba(var(--navy-rgb),.18);
  }
  @media (min-width:900px){ .teacher-card2{ flex-basis:min(48%, 26rem); } }
  .teacher-top{ display:flex; align-items:center; gap:1.1rem; }
  .teacher-card2 .teacher-avatar{
    width:5rem; height:5rem; max-width:none; aspect-ratio:1; flex-shrink:0; margin:0; border-radius:20px;
    position:relative; overflow:hidden;
    background:radial-gradient(circle at 32% 28%, rgba(var(--sky-rgb),.55), transparent 60%), linear-gradient(150deg,#1C3158,#0D274A);
    display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.14);
  }
  .teacher-card2 .teacher-avatar span{ font-size:1.6rem; font-weight:800; letter-spacing:-0.03em; color:#fff; }
  .teacher-card2 .teacher-avatar svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none; }
  .teacher-card2 h3{ font-size:1.25rem; color:#fff; letter-spacing:-0.02em; }
  .teacher-card2 .team-role{ margin-top:0.25rem; font-size:0.86rem; font-weight:700; color:var(--yellow); }
  .teacher-bio{ font-size:0.95rem; line-height:1.7; color:rgba(255,255,255,.75); }
  .teacher-avatar{ position:relative; overflow:hidden; }
  .teacher-avatar span{ color:#fff; font-weight:800; }
  .teacher-avatar svg{ position:absolute; inset:0; width:100%; height:100%; }

  /* ---------- format facts + price ---------- */
  .format-facts{ margin-top:2.5rem; }
  .stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.85rem; }
  @media (min-width:560px){ .stat-grid{ gap:1.1rem; } }
  @media (min-width:820px){ .stat-grid{ grid-template-columns:repeat(4,1fr); gap:1.4rem; } }

  .stat-card{
    min-height:8.5rem; border-radius:var(--radius-lg); padding:1.25rem 1.1rem;
    border:1px solid var(--glass-border); background:var(--glass-bg);
    box-shadow:var(--shadow-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  }
  @media (min-width:560px){ .stat-card{ padding:1.5rem; } }
  .stat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-premium); }
  .stat-card svg{ width:1.4rem; height:1.4rem; color:var(--sky); }
  .stat-card strong{ margin-top:1.1rem; display:block; font-size:1.2rem; font-weight:800; overflow-wrap:normal; word-break:keep-all; }
  .stat-card span{ margin-top:0.2rem; display:block; font-size:0.85rem; color:var(--ink-50); }

  .price-card{
    margin-top:1.1rem; border-radius:var(--radius-lg); padding:1.5rem 1.75rem;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.75rem 2rem;
    background:linear-gradient(120deg,var(--yellow),#FFDE68);
    box-shadow:0 20px 48px rgba(var(--yellow-rgb),.24);
    border:1px solid rgba(var(--yellow-rgb),.35);
  }
  @media (min-width:820px){ .stat-grid + .price-card{ margin-top:1.4rem; } }
  .price-main{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0.4rem 0.9rem; }
  .price-card span.label{ font-size:0.9rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:rgba(var(--navy-rgb),.62); flex-basis:100%; }
  .price-card strong{ font-size:clamp(2rem,1.7rem + 1.2vw,2.8rem); font-weight:800; letter-spacing:-0.04em; color:var(--navy); }
  .price-card small{ font-size:0.92rem; font-weight:700; color:rgba(var(--navy-rgb),.6); }
  .price-card .price-note{ font-size:0.9rem; font-weight:600; color:rgba(var(--navy-rgb),.72); max-width:22rem; }

  /* ---------- FAQ ---------- */
  .faq-grid{ display:grid; grid-template-columns:1fr; gap:0.9rem; }
  @media (min-width:768px){ .faq-grid{ grid-template-columns:repeat(2,1fr); gap:1.2rem; } }

  details.faq{
    border-radius:var(--radius); padding-inline:1.25rem;
    background:#F8FAFD; border:1px solid var(--line-soft);
    box-shadow:0 2px 6px rgba(var(--navy-rgb),.03);
    transition:background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  }
  details.faq[open]{ background:#fff; box-shadow:0 10px 28px rgba(var(--navy-rgb),.09); border-color:var(--line); }
  details.faq summary{
    display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
    min-height:3.5rem; padding-block:1rem; cursor:pointer; list-style:none; font-weight:700;
  }
  details.faq summary::-webkit-details-marker{ display:none; }
  details.faq summary svg{ width:1.15rem; height:1.15rem; flex-shrink:0; transition:transform .3s var(--ease); color:var(--ink-40); }
  details.faq[open] summary svg{ transform:rotate(180deg); }
  details.faq .faq-a{ padding-bottom:1.25rem; font-size:0.92rem; line-height:1.65; color:var(--ink-60); }
  @keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
  details.faq[open] .faq-a{ animation:faqIn .3s var(--ease-out); }

  /* ---------- signup ---------- */
  .cta-panel{
    position:relative; overflow:hidden; border-radius:var(--radius-lg);
    background:linear-gradient(150deg,var(--navy),#142B4E 55%,#1C2541);
    box-shadow:var(--shadow-premium);
    padding:clamp(1.75rem,1.3rem + 2.6vw,4rem);
  }
  .cta-glow-a{ position:absolute; right:-6rem; top:-8rem; width:24rem; height:24rem; border-radius:50%; background:rgba(var(--sky-rgb),.25); filter:blur(80px); pointer-events:none; }
  .cta-glow-b{ position:absolute; bottom:-13rem; left:33%; width:24rem; height:24rem; border-radius:50%; background:rgba(var(--yellow-rgb),.18); filter:blur(80px); pointer-events:none; }

  .cta-grid{ position:relative; display:grid; gap:2.5rem; align-items:center; }
  @media (min-width:1024px){ .cta-grid{ grid-template-columns:1fr 0.9fr; gap:4rem; } }

  .cta-copy h2{ margin-top:1.4rem; font-size:var(--fs-h2); line-height:1.1; color:#fff; max-width:34rem; }
  .cta-copy p{ margin-top:1.2rem; font-size:var(--fs-lead); line-height:1.65; color:rgba(255,255,255,.68); max-width:30rem; }

  form.signup{
    display:grid; grid-template-columns:1fr; gap:1rem;
    border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--shadow-premium); padding:1.35rem;
  }
  @media (min-width:560px){ form.signup{ grid-template-columns:1fr 1fr; padding:1.75rem; } }

  .field{ min-width:0; display:flex; flex-direction:column; }
  .field span{ margin-bottom:0.5rem; font-size:0.75rem; font-weight:700; color:rgba(255,255,255,.72); }
  .field input, .field select{
    min-height:3rem; width:100%; border-radius:var(--radius); border:1px solid rgba(255,255,255,.22);
    background:#fff; color:var(--navy); font:inherit; font-size:0.92rem; padding-inline:1rem;
    outline:none; transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .field input:focus, .field select:focus{ border-color:var(--sky); box-shadow:0 0 0 4px rgba(var(--sky-rgb),.22); }
  .field input::placeholder{ color:rgba(var(--navy-rgb),.35); }
  .field select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D274A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 0.9rem center; background-size:1.05rem;
    padding-right:2.6rem; cursor:pointer;
  }
  .field select::-ms-expand{ display:none; }

  .signup-submit{
    grid-column:1 / -1; min-height:3.5rem; border-radius:var(--radius);
  }
  .signup-submit[disabled]{ opacity:.7; cursor:progress; }
  .consent{
    grid-column:1 / -1; text-align:center; font-size:0.72rem; line-height:1.5; color:rgba(255,255,255,.45);
  }
  .form-error{
    grid-column:1 / -1; text-align:center; font-size:0.8rem; font-weight:700; color:#FFD9D9;
    display:none;
  }
  form.signup.is-error .form-error{ display:block; }

  .signup-success{
    grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:0.9rem; padding-block:1.5rem; color:#fff;
  }
  .signup-success .check{
    width:3.25rem; height:3.25rem; border-radius:50%; background:var(--mint);
    display:flex; align-items:center; justify-content:center; color:var(--navy);
  }
  .signup-success .check svg{ width:1.5rem; height:1.5rem; }
  .signup-success strong{ font-size:1.15rem; font-weight:800; }
  .signup-success p{ font-size:0.9rem; color:rgba(255,255,255,.65); max-width:22rem; }

  form.signup.is-sent .field,
  form.signup.is-sent .signup-submit,
  form.signup.is-sent .consent,
  form.signup.is-sent .form-error{ display:none; }
  form.signup .signup-success{ display:none; }
  form.signup.is-sent .signup-success{ display:flex; }

  .foot-nav{
    margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
    display:flex; flex-wrap:wrap; gap:0.6rem 1.6rem;
  }
  .foot-nav a{
    font-size:0.9rem; font-weight:700; color:rgba(255,255,255,.72);
    transition:color .2s var(--ease);
  }
  .foot-nav a:hover{ color:#fff; }

  .site-foot{
    position:relative; margin-top:1.6rem; padding-top:1.25rem;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:0.75rem; color:rgba(255,255,255,.45);
  }
  .foot-nav + .site-foot{ border-top:none; padding-top:0; margin-top:1.25rem; }

  .foot-wrap{ padding-top:var(--section-pad); padding-bottom:clamp(1.5rem, 1rem + 1vw, 2.5rem); }

  section[id], footer[id], #price, #contacts{ scroll-margin-top:6.5rem; }
  main{ overflow-x:hidden; overflow-x:clip; }

  /* ---------- photos in place of illustrations ---------- */
  .lens-frame img,
  .theme-media img,
  .teacher-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .age-photo{
    width:100%; max-width:20rem; aspect-ratio:16/10; object-fit:cover; border-radius:18px;
    margin-inline:auto; box-shadow:0 14px 30px rgba(13,39,74,.16);
  }
  @media (min-width:640px){ .age-photo{ max-width:none; aspect-ratio:4/5; margin-left:auto; margin-right:0; } }
  @media (max-width:639px){ .age-art{ max-width:8.5rem; } }

  /* ---------- video ---------- */
  .preview-panel .video-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .preview-panel .video-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--navy-rgb),.45), rgba(var(--navy-rgb),.05) 55%); pointer-events:none; }
  .preview-panel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .preview-panel.is-playing{ cursor:default; }

  /* ---------- ages: any number of groups ---------- */
  @media (min-width:1024px){
    .age-grid.count-1{ grid-template-columns:1fr; }
    .age-grid.count-3{ grid-template-columns:repeat(3,1fr); }
    .age-grid.count-4{ grid-template-columns:repeat(2,1fr); }
    .age-grid.count-3 .age-card{ grid-template-columns:1fr; }
  }

  /* ---------- carousel nav (shared): square controls, top-right ---------- */
  .team-role{ font-weight:700; color:var(--yellow); }
  .carousel-nav{
    width:2.6rem; height:2.6rem; border-radius:13px; flex-shrink:0;
    background:#fff; color:var(--navy); border:1px solid var(--line-2);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .carousel-nav svg{ width:1.2rem; height:1.2rem; }
  .carousel-nav:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
  .carousel-nav[disabled]{ opacity:.35; pointer-events:none; }
  .carousel:not(.has-overflow) .carousel-nav{ display:none; }

  /* ---------- contacts ---------- */
  .contacts{
    position:relative; margin-top:2.75rem; padding-top:2rem;
    border-top:1px solid rgba(255,255,255,.12); color:#fff;
  }
  .contacts-label{ font-size:0.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.5); }
  .contact-phone{
    margin-top:0.6rem; display:inline-flex; align-items:center; gap:0.6rem;
    font-size:clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight:800; letter-spacing:-0.01em; color:#fff;
    font-variant-numeric:tabular-nums;
  }
  .contact-phone svg{ width:1.3rem; height:1.3rem; color:var(--yellow); }
  .contact-phone:hover{ color:var(--yellow); }
  .socials{ margin-top:1rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
  .socials a{
    display:inline-flex; align-items:center; min-height:2.75rem; padding:0 1.1rem; border-radius:999px;
    border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
    font-size:0.85rem; font-weight:700; color:#fff; transition:background-color .25s var(--ease);
  }
  .socials a:hover{ background:rgba(255,255,255,.14); }

  /* ---------- locations (inside FAQ) ---------- */
  details.faq--wide{ grid-column:1/-1; }
  .loc-intro{ margin:0 0 0.9rem; font-size:0.92rem; line-height:1.6; color:var(--ink-60); }
  .faq-a .loc-carousel{ margin-top:0.4rem; }
  .loc-arrows{ justify-content:flex-end; margin-bottom:0.9rem; }
  .locations{
    display:flex; gap:0.75rem; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0.1rem 0.15rem 0.3rem;
    align-items:stretch;
  }
  .locations::-webkit-scrollbar{ display:none; }
  .location{
    flex:1 0 min(78%, 15.5rem); scroll-snap-align:start;
    border-radius:16px; padding:1rem 1.1rem; background:#F8FAFD; border:1px solid var(--line-soft);
    display:flex; flex-direction:column; gap:0.25rem;
  }
  .location b{ font-size:0.95rem; color:var(--ink); }
  .location span{ font-size:0.86rem; color:var(--ink-60); }
  .location a{ margin-top:auto; padding-top:0.6rem; font-size:0.82rem; font-weight:700; color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
  .contacts + .site-foot{ margin-top:2rem; }
  .mobile-panel a.mobile-phone{ font-variant-numeric:tabular-nums; color:var(--ink-70); }

  /* ---------- custom blocks (block builder) ---------- */
  .block-cards{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; }
  @media (min-width:640px){ .block-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (min-width:900px){ .block-cards{ grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); } }
  .block-card{ display:flex; flex-direction:column; gap:1rem; padding:1.5rem; }
  .block-card .benefit-icon{ background:rgba(var(--sky-rgb),.16); color:var(--navy); }
  .block-card-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:#EEF2F6; }
  .block-card-media img{ width:100%; height:100%; object-fit:cover; }
  .block-card-body h3{ font-size:1.15rem; letter-spacing:-0.02em; }
  .block-card-body p{ margin-top:0.5rem; font-size:0.92rem; line-height:1.6; color:var(--ink-60); }
  .block-prose{ max-width:44rem; font-size:1.05rem; line-height:1.75; color:var(--ink-70); }
  .block-prose strong{ color:var(--navy); font-weight:800; }
  .block-gallery{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.9rem; }
  @media (min-width:720px){ .block-gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; } }
  .gallery-item{ margin:0; border-radius:var(--radius); overflow:hidden; background:#EEF2F6; box-shadow:var(--shadow-glass); }
  .gallery-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s var(--ease-out); }
  .gallery-item:hover img{ transform:scale(1.04); }
  .gallery-item figcaption{ padding:0.6rem 0.8rem; font-size:0.85rem; color:var(--ink-60); background:#fff; }

  /* ---------- reviews: heading left, phone-style chat right ---------- */
  .reviews-layout{ display:grid; gap:2rem; align-items:start; }
  @media (min-width:860px){ .reviews-layout{ grid-template-columns:minmax(18rem,1fr) minmax(24rem, 34rem); gap:3rem; } }
  @media (min-width:1200px){ .reviews-layout{ grid-template-columns:minmax(18rem,1fr) minmax(26rem, 38rem); } }
  .reviews-intro .section-head{ margin-bottom:0; max-width:34rem; }
  .reviews-stat{
    margin-top:clamp(1.5rem,1rem + 2vw,2.75rem); display:flex; align-items:baseline; gap:0.7rem;
    padding-top:clamp(1.5rem,1rem + 2vw,2.75rem); border-top:1px solid var(--line-soft); max-width:26rem;
  }
  .reviews-stat strong{ font-size:clamp(2.2rem,1.8rem + 1.4vw,3rem); font-weight:800; letter-spacing:-0.03em; color:var(--navy); line-height:1; }
  .reviews-stat span{ font-size:0.95rem; line-height:1.5; color:var(--ink-60); }

  .chat-phone{
    position:relative; width:100%; max-width:38rem; margin-inline:auto;
    border-radius:26px; overflow:hidden; background:#fff;
    border:1px solid var(--line-soft); box-shadow:var(--shadow-premium);
  }
  .chat-head{
    display:flex; align-items:center; gap:0.7rem; padding:0.85rem 1.1rem;
    background:linear-gradient(150deg,var(--navy),#1C3158); color:#fff;
  }
  .chat-ava{
    width:2.5rem; height:2.5rem; border-radius:50%; background:var(--yellow); color:var(--navy);
    font-weight:800; font-size:0.9rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .chat-meta{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
  .chat-meta b{ font-size:0.95rem; }
  .chat-meta span{ font-size:0.78rem; color:rgba(255,255,255,.6); }

  .chat-scroll{
    max-height:21rem; overflow-y:auto; overscroll-behavior:contain;
    padding:1rem 0.9rem 1.6rem; display:flex; flex-direction:column; gap:0.7rem;
    background:
      radial-gradient(circle at 18% 8%, rgba(var(--sky-rgb),.14), transparent 40%),
      radial-gradient(circle at 88% 92%, rgba(var(--mint-rgb),.16), transparent 42%),
      #EEF3F7;
    scrollbar-width:thin; scrollbar-color:rgba(var(--navy-rgb),.25) transparent;
  }
  .chat-scroll::-webkit-scrollbar{ width:6px; }
  .chat-scroll::-webkit-scrollbar-thumb{ background:rgba(var(--navy-rgb),.22); border-radius:99px; }
  .msg{ display:flex; align-items:flex-end; gap:0.5rem; max-width:92%; align-self:flex-start; }
  .msg-ava{
    width:2.1rem; height:2.1rem; border-radius:50%; flex-shrink:0; overflow:hidden; position:relative;
    display:flex; align-items:center; justify-content:center; font-size:0.74rem; font-weight:800; color:var(--navy);
  }
  .msg-ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .bubble{
    position:relative; background:#fff; border-radius:15px; border-bottom-left-radius:5px;
    padding:0.6rem 0.85rem 0.5rem; box-shadow:0 1px 5px rgba(13,39,74,.08);
  }
  .msg-author{ display:block; font-size:0.8rem; font-weight:800; margin-bottom:0.1rem; }
  .bubble p{ margin:0; font-size:0.92rem; line-height:1.5; color:var(--ink); }
  .msg-time{ display:block; text-align:right; font-size:0.66rem; color:var(--ink-40); margin-top:0.15rem; }
  .chat-jump{
    position:absolute; right:0.9rem; bottom:0.9rem; z-index:2; width:2.5rem; height:2.5rem;
    border-radius:50%; background:#fff; color:var(--navy); border:1px solid var(--line-soft);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 6px 16px rgba(13,39,74,.18); transition:opacity .25s var(--ease), transform .2s var(--ease-out);
  }
  .chat-jump svg{ width:1.15rem; height:1.15rem; }
  .chat-jump:hover{ transform:scale(1.08); }
  .chat-jump.hide{ opacity:0; pointer-events:none; transform:scale(.8); }
  .chat-jump-badge{
    position:absolute; top:-0.35rem; right:-0.35rem; min-width:1.15rem; height:1.15rem; padding:0 0.3rem;
    border-radius:99px; background:var(--sky); color:#fff; font-size:0.65rem; font-weight:800;
    display:flex; align-items:center; justify-content:center; line-height:1;
  }

  /* ---------- scroll reveal ---------- */
  /* Default: fully visible. Only body.reveal-on (set by JS once it can
     actually animate elements into view) switches cards to the hidden
     starting state, so nothing depends on JS to be readable. */
  body.reveal-on .reveal{
    opacity:0; transform:translateY(16px);
    transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
    transition-delay:calc(min(var(--ri, 0), 5) * 45ms);
  }
  body.reveal-on .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;
    }
  }