/**
 * @file
 * CycleIn homepage paragraph sections and shared section UI.
 *
 * All values are driven from the C09 design tokens (tokens.css). Placeholder
 * imagery is generated by the content seed; real photography replaces it later.
 */

/* ==========================================================================
   Shared section rhythm and helpers.
   ========================================================================== */

.paragraph--path-chooser,
.paragraph--feature-split,
.paragraph--video-showcase,
.paragraph--numbered-steps,
.paragraph--benefit-grid,
.paragraph--split-content-image,
.paragraph--checklist-cta,
.paragraph--pricing-section,
.paragraph--faq-section {
  padding-block: var(--space-96);
}

/* Break each section out of the constrained content region so its background
   band spans the full viewport; inner wrappers re-centre the content column. */
.paragraph--hero,
.paragraph--path-chooser,
.paragraph--feature-split,
.paragraph--video-showcase,
.paragraph--numbered-steps,
.paragraph--benefit-grid,
.paragraph--split-content-image,
.paragraph--callout-banner,
.paragraph--checklist-cta,
.paragraph--pricing-section,
.paragraph--faq-section,
.paragraph--cta-banner {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
}

.paragraph__eyebrow,
.paragraph--feature-split__chip,
.paragraph--checklist-cta__chip {
  display: inline-block;
  font-size: var(--type-mobile-label-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Section headings that use the centred display treatment. */
.paragraph--path-chooser__heading,
.paragraph--video-showcase__heading,
.paragraph--numbered-steps__heading,
.paragraph--benefit-grid__heading,
.paragraph--pricing-section__heading,
.paragraph--faq-section__heading,
.paragraph--cta-banner__heading {
  text-transform: uppercase;
}

/* The uppercase section titles are set at display scale in the prototype —
   larger than the base H2 token. The Figma renders these centred section H2s at
   the H1 display size (~70px at 1440), not a reduced 54px cap, so they share the
   FAQ heading's clamp. This closes the round-6 "character spacing looks tighter
   than the design" gap (the smaller cap read as denser letter rhythm). */
.paragraph--path-chooser__heading,
.paragraph--video-showcase__heading,
.paragraph--numbered-steps__heading,
.paragraph--benefit-grid__heading,
.paragraph--pricing-section__heading {
  font-size: clamp(var(--type-h2-size), 5.4vw, var(--type-h1-size));
  line-height: 1.1;
}

.paragraph--path-chooser__header,
.paragraph--video-showcase__header,
.paragraph--pricing-section__intro,
.paragraph--benefit-grid__intro,
.paragraph--numbered-steps__intro,
.paragraph--numbered-steps__heading,
.paragraph--benefit-grid__heading,
.paragraph--pricing-section__heading,
.paragraph--faq-section__heading {
  text-align: center;
}

/* The FAQ heading is the page's largest section title in the prototype: it is
   set at display scale and wraps to two centred lines. */
.paragraph--faq-section__heading {
  font-size: clamp(var(--type-h2-size), 5.4vw, var(--type-h1-size));
  line-height: var(--type-h1-line-height);
  margin-inline: auto;
  max-inline-size: 22ch;
}

.paragraph--path-chooser__header,
.paragraph--video-showcase__header {
  margin-block-end: var(--space-56);
}

.paragraph--benefit-grid__intro,
.paragraph--pricing-section__intro,
.paragraph--numbered-steps__intro {
  color: var(--color-brand-black-muted);
  margin-block: calc(-1 * var(--space-8)) var(--space-56);
  margin-inline: auto;
  max-inline-size: 60ch;
}

/* Arrow affordance shared by "View …" style buttons. */
.paragraph--path-card__button::after,
.paragraph--pricing-card__button::after,
.paragraph--checklist-cta__button::after {
  content: "\2192";
  font-weight: var(--font-weight-bold);
}

/* Whole-field renders wrap their child paragraphs in field/item container
   divs; collapse those so the children become direct grid items. */
.paragraph--path-chooser__cards > div,
.paragraph--path-chooser__cards > div > div,
.paragraph--feature-split__items > div,
.paragraph--feature-split__items > div > div,
.paragraph--faq-section__items > div,
.paragraph--faq-section__items > div > div {
  display: contents;
}

/* The icon media field renders its inline SVG inside an unclassed field-wrapper
   <div>; that block wrapper left-aligns the SVG inside the disc. Collapse every
   wrapper so the SVG becomes the direct centred child of the flex disc. */
.paragraph--path-card__icon div,
.paragraph--icon-text-item__icon div,
.paragraph--benefit-item__icon div,
.paragraph--callout-banner__icon div,
.paragraph--pricing-card__icon div {
  display: contents;
}

/* Icon media wrappers render inline SVG artwork sized to their container.

   The icon media now carry the approved design-source artwork verbatim, so the
   glyphs arrive at the weight and proportion Figma draws them and no CSS
   geometry correction is applied: an earlier stroke-width override existed only
   to compensate for placeholder glyphs that were traced by hand at a heavier
   weight, and thinning the real assets would now take them below the design.

   Sizing is measured against the exported design frames: in those, the glyph
   spans 33-39% of its disc, and the sprite-sliced 24-unit artwork fills ~90% of
   its own viewBox, so the SVG box is set to 42% of the disc (0.42 x 0.90 = 38%
   glyph). */
.paragraph--path-card__icon svg,
.paragraph--icon-text-item__icon svg,
.paragraph--benefit-item__icon svg,
.paragraph--callout-banner__icon svg,
.paragraph--pricing-card__icon svg {
  block-size: 42%;
  display: block;
  inline-size: 42%;
}

/* ==========================================================================
   1. Hero.

   A single large disc holds the hero photograph and bleeds up past the top of
   the page (behind the transparent front-page header set in chrome.css). A dark
   teal gradient darkens the lower half of the disc so the white, centred overlay
   copy meets WCAG AA. `--hero-reveal` is the fraction of the disc shown inside
   the hero; the rest bleeds off the top.
   ========================================================================== */

.paragraph--hero {
  --hero-circle: min(66vw, 940px);
  --hero-reveal: 0.8;
  align-items: center;
  background: var(--color-brand-yellow);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: calc(var(--hero-circle) * var(--hero-reveal));
  overflow: hidden;
  padding-block-end: var(--space-80);
  padding-inline: var(--space-24);
  position: relative;
}

/* The disc: the photograph is clipped to a circle and horizontally centred. Its
   top tucks up under the transparent front-page header — where the circle is at
   its narrowest, so the wordmark and nav pill stay clear of it on the lime — and
   the disc bleeds off the bottom of the hero (`--hero-reveal` is the fraction of
   the disc shown). */
.paragraph--hero__media {
  block-size: var(--hero-circle);
  border-radius: 50%;
  inline-size: var(--hero-circle);
  inset-block-start: 0;
  inset-inline-start: 50%;
  overflow: hidden;
  position: absolute;
  transform: translateX(-50%);
  z-index: 0;
}

.paragraph--hero__media img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center 44%;
}

/* Dark gradient scrim over the lower half of the disc: transparent over the
   riders at the top, deepening to near-opaque dark teal well before the base so
   the overlaid white copy clears WCAG AA. The darkening is front-loaded into the
   0–80% band that `--hero-reveal` actually shows (the disc's darkest tail is
   clipped off the bottom), so the sub-headline / meta / secondary button sit on
   ~0.9 opacity rather than the mid-tone the copy previously landed on. */
.paragraph--hero__scrim {
  background: linear-gradient(
    180deg,
    rgba(6, 51, 53, 0) 16%,
    rgba(6, 51, 53, 0.38) 38%,
    rgba(6, 51, 53, 0.74) 56%,
    rgba(6, 51, 53, 0.93) 74%,
    rgba(6, 51, 53, 0.98) 100%
  );
  inset: 0;
  position: absolute;
}

.paragraph--hero__content {
  align-items: center;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  max-inline-size: 56rem;
  position: relative;
  text-align: center;
  z-index: 1;
}

/* Checklist r3: with the wide Mona Sans Expanded cut the old clamp grew the
   headline to ~108px at 1440/1920, pushing it up over the riders and wrapping to
   three lines. Cap it lower so it sets on two lines ("CYCLE IN WITH" /
   "CONFIDENCE") and the riders stay visible above it, as in the prototype. */
.paragraph--hero__heading {
  color: var(--color-white);
  font-size: clamp(2.75rem, 5.6vw, 5.25rem);
  font-weight: var(--font-weight-black);
  line-height: 1;
  margin-block-end: var(--space-16);
  text-shadow: 0 2px 18px rgba(6, 51, 53, 0.6);
  text-transform: uppercase;
}

.paragraph--hero__intro {
  color: var(--color-white);
  font-size: var(--type-body-large-size);
  margin-inline: auto;
  max-inline-size: 42ch;
  text-shadow: 0 1px 10px rgba(6, 51, 53, 0.7);
}

.paragraph--hero__intro p:last-child {
  margin-block-end: 0;
}

.paragraph--hero__key-points {
  align-items: center;
  color: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  justify-content: center;
  list-style: none;
  margin-block: var(--space-24);
  padding: 0;
  text-shadow: 0 1px 10px rgba(6, 51, 53, 0.7);
}

/* Round-10 checklist r24: the design sets this meta line in the regular body
   weight; only the separator dot carries emphasis. */
.paragraph--hero__key-point {
  font-weight: var(--font-weight-regular);
}

.paragraph--hero__key-point:not(:first-child)::before {
  color: var(--color-brand-yellow);
  content: "\2022";
  font-weight: var(--font-weight-black);
  margin-inline-end: var(--space-16);
}

.paragraph--hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  justify-content: center;
  margin-block-start: var(--space-8);
}

