/* Intro (first visit per session) */
.intro { display: none; }
html.js.has-intro .intro {
  position: fixed; inset: 0; z-index: var(--z-transition);
  display: grid; place-content: center; justify-items: center; gap: var(--space-5);
  background: var(--teal-950); color: var(--on-dark);
}
.intro__star { width: 48px; height: 48px; color: var(--gold-500); transform: scale(0); }
.intro__wordmark { display: flex; gap: .3em; overflow: hidden; font: 400 clamp(2.5rem, 6vw, 4.5rem) / 1.1 var(--font-display); }
.intro__word { display: block; transform: translateY(110%); }

/* Hero (v2): teal-950, arched portrait with slow gold rings, its own gold path, and a gold wave into the ivory body */
.hero {
  --wave-h: clamp(56px, 9vw, 140px);
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding-block: calc(var(--header-h) + var(--space-8)) calc(var(--wave-h) + var(--space-9));
  overflow: clip;
}
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.hero__copy { grid-column: 1 / span 7; display: grid; gap: var(--space-6); justify-items: start; }
.hero__title { max-width: 12ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-7); margin: var(--space-3) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--line-dark); }
.hero__stats div { display: flex; flex-direction: column-reverse; gap: var(--space-2); }
.hero__stats dt { font-size: var(--fs-small); color: var(--on-dark-muted); }
.hero__stats dd { display: flex; align-items: center; gap: var(--space-3); margin: 0; font: 400 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) / 1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.hero__stat-icon { width: 24px; height: 24px; flex: none; }

.hero__art { grid-column: 8 / -1; position: relative; display: grid; place-items: center; aspect-ratio: 5 / 6; }
/* One slow turn that eases to rest (never an endless loop); landing.js pauses it while the hero is off-screen */
.hero__rings { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; animation: hero-rings 60s ease-out 1; }
.hero.is-offscreen .hero__rings { animation-play-state: paused; }
.hero__ring { fill: none; stroke: var(--gold-500); stroke-width: 1; opacity: .3; }
.hero__ring--dashed { stroke-dasharray: 2 9; opacity: .45; }
.hero__ring-dot { fill: var(--gold-500); }
@keyframes hero-rings { to { transform: rotate(1turn); } }
.hero__portrait { z-index: 1; width: 72%; }
.hero__path { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero__route { fill: none; stroke: var(--gold-500); stroke-width: 2.5; stroke-linecap: round; }
.hero__star { color: var(--gold-500); }
/* HTML, not SVG text, so it keeps the mono size at every width instead of shrinking with the art. Placed where the
   route's 500 x 600 viewBox puts it (the art box has the same 5:6 ratio): right edge at x 436, centred on the goal star (y 44). */
.hero__label {
  position: absolute; z-index: 2; right: 12.8%; top: 7.333%; translate: 0 -50%;
  color: var(--on-dark-muted); white-space: nowrap; pointer-events: none;
}
.hero__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: var(--wave-h); }
.hero__wave-fill { fill: var(--paper); }
.hero__wave-line { fill: none; stroke: var(--gold-500); stroke-width: 2; stroke-linecap: round; }
@media (max-width: 767px) { .hero__wave-line { stroke-width: 5; } }

/* Portrait placeholder (hero arch, instructor card) until the client supplies real photographs */
.portrait { --curtain: var(--teal-950); position: relative; display: grid; place-items: end center; overflow: hidden; background: var(--teal-900); }
.portrait--arch {
  aspect-ratio: 3 / 4; border: 1px solid var(--gold-500);
  /* fully rounded top on a 3:4 box: 50% of the width horizontally is 37.5% of the height vertically */
  border-radius: 50% 50% var(--radius-card) var(--radius-card) / 37.5% 37.5% var(--radius-card) var(--radius-card);
}
.portrait--card { aspect-ratio: 4 / 5; border-radius: var(--radius-card); }
.portrait__silhouette { width: 76%; height: auto; fill: var(--teal-700); }
.portrait__note {
  position: absolute; left: 50%; top: var(--space-6); z-index: 1; translate: -50% 0; /* top: the gold route and path run along the lower edge */
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--teal-950); color: var(--on-dark-muted); text-align: center;
  /* never wider than the portrait, so it is not clipped and never reaches the path beside it */
  width: max-content; max-width: calc(100% - var(--space-6));
}
/* Hero: below the arch curve, where the full width is available */
.hero .portrait__note { top: 30%; padding-inline: var(--space-3); max-width: calc(100% - var(--space-4)); }

