/**
 * @file
 * CycleIn content catalogue pages (P002 /training, P003 /organisations,
 * P004 /pricing).
 *
 * Reuses the CycleIn design language established for the content pages
 * (home.css / content.css): full-width brand-coloured section bands
 * (dark teal / lime / green), rounded cards each with a lime, pink or dark-teal
 * circular icon, dark-teal accordion bars with chevrons, pink primary CTAs with
 * outlined secondary buttons, and centred section headings with subtext. All
 * values are driven from the C09 design tokens (tokens.css).
 */

.cyclein-catalogue-page {
  color: var(--color-brand-black);
  font-family: var(--font-family-base);
}

/* Flush the constrained page shell for catalogue routes. Like the hero-led
   landing pages, the catalogue pages render their own single page H1 hero and
   full-width section bands, so the theme's default vertical padding on the
   constrained <main> wrapper would otherwise show as a grey gap above the hero
   (header -> hero) and below the pre-footer CTA band (last band -> footer).
   The theme only flushes node-backed landing/doc pages; these controller routes
   are not node-backed, so neutralise that padding here whenever a catalogue
   shell is present. (Chrome owner: the cleaner fix is to treat the catalogue
   routes as flush in cyclein_public_preprocess_page so <main> renders
   `--flush`, matching landing pages.) */
.cyclein-page__main:has(.cyclein-catalogue-page) {
  padding-block: 0;
}

/* ==========================================================================
   Full-width bands. Each band breaks out of the constrained content region so
   its background spans the viewport, then re-pads to the centred content column
   so its inner content lines up with the rest of the page.
   ========================================================================== */

/* Checklist r23/r25/r26/r30/r34: `--cat-band-x` used to be declared on the
   `.cyclein-catalogue-page` shell emitted by CourseCataloguePageBuilder. Once
   /training and /organisations moved to node-backed paragraphs that wrapper
   left the DOM, so the custom property was undefined on every band. An
   undefined `var()` makes `padding-inline` invalid at computed-value time, so
   it fell back to its initial `0` — the bands went edge-to-edge and the card
   grids' rounded corners were sliced off at the viewport. Declaring the inset
   on the bands themselves resolves it under both the legacy shell and the
   paragraph render, and re-pads each band to the same centred content column
   (`.cyclein-region__inner`) the rest of the page uses. */
.cyclein-hero,
.cyclein-buy-box,
.cyclein-section {
  --cat-band-x: max(var(--layout-edge-padding), calc(50vw - var(--layout-max-width) / 2));
  box-sizing: border-box;
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
  padding-block: var(--space-80);
  padding-inline: var(--cat-band-x);
}

/* Section heading + subtext: centred display treatment. */
.cyclein-section > h2 {
  color: var(--color-brand-black);
  font-size: var(--type-h2-size);
  font-weight: var(--font-weight-black);
  line-height: var(--type-h2-line-height);
  margin: 0 auto var(--space-12);
  max-inline-size: 22ch;
  text-align: center;
  text-transform: uppercase;
}

.cyclein-section > p {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-large-size);
  margin: 0 auto var(--space-48);
  max-inline-size: 62ch;
  text-align: center;
}

/* ==========================================================================
   Buttons.
   ========================================================================== */

.cyclein-button {
  align-items: center;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-bold);
  gap: var(--space-8);
  justify-content: center;
  line-height: var(--type-button-line-height);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-12) var(--space-32);
  text-align: center;
  text-decoration: none;
}

/* Primary CTA: brand pink filled with white text. */
.cyclein-button--primary {
  background-color: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
}

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

/* Secondary CTA: outlined dark teal (default light-band treatment). */
.cyclein-button--secondary {
  background-color: transparent;
  border-color: var(--color-brand-black);
  color: var(--color-brand-black);
}

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

.cyclein-button:focus-visible,
.cyclein-accordion__trigger:focus-visible {
  outline: var(--a11y-focus-ring-outer) solid var(--color-focus);
  outline-offset: var(--a11y-focus-offset);
}

.cyclein-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  align-items: center;
}

.cyclein-link {
  color: var(--color-brand-black);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.cyclein-link:hover {
  color: var(--color-brand-pink);
}

/* Catalogue hero + inset-callout CTAs carry a trailing right-arrow glyph. */
.cyclein-hero__actions .cyclein-button::after,
.cyclein-section--callout-inset .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;
}

/* ==========================================================================
   Hero (dark teal, white copy, brand photograph disc).
   ========================================================================== */

.cyclein-hero {
  /* Round-12 CD9: the disc was sized off its own grid column (~35rem) capped at
     48rem, which at the QC viewport left it under-scaled and parked too far
     right of centre. The Figma hero disc is a viewport-scaled circle whose left
     arc sits near the band centre and whose right side is cut by the band edge.
     A larger bleed (was 3rem) plus a viewport-relative diameter below reproduces
     that framing on /training and every page reusing paragraph_course_hero. */
  --cat-hero-bleed: 15rem;
  background: var(--color-brand-black);
  color: var(--color-brand-white);
  /* Clips the hero disc where it runs past the band's right edge (r22/r29) and
     keeps the overhang from opening a horizontal scrollbar on the 100vw band. */
  overflow: hidden;
  padding-block: var(--space-72);
}

.cyclein-hero__inner {
  align-items: center;
  column-gap: var(--space-64);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  margin-inline: auto;
  max-inline-size: var(--layout-max-width);
}

.cyclein-hero--text-only .cyclein-hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

.cyclein-hero__content h1 {
  color: var(--color-brand-white);
  font-size: clamp(2.75rem, 5.2vw, 4.4rem);
  font-weight: var(--font-weight-black);
  line-height: 1.04;
  margin: 0 0 var(--space-24);
  text-transform: uppercase;
}

.cyclein-hero__content p {
  color: var(--color-brand-black-tint);
  font-size: var(--type-body-large-size);
  margin: 0 0 var(--space-32);
  max-inline-size: 46ch;
}

/* Keep optional editor-owned hero actions on one wrapping row. */
.cyclein-hero__actions {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-start: var(--space-8);
}

/* Round-1 checklist r7: the design puts both hero CTAs on a single row, but the
   pair measured 621px against a 596px content column at the 1200px cap, so the
   second pill dropped to its own line on /organisations. The catalogue pills
   carried 32px of inline padding where the design draws 24px; taking that back
   returns ~32px and seats the pair at 589px, inside the column. Below the
   1440px frame the column is genuinely too narrow for both pills, so wrapping
   stays the correct responsive behaviour there and `nowrap` is only asserted at
   the width the design was drawn for. */
.cyclein-hero__actions .cyclein-button {
  padding-inline: var(--space-24);
}

@media (min-width: 1440px) {
  .cyclein-hero__actions {
    flex-wrap: nowrap;
  }

  .cyclein-hero__actions .cyclein-button {
    white-space: nowrap;
  }
}

/* The hero primary CTA is the brand pink pill from the Figma hero. */
.cyclein-hero__actions .cyclein-button--primary {
  background-color: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-white);
  padding-inline-end: 40px;
}

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

/* Hero secondary CTA reads as a light filled pill on the dark band. */
.cyclein-hero .cyclein-button--secondary {
  background-color: var(--color-brand-white);
  border-color: var(--color-brand-white);
  color: var(--color-brand-black);
}

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

/* Checklist r6 + r19 + r22 + r29: the hero disc bleeds out of the content
   column rather than sitting inside it. Previously it was capped at its own
   grid column (34rem), which left it at ~0.79 of the band height with a wide
   dark gutter between the disc and the viewport edge; the Figma disc spans the
   full band height and is cut by the band's right edge. Cancelling the band's
   inline padding plus a small overshoot pushes it past that edge, and the
   negative block margins let it span the band's vertical padding, so the hero
   clips it (see `overflow` on `.cyclein-hero`). */
