/* =============================================================================
   RADLE Learning Launchpad — Design System
   Premium, vibrant-blue, accessible static site styles.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core blue palette */
  --navy-950: #04133f;
  --navy-900: #071e63;
  --royal-700: #0b42d6;
  --royal-600: #0b5cff;
  --azure-500: #168cff;
  --cyan-400: #20c4f4;
  --cyan-200: #9fe9ff;
  --sky-100: #e5f7ff;
  --sky-50: #f5fbff;
  --ink: #0b1938;
  --muted: #51627f;
  --white: #ffffff;

  /* Functional colors */
  --line: #d7e6f5;
  --line-strong: #b9d3ee;
  --focus: #ffcf3f;

  /* Gradients */
  --grad-primary: linear-gradient(
    135deg,
    #04133f 0%,
    #0b42d6 46%,
    #168cff 73%,
    #20c4f4 100%
  );
  --grad-support: linear-gradient(
    135deg,
    #e5f7ff 0%,
    #ffffff 55%,
    #eef4ff 100%
  );
  --grad-action: linear-gradient(135deg, #0b5cff 0%, #168cff 100%);

  /* Typography */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-head: ui-rounded, "Avenir Next", "Trebuchet MS", "Segoe UI",
    sans-serif;

  /* Fluid type scale */
  --fs-base: clamp(1.06rem, 1rem + 0.35vw, 1.2rem); /* ~17–19px body text */
  --fs-lead: clamp(1.2rem, 1.08rem + 0.6vw, 1.45rem);
  --fs-h4: clamp(1.25rem, 1.1rem + 0.55vw, 1.55rem);
  --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h1: clamp(2.7rem, 1.9rem + 4vw, 4.8rem);

  /* Spacing */
  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;

  /* Radius */
  --radius-btn: 14px;
  --radius-card: 20px;
  --radius-lg: 24px;

  /* Shadows (soft blue) */
  --shadow-sm: 0 2px 8px rgba(11, 66, 214, 0.08);
  --shadow-md: 0 12px 30px rgba(7, 30, 99, 0.12);
  --shadow-lg: 0 26px 60px rgba(4, 19, 63, 0.22);

  --container: 1200px;
  --measure: 74ch; /* long-form reading measure ≈ 720–780px */
  --header-h: 92px;
}