/* Primary hero CTA is the brand pink filled button. */
.paragraph--hero__button.cyclein-button--primary {
  background: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
}

.paragraph--hero__button.cyclein-button--primary:hover {
  background: var(--color-brand-pink-hover);
  border-color: var(--color-brand-pink-hover);
}

/* Secondary hero CTA is a light/white filled button with dark text. */
.paragraph--hero__button--secondary.cyclein-button--secondary {
  background: var(--color-brand-white);
  border-color: var(--color-brand-white);
  color: var(--color-brand-black);
}

.paragraph--hero__button--secondary.cyclein-button--secondary:hover {
  background: var(--color-brand-white-hover);
  border-color: var(--color-brand-white-hover);
}

/* ==========================================================================
   2. Path chooser.
   ========================================================================== */

.paragraph--path-chooser__cards {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.paragraph--path-card {
  border: 0;
  border-radius: var(--radius-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-40);
}

.paragraph--path-card .cyclein-card__body {
  display: contents;
}

.paragraph--path-card__icon {
  order: 1;
}

.paragraph--path-card .cyclein-card__title {
  font-size: var(--type-h3-size);
  margin: 0;
  order: 2;
}

.paragraph--path-card__body {
  order: 3;
}

.paragraph--path-card__body p:last-child {
  margin-block-end: 0;
}

.paragraph--path-card__action {
  margin-block-start: auto;
  order: 4;
  padding-block-start: var(--space-8);
}

.paragraph--path-card--lime {
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
}

.paragraph--path-card--dark-teal {
  background: var(--color-brand-black);
  color: var(--color-brand-white);
}

.paragraph--path-card--dark-teal .cyclein-card__title {
  color: var(--color-brand-white);
}

.paragraph--path-card__icon {
  align-items: center;
  block-size: var(--space-56);
  border-radius: var(--radius-pill);
  display: inline-flex;
  inline-size: var(--space-56);
  justify-content: center;
}

/* Client QA round 1 (checklist row 12): on the lime path card the design paints
   the glyph brand yellow inside the pink disc, not white. The pink pricing-card
   disc further down the page keeps its white glyph, which is why the two cards
   are styled separately even though they share the same icon media. */
.paragraph--path-card--lime .paragraph--path-card__icon {
  background: var(--color-brand-pink);
  color: var(--color-brand-yellow);
}

.paragraph--path-card--dark-teal .paragraph--path-card__icon {
  background: var(--color-brand-white);
  color: var(--color-brand-black);
}

.paragraph--path-card--lime .paragraph--path-card__button {
  background: var(--color-brand-black);
  border-color: var(--color-brand-black);
  color: var(--color-brand-white);
}

.paragraph--path-card--dark-teal .paragraph--path-card__button {
  background: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
}

.paragraph--path-card--dark-teal .paragraph--path-card__button:hover {
  background: var(--color-brand-pink-hover);
  border-color: var(--color-brand-pink-hover);
}

/* ==========================================================================
   3. Feature split ("What is CycleIn?").
   ========================================================================== */

/* Figma paints this band white rather than letting it inherit the page's grey
   (round-8 r15). The neighbouring grey sections (benefit grid, checklist CTA)
   set their own surface, so the band states its colour instead of relying on
   the page background. */
.paragraph--feature-split {
  background: var(--color-white);
}

/* The supplied 1440px homepage frame gives this content-identical band 703px.
   Its two columns are 423px tall, leaving 140px of breathing room above and
   below. Keep the phone rhythm content-driven in the responsive rules below. */
@media (min-width: 1024px) {
  .path-frontpage .paragraph--feature-split {
    padding-block: 140px;
  }
}

.paragraph--feature-split__inner {
  align-items: start;
  column-gap: var(--space-72);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.paragraph--feature-split__chip {
  background: transparent;
  border: 1px solid var(--color-brand-black-tint);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  margin-block-end: var(--space-16);
  padding: var(--space-4) var(--space-16);
}

.paragraph--feature-split__body {
  color: var(--color-brand-black-muted);
}

.paragraph--feature-split__items {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: minmax(0, 1fr);
}

.paragraph--icon-text-item {
  align-items: start;
  column-gap: var(--space-16);
  display: grid;
  grid-template-columns: auto 1fr;
}

.paragraph--icon-text-item__icon {
  align-items: center;
  background: var(--color-brand-yellow);
  block-size: var(--space-40);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: inline-flex;
  flex-shrink: 0;
  inline-size: var(--space-40);
  justify-content: center;
}

.paragraph--icon-text-item__heading {
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-4);
}

.paragraph--icon-text-item__text {
  color: var(--color-brand-black-muted);
}

.paragraph--icon-text-item__text p:last-child {
  margin-block-end: 0;
}

/* ==========================================================================
   4. Video showcase ("See the course in action").

   A mint band holds the video at the design's 16:9, with the red play button
   centred on the still and the "Watch on YouTube" link below it.

   Round-10 checklist r5: this section used to draw a dark player panel dressed
   as a laptop inside a fabricated YouTube interface — channel chrome, a feature
   caption, a CYCLEIN watermark and share/save controls — with the real clip
   letterboxed into the mockup's screen. The design has none of it (node
   318:16471 is a heading, a lede and one 1200x675 video frame), so all thirty of
   those rules are gone along with the theme strings that fed them. What is left
   is the still, the play button and the labelled link. No motion is introduced.
   ========================================================================== */

.paragraph--video-showcase {
  background: var(--color-brand-lime-tint);
}

/* Exact 1440px frame geometry: 96 + 77 + 16 + 27 + 35 + 675 + 96 =
   1022px. The Coffee Service inline glyph has unusually tall font metrics, so
   the heading's layout box is pinned to its declared 77px line-height while
   the glyph itself remains visible. */
@media (min-width: 1024px) {
  .paragraph--video-showcase__heading {
    block-size: 77px;
    margin-block-end: var(--space-16);
  }

  .paragraph--video-showcase__header {
    margin-block-end: 35px;
  }
}

/* Round-10 checklist r5: the panel used to be a dark 37rem-tall box with 32px of
   padding, which existed only to frame the laptop mockup and its invented
   YouTube chrome. The design has no panel — just the video — so it is now a
   plain centred container and the frame below carries the shape. */
.paragraph--video-showcase__panel {
  margin-inline: auto;
  max-inline-size: var(--layout-max-width);
  position: relative;
}

/* The design's video frame is 1200x675 (node 318:16471), i.e. exactly 16:9 and
   exactly --layout-max-width wide, so the ratio is declared rather than the
   height. */
.paragraph--video-showcase__frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-24);
  inline-size: 100%;
  overflow: hidden;
  position: relative;
}