.cyclein-hero__media {
  aspect-ratio: 1;
  border-radius: 50%;
  inline-size: min(66vw, 60rem);
  justify-self: end;
  margin-block: calc(-1 * var(--space-72));
  margin-inline-end: calc(-1 * (var(--cat-band-x) + var(--cat-hero-bleed)));
  overflow: hidden;
}

.cyclein-hero__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* Desktop Figma geometry is fixed rather than content-driven: a 760px band
   clips a 960px disc at x=724/y=-65 in the 1440px frame. Letting the disc take
   part in grid sizing made both catalogue heroes 950px tall. */
@media (min-width: 1024px) {
  .cyclein-hero {
    block-size: 760px;
    padding-block: 0;
  }

  .cyclein-hero__inner {
    block-size: 100%;
    position: relative;
  }

  .cyclein-hero__content {
    grid-column: 1;
    position: relative;
    z-index: 1;
  }

  .cyclein-hero__media {
    block-size: 960px;
    inline-size: 960px;
    inset-block-start: -65px;
    inset-inline-start: calc(50% + 4px);
    justify-self: auto;
    margin: 0;
    position: absolute;
  }
}

/* ==========================================================================
   Individual buy box (light band, two columns: lead + white price card).
   ========================================================================== */

.cyclein-buy-box {
  background: var(--color-green-light);
}

.cyclein-buy-box__inner {
  align-items: center;
  column-gap: var(--space-64);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-inline: auto;
  max-inline-size: var(--layout-max-width);
}

.cyclein-buy-box__lead h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--font-weight-black);
  line-height: var(--type-h2-line-height);
  margin: 0 0 var(--space-16);
}

.cyclein-buy-box__lead > p {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-large-size);
  margin: 0 0 var(--space-24);
}

/* Descriptive product body copy beneath the at-a-glance chips. */
.cyclein-buy-box__body {
  display: grid;
  gap: var(--space-16);
  margin-block-start: var(--space-24);
}

.cyclein-buy-box__body p {
  color: var(--color-brand-black-muted);
  margin: 0;
  max-inline-size: 52ch;
}

.cyclein-buy-box__card {
  background: var(--color-white);
  border-radius: var(--radius-24);
  box-shadow: 0 24px 48px rgba(6, 51, 53, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-40);
}

.cyclein-buy-box__badge {
  align-self: flex-start;
  color: var(--color-brand-black-muted);
  font-size: var(--type-mobile-label-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Buy now only: the product name and description come from the synced
   catalogue, so the card carries them between the badge and the price. */
.cyclein-buy-box__product {
  font-size: var(--type-body-large-size);
  font-weight: var(--font-weight-black);
  margin: 0;
}

.cyclein-buy-box__product-body {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-size);
}

.cyclein-buy-box__product-body p {
  margin: 0;
}

.cyclein-buy-box__price {
  align-items: baseline;
  display: flex;
  gap: var(--space-8);
  margin: 0;
}

.cyclein-buy-box__amount {
  font-size: var(--type-h1-size);
  font-weight: var(--font-weight-black);
  line-height: 1;
}

.cyclein-buy-box__vat {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-bold);
}

.cyclein-buy-box__points,
.cyclein-buy-box__product-body ul {
  display: grid;
  gap: var(--space-12);
  list-style: none;
  margin: var(--space-8) 0;
  padding: 0;
}

.cyclein-buy-box__points li,
.cyclein-buy-box__product-body li {
  padding-inline-start: var(--space-32);
  position: relative;
}

.cyclein-buy-box__points li::before,
.cyclein-buy-box__product-body li::before {
  background: var(--color-brand-yellow);
  block-size: var(--space-24);
  border-radius: var(--radius-pill);
  content: "";
  inline-size: var(--space-24);
  inset-block-start: 0.1em;
  inset-inline-start: 0;
  position: absolute;
}

.cyclein-buy-box__points li::after,
.cyclein-buy-box__product-body li::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063335' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E") center / 14px no-repeat;
  block-size: var(--space-24);
  content: "";
  inline-size: var(--space-24);
  inset-block-start: 0.1em;
  inset-inline-start: 0;
  position: absolute;
}

.cyclein-buy-box__card .cyclein-link {
  text-align: center;
}

/* Checklist r8: the organisation prompt is a muted caption above its own action
   link, not one run-on link. */
.cyclein-buy-box__org {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.cyclein-buy-box__org-prompt {
  color: var(--color-brand-black-muted);
  font-size: var(--type-mobile-label-size);
}

.cyclein-buy-box__org .cyclein-button {
  align-self: center;
  background: transparent;
  border: 0;
  color: var(--color-brand-black);
  min-block-size: auto;
  padding: 0;
  text-decoration: underline;
}

.cyclein-buy-box__card > .cyclein-button--primary {
  inline-size: 100%;
  justify-content: center;
}

/* Product at-a-glance chips. */
.cyclein-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}

/* Checklist r7 + round-8 r19/r24: at-a-glance chips are white pills with a 1px
   bright-GREEN outline (the brand lime, #00ff00) — not grey, and not the yellow
   the conflated token previously produced. */
