/* =====================================================================
   JEEL — AI literacy for the next generation
   Design system · main.css
   Palette grounded in the Jeel logo: violet swirl, cyan capsule eyes,
   deep-space navy, warm star-gold. Light-first with deep "space" sections.
   ===================================================================== */

@font-face{font-family:'General Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/GeneralSans-400.woff2) format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/GeneralSans-500.woff2) format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/GeneralSans-600.woff2) format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/GeneralSans-700.woff2) format('woff2');}

@layer reset, tokens, base, layout, components, utilities;

/* §14: tighter vertical rhythm on small screens (sections are generous on
   desktop; on a phone that reads as dead space). */
@media (max-width: 48rem) {
  :root {
    --section-pad-compact: 3rem;
    --section-pad-standard: 3.5rem;
    --section-pad-spacious: 4.5rem;
  }
}

/* --- Global guarantees (unlayered, brief §3 / §23) -------------------- */
/* Honour the native hidden attribute everywhere, even against layered rules */
[hidden] { display: none !important; }

/* Respect reduced-motion globally; content must remain usable without motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* TOKENS                                                             */
/* ------------------------------------------------------------------ */
@layer tokens {
  :root {
    /* ---- Brand ramps ---- */
    --violet-50:  #f2efff;
    --violet-100: #e6e0ff;
    --violet-200: #cdc0ff;
    --violet-300: #ac98ff;
    --violet-400: #8f78ff;
    --violet-500: #7c5cfc;   /* core brand violet (logo swirl) */
    --violet-600: #6a45f0;
    --violet-700: #5733d6;
    --violet-800: #452aa8;
    --violet-900: #2f1d73;

    --cyan-50:  #e8fbff;
    --cyan-100: #ccf5ff;
    --cyan-200: #9fecff;
    --cyan-300: #63dcf7;   /* logo eye cyan */
    --cyan-400: #34ccef;
    --cyan-500: #17b6dd;
    --cyan-600: #0f93b8;

    --navy-700: #141a3f;
    --navy-800: #0d1231;
    --navy-900: #080b24;   /* deep space */
    --navy-950: #05071a;

    --gold-300: #ffd878;
    --gold-400: #ffc24b;   /* star / planet warmth */
    --coral-300:#ff9bb8;
    --coral-400:#ff6b9c;   /* playful accent */

    --ink-900: #10132e;    /* near-black navy ink */
    --ink-700: #33385c;
    --ink-500: #5b6088;
    --ink-400: #7c81a6;

    --paper:   #0e1330;
    --lilac-bg:#090c22;    /* deep page base */
    --mist:    #0c1029;

    /* ---- Semantic (dark space, default) ---- */
    --bg:            #070a1c;
    --surface:       #0f1533;
    --surface-2:     #131a3d;
    --surface-sunk:  #0b1029;
    --text:          #eef0ff;
    --text-soft:     #c4c9ef;
    --text-mute:     #8f96c4;
    --border:        rgba(150,170,235,.14);
    --border-strong: rgba(150,170,235,.26);
    --primary:       var(--violet-500);
    --primary-strong:var(--violet-300);
    --on-primary:    #07091c;
    --accent:        var(--cyan-300);
    --ring:          var(--cyan-300);

    /* Gradients */
    --grad-brand:  linear-gradient(120deg, var(--violet-400), var(--cyan-300));
    --grad-brand-soft: linear-gradient(120deg, var(--violet-300), var(--cyan-200));
    --grad-aurora: radial-gradient(60% 80% at 18% 8%, rgba(124,92,252,.5), transparent 60%),
                   radial-gradient(52% 70% at 85% 18%, rgba(52,204,239,.4), transparent 60%),
                   radial-gradient(60% 90% at 62% 100%, rgba(255,107,199,.28), transparent 60%);
    --grad-text:   linear-gradient(100deg, var(--violet-300), var(--cyan-300) 62%, var(--coral-300));

    /* Typography */
    --font-body: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "General Sans", var(--font-body);
    --font-round: "General Sans", var(--font-body);
    --font-tech: "General Sans", var(--font-body);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --tracking-tight: -0.02em;
    --tracking-tighter: -0.035em;

    /* Fluid type scale */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
    --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.5rem);
    --step-2:  clamp(1.44rem, 1.32rem + 0.6vw, 2rem);
    --step-3:  clamp(1.73rem, 1.54rem + 0.95vw, 2.7rem);
    --step-4:  clamp(2.07rem, 1.77rem + 1.5vw, 3.5rem);
    --step-5:  clamp(2.49rem, 2.0rem + 2.45vw, 4.7rem);
    --step-6:  clamp(2.3rem, 1.9rem + 2.4vw, 4.5rem);

    /* Spacing (8pt-ish, fluid section rhythm) */
    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
    --sp-9: 6rem;    --sp-10: 8rem;
    /* --- Typography scale (shared, brief §2) --- */
    --type-meta: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
    --type-small: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem);
    --type-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --type-body-large: clamp(1.125rem, 1.04rem + 0.3vw, 1.3rem);
    --type-card-title: clamp(1.375rem, 1.2rem + 0.55vw, 1.75rem);
    --type-section-title: clamp(2rem, 1.55rem + 1.8vw, 3.25rem);
    --leading-meta: 1.25;
    --leading-body: 1.55;
    --leading-title: 1.1;

    /* --- Spacing system (brief §5) --- */
    --panel-pad-sm: 1.125rem;
    --panel-pad: clamp(1.5rem, 1.25rem + 0.8vw, 2.25rem);
    --row-pad-y: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
    --section-pad-compact: clamp(3rem, 2.5rem + 1.5vw, 4rem);
    --section-pad-standard: clamp(3.5rem, 2.75rem + 2vw, 5rem);
    --section-pad-spacious: clamp(4.25rem, 3.25rem + 2.75vw, 6.5rem);
    --section-pad-feature: clamp(4.5rem, 3.5rem + 2.5vw, 6.75rem);
    --gap-label-control: 1.25rem;
    --gap-control-copy: 1.25rem;
    --gap-circle-label: 1.5rem;
    --gap-final-divider: clamp(2.5rem, 2rem + 1vw, 4rem);

    /* Control heights — buttons must NOT inherit heading type (brief §13) */
    --control-h: 52px;
    --control-h-lg: 56px;

    /* was clamp(4rem, 3rem + 6vw, 9rem) => up to 144px each side = ~288px gaps */
    --section-y: var(--section-pad-standard);
    --container: 1200px;
    --page-gutter: clamp(1.25rem, 0.7rem + 2vw, 2.5rem);
    --content-wide: 1200px;
    --content-standard: 1040px;
    --content-text: 780px;
    --container-narrow: 820px;
    --text-width: 62ch;        /* readable measure, ~55-70 chars (§14) */
    --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

    /* Radii */
    --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px;
    --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

    /* Shadows (soft, layered, claymorphism-lite) */
    --sh-xs: 0 1px 2px rgba(16,19,46,.06);
    --sh-sm: 0 2px 6px rgba(16,19,46,.07), 0 1px 2px rgba(16,19,46,.05);
    --sh-md: 0 10px 24px -10px rgba(50,40,110,.22), 0 4px 10px -6px rgba(16,19,46,.10);
    --sh-lg: 0 26px 60px -22px rgba(60,44,140,.32), 0 8px 20px -12px rgba(16,19,46,.14);
    --sh-glow: 0 0 0 1px rgba(124,92,252,.18), 0 18px 50px -18px rgba(124,92,252,.55);
    --sh-inset: inset 0 1px 0 rgba(255,255,255,.08);

    --dur-1: .16s; --dur-2: .28s; --dur-3: .5s; --dur-4: .8s;
    --ease-out: cubic-bezier(.22,.61,.36,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);

    --header-h: 76px;
    color-scheme: dark;
  }

  /* Deep-space themed regions (reusable, not a global toggle) */
  .theme-space {
    --bg: var(--navy-900);
    --surface: rgba(255,255,255,.05);
    --surface-2: rgba(255,255,255,.07);
    --surface-sunk: rgba(255,255,255,.04);
    --text: #f4f5ff;
    --text-soft: #c9cdf0;
    --text-mute: #969ccb;
    --border: rgba(255,255,255,.12);
    --border-strong: rgba(255,255,255,.2);
    --primary: var(--violet-400);
    --on-primary: #0a0d24;
    color-scheme: dark;
    background: var(--navy-900);
    color: var(--text);
  }
}

