/* ==========================================================================
   AutoTargets — site design system
   Dark, high-contrast, photographic. Barlow Condensed display / Barlow body /
   IBM Plex Mono labels. Single stylesheet, no framework, no build step.
   ========================================================================== */

:root {
  --bg:          #0c0e10;
  --bg-deep:     #0a0c0e;
  --surface:     #121417;
  --surface-2:   #16191d;

  --ink:         #e8eaec;
  --ink-hi:      #ffffff;
  --ink-soft:    #dfe3e6;
  --muted:       #b9bec3;
  --muted-2:     #c8ccd0;
  --dim:         #9aa0a6;
  /* #6d7377 measured 3.67-4.08:1 against the four surfaces — below WCAG AA —
     and it colours real body text: the "No" cells in the comparison tables and
     the footer legal line. #828991 is 4.98-5.54:1 and still reads as recessive. */
  --dimmer:      #828991;

  --accent:      #f26722;
  --accent-hi:   #ff8a4d;
  --accent-dim:  rgba(242, 103, 34, .14);
  --yes:         #7dd87d;

  --line:        rgba(255, 255, 255, .12);
  --line-soft:   rgba(255, 255, 255, .08);
  --line-faint:  rgba(255, 255, 255, .06);

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    Barlow, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap:    1200px;
  --gutter:  56px;
  --nav-h:   77px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--accent); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-hi); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--display); text-transform: uppercase; font-weight: 700; }

::selection { background: var(--accent); color: #101214; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #101214;
  font: 600 15px var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 20px;
}
.skip-link:focus { left: 8px; top: 8px; color: #101214; }

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

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--bg-deep); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 72px; }

/* ----------------------------------------------------------------- nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 18px var(--gutter);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(12, 14, 16, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav__brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink); }
.nav__brand:hover { color: var(--ink); }
.nav__brand img { height: 38px; width: auto; }
.nav__name {
  display: block; font: 700 20px var(--display);
  letter-spacing: .06em; text-transform: uppercase;
}
.nav__tag {
  display: block; font: 500 11px var(--mono);
  color: var(--accent); letter-spacing: .14em; text-transform: uppercase;
}

/* Source order is brand, CTA, toggle, links (see partials/nav.html) so that
   mobile tab order is correct. Desktop reorders visually only. */
.nav__brand { order: 0; }
.nav__links { order: 1; }
.nav__cta   { order: 2; }

.nav__links {
  display: flex; gap: 28px;
  font: 600 15px var(--display);
  letter-spacing: .1em; text-transform: uppercase;
}
.nav__links a { color: var(--muted-2); }
.nav__links a:hover { color: var(--accent); }
.nav__links a[aria-current="page"] { color: var(--accent); }

.nav__cta {
  background: var(--accent); color: #101214;
  font: 600 14px var(--display);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 22px; white-space: nowrap;
}
.nav__cta:hover { background: var(--accent-hi); color: #101214; }

.nav__toggle {
  display: none;
  background: none; border: 1px solid var(--line);
  color: var(--ink); padding: 8px 12px; cursor: pointer;
  font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}

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

/* Responsive background artwork.
   Pages set --bg-fallback (plain url, always parses) plus --bg-sm/--bg-md/--bg-lg
   (image-set, so WebP is preferred where supported). A browser too old for
   image-set drops that declaration and keeps the plain fallback. */
.hero, .band {
  background-image: var(--bg-fallback);
  background-image: var(--bg-sm, var(--bg-fallback));
}
@media (min-width: 900px) {
  .hero, .band { background-image: var(--bg-md, var(--bg-sm, var(--bg-fallback))); }
}
@media (min-width: 1600px) {
  .hero, .band { background-image: var(--bg-lg, var(--bg-md, var(--bg-sm, var(--bg-fallback)))); }
}

.hero {
  position: relative;
  min-height: 640px;
  height: 92vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-deep);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,14,16,.3) 0%, rgba(12,14,16,0) 40%, rgba(12,14,16,.85) 100%);
}
.hero__inner { position: relative; z-index: 1; padding-bottom: 80px; }
.hero h1 {
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: .01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.hero__lede {
  font: 400 clamp(17px, 2vw, 20px)/1.5 var(--body);
  color: #d7dbde;
  margin: 22px 0 32px;
  max-width: 640px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}

/* Parallax bands: section header over a photo. */
.band {
  position: relative;
  min-height: 420px;
  height: 62vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-deep);
  border-top: 3px solid var(--accent);
}
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,14,16,.25) 0%, rgba(12,14,16,0) 45%, rgba(12,14,16,.92) 100%);
}
.band__inner { position: relative; z-index: 1; padding-bottom: 44px; }
.band h2 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.04;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
}