/* 16/9.5 was a mockup artefact — the still was letterboxed to fit the laptop
   screen. The design's frame is a true 16:9. */
.paragraph--video-showcase__poster {
  aspect-ratio: 16 / 9;
  block-size: 100%;
  inline-size: 100%;
  overflow: hidden;
  position: relative;
}

.paragraph--video-showcase__poster img {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
}

/* Inline-play facade (R5-2): the poster is a real <button> that swaps for an
   autoplay iframe on click. Reset the native button chrome so it reads as the
   still, keeping the __poster sizing/position it also carries. */
.paragraph--video-showcase__play {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  inline-size: 100%;
  padding: 0;
}

/* The laptop screen clips overflow, so draw an inset focus ring rather than the
   default outward ring, which would be hidden behind the screen bezel. */
.paragraph--video-showcase__play:focus-visible {
  box-shadow: none;
  outline: 3px solid var(--color-brand-yellow);
  outline-offset: -3px;
}

/* The YouTube iframe that replaces the facade; fills the laptop screen at the
   same ratio as the poster still. */
.paragraph--video-showcase__embed {
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  inline-size: 100%;
}

/* ==========================================================================
   5. Numbered steps ("How it works").
   ========================================================================== */

.paragraph--numbered-steps {
  background: var(--color-brand-black);
  color: var(--color-brand-white);
}

.paragraph--numbered-steps__heading {
  color: var(--color-brand-white);
}

.paragraph--numbered-steps__intro {
  color: var(--color-brand-black-tint);
}

/**
 * Round-10 checklist r15: the column count was hardcoded to 4, but the step
 * count is editorial — the homepage has four steps, /organisations has three.
 * With three items in a four-column grid the fourth track stayed empty, which
 * is the reported "còn dư nhiều khoảng trống bên phải".
 *
 * auto-fit collapses tracks that hold no item, so the columns follow the
 * content: three steps share the 1200px column as 3x384 with a 24px gap, four
 * steps as 4x282 — both exactly what the design export gives (its "How it works
 * boxes" frame is a 1200-wide horizontal row, itemSpacing 24, cards 384 wide at
 * three-up). The narrow-viewport rules below still set their own explicit
 * template, so tablet/mobile are unaffected.
 */
