/**
 * public.css — MyOsicam marketing site foundational base layer.
 *
 * SCOPE (Phase 2B): box-sizing reset, body, content container,
 * base typography, links. Mobile-first, no hard-coded brand values.
 *
 * NOT in this file (later phases):
 *   - Nav / header / hamburger styles         → Phase US2 (T027)
 *   - Footer content styles                   → Phase US2 (T028)
 *   - Hero section                            → Phase US3 (T033)
 *   - Skip-link + focus ring pass             → Phase US3 (T036 / T039)
 *   - Per-page section styles                 → Phase US2/US3
 *
 * CONSTRAINT: Every brand value MUST be var(--token). No hard-coded
 * colours, font families, or spacing literals (contract T-3).
 * No Bootstrap CSS utility classes (design guide "Do not use Bootstrap
 * utility classes.").
 *
 * Tokens are defined in tokens.css, which is linked before this file.
 */

/* ── Box-sizing reset ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Base resets ───────────────────────────────────────────────────────── */
html,
body {
  margin: 0;
  padding: 0;
}

/* ── Body ──────────────────────────────────────────────────────────────── */
body {
  font-family:      var(--font-family-base);
  font-size:        var(--font-size-base);
  line-height:      var(--line-height-base);
  background-color: var(--color-bg);
  color:            var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent horizontal overflow at any viewport width (FR-017) */
  overflow-x: hidden;
}

/* ── Content container ─────────────────────────────────────────────────── */
/*
 * .container centres content at a max-width of ~1100px with generous
 * horizontal padding that scales down gracefully to 320px.
 * Used inside <main>, <header>, and <footer> to constrain line length.
 *
 * Nav and footer wrapper patterns are added in Phase US2 (T027/T028).
 */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Tighter padding on small viewports */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-4);
  }
}

/* ── Base typography ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin-block: 0 var(--space-4);
  font-family:  var(--font-family-base);
  line-height:  var(--line-height-heading);
  color:        var(--color-text);
  font-weight:  700;
}

h1 {
  font-size: var(--font-size-hero);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

p {
  margin-block: 0 var(--space-4);
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-text);
}

/* Lead — larger intro paragraph */
.lead {
  font-size:   var(--font-size-lg);
  color:       var(--color-muted);
  line-height: var(--line-height-base);
}

/* Muted helper */
.text-muted {
  color: var(--color-muted);
}

/* ── Links ─────────────────────────────────────────────────────────────── */
a {
  color:           var(--color-accent);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color:           var(--color-accent-hover);
  text-decoration: underline;
}

/* ── Main landmark ─────────────────────────────────────────────────────── */
/*
 * Give <main> room to breathe at the top and bottom.
 * The precise hero/section spacing is owned by each page partial (Phase US3).
 */
main {
  min-height: 60vh;
  padding-block: var(--space-12);
}

/*
 * <main tabindex="-1"> receives programmatic focus when the skip link fires.
 * Suppress the default browser focus outline on the landmark itself — main is
 * never keyboard-tabbable (tabindex="-1"), so this loses no a11y affordance.
 * The skip link, nav links, and section content all retain their own focus styles.
 */
main:focus {
  outline: none;
}

/* ── Header landmark placeholder ──────────────────────────────────────── */
/*
 * Minimal structural styles so the landmark renders correctly now.
 * Full nav styles (sticky bar, wordmark, links, hamburger) are Phase US2 (T027).
 */
header {
  background-color: var(--color-surface);
  border-bottom:    1px solid var(--color-border);
}

/* ── Footer landmark placeholder ──────────────────────────────────────── */
/*
 * Minimal structural styles; full footer content is Phase US2 (T028).
 */
footer {
  background-color: var(--color-surface);
  border-top:       1px solid var(--color-border);
  color:            var(--color-muted);
  font-size:        var(--font-size-sm);
  padding-block:    var(--space-8);
}

/* ── Utility: visually hidden (a11y) ───────────────────────────────────── */
/*
 * Used for skip-link (Phase US3 / T036) and any screen-reader-only labels.
 * Defined here so it is available from Phase 2B onward.
 */
.sr-only {
  position:   absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:     -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* ── Error pages ───────────────────────────────────────────────────────── */
/*
 * .error-page        — centred, vertically padded wrapper for error views.
 * .error-page__code  — large status-code / icon line above the heading.
 * .error-page__title — primary heading (h1 inside error views).
 * .error-page__lead  — supporting paragraph.
 * .error-page__actions — CTA button row.
 *
 * Button variants inherit from the base <a> rule; modifier classes supply
 * the two distinct visual treatments (filled accent vs. ghost).
 */
.error-page {
  padding-block: var(--space-16);
  text-align:    center;
}

.error-page__code {
  font-size:     var(--font-size-xl);
  color:         var(--color-muted);
  margin-bottom: var(--space-4);
}

.error-page__title {
  font-size:     var(--font-size-2xl);
  margin-bottom: var(--space-4);
}

.error-page__lead {
  margin-bottom: var(--space-8);
}

/*
 * .error-page__actions — layout wrapper for the CTA button on error pages.
 * Button appearance is now owned by .btn / .btn--primary / .btn--ghost (see
 * Buttons section above). The --filled and --ghost modifier classes have been
 * removed; error views use class="btn btn--primary" or class="btn btn--ghost".
 */
.error-page__actions {
  display: block;
  margin-top: var(--space-8);
}

/* ── Responsive baseline check ────────────────────────────────────────── */
/*
 * Images and media never overflow their container at any viewport.
 */
img,
svg,
video {
  max-width: 100%;
  height:    auto;
  display:   block;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/*
 * .btn            — shared CTA shape (used by hero; reusable site-wide).
 * .btn--primary   — filled accent (primary action).
 * .btn--ghost     — outlined / surface (secondary action).
 *
 * Anchors styled as buttons: real <a href> elements, keyboard-usable, with a
 * visible :focus-visible ring. They override the base <a> underline-on-hover.
 */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-3) var(--space-6);
  border-radius:   var(--radius);
  border:          1px solid transparent;
  font-size:       var(--font-size-base);
  font-weight:     600;
  line-height:     var(--line-height-base);
  text-decoration: none;
  cursor:          pointer;
}

.btn:hover,
.btn:focus-visible {
  text-decoration: none;
}

/* Focus ring — Phase US3 (T038): clear, consistent ring for ALL interactive elements. */
.btn:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn--primary {
  background-color: var(--color-accent);
  color:            var(--color-bg);
  border-color:     var(--color-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-accent-hover);
  border-color:     var(--color-accent-hover);
  color:            var(--color-bg);
}

.btn--ghost {
  background-color: transparent;
  color:            var(--color-accent);
  border-color:     var(--color-border);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--color-surface);
  border-color:     var(--color-accent);
  color:            var(--color-accent-hover);
}

/* ── Skip-to-content link (Phase US3 / T036) ──────────────────────────── */
/*
 * Visually hidden until focused; slides in from the top on :focus-visible.
 * Must be the FIRST focusable element in <body> (shell.php guarantees this).
 * Uses accent colour for strong visibility; z-index above sticky nav (100).
 */
.skip-link {
  position:         fixed;
  top:              var(--space-3);
  left:             var(--space-3);
  z-index:          200;
  padding:          var(--space-3) var(--space-6);
  background-color: var(--color-accent);
  color:            var(--color-bg);
  font-weight:      700;
  font-size:        var(--font-size-base);
  border-radius:    var(--radius);
  text-decoration:  none;
  /* Hidden off-screen when not focused */
  transform:        translateY(-200%);
  transition:       transform 0.15s ease;
}

/* Intentionally uses :focus (not only :focus-visible) so a mouse click on the
 * skip link also reveals it visually. Do not remove the :focus selector. */
