/* Waypath — waypath.run
 *
 * Tokens are ported from the app, not re-invented:
 *   Waypath/UI/Theme.swift        — coral, coralGlow, ember, violet, deepInk
 *   Waypath/UI/DesignTokens.swift — the 4pt spacing scale, 5 radii, the rule
 *                                   that a raw number in a view is a bug
 *   Waypath/Views/Explore/RegionArtwork.swift — the alpine range palette
 *
 * CONTRAST. Theme.swift marks coralGlow and ember "decorative only" because
 * they measure 2.81:1 and 2.20:1 against white. That is a statement about
 * WHITE, not about the colours, so the web inverts where the app does:
 *
 *   dark surfaces  coralGlow #FF6B52 on #120F29 = 6.64:1  -> legal for text
 *   light surfaces coral     #B04A36 on #FFFFFF = 5.41:1  -> legal for text
 *                            (#C2523D, the app's exact coral, is 4.60:1 on
 *                             white but only 4.17:1 on the raised surface —
 *                             the same trap DesignTokens.warningInk documents,
 *                             so the light accent is darkened one more step.)
 *
 * The trace is a GRAPHIC, so its floor is 3:1, not 4.5:1. #FF6B52 clears that
 * easily on dark (6.64:1) but measures 2.81:1 on white and would FAIL — so the
 * light theme draws the trace in #D4553F (4.06:1) instead. Every ratio in this
 * file is checked by web/tools/check_contrast.py.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Spacing — DS.Space, the 4pt base scale. */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-3xl: 72px;
  --s-4xl: 112px;

  /* Radius — DS.Radius, five steps, all continuous. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --measure: 34rem;      /* readable line length */
  --page: 1120px;        /* content column */

  /* Dark is the default: the app's Explore artwork is dark at the foot, and
     so is the icon. */
  --bg: #120F29;
  --bg-raised: #1B1738;
  --bg-sunken: #0C0A1D;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.26);

  --ink: #FFFFFF;        /* 18.65:1 on --bg */
  --ink-2: #C9C6D9;      /* 11.16:1 on --bg, 10.24:1 on --bg-raised */
  --ink-3: #A9A3C0;      /*  7.71:1 on --bg,  7.08:1 on --bg-raised */

  --accent: #FF6B52;     /*  6.64:1 on --bg — text-legal here */
  --accent-ink: #FF8A73; /*  8.11:1 — for accent text that must sit on raised */
  --trace: #FF6B52;      /*  6.64:1 as a graphic, floor is 3:1 */
  --ember: #FF9433;      /*  8.47:1 on --bg */
  --violet: #B49CF5;     /*  8.01:1 on --bg */
  --violet-graphic: #7A4CE6;

  /* The CTA is the app's premiumGradient, and it keeps the app's guarantee:
     white clears 4.5:1 on BOTH endpoints (coral 4.60:1, violet 5.24:1). */
  --cta-from: #C2523D;
  --cta-to: #7A4CE6;
  --on-cta: #FFFFFF;

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 14px 40px rgba(0, 0, 0, 0.45);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Self-hosting rule: there is no webfont here at all. The live-share page
     next door avoids a CDN because a third-party host would see a capability
     token in the Referer; the marketing site has no token to leak, but it
     keeps the same posture — zero external requests, and nothing to go down. */
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFFFFF;
    --bg-raised: #F5F3F8;
    --bg-sunken: #EDEAF3;
    --line: rgba(20, 18, 31, 0.14);
    --line-strong: rgba(20, 18, 31, 0.28);

    --ink: #14121F;      /* 18.49:1 on white */
    --ink-2: #4A4560;    /*  9.09:1 on white, 8.25:1 on raised */
    --ink-3: #5A5470;    /*  7.15:1 on white, 6.49:1 on raised */

    --accent: #B04A36;   /*  5.41:1 on white, 4.91:1 on raised */
    --accent-ink: #B04A36;
    --trace: #D4553F;    /*  4.06:1 — clears the 3:1 graphic floor on white */
    --ember: #8A4A05;
    --violet: #6B3FD4;   /*  6.39:1 on white */
    --violet-graphic: #6B3FD4;

    --shadow-card: 0 10px 30px rgba(20, 18, 31, 0.10);
    --shadow-float: 0 14px 40px rgba(20, 18, 31, 0.16);
  }
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.4vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 4.2vw, 2.7rem); font-weight: 800; }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); font-weight: 700; }

p { margin: 0 0 var(--s-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); }
a:hover { color: var(--ink); }