.cyclein-chip {
  background: var(--color-white);
  border: 1px solid var(--color-brand-lime);
  border-radius: var(--radius-pill);
  font-size: var(--type-mobile-label-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  padding: var(--space-8) var(--space-16);
}

/* ==========================================================================
   Card grids + circular icon badges.
   ========================================================================== */

/* Checklist r23/r30/r34: the Figma columns are separated by ~2.4% of the
   viewport against a ~27% card, i.e. a gap of ~9% of the card width. Scaled to
   the centred content column that gives ~34px, so the grid steps up from the
   24px gutter to 32px. */
.cyclein-card-grid {
  display: grid;
  gap: var(--space-32);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cyclein-card {
  border-radius: var(--radius-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
}

.cyclein-card::before {
  align-items: center;
  background-color: var(--color-brand-black);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 55%;
  block-size: var(--space-56);
  border-radius: var(--radius-pill);
  content: "";
  display: flex;
  flex: 0 0 auto;
  inline-size: var(--space-56);
  justify-content: center;
}

.cyclein-card h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  margin: 0;
}

.cyclein-card p {
  margin: 0;
}

/* Cards that lead with a circular cyclist photograph (What you'll learn / Why
   choose CycleIn) swap the icon medallion for the photo disc. */
.cyclein-card--has-media::before {
  content: none;
}

.cyclein-card__media {
  align-self: center;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
  inline-size: min(100%, 12.5rem);
  margin-block-end: var(--space-8);
  overflow: hidden;
}

.cyclein-card__image {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

/* What you'll learn: lime cards, each led by a circular cyclist photo. */
.cyclein-section--learn {
  background: var(--color-white);
}

.cyclein-section--learn .cyclein-card {
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
}

/* Who is CycleIn for: dark teal band, teal cards, lime number badges. */
.cyclein-section--audience {
  background: var(--color-brand-black);
}

.cyclein-section--audience > h2 {
  color: var(--color-brand-white);
}

.cyclein-section--audience > p {
  color: var(--color-brand-black-tint);
}

.cyclein-section--audience .cyclein-card-grid {
  counter-reset: cyclein-audience;
}

/**
 * Checklist r11: the prototype cards are transparent on the dark-teal band with
 * a thin light outline (not solid charcoal fills) and each is led by a lime
 * circular topic glyph (not a number badge).
 *
 * Round-10 checklist r14 (icon half): three of the six glyphs were redrawn
 * lookalikes that did not match the design — a briefcase for "Cycling for work",
 * a bell for "leisure or wellbeing" and a lightning bolt for "E-bike users".
 * They are now the design's own exported artwork, re-inked to the disc colour.
 * From "WHO IS CYCLEIN FOR?" (specs/handover-page-FULL.json node 318:21595),
 * whose card order matches this config's order exactly:
 *
 *   Cycling for work                   Icon/delivery   20-delivery.svg
 *   Cycling to work                    Icon/bike       06-bicycle.svg
 *   Cycling for leisure or wellbeing   Icon/park       25-tree.svg
 *   Parents and carers                 Icon/parent     21-accessibility.svg
 *   Students and young people          Icon/student    24-graduation-cap.svg
 *   E-bike users                       Icon/e-bike     23-logistics.svg
 *
 * The export filenames are auto-generated and mislead: 21-accessibility is an
 * adult-and-child figure (Material's parent glyph) and 23-logistics is an
 * e-scooter, so each was matched by rendering the artwork, not by its name.
 *
 * The design inks these #063335 on an #e3ff42 disc, which the tokens below
 * already resolve to, so only the artwork changed.
 */
.cyclein-section--audience .cyclein-card {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-brand-white) 22%, transparent);
  color: var(--color-brand-black-tint);
}

.cyclein-section--audience .cyclein-card h3 {
  color: var(--color-brand-white);
}

.cyclein-section--audience .cyclein-card::before {
  background-color: var(--color-brand-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 105 24 28' fill='none'%3E%3Cpath d='M219 112C219 110.9 218.1 110 217 110H214V112H217V114.65L213.52 119H210V114H206C203.79 114 202 115.79 202 118V121H204C204 122.66 205.34 124 207 124C208.66 124 210 122.66 210 121H214.48L219 115.35V112ZM204 119V118C204 116.9 204.9 116 206 116H208V119H204ZM207 122C206.45 122 206 121.55 206 121H208C208 121.55 207.55 122 207 122Z' fill='%23063335' /%3E%3Cpath d='M210 111H205V113H210V111Z' fill='%23063335' /%3E%3Cpath d='M219 118C217.34 118 216 119.34 216 121C216 122.66 217.34 124 219 124C220.66 124 222 122.66 222 121C222 119.34 220.66 118 219 118ZM219 122C218.45 122 218 121.55 218 121C218 120.45 218.45 120 219 120C219.55 120 220 120.45 220 121C220 121.55 219.55 122 219 122Z' fill='%23063335' /%3E%3C/svg%3E");
  color: var(--color-brand-black);
}

.cyclein-section--audience .cyclein-card:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 0 24 24' fill='none'%3E%3Cpath d='M218.5 20.5625C220.433 20.5625 222 19.0281 222 17.1354C222 15.2427 220.433 13.7083 218.5 13.7083C216.567 13.7083 215 15.2427 215 17.1354C215 19.0281 216.567 20.5625 218.5 20.5625Z' stroke='%23063335' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M205.5 20.5625C207.433 20.5625 209 19.0281 209 17.1354C209 15.2427 207.433 13.7083 205.5 13.7083C203.567 13.7083 202 15.2427 202 17.1354C202 19.0281 203.567 20.5625 205.5 20.5625Z' stroke='%23063335' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M215 5.87502C215.552 5.87502 216 5.43663 216 4.89585C216 4.35507 215.552 3.91669 215 3.91669C214.448 3.91669 214 4.35507 214 4.89585C214 5.43663 214.448 5.87502 215 5.87502Z' stroke='%23063335' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M212 17.1354V13.7083L209 10.7708L213 7.83331L215 10.7708H217' stroke='%23063335' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}

.cyclein-section--audience .cyclein-card:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 158 24 24' fill='none'%3E%3Cpath d='M136.95 169.5H138.95L131.95 159.5L125 169.5H126.95L123.05 175.5H129.97V179.5H133.92V175.5H140.95L136.95 169.5ZM126.74 173.5L130.64 167.5H128.83L131.96 163L135.11 167.5H133.21L137.21 173.5H126.74Z' fill='%23063335' /%3E%3C/svg%3E");
}

.cyclein-section--audience .cyclein-card:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='240 105 24 28' fill='none'%3E%3Cpath d='M247 107C248.1 107 249 107.9 249 109C249 110.1 248.1 111 247 111C245.9 111 245 110.1 245 109C245 107.9 245.9 107 247 107ZM256 114.5C256 115.33 256.67 116 257.5 116C258.33 116 259 115.33 259 114.5C259 113.67 258.33 113 257.5 113C256.67 113 256 113.67 256 114.5ZM259 117H256.16C255.58 117.01 255.02 117.32 254.71 117.86L253.79 119.18L250.22 113C249.85 112.37 249.19 112.01 248.51 112H245.5C244.4 112 243.5 112.9 243.5 114V120H245V127H250V116.61L252.53 121H254.73L255.5 119.9V127H259.5V122H260.5V118.5C260.5 117.68 259.83 117 259 117Z' fill='%23063335' /%3E%3C/svg%3E");
}

.cyclein-section--audience .cyclein-card:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='80 158 24 24' fill='none'%3E%3Cpath d='M92 160.5L81 166.5L85 168.68V174.68L92 178.5L99 174.68V168.68L101 167.59V174.5H103V166.5L92 160.5ZM98.82 166.5L92 170.22L85.18 166.5L92 162.78L98.82 166.5ZM97 173.49L92 176.22L87 173.49V169.77L92 172.5L97 169.77V173.49Z' fill='%23063335' /%3E%3C/svg%3E");
}

.cyclein-section--audience .cyclein-card:nth-child(6)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 158 24 24' fill='none'%3E%3Cpath d='M47.8212 173.5H55.0012V172.5C55.0012 170.29 56.7912 168.5 59.0012 168.5H59.7412L57.8412 160.06C57.6312 159.15 56.8212 158.5 55.8912 158.5H52.0012V160.5H55.8912L57.2912 166.75H57.2812C55.1212 167.4 53.4712 169.23 53.0912 171.5H47.8212C47.3412 170.16 45.9612 169.26 44.4012 169.56C43.2212 169.79 42.2712 170.76 42.0512 171.94C41.7012 173.84 43.1612 175.5 45.0012 175.5C46.3012 175.5 47.4012 174.66 47.8212 173.5ZM45.0012 173.5C44.4512 173.5 44.0012 173.05 44.0012 172.5C44.0012 171.95 44.4512 171.5 45.0012 171.5C45.5512 171.5 46.0012 171.95 46.0012 172.5C46.0012 173.05 45.5512 173.5 45.0012 173.5Z' fill='%23063335' /%3E%3Cpath d='M59.0012 169.5C57.3412 169.5 56.0012 170.84 56.0012 172.5C56.0012 174.16 57.3412 175.5 59.0012 175.5C60.6612 175.5 62.0012 174.16 62.0012 172.5C62.0012 170.84 60.6612 169.5 59.0012 169.5ZM59.0012 173.5C58.4512 173.5 58.0012 173.05 58.0012 172.5C58.0012 171.95 58.4512 171.5 59.0012 171.5C59.5512 171.5 60.0012 171.95 60.0012 172.5C60.0012 173.05 59.5512 173.5 59.0012 173.5Z' fill='%23063335' /%3E%3Cpath d='M51.0012 177.5H47.0012L53.0012 180.5V178.5H57.0012L51.0012 175.5V177.5Z' fill='%23063335' /%3E%3C/svg%3E");
}

/* Why choose CycleIn: bright green cards, each led by a circular cyclist photo.
   Round-8 r26: the Figma paints these cards in the brand green (#00ff00) — the
   section previously rendered with the lime/yellow "learn" variant. */
.cyclein-section--why {
  background: var(--color-white);
}

.cyclein-section--why .cyclein-card {
  background: var(--color-brand-lime);
  color: var(--color-brand-black);
}

/* Why offer CycleIn (organisations): light band, white cards, lime icon. */
.cyclein-section--why-offer {
  background: var(--color-green-light);
}

.cyclein-section--why-offer .cyclein-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cyclein-section--why-offer .cyclein-card {
  background: var(--color-white);
  border: 1px solid var(--color-brand-black-tint);
  color: var(--color-brand-black);
}

