/* ============================================================
   KAIS About Page — Matches Homepage Dark Sophisticated Theme
   ============================================================ */

/* 1. Custom Properties (identical to homepage)
   ------------------------------------------------------------ */
:root {
  --brand: #5e9eff;
  --brand-2: #9b6dff;
  --ok: #2fd37a;
  --kais-green: #2fd37a;
  --kais-blue: #5e9eff;
  --kais-purple: #9b6dff;
  --kais-orange: #FF9600;
  --bg-page: #070c2e;
  --bg-alt: #0b1240;
  --bg-card: #101849;
  --text-heading: #eef1ff;
  --text-body: #c3caee;
  --text-muted: #8a94c6;
  --border-light: rgba(140, 170, 255, .17);
  --border-card: rgba(140, 170, 255, .14);
  --gradient-cta: linear-gradient(90deg, var(--brand), var(--brand-2));
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-card-hover: 0 25px 60px rgba(31, 45, 92, .45);
  --shadow-btn: 0 4px 15px rgba(94, 158, 255, .3);
  --radius-card: 20px;
  --radius-btn: 999px;
  --container: 1140px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* 1b. Light palette
   ------------------------------------------------------------
   WHAT WAS HERE BEFORE, AND WHY IT WAS A BUG.
   This file shipped a bare `@media (prefers-color-scheme: light) { :root
   { … } }`. That block is live for a light-OS visitor who explicitly
   chose DARK — and because page sheets are linked from
   `{% block extra_head %}`, i.e. AFTER theme.css, its `:root` (0,1,0)
   also beat theme.css's own dark `:root` on source order. The result was
   a bright island inside dark chrome, which is the exact regression
   theme.css's THEMING banner documents.

   The fix is two-part and needs BOTH halves: the media block's interior
   is now scoped to `:root[data-theme="auto"]`, and the same values are
   spelled out again under `:root[data-theme="light"]` for the explicit
   opt-in. Re-guarding alone would leave a chosen-light visitor dark.

   The values cannot be shared through an indirection — the contrast
   sweep in tests/test_static/test_theme_pages_a.py resolves them to
   opaque hex — so KEEP THE TWO BLOCKS IN SYNC. A test does too.
   `@media` adds ZERO specificity, which is why the scoping, not the
   ordering, is what makes this safe.
   ------------------------------------------------------------ */
:root[data-theme="light"] {
  color-scheme: light;
  accent-color: #2563eb;

  /* -- surface vocabulary (in step with theme.css section A2) --------- */
  --bg-page: #f1f5f9;
  --bg-alt: #e8eef6;
  --bg-card: #ffffff;
  --text-heading: #0f172a;
  --text-body: #334155;
  --text-muted: #475569;

  /* White-alpha veils invert to black-alpha — an rgba(255,255,255,.1)
     hairline is invisible on a white card. */
  --border-light: rgba(15, 23, 42, .12);
  --border-card: rgba(15, 23, 42, .10);

  --shadow-card: 0 10px 30px rgba(15, 23, 42, .10);
  --shadow-card-hover: 0 25px 60px rgba(31, 45, 92, .18);
  --shadow-btn: 0 4px 15px rgba(29, 78, 216, .25);

  /* Accent INK — the six `--*-ink` tokens are declared ONCE, in theme.css
     sections A2/A3, and reset in D2 so a still-dark island cannot inherit
     light ink onto a dark surface. They are NOT re-declared here: two
     copies of one value have already drifted in this repo. Consumers stay
     `var(--accent-ink, var(--brand))`, so dark mode still falls back to
     the brand literal by construction.
     tests/test_static/test_theme_pages_a.py pins theme.css as the source,
     so a rename there fails a test instead of silently un-inking six
     pages. */
  /* The brand gradient used as INK, for the `background-clip: text` sites
     only. --gradient-cta itself is NOT flipped: it is also the resting
     background of buttons and badges whose labels are white or near-black,
     and darkening it there breaks those pairings (theme.css section C makes
     the same argument for .text-white).

     COMPOSED from the ink tokens rather than restating their hexes, so
     #1d4ed8 / #6d28d9 have exactly one source (theme.css A2/A3) and this
     cannot drift from it. MEASURED degradation, because the rule here is
     not obvious: if theme.css ever stops publishing those tokens this
     value becomes guaranteed-invalid, the OUTER
     `var(--gradient-cta-ink, var(--gradient-cta))` at each call site takes
     ITS fallback, and the text paints with the brand gradient — the
     dark-mode appearance, not blank text. Verified in Chromium rather than
     reasoned about, because the opposite outcome (invisible headings) is
     the repo's worst failure class. */
  --gradient-cta-ink: linear-gradient(90deg, var(--accent-ink), var(--accent-2-ink));
  /* White-on-CTA. The brand gradient measures 2.6:1 under white text
     (home.css says so at --brand-accent-strong), which is site debt in
     BOTH themes — but a pale blue button on a white card is where it is
     most visible. Only the BUTTON reads this token; --gradient-cta
     itself stays put so accent stripes and badges are unaffected.
     Measured white-on: 6.7:1 and 7.1:1. */
  --cta-surface: linear-gradient(90deg, #1d4ed8, #6d28d9);

  /* Gradient TEXT (background-clip: text) — BOTH stops are read as ink,
     so the pale second stop has to darken too. */
  --highlight-green: linear-gradient(90deg, #14532d, #166534);
  --highlight-blue: linear-gradient(90deg, #1e40af, #1d4ed8);
  --highlight-purple: linear-gradient(90deg, #5b21b6, #6d28d9);
  --highlight-orange: linear-gradient(90deg, #78350f, #9a3412);

  /* The card wash ships as a hard literal. Its consumer is
     `var(--card-surface, <the exact literal>)`, so dark mode is
     byte-identical BY CONSTRUCTION rather than by a retyped value —
     and a white-on-white wash would make every card vanish here. */
  --card-surface: #ffffff;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    accent-color: #2563eb;

    /* -- surface vocabulary (in step with theme.css section A2) --------- */
    --bg-page: #f1f5f9;
    --bg-alt: #e8eef6;
    --bg-card: #ffffff;
    --text-heading: #0f172a;
    --text-body: #334155;
    --text-muted: #475569;

    /* White-alpha veils invert to black-alpha — an rgba(255,255,255,.1)
       hairline is invisible on a white card. */
    --border-light: rgba(15, 23, 42, .12);
    --border-card: rgba(15, 23, 42, .10);

    --shadow-card: 0 10px 30px rgba(15, 23, 42, .10);
    --shadow-card-hover: 0 25px 60px rgba(31, 45, 92, .18);
    --shadow-btn: 0 4px 15px rgba(29, 78, 216, .25);

    /* Accent INK — the six `--*-ink` tokens are declared ONCE, in theme.css
       sections A2/A3, and reset in D2 so a still-dark island cannot inherit
       light ink onto a dark surface. They are NOT re-declared here: two
       copies of one value have already drifted in this repo. Consumers stay
       `var(--accent-ink, var(--brand))`, so dark mode still falls back to
       the brand literal by construction.
       tests/test_static/test_theme_pages_a.py pins theme.css as the source,
       so a rename there fails a test instead of silently un-inking six
       pages. */
    /* The brand gradient used as INK, for the `background-clip: text` sites
       only. --gradient-cta itself is NOT flipped: it is also the resting
       background of buttons and badges whose labels are white or near-black,
       and darkening it there breaks those pairings (theme.css section C makes
       the same argument for .text-white).

       COMPOSED from the ink tokens rather than restating their hexes, so
       #1d4ed8 / #6d28d9 have exactly one source (theme.css A2/A3) and this
       cannot drift from it. MEASURED degradation, because the rule here is
       not obvious: if theme.css ever stops publishing those tokens this
       value becomes guaranteed-invalid, the OUTER
       `var(--gradient-cta-ink, var(--gradient-cta))` at each call site takes
       ITS fallback, and the text paints with the brand gradient — the
       dark-mode appearance, not blank text. Verified in Chromium rather than
       reasoned about, because the opposite outcome (invisible headings) is
       the repo's worst failure class. */
    --gradient-cta-ink: linear-gradient(90deg, var(--accent-ink), var(--accent-2-ink));
    /* White-on-CTA. The brand gradient measures 2.6:1 under white text
       (home.css says so at --brand-accent-strong), which is site debt in
       BOTH themes — but a pale blue button on a white card is where it is
       most visible. Only the BUTTON reads this token; --gradient-cta
       itself stays put so accent stripes and badges are unaffected.
       Measured white-on: 6.7:1 and 7.1:1. */
    --cta-surface: linear-gradient(90deg, #1d4ed8, #6d28d9);

    /* Gradient TEXT (background-clip: text) — BOTH stops are read as ink,
       so the pale second stop has to darken too. */
    --highlight-green: linear-gradient(90deg, #14532d, #166534);
    --highlight-blue: linear-gradient(90deg, #1e40af, #1d4ed8);
    --highlight-purple: linear-gradient(90deg, #5b21b6, #6d28d9);
    --highlight-orange: linear-gradient(90deg, #78350f, #9a3412);

    /* The card wash ships as a hard literal. Its consumer is
       `var(--card-surface, <the exact literal>)`, so dark mode is
       byte-identical BY CONSTRUCTION rather than by a retyped value —
       and a white-on-white wash would make every card vanish here. */
    --card-surface: #ffffff;
  }
}

/* 2. Scoped About Overrides
   ------------------------------------------------------------ */
html {
  scroll-behavior: smooth;
}

.kais-about {
  background: radial-gradient(1200px 600px at 80% -10%, rgba(155, 109, 255, .15), transparent),
              radial-gradient(900px 500px at -10% 10%, rgba(94, 158, 255, .15), transparent),
              var(--bg-page) !important;
  color: var(--text-body) !important;
  font-family: var(--font);
}

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

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  background: var(--bg-card);
  color: var(--text-heading);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-btn);
  border: 2px solid var(--brand);
}

.skip-link:focus {
  position: fixed;
  left: 50%;
  top: 1.25rem;
  transform: translateX(-50%);
  width: auto;
  height: auto;
}

/* 3. Layout Helpers (same as homepage)
   ------------------------------------------------------------ */
.kais-about .kais-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.kais-about .kais-section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.kais-about .kais-section-alt {
  background: var(--bg-alt);
}

.kais-about .kais-section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.kais-about .kais-section-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
  max-width: 36rem;
}

.kais-about .text-center {
  text-align: center;
}

.kais-about .mx-auto {
  margin-inline: auto;
}

/* Gradient text highlights */
.highlight-brand {
  background: var(--gradient-cta-ink, var(--gradient-cta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.highlight-green {
  background: var(--highlight-green, linear-gradient(90deg, var(--ok), #5dffb0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.highlight-blue {
  background: var(--highlight-blue, linear-gradient(90deg, var(--brand), #92c5ff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.highlight-purple {
  background: var(--highlight-purple, linear-gradient(90deg, var(--brand-2), #c5a3ff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.highlight-orange {
  background: var(--highlight-orange, linear-gradient(90deg, #FF9600, #FFB74D));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 4. Buttons (same as homepage)
   ------------------------------------------------------------ */
.kais-about .btn-kais-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--cta-surface, var(--gradient-cta));
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  padding: 0.9rem 2rem;
  font-weight: 700;
  font-size: 1.05rem;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  box-shadow: var(--shadow-btn);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.kais-about .btn-kais-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.kais-about .btn-kais-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(94, 158, 255, .4);
}

.kais-about .btn-kais-primary:hover::before {
  opacity: 1;
}

.kais-about .btn-kais-primary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.kais-about .btn-kais-primary.btn-large {
  padding: 1rem 2.5rem;
  font-size: 1.15rem;
}

.kais-about .btn-kais-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--text-heading);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  padding: 0.85rem 1.8rem;
  font-weight: 600;
  font-size: 1.05rem;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.kais-about .btn-kais-ghost:hover {
  border-color: var(--brand);
  background: rgba(94, 158, 255, .08);
  transform: translateY(-2px);
}

.kais-about .btn-kais-ghost:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* 5. Hero Section — Two-column layout like homepage
   ------------------------------------------------------------ */
.about-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(155, 109, 255, .25), transparent),
              radial-gradient(900px 500px at -10% 10%, rgba(94, 158, 255, .25), transparent),
              var(--bg-page);
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .about-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.about-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(20px);
  animation: about-fade-in 0.7s ease 0.2s forwards;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(94, 158, 255, .12);
  color: var(--accent-ink, var(--brand));
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-btn);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
}

.about-heading {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.1;
  margin: 0;
}

.about-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
  max-width: 30rem;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* The rule above has no `justify-content`, so it resolves to flex-start.
   That is CORRECT in the hero, whose text column is left-aligned — which is
   exactly why this override is scoped rather than global.

   In #school-os every sibling is centred (the `.text-center` heading
   wrapper, the `.about-subtitle-center` paragraphs), so the inherited
   default left-aligned the button under centred copy: MEASURED 197px left
   of the copy centre at 768px and 404px at 1280px.

   It declares ONLY `justify-content`. The rule carries an id, so it
   outranks the <=639px block at every width and `@media` adds no
   specificity to defend that block — but there is nothing to defend,
   because the phone rule centres via `flex-direction: column` +
   `align-items: center` (a column flex centres on the CROSS axis) and
   neither property is touched here. On phones this sets the MAIN axis,
   which is vertical there, and changes nothing. Test-pinned both ways. */
/* #ai-nuggets is the same shape — centred heading, centred subtitles, one
   CTA — so it takes the same scoped override rather than a second copy of
   this declaration. */
.kais-about #school-os .about-hero-actions,
.kais-about #ai-nuggets .about-hero-actions {
  justify-content: center;
}

/* Hero proof strip — like homepage */
.about-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
}

.about-proof-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.about-proof-number {
  font-size: 1.4rem;
  font-weight: 800;
  background: var(--gradient-cta-ink, var(--gradient-cta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-proof-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Hero visual — floating cards */
.about-hero-visual {
  display: none;
  position: relative;
  min-height: 320px;
  opacity: 0;
  animation: about-fade-in 0.7s ease 0.5s forwards;
}

@media (min-width: 768px) {
  .about-hero-visual {
    display: block;
  }
}

.about-hero-card-group {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.about-float-card {
  position: absolute;
  background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)));
  border-radius: 16px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-heading);
  animation: about-float-card 6s ease-in-out infinite;
}

.about-float-card-1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.about-float-card-2 {
  top: 35%;
  right: 5%;
  animation-delay: -1.5s;
}

.about-float-card-3 {
  bottom: 20%;
  left: 15%;
  animation-delay: -3s;
}

.about-float-card-4 {
  bottom: 5%;
  right: 10%;
  animation-delay: -4.5s;
}

.about-float-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}

@keyframes about-float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Decorative orbs */
.about-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(14px);
  opacity: 0.7;
}

.about-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(94, 158, 255, .3), transparent 70%);
  top: -100px;
  right: -100px;
  animation: about-float 18s ease-in-out infinite;
}

.about-orb-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(155, 109, 255, .25), transparent 70%);
  bottom: -80px;
  left: -60px;
  animation: about-float 14s ease-in-out infinite reverse;
}

.about-orb-3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(47, 211, 122, .2), transparent 70%);
  bottom: 10%;
  left: 40%;
  animation: about-float 22s ease-in-out infinite;
}

@keyframes about-float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(40px, -30px); }
  50% { transform: translate(-40px, 20px); }
  75% { transform: translate(60px, -20px); }
}