/* ------------------------------------------------------------------ */
/* RESET                                                              */
/* ------------------------------------------------------------------ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul[role="list"] { list-style: none; padding: 0; }
  :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--violet-200); color: var(--ink-900); }
}

/* ------------------------------------------------------------------ */
/* BASE                                                               */
/* ------------------------------------------------------------------ */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    background-image:
      radial-gradient(120% 90% at 80% -6%, #15223f 0%, transparent 52%),
      radial-gradient(90% 85% at 6% 108%, #191340 0%, transparent 52%);
    background-attachment: fixed;
    font-weight: 450;
    overflow-x: hidden;
  }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .85;
    background-image:
      radial-gradient(1.5px 1.5px at 30px 40px, #fff, transparent),
      radial-gradient(1.5px 1.5px at 180px 120px, rgba(159,236,255,.85), transparent),
      radial-gradient(1px 1px at 90px 210px, rgba(255,255,255,.7), transparent),
      radial-gradient(1px 1px at 250px 70px, rgba(200,180,255,.8), transparent),
      radial-gradient(1.3px 1.3px at 300px 260px, #fff, transparent);
    background-size: 320px 320px;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.05;
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
    color: var(--text);
    text-wrap: balance;
  }
  h1 { font-size: var(--step-6); letter-spacing: var(--tracking-tighter); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  h3, h4 { font-family: var(--font-round); letter-spacing: -0.01em; }
  p { text-wrap: pretty; }
  strong { font-weight: 700; }
  small { font-size: var(--step--1); }
}

/* ------------------------------------------------------------------ */
/* LAYOUT                                                             */
/* ------------------------------------------------------------------ */
@layer layout {
  .container, .site-container { width: 100%; max-width: var(--content-wide);
    margin-inline: auto; padding-inline: var(--page-gutter); }
  .container--narrow { max-width: var(--container-narrow); }
  .section { padding-block: var(--section-y); position: relative; isolation: isolate; }
  .section > .container { position: relative; z-index: 1; }
  .section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
  .stack > * + * { margin-block-start: var(--flow, 1.15em); }
  .grid { display: grid; gap: var(--sp-5); }
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 960px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

  /* Exactly-three equal cards: at tablet width a 3-across grid collapses to
     2 columns, orphaning the 3rd card beside an empty column. This modifier
     makes the final (3rd) card span the full row instead. Add it alongside
     .grid.cols-3 ONLY on groups of exactly three equal cards — never on
     timelines, editorial rows or unequal feature panels. */
  @media (min-width: 621px) and (max-width: 960px) {
    .grid--balanced-three > :nth-child(3):last-child { grid-column: 1 / -1; }
  }
  /* Contextual action (a CTA that sits BELOW an information grid, not inside
     it). Keeps CTAs from being mistaken for a fourth content card. */
  .section-action { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
  .center { text-align: center; }
  .measure { max-width: var(--text-width); }
  .measure-tight { max-width: 46ch; }
}

/* ------------------------------------------------------------------ */
/* COMPONENTS                                                         */
/* ------------------------------------------------------------------ */
@layer components {

  /* --- Eyebrow / kicker --- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: .5em;
    font-size: var(--step--1); font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--primary-strong);
  }
  .theme-space .eyebrow { color: var(--cyan-300); }
  .eyebrow::before {
    content: ""; width: 22px; height: 2px; border-radius: 2px;
    background: var(--grad-brand);
  }

  /* --- Gradient text --- */
  .grad-text {
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .theme-space .grad-text {
    background: linear-gradient(100deg, var(--violet-300), var(--cyan-300));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* --- Pills / badges --- */
  .pill {
    display: inline-flex; align-items: center; gap: .5em;
    padding: .5em 1em; border-radius: var(--r-pill);
    font-size: var(--step--1); font-weight: 600;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--sh-xs); color: var(--text-soft);
  }
  .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(52,204,239,.18); }
  .theme-space .pill { background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }

  .badge {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .28em .7em; border-radius: var(--r-pill);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  }
  .badge--soon { background: var(--gold-300); color: #6b4b00; }
  .badge--new  { background: color-mix(in srgb, var(--cyan-300) 30%, white); color: var(--cyan-600); }
  .badge--live { background: color-mix(in srgb, var(--violet-300) 32%, white); color: var(--violet-700); }

  /* --- Buttons --- */
  .btn {
    min-height: var(--control-h); font-size: var(--type-body);
    --_bg: var(--primary); --_fg: var(--on-primary);
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    padding: .9em 1.5em; border-radius: var(--r-pill);
    font-weight: 700; line-height: 1;
    background: var(--_bg); color: var(--_fg);
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), background var(--dur-2);
    box-shadow: var(--sh-md); white-space: nowrap; cursor: pointer;
    will-change: transform;
  }
  .btn svg { width: 1.15em; height: 1.15em; }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
  .btn:active { transform: translateY(0) scale(.98); }
  .btn--primary { background: var(--grad-brand); box-shadow: var(--sh-glow); }
  .btn--lg { min-height: var(--control-h-lg); padding: 0.95rem 1.6rem;
    font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem); }
  .btn--ghost {
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
    box-shadow: var(--sh-sm);
  }
  .btn--ghost:hover { border-color: var(--primary); color: var(--primary-strong); }
  .theme-space .btn--ghost { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.2); }
  .btn--quiet { background: transparent; box-shadow: none; color: var(--text-soft); padding-inline: .4em; }
  .btn--quiet:hover { box-shadow: none; color: var(--primary-strong); }
  .btn--block { width: 100%; }

  /* --- Cards --- */
  .card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); padding: var(--sp-6);
    box-shadow: var(--sh-sm); position: relative;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
  }
  .card--lift:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--border-strong); }
  .theme-space .card { background: rgba(255,255,255,.05); backdrop-filter: blur(10px); }
  .card__icon {
    width: 54px; height: 54px; border-radius: var(--r-md);
    display: grid; place-items: center; margin-bottom: var(--sp-4);
    background: var(--grad-brand-soft); color: #fff; box-shadow: var(--sh-md), var(--sh-inset);
  }
  .card__icon svg { width: 26px; height: 26px; }
  .card h3 { font-size: var(--step-1); margin-bottom: .35em; }
  .card p { color: var(--text-soft); font-size: var(--step-0); }

  /* gradient hairline border card */
  .card--halo::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--dur-2);
    pointer-events: none;
  }
  .card--halo:hover::after { opacity: 1; }

  /* --- Header / nav --- */
  .site-header {
    position: sticky; top: 0; z-index: 100; height: var(--header-h);
    display: flex; align-items: center;
    transition: background var(--dur-2), box-shadow var(--dur-2), backdrop-filter var(--dur-2);
  }
  .site-header.is-stuck {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 var(--border), var(--sh-sm);
  }
  .nav { display: flex; align-items: center; gap: var(--sp-5); width: 100%; }
  .nav__links { display: flex; align-items: center; gap: .3rem; margin-inline: auto; }
  .nav__link {
    padding: .55em .7em; border-radius: var(--r-pill); font-weight: 600; font-size: .93rem; white-space: nowrap;
    color: var(--text-soft); transition: color var(--dur-1), background var(--dur-1);
  }
  .nav__link:hover, .nav__link[aria-current="page"] { color: var(--text); background: var(--surface-sunk); }
  .nav__cta { display: flex; align-items: center; gap: .6rem; }
  .nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); place-items: center; }
  .nav__toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: .3s; }
  .nav__toggle span::before, .nav__toggle span::after { content:""; position:absolute; left:0; width:20px; height:2px; background: var(--text); border-radius:2px; transition:.3s; }
  .nav__toggle span::before { top: -6px; } .nav__toggle span::after { top: 6px; }

  /* --- Nav dropdown (Young Learners) --- */
  .nav__group { position: relative; display: flex; }
  .nav__trigger { display: inline-flex; align-items: center; gap: .32rem; border: 0; background: none; cursor: pointer; font-family: inherit; }
  .nav__trigger[aria-current="true"] { color: var(--text); background: var(--surface-sunk); }
  .nav__chev { flex: none; transition: transform var(--dur-1); }
  .nav__drop {
    display: grid; gap: .15rem; min-width: 212px; padding: .4rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-lg);
  }
  .nav__droplink {
    display: block; padding: .6em .8em; border-radius: var(--r-sm); font-weight: 600; font-size: .93rem;
    color: var(--text-soft); white-space: nowrap; transition: color var(--dur-1), background var(--dur-1);
  }
  .nav__droplink:hover, .nav__droplink[aria-current="page"] { color: var(--text); background: var(--surface-sunk); }

  @media (min-width: 1081px) {
    .nav__drop {
      position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: opacity var(--dur-1), transform var(--dur-1), visibility var(--dur-1);
    }
    .nav__group:hover .nav__drop, .nav__group:focus-within .nav__drop, .nav__group.is-open .nav__drop {
      opacity: 1; visibility: visible; transform: none;
    }
    .nav__group:hover .nav__chev, .nav__group:focus-within .nav__chev, .nav__group.is-open .nav__chev { transform: rotate(180deg); }
  }

  @media (max-width: 1080px) {
    .nav__toggle { display: grid; }
    .nav__links {
      position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; gap: .2rem;
      background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(16px);
      padding: var(--sp-5) var(--gutter) var(--sp-6); border-bottom: 1px solid var(--border);
      transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .28s var(--ease-out);
      align-items: stretch; box-shadow: var(--sh-lg);
    }
    .nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
    .nav__link { padding: .85em 1em; font-size: 1.05rem; }
    .nav .nav__cta .btn--ghost { display: none; }
    .nav__group { display: block; }
    .nav__trigger { width: 100%; justify-content: space-between; }
    .nav__drop {
      min-width: 0; display: none; padding: .1rem 0 .3rem .7rem; margin-left: .5rem;
      background: none; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none;
    }
    .nav__group.is-open .nav__drop { display: grid; }
    .nav__group.is-open .nav__chev { transform: rotate(180deg); }
    .nav__droplink { padding: .8em 1em; font-size: 1rem; }
  }

  /* --- Brand lockup --- */
  .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
  .brand__mark { width: auto; height: 40px; flex: none; }
  .brand__ar { font-size: .8em; color: var(--text-mute); font-weight: 600; }

  /* --- Footer --- */
  .site-footer { background: var(--navy-900); color: #cfd3f4; padding-block: var(--sp-9) var(--sp-6); position: relative; overflow: hidden; }
  .site-footer a { color: #cfd3f4; opacity: .85; transition: opacity .2s; }
  .site-footer a:hover { opacity: 1; color: #fff; }
  .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-6); }
  @media (max-width: 820px){ .footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px){ .footer__grid { grid-template-columns: 1fr; } }
  .footer__col h3 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; font-family: var(--font-body); font-weight: 700; }
  .footer__col ul { display: grid; gap: .6rem; }
  .footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--step--1); opacity: .8; }

  /* --- Stat --- */
  .stat__num { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .theme-space .stat__num { background: linear-gradient(100deg,#fff,var(--cyan-300)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stat__label { color: var(--text-mute); font-size: var(--step--1); margin-top: .3rem; }

  /* --- Accordion (FAQ) --- */
  .accordion { border-top: 1px solid var(--border); }
  .accordion__item { border-bottom: 1px solid var(--border); }
  .accordion__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4em 0; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--text); }
  .accordion__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-sunk); display: grid; place-items: center; transition: transform var(--dur-2), background var(--dur-2); }
  .accordion__btn[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); background: var(--grad-brand); color: #fff; }
  .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
  .accordion__panel > div { overflow: hidden; }
  .accordion__btn[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
  .accordion__panel p { color: var(--text-soft); padding-bottom: 1.5em; max-width: 68ch; }

  /* --- Forms --- */
  .field { display: grid; gap: .5rem; }
  .field label { font-weight: 600; font-size: var(--step--1); color: var(--text-soft); }
  .field .req { color: var(--coral-400); }
  .input, .select, .textarea {
    width: 100%; padding: .85em 1em; border-radius: var(--r-md);
    background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text);
    font-size: var(--step-0); transition: border-color var(--dur-1), box-shadow var(--dur-1);
  }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(124,92,252,.16); }
  .field__hint { font-size: var(--step--1); color: var(--text-mute); }
  .field__error { font-size: var(--step--1); color: var(--coral-400); font-weight: 600; display: none; }
  .field.is-invalid .input, .field.is-invalid .select { border-color: var(--coral-400); }
  .field.is-invalid .field__error { display: block; }

  /* selectable option cards (booking) */
  .option-grid { display: grid; gap: var(--sp-4); }
  .option {
    position: relative; display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.15rem 1.25rem; border-radius: var(--r-lg); cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--border-strong);
    transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2);
  }
  .option:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
  .option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .option__check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; margin-top: 2px; transition: .2s; }
  .option:has(input:checked) { border-color: var(--primary); box-shadow: var(--sh-glow); }
  .option:has(input:checked) .option__check { background: var(--grad-brand); border-color: transparent; }
  .option:has(input:checked) .option__check::after { content:""; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
  .option:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }

  /* --- Marquee --- */
  .marquee { display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee__track { display: flex; gap: var(--sp-7); align-items: center; padding-inline: var(--sp-4); animation: marquee 32s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* --- Section decor --- */
  .aurora { position: absolute; inset: 0; z-index: 0; background: var(--grad-aurora); filter: blur(20px); opacity: .8; pointer-events: none; }
  .noise { position: absolute; inset: 0; z-index: 0; opacity: .04; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .starfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

  /* --- Ship room chip --- */
  .room {
    display: flex; gap: .9rem; align-items: center; padding: 1rem 1.15rem; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-xs);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
  }
  .room:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
  .room__ico { flex: none; width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in srgb, var(--violet-100) 70%, white); color: var(--violet-600); }
  .theme-space .room__ico { background: rgba(124,92,252,.2); color: var(--cyan-300); }
  .room b { display: block; font-family: var(--font-display); font-size: 1.02rem; }
  .room span { color: var(--text-mute); font-size: var(--step--1); }

  /* --- Divider glow --- */
  .rule-glow { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }
}