.skip-link:focus,
.skip-link:focus-visible {
  transform:  translateY(0);
  outline:    2px solid var(--color-text);
  outline-offset: 2px;
  color:      var(--color-bg);
  text-decoration: none;
}

/* ── Reduced-motion: disable decorative transitions ───────────────────── */
/*
 * Users who prefer reduced motion should not see the skip-link slide or
 * any other purely decorative transition introduced in Phase 5.
 */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }

  .nav__link {
    transition: none;
  }
}

/* ── Global focus-visible ring (Phase US3 / T038) ─────────────────────── */
/*
 * Provides a clear, consistent keyboard focus indicator for all interactive
 * elements. Supplements (doesn't replace) per-component focus rules.
 *
 * NOTE: this block adds the outline ring for a:focus-visible. The companion
 * colour + underline on :focus-visible is set in the base links section
 * (~"Links" section above). Both declarations are intentional and must be kept
 * together — neither duplicates the other.
 */
a:focus-visible,
.nav__toggle:focus-visible,
.nav__link:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Navigation ────────────────────────────────────────────────────────── */
/*
 * .nav                — the <nav> wrapper inside <header>.
 * .nav__inner         — flex row: brand left, menu right, constrained by .container.
 * .nav__brand         — logo/wordmark anchor.
 * .nav__logo          — SVG wordmark (sized via HTML width/height; overflows gracefully).
 * .nav__toggle        — hamburger button: hidden on desktop, visible on narrow viewports.
 *                       SEAM for Phase US3 (T037) toggle JS.
 * .nav__menu          — ordered list of nav links.
 * .nav__link          — individual link.
 * .nav__link--active  — highlighted current-page link.
 * .nav__link--login   — Login CTA; uses .btn .btn--primary styles for visual emphasis.
 *
 * Progressive enhancement (R8): nav links are default-visible on ALL widths.
 * At ≤480px they stack below the brand row. The hamburger button is shown on
 * narrow viewports as a SEAM, but it does nothing without the T037 JS.
 * No horizontal overflow at 320px.
 */

/* Sticky top bar */
.nav {
  position:         sticky;
  top:              0;
  z-index:          100;
  background-color: var(--color-surface);
  border-bottom:    1px solid var(--color-border);
}

/* Inner row */
.nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-4);
  padding-block:   var(--space-4);
}

/* Brand */
.nav__brand {
  display:         inline-flex;
  align-items:     center;
  text-decoration: none;
  flex:            0 0 auto;
}

.nav__brand:hover,
.nav__brand:focus-visible {
  text-decoration: none;
  opacity: 0.85;
}

.nav__logo {
  display: block;
  height:  28px;
  width:   auto;
}

/* Hamburger toggle — shown only on narrow viewports */
.nav__toggle {
  display:          none;          /* hidden on desktop */
  flex-direction:   column;
  justify-content:  center;
  gap:              var(--space-1);
  width:            40px;
  height:           40px;
  padding:          var(--space-2);
  background:       transparent;
  border:           1px solid var(--color-border);
  border-radius:    var(--radius);
  cursor:           pointer;
  flex:             0 0 auto;
}

.nav__toggle-bar {
  display:          block;
  width:            100%;
  height:           2px;
  background-color: var(--color-text);
  border-radius:    2px;
}

/* Nav menu — horizontal list on desktop */
.nav__menu {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--space-2);
  list-style:  none;
  margin:      0;
  padding:     0;
}

.nav__item {
  display: flex;
  align-items: center;
}

.nav__link {
  padding:         var(--space-2) var(--space-3);
  border-radius:   var(--radius);
  color:           var(--color-muted);
  font-size:       var(--font-size-base);
  font-weight:     500;
  text-decoration: none;
  transition:      color 0.15s, background-color 0.15s;
}

.nav__link:hover,
.nav__link:focus-visible {
  color:            var(--color-text);
  background-color: var(--color-surface-2);
  text-decoration:  none;
}

/* Active page */
.nav__link--active {
  color:            var(--color-accent);
  background-color: var(--color-surface-2);
}

.nav__link--active:hover,
.nav__link--active:focus-visible {
  color: var(--color-accent-hover);
}

/*
 * Login CTA — composed with .btn .btn--primary (appearance owned there).
 * Only layout override needed: match nav vertical rhythm via padding.
 * colour / background / border / font-weight are all inherited from
 * .btn--primary and must not be re-declared here.
 */
.nav__link--login {
  padding: var(--space-3) var(--space-6);
}

/* Narrow viewports: stack links below brand, show hamburger SEAM */
@media (max-width: 480px) {
  .nav__toggle {
    display: flex;
  }

  /* Links remain visible (progressive enhancement — no JS needed).
     The list wraps below the brand+toggle row and stacks vertically. */
  .nav__menu {
    flex-basis:  100%;
    flex-direction: column;
    align-items:    stretch;
    gap:         0;
    padding-block: var(--space-2);
  }

  .nav__item {
    display: block;
  }

  .nav__link {
    display:     block;
    padding:     var(--space-3) var(--space-2);
    border-radius: 0;
  }

  .nav__item--login {
    padding-block-start: var(--space-2);
  }

  .nav__link--login {
    display: inline-flex;
    padding: var(--space-3) var(--space-6);
  }
}

/* ── Mobile-nav: JS-present collapse (Phase US3 / T037 / T038) ─────────── */
/*
 * When JS is present, initMobileNav() adds 'nav--js' to <nav>.
 * At ≤480px this collapses the menu by default, and .nav__menu--open reveals it.
 * WITHOUT JS (nav--js absent) the menu stays visible/stacked (progressive
 * enhancement — no content hidden from non-JS users).
 *
 * Focus order: brand → toggle → (menu links when open) — consistent with DOM order.
 */
@media (max-width: 480px) {
  /* Hide menu by default when JS is present */
  .nav--js .nav__menu {
    display: none;
  }

  /* Reveal menu when toggle is activated.
   * Repeating flex props (flex-direction, align-items, gap, padding-block) from
   * the no-JS stacked block is intentional — display:none on .nav__menu resets
   * the flex formatting context, so they must be re-declared here. */
  .nav--js .nav__menu--open {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
    padding-block:  var(--space-2);
    width:          100%;
  }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
/*
 * .footer__inner       — flex row: brand left, nav columns right.
 * .footer__brand       — logo + tagline group.
 * .footer__tagline     — short descriptor paragraph.
 * .footer__nav         — footer link columns wrapper.
 * .footer__col         — one column of links.
 * .footer__col-heading — column label (not a heading element: no heading weight needed).
 * .footer__links       — list of links within a column.
 * .footer__link        — individual footer link.
 * .footer__ext-icon    — tiny icon appended to external links.
 * .footer__bottom      — copyright bar at the very bottom.
 * .footer__copy        — copyright text.
 */

footer {
  padding-block: 0;  /* reset the Phase 2B placeholder; use inner elements for padding */
}

.footer__inner {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--space-12);
  padding-block:   var(--space-12);
  align-items:     flex-start;
}

.footer__brand {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__brand-link {
  display:         inline-block;
  text-decoration: none;
}

.footer__brand-link:hover,
.footer__brand-link:focus-visible {
  text-decoration: none;
  opacity: 0.85;
}

.footer__logo {
  height: 24px;
  width:  auto;
}

.footer__tagline {
  font-size:   var(--font-size-sm);
  color:       var(--color-muted);
  margin:      0;
  max-width:   32ch;
  line-height: var(--line-height-base);
}

/* Footer nav columns */
.footer__nav {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-8);
  flex:       0 0 auto;
}

.footer__col {
  min-width: 120px;
}

.footer__col-heading {
  font-size:     var(--font-size-sm);
  font-weight:   700;
  color:         var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block:  0 var(--space-3);
}

.footer__links {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.footer__link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  font-size:       var(--font-size-sm);
  color:           var(--color-muted);
  text-decoration: none;
}