/* ----------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--ink);
  background: var(--sky-50);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  line-height: 1.12;
  color: var(--navy-950);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--royal-600);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--royal-700);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  padding-left: 1.35em;
}

li {
  margin-bottom: 0.4em;
}

strong {
  color: var(--navy-900);
}

/* ----------------------------------------------------------------------------
   3. Accessibility helpers
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--white);
  color: var(--navy-900);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  font-weight: 700;
  box-shadow: var(--shadow-md);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.section {
  padding-block: var(--space-7);
}
.section--tight {
  padding-block: var(--space-6);
}
.section--sky {
  background: var(--sky-50);
}
.section--panel {
  background: var(--grad-support);
}
.section--deep {
  background: var(--grad-primary);
  color: var(--sky-100);
}
.section--deep h2,
.section--deep h3 {
  color: var(--white);
}

.section-head {
  max-width: 74ch;
  margin-bottom: var(--space-5);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--royal-600);
  margin-bottom: var(--space-2);
}
.section--deep .eyebrow {
  color: var(--cyan-200);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-action);
}
.section--deep .eyebrow::before {
  background: var(--cyan-400);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--muted);
}
.section--deep .lead {
  color: var(--cyan-200);
}

/* Grids */
.grid {
  display: grid;
  gap: var(--space-4);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.85rem 1.7rem;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-align: center;
}
.btn .arrow {
  transition: transform 0.18s ease;
}
.btn:hover .arrow {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--grad-action);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--white);
  color: var(--royal-700);
  border-color: var(--line-strong);
}
.btn-secondary:hover {
  color: var(--royal-700);
  border-color: var(--royal-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  border-color: var(--white);
}

.btn--full {
  width: 100%;
}

/* External link marker */
.btn[target="_blank"] .ext,
a[target="_blank"] .ext {
  font-size: 0.85em;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.btn-row--center {
  justify-content: center;
}

/* ----------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--grad-primary);
  box-shadow: 0 6px 24px rgba(4, 19, 63, 0.28);
  transition: padding 0.2s ease;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: 0.5rem;
  transition: min-height 0.2s ease;
}
.site-header.is-compact .header-inner {
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 16px;
}
/* The logo asset is a transparent 1920×1080 PNG whose artwork occupies only a
   centered ~636×225 region (aspect ≈ 2.83). The .logo-panel acts as a fixed
   clipping window: the image is scaled up and centered so the transparent
   padding overflows and is cropped, letting the logo sit directly on the blue
   header with no white card. Sizing is driven by the --logo-h custom property.
   Constants: container width = --logo-h × 2.83 (artwork aspect);
              image height   = --logo-h × 4.8  (canvas-to-artwork height ratio). */
.logo-panel {
  /* --logo-h is the VISIBLE artwork height. It is tuned to nearly fill the
     header's usable vertical space: header min-height 92px − 2×0.5rem padding
     ≈ 76px of usable height, so a 76px logo sits close to the top/bottom bounds
     without increasing the header height. */
  --logo-h: 76px;
  position: relative;
  display: block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 2.83);
  overflow: hidden;
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Resize in lockstep with the header: the header animates its min-height,
     so the logo's --logo-h-driven height/width use the SAME duration/easing.
     All values are proportional (width = h×2.83, image = h×4.8), so the crop
     stays correct at every frame — the logo shrinks as one coordinated unit. */
  transition: height 0.2s ease, width 0.2s ease, transform 0.2s ease;
}
.brand:hover .logo-panel {
  transform: translateY(-1px);
}
.logo-panel img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: calc(var(--logo-h) * 4.8);
  max-width: none;
  display: block;
  transition: height 0.2s ease;
}
.site-header.is-compact .logo-panel {
  /* Compact row is 68px − 2×0.5rem padding ≈ 52px usable. */
  --logo-h: 52px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  color: var(--white);
  cursor: pointer;
}
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--white);
  border-radius: 3px;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle .bars::before {
  position: absolute;
  top: -7px;
}
.nav-toggle .bars::after {
  position: absolute;
  top: 7px;
}
.nav-toggle[aria-expanded="true"] .bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .bars::before {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li {
  margin: 0;
}
.nav-menu a:not(.btn) {
  display: inline-block;
  padding: 0.65rem 0.95rem;
  color: var(--sky-100);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.08rem;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav-menu a:not(.btn):hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}
.nav-menu a[aria-current="page"] {
  color: var(--white);
  background: rgba(255, 255, 255, 0.18);
}
.nav-cta {
  margin-left: var(--space-2);
}

/* ----------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--grad-primary);
  color: var(--white);
  overflow: hidden;
  padding-block: var(--space-7) var(--space-7);
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__content {
  max-width: 34rem;
}
.hero h1 {
  color: var(--white);
  margin-bottom: var(--space-4);
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--cyan-200);
  margin-bottom: var(--space-5);
  max-width: 42ch;
}
.hero .btn-row {
  margin-bottom: var(--space-5);
}

.trust-markers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.trust-markers li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.6rem 1.05rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
}
.trust-markers svg {
  flex-shrink: 0;
  color: var(--cyan-200);
}

/* Hero decorative art (CSS/SVG only) */
.hero__art {
  position: relative;
  z-index: 2;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-inline: auto;
}
.hero__art .orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(159, 233, 255, 0.35);
}
.hero__art .orbit--2 {
  inset: 14%;
  border-style: dashed;
  border-color: rgba(159, 233, 255, 0.25);
}
.hero__art .orbit--3 {
  inset: 28%;
  border-color: rgba(159, 233, 255, 0.18);
}
.hero__art .glow {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(32, 196, 244, 0.55),
    rgba(11, 92, 255, 0.15) 55%,
    transparent 72%
  );
  filter: blur(2px);
}
.hero__art .launch-badge {
  position: absolute;
  inset: 30%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
}
.hero__art .launch-badge svg {
  width: 46%;
  height: auto;
  color: var(--white);
}
.hero__art .spark {
  position: absolute;
  color: var(--cyan-200);
}
.hero__art .spark--a {
  top: 6%;
  left: 40%;
  width: 26px;
}
.hero__art .spark--b {
  top: 22%;
  right: 6%;
  width: 18px;
}
.hero__art .spark--c {
  bottom: 12%;
  left: 8%;
  width: 22px;
}

