/* ==========================================================================
   TDx Aero — tdxaero.com
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset and base
   3.  Layout primitives
   4.  Typography helpers
   5.  Buttons and links
   6.  Header and navigation
   7.  Hero
   8.  Sections and media
   9.  Product cards
   10. Features, checks, plans
   11. CTA band
   12. Legal and prose pages
   13. Footer
   14. Motion
   15. Responsive

   Rules for maintaining this file:
   - No colour literal outside section 1. If a colour is needed, add a token.
   - Every interactive element needs a visible :focus-visible state.
   - Anything that animates must be disabled under prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* Brand ------------------------------------------------------------- */
  --ana-navy-900: #001431;   /* page ground on dark sections, header, footer */
  --ana-navy-800: #0A1E3C;   /* raised dark surface */
  --ana-navy-700: #123055;   /* dark borders */
  --ana-blue-600: #155A96;   /* pressed / strong link            7.16:1 on white */
  --ana-blue-500: #1E6FB8;   /* primary action, links            5.22:1 on white */
  --ana-cyan-400: #38A3CC;   /* decorative accent, on dark only  6.36:1 on navy  */
  --ana-cyan-300: #5BC0EA;   /* accent text on dark              8.89:1 on navy  */
  --ana-navy-grad-a: #062A52; /* hero gradient mid stop */
  --ana-navy-grad-b: #10537F; /* hero gradient end stop */
  --ana-navy-grad-c: #082746; /* device screen top */
  --ana-navy-grad-d: #0B3157; /* cta band end stop */
  --ana-overlay-1:  rgb(255 255 255 / 10%);
  --ana-overlay-2:  rgb(255 255 255 / 12%);
  --ana-scrim:      rgb(0 20 49 / 92%);
  --ana-mask-solid: #000;          /* mask stops: colour is irrelevant, alpha is not */
  --ana-hairline:   rgb(255 255 255 / 22%);

  /* Neutrals — biased slightly blue so they read as chosen, not default */
  --ana-white:    #FFFFFF;
  --ana-sky-100:  #F2F8FD;   /* light section ground */
  --ana-sky-200:  #E4EEF8;   /* light borders on soft ground */
  --ana-line:     #D9E4F0;
  --ana-ink-900:  #0C1B2E;   /* headings, body           17.33:1 on white */
  --ana-ink-600:  #41556F;   /* body on light             7.63:1 on white */
  --ana-ink-400:  #5A6E88;   /* secondary text            5.22:1 on white */
  --ana-on-dark:       #FFFFFF;
  --ana-on-dark-soft:  #C7D8EC;  /* 12.64:1 on navy-900 */
  --ana-on-dark-muted: #9FB6D2;  /*  8.82:1 on navy-900 */

  /* Product accents (ANA-014 rule: identical symbol and layout everywhere,
     only the accent changes). Each has a foreground-safe value for light
     grounds and a lighter value for dark grounds. Both verified at AA. */
  --ana-accent-analog:        #1E6FB8;  /* 5.22:1 on white */
  --ana-accent-analog-dark:   #5BC0EA;  /* 8.89:1 on navy  */
  --ana-accent-brief:         #0E7C86;  /* 4.95:1 on white */
  --ana-accent-brief-dark:    #3FC5CE;  /* 8.82:1 on navy  */
  --ana-accent-met:           #4A55C7;  /* 6.15:1 on white */
  --ana-accent-met-dark:      #98A2FF;  /* 7.82:1 on navy  */
  --ana-accent-docs:          #8A3E9E;  /* 6.43:1 on white */
  --ana-accent-docs-dark:     #D492E6;  /* 7.91:1 on navy  */

  /* Default accent, overridden per product card */
  --ana-accent:      var(--ana-accent-analog);
  --ana-accent-dark: var(--ana-accent-analog-dark);

  /* Type — one geometric sans everywhere, chosen to sit as close as a system
     stack can to the lettering in the logo (ANA | LOG, FLY · RECORD · PROGRESS).

     This is an approximation, and it is only faithful where one of the named
     faces is installed: Avenir Next and Futura on macOS and iOS, Century Gothic
     where Office is present. Elsewhere it degrades to the platform UI sans,
     which is not geometric. Matching the logo on every platform needs the
     actual font file, self-hosted here as @font-face — see README. */
  --ana-font: "Avenir Next", Avenir, Futura, "Century Gothic", "URW Gothic",
              "Questrial", ui-sans-serif, system-ui, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --ana-font-display: var(--ana-font);

  --ana-text-xs:   0.75rem;
  --ana-text-sm:   0.875rem;
  --ana-text-base: 1rem;
  --ana-text-md:   1.0625rem;
  --ana-text-lg:   1.1875rem;
  --ana-text-xl:   clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --ana-text-2xl:  clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --ana-text-3xl:  clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem);

  /* Space */
  --ana-space-1: 0.25rem;
  --ana-space-2: 0.5rem;
  --ana-space-3: 0.75rem;
  --ana-space-4: 1rem;
  --ana-space-5: 1.5rem;
  --ana-space-6: 2rem;
  --ana-space-7: 3rem;
  --ana-space-8: 4rem;
  --ana-space-9: 5.5rem;

  /* Shape */
  --ana-radius-sm: 6px;
  --ana-radius:    12px;
  --ana-radius-lg: 18px;
  --ana-shadow:    0 12px 32px rgb(8 30 60 / 10%);
  --ana-shadow-lg: 0 22px 60px rgb(4 18 40 / 22%);

  /* Layout */
  --ana-container: 1180px;
  --ana-gutter: 1.5rem;

  /* Motion */
  --ana-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ana-duration: 0.45s;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ana-white);
  color: var(--ana-ink-900);
  font-family: var(--ana-font);
  font-size: var(--ana-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--ana-font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--ana-text-3xl); }
