/* ==========================================================================
   mukunda.tech — Become a Full-Stack Software Engineer for the AI era
   --------------------------------------------------------------------------
   Production landing page. Mobile-first · Pure CSS3 · Custom properties.
   Palette: red #FF0022 · black #121212 · yellow #FFD000 · white #FFFFFF
   ========================================================================== */

/* ==========================================================================
   01 · Design tokens
   ========================================================================== */
:root {
  /* Color */
  /* Small red text on light surfaces. --red is 3.64:1 on --paper-alt/--paper
     (fails AA below ~19px), while --red-dark is 5.34:1. Use this for red
     labels under 24px; keep --red for large headings and non-text accents. */

  /* Technologies section category accents — derived from brand red/yellow, never black/white */
  /* Deeper warm tint — gives the FAQ band its own step so it does not read
     as a repeat of --paper-alt directly above it. */
  /* Hairline for tinted/white bands, where --line (#e5e4de) drops below a
     visible contrast ratio. */
  /* Hero background aliases keep the visual treatment inside the core palette. */

  /* Typography */

  /* Heading scale — single source of truth for every section heading.
     One fluid clamp covers mobile -> desktop, so no per-section size overrides
     are needed. Colour is NOT set here: headings live on both light and dark
     bands and are recoloured per section (see --heading-on-light/-dark). */ /* space between the eyebrow label and the heading */

  /* Section label ("Curriculum", "Tools of the trade", ...) */

  /* Content titles (accordion / card / list titles) — deliberately lighter
     than --heading-weight so the hierarchy reads: heading > content > body. */

  /* Layout */

  /* Motion */
  --red: #ff0022;
  --red-dark: #cc031d;
  --red-text: #cc031d;
  --green: #0e7979;
  --blue: #3182bd;
  --yellow: #ffd000;
  --highlight-yellow: var(--yellow);
  --black: #121212;
  --white: #ffffff;
  --tech-accent-1: var(--red);
  --tech-accent-2: var(--yellow);
  --tech-accent-3: var(--blue);
  --tech-accent-4: var(--green);

  --paper: #ffffff;
  --paper-alt: #f5f5f1;
  --paper-tint: #e9e7df;
  --line-mid: #d3d0c6;
  --ink: #121212;
  --ink-body: #26262a;
  --muted: #5b5b63;
  --muted-2: #93939a;
  --line: #e5e4de;
  --line-strong: #121212;

  --on-dark: #ffffff;
  --muted-on-dark: #b9b9c0;
  --line-on-dark: rgba(255, 255, 255, 0.16);
  --hero-bg-base: var(--black);
  --hero-bg-glow: var(--red);
  --hero-bg-pattern: var(--muted-on-dark);
  --hero-scroll: 0;
  --hero-layer-a: 0.15;
  --hero-layer-b: 0.3;
  --hero-scroll-max: 60px;
  --hero-pattern-opacity: 0.09;
  --hero-code-opacity: 0.085;
  --hero-grid-opacity: 0.045;
  --hero-drift-a: 32s;
  --hero-drift-b: 40s;
  --hero-pulse: 5.5s;
  --hero-flow: 26s;
  --font-display: "Merriweather", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --heading-size: clamp(2.25rem, 5.4vw, 3.6rem);
  --heading-weight: 700;
  --heading-line-height: 1.05;
  --heading-tracking: -0.015em;
  --heading-gap: 1.25rem;
  --label-size: 0.72rem;
  --label-weight: 600;
  --label-tracking: 0.18em;
  --label-gap: 0.6em;
  --content-title-weight: 600;
  --container: 1320px;
  --gutter: clamp(1.25rem, 4.5vw, 2.5rem);
  --header-h: 4.25rem;
  --pad-y: clamp(4.5rem, 10vw, 8rem);
  --pad-y-sm: clamp(3.25rem, 7vw, 5.5rem);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-1: 0.18s;
  --dur-2: 0.35s;
  --dur-3: 0.75s;
  --focus-ring-dark: 2px solid var(--yellow);
}

/* ==========================================================================
   02 · Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font: 400 1rem/1.65 var(--font-body);
  color: var(--ink-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  --font-display: "Merriweather", "Sora", sans-serif;
  background: var(--paper);
}

body.nav-open {
  overflow: hidden;
}

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

ul[role="list"], ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 300;
  padding: 0.8rem 1.2rem;
  background: var(--black);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

/* ==========================================================================
   03 · Base & utilities
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section--soft {
  background: var(--paper-alt);
}

.section-lede {
  color: var(--muted);
  max-width: 38rem;
  margin-top: 1.25rem;
  font-size: 1.05rem;
}

/* Accent phrase inside a heading — solid theme red, the same accent the other
   section headings use (.ai-era__title-accent, .cta__title-accent). */
.hl {
  color: var(--red);
}

/* Eyebrow / chapter label — one shared style for every section */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.4;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: var(--label-gap);
}

.eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background: var(--red);
  flex: 0 0 auto;
}

.eyebrow--dark {
  color: var(--yellow);
}

.eyebrow--dark::before {
  background: var(--red);
}

.mono-label {
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--muted);
}

.note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 1.75rem;
  max-width: 44rem;
  border-left: 2px solid var(--line-strong);
  padding-left: 1.1rem;
}

/* ==========================================================================
   04 · Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1rem 1.5rem;
  font: 600 0.98rem/1 var(--font-body);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.btn--lg {
  padding: 1.15rem 1.85rem;
  font-size: 1.02rem;
}

.btn--sm {
  padding: 0.68rem 1.05rem;
  font-size: 0.86rem;
}

/* Mobile: keep every tap target comfortably sized */
@media (max-width: 767.98px) {
  .btn--lg {
    padding: 1.1rem 1.75rem;
  }

  .btn--sm,
  .btn--primary.btn--sm {
    min-height: 2.75rem;
  }
}

.btn--primary {
  background: var(--red);
  color: #fff;
}

.btn--primary:hover {
  background: var(--red-dark);
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

.btn__arrow {
  transition: transform var(--dur-2) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   05 · Header & navigation
   ========================================================================== */

.header__inner {
  height: 100%;
}

.brand {
  font: 700 1.55rem/1 var(--font-display);
  justify-content: center;
}

p,\nli p {
  overflow-wrap: anywhere;
  word-break: normal;
  /* hyphens: auto; */
}

/* Bare tokens / code paths should not force a page-scroll in any language. */
code,
pre,
address,
[data-preserve="yes"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mobile-cta__inner a:focus-visible {
  outline: var(--focus-ring-dark);
  outline-offset: 3px;
}

/* ==========================================================================
   06 · Hero
   ========================================================================== */

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.hero::before {
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 12, 13, 0.98) 0%, rgba(12, 12, 13, 0.76) 48%, rgba(12, 12, 13, 0.9) 100%);
}

.hero::after {
  top: 12%;
  right: 8%;
  width: min(32rem, 48vw);
  height: 70%;
  border: 1px solid rgba(255, 0, 34, 0.28);
  transform: skewX(-24deg);
  box-shadow: 1.5rem 1.5rem 0 -1.4rem rgba(255, 208, 0, 0.18);
}

.hero__copy {
  min-width: 0;
}

.hero__title-emphasis {
  text-decoration-color: var(--red);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

/* ==========================================================================
   09 · Developer thinking — what developers still own
   ========================================================================== */
.section-head .section-title {
  margin-top: 1.25rem;
}

/* ==========================================================================
   10 · Learn by doing — the 75% practical dark band
   ========================================================================== */
.learn {
  color: #fff;
}

.learn__dot {
  color: var(--red);
}

.learn__lede {
  color: var(--muted-on-dark);
  max-width: 32rem;
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Learning cycle */
.cycle {
  list-style: none;
  padding: 0;
  margin: 3.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cycle__item {
  border: 1px solid var(--line-on-dark);
  padding: 1.4rem 1.3rem;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.cycle__item:hover {
  border-color: var(--yellow);
}

/* List item title in the learning cycle — content level, not heading level. */
.cycle__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: var(--content-title-weight);
  letter-spacing: -0.01em;
  color: #fff;
  margin-top: 0.4rem;
}

.cycle__desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted-on-dark);
  margin-top: 0.35rem;
}

/* ==========================================================================
   11 · Curriculum — accordion
   ========================================================================== */
/* Two columns from 768px up (heading left, lede right); one column below that.
   Margin-bottom pairs with #curriculum .acc margin-top — see both rules. */
.curriculum__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.625rem;
}

.curriculum__intro .section-title {
  margin-top: 1.25rem;
}

.curriculum__lede {
  color: var(--muted);
  max-width: 34rem;
  font-size: 0.95rem;
}

.acc {
  border-top: 2px solid var(--line-strong);
}

.acc-item {
  border-bottom: 1px solid var(--line);
}

.acc-item__heading {
  margin: 0;
  line-height: 1;
}

.acc-item__trigger {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  cursor: pointer;
}

.acc-item__num {
  font: 600 0.85rem var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--muted-2);
  flex: 0 0 auto;
  width: 2.5rem;
  transition: color var(--dur-2) var(--ease-out);
}

.acc-item.is-open .acc-item__num {
  color: var(--red);
}

.acc-item__text {
  display: block;
  min-width: 0;
}

/* Content title (curriculum modules, FAQ questions). Weight comes from
   --content-title-weight (600) so it sits clearly below --heading-weight (700). */
.acc-item__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
  font-weight: var(--content-title-weight);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color var(--dur-2) var(--ease-out);
}

.acc-item__trigger:hover .acc-item__title,
.acc-item.is-open .acc-item__title {
  color: var(--red);
}

.acc-item__summary {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Plus / minus icon */
.acc-item__icon {
  flex: 0 0 auto;
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.acc-item__icon::before,
.acc-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.acc-item__icon::before {
  width: 0.65rem;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.acc-item__icon::after {
  width: 1.5px;
  height: 0.65rem;
  transform: translate(-50%, -50%);
}

.acc-item.is-open .acc-item__icon {
  background: var(--red);
  border-color: var(--red);
}

.acc-item.is-open .acc-item__icon::before,
.acc-item.is-open .acc-item__icon::after {
  background: #fff;
}

.acc-item.is-open .acc-item__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Panel — grid-rows height transition */
.acc-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-in-out);
}

.acc-item.is-open .acc-item__panel {
  grid-template-rows: 1fr;
}

.acc-item__inner {
  overflow: hidden;
  min-height: 0;
}

/* Columns inside modules */
.acc-item__inner .acc-col {
  padding: 0 0 1.75rem;
}

/* Below 1024px the three columns stack, so each one reads as its own card.
   The 1024px rule clears these back to transparent columns with dividers.
   color-mix is progressive: the rgba() fallback applies where it is unsupported. */
.acc[data-accordion="curriculum"] .acc-item__inner > .acc-col {
  padding: 0 1rem 0.9rem 1rem;
  /* border-radius: 0.35rem; */
  background: rgba(0, 0, 0, 0.04);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  /* d7e7dd */
}

/* Column labels ("Understand / Learn / Build") are small text, so they need
   4.5:1. --muted-2 (#93939a) only reaches 2.79:1 on the tinted band; --muted
   (#5b5b63) clears 6.4:1 on both --paper-alt and --paper-tint. */
.acc-col__title {
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Marker square: theme red on all three columns, matching the list dashes. */
#curriculum .acc-col__title::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--red);
}

.acc-col__list {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}

.acc-col__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-body);
}