@keyframes about-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 6. Wave Dividers (same as homepage)
   ------------------------------------------------------------ */
.kais-about .wave-divider {
  line-height: 0;
  overflow: hidden;
}

.kais-about .wave-divider svg {
  display: block;
  width: 100%;
  height: auto;
}

.kais-about .wave-divider path {
  fill: var(--bg-alt);
}

.kais-about .wave-divider-flip {
  transform: scaleY(-1);
}

.kais-about .wave-divider-flip path {
  fill: var(--bg-alt);
}

/* 7. Story Card — enhanced with icon
   ------------------------------------------------------------ */
.about-story-card {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-card);
  margin-top: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.about-story-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: 2;
}

.about-story-card:hover::before {
  transform: scaleX(1);
}

.about-story-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.about-story-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(94, 158, 255, .2), rgba(155, 109, 255, .2));
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-story-icon i {
  font-size: 1.6rem;
  color: var(--accent-ink, var(--brand));
}

.about-story-card:hover .about-story-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 12px 20px rgba(94, 158, 255, .3);
}

.about-story-text {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 639px) {
  .about-story-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem;
  }
}

/* 8. Mission & Vision Grid
   ------------------------------------------------------------ */
.about-mv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .about-mv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

.about-mv-card {
  background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.about-mv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: 2;
}