/* Fixed-attachment parallax is desktop-only: iOS ignores it and it costs
   paint time on low-power devices. Disabled entirely for reduced-motion. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero, .band { background-attachment: fixed; }
}

/* -------------------------------------------------------------- eyebrow -- */

.eyebrow {
  display: inline-block;
  font: 600 13px var(--mono);
  color: var(--accent);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.eyebrow a { color: var(--accent); }

/* Chip variant sits on photography and needs its own plate. */
.eyebrow--chip {
  background: rgba(10, 12, 14, .85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  letter-spacing: .18em;
  padding: 8px 14px;
  margin-bottom: 14px;
}
.hero .eyebrow--chip { font-size: 14px; padding: 9px 16px; margin-bottom: 20px; }

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

.page-head { padding: 72px 0 40px; }
.page-head h1 { font-size: clamp(40px, 6vw, 60px); margin-bottom: 16px; }
.page-head .lede { font: 400 18px/1.6 var(--body); color: var(--muted); max-width: 700px; }

.anchor-row {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 18px;
  font: 500 14px var(--mono);
}

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

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

.btn {
  display: inline-block;
  background: var(--accent); color: #101214;
  font: 600 17px var(--display);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #101214; }

.btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--ink-hi);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }

/* --------------------------------------------------------------- cards -- */

.card {
  position: relative;
  display: block;
  height: 320px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--accent); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(12, 14, 16, .95));
}
.card__body { position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 1; }
.card__num { display: block; font: 600 12px var(--mono); color: var(--accent); letter-spacing: .16em; }
.card__title { display: block; font: 700 30px var(--display); text-transform: uppercase; color: var(--ink); }
.card__desc { display: block; font: 400 15px/1.45 var(--body); color: var(--muted); }

/* Flat panel card — no imagery. */
.panel {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 28px 32px;
  display: block;
}
a.panel { transition: border-color .15s ease; }
a.panel:hover { border-color: var(--accent); }
.panel__title {
  display: block; font: 700 24px var(--display);
  text-transform: uppercase; color: var(--ink); margin-bottom: 6px;
}
.panel__desc { display: block; font: 400 15px/1.5 var(--body); color: var(--muted); }
.panel--pad { padding: 32px 36px; }
.panel__label {
  font: 600 13px var(--mono); color: var(--accent);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px;
}
.panel__body { font: 400 17px/1.9 var(--body); color: var(--muted); }
.panel__body a { color: var(--ink); }
.panel__body a:hover { color: var(--accent-hi); }

/* ---------------------------------------------------------------- prose -- */

.prose { font: 400 17px/1.75 var(--body); color: var(--muted); }
.prose h2 { font-size: clamp(28px, 4vw, 38px); color: var(--ink); margin: 0 0 20px; }
.prose h3 {
  font: 600 15px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 32px 0 10px;
}
.prose p { margin: 0 0 18px; }
.prose > :last-child { margin-bottom: 0; }

.feature-list { margin: 0; padding-left: 20px; font: 400 17px/1.85 var(--body); color: var(--muted); }
.feature-list li::marker { color: var(--accent); }

/* Two-column checklist used for feature roundups. */
.check-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px;
  font: 400 16px/1.5 var(--body); color: var(--muted);
}
.check-list li { position: relative; padding-left: 26px; }
.check-list li::before {
  content: "▸"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: 15px;
}

blockquote.pull {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 24px;
  font: italic 400 19px/1.55 var(--body);
  color: var(--ink-soft);
}
blockquote.pull cite {
  display: block; margin-top: 10px;
  font: 500 13px var(--mono); color: var(--dim); font-style: normal;
}

.note { font: 400 13px/1.6 var(--body); color: var(--dim); margin-top: 14px; }

/* --------------------------------------------------------------- media -- */

figure.media { margin: 0; }
figure.media img { width: 100%; border: 1px solid var(--line-soft); }
figure.media figcaption { font: 400 13px/1.6 var(--body); color: var(--dim); margin-top: 10px; }

.video-frame {
  position: relative;
  padding-top: 56.25%;
  border: 1px solid var(--line);
  background: #000;
}
.video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* ---------------------------------------------------------- video clips -- */
/* Every clip on the AutoTargets channel is a vertical Short, so these are 9:16
   rather than the 16:9 .video-frame used for the one landscape embed. Each card
   is a facade: a self-hosted poster and a real <button>, which site.js swaps for
   the YouTube iframe on click. Nothing reaches a third party until a visitor
   actually decides to watch something. */
