/**
 * Platform capability pages — per-personality-family surface system (2026-06-05).
 *
 * Previously each of the 13 platform slugs set ONLY `--mkt-plat-accent` (one hue),
 * so every platform page looked identical apart from a colour — the "every menu
 * looks the same" complaint. This maps each slug onto one of the homepage
 * personality FAMILIES (Clinical / Fluid / Rugged / Governance / Sovereign) and
 * gives the shared `.mkt-personality-hero` a premium, family-specific surface.
 * One file, all 37 platform pages. Personality surfaces are intentional fixed
 * tints (always-light or always-dark bands) → off-token-allow markers inside
 * the braces. Class hook: `.mkt-platform-theme--<slug>` on the page stack.
 */

/* accent top-rule (kept) */
.mkt-page-type-platform-detail {
  position: relative;
}
.mkt-page-type-platform-detail::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--mkt-plat-accent, #38bdf8), transparent); /* off-token-allow: themed accent rule, accent is a per-family var */
}

/* ---- shared premium hero band (consumes the per-family vars) ----
   Two hero hooks cover 13 of the platform pages with known inner markup:
   `.mkt-personality-hero` (generic + admissions) and `.mkt-v3-archetype__hero`
   (attendance / communications / grading / offline-first / student-portal /
   workflows). `color` on the container makes descendants inherit the family ink
   so dark families never bleed dark-text-on-dark. */
/* admissions keeps its bespoke transparent grid hero (marketing-platform-
   admissions.css) — excluded so the family band doesn't override its layout */