.footer__link:hover,
.footer__link:focus-visible {
  color:           var(--color-accent-hover);
  text-decoration: underline;
}

.footer__ext-icon {
  font-size: 0.7em;
  opacity:   0.7;
}

/* Copyright bar */
.footer__bottom {
  border-top:   1px solid var(--color-border);
  padding-block: var(--space-4);
}

.footer__copy {
  font-size:  var(--font-size-sm);
  color:      var(--color-muted);
  margin:     0;
  text-align: center;
}

/* Narrow footer: stack brand and nav */
@media (max-width: 480px) {
  .footer__inner {
    flex-direction: column;
    gap:            var(--space-8);
    padding-block:  var(--space-8);
  }

  .footer__nav {
    gap: var(--space-6);
  }
}

/* ── Legal pages ───────────────────────────────────────────────────────── */
/*
 * .legal-page        — content wrapper for privacy/terms/contact stubs.
 * .legal-page__title — the <h1> on each legal page.
 * .legal-page__notice — prominent "placeholder" warning banner.
 */

.legal-page {
  max-width:    70ch;
  padding-block: var(--space-12);
}

.legal-page__title {
  font-size:     var(--font-size-2xl);
  margin-block:  0 var(--space-6);
}

.legal-page__notice {
  padding:          var(--space-4) var(--space-6);
  border-left:      4px solid var(--color-warning);
  background-color: var(--color-surface);
  border-radius:    0 var(--radius) var(--radius) 0;
  margin-block:     var(--space-4) var(--space-8);
  font-size:        var(--font-size-sm);
  color:            var(--color-warning);
}

/* ── Home / hero ───────────────────────────────────────────────────────── */
/*
 * Mobile-first: single column (text first, then visual). At >=900px the hero
 * becomes a two-column grid (text left, visual right) inside .container.
 *
 * SC-008: the hero TEXT must paint without waiting on the visual. This mock is
 * pure CSS/HTML (no <img> request), and its box is reserved via aspect-ratio,
 * so the headline never shifts as the visual settles.
 */
/*
 * The hero cancels <main>'s top padding (var(--space-12) = 3rem) so the
 * headline sits at a single tasteful top band (~3–4rem total) instead of
 * the double-stacked ~7rem. Other pages (errors, legal) are unaffected
 * because they don't carry this class.
 */
.hero {
  padding-block: var(--space-8) var(--space-12);
  margin-block-start: calc(-1 * var(--space-12));
}

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

.hero__title {
  font-size:     var(--font-size-hero);
  line-height:   var(--line-height-heading);
  margin-block:  0 var(--space-6);
}

.hero__subhead {
  font-size:    var(--font-size-lg);
  line-height:  var(--line-height-base);
  color:        var(--color-muted);
  margin-block: 0 var(--space-8);
  max-width:    44ch;
}

.hero__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-4);
}

@media (min-width: 900px) {
  .hero {
    padding-block: var(--space-16);
  }

  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

/* ── Product visual: browser-chrome panel-dashboard mock ───────────────── */
/*
 * A lightweight, on-brand mock of the OScam control panel framed in a minimal
 * browser shell. No external/raster assets — pure CSS/HTML so it scales and
 * never blocks text paint. The reserved aspect-ratio prevents layout shift.
 */
.browser-mock {
  margin:           0;
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  background-color: var(--color-surface);
  overflow:         hidden;
  width:            100%;
  aspect-ratio:     16 / 11;
  box-shadow:       0 1px 1px var(--color-border);
}

.browser-mock__chrome {
  display:          flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-3) var(--space-4);
  background-color: var(--color-surface-2);
  border-bottom:    1px solid var(--color-border);
}

.browser-mock__dot {
  width:         var(--space-3);
  height:        var(--space-3);
  border-radius: 50%;
  flex:          0 0 auto;
}

.browser-mock__dot--red   { background-color: var(--color-danger); }
.browser-mock__dot--amber { background-color: var(--color-warning); }
.browser-mock__dot--green { background-color: var(--color-success); }

.browser-mock__address {
  margin-left:      var(--space-3);
  padding:          var(--space-1) var(--space-3);
  flex:             1 1 auto;
  background-color: var(--color-bg);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius);
  color:            var(--color-muted);
  font-size:        var(--font-size-sm);
  white-space:      nowrap;
  overflow:         hidden;
  text-overflow:    ellipsis;
}

.browser-mock__viewport {
  display:          flex;
  height:           100%;
  background-color: var(--color-bg);
}

/* Sidebar */
.dash__sidebar {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-3);
  padding:          var(--space-4) var(--space-3);
  flex:             0 0 auto;
  width:            18%;
  min-width:        44px;
  background-color: var(--color-surface);
  border-right:     1px solid var(--color-border);
}

.dash__brand {
  color:         var(--color-accent);
  font-size:     var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.dash__navitem {
  height:           var(--space-3);
  border-radius:    var(--radius);
  background-color: var(--color-surface-2);
}

.dash__navitem--active {
  background-color: var(--color-accent);
}

/* Main panel */
.dash__main {
  flex:    1 1 auto;
  padding: var(--space-4);
  min-width: 0;
  overflow: hidden;
}

.dash__metrics {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-3);
  margin-bottom:         var(--space-4);
}

.dash__metric {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-1);
  padding:          var(--space-3);
  background-color: var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius);
}

.dash__metric-label {
  font-size: var(--font-size-sm);
  color:     var(--color-muted);
}

.dash__metric-value {
  font-size:   var(--font-size-xl);
  font-weight: 700;
  color:       var(--color-text);
}

.dash__metric-value--ok {
  color: var(--color-success);
}

.dash__servers {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.dash__server {
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  padding:          var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius);
}

.dash__server-name {
  font-size:    var(--font-size-sm);
  font-weight:  600;
  color:        var(--color-text);
  flex:         1 1 auto;
  min-width:    0;
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}

.dash__server-meta {
  font-size: var(--font-size-sm);
  color:     var(--color-muted);
  flex:      0 0 auto;
}

.dash__badge {
  flex:          0 0 auto;
  padding:       var(--space-1) var(--space-2);
  border-radius: var(--radius);
  font-size:     var(--font-size-sm);
  font-weight:   600;
}

.dash__badge--ok {
  background-color: var(--color-surface-2);
  color:            var(--color-success);
}

.dash__badge--warn {
  background-color: var(--color-surface-2);
  color:            var(--color-warning);
}

/* Narrow breakpoint aligned to the base layer's 480px (same as .container
 * padding breakpoint above). At ≤480px the three metric cards use minmax(0,
 * 1fr) so they can shrink without overflow, internal padding is reduced to
 * keep text readable, and the server-meta column is hidden to free space. */