.clip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}
.clip-grid--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.clip { margin: 0; }

.clip__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
}

/* The three landscape films — feature promo, teaser, hit-detection explainer.
   Same facade, 16:9 box. */
.clip--wide .clip__frame { aspect-ratio: 16 / 9; }
.clip--wide .clip__play  { padding-bottom: 22px; }
.clip--wide .clip__play svg { width: 66px; height: 66px; }

/* A single feature film gets its own width rather than a grid cell. */
.clip--feature { max-width: 900px; margin-inline: auto; }
.clip--feature .clip__meta { font-size: 15px; }
.clip__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.clip__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

.clip__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 10px;
  padding: 0 0 18px;
  background: linear-gradient(180deg, rgba(12,14,16,.1) 40%, rgba(12,14,16,.85));
  border: 0;
  color: var(--ink);
  font: 600 14px var(--display);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.clip__play svg {
  width: 54px; height: 54px;
  margin-top: auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .55));
}
.clip__play svg circle { fill: var(--accent); transition: fill .15s ease; }
.clip__play svg path   { fill: #101214; }
.clip__play:hover { background: linear-gradient(180deg, rgba(12,14,16,.05) 30%, rgba(12,14,16,.9)); }
.clip__play:hover svg circle { fill: var(--accent-hi); }

.clip__meta {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 10px;
  font: 400 14px/1.45 var(--body);
  color: var(--muted);
}
.clip__meta b {
  font: 600 15px var(--display);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
}
.clip__dur { font: 500 12px var(--mono); color: var(--dim); white-space: nowrap; }

@media (max-width: 560px) {
  .clip-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
}

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

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 40px 0;
}
.stat__num { font: 700 clamp(38px, 5vw, 54px)/1 var(--display); color: var(--accent); }
.stat__label {
  font: 500 13px var(--mono); color: var(--dim);
  letter-spacing: .16em; text-transform: uppercase; margin-top: 8px;
}

/* --------------------------------------------------------------- table -- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font: 400 15px var(--body);
  color: var(--muted);
}
table.cmp th,
table.cmp td {
  border: 1px solid var(--line);
  padding: 10px 16px;
  text-align: center;
  vertical-align: middle;
}
table.cmp th {
  font: 600 15px var(--display);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: var(--surface-2);
}
/* Row labels are <th scope="row"> so screen readers announce which feature a
   cell belongs to. They keep the body-text look of an ordinary cell. */
table.cmp th.feat,
table.cmp td.feat {
  text-align: left;
  color: var(--ink-soft);
  font-weight: 500;
  width: 30%;
  font-family: var(--body);
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  background: none;
}

/* The scroll region is focusable so it can be scrolled from the keyboard;
   give it a visible focus ring rather than the default none. */
.table-scroll:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
table.cmp tr.sect td {
  background: var(--surface-2);
  font: 600 13px var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); text-align: left;
}
table.cmp td.yes { color: var(--yes); }
table.cmp td.no  { color: var(--dimmer); }
table.cmp caption {
  caption-side: top; text-align: left;
  font: 500 13px var(--mono); color: var(--dim);
  padding-bottom: 10px;
}

/* Label/value pairs. Used where a matrix would be the wrong shape — the
   warranty standards are ten line items against ONE term each, which as a
   ten-column table forced a horizontal scroll and cut the last columns off. */
.spec-list { margin: 0; border-top: 1px solid var(--line-soft); }
.spec-list > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.spec-list dt {
  font: 400 16px/1.4 var(--body);
  color: var(--ink-soft);
}
.spec-list dd {
  margin: 0;
  font: 600 15px var(--mono);
  color: var(--ink);
  white-space: nowrap;
}
.spec-list dd.is-na { color: var(--dim); font-weight: 400; }

/* Long-form terms read better stacked than in a value column. */
.spec-list--stacked > div { display: block; padding: 14px 2px; }
.spec-list--stacked dt {
  font: 600 13px var(--mono); color: var(--accent);
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 6px;
}
.spec-list--stacked dd {
  font: 400 16px/1.55 var(--body); color: var(--muted);
  white-space: normal;
}
.spec-list__note { font: 400 13px var(--body); color: var(--dim); }

.table-head {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 24px; margin-bottom: 20px;
}
.table-head h2 { font-size: clamp(28px, 4vw, 38px); }
.table-head a { font: 500 14px var(--mono); white-space: nowrap; }