.cyclein-section--why-offer .cyclein-card p {
  color: var(--color-brand-black-muted);
}

/**
 * Round-10 checklist r13: lime medallions with a dark-teal glyph per benefit.
 *
 * The glyphs are the design's own artwork, not redrawn approximations — the
 * paths come from the exported component SVGs in
 * 00-project-input/_reference/designs/Icon/, re-inked to the disc's ink colour.
 * The design (specs/handover-page-FULL.json, "Why Offer CyCleIn?" node
 * 318:22193) pairs each card with a named Material Symbols component, matched
 * to its export by glyph vector count:
 *
 *   Support staff wellbeing and safety  Icon/Shield       05-shield.svg   (1)
 *   Encourage active travel             Icon/bike         06-bicycle.svg  (4)
 *   Reduce travel pressures             Icon/commute      26-vehicle.svg  (1)
 *   Use with your LMS                   Icon/sync         27-refresh.svg  (1)
 *
 * The design inks these #063335 on an #e3ff42 disc, which is what the tokens
 * below already resolve to, so only the artwork changed here.
 *
 * Shield and bike are stroked while commute and sync are filled — that is how
 * the design's own exports are drawn, so each keeps its source ink model.
 *
 * Cards render in a fixed config order, so the glyphs are keyed by position.
 */
.cyclein-section--why-offer .cyclein-card::before {
  background-color: var(--color-brand-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='160 0 24 24' fill='none'%3E%3Cpath d='M180.001 12.7292C180.001 17.625 176.501 20.0729 172.341 21.4927C172.123 21.565 171.887 21.5615 171.671 21.4829C167.501 20.0729 164.001 17.625 164.001 12.7292V5.87499C164.001 5.6153 164.106 5.36625 164.294 5.18262C164.481 4.99899 164.736 4.89583 165.001 4.89583C167.001 4.89583 169.501 3.72083 171.241 2.23249C171.453 2.05526 171.722 1.95789 172.001 1.95789C172.28 1.95789 172.549 2.05526 172.761 2.23249C174.511 3.73062 177.001 4.89583 179.001 4.89583C179.266 4.89583 179.521 4.99899 179.708 5.18262C179.896 5.36625 180.001 5.6153 180.001 5.87499V12.7292Z' stroke='%23063335' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}

.cyclein-section--why-offer .cyclein-card:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 0 24 24' fill='none'%3E%3Cpath d='M218.5 20.5625C220.433 20.5625 222 19.0281 222 17.1354C222 15.2427 220.433 13.7083 218.5 13.7083C216.567 13.7083 215 15.2427 215 17.1354C215 19.0281 216.567 20.5625 218.5 20.5625Z' stroke='%23063335' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M205.5 20.5625C207.433 20.5625 209 19.0281 209 17.1354C209 15.2427 207.433 13.7083 205.5 13.7083C203.567 13.7083 202 15.2427 202 17.1354C202 19.0281 203.567 20.5625 205.5 20.5625Z' stroke='%23063335' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M215 5.87502C215.552 5.87502 216 5.43663 216 4.89585C216 4.35507 215.552 3.91669 215 3.91669C214.448 3.91669 214 4.35507 214 4.89585C214 5.43663 214.448 5.87502 215 5.87502Z' stroke='%23063335' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M212 17.1354V13.7083L209 10.7708L213 7.83331L215 10.7708H217' stroke='%23063335' stroke-width='2.33333' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}

.cyclein-section--why-offer .cyclein-card:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='160 158 24 24' fill='none'%3E%3Cpath d='M172 161.5H165C163.34 161.5 162 162.84 162 164.5V172.5C162 174.16 163.34 175.5 165 175.5L164 176.5V177.5H165L167 175.5H169V170.5H164V163.5H173V165.5H175V164.5C175 162.84 173.66 161.5 172 161.5ZM165 171.5C165.55 171.5 166 171.95 166 172.5C166 173.05 165.55 173.5 165 173.5C164.45 173.5 164 173.05 164 172.5C164 171.95 164.45 171.5 165 171.5ZM180.57 167.16C180.43 166.76 180.05 166.5 179.6 166.5H172.41C171.95 166.5 171.58 166.76 171.43 167.16L170.01 171.27V176.78C170.01 177.16 170.32 177.5 170.7 177.5H171.32C171.7 177.5 172 177.12 172 176.74V175.5H180V176.74C180 177.12 180.31 177.5 180.69 177.5H181.3C181.68 177.5 181.99 177.16 181.99 176.78L182 175.41V171.27L180.57 167.16ZM172.41 167.5H179.6L180.63 170.5H171.38L172.41 167.5ZM172 173.5C171.45 173.5 171 173.05 171 172.5C171 171.95 171.45 171.5 172 171.5C172.55 171.5 173 171.95 173 172.5C173 173.05 172.55 173.5 172 173.5ZM180 173.5C179.45 173.5 179 173.05 179 172.5C179 171.95 179.45 171.5 180 171.5C180.55 171.5 181 171.95 181 172.5C181 173.05 180.55 173.5 180 173.5Z' fill='%23063335' /%3E%3C/svg%3E");
}

.cyclein-section--why-offer .cyclein-card:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 158 24 24' fill='none'%3E%3Cpath d='M212 161.5V158.5L208 162.5L212 166.5V163.5C215.31 163.5 218 166.19 218 169.5C218 170.51 217.75 171.47 217.3 172.3L218.76 173.76C219.54 172.53 220 171.07 220 169.5C220 165.08 216.42 161.5 212 161.5ZM212 175.5C208.69 175.5 206 172.81 206 169.5C206 168.49 206.25 167.53 206.7 166.7L205.24 165.24C204.46 166.47 204 167.93 204 169.5C204 173.92 207.58 177.5 212 177.5V180.5L216 176.5L212 172.5V175.5Z' fill='%23063335' /%3E%3C/svg%3E");
}

/* LMS access (organisations): soft lime-tint band, dark teal cards, pink icon.
   Uses the muted lime-tint (not the vivid lime) so it reads distinctly from the
   vivid-lime certificate band lower on the page. */
.cyclein-section--lms {
  background: var(--color-brand-lime-tint);
}

.cyclein-section--lms > p {
  color: var(--color-brand-black);
}

.cyclein-section--lms .cyclein-card {
  background: var(--color-brand-black);
  color: var(--color-brand-black-tint);
}

.cyclein-section--lms .cyclein-card h3 {
  color: var(--color-brand-white);
}

/**
 * Round-10 checklist r17 (refining round-9 r24): the three LMS-access cards
 * each carry a distinct white glyph on a pink disc, not the same icon repeated.
 *
 * As with r13 above, the paths are the design's exported artwork rather than
 * redrawn lookalikes. From "LMS AccESS" (node 318:22312):
 *
 *   Use your own LMS        Icon/sync              27-refresh.svg   (1)
 *   Track learner progress  Icon/trending_up       28-chart-up.svg  (1)
 *   Ask about SCORM         Icon/contact_support   29-help-pin.svg  (1)
 *
 * Icon/sync appears here and in r13's grid, inked #ffffff on the #d41166 disc
 * here and #063335 on lime there — same artwork, different ink, so the colour
 * is carried in each data URI rather than shared.
 */
.cyclein-section--lms .cyclein-card::before {
  background-color: var(--color-brand-pink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 158 24 24' fill='none'%3E%3Cpath d='M212 161.5V158.5L208 162.5L212 166.5V163.5C215.31 163.5 218 166.19 218 169.5C218 170.51 217.75 171.47 217.3 172.3L218.76 173.76C219.54 172.53 220 171.07 220 169.5C220 165.08 216.42 161.5 212 161.5ZM212 175.5C208.69 175.5 206 172.81 206 169.5C206 168.49 206.25 167.53 206.7 166.7L205.24 165.24C204.46 166.47 204 167.93 204 169.5C204 173.92 207.58 177.5 212 177.5V180.5L216 176.5L212 172.5V175.5Z' fill='%23ffffff' /%3E%3C/svg%3E");
}

.cyclein-section--lms .cyclein-card:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='240 158 24 24' fill='none'%3E%3Cpath d='M256 163.5L258.29 165.79L253.41 170.67L249.41 166.67L242 174.09L243.41 175.5L249.41 169.5L253.41 173.5L259.71 167.21L262 169.5V163.5H256Z' fill='%23ffffff' /%3E%3C/svg%3E");
}