/* Background decorative shapes for hero */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero__bg .arc {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
}
.hero__bg .arc--1 {
  width: 720px;
  height: 720px;
  right: -220px;
  top: -280px;
}
.hero__bg .arc--2 {
  width: 520px;
  height: 520px;
  left: -200px;
  bottom: -240px;
  border-color: rgba(32, 196, 244, 0.14);
}
.hero__bg .dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-200);
  opacity: 0.55;
}
.hero__bg .dot:nth-child(3) {
  top: 24%;
  left: 12%;
}
.hero__bg .dot:nth-child(4) {
  top: 70%;
  left: 46%;
  width: 6px;
  height: 6px;
}
.hero__bg .dot:nth-child(5) {
  top: 40%;
  right: 30%;
  width: 5px;
  height: 5px;
}

/* Small page hero for interior pages */
.page-hero {
  position: relative;
  background: var(--grad-primary);
  color: var(--white);
  overflow: hidden;
  padding-block: var(--space-7) var(--space-6);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 70ch;
}
.page-hero h1 {
  color: var(--white);
}
.page-hero p {
  color: var(--cyan-200);
  font-size: var(--fs-lead);
  margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card h3 {
  margin-bottom: var(--space-2);
}
.card p {
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.card p:last-child {
  margin-bottom: 0;
}
.card__foot {
  margin-top: auto;
  padding-top: var(--space-2);
}
.card--top {
  border-top: 4px solid transparent;
  border-image: var(--grad-action) 1;
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--sky-100);
  color: var(--royal-600);
  margin-bottom: var(--space-3);
}
.card-icon svg {
  width: 28px;
  height: 28px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--royal-700);
  background: var(--sky-100);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.tag--muted {
  color: var(--muted);
  background: #eef3fa;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: none;
}
.link-arrow .arrow {
  transition: transform 0.18s ease;
}
.link-arrow:hover .arrow {
  transform: translateX(4px);
}

/* Ideal learner line inside program cards */
.card__meta {
  font-size: 0.98rem;
  color: var(--navy-900);
  background: var(--sky-50);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  margin-bottom: var(--space-3);
}
.card__meta strong {
  display: block;
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--royal-600);
  margin-bottom: 0.15rem;
}

/* ----------------------------------------------------------------------------
   9. Video / Meet Kim section
   -------------------------------------------------------------------------- */
.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
/* Feature variant gives the media a little more presence (e.g. Meet Kim). */
.media-split--feature {
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 4vw, 4.5rem);
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--grad-primary);
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  color: var(--white);
  text-align: center;
  padding: var(--space-4);
}
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-frame__placeholder {
  position: relative;
  z-index: 2;
}
.play-badge {
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-3);
}
.play-badge svg {
  width: 34px;
  height: 34px;
  color: var(--white);
  margin-left: 4px;
}
.video-frame__placeholder p {
  color: var(--cyan-200);
  margin: 0;
  font-weight: 600;
}
.caption-note {
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: var(--space-3);
}

/* ----------------------------------------------------------------------------
   10. Steps / How it works
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  position: relative;
}
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.step__num {
  counter-increment: step;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--grad-action);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.step__num::before {
  content: counter(step);
}
.step h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-1);
}
.step p {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0;
}
/* trajectory line behind steps on desktop */
.steps::before {
  content: "";
  position: absolute;
  top: 52px;
  left: 12%;
  right: 12%;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--cyan-400) 0 14px,
    transparent 14px 26px
  );
  opacity: 0.5;
  z-index: 0;
}
.step {
  z-index: 1;
}

/* ----------------------------------------------------------------------------
   11. Benefit list (Why RADLE)
   -------------------------------------------------------------------------- */
.benefit {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.benefit__icon {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--cyan-200);
}
.benefit__icon svg {
  width: 26px;
  height: 26px;
}
.benefit h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}
.benefit p {
  color: var(--cyan-200);
  margin: 0;
}

/* ----------------------------------------------------------------------------
   12. Resource list items
   -------------------------------------------------------------------------- */
.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.resource-card .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.resource-card .read-time {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

/* ----------------------------------------------------------------------------
   13. Accordions (FAQ)
   -------------------------------------------------------------------------- */
.accordion {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.accordion + .accordion {
  margin-top: var(--space-3);
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1.3rem 1.5rem;
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navy-950);
  cursor: pointer;
  min-height: 62px;
}
.accordion__trigger:hover {
  background: var(--sky-50);
}
.accordion__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  position: relative;
  color: var(--royal-600);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.accordion__icon::before {
  top: 12px;
  left: 3px;
  right: 3px;
  height: 2.5px;
}
.accordion__icon::after {
  left: 12px;
  top: 3px;
  bottom: 3px;
  width: 2.5px;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: scaleY(0);
  opacity: 0;
}
.accordion__panel {
  padding: 0 1.5rem 1.4rem;
}
.accordion__panel p:last-child {
  margin-bottom: 0;
}
.accordion__panel .flag {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--royal-700);
  background: var(--sky-100);
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
}