@media (max-width: 480px) {
  .dash__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .dash__metric {
    padding: var(--space-1) var(--space-2);
  }

  .dash__server-meta {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   /how-it-works page — US1 (058-explainer-pages / T014)
   ══════════════════════════════════════════════════════════════════════

   BEM-like classes, all tokens via var(--…). No hard-coded colours or sizes.

   Blocks:
     .hiw-hero        — page hero / intro
     .hiw-promise     — prominent no-reconfiguration promise callout
     .hiw-diagram     — architecture SVG container
     .hiw-steps       — ordered 5-step workflow list
     .hiw-step        — individual numbered step
     .hiw-crosslink   — FR-015 seam link to /agent
     .testimonials    — testimonial section (hidden when empty via partial guard)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page hero ─────────────────────────────────────────────────────── */
.hiw-hero {
  padding-block: var(--space-12) var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.hiw-hero__inner {
  max-width: 700px;
}

.hiw-hero__title {
  font-size:    var(--font-size-hero);
  line-height:  var(--line-height-heading);
  margin-block: 0 var(--space-4);
}

.hiw-hero__lead {
  margin-block: 0;
}

/* ── No-reconfig promise callout ───────────────────────────────────── */
/*
 * Displayed prominently above the steps. Uses the success colour for the
 * border to signal a positive guarantee, not a warning.
 */
.hiw-promise {
  padding-block: var(--space-8);
}

.hiw-promise__card {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-4);
  padding:          var(--space-6);
  background-color: var(--color-surface);
  border-left:      4px solid var(--color-success);
  border-radius:    0 var(--radius-lg) var(--radius-lg) 0;
}

.hiw-promise__icon {
  font-size:  var(--font-size-xl);
  flex:       0 0 auto;
  line-height: 1;
  margin-top: 0.1em;
}

.hiw-promise__text {
  font-size:    var(--font-size-lg);
  line-height:  var(--line-height-base);
  color:        var(--color-text);
  margin:       0;
}

/* ── Architecture diagram ──────────────────────────────────────────── */
.hiw-diagram {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.hiw-diagram__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-6);
}

.hiw-diagram__figure {
  margin: 0;
}

/*
 * Responsive SVG container: max-width keeps the diagram from becoming
 * uncomfortably wide on ultrawide screens while still filling the viewport
 * on mobile. The img rule guarantees no horizontal overflow at 320px.
 * The base-layer `img { max-width: 100%; height: auto; }` already applies;
 * this rule makes the *container* centred and width-bounded.
 */
.hiw-diagram__img {
  display:   block;
  max-width: 100%;
  height:    auto;
  margin:    0 auto;
  border-radius: var(--radius);
}

.hiw-diagram__caption {
  margin-top:  var(--space-4);
  font-size:   var(--font-size-sm);
  text-align:  center;
}

/* ── 5-step workflow list ───────────────────────────────────────────── */
.hiw-steps {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.hiw-steps__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-8);
}

/*
 * Reset <ol> default styles; steps are rendered as custom numbered blocks
 * rather than the browser's default list counter.
 */
.hiw-steps__list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-8);
}

/* ── Individual step ────────────────────────────────────────────────── */
/*
 * .hiw-step        — flex row: number badge left, content right.
 * .hiw-step__number — large accent number badge.
 * .hiw-step__body  — title + content block.
 * .hiw-step__title — step heading (h3).
 * .hiw-step__content — rendered Markdown body (p, ul, ol, strong, em, code).
 */
.hiw-step {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-6);
}

.hiw-step__number {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex:             0 0 auto;
  width:            2.5rem;
  height:           2.5rem;
  background-color: var(--color-accent);
  color:            var(--color-bg);
  font-size:        var(--font-size-lg);
  font-weight:      700;
  border-radius:    50%;
  line-height:      1;
}

.hiw-step__body {
  flex: 1 1 auto;
  min-width: 0;
}

.hiw-step__title {
  font-size:    var(--font-size-xl);
  margin-block: 0 var(--space-3);
}

.hiw-step__content {
  color: var(--color-muted);
}

/* Rendered Markdown within step content — tighten spacing */
.hiw-step__content p {
  margin-block: 0 var(--space-2);
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-muted);
}

.hiw-step__content p:last-child {
  margin-bottom: 0;
}

.hiw-step__content ul,
.hiw-step__content ol {
  margin-block:  0 var(--space-2);
  padding-left:  var(--space-6);
  color:         var(--color-muted);
}

.hiw-step__content strong {
  color:       var(--color-text);
  font-weight: 700;
}

.hiw-step__content code {
  font-size:        var(--font-size-sm);
  background-color: var(--color-surface);
  padding:          var(--space-1) var(--space-2);
  border-radius:    var(--radius);
  color:            var(--color-accent);
}

/* Narrow: stack number above body */
@media (max-width: 480px) {
  .hiw-step {
    flex-direction: column;
    gap:            var(--space-3);
  }
}

/* ── Cross-link to /agent ───────────────────────────────────────────── */
.hiw-crosslink {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.hiw-crosslink__text {
  font-size:  var(--font-size-lg);
  color:      var(--color-muted);
  margin:     0;
}

.hiw-crosslink__link {
  color:       var(--color-accent);
  font-weight: 600;
}

.hiw-crosslink__link:hover,
.hiw-crosslink__link:focus-visible {
  color: var(--color-accent-hover);
}

/* ── Testimonial section ────────────────────────────────────────────── */
/*
 * Classes are defined even though the partial produces no output in v1
 * (testimonials.php returns []). Defining them here prevents a "class
 * undefined" surprise when real testimonials are added.
 *
 * .testimonials           — outer section wrapper.
 * .testimonials__heading  — section <h2>.
 * .testimonials__grid     — card grid.
 * .testimonials__card     — individual testimonial card.
 * .testimonials__quote    — <blockquote> wrapper.
 * .testimonials__quote-text — the quote body.
 * .testimonials__attribution — <footer> inside the blockquote.
 * .testimonials__author   — author name (link or span).
 * .testimonials__role     — role / context descriptor.
 */
.testimonials {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.testimonials__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-8);
  text-align:   center;
}

.testimonials__grid {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:        var(--space-6);
}

.testimonials__card {
  background-color: var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  padding:          var(--space-6);
}

.testimonials__quote {
  margin: 0;
}

.testimonials__quote-text {
  font-size:    var(--font-size-lg);
  line-height:  var(--line-height-base);
  color:        var(--color-text);
  margin-block: 0 var(--space-4);
  font-style:   italic;
}

.testimonials__attribution {
  display:    flex;
  flex-direction: column;
  gap:        var(--space-1);
}

.testimonials__author {
  font-size:   var(--font-size-sm);
  font-weight: 700;
  color:       var(--color-accent);
  text-decoration: none;
}

.testimonials__author:hover,
.testimonials__author:focus-visible {
  color:           var(--color-accent-hover);
  text-decoration: underline;
}

