/**
 * EU Inc. waitlist — site-specific overrides and custom layouts.
 * Loaded AFTER the library's tokens/base/reveal + section stylesheets.
 *
 * Contains:
 *  0. Blue-palette token overrides (HSL hue rotation, S+L preserved)
 *  1. Custom hero (photo-overlay pattern with email-capture card)
 *  2. Hero-adjacent 3-tile value strip
 *  3. Custom §2 "plain terms" intro + 3 points layout
 *  4. Custom §6 "who signs up" 3-paragraph prose layout
 *  5. Small overrides on some library sections where the copy demands it
 */

/* ─── 0. Blue palette ────────────────────────────────────
 *
 * Site-specific blue palette. Overrides the library's defaults to
 * land on the EU Inc. brand colors. */
.eui-page {
  --color-primary:       #162555;
  --color-bg-dark:       #162555;
  --color-accent:        #bee1ff;
  --color-accent-light:  #dbedfe;
}

/* ─── 1. Hero (photo-overlay pattern + email-capture card right) ─────
 *
 * Reuses the visual structure from sections/hero-photo-overlay/ but
 * swaps the right-side "avatars + Get-in-touch" cluster for an
 * email-capture form card sized to read as the primary action.
 *
 * The photo placeholder is a CSS gradient until you drop in a real
 * photo of a European capital landscape — replace the body/background
 * of .eui-hero__photo with `background-image: url(/path/to/img.jpg)`
 * and the gradient becomes a fallback only.
 */

.eui-hero {
  position: relative;
  min-height: 92vh;
  color: var(--color-text-on-dark);
  /* Was overflow: hidden, but the .eui-select dropdown inside the
     signup card needs to extend past the hero's bottom edge when
     opened. The photo + scrim are inset:0 absolutely positioned, so
     they stay inside the hero box without needing overflow clipping. */
  overflow: visible;
  isolation: isolate;
}

/* Photo layer — set --hero-photo on .eui-hero (inline style or here)
   to use a real image. Falls back to a sky-to-stone gradient.
   Desaturated + brightened so the parliament photo reads as a soft
   atmospheric backdrop rather than an ominous skyline. */
.eui-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    var(--hero-photo, none),
    linear-gradient(180deg,
      #0f2440 0%,    /* dusk sky */
      #1a3756 35%,   /* horizon */
      #2c4361 60%,   /* mid-distance buildings */
      #0a1626 100%); /* foreground stone */
  background-size: cover;
  background-position: center;
  filter: saturate(0.3) brightness(1.1);
}

/* Flat dark overlay on top of the whole photo — uniform near-black
   tint so the photo reads as atmospheric backdrop and the eyebrow,
   H1, lead, and form all sit on the same legible band. */
.eui-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.45);
}

/* Inner grid — left copy, right form card. Pinned to bottom.
   The 96px top-padding clears the navbar (nav-transparent__bar = 80px)
   plus a small gap. Horizontal padding comes from .container
   (--container-padding) — only block padding is set here. */
.eui-hero__inner {
  position: relative;
  min-height: 92vh;
  padding-block: calc(80px + var(--space-12)) var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-12);
}

/* Bottom-left content stack */
.eui-hero__content { max-width: 640px; }

.eui-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-10);
}
.eui-hero__eyebrow-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eui-hero__eyebrow-dot svg { width: 14px; height: 14px; }

.eui-hero__heading {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  font-weight: var(--weight-semibold);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
.eui-hero__heading-accent { color: var(--color-accent); }

.eui-hero__lead {
  max-width: 520px;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.78);
}

/* Bottom-right email-capture card */
.eui-hero__signup {
  width: 380px;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px color-mix(in srgb, var(--color-primary) 35%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.eui-hero__signup-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.eui-hero__signup-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0;
}
.eui-hero__signup-lead {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}
.eui-hero__signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.eui-hero__signup-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast);
}
.eui-hero__signup-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.eui-hero__signup-submit {
  width: 100%;
}
.eui-hero__signup-foot {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Responsive */
@media (max-width: 1199px) {
  .eui-hero__heading { font-size: var(--text-5xl); }
  .eui-hero__signup { width: 340px; }
}

@media (max-width: 809px) {
  .eui-hero { min-height: 0; }
  .eui-hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: var(--space-14) var(--space-10);
    gap: var(--space-8);
    align-items: start;
  }
  .eui-hero__heading { font-size: var(--text-4xl); }
  .eui-hero__eyebrow { margin-bottom: var(--space-6); }
  .eui-hero__signup { width: 100%; }
}

/* ─── 2. Hero 3-tile strip ────────────────────────────── */

/* Gray section band with white tile cards. */
.eui-tiles {
  background: var(--color-bg-subtle);
  padding-block: var(--space-8) var(--space-20);
}

.eui-tiles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 1060px;
  margin-inline: auto;
  position: relative;
}

.eui-tile {
  padding: var(--space-7) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;   /* center icon + title + body within the card */
  gap: var(--space-2);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.eui-tile:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.eui-tile__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}
.eui-tile__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

@media (max-width: 809px) {
  .eui-tiles__grid { grid-template-columns: 1fr; }
}