/* ----------------------------------------------------------------------------
   14. Callout / notes
   -------------------------------------------------------------------------- */
.callout {
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: var(--sky-100);
  border: 1px solid var(--line-strong);
}
.callout--soft {
  background: var(--white);
  border: 1px dashed var(--line-strong);
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout__title {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
}

.note-placeholder {
  display: inline-block;
  font-weight: 700;
  color: var(--royal-700);
  background: #fff6d8;
  border: 1px solid #f2dd8f;
  border-radius: 8px;
  padding: 0.1rem 0.45rem;
}

/* ----------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band .container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 60ch;
}
.cta-band h2 {
  margin-bottom: var(--space-3);
}
.cta-band__deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.cta-band__deco .arc {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  width: 500px;
  height: 500px;
}
.cta-band__deco .arc--l {
  left: -240px;
  top: -180px;
}
.cta-band__deco .arc--r {
  right: -240px;
  bottom: -220px;
  border-color: rgba(32, 196, 244, 0.16);
}

/* ----------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: var(--sky-100);
  padding-block: var(--space-6) var(--space-5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.footer-brand .logo-panel {
  --logo-h: 48px;
  margin-bottom: var(--space-3);
}
.footer-slogan {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--cyan-200);
  font-size: 1.15rem;
  margin-bottom: var(--space-2);
}
.footer-desc {
  color: #aebfdc;
  font-size: 1rem;
  max-width: 34ch;
}
.footer-col h2 {
  font-size: 1.05rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 0.6rem;
}
.footer-col a {
  color: var(--sky-100);
  text-decoration: none;
  font-size: 1.02rem;
}
.footer-col a:hover {
  color: var(--cyan-200);
  text-decoration: underline;
}
.footer-email {
  color: #aebfdc;
  font-size: 1rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  align-items: center;
  color: #93a6c9;
  font-size: 0.95rem;
}
.footer-bottom a {
  color: #93a6c9;
}

/* ----------------------------------------------------------------------------
   17. Breadcrumbs & article typography
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-size: 0.98rem;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.breadcrumb li {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--cyan-200);
}
.breadcrumb li:not(:last-child)::after {
  content: "›";
  color: rgba(159, 233, 255, 0.6);
}
.breadcrumb a {
  color: var(--white);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
  color: var(--cyan-200);
}

.article {
  max-width: var(--measure);
  margin-inline: auto;
}
.article h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-5);
}
.article h3 {
  font-size: var(--fs-h4);
  margin-top: var(--space-4);
}
.article p,
.article li {
  color: var(--ink);
}
.article ul,
.article ol {
  margin-bottom: var(--space-3);
}

.article-summary {
  background: var(--grad-support);
  border: 1px solid var(--line);
  border-left: 5px solid var(--royal-600);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.article-summary p:last-child {
  margin-bottom: 0;
}

.try-today {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  margin-block: var(--space-5);
}
.try-today h2 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.disclaimer {
  font-size: 0.95rem;
  color: var(--muted);
  background: var(--sky-50);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--space-3);
  margin-top: var(--space-5);
}

.related {
  margin-top: var(--space-5);
}
.related ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.related a {
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
}

/* ----------------------------------------------------------------------------
   18. Misc content helpers
   -------------------------------------------------------------------------- */
.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: var(--space-3);
}

.headshot-panel {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--grad-primary);
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  color: var(--white);
  text-align: center;
  padding: var(--space-4);
}
.headshot-panel__inner {
  position: relative;
  z-index: 2;
}
.headshot-panel svg {
  width: 96px;
  height: 96px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-2);
}
.headshot-panel p {
  color: var(--cyan-200);
  font-weight: 600;
  margin: 0;
}
.headshot-panel .deco-arc {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 320px;
  height: 320px;
  top: -80px;
  right: -120px;
  z-index: 1;
}

.value-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.value-list li {
  position: relative;
  padding-left: 2.2rem;
  margin: 0;
}
.value-list li svg {
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  color: var(--royal-600);
}