/* ------------------------------------------------------------------ */
/* UTILITIES                                                          */
/* ------------------------------------------------------------------ */
@layer utilities {
  .u-center { display: grid; place-items: center; }
  .u-flex { display: flex; }
  .u-wrap { flex-wrap: wrap; }
  .u-gap-2 { gap: var(--sp-2); } .u-gap-3 { gap: var(--sp-3); } .u-gap-4 { gap: var(--sp-4); } .u-gap-5 { gap: var(--sp-5); }
  .u-items-center { align-items: center; }
  .u-justify-center { justify-content: center; }
  .u-justify-between { justify-content: space-between; }
  .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); }
  .mb-3 { margin-bottom: var(--sp-3); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
  .text-soft { color: var(--text-soft); } .text-mute { color: var(--text-mute); }
  .lead { font-size: var(--step-1); color: var(--text-soft); line-height: 1.55; }
  .fs-sm { font-size: var(--step--1); }
  .fw-700 { font-weight: 700; }
  .hidden { display: none !important; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip-link { position: absolute; left: 1rem; top: -60px; z-index: 200; background: var(--primary); color: #fff; padding: .7em 1.1em; border-radius: var(--r-sm); transition: top .2s; }
  .skip-link:focus { top: 1rem; }

  /* Scroll reveal — gated behind .js so no-JS visitors still see everything */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .reveal[data-delay="1"]{ transition-delay: .08s; } .reveal[data-delay="2"]{ transition-delay: .16s; }
  .reveal[data-delay="3"]{ transition-delay: .24s; } .reveal[data-delay="4"]{ transition-delay: .32s; }
  .reveal[data-delay="5"]{ transition-delay: .40s; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .marquee__track { animation: none !important; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .float, .orbit, .twinkle { animation: none !important; }
  }
}

/* Floating / orbit motion (decorative, reduced-motion safe) */
.float { animation: float 9s var(--ease-out) infinite; }   /* §19: 9s, max 8px */
@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
.float--slow { animation-duration: 9s; }
.twinkle { animation: twinkle 3.5s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ---- Responsive grid layouts (own classes so media queries win over any inline) ---- */
.hero__grid { display:grid; grid-template-columns: 1.12fr .88fr; gap: var(--sp-7); align-items:center; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items:center; }
.split--r { grid-template-columns: .9fr 1.1fr; }
.split--l { grid-template-columns: 1.1fr .9fr; }
.rooms-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* card grids are visual, not numbered lists — kill default markers/indent (§4) */
.ladder, .curriculum-grid, .card-list, .rhythm {
  list-style: none; margin: 0; padding: 0;
}
.ladder { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
.rhythm { display:grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-4); position:relative; }
.rhythm > li { position:relative; }
.rhythm__n { font-family: var(--font-display); font-weight:700; font-size: var(--step-1); color: var(--text); }
.rhythm__t { display:inline-block; margin:.35rem 0 .5rem; font-size: var(--step--1); font-weight:700;
  color: var(--primary-strong); background: var(--violet-50); padding:.2em .8em; border-radius: var(--r-pill); }

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; text-align:center; gap: var(--sp-6); }
  .hero__grid .measure { margin-inline:auto; }
  .hero__grid .hero__cta, .hero__grid .hero__trust { justify-content:center; }
  /* Message before mascot on mobile: the first screen must say what Jeel is.
     (Was order:-1, which pushed the artwork above the headline.) */
  .hero__art { order: 1; }
  .hero__art img { max-height: 260px; width: auto; }
  .ladder { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .split, .split--r, .split--l { grid-template-columns: 1fr; }
  .rhythm { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .ladder { grid-template-columns: 1fr; }
  .rhythm { grid-template-columns: 1fr; }
  .rooms-grid { grid-template-columns: 1fr; }
}

/* Nested decorated band (final CTA): scope its own decor stacking */
.cta-band { isolation: isolate; }
.cta-band > .stack { position: relative; z-index: 1; }

/* ---- Booking flow ---- */
.booking { max-width: 780px; margin-inline: auto; }
.stepper { display: flex; align-items: center; gap: .4rem; margin-bottom: var(--sp-6); list-style: none; margin-inline-start: 0; padding-inline-start: 0; }
.stepper__item { display: flex; align-items: center; gap: .5rem; color: var(--text-mute); font-weight: 600; font-size: var(--step--1); }
.stepper__num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--text-mute); font-weight: 700; border: 1.5px solid var(--border); flex: none; transition: .3s var(--ease-out); }
.stepper__item[data-state="active"] { color: var(--text); }
.stepper__item[data-state="active"] .stepper__num { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: var(--sh-glow); }
.stepper__item[data-state="done"] .stepper__num { background: var(--violet-100); color: var(--violet-600); border-color: transparent; }
.stepper__bar { flex: 1; height: 2px; background: var(--border); border-radius: 2px; min-width: 8px; }
.stepper__label { display: none; }
@media (min-width: 760px) { .stepper__label { display: inline; } }
.step-panel { display: none; }
.step-panel.is-active { display: block; }
.js .step-panel.is-active { animation: stepIn .4s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.booking__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: var(--sp-6); }
.review-list { display: grid; gap: .6rem; }
.review-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.review-list dt { color: var(--text-mute); } .review-list dd { font-weight: 600; text-align: right; }
@media (prefers-reduced-motion: reduce) { .js .step-panel.is-active { animation: none; } }

/* Smooth page-entry fade from dark */
html{background:#070a1c;}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){body{animation:pageFade .55s ease both;}}

/* --- Young-learners lesson journey: a timeline, not another card wall (§8) --- */
.yl-journey{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
.yl-journey li{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:var(--gap-circle-label);padding:0 .5rem;}
.yl-journey li::before{content:"";position:absolute;top:19px;left:50%;width:100%;height:2px;
  background:linear-gradient(90deg,var(--violet-500),var(--cyan-300));opacity:.35;}
.yl-journey li:last-child::before{display:none;}
.yl-journey__n{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--surface);border:1.5px solid var(--border-strong);
  color:var(--text);font-weight:700;font-size:.95rem;}
.yl-journey__t{font-size:var(--step--1);font-weight:600;color:var(--text-soft);line-height:1.35;}
@media (max-width:700px){
  .yl-journey{grid-template-columns:1fr;gap:1.15rem;}
  .yl-journey li{flex-direction:row;text-align:left;align-items:center;gap:1rem;padding:0;}
  .yl-journey li::before{top:38px;left:19px;width:2px;height:100%;
    background:linear-gradient(180deg,var(--violet-500),var(--cyan-300));}
  .yl-journey__n{flex:none;}
}

/* --- Narrow screens: a long CTA label must wrap, never force page overflow.
       .btn is nowrap by default, which pushes past the viewport at ~320px
       when the label is long (e.g. "Discuss a school programme"). (§22) --- */
@media (max-width: 30rem){
  .btn{ white-space:normal; max-width:100%; }
}

/* Marquee phrases must never wrap or clip (review fix) */
.marquee__track, .marquee__track span { white-space: nowrap; }
@media (max-width: 40rem) { .marquee { display: none; } }  /* costs height, adds little on phones */

/* Let the mobile header breathe: smaller CTA under 420px, 44px touch target */
@media (max-width: 420px) {
  .site-header .btn { padding-inline: 1rem; min-height: 44px; font-size: .9rem; }
}

/* --- Schools hero: purposeful right-hand pathway panel (review #9) --------
   Restrained on purpose: 1px borders, no glow, no gradient, no mascot.
   It exists to show a decision-maker the shape of the offer at a glance. */
.sc-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center;}
.sc-path{border:1px solid var(--border-strong);border-radius:var(--r-md);
  padding:var(--panel-pad);background:var(--surface-sunk);}
.sc-path__title{font-size:var(--type-meta);line-height:var(--leading-meta);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin:0 0 1rem;}
.sc-path__list{list-style:none;margin:0;padding:0;}
/* rows: real vertical clearance so nothing sits against a divider */
.sc-path__list li{display:grid;grid-template-columns:minmax(6.5rem,auto) minmax(0,1fr) auto;
  gap:1rem;align-items:center;min-height:70px;padding-block:var(--row-pad-y);
  border-top:1px solid var(--border);}
.sc-path__list li:first-child{border-top:0;}
.sc-path__grade{font-size:var(--type-small);line-height:1.35;color:var(--text-mute);}
.sc-path__name{font-family:var(--font-display);font-size:var(--type-body);line-height:1.35;
  font-weight:700;color:var(--text);}
.sc-path__n{font-size:var(--type-small);line-height:1.35;color:var(--text-mute);white-space:nowrap;}
.sc-path__foot{margin:.5rem 0 0;padding:1.25rem .25rem 0;border-top:1px solid var(--border);
  font-size:var(--type-small);line-height:1.55;color:var(--text-mute);}
@media (max-width:900px){
  .sc-hero__grid{grid-template-columns:1fr;}
  .sc-path{order:1;}                       /* message before the panel on mobile */
}
@media (max-width:30rem){
  .sc-path{padding:var(--panel-pad-sm);}
  .sc-path__list li{grid-template-columns:1fr auto;gap:.35rem .75rem;
    padding-block:1rem;min-height:0;}
  .sc-path__grade{grid-column:1 / -1;}
  .sc-path__grade{grid-column:1/-1;min-width:0;}
}


/* --- Section rhythm modifiers (brief §5) ---
   NB: plain `.section` already resolves to --section-pad-standard via
   --section-y, so it is NOT redeclared here. */
.section--tight, .section--compact { padding-block: var(--section-pad-compact); }
.section--spacious, .section--feature { padding-block: var(--section-pad-feature); }

/* =====================================================================
   Shared components (brief §16) — these replace inline styles that were
   copy-pasted across many pages, so a change happens in one place.
   ===================================================================== */

/* page hero: was `padding-block: clamp(3rem,2rem + 5vw,6rem) var(--section-y)` inline x11 */
.page-hero{ padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--section-y);
  position:relative; overflow:hidden; }

/* full-bleed CTA band: was `border-radius:var(--r-2xl); padding:clamp(...)` inline x10 */
.cta-band{ border-radius: var(--r-2xl); padding: clamp(2.5rem, 2rem + 4vw, 5rem);
  position:relative; overflow:hidden; text-align:center; }

/* centred section heading blocks: were `--flow/max-width/margin-inline` inline x30+ */
.section-heading{ --flow:.7rem; max-width:42rem; }
.section-heading--center{ margin-inline:auto; text-align:center; }
.section-heading--wide{ max-width:46rem; }

/* framed panel: every fully bordered box gets real, equal padding */
.panel{ padding: var(--panel-pad); border:1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); }
@media (max-width:30rem){ .panel{ padding: var(--panel-pad-sm); } }