.about-mv-card:hover::before {
  transform: scaleX(1);
}

.about-mv-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-card-hover);
}

.about-mv-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-mv-icon-wrap i {
  font-size: 1.5rem;
  color: var(--accent-ink, var(--brand));
}

.about-mv-card:hover .about-mv-icon-wrap {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 12px 20px rgba(94, 158, 255, .3);
}

.about-mv-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 0.75rem;
}

.about-mv-text {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
}

/* 9. Features Grid
   ------------------------------------------------------------ */
/* The kais-os product screenshot in #school-os, between the section heading
   and the three claim cards.

   `about-os-shot`, NOT `school-os-art`: that class lives in home.css, which
   this page does not load, so borrowing it would resolve to nothing — the
   silent failure `TestEveryClassHasARule` in test_about_school_os.py exists
   to catch.

   The plate is not decoration. The asset is an opaque, near-white raster and
   .kais-about paints a dark ground, so without a border and a radius it
   lands as a hard bright rectangle. `overflow: hidden` on the wrapper is what
   makes the radius clip the raster's own square corners; `border-radius` on
   the <img> alone stops working the moment a later rule gives it a transform
   or a filter.

   Capped at 50rem because that is what the SOURCE supports: the optimizer
   emits only widths strictly smaller than the source, so the widest
   derivative of the 1115px screenshot is 800px, and 50rem renders it 1:1 at
   1x rather than stretching it. Raising the cap makes the picture blurrier,
   not bigger.

   `.about-features-grid` below carries its own `margin-top`, so the spacing
   under this band is already owned there and is not repeated here. */
