/* Exo Pro components · needs tokens.css loaded first.
   State classes .is-hover / .is-focus / .is-active exist only to show states on ds/index.html;
   the site uses the real pseudo-classes. Disabled = the [disabled] / [aria-disabled="true"] attribute. */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule) var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: var(--wght-regular) var(--fs-body) / var(--lh-body) var(--font);
  font-stretch: var(--wdth-text);
}
::selection { background: var(--signal); color: var(--ground); }
img, svg, video { display: block; max-width: 100%; }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
strong, b { font-weight: var(--wght-strong); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.mono, time, code {
  font-family: var(--font-mono);
  font-weight: var(--wght-mono);
  font-variant-numeric: tabular-nums;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Layout container (grid tokens) ── */
.container {
  width: 100%;
  max-width: calc(var(--grid-max) + 2 * var(--grid-margin));
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* ── Type roles ── */
.t-display {
  margin: 0;
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.t-h2 {
  margin: 0;
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-section);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.t-h3 {
  margin: 0;
  font-weight: var(--wght-bold);
  font-stretch: var(--wdth-ui);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-soft); max-width: var(--measure-lead); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-soft); }
.t-label {
  font-size: var(--fs-label);
  font-weight: var(--wght-strong);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.t-mono { font-family: var(--font-mono); font-weight: var(--wght-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; }

/* ── Link ── */
.link {
  color: var(--ink);
  text-decoration: underline 1px var(--ink-soft);
  text-underline-offset: 0.2em;
  border-radius: 2px;
}
.link:hover, .link.is-hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.link:focus-visible, .link.is-focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.link:active, .link.is-active { color: var(--ink-soft); }

/* ── Buttons: primary / secondary / text ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-plate);
  font: var(--wght-bold) var(--fs-button) / 1.2 var(--font);
  font-stretch: var(--wdth-ui);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn__arrow {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur-nudge) var(--ease-nudge);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow,
.btn.is-hover .btn__arrow, .btn.is-focus .btn__arrow { transform: translateX(var(--nudge)); }
.btn:focus-visible, .btn.is-focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* primary: the amber area of the view. One per view. */
.btn--primary { background: var(--signal); color: var(--ground); border-color: var(--signal); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--ink); border-color: var(--ink); }
.btn--primary:active, .btn--primary.is-active { background: var(--ink-soft); border-color: var(--ink-soft); }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink-soft); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--panel); border-color: var(--ink); }
.btn--secondary:active, .btn--secondary.is-active { background: var(--rule); border-color: var(--ink); }

.btn--text {
  min-height: 44px;
  padding: var(--space-2) 0;
  background: none;
  color: var(--ink);
  text-decoration: underline 1px var(--ink-soft);
  text-underline-offset: 0.3em;
}
.btn--text:hover, .btn--text.is-hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.btn--text:active, .btn--text.is-active { color: var(--ink-soft); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--panel);
  color: var(--ink-soft);
  border-color: var(--rule);
  text-decoration: none;
  cursor: not-allowed;
}
.btn--text:disabled, .btn--text[aria-disabled="true"] { background: none; border-color: transparent; }
.btn:disabled .btn__arrow, .btn[aria-disabled="true"] .btn__arrow { transform: none; }
.btn--block { width: 100%; }

/* ── Logo (§2): kit file only; clear space x = half the plate height on all sides ── */
.logo {
  display: inline-block;
  padding: calc(var(--logo-w, 136px) * 40 / 201 / 2); /* clear space x */
  margin: calc(var(--logo-w, 136px) * -40 / 201 / 2); /* the box keeps x free, layout stays aligned */
  border-radius: var(--radius-plate);
}
.logo img { width: var(--logo-w, 136px); height: auto; }
.logo--symbol img { width: var(--logo-w, 32px); }
.logo--symbol { padding: calc(var(--logo-w, 32px) / 2); margin: calc(var(--logo-w, 32px) / -2); }
/* wordmark is never below 100 px wide: under that, use exopro-symbol.svg */