@media (prefers-reduced-motion: reduce) { .hero__rings { animation: none; } }
@media (max-width: 1023px) {
  .hero__copy { grid-column: 1 / -1; }
  .hero__art { grid-column: 1 / -1; justify-self: center; width: min(100%, 440px); margin-top: var(--space-6); }
}
@media (max-width: 767px) {
  .hero { min-height: auto; }
  .hero__label { display: none; }
  .hero__stats { gap: var(--space-6); }
}

/* Journey path: decorative gold route through the page */
.journey { position: relative; }
.journey__path {
  position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none;
  left: max(4px, calc((100% - var(--container)) / 2 - 40px)); width: 24px;
}
.journey__svg { position: absolute; top: 0; left: 0; overflow: visible; }
.journey__line { fill: none; stroke: var(--gold-500); stroke-width: 1.5; stroke-linecap: round; }
.journey__star { position: absolute; top: 0; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; color: var(--gold-500); }
@media (max-width: 1023px) { .journey__path { width: 16px; } }
@media (max-width: 767px) { .journey__path { left: 2px; width: 8px; } .journey__star { width: 12px; height: 12px; margin: -6px 0 0 -6px; } }

/* Curriculum: pinned track on desktop, swipe track below 1024px, static grid with reduced motion or no JS */
.curriculum__meta { margin: calc(-1 * var(--space-6)) 0 var(--space-7); color: var(--text-muted); }
.curriculum__viewport {
  overflow: hidden;
  /* Cards leave the view at the content column's left edge (the track's start padding), so they never pass under the
     journey path, whose lane always ends left of that edge. The negative top and bottom insets keep the focus ring. */
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
  --fade: 8px; /* soft edge just left of the content column, inside the path lane clearance (the lane ends 16px left of it) */
  clip-path: inset(-8px 0 -8px calc(var(--edge) - var(--fade)));
  mask-image: linear-gradient(to right, transparent calc(var(--edge) - var(--fade)), #000 var(--edge));
}
/* The viewport stays clipped at the content column at all times. Its keyboard focus ring is drawn by the frame, an overlay
   that starts at that same clip edge, so it shows on all four sides, never moves when the swipe track scrolls, and never
   lets a card show under the journey path. The section is light, so the ring is gold-700. */
.curriculum__frame { position: relative; }
.curriculum__viewport:focus-visible { outline: none; }
/* Without :has() the frame cannot draw the ring, so the viewport keeps its own (drawn inside its box) */
@supports not selector(:has(*)) {
  .curriculum__viewport:focus-visible { outline: 2px solid var(--gold-700); outline-offset: -2px; }
}
.curriculum__frame:has(.curriculum__viewport:focus-visible)::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  inset: 0 0 0 max(var(--gutter), calc((100% - var(--container)) / 2));
  border: 2px solid var(--gold-700); border-radius: var(--radius-card);
}
.curriculum .curriculum__track {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4);
  margin: 0; padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); /* vw not %: a percentage padding resolves to 0 in max-content sizing and drops the track end gutter */
}
.module-card {
  position: relative; display: grid; align-content: space-between; gap: var(--space-6);
  min-height: 280px; padding: var(--space-6);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.module-card__num { font: 400 clamp(3rem, 2.5rem + 2vw, 4.5rem) / 1 var(--font-display); color: var(--gold-600); }
.module-card__title { margin: 0; font: 400 var(--fs-h3) / 1.15 var(--font-display); }
.module-card__foot { display: grid; gap: var(--space-3); }
.module-card__meta { color: var(--text-muted); }
/* Thin gold progress rule, filled to the module's position on the route (--step of --steps) */
.module-card__rule { display: block; height: 2px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
.module-card__rule span { display: block; height: 100%; background: var(--gold-500); transform-origin: left; transform: scaleX(calc(var(--step, 1) / var(--steps, 12))); }
.module-card__star { position: absolute; top: var(--space-6); right: var(--space-6); width: 18px; height: 18px; color: var(--gold-500); }
.curriculum__hint { display: none; margin-top: var(--space-5); color: var(--text-muted); }
.curriculum__progress { display: none; height: 1px; margin-top: var(--space-7); background: var(--line); }
.curriculum__bar { display: block; height: 100%; background: var(--gold-500); transform: scaleX(0); transform-origin: left; }

.curriculum.is-pinned {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7);
}
.curriculum.is-pinned .curriculum__track { display: flex; width: max-content; }
.curriculum.is-pinned .module-card { width: clamp(280px, 24vw, 360px); min-height: 360px; }
.curriculum.is-pinned .curriculum__progress { display: block; }

@media (max-width: 1023px) {
  .curriculum__viewport { --fade: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .curriculum__viewport::-webkit-scrollbar { display: none; }
  .curriculum .curriculum__track { display: flex; width: max-content; }
  .module-card { width: min(78vw, 300px); scroll-snap-align: start; }
  .curriculum__hint { display: block; }
}

/* Feature strip: one floating card over the hero wave, four columns divided by hairlines (no icon badges) */
.features { --features-overlap: var(--space-9); position: relative; z-index: 4; margin-top: calc(-1 * var(--features-overlap)); }
.features__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: var(--space-6) 0; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.feature { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-2) var(--space-6); }
.feature + .feature { border-left: 1px solid var(--line); }
.feature__icon { width: 28px; height: 28px; }
.feature__title { margin: 0; font: 600 var(--fs-body) / 1.3 var(--font-body); }
.feature__text { font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 1023px) {
  .features__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
  .feature:nth-child(3) { border-left: 0; }
}
@media (max-width: 599px) {
  .features { --features-overlap: var(--space-7); }
  .features__strip { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: var(--space-2) 0; }
  .feature { padding: var(--space-5); }
  .feature + .feature { border-left: 0; border-top: 1px solid var(--line); }
}

/* Course overview and trailer card */
.overview__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.overview__copy { grid-column: 1 / span 5; display: grid; gap: var(--space-6); justify-items: start; }
.overview__copy .section-head { margin-bottom: 0; }
.overview__media { grid-column: 7 / -1; }
.trailer { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--teal-900); box-shadow: var(--shadow-card); }
.trailer__ecg { position: absolute; left: 0; top: 50%; width: 100%; height: 34%; translate: 0 -50%; fill: none; stroke: var(--gold-500); stroke-width: 1.5; opacity: .35; }
.trailer__badge { position: absolute; top: var(--space-5); left: var(--space-5); }
.trailer__caption {
  position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4);
  font: 400 clamp(1.125rem, 1rem + .5vw, 1.375rem) / 1.3 var(--font-display);
}
.trailer__duration { color: var(--on-dark-muted); }
/* The whole card is one button: transparent, above the decorations, with the gold play circle at its centre */
.trailer__hit { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit; }
.trailer__hit:focus-visible { outline-offset: -6px; }
.trailer__hit:hover .trailer__play { translate: 0 -1px; }
@media (max-width: 1023px) { .overview__copy, .overview__media { grid-column: 1 / -1; } }
@media (max-width: 479px) {
  .trailer .trailer__play { width: 56px; height: 56px; }
  .trailer__badge { top: var(--space-4); left: var(--space-4); }
  .trailer__caption { left: var(--space-4); right: var(--space-4); bottom: var(--space-3); font-size: 1rem; }
}