.testimonials__role {
  font-size: var(--font-size-sm);
  color:     var(--color-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   /features page — US2 (058-explainer-pages / T018)
   ══════════════════════════════════════════════════════════════════════

   BEM-like classes, all tokens via var(--…). No hard-coded colours or sizes.

   Blocks:
     .feat-hero        — page hero / intro
     .feat-group       — capability group section (h2 + card grid)
     .feat-group--lead — modifier for the fleet-management lead group
     .feat-group__eyebrow — "Headline capability" label above the h2
     .features-grid    — responsive card grid (shared with home if added there later)
     .feature-card     — individual capability card
     .feature-card--lead — modifier for the fleet hero card
     .feature-card__icon — Bootstrap Icon wrapper
     .feature-card__title — card h3
     .feature-card__desc — card description paragraph
     .feature-shot     — screenshot image frame
     .feature-shot--placeholder — ghost box shown when no real screenshot exists yet
     .feat-crosslink   — FR-015 seam link to /how-it-works
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page hero ─────────────────────────────────────────────────────── */
.feat-hero {
  padding-block: var(--space-12) var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.feat-hero__inner {
  max-width: 700px;
}

.feat-hero__title {
  font-size:    var(--font-size-hero);
  line-height:  var(--line-height-heading);
  margin-block: 0 var(--space-4);
}

.feat-hero__lead {
  margin-block: 0;
}

/* ── Capability group sections ─────────────────────────────────────── */
.feat-group {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

/* Lead group: slightly elevated background to signal primacy */
.feat-group--lead {
  background-color: var(--color-surface);
}

.feat-group__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-8);
  display:      flex;
  flex-direction: column;
  gap:          var(--space-1);
}

/* Eyebrow label above heading in the lead group */
.feat-group__eyebrow {
  display:         block;
  font-size:       var(--font-size-sm);
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  color:           var(--color-accent);
}

/* ── Features grid ─────────────────────────────────────────────────── */
/*
 * Responsive auto-fill grid for capability cards.
 * At ≥600 px: cards fill to at most ~320 px each; below that: single column.
 * Reuse-safe: if a home "features" section is added later it can use the same
 * .features-grid class without importing any /features page-specific styles.
 */
.features-grid {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:        var(--space-6);
}

/* ── Feature card ──────────────────────────────────────────────────── */
.feature-card {
  display:          flex;
  flex-direction:   column;
  gap:              var(--space-3);
  padding:          var(--space-6);
  background-color: var(--color-bg);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
}

/* Lead card: accent border + slightly raised surface */
.feature-card--lead {
  background-color: var(--color-surface);
  border-color:     var(--color-accent);
  border-width:     2px;
}

.feature-card__icon {
  font-size:    var(--font-size-xl);
  color:        var(--color-accent);
  line-height:  1;
}

/* Lead card icon is bigger for visual emphasis */
.feature-card--lead .feature-card__icon {
  font-size: var(--font-size-2xl);
}

.feature-card__title {
  font-size:    var(--font-size-xl);
  font-weight:  700;
  color:        var(--color-text);
  margin-block: 0;
  line-height:  var(--line-height-heading);
}

.feature-card__desc {
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-muted);
  margin-block: 0;
  flex:         1 1 auto;
}

/* ── Screenshot frame ──────────────────────────────────────────────── */
/*
 * .feature-shot            — wrapper for both real images and placeholders.
 * .feature-shot__img       — the <img> element; max-width 100% prevents overflow.
 * .feature-shot--placeholder — ghost box shown when screenshot is not yet available.
 *   - Uses a 16:10 aspect-ratio to reserve the space and prevent layout shift (SC-008).
 *   - Dashed border + centred label makes the placeholder intent obvious.
 */
.feature-shot {
  margin-top:   var(--space-4);
  border-radius: var(--radius);
  overflow:     hidden;
}

.feature-shot__img {
  display:   block;
  width:     100%;
  height:    auto;
  border-radius: var(--radius);
}

.feature-shot--placeholder {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-2);
  aspect-ratio:     16 / 10;
  border:           2px dashed var(--color-border);
  border-radius:    var(--radius);
  background-color: var(--color-surface-2);
  padding:          var(--space-4);
  text-align:       center;
}

.feature-shot__label {
  display:    flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   var(--font-size-sm);
  color:       var(--color-muted);
  font-weight: 600;
}

.feature-shot__name {
  font-size:  var(--font-size-sm);
  color:      var(--color-muted);
  max-width:  28ch;
}

/* ── Cross-link to /how-it-works ───────────────────────────────────── */
.feat-crosslink {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.feat-crosslink__text {
  font-size:  var(--font-size-lg);
  color:      var(--color-muted);
  margin:     0;
}

.feat-crosslink__link {
  color:       var(--color-accent);
  font-weight: 600;
}

.feat-crosslink__link:hover,
.feat-crosslink__link:focus-visible {
  color: var(--color-accent-hover);
}

/* ── Narrow: single-column grid ────────────────────────────────────── */
@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   /agent page — US3 (058-explainer-pages / T024)
   ══════════════════════════════════════════════════════════════════════

   BEM-like classes, all tokens via var(--…). No hard-coded colours or sizes.

   Blocks:
     .agent-hero         — page hero / intro
     .agent-root         — root-once honesty callout (orange/warning accent)
     .agent-scope        — does / does-not two-column section
     .agent-list         — shared list style for does and does-not items
     .agent-diagram      — sync-flow SVG container
     .agent-os           — supported-OS accessible table
     .agent-registration — registration & heartbeat Markdown section
     .agent-security     — HMAC + tokens Markdown section
     .agent-sync         — what-gets-synced list
     .agent-crosslink    — FR-015 seam link BACK to /how-it-works
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page hero ─────────────────────────────────────────────────────── */
.agent-hero {
  padding-block: var(--space-12) var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.agent-hero__inner {
  max-width: 700px;
}

.agent-hero__title {
  font-size:    var(--font-size-hero);
  line-height:  var(--line-height-heading);
  margin-block: 0 var(--space-4);
}

.agent-hero__lead {
  margin-block: 0;
}

/* ── Root-access honesty callout ───────────────────────────────────── */
/*
 * Uses warning colour for the left border to signal transparency without
 * implying something dangerous — root once is perfectly normal for a service
 * install. Text explains the scope clearly.
 */
.agent-root {
  padding-block: var(--space-8);
}

.agent-root__card {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-4);
  padding:          var(--space-6);
  background-color: var(--color-surface);
  border-left:      4px solid var(--color-warning);
  border-radius:    0 var(--radius-lg) var(--radius-lg) 0;
}

.agent-root__icon {
  font-size:   var(--font-size-xl);
  flex:        0 0 auto;
  line-height: 1;
  margin-top:  0.1em;
}

.agent-root__text {
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  color:       var(--color-text);
  margin:      0;
}

/* ── Does / does-not two-column section ─────────────────────────────── */
.agent-scope {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.agent-scope__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-8);
}

/*
 * Two columns on desktop; stack to single column on narrow viewports.
 * gap ensures the columns don't crowd each other.
 */
.agent-scope__cols {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-8);
  align-items:           flex-start;
}

.agent-scope__col {
  background-color: var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  padding:          var(--space-6);
}

/* Does col: accent-left border to signal positive capability */
.agent-scope__col--does {
  border-left: 3px solid var(--color-accent);
}

/* Does-not col: success-left border to signal reassurance, not restriction */
.agent-scope__col--does-not {
  border-left: 3px solid var(--color-success);
}

.agent-scope__col-title {
  font-size:    var(--font-size-xl);
  font-weight:  700;
  color:        var(--color-text);
  margin-block: 0 var(--space-4);
  display:      flex;
  align-items:  center;
  gap:          var(--space-2);
}

.agent-scope__col-icon {
  flex:        0 0 auto;
  line-height: 1;
}

/* ── Shared list: does / does-not items ─────────────────────────────── */
.agent-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
}

.agent-list__item {
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-muted);
  padding-left: var(--space-4);
  position:     relative;
}

/* Bullet: a small coloured square using ::before */
.agent-list--does .agent-list__item::before {
  content:          '';
  position:         absolute;
  left:             0;
  top:              0.55em;
  width:            var(--space-2);
  height:           var(--space-2);
  border-radius:    2px;
  background-color: var(--color-accent);
  flex:             0 0 auto;
}

.agent-list--does-not .agent-list__item::before {
  content:          '';
  position:         absolute;
  left:             0;
  top:              0.55em;
  width:            var(--space-2);
  height:           var(--space-2);
  border-radius:    2px;
  background-color: var(--color-success);
  flex:             0 0 auto;
}

/* Narrow: stack the two columns */
@media (max-width: 640px) {
  .agent-scope__cols {
    grid-template-columns: 1fr;
    gap:                   var(--space-6);
  }
}

/* ── Sync-flow diagram ──────────────────────────────────────────────── */
.agent-diagram {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.agent-diagram__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-6);
}

.agent-diagram__figure {
  margin: 0;
}

.agent-diagram__img {
  display:       block;
  max-width:     100%;
  height:        auto;
  margin:        0 auto;
  border-radius: var(--radius);
}

.agent-diagram__caption {
  margin-top: var(--space-4);
  font-size:  var(--font-size-sm);
  text-align: center;
}

/* ── Supported OS table ─────────────────────────────────────────────── */
.agent-os {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.agent-os__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-6);
}

/*
 * Scroll container: lets the table scroll horizontally on very narrow viewports
 * rather than causing body overflow. min-width on the table prevents the
 * columns from becoming unreadably narrow before scroll kicks in.
 */