h2 { font-size: var(--ana-text-2xl); }
h3 { font-size: var(--ana-text-lg); letter-spacing: -0.01em; }

p { margin: 0 0 var(--ana-space-4); }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--ana-space-4);
  top: var(--ana-space-4);
  z-index: 100;
  padding: var(--ana-space-2) var(--ana-space-4);
  border-radius: var(--ana-radius-sm);
  background: var(--ana-white);
  color: var(--ana-blue-600);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 2px solid var(--ana-blue-500);
  outline-offset: 3px;
  border-radius: var(--ana-radius-sm);
}

/* On dark grounds the blue ring is too close to the background */
.site-header :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--ana-cyan-300);
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.container {
  width: min(var(--ana-container), 100% - (2 * var(--ana-gutter)));
  margin-inline: auto;
}

.section { padding-block: var(--ana-space-9); }
.section-soft { background: var(--ana-sky-100); }

.split {
  display: grid;
  gap: var(--ana-space-7);
  align-items: center;
}

.section-head {
  display: grid;
  gap: var(--ana-space-4);
  margin-bottom: var(--ana-space-6);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ana-space-3);
  margin-top: var(--ana-space-5);
}

/* ==========================================================================
   4. Typography helpers
   ========================================================================== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--ana-space-3);
  margin: 0 0 var(--ana-space-3);
  font-size: var(--ana-text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ana-blue-500);
}
.eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--ana-line);
}

.lead {
  font-size: var(--ana-text-md);
  color: var(--ana-ink-600);
  max-width: 62ch;
}

.footnote {
  margin-top: var(--ana-space-5);
  font-size: var(--ana-text-sm);
  color: var(--ana-ink-400);
  max-width: 70ch;
}

.muted { color: var(--ana-on-dark-muted); }

h2 + .lead,
h1 + .lead { margin-top: var(--ana-space-4); }

/* ==========================================================================
   5. Buttons and links
   ========================================================================== */
a { color: var(--ana-blue-500); }
a:hover { color: var(--ana-blue-600); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--ana-space-3) var(--ana-space-5);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--ana-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s var(--ana-ease),
              border-color 0.2s var(--ana-ease),
              color 0.2s var(--ana-ease);
}

.btn-primary {
  background: var(--ana-blue-500);   /* white on this is 5.22:1 */
  color: var(--ana-white);
}
.btn-primary:hover {
  background: var(--ana-blue-600);
  color: var(--ana-white);
}

.btn-outline {
  border-color: var(--ana-on-dark-muted);
  color: var(--ana-on-dark);
}
.btn-outline:hover {
  border-color: var(--ana-on-dark);
  background: var(--ana-overlay-1);
  color: var(--ana-on-dark);
}