/* ─── 3. §2 Plain terms ──────────────────────────────── */

.eui-plain {
  background: var(--color-bg);
  padding-block: var(--section-py);
}

.eui-plain__header {
  max-width: 720px;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.eui-plain__heading {
  color: var(--color-text);
  margin: var(--space-3) 0 var(--space-5);
}
.eui-plain__intro {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* FAQ tweaks for this site:
   - Question + answer text sizes bumped one step
   - Animated open/close + chevron rotate */
.eui-page .faq-item__question {
  font-size: var(--text-md);
}
.eui-page .faq-item__answer p {
  font-size: var(--text-md);
}

/* Modern grid-template-rows trick to animate the answer block in/out.
   Works in Chrome 117+ / Firefox 124+ / Safari 17+; falls back to an
   instant toggle elsewhere. */
.eui-page .faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease-out;
}
.eui-page .faq-item[open] .faq-item__answer {
  grid-template-rows: 1fr;
}
.eui-page .faq-item__answer > * {
  min-height: 0;
  overflow: hidden;
}
.eui-page .faq-item__icon {
  transition: transform 300ms ease-out;
}
.eui-page .faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .eui-page .faq-item__answer,
  .eui-page .faq-item__icon { transition: none; }
}

/* §2 uses the library's process-numbered section unchanged
   (white background, white card surface). */

/* Caveat — soft-tint card on its own so it still reads as a
   separate inset block from the surrounding white. */
.eui-plain__caveat {
  max-width: 820px;
  margin: var(--space-12) auto 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.eui-plain__source {
  max-width: 820px;
  margin: var(--space-4) auto 0;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-wide);
  text-align: right;
}

@media (max-width: 1199px) {
  .eui-plain__cards { grid-template-columns: 1fr; gap: var(--space-4); max-width: 720px; }
}

@media (max-width: 809px) {
  .eui-plain__cards { gap: var(--space-3); }
  .eui-plain__card { padding: var(--space-5); }
  .eui-plain__card-title { font-size: var(--text-lg); }
}

/* ─── 4. §6 Who signs up ─────────────────────────────── */

.eui-who {
  background: var(--color-bg);
  padding-block: var(--section-py);
}
.eui-who__header {
  max-width: 720px;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.eui-who__heading {
  color: var(--color-text);
  margin-top: var(--space-3);
}

.eui-who__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  max-width: 1120px;
  margin-inline: auto;
}

.eui-who__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.eui-who__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.eui-who__card p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

@media (max-width: 1199px) {
  .eui-who__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ─── 5. Overrides on library sections for this page ──── */

/* Feature-comparison: tone down the "Us" badge, since the comparison
   here is Confirmed-vs-Open, not Us-vs-Them. Hide badge. */
.eui-page .comparison-col--with .badge { display: none; }

/* §3: pale-blue section, with a navy "Confirmed" card and a white
   "Still open" card. Tilt them toward each other so their bottom inner
   edges overlap. */
.eui-page .feature-comparison {
  background: var(--color-accent-light);
}
.eui-page .feature-comparison__cols {
  gap: var(--space-2);
  padding-inline: var(--space-6);
  margin-bottom: 2rem;
}
.eui-page .comparison-col {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  box-shadow: var(--shadow-sm);
}
.eui-page .comparison-col--with {
  background: var(--color-bg-dark);
  border: 1px solid var(--color-bg-dark);
  color: var(--color-text-on-dark);
  transform: rotate(-2deg);
  z-index: 2;
  margin-right: -16px;
}
.eui-page .comparison-col--without {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  transform: rotate(2deg);
  z-index: 1;
  margin-left: -16px;
}

/* Header copy on the navy card needs to invert. The library's
   .comparison-col__title is var(--color-text); .__sub is muted. */
.eui-page .comparison-col--with .comparison-col__title {
  color: var(--color-text-on-dark);
}
.eui-page .comparison-col--with .comparison-col__sub {
  color: rgba(255, 255, 255, 0.65);
}
.eui-page .comparison-col--with .comparison-col__list { color: rgba(255, 255, 255, 0.85); }
.eui-page .comparison-col--with .comparison-col__list li { color: inherit; }
/* Checkmarks: navy stroke inside an accent-light circle so the dark
   blue check has somewhere to live on the dark blue card. The library
   SVG has stroke-width="2" which renders too faint at this size, so
   we override the SVG path stroke directly via CSS. */
.eui-page .comparison-col--with .comparison-icon--check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent-light);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eui-page .comparison-col--with .comparison-icon--check svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
}
.eui-page .comparison-col--with .comparison-icon--check svg path {
  stroke: var(--color-primary);
  stroke-width: 3;
}

.eui-page .comparison-col:hover {
  transform: rotate(0deg);
  z-index: 3;
  box-shadow: var(--shadow-md);
}
@media (max-width: 809px) {
  .eui-page .feature-comparison__cols {
    gap: var(--space-4);
    padding-inline: 0;
  }
  .eui-page .comparison-col--with,
  .eui-page .comparison-col--without {
    transform: none;
    margin: 0;
  }
}

/* Library sections: pad down on mobile to avoid double-gap between
   stacked sections. */