.paragraph--numbered-steps__list {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.paragraph--numbered-steps__item {
  background: transparent;
  border: 1px solid var(--color-green-dark);
  border-radius: var(--radius-8);
  padding: var(--space-32) var(--space-24);
}

.paragraph--numbered-steps__number {
  color: var(--color-brand-yellow);
  display: block;
  font-size: clamp(var(--type-h2-size), 3.2vw, 2.75rem);
  font-weight: var(--font-weight-black);
  line-height: 1;
  margin-block-end: var(--space-16);
}

/* Step titles sit well below the big lime number in the prototype — closer to
   the body scale than a card H3. */
.paragraph--step-item__heading {
  color: var(--color-brand-white);
  font-size: var(--type-body-large-size);
  margin-block-end: var(--space-8);
}

.paragraph--step-item__text {
  color: var(--color-brand-black-tint);
}

.paragraph--step-item__text p:last-child {
  margin-block-end: 0;
}

/* ==========================================================================
   6. Benefit grid.

   Light-grey band (matching the prototype PNG, #eff1f1) with dark heading/intro
   and dark labels; each benefit sits under a large lime disc.
   ========================================================================== */

.paragraph--benefit-grid {
  background: var(--color-green-light);
  color: var(--color-brand-black);
}

.paragraph--benefit-grid__heading {
  color: var(--color-brand-black);
}

.paragraph--benefit-grid__intro {
  color: var(--color-brand-black-muted);
}

.paragraph--benefit-grid__list {
  --benefit-disc: clamp(8rem, 12vw, 11rem);
  display: grid;
  gap: var(--space-48) var(--space-24);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.paragraph--benefit-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  text-align: center;
}

.paragraph--benefit-item__icon {
  align-items: center;
  background: var(--color-brand-yellow);
  block-size: var(--benefit-disc);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: inline-flex;
  inline-size: var(--benefit-disc);
  justify-content: center;
}

/* The benefits artwork is exported from Figma as a full disc tile: its 248-unit
   viewBox is exactly the lime disc, with the glyph already inset inside it at
   the design's proportion. The baked-in background circle is stripped on import
   because the disc above is drawn from a design token, so the SVG box is sized
   to the whole disc and the glyph lands at the exported proportion by itself. */
.paragraph--benefit-item__icon svg {
  block-size: 100%;
  inline-size: 100%;
}

.paragraph--benefit-item__heading {
  color: var(--color-brand-black);
  font-size: var(--type-body-large-size);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

/* ==========================================================================
   7. Split content image ("What the training covers").
   ========================================================================== */

.paragraph--split-content-image--background-white {
  background: var(--color-white);
}

.paragraph--split-content-image--background-light-grey {
  background: var(--color-green-light);
}

.paragraph--split-content-image__inner {
  align-items: center;
  column-gap: var(--space-72);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Empty-field-safe: with no Media the row collapses to a single content column
   at a readable measure rather than reserving an empty image half. */
.paragraph--split-content-image--no-image .paragraph--split-content-image__inner {
  grid-template-columns: minmax(0, 1fr);
}

.paragraph--split-content-image--no-image .paragraph--split-content-image__content {
  max-inline-size: 70ch;
}

/* The DOM reading order is always content-then-media (heading and copy first
   for a11y). The image-position modifier flips the grid column order so the
   image sits on the requested side without disturbing the source order. */
.paragraph--split-content-image--image-right .paragraph--split-content-image__media {
  order: 2;
}

.paragraph--split-content-image--image-left .paragraph--split-content-image__media {
  order: -1;
}

.paragraph--split-content-image__body {
  color: var(--color-brand-black-muted);
}

.paragraph--split-content-image__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-block-start: var(--space-24);
}

.paragraph--split-content-image__ctas > div,
.paragraph--split-content-image__ctas > div > div {
  display: contents;
}

.paragraph--split-content-image__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  list-style: none;
  margin: var(--space-24) 0 0;
  padding: 0;
}

.paragraph--split-content-image__chip {
  background: transparent;
  /* Round-10 checklist r8 supersedes the round-6 reading of this outline: the
     current design outlines these chips in brand lime (#00FF00) while the label
     stays dark teal, so the border is decorative and the text keeps its
     contrast. */
  border: 1px solid var(--color-brand-lime);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  font-size: var(--type-mobile-label-size);
  font-weight: var(--font-weight-bold);
  padding: var(--space-4) var(--space-16);
}

/* The circle is clipped by the media wrapper, so object-fit alone frames the
   photograph inside the disc. */
.paragraph--split-content-image--image-circular .paragraph--split-content-image__media {
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* Round-10 checklist r8 supersedes the round-8 crop: the extra scale(1.18) zoom
   cropped the subject down to their torso, where the design frames the whole
   rider. object-fit: cover already fills the disc, so no additional zoom. */
.paragraph--split-content-image--image-circular .paragraph--split-content-image__media img {
  aspect-ratio: 1;
  inline-size: 100%;
  object-fit: cover;
  object-position: center 32%;
}

/* Round-12 CD5: the round-8 desktop treatment pulled the disc out of the grid
   and let it bleed 7.93vw past the section's right edge. The client reported the
   disc spilling off the right as a defect, so that bleed block is removed: the
   circular media stays inside its grid column as a fully contained inset disc
   (the base .image-circular rules above give it aspect-ratio 1 and the pill
   radius). /about already relied on the contained behaviour, so this aligns the
   two. */

/* ==========================================================================
   8. Callout banner ("Certificate of completion included").
   ========================================================================== */

/* Full-viewport-width dark teal band (matching the prototype): the icon, title
   and body sit in a single horizontal row inside the centred content column. */
/**
 * Round-10 checklist r18: the certificate banner was inverted against the
 * design. Read from the design export (00-project-input/figma/specs/
 * handover-page-FULL.json, "Section 6 banner"): the band is #e3ff42 with
 * #063335 copy — a yellow banner with dark text. The site rendered it as the
 * dark-teal band with light text, which is the reported "màu sắc background,
 * icon, text chưa giống thiết kế". The icon tile keeps its own treatment below.
 */
.paragraph--callout-banner {
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
  padding-block: var(--space-72);
}

/* Icon on the left; the heading sits over the body text in a stacked column on
   the right (per the prototype), so the description wraps onto its own line. */
.paragraph--callout-banner__inner {
  align-items: center;
  column-gap: var(--space-40);
  display: flex;
  justify-content: center;
}

/**
 * Round-10 checklist r12/r18: the disc inverts against the band. Now that the
 * banner is the design's yellow (#e3ff42), a yellow disc would be invisible on
 * it. The design's "Icon decorative" node is a 96x96 pill filled #063335 with
 * the glyph knocked out in the band colour — a dark disc holding a lime mark.
 */
.paragraph--callout-banner__icon {
  align-items: center;
  background: var(--color-brand-black);
  block-size: var(--space-96);
  border-radius: var(--radius-pill);
  color: var(--color-brand-yellow);
  display: inline-flex;
  flex-shrink: 0;
  inline-size: var(--space-96);
  justify-content: center;
}

.paragraph--callout-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-inline-size: 46rem;
}

/* Design: 35px / weight 900 / #063335 — the --type-h2 size, not a clamp that
   topped out at 32px. */
.paragraph--callout-banner__heading {
  color: var(--color-brand-black);
  font-size: var(--type-h2-size);
  margin: 0;
}

/* Design: 20px / weight 400 / #063335 (--type-body-large on the dark ink). */
.paragraph--callout-banner__body {
  color: var(--color-brand-black);
  font-size: var(--type-body-large-size);
}

.paragraph--callout-banner__body p:last-child {
  margin-block-end: 0;
}

/**
 * Round-12 CD6: round-10 r18 repainted the base .paragraph--callout-banner in
 * the /training "Section 6 banner" yellow, which also flipped the home
 * certificate banner. The home banner is the dark-teal band: verified against
 * the design export (handover-page-FULL.json "Section 6 banner" for the
 * homepage) — band #063335, heading/body #ffffff, and the icon pill #e3ff42
 * holding a #063335 mark — matching checklist r6 col-F. Restore that on the
 * front page only; other pages keep the yellow rule above ("không làm ảnh
 * hưởng những trang khác").
 */
.path-frontpage .paragraph--callout-banner {
  background: var(--color-brand-black);
  color: var(--color-brand-white);
}

.path-frontpage .paragraph--callout-banner__icon {
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
}

.path-frontpage .paragraph--callout-banner__heading,
.path-frontpage .paragraph--callout-banner__body {
  color: var(--color-brand-white);
}

/* ==========================================================================
   9. Checklist CTA ("CycleIn for organisations").
   ========================================================================== */

.paragraph--checklist-cta {
  background: var(--color-green-light);
}

.paragraph--checklist-cta__inner {
  align-items: center;
  column-gap: var(--space-64);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.paragraph--checklist-cta__list {
  display: grid;
  gap: var(--space-40);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.paragraph--checklist-item {
  align-items: center;
  column-gap: var(--space-16);
  display: grid;
  font-weight: var(--font-weight-bold);
  grid-template-columns: auto 1fr;
}

.paragraph--checklist-item__text p {
  margin: 0;
}

.paragraph--checklist-item__icon--default {
  background: var(--color-brand-pink-tint);
  block-size: var(--space-40);
  border-radius: var(--radius-pill);
  display: inline-block;
  inline-size: var(--space-40);
  position: relative;
}

.paragraph--checklist-item__icon--default::after {
  background-color: var(--color-brand-pink);
  block-size: 100%;
  content: "";
  display: block;
  inline-size: 100%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.paragraph--checklist-cta__panel {
  background: var(--color-brand-white);
  border-radius: var(--radius-24);
  padding: var(--space-48);
}

.paragraph--checklist-cta__chip {
  background: transparent;
  border: 1px solid var(--color-brand-pink);
  border-radius: var(--radius-pill);
  /* Figma sets the "FOR ORGANISATIONS" eyebrow in dark teal inside a pink
     outline pill — not pink-on-pink (round-6 issue r9). */
  color: var(--color-brand-black);
  margin-block-end: var(--space-16);
  padding: var(--space-4) var(--space-16);
}

.paragraph--checklist-cta__body {
  color: var(--color-brand-black-muted);
}

.paragraph--checklist-cta__actions {
  margin-block-start: var(--space-24);
}

.paragraph--checklist-cta__button {
  background: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
}

/* ==========================================================================
   10. Pricing.
   ========================================================================== */

/* Figma paints the homepage pricing band white rather than inheriting the
   page's grey (round-8 r15/r20 share this cause). Scoped to the front page for
   the same reason as the card variants below: the standalone /pricing layout
   has no design and must not be restyled by proxy. */
.path-frontpage .paragraph--pricing-section {
  background: var(--color-white);
}

.paragraph--pricing-section__list {
  align-items: stretch;
  display: grid;
  gap: var(--space-24);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.paragraph--pricing-section__item {
  display: flex;
}

.paragraph--pricing-card {
  border-radius: var(--radius-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  inline-size: 100%;
  padding: var(--space-48);
}

.paragraph--pricing-card--default {
  background: var(--color-white);
  border: 1px solid var(--color-brand-black-tint);
  color: var(--color-brand-black);
}

/* Homepage individual card: lime surface with pink brandmark, heading and price
   (Figma homepage pricing). Scoped to the front page so the standalone /pricing
   layout — which has no design and assigns the variants differently — is
   untouched. The homepage org card stays the dark-teal featured variant. */
.path-frontpage .paragraph--pricing-card--default {
  background: var(--color-brand-yellow);
  border: 0;
}

.path-frontpage .paragraph--pricing-card--default .paragraph--pricing-card__heading,
.path-frontpage .paragraph--pricing-card--default .paragraph--pricing-card__price,
.path-frontpage .paragraph--pricing-card--default .paragraph--pricing-card__price-note {
  color: var(--color-brand-pink);
}

.paragraph--pricing-card--featured {
  background: var(--color-brand-black);
  color: var(--color-brand-white);
}

.paragraph--pricing-card__icon {
  align-items: center;
  block-size: var(--space-48);
  border-radius: var(--radius-pill);
  display: inline-flex;
  inline-size: var(--space-48);
  justify-content: center;
}

.paragraph--pricing-card--default .paragraph--pricing-card__icon {
  background: var(--color-brand-black);
  color: var(--color-brand-yellow);
}

.path-frontpage .paragraph--pricing-card--default .paragraph--pricing-card__icon {
  background: var(--color-brand-pink);
  color: var(--color-white);
}

.paragraph--pricing-card--featured .paragraph--pricing-card__icon {
  background: var(--color-brand-white);
  color: var(--color-brand-black);
}

.paragraph--pricing-card__heading {
  font-size: var(--type-h3-size);
  margin: 0;
}

.paragraph--pricing-card--featured .paragraph--pricing-card__heading {
  color: var(--color-brand-yellow);
}

/* Price and its "+VAT" note read as one baseline-aligned line (per Figma). */
.paragraph--pricing-card__price-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.paragraph--pricing-card__price {
  font-size: clamp(var(--type-h3-size), 2.4vw, 1.875rem);
  font-weight: var(--font-weight-black);
  line-height: 1.1;
  margin: 0;
}

/* On the featured card the "price" slot carries the tiered-pricing line: it
   continues the lime heading rather than reading as a boxed price pill. */
.paragraph--pricing-card--featured .paragraph--pricing-card__price {
  color: var(--color-brand-yellow);
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-bold);
}

.paragraph--pricing-card__price-note {
  color: var(--color-brand-black-muted);
  margin: 0;
}

.paragraph--pricing-card--featured .paragraph--pricing-card__price-note {
  color: var(--color-brand-black-tint);
}

.paragraph--pricing-card__description {
  margin-block: var(--space-8);
}

.paragraph--pricing-card--featured .paragraph--pricing-card__description {
  color: var(--color-brand-black-tint);
}

.paragraph--pricing-card__actions {
  margin-block-start: auto;
  padding-block-start: var(--space-8);
}

/* The featured (organisation) card's CTA is the brand pink pill (per Figma),
   not the default lime primary. */
.paragraph--pricing-card--featured .paragraph--pricing-card__button {
  background: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
}

.paragraph--pricing-card--featured .paragraph--pricing-card__button:hover {
  background: var(--color-brand-pink-hover);
  border-color: var(--color-brand-pink-hover);
}

/* ==========================================================================
   11. FAQ accordion.
   ========================================================================== */

.paragraph--faq-section__items {
  border-block-start: 0;
  display: grid;
  gap: var(--space-12);
  grid-template-columns: minmax(0, 1fr);
}

.paragraph--faq-item {
  border: 0;
}

.paragraph--faq-item__question {
  margin: 0;
}

.paragraph--faq-item__trigger {
  align-items: center;
  background: var(--color-brand-pink);
  border: 0;
  border-radius: var(--radius-8);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  font-size: var(--type-body-large-size);
  font-weight: var(--font-weight-bold);
  gap: var(--space-16);
  inline-size: 100%;
  justify-content: space-between;
  min-block-size: var(--a11y-min-target);
  padding: var(--space-16) var(--space-24);
  text-align: start;
}

.paragraph--faq-item__trigger:hover {
  background: var(--color-brand-pink-hover);
}

.paragraph--faq-item__trigger[aria-expanded="true"] {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.paragraph--faq-item__indicator {
  background-color: currentColor;
  block-size: var(--space-24);
  flex-shrink: 0;
  inline-size: var(--space-24);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 150ms ease;
}

.paragraph--faq-item__trigger[aria-expanded="true"] .paragraph--faq-item__indicator {
  transform: rotate(180deg);
}

.paragraph--faq-item__answer {
  background: var(--color-brand-pink-tint);
  border-end-end-radius: var(--radius-8);
  border-end-start-radius: var(--radius-8);
  color: var(--color-brand-black);
  padding: var(--space-24);
}

.paragraph--faq-item__answer p:last-child {
  margin-block-end: 0;
}

/* ==========================================================================
   12. CTA banner (pre-footer).
   ========================================================================== */

.paragraph--cta-banner {
  background: var(--color-brand-black);
  color: var(--color-brand-white);
  padding-block: var(--space-96);
  text-align: center;
}

.paragraph--cta-banner__heading {
  color: var(--color-brand-white);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line-height);
  margin-inline: auto;
  max-inline-size: 20ch;
}

.paragraph--cta-banner__intro {
  color: var(--color-brand-black-tint);
  margin-block-end: var(--space-32);
  margin-inline: auto;
  max-inline-size: 52ch;
}

.paragraph--cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  justify-content: center;
}

.paragraph--cta-banner__button {
  background: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
}

/* Round-1 checklist r9: this rule was a single class, so on any page that also
   loads the catalogue library (which redefines the bare `.cyclein-button--
   secondary` as dark-on-transparent for its light bands, and is attached after
   home.css) the dark-teal CTA band painted dark text on a dark band and the
   second CTA disappeared. Qualifying with the variant class raises it to the
   same two-class weight the hero CTA already uses, so the band owns its own
   button treatment regardless of which libraries a page attaches. */
.paragraph--cta-banner__button--secondary.cyclein-button--secondary {
  background: transparent;
  border-color: var(--color-brand-white);
  color: var(--color-brand-white);
}

.paragraph--cta-banner__button--secondary.cyclein-button--secondary:hover {
  background: var(--color-brand-white);
  color: var(--color-brand-black);
}

/* The Training page repeats its hero actions in this banner. Keep the
   organisation action light-filled on the dark band, matching the hero, and
   retain the trailing direction cue on both controls. */
.paragraph--cta-banner--purchase .paragraph--cta-banner__button--secondary.cyclein-button--secondary {
  background-color: var(--color-brand-white);
  border-color: var(--color-brand-white);
  color: var(--color-brand-black);
}

.paragraph--cta-banner--purchase .paragraph--cta-banner__button--secondary.cyclein-button--secondary:hover {
  background-color: var(--color-brand-white-hover);
  border-color: var(--color-brand-white-hover);
}

.paragraph--cta-banner--purchase .cyclein-button::after {
  background-color: currentColor;
  block-size: 0.85em;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 1em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The approved Organisations banner uses arrows on both actions and a filled
   white secondary action. Homepage and Pricing banners keep their existing
   page-specific appearance. */
.paragraph--cta-banner--organisations .paragraph--cta-banner__button--secondary.cyclein-button--secondary {
  background-color: var(--color-brand-white);
  border-color: var(--color-brand-white);
  color: var(--color-brand-black);
}

.paragraph--cta-banner--organisations .paragraph--cta-banner__button--secondary.cyclein-button--secondary:hover {
  background-color: var(--color-brand-white-hover);
  border-color: var(--color-brand-white-hover);
}

.paragraph--cta-banner--organisations .cyclein-button::after {
  background-color: currentColor;
  block-size: 0.85em;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  inline-size: 1em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A submit input cannot render the link button's ::after arrow. Paint the
   equivalent white glyph into the live individual-access Buy now controls. */
.paragraph--pricing-card__actions .cyclein-commerce-buy-now__submit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-position: right var(--space-24) center;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-end: var(--space-48);
}

.path-frontpage .paragraph--pricing-card--default .cyclein-commerce-buy-now__submit {
  background-color: var(--color-brand-black);
  border-color: var(--color-brand-black);
  color: var(--color-brand-white);
}

.path-frontpage .paragraph--pricing-card--default .cyclein-commerce-buy-now__submit:hover {
  background-color: var(--color-brand-black-hover);
  border-color: var(--color-brand-black-hover);
}

/* ==========================================================================
   Responsive.
   ========================================================================== */

@media (max-width: 1023px) {
  .paragraph--path-chooser,
  .paragraph--feature-split,
  .paragraph--video-showcase,
  .paragraph--numbered-steps,
  .paragraph--benefit-grid,
  .paragraph--split-content-image,
  .paragraph--checklist-cta,
  .paragraph--pricing-section,
  .paragraph--faq-section {
    padding-block: var(--space-64);
  }

  .paragraph--feature-split__inner,
  .paragraph--split-content-image__inner,
  .paragraph--checklist-cta__inner {
    grid-template-columns: 1fr;
    row-gap: var(--space-40);
  }

  /* Round-9 checklist mobile r5: the checklist column comes first in the DOM so
     the desktop grid can put it left of the copy. Once the grid collapses that
     opened the section with a bare tick list, above its own chip and heading.
     The design leads with the copy and its CTA, then the checklist. */
  .paragraph--checklist-cta__panel {
    order: -1;
  }

  .paragraph--numbered-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Round-9 checklist mobile r4: this used to hoist the image above the copy
     when the desktop layout puts it on the right, so "What the training covers"
     opened with a photo and pushed its heading, body and chips below it. The
     design stacks the image last, which is also the logical mobile reading
     order the C16 split-content-image contract asks for, so the media keeps its
     DOM order and simply follows the content. */
  .paragraph--split-content-image--image-right .paragraph--split-content-image__media {
    order: 0;
  }

  .paragraph--split-content-image__media,
  .paragraph--pricing-card,
  .paragraph--checklist-cta__panel {
    margin-inline: auto;
    max-inline-size: 520px;
  }

  /* Below desktop the player panel drops its absolute overlays and stacks. */
  .paragraph--video-showcase__panel {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

}

@media (max-width: 640px) {
  .paragraph--path-chooser__heading,
  .paragraph--video-showcase__heading,
  .paragraph--numbered-steps__heading,
  .paragraph--benefit-grid__heading,
  .paragraph--pricing-section__heading,
  .paragraph--faq-section__heading {
    font-size: var(--type-mobile-h1-size);
    line-height: 1.2;
  }

  .paragraph--video-showcase__heading .brand-heading__in,
  .paragraph--benefit-grid__heading .brand-heading__in {
    line-height: 0;
  }

  .paragraph--path-chooser__cards,
  .paragraph--pricing-section__list {
    grid-template-columns: 1fr;
  }

  /* Round-12 CM3: on phones the pricing list collapses to one column, leaving
     the card interior too narrow for the long "View organisation options" label
     — plus the 48px card padding and the decorative trailing arrow — so it
     wrapped to two lines. Drop the arrow (QC "bỏ icon") and tighten the inline
     padding so the label stays on one line. Block padding and the 44px touch
     target are untouched. Scoped to =<640px, so the desktop arrow affordance is
     kept. Applied to all three "View …" buttons for consistency. */
  .paragraph--path-card__button::after,
  .paragraph--pricing-card__button::after,
  .paragraph--checklist-cta__button::after {
    content: none;
  }

  .paragraph--pricing-card {
    padding: var(--space-32) var(--space-24);
  }

  /* Phone section geometry measured from the supplied 375px homepage frame.
     These overrides keep desktop rhythm intact while removing the accumulated
     vertical inflation caused by desktop-sized 64px bands and 40–48px card
     padding on a one-column layout. */
  .path-frontpage .paragraph--path-chooser,
  .path-frontpage .paragraph--feature-split,
  .path-frontpage .paragraph--numbered-steps,
  .path-frontpage .paragraph--checklist-cta,
  .path-frontpage .paragraph--pricing-section {
    padding-block: var(--space-40);
  }

  /* Section-by-section measurements from the 375px export. The path chooser
     retains the full 64px band, while the circular course image and pricing
     sections use the tighter 24px phone bands. */
  .path-frontpage .paragraph--path-chooser {
    padding-block: var(--space-64);
  }

  .path-frontpage .paragraph--split-content-image,
  .path-frontpage .paragraph--pricing-section {
    padding-block: var(--space-24);
  }

  .path-frontpage .paragraph--split-content-image {
    padding-block-end: var(--space-16);
  }

  .cyclein-page__main:has(.cyclein-section--why-offer) .paragraph--numbered-steps {
    padding-block: var(--space-40);
  }

  .path-frontpage .paragraph--benefit-grid {
    padding-block: 52px;
  }

  .path-frontpage .paragraph--path-chooser__header,
  .path-frontpage .paragraph--path-chooser__header {
    margin-block-end: var(--space-32);
  }

  .path-frontpage .paragraph--video-showcase__header {
    margin-block-end: 25px;
  }

  .path-frontpage .paragraph--path-chooser__cards,
  .path-frontpage .paragraph--feature-split__items,
  .path-frontpage .paragraph--pricing-section__list {
    gap: var(--space-16);
  }

  .path-frontpage .paragraph--path-card,
  .path-frontpage .paragraph--pricing-card {
    padding: var(--space-16);
  }

  .path-frontpage .paragraph--feature-split__inner,
  .path-frontpage .paragraph--split-content-image__inner {
    row-gap: var(--space-32);
  }

  .path-frontpage .paragraph--split-content-image__inner {
    row-gap: var(--space-12);
  }

  .path-frontpage .paragraph--checklist-cta__inner {
    row-gap: var(--space-24);
  }

  .path-frontpage .paragraph--checklist-cta__list {
    gap: var(--space-16);
  }

  .path-frontpage .paragraph--checklist-cta__panel {
    padding: var(--space-24);
  }

  .path-frontpage .paragraph--pricing-section__intro {
    margin-block-end: var(--space-32);
  }

  .paragraph--path-card__button,
  .paragraph--pricing-card__button,
  .paragraph--checklist-cta__button {
    padding-inline: var(--space-16);
  }

  .paragraph--benefit-grid__list {
    /* Two-up on phones with a smaller disc than the desktop 8–11rem (which
       otherwise stays pinned at its 8rem floor and reads oversized at 375px). */
    --benefit-disc: 5.5rem;
    gap: var(--space-32) var(--space-24);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .paragraph--numbered-steps__list {
    grid-template-columns: 1fr;
  }

  /* Certificate callout stacks to a left-aligned column on phones (Figma mobile):
     lime badge, then heading over body — not the centred column the base flex
     row would collapse to. */
  .paragraph--callout-banner__inner {
    align-items: flex-start;
    flex-direction: column;
    row-gap: var(--space-16);
    text-align: left;
  }

  /* Measured phone band padding: certificate 35px and pre-footer CTA 26px. */
  .paragraph--callout-banner {
    padding-block: 35px;
  }

  .paragraph--cta-banner {
    padding-block: 26px;
  }

  /* Mobile hero reflow (Figma mobile): instead of the copy sitting overlaid on
     the dark disc, it reads as black text on the lime with the circular photo
     stacked below the buttons. The disc leaves the absolute overlay and joins
     the flow via flex `order`. */
  .paragraph--hero {
    --hero-circle: min(88vw, 360px);
    --hero-reveal: 1;
    justify-content: flex-start;
    padding-block: var(--space-32);
    padding-inline: var(--space-16);
    row-gap: 29px;
  }

  .path-frontpage .paragraph--hero {
    --hero-circle: min(calc(100vw - (var(--layout-edge-padding) * 2)), 360px);
    min-block-size: 778px;
  }

  .paragraph--hero__media {
    block-size: var(--hero-circle);
    inline-size: var(--hero-circle);
    inset: auto;
    margin-inline: auto;
    order: 1;
    position: static;
    transform: none;
  }

  .paragraph--hero__scrim {
    display: none;
  }

  .paragraph--hero__content {
    align-items: flex-start;
    color: var(--color-brand-black);
    order: 0;
    text-align: left;
  }

  .paragraph--hero__heading {
    color: var(--color-brand-black);
    font-size: var(--type-mobile-h1-size);
    line-height: 1.2;
    text-shadow: none;
  }

  .paragraph--hero__intro {
    color: var(--color-brand-black);
    font-size: var(--type-mobile-body-large-size);
    margin-inline: 0;
    text-shadow: none;
  }

  /* The stat chips are not shown in the mobile hero. */
  .paragraph--hero__key-points {
    display: none;
  }

  .paragraph--hero__actions {
    inline-size: 100%;
    justify-content: flex-start;
    margin-block-start: var(--space-8);
  }

  .paragraph--hero__button {
    flex: 1 1 0;
  }

  .paragraph--video-showcase {
    padding-block: var(--space-24) var(--space-32);
  }

  .path-frontpage .paragraph--video-showcase__header {
    margin-block-end: 18px;
  }

  /* On the lime the secondary CTA is a filled dark-teal pill (white would be
     invisible against the surrounding lime), matching the mobile design. */
  .paragraph--hero__button--secondary.cyclein-button--secondary {
    background: var(--color-brand-black);
    border-color: var(--color-brand-black);
    color: var(--color-brand-white);
  }

  .paragraph--hero__button--secondary.cyclein-button--secondary:hover {
    background: var(--color-brand-black-hover);
    border-color: var(--color-brand-black-hover);
  }
}

/* Keep the transparent tablet header clear of the overlaid hero copy. */
@media (min-width: 641px) and (max-width: 1023px) {
  .paragraph--hero {
    min-block-size: calc((var(--hero-circle) * var(--hero-reveal)) + 99px);
  }
}

/* The supplied 375px lockup remains unchanged; scale only at the 320px floor. */
@media (max-width: 359px) {
  .paragraph--faq-section__heading,
  .paragraph--cta-banner__heading {
    font-size: 36px;
    line-height: 1.2;
  }
}

/**
 * Round-10 checklist r8: the homepage disc is a fixed size in the design, not a
 * ratio of the viewport. Reading the design export (specs/handover-page-FULL.json)
 * the "Ellipse 12" disc measures 804px on all three desktop frames — 1200, 1440
 * and 1920 — so the rule below pins it to that 804px at >=1200px. It only looked
 * like a viewport ratio at 1440 (804/1440 = 55.8%); an earlier `56.3vw` sizing
 * over-scaled the disc to 1081px at 1920 (34% oversized), which the fixed value
 * fixes. Below 1200px there is no design node data, so the disc keeps the base
 * circular-media sizing (its grid-column width). (Comment corrected — no `56.3vw`
 * rule remains in the CSS; issue E02-013.)
 */
@media (min-width: 1200px) {
  .path-frontpage .paragraph--split-content-image--image-circular .paragraph--split-content-image__media {
    inline-size: 804px;
  }

  /* The desktop frame clips the fixed 804px training photograph inside a
     692px section; it is not a contained 804px grid row. */
  .path-frontpage .paragraph--split-content-image--image-circular {
    block-size: 692px;
    overflow: hidden;
    padding-block: 0;
  }

  .path-frontpage .paragraph--split-content-image--image-circular .paragraph--split-content-image__inner {
    block-size: 100%;
    position: relative;
  }

  .path-frontpage .paragraph--split-content-image--image-circular .paragraph--split-content-image__media {
    inset-block-start: 0;
    inset-inline-end: calc(-1 * (max(0px, (100vw - var(--layout-max-width)) / 2) + 108px));
    margin: 0;
    position: absolute;
  }
}