.btn-quiet {
  border-color: var(--ana-on-dark-muted);
  color: var(--ana-on-dark);
  background: transparent;
}
.btn-quiet:hover {
  background: var(--ana-overlay-1);
  color: var(--ana-on-dark);
}

.link-arrow {
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after {
  content: " →";
  white-space: nowrap;
}
.link-arrow:hover { text-decoration: underline; }

/* ==========================================================================
   6. Header and navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ana-navy-900);
  border-bottom: 1px solid var(--ana-navy-700);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--ana-space-5);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ana-space-2);
  color: var(--ana-on-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--ana-text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* On navy the mark's trajectory needs the on-dark accent to hold its presence */
.site-header .brand-mark,
.site-footer .brand-mark,
.ana-lockup-mark { --ana-accent: var(--ana-accent-analog-dark); }

.brand-mark { width: 30px; height: 30px; }
.brand-mark-sm { width: 26px; height: 26px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--ana-space-6);
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--ana-space-6);
}

.nav-list a,
.menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--ana-space-1);
  padding: var(--ana-space-2) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--ana-text-sm);
  color: var(--ana-on-dark-soft);
  text-decoration: none;
  cursor: pointer;
}
.nav-list a:hover,
.menu-button:hover { color: var(--ana-on-dark); }

.nav-list a[aria-current="page"],
.menu-button[aria-current="page"] {
  color: var(--ana-on-dark);
  box-shadow: inset 0 -2px 0 0 var(--ana-cyan-400);
}

.chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s var(--ana-ease);
}
.has-menu.is-open .chevron { transform: rotate(180deg); }

.has-menu { position: relative; }

.menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--ana-space-3));
  right: 0;
  width: 268px;
  padding: var(--ana-space-2);
  background: var(--ana-white);
  border: 1px solid var(--ana-line);
  border-radius: var(--ana-radius);
  box-shadow: var(--ana-shadow);
}
.has-menu.is-open .menu-panel { display: block; }

.menu-panel a,
.menu-panel .menu-item-soon {
  display: block;
  padding: var(--ana-space-3);
  border-radius: var(--ana-radius-sm);
  font-size: var(--ana-text-sm);
  color: var(--ana-ink-900);
  text-decoration: none;
}
.menu-panel a:hover { background: var(--ana-sky-100); }
.menu-panel .menu-item-soon { color: var(--ana-ink-400); }

.menu-status {
  display: block;
  font-size: var(--ana-text-xs);
  color: var(--ana-ink-400);
}
.menu-panel a .menu-status { color: var(--ana-blue-500); }

.nav-cta { min-height: 40px; padding-block: var(--ana-space-2); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--ana-space-2);
  margin-left: auto;
  min-height: 44px;
  padding: var(--ana-space-2) var(--ana-space-3);
  border: 1px solid var(--ana-navy-700);
  border-radius: 999px;
  background: none;
  color: var(--ana-on-dark);
  font: inherit;
  font-size: var(--ana-text-sm);
  cursor: pointer;
}
.nav-toggle-bars {
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after  { top: 5px; }

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(105deg, var(--ana-navy-900) 0%, var(--ana-navy-grad-a) 58%, var(--ana-navy-grad-b) 100%);
  color: var(--ana-on-dark);
  overflow: hidden;
  isolation: isolate;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--ana-space-6);
  align-items: center;
  padding-block: var(--ana-space-8);
}

.hero h1 { color: var(--ana-on-dark); }

/* The photograph fills the hero, as in the mockup, rather than sitting in a
   card. It is a sibling of the container, not a child, so its containing block
   is the section itself and it can bleed to the viewport edge. The veil is what
   keeps the copy legible over it at every width. */
.hero-media { position: relative; order: 2; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-media-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--ana-navy-900) 0%,
    rgb(0 20 49 / 55%) 26%,
    rgb(0 20 49 / 12%) 62%,
    transparent 100%);
}

.hero-title { margin: 0; }

/* One blue line under the lockup — the treatment the mockup gives
   FLY · RECORD · PROGRESS, reused here for the ANA tagline.
   Sized to hold a single line down to a 390px viewport without `nowrap`,
   which would overflow the page rather than wrap. */
.slogan {
  margin-top: var(--ana-space-4);
  font-size: clamp(0.66rem, 2.3vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ana-cyan-300);
}

.ana-lockup {
  display: block;
  width: min(280px, 74%);
  height: auto;
}