@media (max-width: 809px) {
  .eui-page > section + section { margin-top: 0; }
}

/* Footer: append the disclaimer text via CSS in the HTML; tighter
   type on it. */
.eui-page .footer-mega__disclaimer {
  display: block;
  max-width: 640px;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.45);
}

/* ─── 6. Navbar (fixed, transparent over hero, sticks white on scroll) ─ */

.eui-nav {
  /* Override nav-transparent__bar's `position: absolute` — we want the
     navbar to follow the viewport, not the hero. */
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--color-text-on-dark);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* Default (over the hero photo) — white text, no background. */
.eui-nav .nav-transparent__logo,
.eui-nav .nav-transparent__link {
  color: var(--color-text-on-dark);
}

/* Bump nav typography one step up from the library default. */
.eui-nav .nav-transparent__link  { font-size: var(--text-base); }
.eui-nav .nav-transparent__logo  { font-size: var(--text-md); }

/* The "Join the waitlist" CTA stays primary (accent bg) at all times. */

/* Stuck state — white background, dark text, soft shadow. */
.eui-nav.is-stuck {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--color-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.eui-nav.is-stuck .nav-transparent__logo,
.eui-nav.is-stuck .nav-transparent__link {
  color: var(--color-text);
}
.eui-nav.is-stuck .nav-transparent__link {
  opacity: 0.85;
}
.eui-nav.is-stuck .nav-transparent__link:hover {
  opacity: 1;
  color: var(--color-primary);
}

@media (max-width: 809px) {
  .eui-nav .nav-transparent__links { display: none; }
  .eui-nav .nav-transparent__inner { height: 64px; }
  .eui-hero__inner { padding-top: calc(64px + var(--space-8)); }
}

/* ─── 7. Hero tile icons ─────────────────────────────────── */

.eui-tile {
  /* Make room for the icon at the top */
  position: relative;
}
.eui-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.eui-tile__icon svg { width: 22px; height: 22px; }

/* ─── 8. Audiences pill switcher (§6) ────────────────────── */

.eui-audiences {
  background: var(--color-accent-light);
  padding-block: var(--section-py);
}
.eui-audiences__pills {
  /* Lift the pill container off the pale-blue section bg with white. */
  background: var(--color-bg);
}
.eui-audiences__pill[aria-selected="true"] {
  /* Active pill on a now-white container: switch to pale-blue tint. */
  background: var(--color-accent-light);
  color: var(--color-primary);
}

.eui-audiences__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}
.eui-audiences__heading {
  color: var(--color-text);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}
.eui-audiences__subtext {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-subtle);
}

/* Pill container hugs its three tabs + padding, then centers on the row. */
.eui-audiences__pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto var(--space-10);
  padding: var(--space-2);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-full);
}
/* Wrapper that takes the full row so the pill container can self-center. */
.eui-audiences__pills-wrap {
  display: flex;
  justify-content: center;
}

.eui-audiences__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.eui-audiences__pill:hover { color: var(--color-text); }

.eui-audiences__pill[aria-selected="true"] {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.eui-audiences__pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.eui-audiences__pill-icon svg { width: 22px; height: 22px; display: block; }

.eui-audiences__panels {
  max-width: 760px;
  margin: 0 auto;
}

.eui-audiences__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* Fade + slide-up on each show. The animation only runs when the
     panel becomes visible (i.e. has [hidden] removed). */
  animation: eui-audiences-fade 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes eui-audiences-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eui-audiences__panel { animation: none; }
}
/* Beats the .class { display: flex } above on source-order tie-break.
   Without this the user-agent `[hidden] { display: none }` loses to the
   class selector's specificity, and "hidden" panels stay visible. */
.eui-audiences__panel[hidden] { display: none; }

/* Audience panel "eyebrow" title — same icon-in-circle + uppercase
   pattern as the hero eyebrow and the shared .eui-eyebrow component.
   Bold weight (700) per brief, tracking and uppercase apply. */
.eui-audiences__panel-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}
.eui-audiences__panel-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eui-audiences__panel-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.eui-audiences__panel-body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* Audience benefit list — uses the same checkmark style as the
   feature-comparison "Confirmed" card. Text size matches the body
   paragraph above; double the row gap so the list breathes. */