/* Inside the platform: sticky storytelling with rounded product mockups */
.platform .section-head h2 { max-width: 16ch; }
.story { display: grid; gap: clamp(var(--space-9), 12vw, 200px); }
.story__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.story__text { grid-column: 1 / span 5; display: grid; gap: var(--space-5); justify-items: start; padding-top: var(--space-8); }
.story__label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--gold-500); }
.story__label .icon { width: 18px; height: 18px; }
.story__points { display: grid; gap: var(--space-3); margin: 0; }
.story__points li { display: flex; align-items: baseline; gap: var(--space-3); color: var(--on-dark-muted); }
.story__points li::before {
  content: ''; width: 9px; height: 9px; flex: none; background: var(--gold-500);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.story__screen { grid-column: 7 / -1; position: sticky; top: calc(var(--header-h) + var(--space-6)); }

.mock { overflow: hidden; background: var(--card); color: var(--text); border-radius: var(--radius-card); box-shadow: var(--shadow-card); font-size: var(--fs-small); }
.mock .icon { width: 16px; height: 16px; }
/* Mockups are ivory surfaces inside a dark band: use the light-surface gold */
.platform .mock .badge--gold { color: var(--gold-700); border-color: var(--gold-600); }
.mock__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); color: var(--text-muted); }
.mock__bar .icon { display: inline; width: 14px; height: 14px; vertical-align: -2px; }
.mock__body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.mock__title { font: 400 1.375rem / 1.2 var(--font-display); }
.mock-video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--teal-950); }
.mock-video__ecg { position: absolute; left: 0; top: 30%; width: 100%; height: 40%; fill: none; stroke: var(--gold-500); stroke-width: 1.5; opacity: .5; }
.mock-video__play { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--gold-500); border-radius: 50%; color: var(--gold-500); }
.mock-video__progress { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-4); height: 2px; border-radius: var(--radius-pill); background: var(--line-dark); }
.mock-video__progress span { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--gold-500); }
.mock-list { display: grid; margin: 0; }
.mock-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.mock-list .mono { margin-left: auto; color: var(--text-muted); }
.mock-list .icon { color: var(--text-muted); }
.mock-list .is-done .icon { color: var(--success); }
.mock-list .is-current { font-weight: 600; }
.mock-list .is-current .icon { color: var(--gold-700); }
.mock__stem { font-size: var(--fs-body); line-height: 1.55; }
.mock-options { display: grid; gap: var(--space-2); margin: 0; }
.mock-options li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-field); }
.mock-options .mono { color: var(--gold-700); }
.mock-options .is-correct { border-color: var(--success); background: var(--success-bg); }
.mock-options .is-correct .icon { margin-left: auto; color: var(--success); }
.mock__explain { padding: var(--space-4); background: var(--paper-2); border-left: 2px solid var(--gold-500); border-radius: 0 var(--radius-field) var(--radius-field) 0; color: var(--text-muted); }
.mock-author { display: flex; align-items: center; gap: var(--space-3); line-height: 1.6; }
.mock-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--teal-950); color: var(--gold-500); font: 400 1rem / 1 var(--font-display); }
/* Community mockup: the sample clinical case (post-102) with its ultrasound schematic, as styled in community.css */
.mock-post__kicker { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--text-muted); }
.mock-post__type { border-color: var(--gold-600); color: var(--gold-700); }
.mock-post__image { overflow: hidden; border-radius: var(--radius-field); background: var(--teal-950); }
.mock-scan { width: 100%; height: auto; }
.mock-scan__bg { fill: var(--teal-950); }
.mock-scan__sector { fill: var(--teal-900); stroke: var(--line-dark); }
.mock-scan__wall { fill: none; stroke: var(--on-dark-muted); stroke-opacity: .5; stroke-linecap: round; }
.mock-scan__lumen { fill: none; stroke: var(--teal-950); stroke-linecap: round; }
.mock-scan__gb { fill: var(--teal-950); stroke: var(--on-dark-muted); stroke-opacity: .5; stroke-width: 3; }
.mock-scan__measure { fill: none; stroke: var(--gold-500); stroke-width: 1; stroke-dasharray: 3 3; }
.mock-scan__caliper { fill: none; stroke: var(--gold-500); stroke-width: 1.5; }
.mock-scan__label { fill: var(--gold-500); font-family: var(--font-mono); font-size: 14px; letter-spacing: .06em; }
.mock-post__meta { display: flex; gap: var(--space-5); color: var(--text-muted); }
.mock-post__meta .icon { display: inline; width: 14px; height: 14px; vertical-align: -2px; }
.mock--cert { padding: var(--space-5); }
.mock-cert {
  display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-6);
  border: 1px solid var(--gold-500); border-radius: var(--radius-1); outline: 1px solid var(--gold-500); outline-offset: -8px; text-align: center;
}
.mock-cert__star { width: 32px; height: 32px; color: var(--gold-500); }
.mock-cert__name { font: 400 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) / 1.1 var(--font-display); }
.mock-cert__course { color: var(--text-muted); }
.mock-cert__id { color: var(--gold-700); }