.hero-intro-lead { font-size: var(--ana-text-lg); }

.hero-intro {
  margin-top: var(--ana-space-5);
  font-size: var(--ana-text-md);
  color: var(--ana-on-dark-soft);
  max-width: 48ch;
}

.hero-note {
  margin-top: var(--ana-space-5);
  font-size: var(--ana-text-sm);
  color: var(--ana-on-dark-muted);
}

.breadcrumb {
  margin-bottom: var(--ana-space-4);
  font-size: var(--ana-text-sm);
}
.breadcrumb a {
  color: var(--ana-on-dark-soft);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--ana-on-dark);
  text-decoration: underline;
}

.hero-product h1 {
  font-size: var(--ana-text-xl);
  margin-top: var(--ana-space-5);
}

.product-logo {
  width: min(340px, 84%);
  height: auto;
}

.page-head {
  padding-block: var(--ana-space-8) var(--ana-space-6);
  background: var(--ana-sky-100);
  border-bottom: 1px solid var(--ana-sky-200);
}
.page-head-tall { padding-block: var(--ana-space-9); }

/* ==========================================================================
   8. Sections and media
   ========================================================================== */
/* Photograph with an overlaid caption. Sources and licence are recorded in
   README.md; derivatives come from tools/process-images.sh. */
.media-panel {
  position: relative;
  margin: 0;
  border-radius: var(--ana-radius-lg);
  overflow: hidden;
  box-shadow: var(--ana-shadow);
  background: var(--ana-navy-900);
}
.media-panel img,
.hero-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.media-panel figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--ana-space-8) var(--ana-space-5) var(--ana-space-5);
  background: linear-gradient(transparent, var(--ana-scrim));
  color: var(--ana-on-dark);
  font-family: var(--ana-font-display);
  font-size: var(--ana-text-lg);
  font-weight: 600;
  line-height: 1.2;
}

.values {
  display: grid;
  gap: var(--ana-space-5);
  margin-top: var(--ana-space-6);
}
.value {
  padding: var(--ana-space-5);
  border-top: 2px solid var(--ana-accent);
  background: var(--ana-sky-100);
  border-radius: 0 0 var(--ana-radius) var(--ana-radius);
}
.value h3 { margin-bottom: var(--ana-space-2); }
.value p { color: var(--ana-ink-600); font-size: var(--ana-text-sm); }

/* ==========================================================================
   9. Product cards
   ========================================================================== */
.product-grid {
  display: grid;
  gap: var(--ana-space-4);
  margin-top: var(--ana-space-6);
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--ana-space-2);
  padding: var(--ana-space-5);
  border: 1px solid var(--ana-line);
  border-top: 3px solid var(--ana-accent);
  border-radius: var(--ana-radius);
  background: var(--ana-white);
  text-decoration: none;
  color: inherit;
}

.product-card.is-launching,
.product-card.is-available {
  background: linear-gradient(165deg, var(--ana-navy-800), var(--ana-navy-900));
  border-color: var(--ana-navy-700);
  border-top-color: var(--ana-accent-dark);
  color: var(--ana-on-dark);
  transition: transform 0.25s var(--ana-ease), box-shadow 0.25s var(--ana-ease);
}
.product-card.is-launching:hover,
.product-card.is-available:hover {
  transform: translateY(-3px);
  box-shadow: var(--ana-shadow);
}