.eui-audiences__hits {
  list-style: none;
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.eui-audiences__hits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.eui-audiences__check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.eui-audiences__check svg { width: 14px; height: 14px; display: block; }

@media (max-width: 809px) {
  .eui-audiences__pills {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
  }
  .eui-audiences__pill { justify-content: center; }
}

/* ─── 9. Timeline real-time states ───────────────────────── */

/* Done events — filled accent dot, normal text. */
.timeline-event.is-done .timeline-event__node {
  background: var(--color-accent);
  border-color: var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline-event.is-done .timeline-event__date {
  color: var(--color-text-subtle);
  background: var(--color-bg-subtle);
}
.timeline-event.is-done .timeline-event__card {
  opacity: 0.78;
}

/* Current events — hollow primary ring + pulsing accent halo. */
.timeline-event.is-current .timeline-event__node {
  background: transparent;
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 2px var(--color-primary),
    0 0 0 8px rgba(138, 194, 250, 0.3);
  animation: eui-timeline-pulse 2s ease-in-out infinite;
}
.timeline-event.is-current .timeline-event__date {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
}
.timeline-event.is-current .timeline-event__card {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Upcoming events — outlined hollow dot, muted text. */
.timeline-event.is-upcoming .timeline-event__node {
  background: var(--color-bg);
  border-color: var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-text-subtle);
}
.timeline-event.is-upcoming .timeline-event__date {
  color: var(--color-text-subtle);
  background: transparent;
  border: 1px dashed var(--color-border);
}
.timeline-event.is-upcoming .timeline-event__card {
  background: var(--color-bg);
  border-style: dashed;
  opacity: 0.85;
}
.timeline-event.is-upcoming .timeline-event__title {
  color: var(--color-text-muted);
}

@keyframes eui-timeline-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 8px rgba(138, 194, 250, 0.30); }
  50%      { box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 14px rgba(138, 194, 250, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-event.is-current .timeline-event__node { animation: none; }
}

/* "You are here" marker injected by JS between done and upcoming. */
.timeline-now {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-6);
  list-style: none;
}
.timeline-now > * { grid-row: 1; }
.timeline-now__line {
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-accent) 30%,
    var(--color-accent) 70%,
    transparent 100%
  );
}
.timeline-now__dot {
  grid-column: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 4px solid var(--color-accent);
  justify-self: center;
  z-index: 1;
}
.timeline-now__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 28px));
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

@media (max-width: 809px) {
  .timeline-now {
    grid-template-columns: 16px 1fr;
    padding-block: var(--space-5);
  }
  .timeline-now__line { grid-column: 1 / -1; }
  .timeline-now__dot { grid-column: 1; }
  .timeline-now__label {
    position: static;
    transform: none;
    align-self: center;
    grid-column: 2;
    justify-self: start;
  }
}

/* ─── 10. Scenarios — three alternating image+text rows (§4) ─────── */

.eui-tracks {
  /* Lighter mid-blue tint between bg and accent-light. Computed:
     accent-light (#c4e0fd) blended ~55% with white (#ffffff) =
     hsl(210, 92%, 95%) = #e6f1fc. Stays in the blue family but soft. */
  background: #e6f1fc;
  padding-block: var(--section-py);
}

.eui-tracks__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-16);
}
.eui-tracks__heading {
  color: var(--color-text);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.eui-tracks__subtext {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-subtle);
}

.eui-tracks__list {
  display: flex;
  flex-direction: column;
  gap: 9rem;
  max-width: 1080px;
  margin-inline: auto;
}

.eui-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

/* Reverse layout: image first, text second */
.eui-track--reverse .eui-track__visual { order: 0; }
.eui-track--reverse .eui-track__text    { order: 1; }
.eui-track--reverse {
  /* On default ltr, the explicit grid order above is enough — but we
     keep this stub for any future tweak. */
}

.eui-track__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
}
/* Eyebrow style matches the hero eyebrow: small uppercase tracking text
   with a circular accent-bg icon to the left. No pill background — the
   icon does the visual work. */
.eui-track__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  align-self: flex-start;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eui-track__eyebrow-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eui-track__eyebrow-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.eui-track__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
}
.eui-track__body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}
.eui-track__text .btn {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.eui-track__visual {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.eui-track__visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 1199px) {
  .eui-track__title { font-size: var(--text-2xl); }
  .eui-track { gap: var(--space-8); }
}

@media (max-width: 809px) {
  .eui-tracks__list { gap: var(--space-12); }
  .eui-track {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  /* Mobile: image always above text, regardless of row direction */
  .eui-track__visual,
  .eui-track--reverse .eui-track__visual { order: 0; }
  .eui-track__text,
  .eui-track--reverse .eui-track__text   { order: 1; }
}

/* ─── 11. CTA + inline form (§10) ─────────────────────────── */

/* Override the cta-banner library defaults to land on the pale-blue
   accent-light tint and inline a compact form on the right.
   Selector matches specificity of `.cta-banner[data-variant="light"]`.
   The library sets `overflow: hidden` on .cta-banner; we need
   `overflow: visible` so the .eui-select dropdown panel can extend
   past the section edge when opened. */
.eui-cta.cta-banner[data-variant="light"],
.eui-cta {
  background: var(--color-accent-light);
  color: var(--color-text);
  padding-block: var(--section-py);
  overflow: visible;
}
/* Hoist the form into its own stacking context above the next
   section, so the dropdown panel renders over the footer too. */
.eui-cta__form {
  position: relative;
  z-index: 1;
}

.eui-cta__inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-12);
  align-items: center;
}

.eui-cta .cta-banner__heading,
.eui-cta .cta-banner__subtext {
  color: var(--color-text);
}
.eui-cta .cta-banner__subtext { color: var(--color-text-muted); }
.eui-cta .cta-banner__text { max-width: 540px; }