/* #school-os and #ai-nuggets share ONE plate — both are a wide product
   screenshot centred on the dark ground, and two copies of these declarations
   would drift. Only the width cap differs, and it is overridden below rather
   than forked, because the cap is the one property that is a fact about the
   SOURCE rather than about the plate. */
.about-os-shot,
.about-nuggets-shot {
  display: block;
  overflow: hidden;
  inline-size: 100%;
  max-inline-size: 50rem;
  margin-inline: auto;
  margin-top: 2.5rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* The 50rem above is what the School OS shot's 1115px source supports. The AI
   Nuggets source is 1600px and has a real 1600w derivative, so 62rem (992px)
   still renders inside its 1200w candidate at 1x rather than upscaling.
   Equal specificity to the shared rule, so SOURCE ORDER is what makes this
   win — it must stay below. */
.about-nuggets-shot {
  max-inline-size: 62rem;
}

.about-os-shot-img,
.about-nuggets-shot-img {
  display: block;
  inline-size: 100%;
  /* The intrinsic width/height reserve the box before the bytes arrive;
     `block-size: auto` hands the ratio back once CSS owns the width. Without
     it this lazy-loaded image is zero pixels tall until it decodes and then
     shoves the cards, the caveat and the CTA down mid-scroll. */
  block-size: auto;
}

.about-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .about-features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.about-feature-card {
  background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 2rem 1.5rem;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.about-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: 2;
}

.about-feature-card:hover::before {
  transform: scaleX(1);
}

.about-feature-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-card-hover);
}

