/* ==========================================================================
   SysOp — Material Design 3 stylesheet
   Pure CSS. No JavaScript, no external requests, no web fonts.
   Light/dark theme via prefers-color-scheme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Color tokens — Material 3 scheme (seed: #0061A4)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --md-primary: #0061a4;
  --md-on-primary: #ffffff;
  --md-primary-container: #d1e4ff;
  --md-on-primary-container: #001d36;

  --md-secondary: #535f70;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #d7e3f7;
  --md-on-secondary-container: #101c2b;

  --md-tertiary: #6b5778;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #f2daff;
  --md-on-tertiary-container: #251431;

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  --md-surface: #fdfcff;
  --md-on-surface: #1a1c1e;
  --md-surface-variant: #dfe2eb;
  --md-on-surface-variant: #43474e;

  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f7f9fc;
  --md-surface-container: #f1f4f9;
  --md-surface-container-high: #ebeef3;
  --md-surface-container-highest: #e6e8ee;

  --md-outline: #73777f;
  --md-outline-variant: #c3c7cf;
  --md-inverse-surface: #2f3033;
  --md-inverse-on-surface: #f1f0f4;
  --md-scrim: rgba(0, 0, 0, 0.4);

  --md-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-shadow-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);

  --shape-xs: 4px;
  --shape-s: 8px;
  --shape-m: 12px;
  --shape-l: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  --page-max: 1120px;
  --gutter: 24px;

  --font-sans: "Roboto", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular",
    Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-primary: #9ecaff;
    --md-on-primary: #003258;
    --md-primary-container: #00497d;
    --md-on-primary-container: #d1e4ff;

    --md-secondary: #bbc7db;
    --md-on-secondary: #253140;
    --md-secondary-container: #3b4858;
    --md-on-secondary-container: #d7e3f7;

    --md-tertiary: #d7bee4;
    --md-on-tertiary: #3b2948;
    --md-tertiary-container: #523f5f;
    --md-on-tertiary-container: #f2daff;

    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;

    --md-surface: #111416;
    --md-on-surface: #e2e2e6;
    --md-surface-variant: #43474e;
    --md-on-surface-variant: #c3c7cf;

    --md-surface-container-lowest: #0c0e10;
    --md-surface-container-low: #1a1c1e;
    --md-surface-container: #1e2022;
    --md-surface-container-high: #282a2d;
    --md-surface-container-highest: #333537;

    --md-outline: #8d9199;
    --md-outline-variant: #43474e;
    --md-inverse-surface: #e2e2e6;
    --md-inverse-on-surface: #2f3033;
    --md-scrim: rgba(0, 0, 0, 0.6);

    --md-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
    --md-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
    --md-shadow-3: 0 4px 8px 3px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--md-on-surface);
  background: var(--md-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.4em;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--md-on-surface);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--md-primary);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--shape-xs);
}

img { max-width: 100%; height: auto; display: block; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

code {
  padding: 0.12em 0.4em;
  border-radius: var(--shape-xs);
  background: var(--md-surface-container-high);
  color: var(--md-on-surface);
}

kbd {
  padding: 0.15em 0.5em;
  border: 1px solid var(--md-outline-variant);
  border-bottom-width: 2px;
  border-radius: var(--shape-xs);
  background: var(--md-surface-container-highest);
  white-space: nowrap;
}

hr {
  height: 1px;
  margin: 40px 0;
  border: 0;
  background: var(--md-outline-variant);
}

::selection {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: 500;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(48px, 6vw, 88px);
}

.section--alt {
  background: var(--md-surface-container-low);
  border-block: 1px solid var(--md-outline-variant);
}

.section__head {
  max-width: 62ch;
  margin-bottom: 32px;
}

.section__head p {
  color: var(--md-on-surface-variant);
  font-size: 1.05rem;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-primary);
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--md-on-surface-variant);
}

/* --------------------------------------------------------------------------
   4. Top app bar
   -------------------------------------------------------------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--md-surface-container);
  border-bottom: 1px solid var(--md-outline-variant);
}

.appbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding-block: 8px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--md-on-surface);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }

.brand__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--shape-s);
  box-shadow: var(--md-shadow-1);
  background: var(--md-surface-container-highest);
}

.brand__sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--md-on-surface-variant);
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--shape-full);
  color: var(--md-on-surface-variant);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav a:hover {
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

@media (max-width: 599px) {
  .appbar__inner { padding-block: 10px; }
  .brand { font-size: 1.125rem; }
  .nav {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------------------
   5. Buttons & chips
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 26px;
  border: 1px solid transparent;
  border-radius: var(--shape-full);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.18s ease, background-color 0.18s ease,
    transform 0.18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-shadow-1);
}
.btn--filled:hover { box-shadow: var(--md-shadow-2); }

.btn--tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.btn--tonal:hover { box-shadow: var(--md-shadow-1); }

.btn--outlined {
  background: transparent;
  border-color: var(--md-outline);
  color: var(--md-primary);
}
.btn--outlined:hover { background: var(--md-surface-container-high); }

.btn__glyph {
  font-size: 1.05em;
  line-height: 1;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-s);
  background: var(--md-surface-container-low);
  color: var(--md-on-surface-variant);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.chip--accent {
  border-color: transparent;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 96px);
  background:
    radial-gradient(90% 120% at 8% 0%, var(--md-primary-container) 0%, transparent 62%),
    radial-gradient(70% 100% at 100% 10%, var(--md-tertiary-container) 0%, transparent 60%),
    var(--md-surface);
  border-bottom: 1px solid var(--md-outline-variant);
}

.hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero__icon {
  width: 84px;
  height: 84px;
  margin-bottom: 24px;
  border-radius: var(--shape-l);
  box-shadow: var(--md-shadow-2);
  background: var(--md-surface-container-lowest);
}

.hero h1 {
  margin-bottom: 12px;
}

.hero__tagline {
  max-width: 46ch;
  margin-bottom: 24px;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  color: var(--md-on-surface-variant);
}

.hero__note {
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
}

/* --------------------------------------------------------------------------
   6a. Screenshot slideshow (no JavaScript)

   Four shots stacked in one grid cell, cross-fading on a 20 s loop — 5 s each.
   State lives in the five `.shots__state` radios that open the block in the
   markup, so every rule below is `#id:checked ~ …`:

     #shot-auto   the loop runs (default)
     #shot-1…4    the loop stops and that shot stays on screen

   The dots and the arrows are <label>s for those radios. While the loop runs,
   the dot and the arrow pair belonging to the shot on screen are picked out by
   the same 20 s timeline, so the controls never point at the wrong shot.
   -------------------------------------------------------------------------- */