.acc-col__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--red);
}

/* FAQ variant */

.acc--faq .acc-item__summary {
  display: none;
}

.acc-body {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 42rem;
  padding: 0 0 1.75rem;
}

.acc[data-accordion="curriculum"] {
  border-top: 1px solid var(--line);
}

.acc[data-accordion="curriculum"] .acc-item {
  border-color: var(--line);
}

.acc[data-accordion="curriculum"] .acc-item__trigger {
  appearance: none;
  gap: 0.85rem;
  padding: 1.15rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.acc[data-accordion="curriculum"] .acc-item__trigger:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.acc[data-accordion="curriculum"] .acc-item__num {
  width: 2.2rem;
  color: var(--muted-2);
  font-size: 0.72rem;
  transition: color var(--dur-2) var(--ease-out);
}

.acc[data-accordion="curriculum"] .acc-item.is-open .acc-item__num {
  color: var(--red);
}

.acc[data-accordion="curriculum"] .acc-item__title {
  font-size: clamp(1rem, 2.1vw, 1.18rem);
  line-height: 1.35;
}

.acc[data-accordion="curriculum"] .acc-item__summary {
  margin-top: 0.22rem;
  font-size: 0.82rem;
}

.acc[data-accordion="curriculum"] .acc-item__icon {
  width: 1.2rem;
  height: 1.2rem;
  border: 0;
  background: transparent;
}

.acc[data-accordion="curriculum"] .acc-item__icon::before,
.acc[data-accordion="curriculum"] .acc-item__icon::after {
  background: var(--muted-2);
}

.acc[data-accordion="curriculum"] .acc-item.is-open .acc-item__icon {
  border-color: transparent;
  background: transparent;
}

.acc[data-accordion="curriculum"] .acc-item.is-open .acc-item__icon::before,
.acc[data-accordion="curriculum"] .acc-item.is-open .acc-item__icon::after {
  background: var(--red);
}

/* Stacked cards below 1024px (Understand / Learn / Build); the 1024px rule
   turns this into the 3-column desktop layout. */
.acc[data-accordion="curriculum"] .acc-item__inner {
  display: grid;
  gap: 0.75rem;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.acc[data-accordion="curriculum"] .acc-item.is-open .acc-item__inner {
  opacity: 1;
  transition-delay: 80ms;
}

.build-tools {
  min-width: 0;
  margin-top: 0.25rem;
}

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

@media (min-width: 980px) {

  .build-tools {
    padding-top: 0.35rem;
  }
}

/* ==========================================================================
   12 · Technologies & tools
   ========================================================================== */
.tech__head {
  display: grid;
  align-items: end;
}

.tech__head .section-title {
  margin-top: 1.25rem;
}

.tech__lede {
  color: var(--muted);
  max-width: 34rem;
  font-size: 1.05rem;
}

.tech__groups {
  display: grid;
  grid-template-columns: 1fr;
}

.tech__group {
  padding: 1.75rem 0 1.9rem;
  border-bottom: 1px solid var(--line);
}

/* Each category carries its own accent token, consumed by the dot, underline and item badges below */
.tech__group--c1 { --tech-accent: var(--tech-accent-1); }
.tech__group--c2 { --tech-accent: var(--tech-accent-2); }
.tech__group--c3 { --tech-accent: var(--tech-accent-3); }
.tech__group--c4 { --tech-accent: var(--tech-accent-4); }

.tech__group-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.65rem;
  font: 600 0.78rem var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.tech__group-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--tech-accent, var(--red));
  border-radius: 1px;
}

.tech__dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
}

.tech__dot--red { background: var(--tech-accent-1); }
.tech__dot--garnet { background: var(--tech-accent-2); }
.tech__dot--yellow { background: var(--tech-accent-3); }
.tech__dot--amber { background: var(--tech-accent-4); }

.tech__list {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.25rem;
}

.tech {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font: 500 0.95rem var(--font-mono);
  color: var(--ink);
}

.tech__badge {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  background: var(--tech-accent, var(--red));
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.tech:hover .tech__badge {
  transform: scale(1.25);
}

.tech__note {
  margin-top: 2rem;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 46rem;
}

/* ==========================================================================
   15 · Trainer
   ========================================================================== */
.trainer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

/* Right column: portrait | divider | highlights.
   Mobile keeps the portrait and info panel on one row (matches DOM order),
   so the divider stays vertical at every breakpoint. */
.trainer__aside {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
}

/* The source photo is opaque (light studio backdrop). On the white Trainer band
   the figure edge is invisible, so the only treatment is the soft shadow.
   Intrinsic size 831x1150 (~0.723) vs 4/5 (0.8): the excess height is trimmed
   from the bottom, keeping the head in frame. */
.trainer__figure {
  position: relative;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.trainer__img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(0.94) contrast(1.03);
}

.trainer__content .section-title {
  margin-top: 1.25rem;
}

.trainer__intro {
  margin-top: 1.75rem;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.5vw, 1rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 36rem;
}

.trainer__copy {
  margin-top: 1rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 38rem;
}

/* Highlights — red vertical divider on the left, so the rule stays a divider
   rather than a horizontal rule now that the aside is side-by-side.
   Scoped as `ul.trainer__highlights` to outrank the `ul[role="list"]` reset,
   which would otherwise force padding: 0 and drop the divider spacing. */
ul.trainer__highlights {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.85rem;
  border-left: 3px solid var(--red);
  display: grid;
  gap: 1rem;
  align-content: center;
}

.trainer__highlight {
  display: grid;
  gap: 0.2rem;
}

.trainer__highlight strong {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: var(--content-title-weight);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.trainer__highlight span {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ==========================================================================
   16 · FAQ
   ========================================================================== */
.faq__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.faq__aside .section-title {
  margin-top: 1.25rem;
}

.faq__lede {
  margin-top: 1.25rem;
  color: var(--muted);
  max-width: 26rem;
}

.faq__aside .btn {
  margin-top: 2rem;
}

/* ==========================================================================
   17 · Final CTA
   ========================================================================== */
.cta {
  color: #fff;
  position: relative;
  isolation: isolate;
}

.cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--red) 0 40%, var(--yellow) 40% 60%, rgba(255, 255, 255, 0.2) 60%);
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.95) 1px, transparent 1.15px),
    linear-gradient(90deg, rgba(255, 0, 34, 0.7) 1px, transparent 1px),
    linear-gradient(rgba(255, 208, 0, 0.55) 1px, transparent 1px);
  background-size: 18px 18px, 72px 72px, 72px 72px;
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, #000 35%, transparent 100%);
}

.cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4.6vw, 2.7rem);
  font-weight: var(--heading-weight);
  line-height: 1.12;
  letter-spacing: var(--heading-tracking);
  color: #fff;
  margin-top: 0.7rem;
  /* max-width: 36rem; */
}

.cta__title-accent {
  color: var(--red);
}

.cta__lede {
  margin-top: 0.9rem;
  color: var(--muted-on-dark);
  max-width: 36rem;
  font-size: 1rem;
}

.cta__actions {
  margin-top: 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
}

.cta__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  background: #25d366;
  color: var(--black);
  font: 700 1rem/1 var(--font-body);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.cta__whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.28);
}

.cta__whatsapp:active {
  transform: translateY(0);
  background: #18a851;
}

.cta__whatsapp:focus-visible {
  outline: 2px solid #25d366;
  outline-offset: 3px;
}

.cta__whatsapp-icon {
  flex-shrink: 0;
}

.cta__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.cta__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  color: var(--muted-on-dark);
  font: 500 0.95rem/1.4 var(--font-body);
  text-decoration: none;
}

.cta__contact:hover,
.cta__contact:focus-visible {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.cta__contact:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.cta__note {
  margin-top: 1.1rem;
  font: 500 0.78rem var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted-on-dark);
}

@media (min-width: 768px) {
  .cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem 1.5rem;
  }

  .cta__whatsapp {
    width: auto;
    min-width: 16rem;
  }

  .cta__contacts {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 1.35rem;
  }
}

/* ==========================================================================
   18 · Footer
   ========================================================================== */
.footer {
  background: var(--black);
  color: #fff;
  border-top: 1px solid var(--line-on-dark);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.footer__brand {
  order: 3;
  min-width: 0;
}

.footer__wordmark {
  display: inline-block;
  color: #fff;
  font: 700 0.95rem/1.2 var(--font-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.footer__wordmark span {
  color: var(--red);
}

.footer__copy {
  margin: 0.3rem 0 0;
  color: var(--muted-on-dark);
  font-size: 0.78rem;
  line-height: 1.4;
}

.footer__legal {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--muted-on-dark);
  font-size: 0.82rem;
  text-decoration: none;
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.footer__legal a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.footer__divider {
  width: 1px;
  height: 0.85rem;
  background: var(--line-on-dark);
}

.footer__social {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__social-link {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--muted-on-dark);
  transition: color var(--dur-1) var(--ease-out);
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  color: var(--red);
}

.footer__social-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .footer__inner {
    display: grid;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }

  .footer__brand,
  .footer__legal,
  .footer__social {
    order: 0;
  }

  .footer__brand {
    justify-self: start;
  }

  .footer__legal {
    justify-self: center;
  }

  .footer__social {
    justify-self: end;
  }

  .footer__copy {
    margin-top: 0.2rem;
  }
}

/* ==========================================================================
   19 · Scroll progress, modal, mobile CTA
   ========================================================================== */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.12s linear;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade-in var(--dur-2) var(--ease-out) both;
}

.modal__panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  max-width: 30rem;
  width: 100%;
  padding: clamp(1.75rem, 5vw, 2.75rem);
  animation: modal-in 0.45s var(--ease-out) both;
}

.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color var(--dur-1), background-color var(--dur-1), color var(--dur-1);
}