/* One visible, high-contrast focus ring everywhere. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip {
  position: absolute;
  left: var(--s-md);
  top: -100px;
  z-index: 100;
  background: var(--bg-raised);
  color: var(--ink);
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: var(--s-md); }

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

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--s-lg);
}

@media (max-width: 640px) {
  .wrap { padding-inline: var(--s-md); }
}

.page { position: relative; }

section {
  position: relative;
  padding-block: var(--s-4xl);
}

@media (max-width: 720px) {
  section { padding-block: var(--s-3xl); }
}

.lede {
  color: var(--ink-2);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  max-width: var(--measure);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s-md);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--trace);
}

/* ------------------------------------------------------------ the trace */
/*
 * The owner's device: one continuous coral route running the length of the
 * page. It is not decoration painted per section — site.js reads the y centre
 * of every [data-waypoint] element and threads a single smooth path through
 * all of them, so the line genuinely connects the sections at any viewport
 * width and re-threads itself on resize.
 *
 * The SVG is sized in CSS pixels (viewBox == pixel box), so the scale is
 * uniform: strokes keep their width and waypoint circles stay circular. That
 * is why there is no preserveAspectRatio="none" here.
 */

/* z-index 2 puts the trace ABOVE the hero's artwork — the hero sets
   isolation:isolate, so without an explicit index here the whole hero would
   paint over the line and the trace would appear to start below the fold —
   and below .wrap at 3, so it still passes behind every card and column. */
.trace-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.trace-line {
  fill: none;
  stroke: var(--trace);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The soft halo the icon puts behind its trail. Kept low: on a dark page it
   reads as a glow, and on a light one anything stronger reads as a smudge. */
.trace-ghost {
  fill: none;
  stroke: var(--trace);
  stroke-opacity: 0.13;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-color-scheme: light) {
  .trace-ghost { stroke-opacity: 0.09; }
}

.trace-dot { fill: var(--bg); stroke: var(--trace); stroke-width: 3; }
.trace-dot-core { fill: var(--trace); }
/* The open start ring from the logomark. */
.trace-start { fill: none; stroke: var(--trace); stroke-width: 3.4; }

/* Draw-on-scroll. site.js sets --trace-progress from 0 to 1. Without JS the
   path simply renders complete, which is the correct fallback. */
.js .trace-line[data-draw] {
  stroke-dasharray: var(--trace-len, 0);
  stroke-dashoffset: calc(var(--trace-len, 0) * (1 - var(--trace-progress, 1)));
}

@media (prefers-reduced-motion: reduce) {
  .js .trace-line[data-draw] {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* Everything that is not the trace sits above it. */
.wrap, header, footer { position: relative; z-index: 3; }

/* --------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}
.brand svg { width: 30px; height: 30px; flex: none; border-radius: 8px; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
}
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}
.nav a:hover { color: var(--ink); }

@media (max-width: 860px) {
  .nav .nav-link { display: none; }
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  padding: 14px var(--s-lg);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease;
  min-height: 48px;              /* comfortable touch target */
}
.btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

.btn-primary {
  background-image: linear-gradient(135deg, var(--cta-from), var(--cta-to));
  color: var(--on-cta);
}
.btn-primary:hover { color: var(--on-cta); filter: brightness(1.08); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover { background: var(--bg-raised); color: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-top: var(--s-xl);
}

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-top: var(--s-4xl);
  padding-bottom: 0;
  isolation: isolate;
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
/* The artwork is an <img>, so it is the img that must be stretched — the SVG's
   own preserveAspectRatio="xMidYMax slice" then crops the range to fill,
   keeping the foot of the mountains pinned to the bottom edge. */
.hero-art img,
.hero-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  object-position: bottom center;
}

/* The artwork is an alpine range at dusk in every colour scheme — it is the
   app's own palette, and it is dark at the foot on purpose so the headline
   over it stays legible. In light mode the hero therefore keeps DARK ink
   rules: white text on the range, not the page's --ink. */
.hero-inner {
  padding-bottom: var(--s-4xl);
  color: #FFFFFF;
}
.hero-inner h1 { color: #FFFFFF; }
.hero-inner .lede { color: rgba(255, 255, 255, 0.88); }
.hero-inner .eyebrow { color: #FF8A73; }

.hero-inner .btn-secondary {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.42);
}
.hero-inner .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.hero-claim {
  max-width: 22ch;
}

.hero-note {
  margin-top: var(--s-lg);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------- panels */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  box-shadow: var(--shadow-card);
}

.grid {
  display: grid;
  gap: var(--s-md);
  margin-top: var(--s-xl);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

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

.card h3 { margin-bottom: var(--s-xs); }
.card p { color: var(--ink-2); font-size: 0.98rem; }

.card-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--trace) 16%, transparent);
  margin-bottom: var(--s-sm);
}
.card-icon svg { width: 22px; height: 22px; stroke: var(--accent-ink); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------------------------------- the radar case */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-md);
  margin-top: var(--s-xl);
}
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