.agent-os__table-wrap {
  width:      100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.agent-os__table {
  width:           100%;
  min-width:       420px;
  border-collapse: collapse;
  font-size:       var(--font-size-base);
  color:           var(--color-text);
}

.agent-os__table thead tr {
  background-color: var(--color-surface);
  border-bottom:    2px solid var(--color-border);
}

.agent-os__table th {
  padding:     var(--space-3) var(--space-4);
  text-align:  left;
  font-weight: 700;
  color:       var(--color-muted);
  font-size:   var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.agent-os__table td {
  padding:       var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  line-height:   var(--line-height-base);
}

.agent-os__table tbody tr:last-child td {
  border-bottom: none;
}

.agent-os__table tbody tr:nth-child(even) {
  background-color: var(--color-surface-2);
}

/* ── Registration & heartbeat section ──────────────────────────────── */
.agent-registration {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.agent-registration__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-6);
}

.agent-registration__body {
  max-width:   72ch;
  color:       var(--color-muted);
}

/* Markdown output within registration body */
.agent-registration__body p {
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-muted);
  margin-block: 0 var(--space-4);
}

.agent-registration__body p:last-child {
  margin-bottom: 0;
}

.agent-registration__body strong {
  color:       var(--color-text);
  font-weight: 700;
}

.agent-registration__body code {
  font-size:        var(--font-size-sm);
  background-color: var(--color-surface);
  padding:          var(--space-1) var(--space-2);
  border-radius:    var(--radius);
  color:            var(--color-accent);
}

/* ── Security section ───────────────────────────────────────────────── */
.agent-security {
  padding-block:    var(--space-12);
  border-bottom:    1px solid var(--color-border);
  background-color: var(--color-surface);
}

.agent-security__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-6);
}

.agent-security__body {
  max-width: 72ch;
  color:     var(--color-muted);
}

/* Markdown output within security body */
.agent-security__body p {
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-muted);
  margin-block: 0 var(--space-4);
}

.agent-security__body p:last-child {
  margin-bottom: 0;
}

.agent-security__body strong {
  color:       var(--color-text);
  font-weight: 700;
}

.agent-security__body code {
  font-size:        var(--font-size-sm);
  background-color: var(--color-bg);
  padding:          var(--space-1) var(--space-2);
  border-radius:    var(--radius);
  color:            var(--color-accent);
}

/* ── What-gets-synced list ──────────────────────────────────────────── */
.agent-sync {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.agent-sync__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-4);
}

.agent-sync__intro {
  max-width:    72ch;
  color:        var(--color-muted);
  margin-block: 0 var(--space-6);
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
}

.agent-sync__list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
  max-width:  72ch;
}

.agent-sync__item {
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-muted);
  padding:      var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border-left:  3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Cross-link BACK to /how-it-works (FR-015) ─────────────────────── */
.agent-crosslink {
  padding-block: var(--space-8);
}

.agent-crosslink__text {
  font-size: var(--font-size-lg);
  color:     var(--color-muted);
  margin:    0;
}

.agent-crosslink__link {
  color:       var(--color-accent);
  font-weight: 600;
}

.agent-crosslink__link:hover,
.agent-crosslink__link:focus-visible {
  color: var(--color-accent-hover);
}

/* ══════════════════════════════════════════════════════════════════════
   /demos page — US1 (059-demo-videos / T010)
   ══════════════════════════════════════════════════════════════════════

   BEM-like classes, all tokens via var(--…). No hard-coded colours or sizes.
   No fallback values — bare var(--token) only (contract T-3).

   Blocks:
     .demos-hero          — page hero / intro
     .demos-layout        — outer two-region layout wrapper
     .demos-layout__inner — flex row: rail left, main right
     .demos-rail          — sticky curriculum sidebar (stacks on mobile)
     .demos-rail__module  — one module block in the rail
     .demos-rail__module-title — module label in the rail
     .demos-rail__lessons — list of lesson anchor links per module
     .demos-rail__link    — individual anchor link
     .demos-module-heading — module heading block above its lessons in main
     .lesson              — individual lesson section
     .lesson__header      — flex row: lesson title + duration badge
     .lesson__title       — lesson <h3>
     .lesson__duration    — duration hint badge
     .lesson__description — Markdown prose output
     .lesson__video-region — container for either <video> or placeholder
     .lesson__video-wrap  — responsive wrapper preserving aspect ratio
     .lesson__video       — the <video> element
     .lesson__placeholder — "Coming soon" seam block (US2 enriches)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page hero ─────────────────────────────────────────────────────── */
.demos-hero {
  padding-block: var(--space-12) var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.demos-hero__inner {
  max-width: 700px;
}

.demos-hero__title {
  font-size:    var(--font-size-hero);
  line-height:  var(--line-height-heading);
  margin-block: 0 var(--space-4);
}

.demos-hero__lead {
  margin-block: 0;
}

/* ── Two-region layout ─────────────────────────────────────────────── */
/*
 * Mobile-first single column. At ≥768px the layout becomes a side-by-side
 * flex row: the curriculum rail on the left, the lesson main area on the right.
 * The rail becomes sticky so it stays visible while scrolling through lessons.
 */
.demos-layout {
  padding-block: var(--space-12);
}

.demos-layout__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-8);
  align-items:    flex-start;
}

@media (min-width: 768px) {
  .demos-layout__inner {
    flex-direction: row;
    gap:            var(--space-12);
  }
}

/* ── Curriculum rail ───────────────────────────────────────────────── */
/*
 * On mobile: full-width block above the lesson list.
 * On ≥768px: fixed-width left column, sticky so it stays in view as
 * the user scrolls through the (potentially long) main lesson area.
 * top accounts for the sticky nav height (~60px + comfortable gap).
 */
.demos-rail {
  flex:       0 0 auto;
  width:      100%;
}

@media (min-width: 768px) {
  .demos-rail {
    width:    220px;
    position: sticky;
    top:      var(--space-8);
    max-height: calc(100vh - var(--space-16));
    overflow-y: auto;
  }
}

.demos-rail__heading {
  font-size:      var(--font-size-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--color-muted);
  margin-block:   0 var(--space-4);
}

.demos-rail__module {
  margin-bottom: var(--space-4);
}

.demos-rail__module-title {
  font-size:   var(--font-size-sm);
  font-weight: 700;
  color:       var(--color-text);
  margin-block: 0 var(--space-2);
}

.demos-rail__lessons {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-1);
}

.demos-rail__item {
  display: block;
}

.demos-rail__link {
  display:         block;
  padding:         var(--space-1) var(--space-2);
  border-radius:   var(--radius);
  font-size:       var(--font-size-sm);
  color:           var(--color-muted);
  text-decoration: none;
  line-height:     var(--line-height-base);
}

.demos-rail__link:hover,
.demos-rail__link:focus-visible {
  color:            var(--color-accent-hover);
  background-color: var(--color-surface);
  text-decoration:  none;
}

/* ── Main content area ─────────────────────────────────────────────── */
.demos-main {
  flex:      1 1 auto;
  min-width: 0;         /* prevents flex child from overflowing */
}

/* ── Module heading block ──────────────────────────────────────────── */
/*
 * Appears once per module above that module's lessons. Visually separates
 * modules within the continuous lesson list without using <h2> level headings
 * for lesson content (lessons are h3).
 */
.demos-module-heading {
  padding-block:    var(--space-8) var(--space-4);
  border-top:       1px solid var(--color-border);
  margin-block-end: var(--space-4);
}

/* No top border on the very first module — the hero border handles that gap */
.demos-module-heading:first-child {
  border-top:       none;
  padding-block-start: 0;
}

.demos-module-heading__title {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-2);
  color:        var(--color-text);
}

.demos-module-heading__summary {
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  color:       var(--color-muted);
  margin:      0;
  max-width:   64ch;
}

/* ── Lesson section ────────────────────────────────────────────────── */
/*
 * Each lesson is a full <section id="lesson-{id}"> so in-page anchors work
 * without JavaScript. The section top padding gives the sticky nav enough
 * clearance when a user follows a #lesson-... anchor link.
 */