.modal__close:hover {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

.modal__close span {
  display: block;
  transform: rotate(45deg);
  font-size: 1.3rem;
  line-height: 1;
}

.modal__title {
  font: 800 clamp(1.6rem, 5vw, 2.2rem)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 1.1rem;
}

.modal__body {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.modal .btn {
  margin-top: 1.75rem;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Sticky mobile CTA (mobile only) */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 0.7rem 0;
  transform: translateY(110%);
  transition: transform var(--dur-2) var(--ease-out);
}

.mobile-cta.is-visible {
  transform: none;
}

.mobile-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mobile-cta .btn {
  flex: 0 0 auto;
  min-height: 2.75rem;
}

.mobile-cta__label {
  font: 700 0.8rem/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}

@media (max-width: 767px) {
  body.has-mobile-cta {
    padding-bottom: 4.5rem;
  }
}

@media (min-width: 768px) {
  .mobile-cta {
    display: none;
  }
}

/* ==========================================================================
   21 · Scroll reveal system
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   22 · Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  body {
    font-family: var(--font-body);
  }
}

/* ==========================================================================
   23 · Progressive enhancement — tablet & up
   ========================================================================== */
@media (min-width: 640px) {
  .cycle {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  :root {
    --header-h: 4.75rem;
  }

  .hero__title {
    max-width: 24ch;
  }

  .hero {
    padding-block: calc(var(--header-h) + clamp(4rem, 9vw, 6.5rem)) clamp(4rem, 9vw, 6.5rem);
  }

  .curriculum__head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3.5rem;
    align-items: end;
  }

  .tech__head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3.5rem;
  }

  .tech__lede {
    padding-bottom: 0.35rem;
  }

  .tech__groups {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }

  .trainer {
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .trainer__aside {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .trainer__figure {
    margin: 0;
  }

  ul.trainer__highlights {
    align-self: center;
    padding: 0 0 0 clamp(1.75rem, 3.5vw, 3rem);
    gap: 1.35rem;
  }

  .trainer__highlight strong {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--content-title-weight);
    line-height: 1.35;
  }

  .trainer__highlight span {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .faq__layout {
    align-items: start;
  }

  .faq__aside {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  /* .cta__title follows the compact CTA clamp. */
}

@media (min-width: 1024px) {
  body.nav-open {
    overflow: auto;
  }
}

@media (min-width: 1024px) {

  .cycle {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
  }

  .acc-item__trigger {
    padding: 1.9rem 0;
  }

  .acc-item__num {
    width: 4rem;
    font-size: 1rem;
  }

  .acc[data-accordion="curriculum"] .acc-item__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }

  .acc[data-accordion="curriculum"] .acc-item__inner > .acc-col {
    padding: 0 0 2.25rem;
    border-radius: 0;
    background: transparent;
  }

  /* Hairline divider between every column after the first, so Understand has
     none and Learn / Build read identically. */
  .acc[data-accordion="curriculum"] .acc-col + .acc-col {
    border-left: 1px solid var(--line);
    padding-left: 1.6rem;
  }

  .tech__groups {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 3rem;
  }

  .trainer__content {
    padding-block: 1rem;
  }
}

@media (min-width: 1280px) {
  .acc[data-accordion="curriculum"] .acc-item__inner {
    gap: 4.5rem;
  }
}

@media (min-width: 1440px) {
  .hero__title {
    font-size: clamp(4rem, 4.6vw, 4.9rem);
    max-width: 24ch;
  }
}

.acc-item__num {
  display: none;
}



.ai-era__capability-mark {
  position: relative;
  display: block;
  flex: 0 0 0.42rem;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.3rem;
  border-radius: 44% 56% 52% 48%;
  background: var(--red);
  box-shadow: 0 0 0 0.18rem rgba(255, 0, 34, 0.07), 0 0 0.45rem rgba(255, 0, 34, 0.16);
  animation: ai-era-bubble 3.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

.ai-era__capability-mark::after {
  position: absolute;
  inset: -0.22rem;
  border: 1px solid rgba(255, 0, 34, 0.24);
  border-radius: 50%;
  content: "";
  animation: ai-era-bubble-ripple 3.8s ease-out infinite;
  pointer-events: none;
}

.ai-era__chip-list li:nth-child(3n + 2) .ai-era__capability-mark,
.ai-era__chip-list li:nth-child(3n + 2) .ai-era__capability-mark::after {
  animation-delay: -1.25s;
}

.ai-era__chip-list li:nth-child(3n + 3) .ai-era__capability-mark,
.ai-era__chip-list li:nth-child(3n + 3) .ai-era__capability-mark::after {
  animation-delay: -2.5s;
}

@keyframes ai-era-bubble {
  0%, 100% { transform: scale(0.94) rotate(-3deg); }
  50% { transform: scale(1.06) rotate(3deg); }
}

@keyframes ai-era-bubble-ripple {
  0%, 100% { opacity: 0.12; transform: scale(0.82); }
  50% { opacity: 0.38; transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-era__capability-mark,
  .ai-era__capability-mark::after {
    animation: none;
    will-change: auto;
  }
}

.ai-era__chip-list li {
  font: 600 0.86rem/1.35 var(--font-body);
}

.ai-era__chip-list li > span:last-child {
  min-width: 0;
}

.ai-era__ownership-list {
  counter-reset: ai-ownership;
}

.ai-era__ownership-list::before {
  top: 1rem;
  bottom: 1.65rem;
  left: 0.95rem;
  width: 1px;
}

.ai-era__ownership-list::after {
  display: none;
}

.ai-era__ownership-list li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-bottom: 1.15rem;
  counter-increment: ai-ownership;
}

.ai-era__ownership-list li::before {
  z-index: 1;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--red);
  border-radius: 50%;
  background: var(--paper-alt);
  color: var(--red);
  content: "0" counter(ai-ownership);
  font: 600 0.62rem/1 var(--font-mono);
}

.ai-era__step-copy {
  padding-top: 0.18rem;
}

.ai-era__item-label {
  display: block;
  font: 700 0.95rem/1.35 var(--font-display);
}

.ai-era__item-description {
  display: block;
  font: 400 0.9rem/1.5 var(--font-body);
}

@media (max-width: 767px) {
  .ai-era__ownership-list::after {
    position: absolute;
    top: 1rem;
    bottom: 2.1rem;
    left: 0.95rem;
    display: block;
    width: 2px;
    border-radius: 1px;
    background: var(--red);
    content: "";
    pointer-events: none;
    transform: scaleY(var(--process-progress, 0));
    transform-origin: top;
    will-change: transform;
  }

  .ai-era__step-copy {
    opacity: 0.62;
    transition: opacity 180ms ease, color 180ms ease;
  }

  .ai-era__ownership-list li.is-complete .ai-era__step-copy {
    opacity: 0.84;
  }

  .ai-era__ownership-list li.is-active .ai-era__step-copy {
    opacity: 1;
  }

  .ai-era__ownership-list li.is-complete::before,
  .ai-era__ownership-list li.is-active::before {
    background: var(--red);
    color: #fff;
  }

  .ai-era__ownership-list li.is-active::before {
    box-shadow: 0 0 0 0.22rem rgba(255, 0, 34, 0.1);
  }

  .ai-era__ownership-list li.is-active .ai-era__item-label {
    color: var(--red);
  }
}

@media (min-width: 640px) {
  .ai-era__lede {
    margin-top: 1.15rem;
    font-size: 1.05rem;
  }

  .ai-era__list-block {
    margin-top: 2.5rem;
  }

  .ai-era__chip-list li {
    max-width: calc(50% - 0.25rem);
    padding-inline: 0.85rem;
  }

  .ai-era__ownership-list li {
    gap: 0.9rem;
    padding-bottom: 1.25rem;
  }

  .ai-era__item-label {
    font-size: 1rem;
  }

  .ai-era__item-description {
    font-size: 0.96rem;
  }
}

@media (min-width: 980px) {
  .ai-era__chip-list li {
    max-width: calc(33.333% - 0.35rem);
  }

  .ai-era__ownership-list {
    margin-top: 2rem;
  }

  .ai-era__ownership-list::before {
    top: 1rem;
    right: 10%;
    bottom: auto;
    left: 10%;
    width: auto;
    height: 1px;
  }

  .ai-era__step-copy {
    gap: 0.45rem;
    padding-top: 0;
  }

}

/* .learn__head {
  max-width: 52rem;
} */

.learn__title {
  margin-top: 1rem;
  color: var(--white);
  font: 800 clamp(2.2rem, 6vw, 4.5rem)/1.02 var(--font-display);
}

.learn__title span, .dark__title span {
  color: var(--yellow);
}

.learn__head .learn__lede {
  max-width: 38rem;
  margin-top: 1.25rem;
}

.learn__split {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}

.learn__share {
  padding: 1.75rem 0 2rem;
}

.learn__share + .learn__share {
  border-top: 1px solid var(--line-on-dark);
}

.learn__share strong {
  display: block;
  color: var(--yellow);
  font: 800 clamp(4rem, 15vw, 8rem)/0.8 var(--font-display);
}

.learn__share--hands-on strong {
  color: var(--red);
}

/* Card title on the Approach band — 800 read heavier than the section
   heading, so it drops to --content-title-weight. */
.learn__share h3 {
  margin-top: 1.1rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: var(--content-title-weight);
  line-height: 1;
  text-transform: uppercase;
}

.learn__share p {
  max-width: 28rem;
  margin-top: 0.55rem;
  color: var(--muted-on-dark);
  font-size: 0.95rem;
}

.learn__cycle {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.learn__cycle-label {
  color: var(--yellow);
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.learn__cycle .cycle {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 1.25rem;
}

.learn__cycle .cycle__item {
  min-height: 0;
  padding: 1.1rem 0;
  border: 0;
  border-top: 1px solid var(--line-on-dark);
  background: transparent;
}

.learn__cycle .cycle__item:last-child {
  border-bottom: 1px solid var(--line-on-dark);
}

.learn__cycle .cycle__name {
  margin-top: 0;
  color: var(--white);
  font-size: 1.2rem;
}

.learn__cycle .cycle__desc {
  margin-top: 0.25rem;
}

@media (min-width: 768px) {

  .learn__split {
    align-items: stretch;
  }

  .learn__share {
    padding: 2.25rem 2rem 2.5rem 0;
  }

  .learn__cycle .cycle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .learn__cycle .cycle__item {
    padding: 1.25rem 1.25rem 1.25rem 0;
    border-top: 2px solid var(--red);
  }

  .learn__cycle .cycle__item + .cycle__item {
    padding-left: 1.25rem;
    border-left: 1px solid var(--line-on-dark);
  }

  .learn__cycle .cycle__item:last-child {
    border-bottom: 0;
  }
}

/* ==========================================================================
   Header, Hero, Learn, Curriculum, Technologies, Trainer, AI Era, FAQ, CTA, Footer
   Refresh layer: later same-selector rules win over earlier ones
   ========================================================================== */

.section {
  padding-block: 4.25rem;
}

/* The one standard section heading. Colour is left to the per-section rules
   below so headings stay readable on light vs dark bands. */

.section-title {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-line-height);
}

/* ==========================================================================
   Header — Transparent Overlay on Hero with Rotated Brand Glyph
   ========================================================================== */

/* Fully transparent header overlaying hero background */

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  height: auto;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffffff;
}

/* Header content container aligned with hero container */

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

/* Brand link: flex container for circular icon + bold brand text */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  text-decoration: none;
  flex-shrink: 0;
}

.brand img{
  width: 200px;
}

/* Round circular logo icon container */

.brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: #ffffff;
  color: #121212;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  flex-shrink: 0;
}

.brand:hover .brand__icon {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(255, 0, 34, 0.3);
}

/* Mu (μ) symbol rotated -30deg while remaining centered inside circle */

.brand__glyph {
  display: inline-block;
  font: 700 1.35rem/1 var(--font-display);
  transform: rotate(-25deg);
  line-height: 1;
  user-select: none;
  margin-top: -6px;
  margin-left: -2px;
}

/* mukunda.tech text next to logo icon with bold page typography */

.brand__text {
  font: 600 1.15rem/1 var(--font-display);
  letter-spacing: 0.04em;
  color: #ffffff;
  white-space: nowrap;
  margin-top: -5px;
}

/* Right-side contact placeholder with clear contrast on dark hero */

.header__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.85);
  font: 600 1rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.header__contact span {
  position: relative;
  top: -4px;
  text-decoration-line: underline;
  text-decoration-color: var(--highlight-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.24em;
}

/* ==========================================================================
   Hero Section — Centered Single-Column Dark Theme with AI-Tech Visuals
   ========================================================================== */

/* Main hero container: dark foundation for the palette-only background layer. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(6.25rem, 11vw, 8.5rem) 0 clamp(4.5rem, 8vw, 6.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--hero-bg-base);
  color: var(--white);
  text-align: center;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 58% at 96% 6%, color-mix(in srgb, var(--hero-bg-glow) 18%, transparent), transparent 72%),
    radial-gradient(ellipse 30% 35% at 4% 96%, color-mix(in srgb, var(--hero-bg-glow) 8%, transparent), transparent 76%),
    var(--hero-bg-base);
}

.hero__background::before {
  content: "";
  position: absolute;
  inset: -10% -6% -10% 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--hero-grid-opacity);
  background-image: radial-gradient(circle, var(--hero-bg-pattern) 1px, transparent 1.15px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 38%, #000 78%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 38%, #000 78%);
}

.hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to bottom, transparent 70%, var(--hero-bg-base) 100%);
}

.hero__network {
  position: absolute;
  top: -8%;
  right: -6%;
  width: min(72rem, 84vw);
  height: 118%;
  z-index: 1;
  color: var(--hero-bg-pattern);
  opacity: var(--hero-pattern-opacity);
  will-change: transform;
  transform: translate3d(0, calc(clamp(calc(var(--hero-scroll-max) * -1), calc(var(--hero-scroll) * var(--hero-layer-a) * 1px), var(--hero-scroll-max))), 0);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 48%, #000 82%),
    radial-gradient(ellipse 78% 82% at 72% 45%, #000 48%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, transparent 48%, #000 82%),
    radial-gradient(ellipse 78% 82% at 72% 45%, #000 48%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero__network-motion {
  animation: hero-drift-a var(--hero-drift-a) var(--ease-in-out) infinite alternate;
  transform-origin: 70% 45%;
}

.hero__network-lines {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.hero__network-circuit {
  stroke-dasharray: 8 7;
  animation: hero-network-flow var(--hero-flow) linear infinite;
}

.hero__network-flow {
  stroke-dasharray: 5 22;
  animation: hero-network-flow calc(var(--hero-flow) * 1.15) linear infinite reverse;
}

.hero__network-nodes {
  fill: currentColor;
}

.hero__network-node--accent {
  fill: var(--hero-bg-glow);
}

.hero__network-node--pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-node-pulse var(--hero-pulse) var(--ease-in-out) infinite;
}

.hero__network-node--pulse:nth-of-type(2) {
  animation-delay: -1.6s;
}

.hero__network-node--pulse:nth-of-type(4) {
  animation-delay: -3.1s;
}

.hero__network-node--pulse:nth-of-type(7) {
  animation-delay: -0.8s;
}

.hero__code {
  position: absolute;
  top: -10%;
  right: -6%;
  width: min(28rem, 28vw);
  height: 120%;
  z-index: 1;
  color: var(--hero-bg-pattern);
  opacity: var(--hero-code-opacity);
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, calc(clamp(calc(var(--hero-scroll-max) * -1), calc(var(--hero-scroll) * var(--hero-layer-b) * 1px), var(--hero-scroll-max))), 0);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, #000 55%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 18%, #000 55%);
}

.hero__code-motion {
  animation: hero-drift-b var(--hero-drift-b) var(--ease-in-out) infinite alternate;
}

.hero__code-fragment {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.hero__code-fragment--accent {
  fill: var(--hero-bg-glow);
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero.is-hero-paused .hero__network-motion,
.hero.is-hero-paused .hero__code-motion,
.hero.is-hero-paused .hero__network-circuit,
.hero.is-hero-paused .hero__network-flow,
.hero.is-hero-paused .hero__network-node--pulse {
  animation-play-state: paused;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--hero-bg-base); /* fallback while the image loads */
}