@media (max-width: 1023px) {
  .story__text, .story__screen { grid-column: 1 / -1; }
  .story__text { padding-top: 0; }
  .story__screen { position: static; }
}

/* Dr Eman: portrait in a rounded-card frame (second placement), placeholder credentials, bio and quote */
.instructor__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.instructor__figure { grid-column: 1 / span 5; }
.instructor__portrait { --curtain: var(--paper); }
.instructor__path { position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; fill: none; stroke: var(--gold-500); stroke-width: 1.5; opacity: .6; }
.instructor__copy { grid-column: 7 / -1; display: grid; gap: var(--space-5); justify-items: start; }
.instructor__copy .section-head { margin-bottom: 0; }
.instructor__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.instructor__credentials { color: var(--gold-700); }
.instructor__quote { margin: var(--space-4) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--line); font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) / 1.3 var(--font-display); }
.instructor__quote .icon { width: 28px; height: 28px; margin-bottom: var(--space-3); color: var(--gold-500); }
@media (max-width: 1023px) {
  .instructor__figure, .instructor__copy { grid-column: 1 / -1; }
  .instructor__figure { width: min(100%, 480px); }
}

/* Testimonials and FAQ band (teal-950): rotating quote card left, ivory FAQ card right */
.voices__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.voices__quotes { grid-column: 1 / span 6; display: grid; gap: var(--space-5); align-content: start; }
.voices__quotes .section-head, .faq-card .section-head { margin-bottom: var(--space-4); }
.voices__note { color: var(--on-dark-muted); }
@media (max-width: 1023px) { .voices__note { margin-bottom: var(--space-7); } }
.quote-card {
  position: relative; display: grid; gap: var(--space-5);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  border: 1px solid color-mix(in srgb, var(--gold-500) 55%, transparent); border-radius: var(--radius-card);
}
.quote-card__mark { width: 48px; height: 48px; color: var(--gold-500); }
.quote-card__slides { display: grid; gap: var(--space-6); }
/* Without JS every quote is listed, separated by hairlines */
.quote-card__slide + .quote-card__slide { padding-top: var(--space-6); border-top: 1px solid var(--line-dark); }
/* With JS the slides stack in one cell, so the card keeps the height of the longest quote */
.quote-card[data-ready] .quote-card__slide { grid-area: 1 / 1; padding-top: 0; border-top: 0; }
.quote-card[data-ready] .quote-card__slide:not(.is-active) { visibility: hidden; }
.quote-card figure { display: grid; gap: var(--space-6); margin: 0; }
.quote-card__quote { margin: 0; font: italic 400 clamp(1.375rem, 1.15rem + .9vw, 2rem) / 1.35 var(--font-display); }
.quote-card__person { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-small); color: var(--on-dark-muted); }
.quote-card__person > span:last-child { display: grid; gap: 2px; }
.quote-card__person strong { color: var(--on-dark); font-weight: 600; }
.quote-card__avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid var(--gold-500); border-radius: 50%; color: var(--gold-500); font: 400 1rem / 1 var(--font-display); }
.quote-card__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.quote-card__count { min-width: 5ch; text-align: center; color: var(--on-dark-muted); }
.quote-card__toggle { margin-left: auto; }
.icon--flip { transform: scaleX(-1); }
/* The FAQ card is an ivory surface inside the dark band: restore light-surface text, gold and focus colours */
.faq-card {
  --focus-ring: 2px solid var(--gold-700);
  grid-column: 8 / -1; padding: clamp(var(--space-5), 3vw, var(--space-7));
  background: var(--paper); color: var(--text); border-radius: var(--radius-card);
}
.voices .faq-card .eyebrow { color: var(--gold-700); }
.voices .faq-card :is(h2, h3) em { color: var(--gold-600); }
.voices .faq-card :is(.muted, .lead) { color: var(--text-muted); }
.faq-card__more { margin-top: var(--space-5); font-size: var(--fs-small); }
@media (max-width: 1023px) { .voices__quotes, .faq-card { grid-column: 1 / -1; } }