.cyclein-section--lms .cyclein-card:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 210 24 24' fill='none'%3E%3Cpath d='M11.5 233.295V229.695C6.49 229.435 2.5 225.275 2.5 220.205C2.5 214.965 6.76 210.705 12 210.705C17.24 210.705 21.5 214.965 21.5 220.205C21.5 225.155 18.06 230.135 12.93 232.605L11.5 233.295ZM12 212.705C7.86 212.705 4.5 216.065 4.5 220.205C4.5 224.345 7.86 227.705 12 227.705H13.5V230.005C17.14 227.705 19.5 223.925 19.5 220.205C19.5 216.065 16.14 212.705 12 212.705ZM11 224.205H13V226.205H11V224.205ZM13 222.705H11C11 219.455 14 219.705 14 217.705C14 216.605 13.1 215.705 12 215.705C10.9 215.705 10 216.605 10 217.705H8C8 215.495 9.79 213.705 12 213.705C14.21 213.705 16 215.495 16 217.705C16 220.205 13 220.455 13 222.705Z' fill='%23ffffff' /%3E%3C/svg%3E");
}

/* ==========================================================================
   Numbered steps ("How it works" — dark teal band).
   ========================================================================== */

.cyclein-section--steps {
  background: var(--color-brand-black);
}

.cyclein-section--steps > h2 {
  color: var(--color-brand-white);
}

.cyclein-section--steps > p {
  color: var(--color-brand-black-tint);
}

.cyclein-steps {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Checklist r22: transparent step cards with a thin light outline on the dark
   band (not solid charcoal fills), matching the prototype. */
.cyclein-step {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-brand-white) 22%, transparent);
  border-radius: var(--radius-24);
  padding: var(--space-32);
}

.cyclein-step__number {
  color: var(--color-brand-yellow);
  font-size: var(--type-h2-size);
  font-weight: var(--font-weight-black);
  line-height: 1;
  margin-block-end: var(--space-16);
}

.cyclein-step h3 {
  color: var(--color-brand-white);
  font-size: var(--type-h3-size);
  margin: 0 0 var(--space-8);
}

.cyclein-step p {
  color: var(--color-brand-black-tint);
  margin: 0;
}

/* ==========================================================================
   Callouts (inset panel, certificate medallion, pre-footer CTA banner).
   ========================================================================== */

.cyclein-callout__inner {
  margin-inline: auto;
  max-inline-size: var(--layout-max-width);
}

.cyclein-callout__text h2 {
  font-size: var(--type-h3-size);
  margin: 0 0 var(--space-8);
}

.cyclein-callout__text p {
  margin: 0;
}

/* Inset panel: rounded bordered strip with copy left, CTA right. */
.cyclein-section--callout-inset {
  padding-block: var(--space-48);
}

.cyclein-section--callout-inset .cyclein-callout__inner {
  align-items: center;
  border-radius: var(--radius-24);
  column-gap: var(--space-32);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: var(--space-32) var(--space-40);
  row-gap: var(--space-24);
}

.cyclein-section--callout-inset .cyclein-callout__text {
  flex: 1 1 22rem;
}

/* Checklist r12: the training inset is a light off-white panel with dark-teal
   copy and a dark-teal button (not the old dark-on-dark panel). */






/* Organisations inset sits on a light band: white panel, pink CTA. */

/* Checklist r21: white panel with a thin pink outline (not the plain grey
   border), matching the prototype's "Looking for individual access?" CTA. */




/* Certificate: lime band with a dark teal medallion card. */
.cyclein-section--callout-certificate {
  background: var(--color-brand-yellow);
  padding-block: var(--space-56);
}

/* Checklist r14 + r26: the certificate content sits directly on the flat lime
   band with dark-teal text — no dark rounded container card. */
.cyclein-section--callout-certificate .cyclein-callout__inner {
  align-items: center;
  color: var(--color-brand-black);
  column-gap: var(--space-32);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-24);
}

.cyclein-callout__icon {
  align-items: center;
  background: color-mix(in srgb, var(--color-brand-black) 12%, transparent);
  block-size: var(--space-72);
  border-radius: var(--radius-pill);
  display: inline-flex;
  flex: 0 0 auto;
  inline-size: var(--space-72);
  justify-content: center;
}

.cyclein-callout__icon::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23063335' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 14.5 8 22l4-2 4 2-1-7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  block-size: 55%;
  content: "";
  inline-size: 55%;
}

.cyclein-section--callout-certificate .cyclein-callout__text {
  flex: 1 1 22rem;
}

.cyclein-section--callout-certificate h2 {
  color: var(--color-brand-black);
  font-size: var(--type-h3-size);
}

.cyclein-section--callout-certificate .cyclein-callout__text p {
  color: var(--color-brand-black);
}

/* Pre-footer CTA banner: full-width dark teal, centred white copy. */
.cyclein-section--callout-cta {
  background: var(--color-brand-black);
  color: var(--color-brand-white);
  padding-block: var(--space-96);
  text-align: center;
}

.cyclein-section--callout-cta .cyclein-callout__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.cyclein-section--callout-cta .cyclein-callout__text h2 {
  color: var(--color-brand-white);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line-height);
  margin: 0 auto var(--space-16);
  max-inline-size: 20ch;
  text-transform: uppercase;
}

.cyclein-section--callout-cta .cyclein-callout__text p {
  color: var(--color-brand-black-tint);
  margin: 0 auto;
  max-inline-size: 52ch;
}

.cyclein-section--callout-cta .cyclein-callout__actions {
  justify-content: center;
  margin-block-start: var(--space-32);
}

.cyclein-section--callout-cta .cyclein-button--secondary {
  background: transparent;
  border-color: var(--color-brand-white);
  color: var(--color-brand-white);
}

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

/* ==========================================================================
   Course-content accordion (dark teal bars with chevrons).
   ========================================================================== */

.cyclein-section--course-content {
  background: var(--color-white);
}

.cyclein-accordion {
  display: grid;
  gap: var(--space-12);
  margin-inline: auto;
  max-inline-size: var(--layout-max-width);
}

.cyclein-accordion__item {
  border: 0;
}

.cyclein-accordion__trigger {
  align-items: center;
  background: var(--color-brand-black);
  border: 0;
  border-radius: var(--radius-8);
  color: var(--color-brand-white);
  cursor: pointer;
  display: flex;
  font: inherit;
  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-height: 44px;
  padding: var(--space-16) var(--space-24);
  text-align: start;
}

.cyclein-accordion__trigger:hover {
  background: var(--color-brand-black-hover);
}

.cyclein-accordion__trigger::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' 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;
  block-size: var(--space-24);
  content: "";
  flex: 0 0 auto;
  inline-size: var(--space-24);
  transition: transform 150ms ease;
}