/* Layer 1: the image (back) */
.hero__background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/images/hero-bg.jpg") no-repeat;
  background-size: cover;
  background-position: 80% center; /* keeps the hands visible */
}

/* Layer 2: your existing gradient (top), semi-transparent */
.hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.2; /* change this to control how strong the gradient is */
  background:
    radial-gradient(ellipse 42% 58% at 96% 6%,
      color-mix(in srgb, var(--hero-bg-glow) 18%, transparent), transparent 72%),
    radial-gradient(ellipse 30% 35% at 4% 96%,
      color-mix(in srgb, var(--hero-bg-glow) 8%, transparent), transparent 76%),
    var(--hero-bg-base);
}

@keyframes hero-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-12px, 10px, 0); }
}

@keyframes hero-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(14px, -8px, 0); }
}

@keyframes hero-node-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes hero-network-flow {
  to { stroke-dashoffset: -96; }
}

@media (max-width: 767px) {
  .hero {
    --hero-layer-a: 0.075;
    --hero-layer-b: 0.15;
    --hero-pattern-opacity: 0.055;
    --hero-code-opacity: 0.07;
    --hero-grid-opacity: 0.03;
  }

  .hero__background {
    background:
      radial-gradient(ellipse 36% 32% at 96% 5%, color-mix(in srgb, var(--hero-bg-glow) 13%, transparent), transparent 74%),
      radial-gradient(ellipse 24% 24% at 2% 98%, color-mix(in srgb, var(--hero-bg-glow) 6%, transparent), transparent 78%),
      var(--hero-bg-base);
  }

  .hero__network {
    top: -4%;
    right: -24%;
    width: 96vw;
    height: 108%;
  }

  .hero__network-circuit,
  .hero__network-flow,
  .hero__code-fragment--aux {
    display: none;
  }

  .hero__code {
    top: -6%;
    right: -12%;
    width: 38vw;
    height: 112%;
  }

  .hero__code-fragment {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .hero {
    --hero-layer-a: 0;
    --hero-layer-b: 0;
    --hero-pattern-opacity: 0.04;
    --hero-code-opacity: 0.055;
  }

  .hero__network {
    right: -32%;
    width: 92vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    --hero-scroll: 0;
    --hero-layer-a: 0;
    --hero-layer-b: 0;
  }

  .hero__network,
  .hero__code {
    will-change: auto;
    transform: none;
  }

  .hero__network-motion,
  .hero__code-motion,
  .hero__network-circuit,
  .hero__network-flow,
  .hero__network-node--pulse {
    animation: none;
  }
}

/* Centered content wrapper with optimal reading width */

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Eyebrow badge: pill style with high contrast and brand accent */

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin: 0 auto;
  padding: 0.42rem 1rem;
  border-radius: 999px;
  background: rgba(255, 0, 34, 0.12);
  border: 1px solid rgba(255, 0, 34, 0.32);
  color: #ff334b;
  font: 600 0.74rem/1.3 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 0, 34, 0.9);
}

/* Hero main headline: clear typography, light text on dark background, contained width */