.mkt-page-type-platform-detail .mkt-personality-hero.mkt-edt-container:not(.mkt-admissions-hero),
.mkt-page-type-platform-detail .mkt-v3-archetype__hero.mkt-edt-container,
.mkt-page-type-platform-detail .mkt-personality-hero:not(.mkt-admissions-hero),
.mkt-page-type-platform-detail .mkt-v3-archetype__hero {
  color: var(--mkt-plat-ink, inherit);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 60px) clamp(22px, 4vw, 48px);
  margin-bottom: clamp(24px, 4vh, 44px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* family band — blocking-loaded so it lands reliably; the deferred
     personality wash only enriches pages that also carry .mkt-personality-hero.
     Bare vars (no hex) keep this off-token-clean; --mkt-plat-accent is always
     set per family, with the unmapped-slug default rule as the floor. */
  border: 1px solid color-mix(in srgb, var(--mkt-plat-accent) 22%, transparent);
  /* gradient-only (no opaque base layer): the semi-transparent washes sit over
     the page cream. A trailing var(--mkt-edt-bg) with no fallback would be
     undefined on the platform stack and invalidate the whole shorthand. */
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--mkt-plat-accent) 17%, transparent) 0%,
      color-mix(in srgb, var(--mkt-plat-accent) 6%, transparent) 38%,
      transparent 64%),
    radial-gradient(60% 78% at 96% -10%,
      color-mix(in srgb, var(--mkt-plat-accent) 13%, transparent), transparent 60%);
}
.mkt-page-type-platform-detail .mkt-personality-hero:not(.mkt-admissions-hero)::after,
.mkt-page-type-platform-detail .mkt-v3-archetype__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(720px 360px at 88% -20%, color-mix(in srgb, var(--mkt-plat-accent, #38bdf8) 22%, transparent), transparent 62%);
}
.mkt-page-type-platform-detail .mkt-personality-hero__eyebrow,
.mkt-page-type-platform-detail .mkt-v3-eyebrow,
.mkt-page-type-platform-detail .detail-eyebrow {
  color: var(--mkt-plat-accent, #38bdf8);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
.mkt-page-type-platform-detail .mkt-personality-hero .mkt-v3-section-headline,
.mkt-page-type-platform-detail .mkt-v3-archetype__hero .mkt-v3-section-headline,
.mkt-page-type-platform-detail .mkt-personality-hero .detail-headline,
.mkt-page-type-platform-detail .mkt-personality-hero h1,
.mkt-page-type-platform-detail .mkt-v3-archetype__hero h1 {
  color: var(--mkt-plat-ink, inherit);
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
}
.mkt-page-type-platform-detail .mkt-personality-hero .mkt-v3-lead,
.mkt-page-type-platform-detail .mkt-v3-archetype__hero .mkt-v3-lead,
.mkt-page-type-platform-detail .mkt-personality-hero .detail-subheadline,
.mkt-page-type-platform-detail .mkt-v3-archetype__hero p {
  color: var(--mkt-plat-muted, inherit);
  font-size: 1.04rem;
  line-height: 1.6;
  max-width: 44rem;
}

/* the "Simulated data" visual-engine strip reads as an intentional, framed
   accent panel per family rather than a bare caption floating on cream */
.mkt-page-type-platform-detail .mkt-ve-platform-strip {
  border: 1px solid color-mix(in srgb, var(--mkt-plat-accent) 18%, transparent);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 28px);
  margin-block: clamp(20px, 3vh, 36px);
  background: color-mix(in srgb, var(--mkt-plat-accent) 4%, transparent);
}
.mkt-page-type-platform-detail .mkt-ve-platform-strip .mkt-edt-illustrative-pill {
  border: 1px solid color-mix(in srgb, var(--mkt-plat-accent) 30%, transparent);
  color: var(--mkt-plat-muted, inherit);
  border-radius: 999px;
}

/* themed section dividers + segment cards pick up the accent */
.mkt-page-type-platform-detail .mkt-v3-segment-card,
.mkt-page-type-platform-detail .segment-card {
  border-top: 3px solid color-mix(in srgb, var(--mkt-plat-accent, #38bdf8) 70%, transparent);
}

/* ============================ FAMILIES ============================ */

/* --- CLINICAL: cool bright money/records (admissions · fees · SIS) --- */
.mkt-platform-theme--platform-admissions,
.mkt-platform-theme--platform-fees-payments,
.mkt-platform-theme--platform-student-information-system {
  --mkt-plat-ink: #0f2236;     /* off-token-allow: clinical platform ink */
  --mkt-plat-muted: #51657a;   /* off-token-allow: clinical platform muted */
}
.mkt-platform-theme--platform-admissions { --mkt-plat-accent: #059669; } /* off-token-allow: clinical admissions accent */
.mkt-platform-theme--platform-fees-payments { --mkt-plat-accent: #b45309; } /* off-token-allow: clinical fees accent */
.mkt-platform-theme--platform-student-information-system { --mkt-plat-accent: #2563eb; } /* off-token-allow: clinical SIS accent */

/* --- FLUID: light violet human/learning (portals · grading) --- */
.mkt-platform-theme--platform-parent-portal,
.mkt-platform-theme--platform-teacher-portal,
.mkt-platform-theme--platform-student-portal,
.mkt-platform-theme--platform-grading-report-cards {
  --mkt-plat-ink: #1e1b3a;     /* off-token-allow: fluid platform ink */
  --mkt-plat-muted: #635f86;   /* off-token-allow: fluid platform muted */
  --mkt-plat-accent: #7c3aed;  /* off-token-allow: fluid violet accent */
}
.mkt-platform-theme--platform-teacher-portal { --mkt-plat-accent: #6d28d9; } /* off-token-allow: fluid teacher accent */
.mkt-platform-theme--platform-student-portal { --mkt-plat-accent: #0d9488; } /* off-token-allow: fluid student accent */
.mkt-platform-theme--platform-grading-report-cards { --mkt-plat-accent: #9333ea; } /* off-token-allow: fluid grading accent */

/* --- RUGGED: cool mint resilience (attendance · offline-first) --- */
.mkt-platform-theme--platform-attendance,
.mkt-platform-theme--platform-offline-first {
  --mkt-plat-ink: #0c2a22;     /* off-token-allow: rugged platform ink */
  --mkt-plat-muted: #4d6b62;   /* off-token-allow: rugged platform muted */
  --mkt-plat-accent: #0d9488;  /* off-token-allow: rugged teal accent */
}

/* --- GOVERNANCE: official slate trust (security) --- */
.mkt-platform-theme--platform-security {
  --mkt-plat-ink: #1e293b;     /* off-token-allow: governance platform ink */
  --mkt-plat-muted: #5b6b80;   /* off-token-allow: governance platform muted */
  --mkt-plat-accent: #1d4ed8;  /* off-token-allow: governance authority accent */
}

/* --- SOVEREIGN: cool indigo data/orchestration (analytics · workflows · comms) --- */
.mkt-platform-theme--platform-analytics,
.mkt-platform-theme--platform-workflows,
.mkt-platform-theme--platform-communications {
  --mkt-plat-ink: #1a1f3a;     /* off-token-allow: sovereign platform ink */
  --mkt-plat-muted: #565d82;   /* off-token-allow: sovereign platform muted */
  --mkt-plat-accent: #4f46e5;  /* off-token-allow: sovereign indigo accent */
}
.mkt-platform-theme--platform-analytics { --mkt-plat-accent: #b45309; } /* off-token-allow: sovereign analytics accent */
.mkt-platform-theme--platform-workflows { --mkt-plat-accent: #7c3aed; } /* off-token-allow: sovereign workflows accent */

/* --- previously-unmapped slugs (control plane / runtime / integrations /
   education OS / marketplace / migration cloud) now folded into families so
   they stop falling back to the generic sky default --- */
.mkt-platform-theme--platform-control-plane,
.mkt-platform-theme--platform-runtime {
  --mkt-plat-ink: #1e293b;     /* off-token-allow: governance platform ink */
  --mkt-plat-muted: #5b6b80;   /* off-token-allow: governance platform muted */
  --mkt-plat-accent: #475569;  /* off-token-allow: governance operator accent */
}
.mkt-platform-theme--platform-integrations,
.mkt-platform-theme--platform-education-os,
.mkt-platform-theme--marketplace {
  --mkt-plat-ink: #1a1f3a;     /* off-token-allow: sovereign platform ink */
  --mkt-plat-muted: #565d82;   /* off-token-allow: sovereign platform muted */
  --mkt-plat-accent: #4f46e5;  /* off-token-allow: sovereign indigo accent */
}
.mkt-platform-theme--platform-integrations { --mkt-plat-accent: #0284c7; } /* off-token-allow: integrations connector accent */
.mkt-platform-theme--marketplace { --mkt-plat-accent: #8b5cf6; } /* off-token-allow: marketplace ecosystem accent */
.mkt-platform-theme--migration-cloud {
  --mkt-plat-ink: #0c2a22;     /* off-token-allow: rugged platform ink */
  --mkt-plat-muted: #4d6b62;   /* off-token-allow: rugged platform muted */
  --mkt-plat-accent: #0d9488;  /* off-token-allow: migration teal accent */
}

/* default for any unmapped platform slug → light clinical-ish */
.mkt-page-type-platform-detail:not([class*="theme--platform-"]) {
  --mkt-plat-accent: #38bdf8; /* off-token-allow: default platform accent */
}