.about-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(94, 158, 255, .2), rgba(155, 109, 255, .2));
  margin-bottom: 1.25rem;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-feature-icon i {
  font-size: 1.4rem;
  color: var(--accent-ink, var(--brand));
}

.about-feature-card:hover .about-feature-icon {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 12px 20px rgba(94, 158, 255, .3);
}

.about-feature-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0 0 0.5rem;
}

.about-feature-desc {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

/* 10. Steps Row (How It Works / Getting Started)
   ------------------------------------------------------------ */
.about-steps-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
  position: relative;
}

@media (min-width: 768px) {
  .about-steps-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .about-steps-row::before {
    content: "";
    position: absolute;
    top: 40px;
    left: calc(16.67% + 24px);
    right: calc(16.67% + 24px);
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      var(--border-light) 0px,
      var(--border-light) 8px,
      transparent 8px,
      transparent 16px
    );
    z-index: 0;
  }
}

.about-step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.about-step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: 2;
}

.about-step-card:hover::before {
  transform: scaleX(1);
}

.about-step-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-card-hover);
}

.about-step-number {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
  box-shadow: 0 8px 15px rgba(94, 158, 255, .3);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-step-card:hover .about-step-number {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 12px 20px rgba(94, 158, 255, .4);
}

.about-step-text {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

/* 11. Reasons Grid (Why Choose)
   ------------------------------------------------------------ */
.about-reasons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .about-reasons-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

.about-reason-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.about-reason-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: 2;
}

.about-reason-card:hover::before {
  transform: scaleX(1);
}

.about-reason-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-card-hover);
}