.hero__title {
  max-width: 20ch;
  margin: 1.5rem auto 0;
  color: #ffffff;
  font: 700 clamp(2.35rem, 5.6vw, 4.35rem)/1.06 var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Headline emphasis with brand red */

.hero__title-emphasis {
  color: var(--red);
  text-shadow: 0 0 32px rgba(255, 0, 34, 0.35);
  text-decoration: none;
}

/* Hero supporting text (lede): clear high-contrast reading text */

.hero__lede {
  max-width: 42rem;
  margin: 1.4rem auto 0;
  color: #c8c8d0;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.hero__lede i {
  font-family: var(--font-mono);
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  text-decoration-line: underline;
  text-decoration-color: #524301;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
}

.highlight-underline {
  position: relative;
  display: inline;
  padding-bottom: 0.3em;
  color: inherit;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.highlight-underline::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.22em;
  left: 0;
  height: 0.7em;
  background-color: var(--highlight-yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C28 3 47 11 70 7 S113 4 137 8 S173 11 197 5' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C28 3 47 11 70 7 S113 4 137 8 S173 11 197 5' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

@media (max-width: 900px) {
  .highlight-underline {
    padding-bottom: 0;
    text-decoration-line: underline;
    text-decoration-color: var(--highlight-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.24em;
  }

  .highlight-underline::after {
    display: none;
  }
}

/* Hero CTA button cluster: centered and properly spaced */

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
  width: 100%;
}

/* Primary CTA button on dark */

.hero__actions .btn--primary {
  border-color: var(--red);
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 4px 22px rgba(255, 0, 34, 0.35);
}

.hero__actions .btn--primary:hover {
  border-color: #d4001c;
  background: #d4001c;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(255, 0, 34, 0.5);
}

/* Ghost / secondary CTA button on dark */

.hero__actions .btn--ghost {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero__actions .btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  transform: translateY(-2px);
}

figure img {
  transition: transform 800ms var(--ease-out);
}

figure:hover img {
  transform: scale(1.025);
}

/* ==========================================================================
   The Skills Section Redesign
   ========================================================================== */

.build-section {
  background: var(--paper-alt);
}

/* 1. Standalone full-width heading row */

.build-section__header {
  max-width: none;
  width: 100%;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Previously overrode the shared heading (600 / 1.15 / -0.02em and a narrower
   size ramp). Now inherits --heading-* like every other section heading. */

.build-section__title {
  max-width: none;
  margin-top: 0.85rem;
  color: var(--ink);
}

/* Accent word inside a section heading — inherits the heading weight so the
   gradient phrase does not read heavier than the rest of the line. */

.build-section__title-accent {
  font-weight: var(--heading-weight);
  color: var(--red);
  background: linear-gradient(135deg, var(--red) 0%, #ff2b4c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Two-column layout row below heading */

.build-section__layout {
  display: grid;
  align-items: start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

@media (min-width: 980px) {
  .build-section__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}

/* 2. Reusable Accordion Component */

.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0;
  width: 100%;
}

.accordion-item {
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--line);
  background: transparent;
  transition: background-color 300ms ease,
              border-color 300ms ease,
              box-shadow 300ms ease;
  overflow: hidden;
}

/* Open state card styling: light background blending softly with section */

.accordion-item.is-open {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(18, 18, 18, 0.08);
  box-shadow: 0 4px 20px -2px rgba(18, 18, 18, 0.04);
}

.accordion-header {
  margin: 0;
  padding: 0;
}

.accordion-button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1.1rem 1.15rem;
  background: transparent;
  border: 0;
  border-radius: 0.75rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  transition: color 250ms ease;
}

.accordion-button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.accordion-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  flex-shrink: 0;
  min-width: 1.75rem;
  transition: color 250ms ease;
}

.accordion-item.is-open .accordion-num {
  color: var(--red);
}

.accordion-title {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-weight: var(--content-title-weight);
  line-height: 1.3;
  color: var(--ink);
  flex: 1;
  letter-spacing: -0.01em;
}

/* Plus/minus toggle indicator */

.accordion-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.05);
  flex-shrink: 0;
  transition: background-color 250ms ease;
}

.accordion-icon::before, .accordion-icon::after {
  content: "";
  position: absolute;
  background-color: var(--ink);
  border-radius: 2px;
  transition: transform 300ms ease, opacity 250ms ease, background-color 250ms ease;
}

.accordion-icon::before {
  width: 10px;
  height: 1.8px;
}

.accordion-icon::after {
  width: 1.8px;
  height: 10px;
}

.accordion-item.is-open .accordion-icon {
  background: rgba(255, 0, 34, 0.08);
}

.accordion-item.is-open .accordion-icon::before {
  background-color: var(--red);
}

.accordion-item.is-open .accordion-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* Smooth height collapse animation via CSS Grid */

.accordion-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.is-open .accordion-collapse {
  grid-template-rows: 1fr;
}

.accordion-body {
  overflow: hidden;
  position: relative;
  padding: 0 1.15rem 1.15rem calc(1.15rem + 1.75rem + 0.85rem);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.accordion-item.is-open .accordion-body {
  opacity: 1;
  transform: translateY(0);
}

.accordion-description {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 28rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* Related watermark icon on the right side, vertically centered */

.accordion-watermark {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%) scale(0.92);
  width: clamp(3.5rem, 6vw, 4.75rem);
  height: clamp(3.5rem, 6vw, 4.75rem);
  color: var(--red);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 350ms ease, transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-watermark svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.accordion-item.is-open .accordion-watermark {
  opacity: 0.13;
  transform: translateY(-50%) scale(1);
}

/* 3. Right column: Tech Stack Logo Tiles */

.build-tools.tech-tiles-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border-left: 0;
  align-self: start;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(0.45rem, 1.2vw, 0.75rem);
  width: 100%;
  max-width: 32rem;
  margin-top: 0;
}

.tech-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(18, 18, 18, 0.08);
  box-shadow: 0 2px 8px rgba(18, 18, 18, 0.02);
  overflow: hidden;
  padding: 0.35rem;
  transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease, background-color 240ms ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.tech-tile:hover {
  background: #ffffff;
  border-color: rgba(255, 0, 34, 0.28);
  box-shadow: 0 4px 16px rgba(18, 18, 18, 0.06);
  transform: translateY(-2px);
}

.tech-tile__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-tile__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  opacity: 0;
  transform: translateY(10px) scale(0.92);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.tech-tile__slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.tech-tile__slide.is-exiting {
  opacity: 0;
  transform: translateY(-10px) scale(0.92);
}

.tech-tile__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.tech-tile__img {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
  transition: transform 240ms ease;
}

.tech-tile:hover .tech-tile__img {
  transform: scale(1.08);
}

.tech-tile__name {
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 1vw, 0.72rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
}

/* Wide text tile spanning bottom-left two cells (Col 1-2, Row 3) — seamless flat text */

.tech-tile--banner {
  grid-column: span 2;
  aspect-ratio: auto;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.55rem, 1.8vw, 1rem) clamp(0.7rem, 2vw, 1.15rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
}

.tech-tile--banner:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.tech-tile__banner-title {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  font-weight: var(--content-title-weight);
  color: var(--red);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tech-tile__banner-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 1.1vw, 0.8rem);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

/* ==========================================================================
   In the AI Era — Single, Cohesive, Mobile-First Section
   ========================================================================== */

/* Light background distinguishes this section from the darker skills section above */

.ai-era {
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background: var(--paper);
  color: var(--ink);
}

.ai-era .container {
  width: 100%;
}

.ai-era__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  width: 100%;
  margin: 0;
}

/* Header & Typography */

.ai-era__header {
  margin: 0;
  max-width: 60rem;
}

.section-head .ai-era__title {
  margin: 0.8rem 0 0;
  color: var(--ink);
}

.ai-era__title-accent {
  color: var(--red);
  background: linear-gradient(135deg, var(--red) 0%, #ff2b4c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-era__lede {
  margin: 1.15rem 0 0;
  color: var(--muted);
  font: 400 clamp(0.95rem, 1.8vw, 1.08rem)/1.65 var(--font-body);
  max-width: 56rem;
}

/* "AI can help with" pills: compact code-tag-style chips */

.ai-era__list-block {
  margin-top: 0;
}

.ai-era__list-title {
  margin: 0 0 0.65rem;
  color: var(--ink);
  font: 600 0.78rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ai-era__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-era__chip-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: auto;
  max-width: 100%;
  padding: 0.22rem 0.48rem;
  border: 1px solid rgba(18, 18, 18, 0.14);
  border-radius: 0.3rem;
  background: var(--paper-alt);
  color: #242426;
  font-family: var(--font-mono);
  font-size: 0.78rem; /* ~12.5px */
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  box-sizing: border-box;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.ai-era__chip-list li:hover {
  border-color: rgba(255, 0, 34, 0.35);
  background: rgba(255, 0, 34, 0.05);
}

.ai-era__chip-list .ai-era__capability-mark {
  flex: 0 0 0.32rem;
  width: 0.32rem;
  height: 0.32rem;
  margin-top: 0;
}

/* Bridging Title & Supporting Sub Text */

.ai-era__ownership-block {
  margin-top: 0.5rem;
}

.ai-era__bridge-title {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: var(--content-title-weight);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.ai-era__bridge-lede {
  margin: 0 0 clamp(1.4rem, 2.6vw, 1.85rem);
  color: var(--muted);
  font: 400 clamp(0.92rem, 1.6vw, 1.02rem)/1.6 var(--font-body);
  max-width: 44rem;
}

/* Rebalanced full-width layout without image */

.ai-era__ownership-layout {
  display: block;
  width: 100%;
  margin: 0;
}

/* Progress indicator: Clean dots/nodes connected by a line (no numbers) */

.ai-era__ownership-list {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Background connecting line */

.ai-era__ownership-list::before {
  position: absolute;
  background: rgba(18, 18, 18, 0.12);
  content: "";
  z-index: 1;
}

/* Animated active fill line */

.ai-era__ownership-list::after {
  position: absolute;
  background: var(--red);
  content: "";
  z-index: 2;
  pointer-events: none;
  border-radius: 1px;
}

/* Mobile & vertical layout (under 980px) */

@media (max-width: 979px) {
  .ai-era__ownership-list {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding-left: 2.35rem;
  }

  .ai-era__ownership-list::before, .ai-era__ownership-list::after {
    left: 0.58rem;
    top: 2rem;
    bottom: 2.85rem;
    width: 2px;
    height: auto;
  }

  .ai-era__ownership-list::after {
    transform: scaleY(var(--process-progress, 0));
    transform-origin: top;
    transition: transform 120ms cubic-bezier(0.2, 0, 0.2, 1);
  }

  /* Card-style item on mobile: subtle off-white tint against the white section */
  .ai-era__ownership-list li {
    position: relative;
    display: block;
    padding: 1.15rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--paper-alt);
    border: 1px solid rgba(18, 18, 18, 0.08);
    transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
  }

  /* Active card subtle highlight */
  .ai-era__ownership-list li.is-active {
    background: #ffffff;
    border-color: rgba(255, 0, 34, 0.28);
    box-shadow: 0 4px 18px -2px rgba(255, 0, 34, 0.08);
  }

  .ai-era__ownership-list li.is-complete {
    background: rgba(18, 18, 18, 0.035);
    border-color: rgba(18, 18, 18, 0.12);
  }

  /* Node circle aligned vertically with item title, blending into the white section */
  .ai-era__ownership-list li::before {
    content: "";
    position: absolute;
    left: -2.35rem;
    top: 1.45rem;
    z-index: 3;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 2px solid rgba(18, 18, 18, 0.22);
    border-radius: 50%;
    background: var(--paper);
    transition: border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
  }

  /* Fill circle with accent color when complete or active */
  .ai-era__ownership-list li.is-complete::before, .ai-era__ownership-list li.is-active::before {
    border-color: var(--red);
    background: var(--red);
    box-shadow: 0 0 0 3px rgba(255, 0, 34, 0.14);
    transform: scale(1.08);
  }

  .ai-era__step-copy {
    opacity: 0.7;
    transition: opacity 220ms ease;
  }

  .ai-era__ownership-list li.is-complete .ai-era__step-copy {
    opacity: 0.88;
  }

  .ai-era__ownership-list li.is-active .ai-era__step-copy {
    opacity: 1;
  }

  .ai-era__ownership-list li.is-active .ai-era__item-label {
    color: var(--red);
  }
}

/* Desktop horizontal flow (980px+) */

@media (min-width: 980px) {
  .ai-era__ownership-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.5rem);
    padding-top: 3.25rem;
    align-items: stretch;
  }

  .ai-era__ownership-list::before, .ai-era__ownership-list::after {
    top: 1.55rem;
    left: calc((100% / 5) / 2);
    right: calc((100% / 5) / 2);
    height: 2px;
    bottom: auto;
    width: auto;
  }

  .ai-era__ownership-list::after {
    transform: scaleX(var(--process-progress, 0));
    transform-origin: left;
    transition: transform 120ms cubic-bezier(0.2, 0, 0.2, 1);
  }

  /* Card-style item on desktop: subtle off-white tint against the white section */
  .ai-era__ownership-list li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.15rem;
    border-radius: 0.25rem;
    background: var(--paper-alt);
    border: 1px solid rgba(18, 18, 18, 0.08);
    text-align: center;
    height: 100%;
    box-sizing: border-box;
    transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
  }

  /* Active card subtle highlight */
  .ai-era__ownership-list li.is-active {
    background: #ffffff;
    border-color: rgba(255, 0, 34, 0.28);
    box-shadow: 0 4px 18px -2px rgba(255, 0, 34, 0.08);
  }

  .ai-era__ownership-list li.is-complete {
    background: rgba(18, 18, 18, 0.035);
    border-color: rgba(18, 18, 18, 0.12);
  }

  /* Center-align card titles and descriptions on desktop */
  .ai-era__ownership-list .ai-era__item-label, .ai-era__ownership-list .ai-era__item-description {
    text-align: center;
  }

  /* Node circle centered above each card, blending into the white section */
  .ai-era__ownership-list li::before {
    content: "";
    position: absolute;
    top: -2.35rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 2px solid rgba(18, 18, 18, 0.22);
    border-radius: 50%;
    background: var(--paper);
    transition: border-color 280ms ease, background-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
  }

  .ai-era__ownership-list li.is-complete::before, .ai-era__ownership-list li.is-active::before {
    border-color: var(--red);
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(255, 0, 34, 0.15);
    transform: translateX(-50%) scale(1.1);
  }

  .ai-era__step-copy {
    opacity: 0.72;
    transition: opacity 220ms ease;
  }

  .ai-era__ownership-list li.is-complete .ai-era__step-copy {
    opacity: 0.9;
  }

  .ai-era__ownership-list li.is-active .ai-era__step-copy {
    opacity: 1;
  }

  .ai-era__ownership-list li.is-active .ai-era__item-label {
    color: var(--red);
  }
}

.ai-era__step-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ai-era__item-label {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--content-title-weight);
  line-height: 1.3;
  transition: color 220ms ease;
}