.shots {
  position: relative;
  /* Flipped to `paused` on hover so a shot can be read at leisure. */
  --shot-play: running;
}
.shots:hover { --shot-play: paused; }

.shots__frame {
  position: relative;
  border-radius: var(--shape-xl);
  padding: 10px;
  background: var(--md-surface-container-high);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-shadow-3);
}

.shots__viewport {
  display: grid;
  border-radius: var(--shape-l);
  overflow: hidden;
  background: var(--md-surface-container-lowest);
  border: 1px solid var(--md-outline-variant);
}

.shots__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
  animation: shot-fade 20s infinite;
  animation-play-state: var(--shot-play);
}

.shots__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Visible for its own 5 s, with a 0.5 s cross-fade at each end. */
@keyframes shot-fade {
  0%     { opacity: 1; visibility: visible; }
  22.5%  { opacity: 1; visibility: visible; }
  25%    { opacity: 0; visibility: hidden; }
  97.5%  { opacity: 0; visibility: hidden; }
  100%   { opacity: 1; visibility: visible; }
}

/* ---- arrows -------------------------------------------------------------- */
.shots__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0 0 5px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-full);
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--md-shadow-2);
  visibility: hidden;
  animation: shot-slot 20s infinite;
  animation-play-state: var(--shot-play);
  transition: background 0.15s ease, color 0.15s ease, scale 0.15s ease;
}
.shots__nav:hover {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.shots__nav:active { scale: 0.94; }
.shots__nav--prev { left: 18px; }
.shots__nav--next { right: 18px; }

/* `visibility` also keeps the three off-duty pairs out of the a11y tree. */
@keyframes shot-slot {
  0%, 24.9% { visibility: visible; }
  25%, 100% { visibility: hidden; }
}

/* ---- dots and the play button -------------------------------------------- */
.shots__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.shots__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--shape-full);
  background: var(--md-outline-variant);
  cursor: pointer;
  animation: shot-pip 20s infinite;
  animation-play-state: var(--shot-play);
  transition: width 0.2s ease, background 0.2s ease;
}

@keyframes shot-pip {
  0%,  22.5% { width: 26px; background: var(--md-primary); }
  25%, 97.5% { width: 10px; background: var(--md-outline-variant); }
  100%       { width: 26px; background: var(--md-primary); }
}