.cyclein-accordion__trigger[aria-expanded="true"] {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.cyclein-accordion__trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.cyclein-accordion__panel {
  background: var(--color-green-light);
  border: 1px solid var(--color-brand-black-tint);
  border-block-start: 0;
  border-end-end-radius: var(--radius-8);
  border-end-start-radius: var(--radius-8);
  padding: var(--space-24);
}

.cyclein-accordion__panel[hidden] {
  display: none;
}

.cyclein-accordion__list {
  display: grid;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cyclein-accordion__list li {
  padding-inline-start: var(--space-24);
  position: relative;
}

.cyclein-accordion__list li::before {
  background: var(--color-brand-pink);
  block-size: var(--space-8);
  border-radius: var(--radius-pill);
  content: "";
  inline-size: var(--space-8);
  inset-block-start: 0.5em;
  inset-inline-start: var(--space-4);
  position: absolute;
}

/* ==========================================================================
   Pricing options.
   ========================================================================== */

/* Round-10 checklist r16: the design's licence-options band is #f0f0f0
   (--color-brand-white), not the slightly greener --color-green-light (#eff1f1)
   this used. Measured from the design export's "Section 5" fill. */
.cyclein-section--pricing-table {
  background: var(--color-brand-white);
}

.cyclein-pricing-table-wrapper {
  background: var(--color-white);
  border-radius: var(--radius-24);
  margin-inline: auto;
  max-inline-size: var(--layout-max-width);
  overflow-x: auto;
}

.cyclein-pricing-table {
  border-collapse: collapse;
  inline-size: 100%;
  min-inline-size: 40rem;
}

.cyclein-pricing-table caption {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Checklist r33: rows measured ~53px against the Figma's centred content
   column but rendered at 60px, so the vertical cell padding drops a step. */
.cyclein-pricing-table th,
.cyclein-pricing-table td {
  padding: var(--space-12) var(--space-24);
  text-align: left;
}

/**
 * Round-10 checklist r16: rule weights and colour, taken from the design export
 * rather than eyeballed. The design draws the header rule 4px and every row rule
 * 2px, both in #ccd3d3 (--color-brand-black-tint). The row rules were 1px in
 * --color-green-light-hover (#e6eaea), which is so close to the band that they
 * read as missing — the reported "thiếu line xanh".
 */
.cyclein-pricing-table thead th {
  border-block-end: 4px solid var(--color-brand-black-tint);
  color: var(--color-brand-black);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-black);
}

.cyclein-pricing-table tbody td {
  border-block-end: 2px solid var(--color-brand-black-tint);
  color: var(--color-brand-black);
}

.cyclein-pricing-table tbody tr:last-child td {
  border-block-end: 0;
}

/* Round-12 CD12: the design stripes the table — even body rows carry a light
   grey fill against the white base (Tier 1/3/5 in the pricing table). The web
   rendered every row white, so the zebra was missing. --color-brand-white
   (#f0f0f0) against the wrapper's #ffffff gives the subtle stripe the Figma
   draws. */
.cyclein-pricing-table tbody tr:nth-child(even) td {
  background: var(--color-brand-white);
}

.cyclein-pricing-table__mobile-user-band {
  display: none;
}

/* Checklist r33: the Figma renders the "Individual licence" row in the same
   regular weight as the tier rows — it carries no emphasis — so the row keeps
   only its semantic class and inherits the table's body weight. */

.cyclein-section--pricing-table .cyclein-actions,
.cyclein-section--pricing-table > p:last-of-type {
  text-align: center;
}

/* Checklist r33: the footnote is dark navy in the Figma, not muted grey. */
.cyclein-section--pricing-table > p:last-of-type {
  color: var(--color-brand-black);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-bold);
  margin-block: var(--space-24) 0;
}

/* ==========================================================================
   Pricing cards (P004 /pricing).
   ========================================================================== */

.cyclein-pricing-card-grid {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  max-inline-size: var(--layout-max-width);
}

.cyclein-pricing-card {
  border-radius: var(--radius-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-40);
}

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

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

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

.cyclein-pricing-card--featured h3 {
  color: var(--color-brand-white);
}

.cyclein-pricing-card__price {
  font-size: clamp(var(--type-h3-size), 2.4vw, var(--type-h2-size));
  font-weight: var(--font-weight-black);
  line-height: 1;
}

.cyclein-pricing-card--featured .cyclein-pricing-card__price {
  align-self: flex-start;
  background: var(--color-brand-yellow);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  font-size: var(--type-body-large-size);
  padding: var(--space-8) var(--space-16);
}

.cyclein-pricing-card p {
  margin: 0;
}

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

.cyclein-pricing-card > .cyclein-button {
  margin-block-start: auto;
  padding-block-start: var(--space-8);
}

/* ==========================================================================
   Organisation enquiry section: form plus supporting sidebar.
   ========================================================================== */

.cyclein-enquiry-slot {
  background: var(--color-brand-white);
}

.cyclein-enquiry-slot__inner {
  margin-inline: auto;
  max-inline-size: var(--layout-max-width);
}

.cyclein-enquiry-slot__inner > h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--font-weight-black);
  margin: 0 0 var(--space-12);
}

.cyclein-enquiry-slot__inner > p {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-large-size);
  margin: 0;
  max-inline-size: 70ch;
}

.cyclein-enquiry-slot__content {
  margin-block-start: var(--space-32);
}

.cyclein-enquiry-slot__content .field--name-field-cta a {
  align-items: center;
  background: var(--color-brand-pink);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  display: inline-flex;
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-bold);
  gap: var(--space-8);
  min-block-size: var(--a11y-min-target);
  padding: var(--space-12) var(--space-24);
  text-decoration: none;
}

.cyclein-enquiry-slot__content .field--name-field-cta a::after {
  content: "\2192";
}

/* Two-column enquiry band: form on the left, supporting cards on the right.
   The single-column fallback below 1023px lives in the responsive section. */
.cyclein-enquiry-slot__layout {
  column-gap: var(--space-32);
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  margin-block-start: var(--space-40);
}

.cyclein-enquiry-slot__layout--success {
  column-gap: var(--space-24);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cyclein-enquiry-slot__layout--success > .cyclein-enquiry-slot__form {
  grid-column: span 8;
}

.cyclein-enquiry-slot__layout--success > .cyclein-enquiry-slot__aside {
  grid-column: span 4;
}

.cyclein-enquiry-slot__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* --------------------------------------------------------------------------
   Enquiry form card.
   -------------------------------------------------------------------------- */

.cyclein-enquiry-form__card {
  background: var(--color-white);
  border-radius: var(--radius-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
}

.cyclein-enquiry-form__card-title {
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-black);
  margin: 0;
}

.cyclein-enquiry-form__card-lede {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-size);
  margin: calc(var(--space-16) * -1) 0 0;
}

.cyclein-enquiry-form__row {
  column-gap: var(--space-24);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.cyclein-enquiry-form .form-item {
  margin: 0;
}

.cyclein-enquiry-form label,
.cyclein-enquiry-form .fieldset-legend {
  color: var(--color-brand-black);
  display: block;
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-label-line-height);
  margin-block-end: var(--space-8);
}

.cyclein-enquiry-form .form-required::after {
  color: var(--color-brand-pink);
  content: " *";
}

.cyclein-enquiry-form .description {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-size);
  margin-block-end: var(--space-8);
}

.cyclein-enquiry-form input[type="text"],
.cyclein-enquiry-form input[type="email"],
.cyclein-enquiry-form input[type="tel"],
.cyclein-enquiry-form input[type="number"],
.cyclein-enquiry-form textarea {
  background: var(--color-white);
  border: 1px solid var(--color-brand-black-muted);
  border-radius: var(--radius-8);
  box-sizing: border-box;
  color: var(--color-brand-black);
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  inline-size: 100%;
  line-height: var(--type-body-line-height);
  min-block-size: var(--a11y-min-target);
  padding: var(--space-12) var(--space-16);
}

.cyclein-enquiry-form textarea {
  min-block-size: 7.5rem;
  resize: vertical;
}

.cyclein-enquiry-form ::placeholder {
  color: var(--color-brand-black-muted);
  opacity: 1;
}

.cyclein-enquiry-form input:focus-visible,
.cyclein-enquiry-form textarea:focus-visible,
.cyclein-enquiry-form a:focus-visible {
  outline: var(--a11y-focus-ring-outer) solid var(--color-focus);
  outline-offset: var(--a11y-focus-offset);
}