/* compact bordered row (was inline `padding:1.25rem 1.4rem` x18) */
.row-compact{ padding: 1.25rem 1.4rem; }

/* quiet inline-link button (was inline `padding-inline:0` x18) */
.btn--flush{ padding-inline: 0; }

/* CTA grouping — explicit gaps, never collapsing margins (brief §11) */
.cta-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.cta-supporting-copy{ margin-top: var(--gap-control-copy); line-height:1.5; }

/* =====================================================================
   Reusable curriculum card (brief §3) — one metadata size, one title
   size, one body size. Outcome and Example share identical typography.
   ===================================================================== */
.curriculum-card{ display:flex; flex-direction:column; min-width:0;
  padding: var(--panel-pad); }
.curriculum-card__meta,
.curriculum-card__label{ font-size: var(--type-meta); line-height: var(--leading-meta);
  font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.curriculum-card__meta{ display:flex; flex-wrap:wrap; gap:.4rem .75rem;
  margin-bottom:1.5rem; color: var(--text-mute); }
.curriculum-card__title{ margin:0 0 1.5rem; font-size: var(--type-card-title);
  line-height: var(--leading-title); font-weight:700; }
.curriculum-card__section + .curriculum-card__section{ margin-top:1.5rem; }
.curriculum-card__label{ margin:0 0 .5rem; color: var(--text-mute); }
.curriculum-card__body{ margin:0; font-size: var(--type-body); line-height: var(--leading-body);
  font-weight:400; color: var(--text-soft); }
/* cards with a CTA align their actions to the same baseline */
.card--action{ display:flex; flex-direction:column; }
.card--action .card__action{ margin-top:auto; padding-top:1.5rem; }

/* centred framed panel (was inline max-width/padding x4) */
.panel-centered{ max-width:56rem; margin-inline:auto; text-align:center;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.page-hero--compact{ padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--section-y); }


/* --- §3 editorial statement: centre the text COLUMN, keep text left-aligned --- */
.editorial-statement{ max-width: var(--content-standard); margin-inline:auto;
  padding-inline: var(--page-gutter); }
.editorial-statement__copy{ max-width: var(--content-text); }
.editorial-statement .eyebrow{ margin-bottom:1.25rem; }
.editorial-statement h2{ margin:0; }
.editorial-statement .lead, .editorial-statement p{ margin-top:1.25rem; }

/* --- §4 cards size to their content; only equalise inside a real row --- */
.content-card{ padding: var(--panel-pad); min-height:0; }
.card-grid{ align-items:stretch; }
.card-grid .content-card{ display:flex; flex-direction:column; }

/* --- §5 tighten section-heading -> level cards (<=48px desktop) --- */
.levels-grid, .ladder.mt-7{ margin-top: clamp(2rem, 1.6rem + 1vw, 3rem); }

/* --- §6 Schools hero CTA: sized to content, not stretched --- */
.sc-hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.875rem; margin-top:1.9rem; }
.sc-hero__actions .btn{ width:fit-content; max-width:100%; min-height:56px;
  padding:.95rem 1.65rem; font-size:1.0625rem; line-height:1.15; }