.ai-era__item-description {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .ai-era__ownership-list::after {
    transform: scale(1) !important;
    transition: none !important;
  }

  .ai-era__ownership-list li::before {
    border-color: var(--red) !important;
    background: var(--red) !important;
    transform: none !important;
    transition: none !important;
  }

  .ai-era__step-copy {
    opacity: 1 !important;
    transition: none !important;
  }
}

.learn {
  padding-block: 5.5rem;
  background: var(--black);
}

/* Approach band heading — inherits --heading-* like every other section. */

.learn__title {
  font-family: var(--font-display);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-line-height);
}

.learn__split {
  margin-top: 2.5rem;
}

.learn__share {
  padding-block: 1.5rem;
}

.learn__share strong {
  font-family: var(--font-display);
  letter-spacing: 0;
}

#curriculum .acc {
  margin-top: 1.25rem;
  border-color: var(--red);
}

#curriculum .acc-item__trigger {
  padding-block: 1.25rem;
}

/* Dark band: the one deliberate dark step in the middle of the page. Carries the
   stack list, which is pure text and badges, so nothing has to be re-blended. */

#technologies {
  background: var(--black);
}

#technologies .section-title, #technologies .tech, #technologies .tech__group-title {
  color: var(--on-dark);
}

#technologies .tech__lede, #technologies .tech__note {
  color: var(--muted-on-dark);
}

/* Eyebrows are 0.72rem uppercase, so on the light bands they must use the
   darker red to clear 4.5:1 (--red alone is only 3.64:1 there). The dark bands
   (approach / technologies / cta) keep brand --red, which passes on #121212. */

#curriculum .eyebrow, #trainer .eyebrow, #faq .eyebrow, #ai-era .eyebrow, #build-skills .eyebrow {
  color: var(--red-text);
}

#curriculum .eyebrow::before, #trainer .eyebrow::before, #faq .eyebrow::before, #ai-era .eyebrow::before, #build-skills .eyebrow::before {
  background: var(--red-text);
}

/* Curriculum accordion: the "Foundations / Architecture / ..." open-state titles
   and the module numbers are also small red text on the tinted band. */

#curriculum .acc-item__trigger:hover .acc-item__title, #curriculum .acc-item.is-open .acc-item__title, #curriculum .acc-item.is-open .acc-item__num, #curriculum .acc-item__trigger:hover .acc-item__num, #curriculum .acc-item.is-open .acc-item__icon::before, #curriculum .acc-item.is-open .acc-item__icon::after {
  color: var(--red-text);
}

/* Rules on the dark stack band need the on-dark hairline. */

#technologies .tech__groups {
  border-top-color: var(--line-on-dark);
}

#technologies .tech__group {
  border-bottom-color: var(--line-on-dark);
}

.tech__head {
  grid-template-columns: 1.1fr 0.8fr;
  gap: 3rem;
}

.tech__groups {
  margin-top: 2.75rem;
  border-top: 1px solid var(--line-strong);
}

.tech__group {
  padding-block: 1.3rem;
}

.tech__badge {
  border-radius: 50%;
}

#development {
  background: var(--paper);
}

#outcomes {
  background: var(--paper-alt);
}

/* White band: the source portrait is an opaque near-white studio shot, so on a
   white band its rectangle edge is invisible with no fade, glow or mask
   needed — the most robust way to satisfy "no visible edge" here. */

#trainer {
  background: var(--paper);
}

/* ==========================================================================
   Section heading colour per band

   Heading metrics come from --heading-* (one shared style). Only the colour
   differs, because headings sit on bands of different lightness:

     light bands  (paper / paper-alt / paper-tint) -> --ink  #121212
     dark bands   (black)                          -> --on-dark #ffffff

   Contrast against each background:
     #121212 on #ffffff    18.7:1     #ffffff on #121212   18.7:1
     #121212 on #f5f5f1    17.6:1
     #121212 on #e9e7df    15.6:1
   All far above the 3:1 large-text threshold. Accent words use --red-text
   (#cc031d) on light bands and --red (#ff0022) on the dark bands.
   ========================================================================== */

#build-skills .section-title, #ai-era .section-title, #curriculum .section-title, #trainer .section-title, #faq .section-title {
  color: var(--ink);
}

#technologies .section-title, .learn__title, .cta__title {
  color: var(--on-dark);
}

/* The yellow marker keeps a fixed background, so on the dark bands the
   highlighted run must switch to ink: white on #ffd000 measures only 1.47:1,
   while ink on #ffd000 measures 12.7:1. Light bands already use ink, so the
   highlighted phrase stays legible on every background. */

.cta__title .hl, .cta__title-accent {
  color: var(--red);
  -webkit-text-fill-color: currentColor;
}

.trainer {
  gap: clamp(2rem, 6vw, 5rem);
}

.trainer__figure {
  max-width: 26rem;
}

.trainer__img {
  aspect-ratio: 4 / 5;
}

/* Deeper tint: the last light step before the near-black CTA band, so the
   two never read as one continuous surface. */

#faq {
  background: var(--paper-tint);
}

.faq__layout .acc {
  border-top-color: var(--red);
}

/* FAQ accordions share the compact card treatment used by The Skills. */

.acc--faq {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-top: 0;
}

.acc--faq .acc-item {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-bottom-color: var(--line-mid);
  border-radius: 0.75rem;
  background: transparent;
  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.acc--faq .acc-item.is-open {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(18, 18, 18, 0.08);
  box-shadow: 0 4px 20px -2px rgba(18, 18, 18, 0.04);
}

/* On the --paper-tint band the open card needs a stronger lift than on
   --paper-alt: 0.88 white was too close to the surface to read as a card. */

#faq .acc--faq .acc-item.is-open {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(18, 18, 18, 0.1);
  box-shadow: 0 4px 20px -2px rgba(18, 18, 18, 0.05);
}

.acc--faq .acc-item__trigger {
  position: relative;
  z-index: 2;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  font: inherit;
  color: var(--ink);
  appearance: none;
  transition: color 250ms ease;
}

.acc--faq .acc-item__trigger:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.acc--faq .acc-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  font-weight: var(--content-title-weight);
  line-height: 1.3;
  letter-spacing: 0;
}

.acc--faq .acc-item__icon {
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.05);
  transition: background-color 250ms ease;
}

.acc--faq .acc-item__icon::before, .acc--faq .acc-item__icon::after {
  background-color: var(--ink);
  border-radius: 2px;
  transition: transform 300ms ease, opacity 250ms ease, background-color 250ms ease;
}

.acc--faq .acc-item__icon::before {
  width: 10px;
  height: 1.8px;
}

.acc--faq .acc-item__icon::after {
  width: 1.8px;
  height: 10px;
}

.acc--faq .acc-item.is-open .acc-item__icon {
  background: rgba(255, 0, 34, 0.08);
}

.acc--faq .acc-item.is-open .acc-item__icon::before {
  background-color: var(--red);
}

.acc--faq .acc-item.is-open .acc-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

.acc--faq .acc-item__panel {
  transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.acc--faq .acc-body {
  padding: 0 1.15rem 1.15rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.acc--faq .acc-item.is-open .acc-body {
  opacity: 1;
  transform: translateY(0);
}

.cta {
  min-height: 0;
  overflow: hidden;
  background: var(--black);
  padding-block: clamp(2.4rem, 5vw, 3.5rem);
}

.cta .container {
  position: relative;
  z-index: 1;
}

.footer {
  padding: 1.1rem 0;
}

@media (min-width: 768px) {
  .section {
    padding-block: 5.25rem;
  }

  /* .section-title follows the shared --heading-size clamp at all breakpoints. */

  .learn__split {
    grid-template-columns: 1fr 3fr;
    gap: 1rem;
  }

  .learn__share + .learn__share {
    border-top: 0;
    border-left: 1px solid var(--line-on-dark);
    padding-left: 1.5rem;
  }

  .trainer {
    grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.25fr);
  }

  .faq__layout {
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
    gap: 3rem;
  }

  .footer__inner {
    grid-template-columns: 1fr auto 1fr;
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: 6rem;
  }

  /* .section-title follows the shared --heading-size clamp at all breakpoints. */

  .curriculum__head {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 767px) {
  .header__inner {
    min-height: 3.75rem;
    gap: 0.5rem;
  }

  .brand {
    gap: 0.5rem;
  }

  .brand__icon {
    width: 2.05rem;
    height: 2.05rem;
  }

  .brand__glyph {
    font-size: 1.15rem;
  }

  .brand__text {
    font-size: 0.95rem;
  }

  .header__contact {
    font-size: 1rem;
    gap: 0.35rem;
    letter-spacing: 0.04em;
  }

  .hero {
    padding-block: 5.25rem 3.75rem;
  }

  .hero__copy {
    padding: 0 var(--gutter);
  }

  .hero .eyebrow {
    font-size: 0.68rem;
    padding: 0.35rem 0.85rem;
  }

  .hero__title {
    max-width: 18ch;
    margin-top: 1.15rem;
    font-size: 2.25rem;
    line-height: 1.1;
  }

  .hero__lede {
    margin-top: 1.1rem;
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .hero__actions {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.75rem;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 20rem;
    min-height: 2.85rem;
    font-size: 0.88rem;
    justify-content: center;
  }

  /* .section-title / .learn__title follow the shared --heading-size clamp, so no
     breakpoint font-size overrides are needed here. */

  /* Both follow the shared --heading-size clamp at every breakpoint. */

  .build-tools.tech-tiles-panel {
    padding: 0;
    border-top: 0;
    border-left: 0;
  }

  /* .learn__title follows the shared --heading-size clamp. */

  /* .curriculum__head follows its base single-column rule below 768px. */

  /* .curriculum__lede follows its base rule; .curriculum__visual is gone. */

  .tech__head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  figure img {
    transition: none;
  }
}

/*  ==========================================================================
   Registration modal
   ==========================================================================  */

body.registration-modal-open {
  overflow: hidden;
}

.registration-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  visibility: hidden;
  pointer-events: none;
}

.registration-modal[hidden] {
  display: none !important;
}

.registration-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.registration-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.72);
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
}