/* Inline form (compact, with a small header explaining the why). */
.eui-cta__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.eui-cta__form-header {
  margin-bottom: var(--space-2);
}
.eui-cta__form-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}
.eui-cta__form-lead {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.eui-cta__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.eui-cta__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
/* Custom dropdown — looks like the inputs above, behaves like a
   listbox. The native <select> is kept for form submission only. */
/* ─── Reusable: .eui-select dropdown ────────────────────
 *
 * Custom listbox dropdown that visually matches the site's
 * text inputs but provides a fully styled options panel. The
 * native <select> stays in the markup so form submission and
 * accessibility tooling continue to work; the styled button
 * and panel mirror its state.
 *
 * Markup pattern (drop in any form):
 *   <div class="eui-select" data-eui-select>
 *     <select class="eui-select__native" name="..." required>...</select>
 *     <button type="button" class="eui-select__button"
 *             aria-haspopup="listbox" aria-expanded="false">
 *       <span class="eui-select__value">Pick...</span>
 *       <svg class="eui-select__chevron">...</svg>
 *     </button>
 *     <ul class="eui-select__panel" role="listbox" hidden>
 *       <li class="eui-select__option" role="option" data-value="x">…</li>
 *     </ul>
 *   </div>
 *
 * Behaviour wired by the `[data-eui-select]` JS in index.html. */
.eui-select {
  position: relative;
}
.eui-select__native {
  /* Visually hidden but still in the form. */
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.eui-select__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Right padding bigger than left to give the chevron breathing
     room past the value text. */
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.eui-select__button:hover { border-color: var(--color-text-subtle); }
.eui-select__button[aria-expanded="true"],
.eui-select__button:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
  outline: none;
}
/* When a real value is set, the value text inherits the body color. */
.eui-select.has-value .eui-select__value { color: var(--color-text); }
.eui-select__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-subtle);
  transition: transform var(--transition-fast);
}
.eui-select__button[aria-expanded="true"] .eui-select__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}
.eui-select__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  /* Above the navbar's stacking-context floor (z-nav = 200) so the
     panel can extend out of an enclosing section that uses
     overflow: hidden. */
  z-index: var(--z-modal);
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 12%, transparent);
  max-height: 280px;
  overflow-y: auto;
}
.eui-select__option {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.eui-select__option:hover,
.eui-select__option:focus,
.eui-select__option[aria-selected="true"] {
  background: var(--color-accent-light);
  color: var(--color-primary);
  outline: none;
}
.eui-select__option[aria-selected="true"] {
  font-weight: var(--weight-medium);
}

.eui-cta__submit {
  width: 100%;
  padding-block: var(--space-3);
}

.eui-cta__foot {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-relaxed);
  text-align: center;
  margin: 0;
}

@media (max-width: 1199px) {
  .eui-cta__inner { grid-template-columns: 1fr 320px; gap: var(--space-8); }
}

@media (max-width: 809px) {
  .eui-cta__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ─── 12. Shared eyebrow (icon-in-circle + uppercase text) ─── */

.eui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.eui-eyebrow__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eui-eyebrow__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

[data-variant="dark"] .eui-eyebrow,
.comparison-col--with .eui-eyebrow {
  color: rgba(255, 255, 255, 0.75);
}

/* ─── 13. §1.5 — uses the library's values-grid section directly,
       no overrides needed (the .eui-page token cascade gives it the
       blue palette). */

/* ─── 13.0.0 Light-blue button hover (.btn-primary) ───
 *
 * The library's .btn-primary uses the accent (light blue) bg with
 * navy text, and hovers by dimming opacity. For this site we want
 * a "stronger affordance" hover that flips bg to navy and text to
 * white, with the same 150ms ease used by the audience read-more
 * link arrow. Override the library's transition + hover. */
.eui-page .btn-primary {
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}
.eui-page .btn-primary:hover,
.eui-page .btn-primary:focus-visible {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  opacity: 1;
  outline: none;
}

/* ─── 13.0.0a Inner-page hero (header-breadcrumb) tweaks ───
 *
 * Deep pages use header-breadcrumb with data-variant="muted" which
 * gives a light-grey band. Switch to the site's accent-light
 * (pale blue) so the hero band matches brand. Bump the h1 to
 * --text-5xl (the homepage hero stays at 6xl). */
.eui-page--inner .header-breadcrumb[data-variant="muted"],
.eui-page--inner .header-breadcrumb {
  background: var(--color-accent-light);
}
.eui-page--inner .header-breadcrumb__heading {
  font-size: var(--text-5xl);
}

/* ─── 13.0.0b Active nav link (current page) ───
 *
 * Nav links default to muted text. The link matching the current
 * URL gets aria-current="page" added by the inline script at the
 * bottom of each page; we colour it navy at full opacity so the
 * user always sees where they are in the IA. Specificity is bumped
 * past `.eui-nav.is-stuck .nav-transparent__link` (which sets
 * opacity: 0.85 on inner pages) by chaining four selectors. */
.eui-page .eui-nav .nav-transparent__link[aria-current="page"],
.eui-page .eui-nav.is-stuck .nav-transparent__link[aria-current="page"] {
  color: var(--color-primary);
  opacity: 1;
  font-weight: var(--weight-semibold);
}

/* ─── 13.0 Inner-page navbar (deep pages without a hero) ───
 *
 * Pillar/comparison/feature pages don't have a dark hero behind the
 * navbar, so the transparent default would render as white-on-white.
 * Adding the body class .eui-page--inner forces the navbar into its
 * "stuck" appearance from page load, regardless of scroll position.
 * The inline JS on those pages should skip the scroll toggle. */
.eui-page--inner .eui-nav {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--color-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.eui-page--inner .eui-nav .nav-transparent__logo,
.eui-page--inner .eui-nav .nav-transparent__link {
  color: var(--color-text);
}
.eui-page--inner .eui-nav .nav-transparent__link {
  opacity: 0.85;
}
.eui-page--inner .eui-nav .nav-transparent__link:hover {
  opacity: 1;
  color: var(--color-primary);
}

/* Inner pages: pad the body so the fixed navbar doesn't cover the
   first section's content. The navbar height is ~80px desktop, 64px
   mobile (matches the values used on the homepage hero). */
.eui-page--inner {
  padding-top: 80px;
}
@media (max-width: 809px) {
  .eui-page--inner { padding-top: 64px; }
}

/* ─── 13.0.2 Comparison-page table ───
 *
 * Used on /compare/eu-inc-vs-*/ pages. A 3-column readable table:
 * dimension label | EU Inc. cell | comparison form cell. The header
 * row uses primary-color background on the EU Inc. column to make
 * "this is the form we sell" obvious without shouting. */
.compare-table {
  width: 100%;
  margin-block: var(--space-6);
  border-collapse: collapse;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.compare-table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  border-bottom: 2px solid var(--color-border);
}
.compare-table thead th.compare-table__col--eu-inc {
  color: var(--color-primary);
  background: var(--color-accent-light);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.compare-table tbody th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  width: 30%;
}
.compare-table tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
  color: var(--color-text-muted);
}
.compare-table tbody td.compare-table__col--eu-inc {
  background: rgba(196, 224, 253, 0.18);
  color: var(--color-text);
}
.compare-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}
.compare-table tbody tr:last-child {
  border-bottom: 0;
}