.about-reason-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(47, 211, 122, .15), rgba(93, 255, 176, .15));
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-reason-icon i {
  color: var(--ok-ink, var(--ok));
  font-size: 1.2rem;
}

.about-reason-card:hover .about-reason-icon {
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 8px 16px rgba(47, 211, 122, .25);
}

.about-reason-card:hover .about-reason-icon i {
  color: var(--accent-ink, var(--brand));
}

.about-reason-card > span {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
}

/* 12. Promise Card
   ------------------------------------------------------------ */
.about-promise-card {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-card);
  margin-top: 2rem;
  max-width: 800px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.about-promise-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF9600, #FFB74D);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
  z-index: 2;
}

.about-promise-card:hover::before {
  transform: scaleX(1);
}

.about-promise-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.about-promise-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 150, 0, .2), rgba(255, 183, 77, .2));
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-promise-icon i {
  font-size: 1.6rem;
  color: var(--warn-ink, var(--kais-orange));
}

.about-promise-card:hover .about-promise-icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 12px 20px rgba(255, 150, 0, .25);
}

.about-promise-text {
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 639px) {
  .about-promise-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem;
  }
}

/* 14. Closing Card
   ------------------------------------------------------------ */
.about-closing-card {
  background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)));
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: 3rem 2.5rem;
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-card);
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
}

.about-closing-quote-icon {
  font-size: 2.5rem;
  background: var(--gradient-cta-ink, var(--gradient-cta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  display: block;
}

.about-closing-text {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text-heading);
  line-height: 1.7;
  margin: 0;
  font-style: italic;
}

/* 15. Final CTA
   ------------------------------------------------------------ */
.about-cta-section {
  background: radial-gradient(600px 300px at 20% -10%, rgba(94, 158, 255, .2), transparent),
              radial-gradient(600px 300px at 90% 10%, rgba(155, 109, 255, .2), transparent);
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.about-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(94, 158, 255, .07) 0%, rgba(155, 109, 255, .07) 100%);
  z-index: 0;
}

.about-cta-section > * {
  position: relative;
  z-index: 1;
}

.about-cta-section h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  background: var(--gradient-cta-ink, var(--gradient-cta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 0.75rem;
}

.about-cta-section p {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--text-body);
  margin: 0 0 1.75rem;
  line-height: 1.6;
}

.about-cta-section .btn-kais-primary {
  box-shadow: 0 15px 24px rgba(94, 158, 255, .3);
}

.about-cta-section .btn-kais-primary:hover {
  box-shadow: 0 20px 30px rgba(94, 158, 255, .4);
}

/* 16. Reveal-on-Scroll Animations
   ------------------------------------------------------------ */
.kais-about .reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.kais-about .reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.kais-about .reveal-item:nth-child(2) { transition-delay: 0.08s; }
.kais-about .reveal-item:nth-child(3) { transition-delay: 0.16s; }
.kais-about .reveal-item:nth-child(4) { transition-delay: 0.24s; }
.kais-about .reveal-item:nth-child(5) { transition-delay: 0.32s; }

/* 17. Responsive
   ------------------------------------------------------------ */
@media (max-width: 639px) {
  .about-heading {
    font-size: 2rem;
  }

  .about-hero-actions {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .about-hero-actions .btn-kais-primary,
  .about-hero-actions .btn-kais-ghost {
    width: 100%;
    max-width: 280px;
  }

  .about-hero-proof {
    justify-content: center;
    gap: 1rem;
  }

  .about-hero-text {
    align-items: center;
    text-align: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kais-about .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .about-hero-text,
  .about-hero-visual {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .about-orb-1,
  .about-orb-2,
  .about-orb-3 {
    animation: none;
  }

  .about-float-card {
    animation: none;
  }
}