/* ── Navigation ── */
.nav { border-bottom: var(--hairline); background: var(--ground); }
.nav__bar {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 80px;
}
.nav__links { display: flex; gap: var(--space-6); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav__link {
  display: inline-block;
  padding: var(--space-2) 0;
  color: var(--ink-soft);
  font-weight: var(--wght-strong);
  font-size: var(--fs-16);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__link.is-hover { color: var(--ink); border-bottom-color: var(--ink-soft); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.nav__link:focus-visible, .nav__link.is-focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
.nav__cta { flex: none; }
.nav__toggle { display: none; }
.nav__menu { display: none; }

@media (max-width: 767px) {
  .nav__bar { min-height: 64px; gap: var(--space-4); }
  .nav .logo { --logo-w: 112px; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: none;
    color: var(--ink);
    border: 2px solid var(--ink-soft);
    border-radius: var(--radius-plate);
    font: var(--wght-bold) var(--fs-16) / 1 var(--font);
    font-stretch: var(--wdth-ui);
    cursor: pointer;
  }
  .nav__toggle:hover { border-color: var(--ink); }
  .nav__toggle svg { width: 20px; height: 20px; }
  .nav__toggle[aria-expanded="true"] .nav__icon-open,
  .nav__toggle[aria-expanded="false"] .nav__icon-close { display: none; }
  .nav__menu[data-open] {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) 0 var(--space-6);
    border-top: var(--hairline);
  }
  .nav__menu a:not(.btn) {
    display: block;
    padding: var(--space-3) 0;
    color: var(--ink);
    font-weight: var(--wght-strong);
    text-decoration: none;
    border-bottom: var(--hairline);
  }
  .nav__menu .btn { margin-top: var(--space-4); }
}

/* ── Example label: rectangle in ink-soft, never amber ── */
.example-label {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-chip);
  background: var(--ground);
  color: var(--ink-soft);
  font: var(--wght-mono) var(--fs-12) / 1.4 var(--font-mono);
}

/* ── Hero with media slot ── */
.hero { padding-block: var(--space-24) var(--space-16); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; }
.hero__sub { margin: var(--space-6) 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-soft); max-width: var(--measure-lead); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }

.hero__media { display: grid; gap: var(--space-3); margin: 0; }
.media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--panel);
  border: var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.media__poster, .media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.media__video[hidden] { display: none; }
.media__control {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-plate);
  font: var(--wght-strong) var(--fs-14) / 1 var(--font);
  cursor: pointer;
}
.media__control svg { width: 16px; height: 16px; }
.media__control:hover, .media__control.is-hover { border-color: var(--ink); background: var(--panel); }
.media__control:focus-visible, .media__control.is-focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.media__control[data-playing="true"] .media__icon-play,
.media__control[data-playing="false"] .media__icon-pause { display: none; }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero { padding-block: var(--space-12) var(--space-12); }
  .media { aspect-ratio: 1 / 1; }
  .hero__actions .btn--primary { width: 100%; }
}
/* The video is [hidden] until it plays; the poster <img> under it is the LCP.
   Under prefers-reduced-motion the script does not start it: poster only, Play stays available. */

/* ── Section heading and lead ── */
.section { padding-block: var(--space-24) var(--space-16); border-top: var(--hairline); }
.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-12); }
.section-head .t-lead { margin: var(--space-2) 0 0; }
@media (max-width: 767px) {
  .section { padding-block: var(--space-16) var(--space-12); }
  .section-head { margin-bottom: var(--space-8); }
}

/* ── Card (panel) ── */
.card {
  background: var(--panel);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.card > :last-child { margin-bottom: 0; }
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover, .card--link.is-hover { border-color: var(--ink-soft); }
.card--link:focus-visible, .card--link.is-focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.card--link:active, .card--link.is-active { background: var(--ground); }

/* ── Feature list ── */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.feature { display: grid; gap: var(--space-3); align-content: start; }
.feature__icon { width: var(--icon); height: var(--icon); color: var(--ink); }
.feature__icon * { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linejoin: round; stroke-linecap: round; }
.feature p { margin: 0; color: var(--ink-soft); }
@media (max-width: 1023px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .features { grid-template-columns: 1fr; } }

/* ── Steps: how it works ── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-16); counter-increment: step; }
.step::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--panel);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-plate);
  font: var(--wght-mono) var(--fs-18) / 1 var(--font-mono);
  color: var(--ink);
}
.step::after { /* connector: a decorative hairline, not the amber route */
  content: "";
  position: absolute; top: 22px; left: 56px; right: calc(-1 * var(--space-6) + 12px);
  border-top: 2px solid var(--rule);
}
.step:last-child::after { display: none; }
.step p { margin: 0; color: var(--ink-soft); }
@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .step { padding: 0 0 0 64px; min-height: 44px; }
  .step::after { top: 52px; bottom: calc(-1 * var(--space-8) + 8px); left: 21px; right: auto; border-top: 0; border-left: 2px solid var(--rule); }
}