/* Radio group: real fieldset/legend, with a visible box per option so the
   choice is never signalled by colour alone. */
.cyclein-enquiry-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.cyclein-enquiry-form .form-radios {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Round-3 checklist r3: the Figma lists the access-route options as plain radios
   (small standard circle + label), not the bordered "option cards" with 24px
   radios the form shipped. Drop the card chrome and use a standard radio size;
   the 44px touch target is preserved by the full-width clickable label row. */
.cyclein-enquiry-form .form-type-radio {
  align-items: center;
  display: flex;
  gap: var(--space-12);
  min-block-size: var(--a11y-min-target);
}

.cyclein-enquiry-form .form-type-radio label {
  align-items: center;
  display: flex;
  font-weight: var(--font-weight-regular);
  margin: 0;
  min-block-size: var(--a11y-min-target);
}

/* The visual radio is the standard small circle; the 44px touch target is carried
   by the full-height clickable label beside it. The global a11y rule pins inputs
   to a 44px min at specificity 1,1,0 (its :not(#id *) counts an id), so the size
   override needs !important to land — the target stays compliant via the label. */
.cyclein-enquiry-form input[type="radio"] {
  accent-color: var(--color-brand-pink);
  block-size: 1.125rem !important;
  flex: none;
  inline-size: 1.125rem !important;
  margin: 0;
  min-block-size: 1.125rem !important;
  min-inline-size: 1.125rem !important;
}

.cyclein-enquiry-form input[type="radio"]:focus-visible {
  outline: var(--a11y-focus-ring-outer) solid var(--color-focus);
  outline-offset: var(--a11y-focus-offset);
}

/* Errors carry a border, an icon-free text message and an explicit prefix, so
   the failure never depends on colour alone. */
.cyclein-enquiry-form input.error,
.cyclein-enquiry-form textarea.error {
  border-color: var(--color-error);
  border-width: 2px;
}

.cyclein-enquiry-form .form-item--error-message {
  color: var(--color-error);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-bold);
  margin-block-start: var(--space-8);
}

/* Round-3 checklist r4: the "Enquiry sent" confirmation card shown in place of
   the form after a successful submission, per the Figma frame. */
.cyclein-enquiry-success {
  background: var(--color-white);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-24);
  padding: var(--space-32);
}

.cyclein-enquiry-success__heading {
  align-items: center;
  display: flex;
  gap: var(--space-24);
  margin-block-end: var(--space-24);
}

.cyclein-enquiry-success__icon {
  align-items: center;
  background: var(--color-brand-lime-tint);
  block-size: var(--space-80);
  border-radius: var(--radius-pill);
  display: flex;
  flex: none;
  inline-size: var(--space-80);
  justify-content: center;
}

.cyclein-enquiry-success__icon::before {
  background: var(--color-success);
  block-size: var(--space-32);
  content: "";
  display: block;
  inline-size: var(--space-32);
  -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 13l4 4L19 7'/%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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cyclein-enquiry-success__title {
  color: var(--color-success);
  font-size: var(--type-h2-size);
  font-weight: var(--font-weight-black);
  line-height: var(--type-h2-line-height);
  margin: 0;
}

.cyclein-enquiry-success__lead {
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-16);
}

.cyclein-enquiry-success p {
  margin: 0 0 var(--space-16);
}

.cyclein-enquiry-success p:last-child {
  margin-block-end: 0;
}

.cyclein-enquiry-success__next-title {
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-black);
  margin: var(--space-32) 0 var(--space-16);
}

.cyclein-enquiry-form .form-actions {
  margin: 0;
}

.cyclein-enquiry-form__submit {
  background: var(--color-brand-pink);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-bold);
  inline-size: 100%;
  line-height: var(--type-button-line-height);
  min-block-size: var(--a11y-min-target);
  padding: var(--space-12) var(--space-24);
}

.cyclein-enquiry-form__submit:hover {
  background: var(--color-brand-pink-hover);
}

.cyclein-enquiry-form__submit:focus-visible {
  outline: var(--a11y-focus-ring-outer) solid var(--color-focus);
  outline-offset: var(--a11y-focus-offset);
}

.cyclein-enquiry-form__small-print {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-size);
  margin: 0;
}

.cyclein-enquiry-form__small-print a {
  color: var(--color-brand-black);
  display: block;
  margin-block-start: var(--space-8);
}

/* Honeypot: kept in the accessibility tree's blind spot rather than removed,
   so bots that ignore CSS still fill it in. */
.cyclein-enquiry-form__confirm {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Enquiry sidebar cards.
   -------------------------------------------------------------------------- */

.cyclein-enquiry-aside__card {
  background: var(--color-white);
  border-radius: var(--radius-8);
  padding: var(--space-24);
}

.cyclein-enquiry-aside__card--contact {
  border: 2px solid var(--color-brand-pink);
}

.cyclein-enquiry-slot__layout--success .cyclein-enquiry-aside__card--contact {
  border-radius: var(--radius-24);
}

.cyclein-enquiry-aside__title {
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-black);
  margin: 0 0 var(--space-16);
}

.cyclein-enquiry-aside__text,
.cyclein-enquiry-aside__hours {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-size);
  margin: 0 0 var(--space-16);
}

.cyclein-enquiry-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.cyclein-enquiry-steps__item {
  display: flex;
  gap: var(--space-12);
}

.cyclein-enquiry-steps__number {
  align-items: center;
  background: var(--color-brand-lime);
  block-size: var(--space-32);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: flex;
  flex: none;
  font-weight: var(--font-weight-bold);
  inline-size: var(--space-32);
  justify-content: center;
}

.cyclein-enquiry-steps__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cyclein-enquiry-steps__heading {
  color: var(--color-brand-black);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-bold);
}

.cyclein-enquiry-steps__text {
  color: var(--color-brand-black-muted);
  font-size: var(--type-body-size);
}

.cyclein-enquiry-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  list-style: none;
  margin: 0 0 var(--space-16);
  padding: 0;
}

.cyclein-enquiry-contact__item {
  color: var(--color-brand-black);
  font-size: var(--type-body-size);
}

.cyclein-enquiry-contact__item a {
  color: var(--color-brand-black);
}

.cyclein-enquiry-aside__action a {
  align-items: center;
  background: transparent;
  border: 2px solid var(--color-brand-black);
  border-radius: var(--radius-pill);
  color: var(--color-brand-black);
  display: inline-flex;
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-bold);
  gap: var(--space-8);
  min-block-size: var(--a11y-min-target);
  padding: var(--space-8) var(--space-24);
  text-decoration: none;
}

.cyclein-enquiry-aside__action a::after {
  content: "\2192";
}

.cyclein-enquiry-aside__action a:hover {
  background: var(--color-brand-white-hover);
}

.cyclein-enquiry-aside__action a:focus-visible {
  outline: var(--a11y-focus-ring-outer) solid var(--color-focus);
  outline-offset: var(--a11y-focus-offset);
}

.cyclein-enquiry-slot__layout--success .cyclein-enquiry-aside__action a {
  background: var(--color-brand-white);
  border: 0;
}

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