.lesson {
  padding-block:  var(--space-6);
  border-bottom:  1px solid var(--color-border);
  scroll-margin-top: var(--space-16);  /* clearance below sticky nav */
}

.lesson:last-child {
  border-bottom: none;
}

/* ── Lesson header: title + duration badge ─────────────────────────── */
.lesson__header {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         var(--space-3);
  margin-block-end: var(--space-3);
}

.lesson__title {
  font-size:    var(--font-size-xl);
  font-weight:  700;
  color:        var(--color-text);
  margin-block: 0;
  line-height:  var(--line-height-heading);
  flex:         1 1 auto;
}

.lesson__duration {
  flex:            0 0 auto;
  font-size:       var(--font-size-sm);
  color:           var(--color-muted);
  background-color: var(--color-surface);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius);
  padding:         var(--space-1) var(--space-3);
  white-space:     nowrap;
}

/* ── Lesson description (Markdown output) ──────────────────────────── */
.lesson__description {
  color:            var(--color-muted);
  margin-block-end: var(--space-4);
  max-width:        70ch;
}

.lesson__description p {
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-muted);
  margin-block: 0 var(--space-3);
}

.lesson__description p:last-child {
  margin-bottom: 0;
}

.lesson__description strong {
  color:       var(--color-text);
  font-weight: 700;
}

.lesson__description code {
  font-size:        var(--font-size-sm);
  background-color: var(--color-surface);
  padding:          var(--space-1) var(--space-2);
  border-radius:    var(--radius);
  color:            var(--color-accent);
}

/* ── Video region ──────────────────────────────────────────────────── */
.lesson__video-region {
  margin-block-start: var(--space-4);
}

/*
 * Responsive video wrapper: reserves a 16:9 aspect ratio so the layout
 * does not shift when the video loads. max-width prevents the player from
 * becoming uncomfortably wide on ultrawide viewports.
 */
.lesson__video-wrap {
  position:     relative;
  width:        100%;
  max-width:    800px;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-2);
  border-radius: var(--radius-lg);
  overflow:     hidden;
  border:       1px solid var(--color-border);
}

.lesson__video {
  display:  block;
  width:    100%;
  height:   100%;
  border-radius: var(--radius-lg);
}

/* ── Coming-soon placeholder seam (US2 / T012 enriches) ───────────── */
/*
 * Rendered when hasVideo is false. US2 will add the expected filename
 * and additional context; for now the block reserves the space and
 * signals intent. data-expected-video and data-expected-poster attributes
 * on the element carry the filenames US2 needs without inline JS.
 *
 * Uses the same ghost style as .feature-shot--placeholder for visual
 * consistency across the site.
 */
.lesson__placeholder {
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-2);
  width:            100%;
  max-width:        800px;
  aspect-ratio:     16 / 9;
  border:           2px dashed var(--color-border);
  border-radius:    var(--radius-lg);
  background-color: var(--color-surface-2);
  color:            var(--color-muted);
  font-size:        var(--font-size-sm);
  text-align:       center;
  padding:          var(--space-4);
}

.lesson__placeholder-label {
  margin:      0;
  font-weight: 600;
  color:       var(--color-text);
}

.lesson__placeholder-hint {
  margin:    0;
  max-width: 60ch;
}

.lesson__placeholder-file {
  font-family:      monospace;
  color:            var(--color-accent);
  background-color: var(--color-surface);
  padding:          0 var(--space-1);
  border-radius:    var(--radius);
  word-break:       break-all;
}

/* ── Narrow (≤480px): tighten spacing ─────────────────────────────── */
@media (max-width: 480px) {
  .demos-layout {
    padding-block: var(--space-8);
  }

  .demos-module-heading {
    padding-block-start: var(--space-6);
  }

  .lesson {
    padding-block: var(--space-4);
  }

  .lesson__header {
    flex-direction: column;
    gap:            var(--space-2);
    align-items:    flex-start;
  }
}

/* ── /demos rail active state (059 / US3 / T018) ──────────────────────────── */
/* Applied by JS only; no visual change for JS-off users (progressive). */
.demos-rail__link--active {
  color:       var(--color-accent);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   /pricing page — 060-public-pricing-page (T003)
   ══════════════════════════════════════════════════════════════════════

   Token mapping from admin.css (.catalog-card*):
     --surface-2    → --color-surface-2
     --border       → --color-border
     --accent       → --color-accent
     --text         → --color-text
     --text-muted   → --color-muted
     --radius       → --radius
     --shadow       → 0 1px 3px rgba(0,0,0,0.4)   (no public equivalent)

   No Bootstrap CSS utility classes. Bootstrap Icons font is fine.

   Blocks:
     .pricing-section      — wrapper section (page header + each plan/add-on group)
     .pricing-section__heading — section h2 consistent with other public pages
     .pricing-grid         — responsive 1→2→3 column card grid
     .pricing-cta          — filled-accent CTA button inside a plan card footer
     .pricing-unavailable  — calm "updating pricing" block for graceful state
     .catalog-card*        — ported verbatim from admin.css (token-remapped)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Pricing section wrapper ─────────────────────────────────────────── */
.pricing-section {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.pricing-section:last-child {
  border-bottom: none;
}

.pricing-section__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-8);
}

/* ── Responsive pricing grid ─────────────────────────────────────────── */
/*
 * Mobile-first: single column.
 * >=640px: two columns. >=960px: three columns.
 * Cards are constrained so they never overflow their column.
 */