.compare > div {
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  border: 1px solid var(--line);
}
.compare .before { background: var(--bg-sunken); }
.compare .after {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--trace) 14%, var(--bg-raised)), var(--bg-raised));
  border-color: color-mix(in srgb, var(--trace) 45%, transparent);
}
.compare h3 { margin-bottom: var(--s-sm); }
.compare ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); }
.compare li { margin-bottom: var(--s-xs); }

.pull {
  border-left: 4px solid var(--trace);
  padding: var(--s-xs) 0 var(--s-xs) var(--s-lg);
  margin: var(--s-xl) 0;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 40rem;
  color: var(--ink);
}

/* ---------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-md);
  margin-top: var(--s-xl);
}
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }

.stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-lg);
  background: var(--bg-raised);
}
.stat b {
  display: block;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
  margin-bottom: var(--s-xs);
}
.stat span { color: var(--ink-2); font-size: 0.95rem; }

/* ------------------------------------------------------------- honesty  */

.honest {
  background: var(--bg-sunken);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.honest .card { background: transparent; box-shadow: none; }
.honest li { margin-bottom: var(--s-sm); color: var(--ink-2); }
.honest strong { color: var(--ink); }

.checklist { list-style: none; margin: var(--s-lg) 0 0; padding: 0; }
.checklist li {
  display: flex;
  gap: var(--s-sm);
  align-items: flex-start;
  margin-bottom: var(--s-md);
  color: var(--ink-2);
}
.checklist svg {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  stroke: var(--accent-ink); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-xxl);
  color: var(--ink-2);
  font-size: 0.94rem;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg);
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-md); }
/* The only human-facing route between the two languages. hreflang tells
   a crawler the pages are a pair; it tells a reader nothing, and a French
   visitor landing on the English page had no way across but Google. */
.lang-switch {
  margin: 0 0 var(--s-sm);
  font-size: 0.86rem;   /* same literal as .footer-note below; this stylesheet has no font-size scale */
}
.lang-switch a { color: var(--ink-2); }
.lang-switch a:hover { color: var(--ink-1); }

.footer-note { margin-top: var(--s-lg); color: var(--ink-3); font-size: 0.86rem; max-width: 52rem; }

/* The closing panel. A second ridge band was tried here to bookend the hero's
   mountains; stretched this wide it flattened into a horizontal stripe that
   cut across the trace's final sweep to the pin, so it was removed rather
   than kept as decoration that only half works. The trace ending at the
   logomark's own map pin is the bookend. */
.cta {
  text-align: center;
}
.cta .btn-row { justify-content: center; }
.cta .lede { margin-inline: auto; }

/* The pin that ends the trace, lifted from the app icon. */
.trace-end {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto var(--s-lg);
  color: var(--trace);
}

/* ------------------------------------------------------------- utilities */
/*
 * These exist so index.html carries no style="" attributes. That is partly
 * hygiene and partly the Content-Security-Policy the site is served under:
 * `style-src 'self'` with no 'unsafe-inline' blocks inline style attributes
 * outright, so every one of them had to become a class for the strict policy
 * to be shippable.
 */

/* The logomark chip: the app icon's violet-to-coral gradient behind white ink. */
.brand-mark {
  background: linear-gradient(135deg, #7A4CE6, #FF6B52);
  padding: 4px;
  color: #FFFFFF;
}

.brand-footer { margin-bottom: var(--s-sm); }

/* The header's call to action is one step smaller than a section CTA, while
   staying above the 44px touch-target floor. */
.nav-cta {
  padding: 10px 18px;
  min-height: 44px;
}

.mt-xl { margin-top: var(--s-xl); }
.mt-0 { margin-top: 0; }

.grid-top { align-items: start; }
.grid-mid { align-items: center; }

/* A device screenshot sitting in a column. */
/* <picture> wraps the screenshots for WebP + density switching. `contents`
   removes its box entirely, so the img keeps laying out exactly as it did
   when it was a bare child — margin-inline:auto below still centres it. */
.shot-picture { display: contents; }

.shot {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  margin-inline: auto;
}

.measure-wide { max-width: 52rem; }
.measure-about { max-width: 30rem; }

.note-muted {
  color: var(--ink-3);
  margin-top: var(--s-lg);
}

/* --------------------------------------------------------- content pages */
/*
 * Everything below serves the pages added around the landing page: features,
 * cities, comparisons, the FAQ and the about page. Nothing here restyles an
 * existing class — each one is new, so index.html renders exactly as it did.
 */

/* A sub-page opens without the hero's mountain artwork. The range is the
   landing page's entrance; repeating it on twenty-odd pages would turn a
   deliberate image into wallpaper. These pages open on the words instead. */
.page-hero {
  padding-top: var(--s-xxl);
  padding-bottom: var(--s-xl);
}
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { margin-top: var(--s-lg); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-xs);
  font-size: 0.86rem;
  color: var(--ink-3);
  margin-bottom: var(--s-lg);
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-3); }