/* Negative delays put each shot in its own quarter of the loop. This has to
   come after the three `animation:` shorthands above — they reset the delay. */
.shots__slide--1, .shots__dot--1, .shots__nav--on1 { animation-delay:   0s; }
.shots__slide--2, .shots__dot--2, .shots__nav--on2 { animation-delay: -15s; }
.shots__slide--3, .shots__dot--3, .shots__nav--on3 { animation-delay: -10s; }
.shots__slide--4, .shots__dot--4, .shots__nav--on4 { animation-delay:  -5s; }

.shots__auto {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-full);
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  cursor: pointer;
}
.shots__auto-glyph {
  width: 9px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(12% 0, 100% 50%, 12% 100%);
}

/* ---- state: the loop is running (#shot-auto) ----------------------------- */
#shot-auto:checked ~ .shots__controls .shots__auto {
  border-color: transparent;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

/* ---- state: one shot picked by hand — the loop stops --------------------- */
.shots__state--shot:checked ~ .shots__frame .shots__slide,
.shots__state--shot:checked ~ .shots__frame .shots__nav,
.shots__state--shot:checked ~ .shots__controls .shots__dot {
  animation: none;
}

#shot-1:checked ~ .shots__frame .shots__slide--1,
#shot-2:checked ~ .shots__frame .shots__slide--2,
#shot-3:checked ~ .shots__frame .shots__slide--3,
#shot-4:checked ~ .shots__frame .shots__slide--4 {
  opacity: 1;
  visibility: visible;
}

#shot-1:checked ~ .shots__frame .shots__nav--on1,
#shot-2:checked ~ .shots__frame .shots__nav--on2,
#shot-3:checked ~ .shots__frame .shots__nav--on3,
#shot-4:checked ~ .shots__frame .shots__nav--on4 {
  visibility: visible;
}

#shot-1:checked ~ .shots__controls .shots__dot--1,
#shot-2:checked ~ .shots__controls .shots__dot--2,
#shot-3:checked ~ .shots__controls .shots__dot--3,
#shot-4:checked ~ .shots__controls .shots__dot--4 {
  width: 26px;
  background: var(--md-primary);
}

/* ---- keyboard ------------------------------------------------------------ */
/* Keyboard focus holds the loop, the way hovering does. Deliberately not
   :focus-within — a mouse click on the play button focuses the radio too, and
   that would leave the slideshow frozen the moment it was started. */
.shots__state:focus-visible ~ .shots__frame .shots__slide,
.shots__state:focus-visible ~ .shots__frame .shots__nav,
.shots__state:focus-visible ~ .shots__controls .shots__dot {
  animation-play-state: paused;
}

/* The radios are a real group, so Tab reaches them and the arrow keys move
   between the shots. The ring has to be drawn on the matching label. */
#shot-auto:focus-visible ~ .shots__controls .shots__auto,
#shot-1:focus-visible ~ .shots__controls .shots__dot--1,
#shot-2:focus-visible ~ .shots__controls .shots__dot--2,
#shot-3:focus-visible ~ .shots__controls .shots__dot--3,
#shot-4:focus-visible ~ .shots__controls .shots__dot--4 {
  outline: 3px solid var(--md-primary);
  outline-offset: 3px;
}

@media (min-width: 905px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (max-width: 904px) {
  .shots { max-width: 560px; margin-inline: auto; }
}

@media (max-width: 599px) {
  .shots__nav {
    width: 38px;
    height: 38px;
    padding-bottom: 4px;
    font-size: 1.6rem;
  }
  .shots__nav--prev { left: 8px; }
  .shots__nav--next { right: 8px; }
}

/* No automatic cycling at all: the first shot stays put until one is picked. */
@media (prefers-reduced-motion: reduce) {
  .shots__slide,
  .shots__nav,
  .shots__dot {
    animation: none;
    transition: none;
  }
  #shot-auto:checked ~ .shots__frame .shots__slide--1 {
    opacity: 1;
    visibility: visible;
  }
  #shot-auto:checked ~ .shots__frame .shots__nav--on1 { visibility: visible; }
  #shot-auto:checked ~ .shots__controls .shots__dot--1 {
    width: 26px;
    background: var(--md-primary);
  }
}