.pricing-grid {
  display:               grid;
  gap:                   var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Plans + add-ons side-by-side band ───────────────────────────────── */
/*
 * Mobile-first: single column (plan above add-ons).
 * >=900px: two columns — the panel plan sits in a fixed-ish left rail and the
 * agent-quota add-ons flow in the wider right column, so the plan no longer
 * stretches the full page and both are visible without scrolling.
 */
.pricing-offer {
  display:               grid;
  gap:                   var(--space-12);
  grid-template-columns: 1fr;
  align-items:           start;
}

@media (min-width: 900px) {
  .pricing-offer {
    grid-template-columns: minmax(300px, 360px) 1fr;
  }
}

.pricing-offer__heading {
  font-size:    var(--font-size-xl);
  font-weight:  700;
  margin-block: 0 var(--space-6);
}

.pricing-offer__sub {
  color:        var(--color-muted);
  font-size:    var(--font-size-base);
  margin-block: calc(-1 * var(--space-3)) var(--space-6);
  max-width:    52ch;
}

/* Left rail can hold one or several stacked plan cards. */
.pricing-offer__plan {
  display:       grid;
  gap:           var(--space-6);
  align-content: start;
}

/* Add-on cards: auto-fit so 3 quota tiers sit in a row on desktop and wrap
   gracefully to 2/1 as the right column narrows. Generous gap so the boxes
   are clearly separated. */
.pricing-addons-grid {
  display:               grid;
  gap:                   var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Spacing between successive add-on groups (multi-group case only). */
.pricing-addons-grid + .pricing-addons-group-heading {
  margin-block-start: var(--space-8);
}

/* ── Catalogue card — ported from admin.css lines 380-471 ────────────── */
/*
 * Class names are intentionally identical to admin/_catalog_card.php so the
 * visual contract is enforced by the shared class names.
 */
.catalog-card {
  background:    var(--color-surface-2);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       1.75rem;
  position:      relative;
  box-shadow:    0 1px 3px rgba(0,0,0,0.4);
  /* Prevent content overflow within the grid cell */
  min-width:     0;
  overflow:      hidden;
}

.catalog-card--popular {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 1px var(--color-accent), 0 1px 3px rgba(0,0,0,0.4);
}

.catalog-card-badge {
  position:  absolute;
  top:       -0.75rem;
  left:      50%;
  transform: translateX(-50%);
}

.catalog-popular-pill {
  background:     var(--color-accent);
  color:          #fff;
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        0.25rem 0.85rem;
  border-radius:  999px;
  white-space:    nowrap;
}

.catalog-card-header {
  margin-bottom: 1.25rem;
}

.catalog-card-name {
  font-size:     1.4rem;
  font-weight:   700;
  color:         var(--color-text);
  margin-bottom: 0.35rem;
  /* Override the global h2 margin-block to match admin parity */
  margin-block:  0 0.35rem;
}

.catalog-card-tagline {
  color:         var(--color-muted);
  font-size:     0.95rem;
  margin-bottom: 0.75rem;
}

.catalog-card-price {
  margin-top: 0.75rem;
}

.catalog-price-amount {
  font-size:      2rem;
  font-weight:    700;
  color:          var(--color-text);
  letter-spacing: -0.03em;
}

.catalog-price-period {
  font-size:   0.875rem;
  margin-left: 0.25rem;
  color:       var(--color-muted);
}

.catalog-price-vat {
  display:    block;
  font-size:  0.75rem;
  color:      var(--color-muted);
  margin-top: 0.25rem;
}

/*
 * Quantity badges — the "what you get" pill. Rendered as a coloured, rounded
 * chip so it stands out from body copy. The plan's included slots use the
 * accent colour; an add-on's granted quantity uses success-green so the two
 * read as distinct ("included" vs "extra capacity").
 */
.catalog-card-slot-count,
.catalog-card-quantity {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  width:          fit-content;
  font-size:      0.8rem;
  font-weight:    600;
  line-height:    1.2;
  padding:        0.35rem 0.75rem;
  border-radius:  999px;
  margin-bottom:  1.25rem;
}

.catalog-card-slot-count {
  color:        var(--color-accent);
  background:   color-mix(in srgb, var(--color-accent) 14%, transparent);
  border:       1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.catalog-card-quantity {
  color:        var(--color-success);
  background:   color-mix(in srgb, var(--color-success) 14%, transparent);
  border:       1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
}

.catalog-card-slot-count i { color: var(--color-accent); }
.catalog-card-quantity   i { color: var(--color-success); }

.catalog-card-description {
  margin-bottom: 1.25rem;
  font-size:     0.9rem;
  color:         var(--color-text);
  line-height:   1.65;
}

.catalog-card-description p  { margin-bottom: 0.5rem; }
.catalog-card-description ul,
.catalog-card-description ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }

.catalog-card-features {
  list-style: none;
  padding:    0;
  margin:     0 0 1.25rem;
}

.catalog-feature-item {
  display:     flex;
  align-items: flex-start;
  gap:         0.5rem;
  padding:     0.3rem 0;
  font-size:   0.875rem;
  color:       var(--color-text);
}

.catalog-feature-item i {
  margin-top:  0.1rem;
  flex-shrink: 0;
  color:       var(--color-success);
}

/*
 * Excluded feature (a `false` boolean flag): rendered muted with an x-circle
 * icon instead of a contradictory check + ✗. Public-card-only treatment.
 */
.catalog-feature-item--excluded {
  color: var(--color-muted);
}

.catalog-feature-item--excluded i {
  color: var(--color-muted);
}

/* ── Pricing CTA button ──────────────────────────────────────────────── */
/*
 * Filled accent. Supplies colour and block layout for the card footer CTA.
 * Accessible focus ring via the global a:focus-visible rule.
 */
.pricing-cta {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-3) var(--space-6);
  border-radius:    var(--radius);
  border:           1px solid var(--color-accent);
  font-size:        var(--font-size-base);
  font-weight:      600;
  line-height:      var(--line-height-base);
  text-decoration:  none;
  cursor:           pointer;
  background-color: var(--color-accent);
  color:            var(--color-bg);
  width:            100%;
  justify-content:  center;
  margin-top:       var(--space-4);
}

.pricing-cta:hover,
.pricing-cta:focus-visible {
  background-color: var(--color-accent-hover);
  border-color:     var(--color-accent-hover);
  color:            var(--color-bg);
  text-decoration:  none;
}

/* Focus ring is supplied by the global a:focus-visible rule above. */

/* ── Pricing unavailable (graceful state) ────────────────────────────── */
.pricing-unavailable {
  padding:          var(--space-12) var(--space-8);
  background-color: var(--color-surface);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius);
  text-align:       center;
  max-width:        480px;
  margin-inline:    auto;
}

.pricing-unavailable__heading {
  font-size:    var(--font-size-2xl);
  margin-block: 0 var(--space-4);
  color:        var(--color-text);
}

.pricing-unavailable__text {
  font-size: var(--font-size-base);
  color:     var(--color-muted);
  margin:    0;
}

/* ── Card footer wrapper ─────────────────────────────────────────────── */
.catalog-card-footer {
  margin-top: auto;
}

/* ── Keyboard focus ring for catalogue cards (FR-020 / T034) ──────── */
/*
 * Catalogue card divs carry tabindex="0" so keyboard users can navigate
 * between plan / offering cards. A token-based focus outline mirrors the
 * global a:focus-visible ring so visual parity is maintained.
 */
.catalog-card:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── Add-ons group sub-heading (T027) ────────────────────────────────── */
/*
 * Appears once per group (e.g. "Agent quota", "Add-ons") inside the Add-ons
 * section. Visually smaller than the section h2 but clearly a group label.
 */
.pricing-addons-group-heading {
  font-size:    var(--font-size-xl);
  font-weight:  700;
  color:        var(--color-text);
  margin-block: 0 var(--space-4);
}

/* Not the first group — add spacing above it */
.pricing-addons-group-heading + .pricing-grid + .pricing-addons-group-heading {
  margin-block-start: var(--space-8);
}

/* ── Contact-sales bottom panel (T029) ───────────────────────────────── */
/*
 * .pricing-contact-sales — a distinct surface panel at the page bottom.
 * Uses var(--color-surface) to lift it off the page background, with an
 * accent-left border for brand warmth. No hard-coded colours.
 */
.pricing-contact-sales {
  background-color: var(--color-surface);
  border-bottom:    none;    /* override the general .pricing-section rule */
}

.pricing-contact-sales__lead {
  font-size:    var(--font-size-lg);
  color:        var(--color-muted);
  max-width:    60ch;
  margin-block: 0 var(--space-6);
  line-height:  var(--line-height-base);
}

/* ── Pricing FAQ tail (T030) ─────────────────────────────────────────── */
/*
 * A static, fully-visible Q&A list — NOT an accordion. Every answer is shown
 * by default so the section is completely readable with JavaScript disabled
 * (FR-018). Each item is a question heading (<h3>) above an always-visible
 * answer body. Items are separated by a hairline border for scannability.
 */
/*
 * Full-width Q&A. Single column on mobile; two balanced columns on wide
 * screens so the list fills the container instead of floating in the left
 * half. Each item carries a top hairline so dividers read consistently in
 * either column.
 */
.pricing-faq-items {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0 var(--space-12);
}

@media (min-width: 860px) {
  .pricing-faq-items {
    grid-template-columns: 1fr 1fr;
  }
}

.pricing-faq-item {
  padding-block: var(--space-6);
  border-top:    1px solid var(--color-border);
}

.pricing-faq-item__q {
  font-size:    var(--font-size-lg);
  font-weight:  700;
  color:        var(--color-text);
  margin-block: 0 var(--space-3);
  line-height:  var(--line-height-heading);
}

.pricing-faq-item__a {
  color:       var(--color-muted);
  line-height: var(--line-height-base);
}

.pricing-faq-item__a p {
  margin-block: 0 var(--space-3);
}

.pricing-faq-item__a p:last-child {
  margin-block-end: 0;
}

.pricing-faq-item__a ul,
.pricing-faq-item__a ol {
  padding-inline-start: 1.25rem;
  margin-block:         0 var(--space-3);
}