.pill-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
}
.pill-list li {
  margin: 0;
  padding: 0.35rem 0.8rem;
  background: var(--sky-100);
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy-900);
}

/* ----------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
/* Medium screens: keep the horizontal nav from crowding before it collapses. */
@media (min-width: 861px) and (max-width: 1120px) {
  .logo-panel {
    /* Slightly smaller on medium widths so the wider logo never crowds the
       horizontal nav before it collapses. */
    --logo-h: 58px;
  }
  .nav-menu a:not(.btn) {
    padding: 0.6rem 0.7rem;
    font-size: 1rem;
  }
  .nav-menu {
    gap: 0.25rem;
  }
  .nav-cta .btn {
    padding: 0.75rem 1.1rem;
    font-size: 1rem;
  }
}

@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .hero__art {
    max-width: 360px;
    order: -1;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps::before {
    display: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--navy-900);
    padding: var(--space-3);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, opacity 0.25s ease,
      visibility 0.25s ease;
  }
  .nav-menu.is-open {
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }
  .nav-menu a:not(.btn) {
    display: block;
    padding: 0.85rem 0.75rem;
    font-size: 1.1rem;
  }
  .nav-cta {
    margin: var(--space-2) 0 0;
  }
  .nav-cta .btn {
    width: 100%;
  }
  .site-header {
    position: relative;
  }
  .header-inner {
    position: relative;
  }
  /* The mobile header scrolls offscreen rather than staying sticky, so the
     compact shrink serves no purpose here. Neutralize it: keep the header and
     logo at their normal size in the .is-compact state too, so the logo never
     appears to grow when scrolling back to the top. (Matches the base normal
     mobile logo size of 76px for this 601–860px range; ≤600px is handled
     below.) Desktop/tablet compact behavior is unaffected. */
  .site-header.is-compact .header-inner {
    min-height: var(--header-h);
  }
  .site-header.is-compact .logo-panel {
    --logo-h: 76px;
  }
}

@media (max-width: 600px) {
  .site-header .logo-panel {
    /* Larger, near-filling phone logo. Header usable height ≈ 76px; at 64px the
       logo width ≈ 181px still leaves comfortable room for the 48px menu toggle
       even at 320px (inner ≈ 285px − 181 − gap − 48 > 0). */
    --logo-h: 64px;
  }
  /* Hold the same size in the compact state so the logo stays consistent while
     the phone header scrolls away (no shrink, no grow-back at the top). */
  .site-header.is-compact .logo-panel {
    --logo-h: 64px;
  }
}

@media (max-width: 720px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .media-split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .about-split {
    grid-template-columns: 1fr !important;
  }
  .btn-row .btn {
    width: 100%;
  }
}

/* About page split layout */
.about-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-6);
  align-items: start;
}

/* About page: distinct content blocks for philosophy / expectations / why. */
.info-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.info-card h2 {
  font-size: var(--fs-h4);
  margin-top: 0;
  margin-bottom: var(--space-2);
}
.info-card--wide {
  grid-column: 1 / -1;
}
.info-card ul {
  margin: 0;
}
.info-card p:last-child {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .info-cards {
    grid-template-columns: 1fr;
  }
}

/* Program grid: two columns on larger screens, stacking on narrow ones. */
.program-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) {
  .program-grid {
    grid-template-columns: 1fr;
  }
}

/* Program detail block */
.program-detail {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
/* Spacing between stacked details when NOT inside the grid. */
.program-detail + .program-detail {
  margin-top: var(--space-4);
}
.program-grid .program-detail + .program-detail {
  margin-top: 0;
}
.program-detail__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.program-detail__num {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--grad-action);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
}
.program-detail h3 {
  margin: 0;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.detail-grid h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--royal-600);
  margin-bottom: 0.35rem;
}
.detail-grid p,
.detail-grid ul {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}
@media (max-width: 720px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .program-detail {
    padding: var(--space-4);
  }
}

/* ----------------------------------------------------------------------------
   21. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Gentle hero drift (only when motion allowed) */
@media (prefers-reduced-motion: no-preference) {
  .hero__art {
    animation: drift 9s ease-in-out infinite;
  }
  .hero__art .orbit--2 {
    animation: spin 60s linear infinite;
  }
  .hero__art .spark {
    animation: twinkle 4s ease-in-out infinite;
  }
  .hero__art .spark--b {
    animation-delay: 1.2s;
  }
  .hero__art .spark--c {
    animation-delay: 2.4s;
  }
}
@keyframes drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}