/* --------------------------------------------------------------------------
   7. Cards & grids
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.card {
  padding: 24px;
  border-radius: var(--shape-l);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--md-shadow-1);
  transform: translateY(-2px);
}

.card--flat:hover { box-shadow: none; transform: none; }

.card--accent {
  background: var(--md-primary-container);
  border-color: transparent;
  color: var(--md-on-primary-container);
}
.card--accent h3,
.card--accent h4 { color: var(--md-on-primary-container); }
.card--accent p { color: var(--md-on-primary-container); }

.card h3 { margin-bottom: 8px; font-size: 1.1875rem; }

.card p {
  margin: 0;
  color: var(--md-on-surface-variant);
  font-size: 0.9375rem;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: var(--shape-m);
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-size: 1.35rem;
  line-height: 1;
}

/* Numbered steps */
.steps {
  counter-reset: step;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 20px 24px 20px 68px;
  border-radius: var(--shape-l);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 20px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--shape-full);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-size: 0.9375rem;
  font-weight: 600;
}

.steps h4 { margin-bottom: 4px; }
.steps p { margin: 0; color: var(--md-on-surface-variant); font-size: 0.9375rem; }

/* Definition-style key/value list */
.kv {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-l);
  overflow: hidden;
}

.kv > div {
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  background: var(--md-surface-container-low);
  border-bottom: 1px solid var(--md-outline-variant);
}
.kv > div:last-child { border-bottom: 0; }

.kv dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.kv dd {
  margin: 0;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .kv > div {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-l);
  background: var(--md-surface-container-low);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th, td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
  vertical-align: top;
}

thead th {
  background: var(--md-surface-container-high);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

td .chip { white-space: nowrap; }

/* --------------------------------------------------------------------------
   9. Lists
   -------------------------------------------------------------------------- */
.list-check,
.list-plain {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.list-check li {
  position: relative;
  padding-left: 30px;
  color: var(--md-on-surface-variant);
}

.list-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--md-primary);
  font-weight: 700;
}

.list-cross li::before {
  content: "✕";
  color: var(--md-error);
}

.prose { max-width: 72ch; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1rem; }
.prose li { margin-bottom: 8px; color: var(--md-on-surface-variant); }
.prose h2 { margin-top: 44px; font-size: 1.5rem; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 28px; font-size: 1.1875rem; }
.prose p { color: var(--md-on-surface-variant); }
.prose strong { color: var(--md-on-surface); }

/* --------------------------------------------------------------------------
   10. Callouts, FAQ
   -------------------------------------------------------------------------- */
.callout {
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: var(--shape-m);
  border-left: 4px solid var(--md-primary);
  background: var(--md-surface-container);
}

.callout p { color: var(--md-on-surface-variant); }
.callout p:last-child { margin-bottom: 0; }

.callout--warn {
  border-left-color: var(--md-error);
  background: var(--md-error-container);
}
.callout--warn p { color: var(--md-on-error-container); }
.callout--warn strong { color: var(--md-on-error-container); }

.faq {
  display: grid;
  gap: 12px;
}

.faq details {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--shape-m);
  background: var(--md-surface-container-low);
  overflow: hidden;
}

.faq summary {
  padding: 18px 52px 18px 22px;
  position: relative;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  color: var(--md-on-surface);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--md-primary);
}

.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { background: var(--md-surface-container); }

.faq__body {
  padding: 4px 22px 20px;
  color: var(--md-on-surface-variant);
  font-size: 0.9375rem;
}
.faq__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. CTA banner
   -------------------------------------------------------------------------- */
.cta {
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--shape-xl);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  text-align: center;
}

.cta h2 { color: var(--md-on-primary-container); }

.cta p {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--md-on-primary-container);
}

.cta .btn-row { justify-content: center; }

.cta .btn--outlined {
  border-color: var(--md-on-primary-container);
  color: var(--md-on-primary-container);
}
.cta .btn--outlined:hover { background: rgba(0, 0, 0, 0.06); }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer {
  padding-block: 48px 32px;
  background: var(--md-surface-container);
  border-top: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  font-size: 0.9375rem;
}

.footer__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.footer h4 {
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-on-surface-variant);
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.footer a { color: var(--md-on-surface); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--md-outline-variant);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   13. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .appbar, .footer, .btn-row, .skip-link, .cta { display: none !important; }
  .shots__nav, .shots__controls { display: none !important; }
  /* Print the first shot rather than whatever the loop happened to be on. */
  .shots__slide { animation: none !important; opacity: 0; visibility: hidden; }
  .shots__slide--1 { opacity: 1; visibility: visible; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section { padding-block: 12pt; }
  a { color: #000; text-decoration: underline; }
  .prose { max-width: none; }
  .prose p, .prose li { color: #000; }
}