@media (max-width: 1023px) {
  .cyclein-hero,
  .cyclein-buy-box,
  .cyclein-section {
    padding-block: var(--space-64);
  }

  .cyclein-hero__inner,
  .cyclein-buy-box__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-40);
  }

  /* Single-column hero: the disc is centred in the flow, so drop the
     right/vertical bleed it uses on the two-column desktop band (r22/r29). */
  .cyclein-hero__media {
    inline-size: min(100%, 34rem);
    justify-self: center;
    margin-block: 0;
    margin-inline-end: 0;
    order: -1;
  }

  .cyclein-enquiry-slot__layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-40);
  }

  .cyclein-enquiry-slot__layout--success > :is(.cyclein-enquiry-slot__form, .cyclein-enquiry-slot__aside) {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .cyclein-page__main:has(.cyclein-section--learn) .cyclein-hero {
    padding-block: 54px;
  }

  .cyclein-page__main:has(.cyclein-section--why-offer) .cyclein-hero {
    padding-block: var(--space-32);
  }

  .cyclein-section--learn,
  .cyclein-section--audience,
  .cyclein-section--why-offer,
  .cyclein-section--lms,
  .cyclein-section--callout-inset {
    padding-block: var(--space-40);
  }

  .cyclein-section--audience .cyclein-card,
  .cyclein-section--why-offer .cyclein-card,
  .cyclein-section--lms .cyclein-card {
    padding: var(--space-16);
  }

  .cyclein-section--audience .cyclein-card-grid,
  .cyclein-section--why-offer .cyclein-card-grid,
  .cyclein-section--lms .cyclein-card-grid {
    gap: var(--space-16);
  }

  .cyclein-card-grid,
  .cyclein-section--why-offer .cyclein-card-grid,
  .cyclein-steps,
  .cyclein-pricing-card-grid,
  .cyclein-enquiry-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cyclein-enquiry-form__row {
    row-gap: var(--space-24);
  }

  .cyclein-enquiry-form__card {
    padding: var(--space-16);
  }

  .cyclein-hero__content h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .cyclein-section > h2,
  .cyclein-section--callout-cta .cyclein-callout__text h2 {
    font-size: var(--type-mobile-h2-size);
  }

  .cyclein-buy-box__amount {
    font-size: var(--type-mobile-h1-size);
  }

  .cyclein-hero__actions .cyclein-button,
  .cyclein-section--callout-cta .cyclein-button {
    flex: 1 1 auto;
  }

  /* Phone hero CTAs stack full-width (Figma): Buy now over View organisation. */
  .cyclein-hero__actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .cyclein-hero__actions .cyclein-button {
    inline-size: 100%;
  }

  /* Phone (Figma mobile catalogue hero): copy + actions lead, the circular photo
     drops below — overriding the tablet `order:-1` that floats the media on top. */
  .cyclein-hero__media {
    order: 0;
  }

  /* The mobile design folds the users value under the tier label and keeps a
     compact three-column table instead of forcing horizontal scrolling. */
  .cyclein-pricing-table {
    min-inline-size: 0;
    table-layout: fixed;
  }

  .cyclein-pricing-table th,
  .cyclein-pricing-table td {
    font-size: var(--type-mobile-label-size);
    padding: var(--space-12) var(--space-8);
  }

  .cyclein-pricing-table th:nth-child(2),
  .cyclein-pricing-table td:nth-child(2) {
    display: none;
  }

  .cyclein-pricing-table th:first-child,
  .cyclein-pricing-table td:first-child {
    inline-size: 40%;
  }

  .cyclein-pricing-table__mobile-user-band {
    color: var(--color-brand-black-muted);
    display: block;
    font-size: var(--type-mobile-label-size);
    margin-block-start: var(--space-4);
  }
}

@media (min-width: 721px) and (max-width: 1023px) {
  .cyclein-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Course theme panel: intro + numbered module list (round-9 checklist r9-r13).

   The module numbers run on across the four themes (1-4, 5-10, 11-12, 13-15).
   The list is a real <ol start="N">, so native list numbering already produces
   the right figures — this only has to undo the shared __list rule's grid +
   list-style:none + pink dot marker, which would otherwise hide them.
   ========================================================================== */

.cyclein-course-theme__intro {
  color: var(--color-green-normal);
  margin: 0 0 var(--space-16);
}

.cyclein-course-theme__modules-label {
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-8);
}

.cyclein-course-theme__modules {
  display: block;
  list-style: decimal;
  padding-inline-start: var(--space-32);
}

.cyclein-course-theme__modules li {
  padding-inline-start: var(--space-4);
}

.cyclein-course-theme__modules li + li {
  margin-block-start: var(--space-8);
}

.cyclein-course-theme__modules li::marker {
  color: var(--color-green-normal);
  font-variant-numeric: tabular-nums;
}

/* The shared list rule's decorative dot would sit on top of the number. */
.cyclein-course-theme__modules li::before {
  content: none;
}

/* Round-2 checklist r7: the "Real world scenarios" theme is a plain
   <ul class="cyclein-accordion__list"> (no intro / Modules label), so the shared
   accordion-list rule still painted a decorative pink dot on each scenario. The
   Figma lists the self-numbered scenarios ("Scenario 1: …") as plain lines, so
   drop the marker and its hanging indent for every course-theme scenario list. */
.paragraph--course-theme .cyclein-accordion__list li::before {
  content: none;
}

.paragraph--course-theme ul.cyclein-accordion__list {
  list-style: none;
  padding-inline-start: 0;
}

/* Round-9 checklist r16: the pricing section gained a lead paragraph under the
   heading (the C11 "locked H2 + optional intro" contract). The footnote rule
   above targets `> p:last-of-type`, so the lead needs its own centring; it is
   body copy rather than the footnote's bold small print. */
.cyclein-section--pricing-table > .paragraph--pricing-tiers__intro {
  color: var(--color-green-normal);
  margin-block: 0 var(--space-32);
  margin-inline: auto;
  max-inline-size: 62ch;
  text-align: center;
}

/**
 * Round-10 checklist r11 + r14: the two catalogue callouts, per the design.
 *
 * Values read from the design export (00-project-input/figma/specs/
 * handover-page-FULL.json), not from a crop:
 *
 *   /training  "Buying for an organisation?"  panel #f0f0f0, radius 24, NO
 *                                             border, button #063335, on a
 *                                             #063335 section.
 *   /organisations "Looking for individual access?"  panel #f0f0f0, radius 24,
 *                                             1px #d41166 border, button
 *                                             #d41166. Both buttons: radius
 *                                             1000, label 20/700 #ffffff.
 *
 * Why this is keyed off a variant field: the rules above target
 * `.cyclein-catalogue-page--training`, a class emitted by
 * CourseCataloguePageBuilder — but /training and /organisations render as nodes
 * with paragraphs, not through that builder, so that class never reaches the
 * page and every rule depending on it is dead. Both callouts rendered identical
 * markup, which is why r11's panel and r14's pink border never appeared. The
 * paragraph now carries an editor-chosen variant (mirroring the field
 * paragraph_catalogue_cards already uses), which gives each treatment a real
 * hook and a real owner.
 */
.cyclein-section--callout-inset .cyclein-callout__inner {
  background: var(--color-brand-white);
}

/* Round-13 checklist r6: the /training "Buying for an organisation?" callout
   rendered as a full-bleed light-grey band because the #f0f0f0 card sat on the
   page's own #f0f0f0 background — the contained card was camouflaged, so it read
   as a grey strip spanning the viewport. Painting the full-bleed section its
   dark-teal band colour reveals the capped inner as a contained card with
   dark-teal gutters either side (matching the audience cards above), exactly as
   the Figma shows. */
.cyclein-section--callout-organisation-options {
  background: var(--color-brand-black);
}

.cyclein-section--callout-organisation-options .cyclein-callout__inner {
  background: var(--color-brand-white);
  /* 1px #ccd3d3 hairline (Figma "Frame 98") so the card reads as a card. */
  border: 1px solid var(--color-brand-black-tint);
}

.cyclein-section--callout-organisation-options .cyclein-button {
  background: var(--color-brand-black);
  border-color: var(--color-brand-black);
  color: var(--color-brand-white);
}

/* The individual-access invite is the one the design rings in pink. */
.cyclein-section--callout-individual-access .cyclein-callout__inner {
  background: var(--color-brand-white);
  border: 1px solid var(--color-brand-pink);
}

.cyclein-section--callout-individual-access .cyclein-button {
  background: var(--color-brand-pink);
  border-color: var(--color-brand-pink);
  color: var(--color-brand-white);
}