.badge {
  align-self: flex-start;
  padding: var(--ana-space-1) var(--ana-space-3);
  border-radius: 999px;
  background: var(--ana-sky-100);
  color: var(--ana-ink-400);
  font-size: var(--ana-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge-live {
  background: var(--ana-overlay-2);
  color: var(--ana-accent-dark);
}

.product-lockup {
  margin-top: var(--ana-space-3);
  font-family: var(--ana-font-display);
  font-size: var(--ana-text-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ana-accent);
}
.is-launching .product-lockup,
.is-available .product-lockup { color: var(--ana-accent-dark); }

.product-name {
  font-size: var(--ana-text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.product-tagline {
  margin: 0;
  font-size: var(--ana-text-sm);
  color: var(--ana-ink-400);
}
.is-launching .product-tagline,
.is-available .product-tagline { color: var(--ana-on-dark-muted); }

.product-text {
  margin: var(--ana-space-2) 0 0;
  font-size: var(--ana-text-sm);
  color: var(--ana-ink-600);
}
.is-launching .product-text,
.is-available .product-text { color: var(--ana-on-dark-soft); }

.product-cta {
  margin-top: auto;
  padding-top: var(--ana-space-5);
  font-size: var(--ana-text-sm);
  font-weight: 700;
  color: var(--ana-accent-dark);
}

.suite-band {
  margin-top: var(--ana-space-6);
  text-align: center;
  font-size: var(--ana-text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ana-blue-600);
}

/* ==========================================================================
   10. Features, checks, plans
   ========================================================================== */
.features {
  display: grid;
  gap: var(--ana-space-5);
  margin-top: var(--ana-space-6);
}
.feature {
  padding: var(--ana-space-5);
  border: 1px solid var(--ana-line);
  border-radius: var(--ana-radius);
  background: var(--ana-white);
}
.feature .icon { color: var(--ana-blue-500); }
.feature-title { margin: var(--ana-space-3) 0 var(--ana-space-1); }
.feature-text {
  margin: 0;
  font-size: var(--ana-text-sm);
  color: var(--ana-ink-600);
}

.checks {
  display: grid;
  gap: var(--ana-space-3);
  margin-top: var(--ana-space-5);
}
.check,
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--ana-space-3);
  font-size: var(--ana-text-sm);
  color: var(--ana-ink-600);
}
.check-icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--ana-blue-500);
}

.plans {
  display: grid;
  gap: var(--ana-space-4);
  margin-top: var(--ana-space-6);
}
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--ana-space-3);
  padding: var(--ana-space-5);
  border: 1px solid var(--ana-line);
  border-radius: var(--ana-radius);
  background: var(--ana-white);
}
.plan-name {
  font-size: var(--ana-text-xl);
  color: var(--ana-blue-600);
}
.plan-summary {
  margin: 0;
  font-size: var(--ana-text-sm);
  color: var(--ana-ink-900);
  font-weight: 600;
}
.plan-features {
  display: grid;
  gap: var(--ana-space-2);
  margin: 0;
}
.plan-note {
  margin: auto 0 0;
  padding-top: var(--ana-space-3);
  border-top: 1px solid var(--ana-line);
  font-size: var(--ana-text-xs);
  color: var(--ana-ink-400);
}

/* ==========================================================================
   11. CTA band
   ========================================================================== */
.cta-band {
  display: grid;
  gap: var(--ana-space-5);
  margin-block: var(--ana-space-6) var(--ana-space-9);
  padding: var(--ana-space-6);
  border-radius: var(--ana-radius-lg);
  background: linear-gradient(100deg, var(--ana-navy-900), var(--ana-navy-grad-d));
  color: var(--ana-on-dark);
}
.cta-title {
  font-size: var(--ana-text-xl);
  color: var(--ana-on-dark);
  margin-bottom: var(--ana-space-2);
}
.cta-band p {
  color: var(--ana-on-dark-soft);
  font-size: var(--ana-text-sm);
}
.cta-band .actions { margin-top: 0; }

/* ==========================================================================
   12. Legal and prose pages
   ========================================================================== */
.prose {
  max-width: 68ch;
  color: var(--ana-ink-600);
}
.prose h2 {
  margin-top: var(--ana-space-7);
  margin-bottom: var(--ana-space-3);
  font-size: var(--ana-text-xl);
  color: var(--ana-ink-900);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: var(--ana-space-5);
  margin-bottom: var(--ana-space-2);
  color: var(--ana-ink-900);
}
.prose ul {
  display: grid;
  gap: var(--ana-space-2);
  margin-bottom: var(--ana-space-4);
  padding-left: var(--ana-space-5);
  list-style: disc;
}
.prose strong { color: var(--ana-ink-900); }

.legal-list {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--ana-space-2) var(--ana-space-5);
  margin: 0 0 var(--ana-space-5);
  font-size: var(--ana-text-sm);
}
.legal-list dt {
  font-weight: 600;
  color: var(--ana-ink-900);
}
.legal-list dd { margin: 0; }