@media (max-width:680px){
  .sc-hero__actions{ display:grid; grid-template-columns:1fr; gap:.75rem; }
  .sc-hero__actions .btn{ width:100%; white-space:normal; }
}

/* §7: controlled width for major centred Schools headings (no giant full-width lines) */
.school-section-title, .center > h2.measure-title{ max-width:18ch; margin-inline:auto; }

/* --- §5 reusable classes replacing repeated inline styles --- */
.eyebrow--center{ justify-content:center; }
.section--surface{ background:var(--surface); border-block:1px solid var(--border); }
.ico-cyan{ background:linear-gradient(120deg,#34ccef,#17b6dd); }
.ico-pink{ background:linear-gradient(120deg,#ff9bb8,#ff6b9c); }
.ico-gold{ background:linear-gradient(120deg,#ffd878,#ffc24b); }
.tint-violet{ color:var(--violet-500); }

/* --- §5 more shared classes (about/trainers/builders repeats) --- */
.ico-violet{ background:linear-gradient(120deg,#a996ff,#7c5cfc); }
.ico-inline{ color:var(--violet-500); flex:none; }
.flow-1{ --flow:1rem; }

/* ===================== Meet the Crew — homepage 3D stage =====================
   Moved out of index.html. Poster sits ABOVE the canvas (z-4 vs z-3) and is
   faded out ONLY once the stage is .is-ready, so a slow/failed load never
   shows the previous robot through the canvas. Materials are never touched. */
.crew-showcase{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);align-items:center;gap:clamp(2rem,5vw,5rem);}
.crew-showcase__stage,.crew-showcase__content{min-width:0;}
.crew-stage{position:relative;aspect-ratio:4/3;width:100%;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 10%, #1b2350 0%, #121737 55%, #0c1026 100%);
  border:1px solid rgba(139,107,255,.20);display:grid;place-items:center;}
.crew-stage__glow{position:absolute;top:44%;left:50%;width:74%;aspect-ratio:1;border-radius:50%;z-index:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(99,220,247,.30),rgba(124,92,252,.22) 45%,transparent 70%);filter:blur(26px);}
.crew-stage__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block;opacity:0;transition:opacity .4s ease;}
.crew-stage__poster{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:82%;max-height:78%;
  object-fit:contain;transform:scale(var(--poster-scale,1));z-index:4;opacity:1;transition:opacity .4s ease;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.42));}
.crew-stage[data-robot="zakoot"]{--poster-scale:.9;}
.crew-stage[data-robot="fahoom"]{--poster-scale:.94;}
.crew-stage[data-robot="ankaboot"]{--poster-scale:1;}
.crew-stage[data-robot="masook"]{--poster-scale:.8;}
.crew-stage.is-ready .crew-stage__canvas{opacity:1;}
.crew-stage.is-ready .crew-stage__poster{opacity:0;pointer-events:none;}
.crew-stage__status{position:absolute;left:0;right:0;bottom:12px;text-align:center;z-index:5;
  font-size:.8rem;font-weight:600;color:rgba(238,241,255,.72);pointer-events:none;}
.crew-showcase__role{margin:0 0 .35rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-300,#63dcf7);}
.crew-showcase__name{margin:0 0 .5rem;font-size:var(--step-4,2rem);}
.crew-showcase__description{margin:0;color:var(--text-soft);min-height:3.4em;}
.crew-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.625rem;margin:1.35rem 0;}
.crew-selector button{min-height:48px;width:100%;display:grid;place-items:center;padding:.4rem .3rem;font:inherit;
  font-weight:600;font-size:.92rem;text-align:center;cursor:pointer;color:var(--text-soft);
  background:rgba(255,255,255,.04);border:1.5px solid var(--border,rgba(255,255,255,.12));border-radius:12px;
  transition:border-color .2s,background .2s,color .2s;}
.crew-selector button:hover{border-color:rgba(139,107,255,.6);color:var(--ink,#eef1ff);}
.crew-selector button.is-selected{border-color:var(--violet-400,#8b6bff);background:rgba(139,107,255,.16);color:var(--ink,#fff);box-shadow:inset 0 0 0 1px var(--violet-400,#8b6bff);}
.crew-selector button:focus-visible{outline:3px solid var(--cyan-300,#63dcf7);outline-offset:2px;}
.crew-showcase__cta{margin-top:.3rem;}
@media (max-width:900px){
  .crew-showcase{grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2.4rem);}
  .crew-stage{aspect-ratio:1/1;max-width:420px;margin-inline:auto;}
  .crew-showcase__content{text-align:center;}
  .crew-showcase__description{min-height:0;}
  .crew-selector{max-width:420px;margin-inline:auto;}
}
@media (max-width:560px){ .crew-selector{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (prefers-reduced-motion: reduce){ .crew-stage__poster,.crew-stage__canvas{transition:none;} }

/* ===================== Extracted layout utilities (site-wide DRY) =====================
   Replaces the three most-repeated inline style patterns. Values are identical
   to the inline versions, so rendering is unchanged — this is de-duplication. */
.stack-center-narrow{ --flow:.7rem; max-width:660px; margin-inline:auto; }   /* centred section-heading stack */
.link-strong{ color:var(--primary-strong); font-weight:600; }                /* inline emphasis link */
.footer__tagline{ max-width:34ch; color:#aab0e0; }                           /* footer brand tagline */

/* Full-width concluding feature panel: icon beside content (not a grid card).
   Used where a final item should read as a deliberate feature, never an orphan. */
.card--feature-row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,2.5vw,1.75rem); align-items:center; }
@media (max-width:560px){ .card--feature-row{ grid-template-columns:1fr; } }