/* Pricing: the single dark plan card on ivory */
.pricing__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.pricing__intro { grid-column: 1 / span 5; display: grid; gap: var(--space-5); }
.plan {
  grid-column: 7 / -1; position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: var(--space-5); padding: clamp(var(--space-6), 4vw, var(--space-8));
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  outline: 1px solid color-mix(in srgb, var(--gold-500) 45%, transparent); outline-offset: -12px;
}
.plan__sheen {
  position: absolute; z-index: -1; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold-500) 22%, transparent), transparent 65%);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) ease;
}
.plan:hover .plan__sheen { opacity: 1; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.plan__price .mono { color: var(--on-dark-muted); }
.plan__amount { font: 400 clamp(3.5rem, 3rem + 3vw, 6rem) / 1 var(--font-display); }
.plan__list { display: grid; gap: var(--space-3); margin: 0; }
.plan__list li { display: flex; align-items: baseline; gap: var(--space-3); }
.plan__list .icon { width: 18px; height: 18px; flex: none; color: var(--gold-500); transform: translateY(3px); }
.plan__note { font-size: var(--fs-small); color: var(--on-dark-muted); }
@media (max-width: 1023px) { .pricing__intro, .plan { grid-column: 1 / -1; } }

/* Call-to-action band (teal-700): a gold ECG line that ends in a star, then the closing line and the foil CTA */
.cta-band { --ecg-top: var(--space-5); position: relative; overflow: hidden; background: var(--teal-700); }
.cta-band__ecg { position: absolute; left: 0; top: var(--ecg-top); width: 100%; height: 120px; fill: none; stroke: var(--gold-500); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.cta-band__star { position: absolute; right: var(--gutter); top: calc(var(--ecg-top) + 50px); width: 28px; height: 28px; color: var(--gold-500); }
.cta-band__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); padding-top: var(--space-8); }
.cta-band__title { max-width: 14ch; }
@media (max-width: 767px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr); justify-items: start; } }