.contact-email {
  font-family: var(--ana-font-display);
  font-size: var(--ana-text-xl);
  margin-bottom: var(--ana-space-6);
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer {
  padding-block: var(--ana-space-7) var(--ana-space-6);
  background: var(--ana-navy-900);
  color: var(--ana-on-dark-soft);
  font-size: var(--ana-text-sm);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ana-space-4);
  padding-bottom: var(--ana-space-5);
  border-bottom: 1px solid var(--ana-navy-700);
}
.footer-line {
  margin: 0;
  font-family: var(--ana-font-display);
  color: var(--ana-cyan-300);
}

.footer-nav {
  display: grid;
  gap: var(--ana-space-5);
  padding-block: var(--ana-space-6);
}
.footer-heading {
  margin: 0 0 var(--ana-space-3);
  font-family: var(--ana-font);
  font-size: var(--ana-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ana-on-dark);
}
.footer-col ul {
  display: grid;
  gap: var(--ana-space-2);
}
.footer-col a {
  color: var(--ana-on-dark-soft);
  text-decoration: none;
}
.footer-col a:hover {
  color: var(--ana-on-dark);
  text-decoration: underline;
}

.footer-disclaimer {
  max-width: 78ch;
  padding-top: var(--ana-space-5);
  border-top: 1px solid var(--ana-navy-700);
  font-size: var(--ana-text-xs);
  color: var(--ana-on-dark-muted);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ana-space-3);
  margin-top: var(--ana-space-5);
  font-size: var(--ana-text-xs);
  color: var(--ana-on-dark-muted);
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   14. Motion
   --------------------------------------------------------------------------
   The reveal animation is applied only when JavaScript is running. Without it
   the `.js` class is never added and every section renders at full opacity,
   so content never depends on a script to be visible.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--ana-duration) var(--ana-ease),
              transform var(--ana-duration) var(--ana-ease);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (min-width: 40em) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .checks { grid-template-columns: repeat(2, 1fr); }
  .values { grid-template-columns: repeat(3, 1fr); }
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 60em) {
  :root { --ana-gutter: 2.5rem; }

    /* Copy on the left, photograph bleeding to the right edge of the viewport. */
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    min-height: 32rem;
  }
  .hero { display: block; }
  .hero-media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 58vw;
    z-index: 0;
  }
  /* Masking the photograph out, rather than painting navy over it, means the
     image dissolves into whatever the hero gradient is at that point — so
     there is no seam where the two meet. */
  .hero-media {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 45%) 20%, var(--ana-mask-solid) 56%);
    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / 45%) 20%, var(--ana-mask-solid) 56%);
  }
  .hero-media-veil {
    background: linear-gradient(
      to right,
      rgb(0 20 49 / 60%) 0%,
      rgb(0 20 49 / 25%) 40%,
      transparent 75%);
  }
  .split { grid-template-columns: 1fr 1fr; }
  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--ana-space-7);
  }
  .features { grid-template-columns: repeat(3, 1fr); }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-nav { grid-template-columns: repeat(4, 1fr); }
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--ana-space-6) var(--ana-space-7);
  }
}

/* Mobile navigation ------------------------------------------------------- */
@media (max-width: 59.99em) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ana-space-4);
    padding: var(--ana-space-5) var(--ana-gutter) var(--ana-space-6);
    background: var(--ana-navy-900);
    border-bottom: 1px solid var(--ana-navy-700);
    box-shadow: var(--ana-shadow-lg);
  }
  .site-nav.is-open { display: flex; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ana-space-1);
  }
  .nav-list > li { border-bottom: 1px solid var(--ana-navy-700); }
  .nav-list a,
  .menu-button {
    width: 100%;
    min-height: 48px;
    font-size: var(--ana-text-md);
  }
  .menu-button { justify-content: space-between; }

  .menu-panel {
    position: static;
    width: auto;
    margin-bottom: var(--ana-space-3);
    box-shadow: none;
  }

  .nav-cta { align-self: flex-start; }

  /* Already a full-width child of the section — no negative margin needed,
     and adding one here would push the page wider than the viewport. */
  .hero-media { aspect-ratio: 16 / 10; }
  .hero-media-veil {
    background: linear-gradient(
      to bottom,
      var(--ana-navy-900) 0%,
      rgb(0 20 49 / 30%) 45%,
      transparent 100%);
  }
}

@media (max-width: 30em) {
  .legal-list { grid-template-columns: 1fr; }
  .legal-list dd { margin-bottom: var(--ana-space-3); }
  .footer-nav { grid-template-columns: 1fr; }
}