.registration-modal.is-open .registration-modal__backdrop {
  opacity: 1;
}

.registration-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--paper);
  color: var(--ink-body);
  overflow: hidden;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}

.registration-modal.is-open .registration-modal__dialog {
  opacity: 1;
  transform: none;
}

.registration-modal__shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.registration-modal__intro {
  display: none;
}

.registration-modal__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--paper);
}

.registration-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.85rem 1rem;
  align-items: start;
  padding: 1.15rem 1.25rem 1rem;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
  padding-top: max(1.15rem, env(safe-area-inset-top));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.registration-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 5.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.registration-modal__lede {
  margin: 0.4rem 0 0;
  max-width: 36rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.registration-modal__close {
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.25rem -0.35rem 0 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  flex-shrink: 0;
  transition: background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.registration-modal__close:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.registration-modal__close:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.registration-modal__close-icon {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  position: relative;
}

.registration-modal__close-icon::before,
.registration-modal__close-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}

.registration-modal__close-icon::before {
  transform: rotate(45deg);
}

.registration-modal__close-icon::after {
  transform: rotate(-45deg);
}

.registration-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.35rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

.registration-modal__form {
  display: grid;
  gap: 1.15rem;
  position: relative;
}

.registration-modal__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  pointer-events: none;
}

.registration-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.registration-modal__field--full {
  grid-column: 1 / -1;
}

.registration-modal__label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.registration-modal__required {
  color: var(--red-text);
}

.registration-modal__input,
.registration-modal__select,
.registration-modal__textarea {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line-mid);
  background: var(--white);
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.registration-modal__textarea {
  min-height: 7.25rem;
  resize: vertical;
  line-height: 1.55;
}

.registration-modal__select {
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.75rem) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.registration-modal__input::placeholder,
.registration-modal__textarea::placeholder {
  color: var(--muted-2);
}

.registration-modal__input:hover,
.registration-modal__select:hover,
.registration-modal__textarea:hover {
  border-color: #b8b5ab;
}

.registration-modal__input:focus,
.registration-modal__select:focus,
.registration-modal__textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.registration-modal__input[aria-invalid="true"],
.registration-modal__select[aria-invalid="true"],
.registration-modal__textarea[aria-invalid="true"] {
  border-color: var(--red-text);
  box-shadow: 0 0 0 1px var(--red-text);
}

.registration-modal__error {
  min-height: 1.1em;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--red-text);
}

.registration-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.15rem;
}

.registration-modal__checkbox {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--red);
}

.registration-modal__checkbox:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.registration-modal__consent-label {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-body);
}

.registration-modal__terms-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  font-weight: 600;
}

.registration-modal__terms-link:hover {
  color: var(--red-text);
}

.registration-modal__terms-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.registration-modal__actions {
  margin-top: 0.35rem;
}

.registration-modal__submit {
  width: 100%;
  min-height: 3.25rem;
}

.registration-modal__submit[disabled] {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}

.registration-modal__submit:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.registration-modal__success {
  display: none;
  max-width: 34rem;
  padding-top: 0.35rem;
}

.registration-modal__success-kicker {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--red-text);
}

.registration-modal__success-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.registration-modal__success-copy {
  margin: 0.9rem 0 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
}

.registration-modal__success .registration-modal__actions {
  margin-top: 1.75rem;
}

.registration-modal.is-success .registration-modal__form {
  display: none;
}

.registration-modal.is-success .registration-modal__success {
  display: block;
}

.registration-modal.is-success .registration-modal__lede {
  display: none;
}

@media (min-width: 768px) {
  .registration-modal {
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    overflow: hidden;
  }

  .registration-modal__dialog {
    width: min(100%, 68rem);
    height: auto;
    max-height: none;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    box-shadow: 0 18px 48px rgba(18, 18, 18, 0.18);
    transform: translateY(10px);
  }

  .registration-modal__shell {
    flex-direction: row;
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  .registration-modal__intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35%;
    flex: 0 0 35%;
    padding: 2.1rem 1.7rem 1.8rem;
    background: var(--black);
    color: var(--on-dark);
    position: relative;
    overflow: hidden;
  }

  .registration-modal__intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.55;
    pointer-events: none;
  }

  .registration-modal__intro::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--yellow);
  }

  .registration-modal__intro-copy,
  .registration-modal__visual {
    position: relative;
    z-index: 1;
  }

  .registration-modal__eyebrow {
    margin: 0 0 1.15rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yellow);
  }

  .registration-modal__intro-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--white);
  }

  .registration-modal__intro-title span {
    color: var(--red);
  }

  .registration-modal__intro-text {
    margin: 1.15rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--muted-on-dark);
  }

  .registration-modal__visual {
    margin-top: 2.25rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.38);
  }

  .registration-modal__visual-line {
    display: block;
    white-space: nowrap;
  }

  .registration-modal__visual-line--accent {
    color: rgba(255, 208, 0, 0.72);
  }

  .registration-modal__main {
    width: 65%;
    flex: 1 1 65%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
  }

  .registration-modal__header {
    position: static;
    padding: 1.5rem 1.75rem 1.1rem;
  }

  .registration-modal__title {
    font-size: clamp(1.45rem, 2vw, 1.8rem);
  }

  .registration-modal__lede {
    font-size: 0.95rem;
  }

  .registration-modal__body {
    flex: 0 0 auto;
    overflow: visible;
    padding: 0.35rem 1.75rem 1.75rem;
  }

  .registration-modal__form {
    grid-template-columns: 1fr;
    gap: 1.05rem 1.1rem;
  }

  .registration-modal__submit {
    width: auto;
    min-width: 16.5rem;
  }
}

@media (min-width: 960px) {
  .registration-modal__intro {
    padding: 2.4rem 2rem 2rem;
  }

  .registration-modal__header {
    padding: 1.75rem 2.1rem 1.2rem;
  }

  .registration-modal__body {
    padding: 0.25rem 2.1rem 2.1rem;
  }

  .registration-modal__form {
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem 1.25rem;
  }

  .registration-modal__field--experience {
    grid-column: 1 / 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .registration-modal__backdrop,
  .registration-modal__dialog {
    transition: none;
  }

  .registration-modal__dialog {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile-only popup refinements. Desktop (768px+) stays unchanged.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .registration-modal {
    overflow-x: hidden;
  }

  .registration-modal__dialog {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background-color: var(--paper);
  }

  .registration-modal__main {
    position: relative;
    isolation: isolate;
    background-color: var(--paper);
  }

  .registration-modal__main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(rgba(18, 18, 18, 0.9) 1px, transparent 1.2px),
      linear-gradient(90deg, rgba(255, 0, 34, 0.55) 1px, transparent 1px),
      linear-gradient(rgba(255, 208, 0, 0.45) 1px, transparent 1px);
    background-size: 16px 16px, 64px 64px, 64px 64px;
    background-position: 0 0, 0 0, 0 0;
    opacity: 0.06;
  }

  .registration-modal__header,
  .registration-modal__body {
    position: relative;
    z-index: 1;
  }

  .registration-modal__header {
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.7rem 1rem 0.65rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(0.7rem, env(safe-area-inset-top));
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: inset 0 3px 0 0 var(--red);
    grid-template-columns: minmax(0, 1fr) 2.75rem;
  }

  .registration-modal__header > :first-child {
    min-width: 0;
  }

  .registration-modal__title {
    font-size: 1.08rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }

  .registration-modal__lede {
    margin-top: 0.12rem;
    width: 100%;
    max-width: 100%;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .registration-modal__close {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    border-color: var(--red);
    color: var(--red);
    background: var(--white);
  }

  .registration-modal__close:hover,
  .registration-modal__close:active {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
  }

  .registration-modal__body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 0.5rem;
    scroll-padding-bottom: 5rem;
    padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .registration-modal__form {
    gap: 0.85rem;
  }

  .registration-modal__field {
    gap: 0.35rem;
  }

  .registration-modal__label {
    font-size: 0.8rem;
    color: var(--ink);
  }

  .registration-modal__input,
  .registration-modal__select,
  .registration-modal__textarea {
    min-height: 2.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #b8b5ab;
    background-color: var(--white);
    color: var(--ink);
    box-shadow: none;
  }

  .registration-modal__select {
    background-color: var(--white);
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
      linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.75rem) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }

  .registration-modal__textarea {
    min-height: 6.25rem;
  }

  .registration-modal__input::placeholder,
  .registration-modal__textarea::placeholder {
    color: var(--muted);
    opacity: 1;
  }

  .registration-modal__input:focus,
  .registration-modal__select:focus,
  .registration-modal__textarea:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
    scroll-margin-top: 0.75rem;
    scroll-margin-bottom: 8rem;
  }

  .registration-modal__error {
    min-height: 0;
    color: var(--red-text);
  }

  .registration-modal__consent-label {
    color: var(--ink-body);
  }

  .registration-modal__submit {
    min-height: 2.85rem;
  }
}

/* ============================================================
   MUKUNDA.TECH HOMEPAGE
   index.html — Homepage-specific styles
   Scoped under .site-home so index-course.html is unaffected.
   ============================================================ */

/* Home shell */
.site-home .header a:focus-visible,
.site-home .hero a:focus-visible,
.site-home .home-programs a:focus-visible,
.site-home .footer a:focus-visible {
  outline: var(--focus-ring-dark);
  outline-offset: 3px;
}

.site-home .home-programs a:focus-visible {
  outline: 2px solid var(--red);
}

/* Home hero */
.site-home .hero {
  text-align: left;
  padding-block: clamp(6.5rem, 12vw, 8.75rem) clamp(3.5rem, 8vw, 6rem);
}

.site-home .hero::before,
.site-home .hero::after {
  content: none;
  display: none;
}

.site-home .hero > .container {
  position: relative;
  z-index: 1;
}

/* Home programs */
.text-color-primary {
  color: var(--red);
}

.site-home .home-programs__list {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.site-home .home-program {
  display: grid;
  gap: 1.15rem 2rem;
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line-strong);
}

.site-home .home-program + .home-program {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}

.site-home .home-program__index {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.site-home .home-program__num {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 10vw, 5.25rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--red);
}