/* ------------------------------------------------------------- partners -- */

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  align-items: center;
}
/* Cells may be links or plain divs — not every partner has a URL. */
.logo-grid > * {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  padding: 26px 24px;
  min-height: 116px;
  transition: border-color .15s ease;
}
.logo-grid a:hover { border-color: var(--accent); }
.logo-grid img {
  max-height: 46px; width: auto; max-width: 100%;
  object-fit: contain;
}
/* Partner logos are supplied at wildly different aspect ratios. A flat height
   cap shrinks a portrait mark (MILICON is 624x912) to a thumbnail, so tall
   marks get their own cap and land at roughly the same optical weight. */
.logo-grid img.is-tall { max-height: 84px; }

/* ------------------------------------------------------------ download -- */

.dl-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-soft); }
.dl-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.dl-list a:hover { color: var(--accent); }
.dl-list .dl__name { font: 600 18px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.dl-list .dl__meta { font: 400 13px var(--mono); color: var(--dim); white-space: nowrap; }

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

.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
}
.footer__grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px;
  padding: 56px var(--gutter) 40px;
  max-width: var(--wrap); margin: 0 auto; width: 100%;
}
.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer__brand img { height: 32px; width: auto; }
.footer__brand span {
  font: 700 18px var(--display);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.footer__blurb { font: 400 14px/1.6 var(--body); }
.footer__social { display: flex; gap: 16px; margin-top: 18px; font: 500 13px var(--mono); }
.footer__head {
  font: 600 13px var(--mono); color: var(--accent);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px;
}
.footer__head--gap { margin-top: 20px; }
.footer__text { font: 400 15px/1.7 var(--body); }
.footer__list { display: flex; flex-direction: column; gap: 8px; font: 400 15px var(--body); }
.footer__list a { color: var(--muted-2); }
.footer__list a:hover { color: var(--accent-hi); }
.footer__legal {
  border-top: 1px solid var(--line-faint);
  padding: 18px var(--gutter);
  text-align: center;
  font: 400 13px var(--mono);
  color: var(--dimmer);
}
/* The Privacy Policy link here is the URL the Google Play listing points at.
   It sat in the same colour as the surrounding text with no underline, so it
   had no non-hover affordance at all (WCAG 1.4.1 — colour is not the only
   means of conveying information). Underline it and lift the colour. */
.footer__legal a { color: var(--muted-2); text-decoration: underline; }
.footer__legal a:hover { color: var(--accent-hi); }
.footer address { font-style: normal; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 900px) {
  :root { --gutter: 32px; }

  /* Mobile falls back to source order — brand, CTA, toggle, links — which is
     also the correct tab order. */
  .nav { gap: 16px; flex-wrap: wrap; }
  .nav__toggle { display: block; order: 2; }
  .nav__cta { order: 1; }
  .nav__links {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
    margin-top: 6px;
  }
  .nav__links a { padding: 13px 2px; border-bottom: 1px solid var(--line-faint); font-size: 17px; }
  .nav.is-open .nav__links { display: flex; }

  .grid-2, .grid-3, .grid-4, .grid-split { grid-template-columns: 1fr; gap: 20px; }
  .check-list { grid-template-columns: 1fr; }
  .stack { gap: 56px; }
  .section { padding: 56px 0; }
  .page-head { padding: 48px 0 32px; }

  .hero { height: auto; min-height: 0; padding-top: 140px; }
  .hero__inner { padding-bottom: 56px; }
  .band { height: auto; min-height: 0; padding-top: 180px; }
  .band__inner { padding-bottom: 32px; }

  /* The desktop scrim is tuned for a 92vh hero, where the copy sits in the
     bottom fifth over already-dark ground. On a phone the block is far shorter
     and the lede lands mid-photograph — over the firing line in the hero shot —
     so it needs more cover to stay legible. */
  .hero::after {
    background: linear-gradient(180deg, rgba(12,14,16,.5) 0%, rgba(12,14,16,.3) 28%, rgba(12,14,16,.94) 78%);
  }
  .band::after {
    background: linear-gradient(180deg, rgba(12,14,16,.45) 0%, rgba(12,14,16,.25) 35%, rgba(12,14,16,.94) 82%);
  }

  .card { height: 260px; }
  .card__body { left: 20px; right: 20px; bottom: 18px; }
  .card__title { font-size: 26px; }

  .table-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .nav__name { font-size: 18px; }
  .nav__brand img { height: 32px; }
  .stat-row { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .btn { padding: 13px 22px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .nav, .footer, .skip-link, .btn-row { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .band { background: none !important; min-height: 0; height: auto; padding-top: 0; }
  .hero::after, .band::after { display: none; }
  a { color: #000; }
}