/* ── Route board and stop (§6, §8). Stand numbers are the amber area of the view. ── */
.board {
  max-width: 480px;
  background: var(--ground);
  border: var(--hairline);
  border-radius: var(--radius-plate);
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.board__head {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline);
  font-size: var(--fs-12); font-weight: var(--wght-strong);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-soft);
}
.board__rows { margin: 0; padding: 0; list-style: none; perspective: 600px; }
.board__row {
  display: grid;
  grid-template-columns: 3.6rem 4.2rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) 0;
  font-size: var(--fs-mono);
}
.board__row + .board__row { border-top: var(--hairline); }
.board__row time { color: var(--ink); }
.board__stand { font-family: var(--font-mono); font-weight: var(--wght-mono); color: var(--signal); font-variant-numeric: tabular-nums; }
.board__company { font-weight: var(--wght-strong); overflow-wrap: anywhere; }
.board__row--done time, .board__row--done .board__company { color: var(--ink-soft); }
.board__row--done .board__stand { color: var(--ink-soft); }

/* Flip-in: the one authored moment (§8). Opt in with .board--animate. */
.board--animate .board__row { animation: board-flip var(--dur-flip) var(--ease-flip) both; transform-origin: top; }
.board--animate .board__row:nth-child(2) { animation-delay: calc(var(--stagger-flip) * 1); }
.board--animate .board__row:nth-child(3) { animation-delay: calc(var(--stagger-flip) * 2); }
.board--animate .board__row:nth-child(4) { animation-delay: calc(var(--stagger-flip) * 3); }
@keyframes board-flip { from { opacity: 0; transform: rotateX(80deg); } to { opacity: 1; transform: none; } }

/* Stop: amber plate on the route rail, stand number in mono, ground colour */
.stop { display: flex; align-items: center; }
.stop::before, .stop::after { content: ""; flex: 1 1 24px; border-top: var(--rail) solid var(--signal); }
.stop__plate {
  padding: var(--space-1) var(--space-3);
  background: var(--signal);
  color: var(--ground);
  border-radius: var(--radius-chip);
  font: var(--wght-mono) var(--fs-15) / 1.4 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Route line (§6): right angles only; draws once, ends drawn (§8) */
.route-line { fill: none; stroke: var(--signal); stroke-width: var(--rail-diagram); stroke-linejoin: round; stroke-linecap: round; }
.route-line--draw { stroke-dasharray: 1400; stroke-dashoffset: 0; animation: route-draw var(--dur-route) var(--ease-route) var(--delay-route) both; }
@keyframes route-draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }

/* ── FAQ: native <details>, keyboard accessible ── */
.faq { max-width: 820px; border-top: var(--hairline); }
.faq__item { border-bottom: var(--hairline); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-6) 0;
  list-style: none;
  font-weight: var(--wght-bold);
  font-stretch: var(--wdth-ui);
  font-size: var(--fs-18);
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover, .faq__q.is-hover { text-decoration: underline 1px var(--ink-soft); text-underline-offset: 0.25em; }
.faq__q:focus-visible, .faq__q.is-focus { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }
.faq__icon { flex: none; width: 20px; height: 20px; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; fill: none; }
.faq__item[open] .faq__icon-v { display: none; }
.faq__a { padding: 0 0 var(--space-6); color: var(--ink-soft); }
.faq__a p:last-child { margin-bottom: 0; }

/* ── Form (layout only; §9: the site CTA is an email, a form does not collect data) ── */
.form { display: grid; gap: var(--space-6); max-width: 560px; }
.field { display: grid; gap: var(--space-2); }
.field__label { font-weight: var(--wght-strong); font-size: var(--fs-16); }
.field__hint { font-size: var(--fs-14); color: var(--ink-soft); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-plate);
  font: var(--wght-regular) var(--fs-16) / 1.4 var(--font);
}
.field__input::placeholder { color: var(--ink-soft); opacity: 1; }
.field__input:hover, .field__input.is-hover { border-color: var(--ink); }
.field__input:focus-visible, .field__input.is-focus { outline: var(--focus-ring); outline-offset: 0; border-color: var(--ink); }
.field__input:disabled { background: var(--ground); border-color: var(--rule); color: var(--ink-soft); cursor: not-allowed; }
.field__input[aria-invalid="true"] { border: 2px solid var(--ink); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }
.field__error { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-14); font-weight: var(--wght-strong); color: var(--ink); }
.field__error svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.form__success {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-plate);
}
.form__success svg { flex: none; width: 24px; height: 24px; }
.form__success p { margin: 0; }
.icon-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* ── Footer ── */
.footer { padding-block: var(--space-12); border-top: var(--hairline); color: var(--ink-soft); font-size: var(--fs-14); }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-block; padding-block: var(--space-1); margin-block: calc(-1 * var(--space-1)); } /* WCAG 2.2 2.5.8: target ≥ 24 px, layout unchanged */
.footer .logo { --logo-w: 112px; }
@media (max-width: 767px) { .footer__grid { flex-direction: column; align-items: flex-start; } }

/* §8: reduced motion. CSS only. End state shown: route drawn, every stop on the board. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}