/* Body copy on a content page. Wider than --measure, which is tuned for the
   landing page's short ledes, but still short of the full column. */
.prose { max-width: 46rem; }
.prose p { color: var(--ink-2); }
.prose h3 { margin-top: var(--s-xl); margin-bottom: var(--s-xs); }
.prose ul { color: var(--ink-2); padding-left: 1.15em; }
.prose li { margin-bottom: var(--s-xs); }
.prose strong { color: var(--ink); }

.section-sub {
  color: var(--ink-2);
  max-width: 46rem;
  margin-top: var(--s-md);
}

/* A question and its answer. Plain headings and paragraphs on purpose: the
   answer has to be readable as text by a crawler that never runs a script and
   never opens a <details>. */
.qa {
  border-top: 1px solid var(--line);
  padding-top: var(--s-lg);
  margin-top: var(--s-lg);
  max-width: 46rem;
}
.qa h3 { margin-bottom: var(--s-xs); }
.qa p { color: var(--ink-2); }

/* Named routes on a city page. */
.route-list { list-style: none; margin: var(--s-xl) 0 0; padding: 0; }
.route-list > li {
  border-left: 3px solid var(--trace);
  padding: 0 0 0 var(--s-lg);
  margin-bottom: var(--s-xl);
  max-width: 46rem;
}
.route-list h3 { margin-bottom: var(--s-xxs); }
.route-list p { color: var(--ink-2); margin-bottom: 0; }
.route-meta {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s-xs);
}

/* Comparison tables. The wrapper scrolls, never the page. */
.table-scroll {
  overflow-x: auto;
  margin-top: var(--s-xl);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
}
.cmp {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.96rem;
}
.cmp th, .cmp td {
  text-align: left;
  padding: var(--s-sm) var(--s-md);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.cmp thead th {
  color: var(--ink);
  font-weight: 700;
  background: var(--bg-sunken);
  white-space: nowrap;
}
.cmp tbody th {
  color: var(--ink);
  font-weight: 600;
  width: 32%;
}
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

.table-note {
  color: var(--ink-3);
  font-size: 0.86rem;
  margin-top: var(--s-sm);
  max-width: 52rem;
}

/* Sibling links at the foot of a page. */
.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin-top: var(--s-lg);
  padding: 0;
  list-style: none;
}
.link-list a {
  display: inline-block;
  padding: 10px var(--s-md);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.link-list a:hover { background: var(--bg-raised); color: var(--ink); }

/* ---------------------------------------------------------- footer index */

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(9rem, auto));
  gap: var(--s-lg) var(--s-xl);
}
@media (max-width: 860px) { .footer-nav { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-nav { grid-template-columns: 1fr; } }

.footer-col { display: flex; flex-direction: column; gap: var(--s-xxs); }
.footer-head {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--s-xs);
}
.footer-col a { font-size: 0.92rem; }


/* ---------------------------------------------------------- FAQ accordion */
/*
   Native <details>/<summary>. No JavaScript, deliberately: this site is served
   under `script-src 'self'` with no 'unsafe-inline', so a scripted accordion
   would be blocked and the questions would simply never open. <details> also
   arrives keyboard-operable and correctly announced by screen readers without
   a line of ARIA from us, and Google indexes content inside it normally, so
   collapsing the answers costs nothing in search.
*/
details.qa { border-bottom: 1px solid var(--line); }

details.qa summary {
  list-style: none;                 /* the default triangle, replaced below */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-md) 0;
}
details.qa summary::-webkit-details-marker { display: none; }

details.qa summary h3 {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 650;
  color: var(--ink);
}

/* A chevron drawn in CSS, so it needs no asset and no icon font. */
details.qa summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
details.qa[open] summary::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  details.qa summary::after { transition: none; }
}

details.qa summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

details.qa > p {
  margin: 0 0 var(--s-md);
  padding-right: var(--s-lg);
  color: var(--ink-2);
  line-height: 1.62;
}