.site-home .home-program__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-line-height);
}

.site-home .home-program__copy {
  max-width: 38rem;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.site-home .home-program__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0;
  margin: 1.35rem 0 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.site-home .home-program__meta span:not(:last-child)::after {
  content: "·";
  margin-inline: 0.7rem;
  color: var(--red);
}

/* Home responsive */
@media (max-width: 479.98px) {
  .site-home .header__contact {
    font-size: 0.78rem;
    letter-spacing: 0.03em;
  }

  .site-home .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .site-home .hero__actions .btn {
    width: 100%;
  }

  .site-home .home-program__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .site-home .home-program__meta span:not(:last-child)::after {
    content: none;
  }
}

@media (min-width: 768px) {
  .site-home .home-program {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: start;
    column-gap: 2.5rem;
  }
}

/* Home animations */
@media (prefers-reduced-motion: reduce) {
  .site-home .home-program {
    transition: none;
  }
}

/* ============================================================
   MUKUNDA.TECH LEGAL PAGE
   legal.html — Privacy Policy & Terms
   ------------------------------------------------------------
   Every rule in this block is scoped to the `site-legal` body
   class, so it can only ever apply to legal.html. No existing
   selector, custom property or breakpoint is redefined here —
   index.html, index-course.html and all course pages keep the
   exact computed styles they had before this block was added.
   ============================================================ */

/* Legal page shell */
.site-legal {
  background: var(--paper);
}

/* The shared .header is absolutely positioned and white-on-dark, so the legal
   hero is a dark band with enough top padding to clear it — the same treatment
   index.html and index-course.html use. */
.site-legal .legal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 13vw, 9.5rem) clamp(3.25rem, 6vw, 4.75rem);
  border-bottom: 1px solid var(--line-on-dark);
  background:
    radial-gradient(ellipse 46% 64% at 96% 4%, color-mix(in srgb, var(--red) 18%, transparent), transparent 72%),
    radial-gradient(ellipse 34% 42% at 4% 98%, color-mix(in srgb, var(--red) 8%, transparent), transparent 76%),
    var(--black);
  color: var(--white);
}

.site-legal .legal-hero::before {
  content: "";
  position: absolute;
  inset: -10% -6% -10% 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--hero-grid-opacity);
  background-image: radial-gradient(circle, var(--hero-bg-pattern) 1px, transparent 1.15px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 42%, #000 84%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 42%, #000 84%);
}

.site-legal .legal-hero__inner {
  position: relative;
  max-width: 52rem;
}

.site-legal .legal-hero .eyebrow {
  color: var(--yellow);
}

.site-legal .legal-hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 0, 34, 0.9);
}

.site-legal .legal-hero__title {
  max-width: 18ch;
  margin: 1.15rem 0 0;
  color: #ffffff;
  font: 700 clamp(2.15rem, 5.2vw, 3.6rem)/1.06 var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.site-legal .legal-hero__accent {
  color: var(--red);
  text-shadow: 0 0 32px rgba(255, 0, 34, 0.35);
}

.site-legal .legal-hero__lede {
  max-width: 42rem;
  margin: 1.35rem 0 0;
  color: #c8c8d0;
  font-size: clamp(1rem, 2.1vw, 1.16rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.site-legal .legal-hero__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin: 1.75rem 0 0;
  padding: 0.7rem 1rem;
  border-left: 2px solid var(--yellow);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

.site-legal .legal-hero__meta-key {
  color: var(--muted-on-dark);
}

.site-legal .legal-hero__meta-value {
  color: var(--white);
  font-weight: 600;
}

/* Legal navigation */
.site-legal .legal-nav {
  border-bottom: 1px solid var(--line);
  background: var(--paper-alt);
}

.site-legal .legal-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.5rem;
  padding-block: 1.1rem;
}

.site-legal .legal-nav__label {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.4;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.site-legal .legal-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ghost-style chip — mirrors .btn--ghost so the control reads as part of the
   existing button language rather than a new component. */
.site-legal .legal-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 1.05rem;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: 600 0.88rem/1.25 var(--font-body);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.site-legal .legal-nav__link:hover {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

.site-legal .legal-nav__link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Highlight driven by the shared scrollspy in js/main.js ([data-nav-link]). */
.site-legal .legal-nav__link.is-active {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, transparent);
  color: var(--red-text);
}

.site-legal .legal-nav__arrow {
  transition: transform var(--dur-2) var(--ease-out);
}

.site-legal .legal-nav__link:hover .legal-nav__arrow {
  transform: translateY(3px);
}

/* Legal content */
.site-legal .legal-section {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--paper);
}

.site-legal .legal-section + .legal-section {
  border-top: 1px solid var(--line);
}

.site-legal .legal-section__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.site-legal .legal-section__header {
  min-width: 0;
}

/* --red-text (5.34:1 on white) instead of --red (3.64:1) for small label text. */
.site-legal .legal-section__header .eyebrow {
  color: var(--red-text);
}

.site-legal .legal-section__title {
  margin: 1rem 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4.2vw, 2.9rem);
  font-weight: var(--heading-weight);
  line-height: 1.08;
  letter-spacing: var(--heading-tracking);
  text-wrap: balance;
}

.site-legal .legal-section__meta {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-legal .legal-section__jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.35rem;
  color: var(--red-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-1) var(--ease-out);
}

.site-legal .legal-section__jump:hover {
  color: var(--ink);
}

.site-legal .legal-section__jump:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* Reading column — comfortable measure regardless of viewport width. */
.site-legal .legal-prose {
  min-width: 0;
  max-width: 68ch;
  overflow-wrap: break-word;
}

/* Legal typography */

/* Document preamble (Terms intro) — slightly larger so the opening statement
   reads as a lead-in, with a brand-yellow rule echoing .note. */
.site-legal .legal-intro {
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
  padding-left: 1.1rem;
  border-left: 2px solid var(--yellow);
}

.site-legal .legal-intro p {
  font-size: 1.04em;
  color: var(--ink);
}

.site-legal .legal-prose p {
  margin: 0;
  color: var(--ink-body);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.06rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.site-legal .legal-prose p + p {
  margin-top: 1rem;
}

.site-legal .legal-clause + .legal-clause,
.site-legal .legal-intro + .legal-clause {
  margin-top: clamp(2rem, 3.6vw, 2.75rem);
}

.site-legal .legal-clause__title {
  position: relative;
  margin: 0 0 0.9rem;
  padding-left: 1.05rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1rem + 0.75vw, 1.48rem);
  font-weight: var(--content-title-weight);
  line-height: 1.25;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Red square marker — the same motif the .eyebrow label uses. */
.site-legal .legal-clause__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--red);
}

.site-legal .legal-prose a {
  color: var(--red-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--dur-1) var(--ease-out);
}

.site-legal .legal-prose a:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

.site-legal .legal-prose a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.site-legal .legal-prose .legal-contact {
  margin-top: 1.25rem;
}

.site-legal .legal-contact a {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.12rem);
  letter-spacing: -0.01em;
}

/* Legal lists */
.site-legal .legal-list {
  display: grid;
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.site-legal .legal-prose .legal-list + p {
  margin-top: 1.1rem;
}

.site-legal .legal-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-body);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.06rem);
  line-height: 1.7;
}

.site-legal .legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--red);
}

/* Legal responsive styles */

/* ≥ 768px — the local navigation sits on one row with its label. */
@media (min-width: 768px) {
  .site-legal .legal-nav__inner {
    padding-block: 1.25rem;
  }
}

/* ≥ 1024px — document header becomes a sticky sidebar column, the clauses keep
   their own readable measure. Mirrors the two-column rhythm of the course page. */
@media (min-width: 1024px) {
  .site-legal .legal-section__layout {
    grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .site-legal .legal-section__header {
    position: sticky;
    top: 1.75rem;
    align-self: start;
  }

  .site-legal .legal-hero__inner {
    max-width: 56rem;
  }
}

/* Mobile — keep the navigation compact and let the chips wrap naturally
   instead of shrinking their labels. */
@media (max-width: 767.98px) {
  .site-legal .legal-hero {
    padding-block: 6.5rem 2.75rem;
  }

  .site-legal .legal-hero__title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .site-legal .legal-hero__meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.7rem;
  }

  .site-legal .legal-nav__inner {
    align-items: flex-start;
    gap: 0.65rem;
    padding-block: 0.95rem;
  }

  .site-legal .legal-nav__label,
  .site-legal .legal-nav__list {
    width: 100%;
  }

  /* Chips keep their natural width and wrap onto their own row when they do not
     fit — never shrink the label, never overflow the gutter. */
  .site-legal .legal-nav__link {
    max-width: 100%;
  }

  .site-legal .legal-section__layout {
    gap: 1.5rem;
  }

  .site-legal .legal-intro {
    padding-left: 0.9rem;
  }
}

/* Very narrow phones (320px) — let each chip own its own row. */
@media (max-width: 359.98px) {
  .site-legal .legal-nav__link {
    padding-inline: 0.85rem;
    font-size: 0.85rem;
  }

  .site-legal .legal-clause__title {
    padding-left: 0.95rem;
  }

  .site-legal .legal-list li {
    padding-left: 1.25rem;
  }
}

/* Legal reduced motion — no transforms, no transitions on legal controls. */
@media (prefers-reduced-motion: reduce) {
  .site-legal .legal-nav__link,
  .site-legal .legal-nav__arrow,
  .site-legal .legal-section__jump,
  .site-legal .legal-prose a {
    transition: none;
  }

  .site-legal .legal-nav__link:hover .legal-nav__arrow {
    transform: none;
  }
}

/* Mobile first: everything stacked */
.home-programs__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.home-programs__header .section-title,
.home-programs__header .section-lede {
  margin: 0;
}

/* Desktop: 2 columns */
@media (min-width: 992px) {
  .home-programs__header {
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    row-gap: 16px;
    align-items: end; /* use "start" to align both to the top */
  }

  /* Eyebrow sits above, spanning both columns */
  .home-programs__header .eyebrow {
    grid-column: 1 / -1;
  }

  .home-programs__header .section-title {
    grid-column: 1;
  }

  .home-programs__header .section-lede {
    grid-column: 2;
    max-width: 52ch; /* keeps line length readable */
  }
}

@media (min-width: 992px) {
  .home-programs__header {
    grid-template-columns: max-content minmax(0, 1fr); /* h2 = its text width, p = remaining space */
    column-gap: 48px; /* space between h2 text and paragraph */
    row-gap: 16px;
    align-items: end; /* or "start" to align tops */
  }

  .home-programs__header .eyebrow {
    grid-column: 1 / -1;
  }

  .home-programs__header .section-title {
    grid-column: 1;
  }

  .home-programs__header .section-lede {
    grid-column: 2;
    max-width: 52ch; /* optional: remove for full remaining width */
  }
}