/* Verdict callout block on /compare/ pages. */
.compare-verdict {
  margin-block: var(--space-6) var(--space-10);
  padding: var(--space-6);
  background: var(--color-bg-subtle);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
}
.compare-verdict p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.compare-verdict p + p {
  margin-top: var(--space-3);
}

@media (max-width: 809px) {
  .compare-table thead th {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
  .compare-table tbody th,
  .compare-table tbody td {
    padding: var(--space-3);
    font-size: var(--text-sm);
  }
}

/* ─── 13.0.1 Article meta (top byline + bottom reviewed-by line) ─── */

/* Top-of-article meta line: reviewer + last-updated. Sits inside the
   header-breadcrumb on inner pages, or just under the article header on
   article-body sections. */
.eui-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}
.eui-article-meta time { color: inherit; }

/* Bottom-of-article reviewed-by line: muted, italic-feel without italics. */
.article-body__lastreviewed {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* ─── 13.0.3 Values-grid icons: primary color ─────
 *
 * Library default colors the value-item icons in --color-accent (the
 * pale blue). On this site we want them in the primary navy so they
 * contrast against the gray section bg and read as substantial. */
.eui-page .value-item__icon {
  color: var(--color-primary);
}

/* ─── 13.0.34 btn-dark hover ─────
 *
 * btn-dark on hover swaps to the accent (light blue) bg with navy
 * text. btn-primary hover lives in 13.0.0 (flip to navy bg, white
 * text) — keep both rules in their own block so they don't conflict. */
.eui-page .btn-dark:hover {
  background: var(--color-accent);
  color: var(--color-primary);
  opacity: 1;
}

/* ─── 13.0.35 Bento: wide cell modifier ─────
 *
 * Span 2 cols of the 3-col bento grid so the bottom row reads as
 * one wide card instead of leaving an empty cell. Below the
 * library's tablet/mobile breakpoints the parent grid drops to
 * 2 cols (≤1199px) and 1 col (≤809px); the wide cell needs to
 * shrink with the grid, otherwise it forces auto-placement to
 * expand the grid back out and the other cells collapse to
 * min-content width (~70px), making titles wrap word-by-word. */
.eui-page .bfm-cell--wide {
  grid-column: span 2;
}
@media (max-width: 1199px) {
  .eui-page .bfm-cell--wide { grid-column: span 2; }
}
@media (max-width: 809px) {
  .eui-page .bfm-cell--wide { grid-column: span 1; }
}

/* ─── 13.0.38 Feature-showcase: extra spacing between rows ─────
 *
 * Library default is var(--space-20) between rows. Doubling the gap
 * gives each audience row room to breathe and reads as 3 distinct
 * propositions rather than a tight stack. */
.eui-page .feature-showcase__row {
  margin-bottom: calc(var(--space-20) * 2);
}
.eui-page .feature-showcase__row:last-child {
  margin-bottom: 0;
}

/* ─── 13.0.40 Full-bleed parallax divider ─────
 *
 * A 280px full-width band placed between sections to break up long
 * stretches of stacked text and add atmospheric breathing room. Uses
 * background-attachment: fixed for a soft parallax effect on desktop;
 * mobile browsers ignore fixed and render a static image, which is
 * also fine. A 20% black layer is stacked on top of the image so any
 * later copy or icons placed on the band stay legible. */
.eui-divider-parallax {
  height: 280px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('img/European-parliament2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ─── 13.0.41 Soften the default bold weight ─────
 *
 * Browser default for <strong> is bolder (often 700), which against
 * a 400-weight body produces a hard visual jump that "breaks" the
 * line rhythm in scannable copy. 600 lands closer to inline emphasis
 * and lets the bold word still flow with the surrounding text. */
.eui-page strong,
.eui-page b {
  font-weight: 600;
}

/* ─── 13.0.39 Inner pages: match content width to the home page ─
 *
 * The article-body library section caps content at 720px for prose
 * readability. This site's home uses the full --container-max (1200px),
 * and the user wants inner pages to feel as wide. Override here so
 * sub-pages share the same horizontal rhythm. */
.eui-page--inner .article-body__inner {
  max-width: var(--container-max);
}

/* ─── 13.0.37 Feature-showcase: real images + subtext ─────
 *
 * Library uses a placeholder block; we drop real <img> children inside
 * .feature-showcase__media. Match the placeholder's aspect ratio and
 * rounding so the image reads as a card. */
.eui-page .feature-showcase__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* "Who EU Inc. is for" eyebrows: icon-in-circle + bold uppercase
   text, matching the hero eyebrow pattern. The library default is
   semibold and no icon; we override font-weight to bold and turn the
   eyebrow into an inline-flex container so the new icon span sits
   beside the text. */
.eui-page .feature-showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}
.eui-page .feature-showcase__eyebrow-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eui-page .feature-showcase__eyebrow-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Subtext under the section heading (library has no slot for it). */
.eui-page .feature-showcase__subtext {
  margin: var(--space-3) auto 0;
  max-width: 640px;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ─── 13.0.36 Bento: small-cell layout + text size + deco size ─────
 *
 * Small cells: pin the deco icon at the top, push title + body to the
 * bottom of the cell so all rows read with consistent vertical rhythm. */
.eui-page .bfm-cell:not(.bfm-cell--hero) .bfm-cell__title {
  margin-top: auto;
}

/* Body text: bump to standard body size, not the small variant. */
.eui-page .bfm-cell__text {
  font-size: var(--text-base);
}

/* Deco icon size: library default is 64px, which felt too dominant
   for the FA glyphs. 48px is the next standard down (16/24/32/48/64). */
.eui-page .bfm-cell__deco {
  width: 48px;
  height: 48px;
}

/* ─── 13.0.4 Services-grid consumer overrides ─────
 *
 * The library defaults the section to white and caps content at the
 * shared --container-max (1200px). On this page we want a pale-blue
 * band (the brand accent-light) with white cards and more breathing
 * room across the 4-card row, so we widen both the .container and the
 * items grid in this section. */
.eui-page .services-grid {
  background: var(--color-accent-light);
}
.eui-page .services-grid .container,
.eui-page .services-grid__items {
  max-width: 1400px;
}

/* ─── 13.0.5 No hover underlines anywhere ─────────
 *
 * Override the library default `a:hover { text-decoration: underline }`
 * (lib/tokens/base.css). We never want hover-underlines on this site. */
.eui-page a,
.eui-page a:hover,
.eui-page a:focus,
.eui-page a:active {
  text-decoration: none;
}

/* ─── 13.0.6 Feature-comparison footnote (info card) ─────────
 *
 * White callout centered under both columns, scoping out what stays
 * national. Sits inside the now-pale-blue section, so it reads as a
 * crisp white card on the tinted band. */
.eui-page .feature-comparison__footnote {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  text-align: left;
}
.eui-page .feature-comparison__footnote-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

/* ─── 13.0.7 Timeline mobile: date inside card ─────
 *
 * On the desktop two-column layout, the date pill sits opposite the
 * card. When the layout collapses to a single column at <=809px, the
 * pill becomes a stranded extra block above the card. JS clones the
 * date into the top of each card; this CSS swaps which one shows. */
.timeline-event__card-date { display: none; }

@media (max-width: 809px) {
  .timeline-event__meta { display: none; }
  .timeline-event__card-date {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-2);
  }
}

/* ─── 13.1 Misc additions for the rewritten homepage ─── */

/* Source line under the values-grid description (§3). */
.eui-page .values-grid__source {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
}

/* Values-grid items: progressive restack.
 * Library default keeps a 2x2 even on narrow screens, which crushes
 * the labels. Use auto-fit so cards hold a min-width and naturally
 * collapse to fewer columns as the viewport narrows. The min is
 * 240px because the labels are long ("Recognised in all 27 EU
 * countries", "Zero minimum share capital, under €100 in fees")
 * and word-wrap awkwardly below that. */
.eui-page .values-grid__items {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Outer grid (text + items) stacks below 1199px so the items get
   full container width to work with. */
@media (max-width: 1199px) {
  .eui-page .values-grid__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}
/* Below ~720px there isn't room for two 240px cards plus the inter-
   card gap, so force one column outright. Belt-and-braces in case
   any browser miscomputes auto-fit. */
@media (max-width: 720px) {
  .eui-page .values-grid__items {
    grid-template-columns: 1fr;
  }
  .eui-page .value-item__label {
    max-width: 28ch;
    margin-inline: auto;
  }
}

/* Subtext under the feature-comparison heading (§7). */
.eui-page .feature-comparison__subtext {
  margin: var(--space-4) auto 0;
  max-width: 720px;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  text-align: center;
}

/* Per-pill "read more" link (§8). 1rem top margin gives the link
   visual separation from the hits list above. */
.eui-audiences__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 1rem;
  align-self: flex-start;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  text-decoration: none;
}
.eui-audiences__link span { transition: transform var(--transition-fast); }
.eui-audiences__link:hover span { transform: translateX(2px); }

/* FAQ heading+intro container — extra breathing room before the list. */
.eui-page .faq__header {
  padding-bottom: 1rem;
}
/* Inline text links inside the subtext ("the FAQ page", "Join the
   waitlist"). Plain link color, no underline. Hover shifts to navy
   without any decoration to keep the look clean. */
.eui-page .faq__subtext a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.eui-page .faq__subtext a:hover,
.eui-page .faq__subtext a:focus-visible {
  color: var(--color-primary);
}

/* Site-wide rule: never underline body-text links. Hover stays on
   color change only. Specific link types (.btn, breadcrumb) already
   have their own decoration rules and aren't affected. */
.eui-page .article-body__content a,
.eui-page .timeline-event__text a,
.eui-page .footer-mega__link {
  text-decoration: none;
}
.eui-page .article-body__content a:hover,
.eui-page .article-body__content a:focus-visible {
  color: var(--color-primary);
}

/* Header-less FAQ (dedicated /faq/ page).
   The library .faq__inner is grid 1fr 2fr (header | list). The dedicated
   FAQ page has only a list — no left header. Flip to 2fr 1fr at desktop
   so the list takes the wide left column and the right column reads as
   intentional negative space. Mobile (<809px) keeps the lib's
   single-column collapse, untouched. */
.faq__inner:not(:has(.faq__header)) {
  max-width: var(--container-max);
}
@media (min-width: 810px) {
  .faq__inner:not(:has(.faq__header)) {
    grid-template-columns: 2fr 1fr;
  }
}

/* Group labels inside the dedicated /faq/ list.
   Used to break the 15-question stack into themed sections (Status and
   timeline / Cost and eligibility / How it works / How it compares).
   Small uppercase eyebrow style with a top border so each group reads
   as a quiet hand-off rather than a competing heading. */
.faq__list .faq__group-heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-subtle);
  margin: var(--space-10) 0 var(--space-1);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.faq__list .faq__group-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Sources page: dense reference content reads better at smaller text.
   Reduce article-body content + h2 sizes by one step from the lib
   defaults. Body text 18 → 16, h2 32 → 24. */
.eui-page--sources .article-body__content {
  font-size: var(--text-base);
}
.eui-page--sources .article-body__content h2 {
  font-size: var(--text-xl);
}

/* Full-FAQ link below the homepage 5-question list (§9).
   The library .faq section uses a two-column grid (header | list).
   We park the link in the right (list) column, left-aligned, so it
   reads as a continuation of the questions stack with 2rem of air. */
.eui-page .faq__more {
  margin-top: 2rem;
  grid-column: 2;
  text-align: left;
}
@media (max-width: 809px) {
  /* On mobile the .faq__inner collapses to one column. */
  .eui-page .faq__more { grid-column: auto; }
}
.faq__more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}
.faq__more-link:hover {
  border-color: var(--color-primary);
  background: var(--color-accent-light);
}
/* Arrow nudge on hover, matching the audiences "Read the full
   breakdown" links so both call-to-action arrows behave the same. */
.faq__more-link span { transition: transform var(--transition-fast); }
.faq__more-link:hover span { transform: translateX(2px); }

/* Source-linked timeline event titles (§6). Inherit color from the
   .timeline-event__title rule. */
.timeline-event__title a {
  color: inherit;
  text-decoration: none;
}

/* ─── 14. About eu-inc.net (trusted-source pitch) ─────────
 *
 * Sits between §3 (Confirmed vs Open) and §4 (Scenarios) and carries
 * the primary value prop of the page: a trusted source for legislative
 * milestones. Three icon-cards on a white band; the heading uses an
 * inline accent-light highlight on "trusted source" to lift it without
 * shouting. Card pattern mirrors .eui-tile (icon + title + body in a
 * white bordered card with hover-lift) for consistency. */

.eui-about {
  background: var(--color-bg);
  padding-block: var(--section-py);
}

.eui-about__header {
  max-width: 760px;
  margin: 0 auto var(--space-14);
  text-align: center;
}
.eui-about__heading {
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}
.eui-about__heading-accent {
  background: var(--color-accent-light);
  color: var(--color-primary);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
}
.eui-about__lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.eui-about__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-width: 1120px;
  margin-inline: auto;
}

.eui-about__card {
  padding: var(--space-7) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.eui-about__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.eui-about__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent-light);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.eui-about__icon svg { width: 22px; height: 22px; display: block; }
.eui-about__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}
.eui-about__card p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 1199px) {
  .eui-about__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}