/* The Hover Table: shared styles for every page.
   One family (Encode Sans, variable weight + width), self-hosted.
   First viewport on desktop is a measured frame bound to the approved comp (1536 x 1024). */

@font-face {
  font-family: "Encode Sans";
  src: url("../fonts/encode-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Encode Sans";
  src: url("../fonts/encode-sans-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* box navy (from the comp's masthead and hero ground) */
  --navy-900: #071f2e;
  --navy-850: #0a2536;
  --navy-800: #0b2a3d;
  --navy-700: #0c3350;
  --navy-600: #123e5c;
  --navy-ink: #092a42;     /* navy type on the pale field */
  /* the flight map's own colours: the only colour on the page */
  --lime: #b6e96a;         /* START squares, also the action colour */
  --lime-deep: #8fd25a;    /* rings and rules on the pale field */
  --lime-ink: #3f7a12;     /* lime text on the pale field, AA on --paper */
  --orange: #f0891f;       /* the dashed path */
  --steel: #4f87ad;        /* X pads */
  --steel-ink: #2a5f8f;    /* steel blue type on the pale field */
  --yellow: #f5e86c;
  /* pale blue-white lower field */
  --paper: #f4f7f9;
  --paper-2: #e8eef3;
  --rule: #b9c6d2;
  --body-ink: #1f4a72;     /* body copy on the pale field */
  --on-navy: #eef3f6;
  --on-navy-2: #c9d8e3;

  --font: "Encode Sans", "Helvetica Neue", Arial, sans-serif;
  --semi-condensed: 87.5%;
  --semi-expanded: 112.5%;

  --gutter: clamp(16px, 4vw, 56px);
  --measure: 58ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--navy-ink);
  background: var(--paper);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
::selection { background: var(--lime); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.on-paper :focus-visible, .paper :focus-visible { outline-color: var(--steel-ink); }
html { scrollbar-color: var(--navy-600) var(--paper-2); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--lime); color: var(--navy-900); padding: 10px 16px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- masthead (all pages) ---------- */
.mast {
  background: var(--navy-800);
  color: var(--on-navy);
  display: flex; align-items: center; gap: 24px;
  padding: 10px var(--gutter);
  min-height: 64px;
  position: relative;
}
.mast__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-stretch: var(--semi-expanded); font-size: 22px; letter-spacing: 0.005em; }
.mast__brand img { width: 40px; height: auto; }
.mast__product { margin: 0 auto; font-weight: 700; font-stretch: var(--semi-expanded); font-size: 28px; letter-spacing: 0.01em; line-height: 1; }
.mast__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.mast__nav a { display: inline-block; padding: 8px 10px; font-size: 17px; font-weight: 500; text-decoration: none; color: var(--on-navy); border-radius: 6px; }
.mast__nav a:hover { color: var(--lime); }
.mast__nav a[aria-current="page"] { color: var(--lime); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  background: var(--lime); color: var(--navy-900);
  font-family: var(--font); font-weight: 600; font-size: 22px; line-height: 1;
  padding: 0.9em 1.5em; border-radius: 999px; border: 0; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform 200ms var(--ease-out); }
.btn:hover { background: #c7f27f; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--navy { background: var(--navy-800); color: var(--on-navy); }
.btn--navy:hover { background: var(--navy-600); }
.link-lime { color: var(--lime); text-decoration: underline; }
.link-lime:hover { color: #d6f7a0; }

/* ---------- first viewport frame (Info page) ---------- */
.page { container-type: inline-size; }

.hero { position: relative; background-color: #0b3049; background-image: linear-gradient(165deg, #123c5a 0%, #0c3350 35%, #0a2d45 70%, #082a40 100%); color: var(--on-navy); }
.hero h1 { margin: 0; font-weight: 700; font-stretch: var(--semi-condensed); font-size: clamp(36px, 7vw, 49px); line-height: 1.1; letter-spacing: 0; text-wrap: balance; }
.hero__sub { margin: 0; font-size: 21px; line-height: 1.3; color: var(--on-navy); font-stretch: 96%; }
.hero__sub + .hero__sub { margin-top: 10px; font-size: 20px; color: var(--on-navy-2); }
.hero__prices { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.3; }
.hero__prices b { color: var(--lime); font-weight: 700; }
.hero__prices .dot { display: inline-block; margin: 0 0.45em; color: var(--on-navy-2); }
.hero__po { margin: 0; font-size: 20px; line-height: 1.3; color: var(--on-navy); }

.kit { margin: 0; position: relative; container-type: inline-size; aspect-ratio: 1116 / 705; }
.kit__box { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%); mask-image: linear-gradient(90deg, transparent 0, #000 3.5%); }
.kit__map { position: absolute; left: calc(564 * 100cqw / 1116); top: calc(18 * 100cqw / 1116); width: calc(552 * 100cqw / 1116); height: auto; }
.kit__print { position: absolute; margin: 0; pointer-events: none; color: #f2f5f6; font-family: var(--font); white-space: nowrap; }
.kit__lid { left: calc(52 * 100cqw / 1116); top: calc(203 * 100cqw / 1116); transform: rotate(-2.6deg); transform-origin: 0 0; }
.kit__lid-title { display: block; font-weight: 800; font-stretch: var(--semi-condensed); font-size: calc(36.6 * 100cqw / 1116); line-height: 1.08; letter-spacing: -0.005em; }
.kit__lid-rule { display: block; margin-top: calc(10 * 100cqw / 1116); width: calc(98 * 100cqw / 1116); height: calc(5 * 100cqw / 1116); background: #a9e05a; border-radius: 1px; }
.kit__lid-tag { display: block; margin-top: calc(22 * 100cqw / 1116); font-weight: 500; font-stretch: 94%; letter-spacing: -0.01em; font-size: calc(19 * 100cqw / 1116); line-height: 1.38; white-space: normal; width: calc(210 * 100cqw / 1116); }
.kit__screen { left: calc(341 * 100cqw / 1116); top: calc(103 * 100cqw / 1116); width: calc(176 * 100cqw / 1116); transform: rotate(-5.6deg); transform-origin: 0 50%; }
.kit__screen-step { display: block; margin-left: calc(6 * 100cqw / 1116); margin-top: calc(7 * 100cqw / 1116); margin-bottom: calc(-2 * 100cqw / 1116); font-size: calc(14 * 100cqw / 1116); font-stretch: 75%; letter-spacing: -0.01em; font-weight: 500; color: #cfdfe7; line-height: 1.2; }
.kit__screen-name { display: block; font-size: calc(15.5 * 100cqw / 1116); font-weight: 700; font-stretch: var(--semi-condensed); line-height: 1.25; }
.kit__screen-time { display: block; margin-top: calc(3 * 100cqw / 1116); font-size: calc(20 * 100cqw / 1116); font-weight: 700; color: #dff764; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kit__laps { position: absolute; left: calc(119 * 100cqw / 1116); top: calc(1 * 100cqw / 1116); width: calc(49 * 100cqw / 1116); transform: rotate(5.6deg); align-content: center; gap: 0; height: calc(49 * 100cqw / 1116); display: grid; place-items: center; }
.kit__laps svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kit__laps span { position: relative; display: block; text-align: center; font-size: calc(16 * 100cqw / 1116); font-weight: 700; color: #f2f5f6; line-height: 0.95; }
.kit__laps .kit__laps-label { font-size: calc(11 * 100cqw / 1116); font-weight: 500; font-stretch: 75%; color: #5fa7d6; line-height: 0.9; }

/* ---------- session band ---------- */
.session { background: var(--paper); color: var(--navy-ink); position: relative; }
.session__rule { display: block; width: 72px; height: 5px; background: var(--lime-deep); }
.session h2 { margin: 0; font-weight: 800; font-stretch: 93%; font-size: clamp(36px, 6vw, 46.6px); line-height: 1.05; letter-spacing: -0.01em; }
.round { position: relative; }
.round__badge { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--navy-ink); color: #f6f7f7; font-weight: 700; font-size: 34px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.round__title { margin: 0; font-weight: 700; font-size: 23.6px; line-height: 1.3; }
.round__phase { margin: 0; font-size: 19.4px; color: #4473a3; font-weight: 380; letter-spacing: -0.01em; line-height: 1.25; }
.round__body { margin: 0; font-size: 18px; line-height: 1.35; color: var(--body-ink); font-stretch: 94%; font-weight: 380; letter-spacing: -0.01em; }
.round__arrow { color: var(--lime-deep); width: 28px; height: 24px; }
.stat { text-align: center; }
.stat__ring { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 4px solid var(--lime-deep); color: var(--navy-ink); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0 auto; }
.stat__label { margin: 0; font-weight: 700; font-size: 18.6px; line-height: 1.3; }
.stat__body { margin: 0; font-size: 18px; line-height: 1.3; color: var(--body-ink); text-wrap: balance; }
.vrule { background: #a9bacb; width: 2px; }

/* Desktop: the measured frame. 1 comp px = 100cqw / 1536. */
@media (min-width: 1280px) {
  .page > .mast { position: relative; height: calc(70 * 100cqw / 1536); min-height: 0; padding: 0; display: block; }
  .page .mast__brand { position: absolute; left: calc(48 * 100cqw / 1536); top: calc(8 * 100cqw / 1536); height: calc(56 * 100cqw / 1536); gap: 0; font-size: calc(26 * 100cqw / 1536); }
  .page .mast__brand img { width: calc(48 * 100cqw / 1536); height: calc(46 * 100cqw / 1536); margin: calc(5 * 100cqw / 1536) 0 0 calc(6 * 100cqw / 1536); object-fit: contain; object-position: left center; }
  .page .mast__brand span { position: absolute; left: calc(65 * 100cqw / 1536); top: calc(9 * 100cqw / 1536); white-space: nowrap; line-height: 1.1; }
  .page .mast__product { position: absolute; left: calc(650 * 100cqw / 1536); top: calc(8 * 100cqw / 1536); margin: 0; font-size: calc(37 * 100cqw / 1536); line-height: 1.1; white-space: nowrap; }
  .page .mast__nav { position: absolute; left: calc(1217 * 100cqw / 1536); top: calc(15 * 100cqw / 1536); }
  .page .mast__nav ul { gap: calc(35 * 100cqw / 1536); }
  .page .mast__nav a { font-size: max(16px, calc(17 * 100cqw / 1536)); padding: calc(6 * 100cqw / 1536) calc(8 * 100cqw / 1536); }

  .hero { height: calc(705 * 100cqw / 1536); }
  .hero__copy { position: absolute; left: calc(48 * 100cqw / 1536); top: calc(80 * 100cqw / 1536); width: calc(372 * 100cqw / 1536); }
  .hero h1 { font-size: calc(48.8 * 100cqw / 1536); line-height: 1.1; width: calc(384 * 100cqw / 1536); text-wrap: wrap; }
  .hero__sub { margin-top: calc(33 * 100cqw / 1536); font-size: max(18px, calc(21.5 * 100cqw / 1536)); width: calc(400 * 100cqw / 1536); }
  .hero__sub + .hero__sub { margin-top: calc(10 * 100cqw / 1536); font-size: max(18px, calc(20 * 100cqw / 1536)); white-space: normal; width: calc(400 * 100cqw / 1536); }
  .hero__sub .br { display: block; }
  .hero__prices { margin-top: calc(34 * 100cqw / 1536); font-size: max(18px, calc(24.4 * 100cqw / 1536)); white-space: nowrap; }
  .hero__cta { margin-top: calc(32 * 100cqw / 1536); }
  .hero .btn { width: calc(286 * 100cqw / 1536); height: calc(64 * 100cqw / 1536); padding: 0; font-size: calc(25 * 100cqw / 1536); }
  .hero__po { margin-top: calc(22 * 100cqw / 1536); font-size: max(18px, calc(20 * 100cqw / 1536)); white-space: nowrap; }
  .hero .kit { position: absolute; left: calc(420 * 100cqw / 1536); top: 0; width: calc(1116 * 100cqw / 1536); }

  .session { height: calc(249 * 100cqw / 1536); }
  .session > * { position: absolute; }
  .session__rule { left: calc(56 * 100cqw / 1536); top: calc(50 * 100cqw / 1536); width: calc(72 * 100cqw / 1536); height: calc(5 * 100cqw / 1536); }
  .session h2 { left: calc(54 * 100cqw / 1536); top: calc(66 * 100cqw / 1536); width: calc(340 * 100cqw / 1536); font-size: calc(46.6 * 100cqw / 1536); line-height: 1.06; }
  .session .vrule { top: calc(51 * 100cqw / 1536); height: calc(147 * 100cqw / 1536); }
  .session .vrule--1 { left: calc(369 * 100cqw / 1536); }
  .session .vrule--2 { left: calc(698 * 100cqw / 1536); }
  .session .vrule--3 { left: calc(1002 * 100cqw / 1536); }
  .session .vrule--4 { left: calc(1180 * 100cqw / 1536); }
  .session .vrule--5 { left: calc(1341 * 100cqw / 1536); }
  .round { top: calc(48 * 100cqw / 1536); width: calc(250 * 100cqw / 1536); height: calc(150 * 100cqw / 1536); }
  .round--1 { left: calc(407 * 100cqw / 1536); }
  .round--2 { left: calc(727 * 100cqw / 1536); }
  .round__badge { position: absolute; left: 0; top: 0; width: calc(70 * 100cqw / 1536); height: calc(70 * 100cqw / 1536); font-size: calc(33 * 100cqw / 1536); }
  .round__title { position: absolute; left: calc(87 * 100cqw / 1536); top: calc(9 * 100cqw / 1536); font-size: calc(23.6 * 100cqw / 1536); white-space: nowrap; }
  .round__phase { position: absolute; left: calc(87 * 100cqw / 1536); top: calc(39 * 100cqw / 1536); font-size: max(14px, calc(19.4 * 100cqw / 1536)); white-space: nowrap; }
  .round__body { position: absolute; left: 0; top: calc(94 * 100cqw / 1536); width: calc(232 * 100cqw / 1536); font-size: max(18px, calc(18 * 100cqw / 1536)); }
  .round__arrow { position: absolute; left: calc(237 * 100cqw / 1536); top: calc(34 * 100cqw / 1536); width: calc(28 * 100cqw / 1536); height: calc(24 * 100cqw / 1536); }
  .stat { top: calc(44 * 100cqw / 1536); height: calc(160 * 100cqw / 1536); }
  .stat--1 { left: calc(1018 * 100cqw / 1536); width: calc(156 * 100cqw / 1536); }
  .stat--2 { left: calc(1190 * 100cqw / 1536); width: calc(136 * 100cqw / 1536); }
  .stat--3 { left: calc(1349 * 100cqw / 1536); width: calc(150 * 100cqw / 1536); }
  .stat__ring { width: calc(68 * 100cqw / 1536); height: calc(68 * 100cqw / 1536); border-width: calc(4 * 100cqw / 1536); font-size: calc(34 * 100cqw / 1536); }
  .stat__label { margin-top: calc(13 * 100cqw / 1536); font-size: max(14px, calc(18.6 * 100cqw / 1536)); }
  .stat__body { margin-top: calc(6 * 100cqw / 1536); font-size: max(15px, calc(15.4 * 100cqw / 1536)); line-height: 1.32; }
}

/* ---------- sections below the first viewport ---------- */
.wrap { width: min(1340px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.block { padding-block: clamp(64px, 9vw, 128px); }
.block h2 { margin: 0 0 0.5em; font-weight: 800; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.012em; font-stretch: 93%; text-wrap: balance; max-width: 18ch; }
.block p { max-width: var(--measure); }
.block h3 { margin: 0; font-weight: 700; font-size: 22px; line-height: 1.3; }

/* maneuvers: pale field, the flight map as the instrument */
.maneuvers { background: var(--paper); border-top: 1px solid var(--paper-2); }
.maneuvers__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.maneuvers__intro > p { color: var(--body-ink); }
.mapdemo { position: relative; margin-top: 36px; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(7, 31, 46, 0.55), 0 2px 6px rgba(7, 31, 46, 0.18); aspect-ratio: 1; background: var(--navy-850); }
.mapdemo img { width: 100%; height: 100%; object-fit: cover; }
.mapdemo__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapdemo__trail { fill: none; stroke: #ffb347; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 140, 20, 0.9)); }
.mapdemo__drone circle { fill: rgba(8, 14, 22, 0.75); stroke: #e4ecf1; stroke-width: 3; }
.mapdemo__drone .mapdemo__halo { fill: rgba(255, 150, 40, 0.28); stroke: none; }
.mapdemo__drone rect { fill: #0b1118; stroke: #e4ecf1; stroke-width: 3; }
.mapdemo__arms path { stroke: #0b1118; stroke-width: 7; stroke-linecap: round; }
.mapdemo__caption { margin: 14px 0 0; font-size: 18px; color: var(--body-ink); }
.maneuvers__list { padding-top: clamp(0px, 1vw, 12px); }
.maneuvers__hint { margin: 0 0 14px; font-size: 18px; color: var(--body-ink); }
.mlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: none; }
.mlist li { border-bottom: 1px solid var(--rule); }
.mlist__item { width: 100%; display: grid; grid-template-columns: 3ch 1fr auto; align-items: baseline; gap: 14px; padding: 15px 12px 15px 6px; background: transparent; border: 0; font: inherit; color: var(--navy-ink); text-align: left; cursor: pointer; border-radius: 4px; transition: background-color 160ms var(--ease-out); }
.mlist__item:hover { background: var(--paper-2); }
.mlist__item[aria-pressed="true"] { background: var(--navy-ink); color: #f6f7f7; }
.mlist__item[aria-pressed="true"] .mlist__n { color: var(--lime); }
.mlist__item[aria-pressed="true"] .mlist__dir { color: var(--on-navy-2); }
.mlist__item:focus-visible { outline: 3px solid var(--steel-ink); outline-offset: 2px; }
.mlist__n { font-weight: 800; font-size: 20px; color: var(--steel-ink); font-variant-numeric: tabular-nums; text-align: right; }
.mlist__name { font-weight: 700; font-size: 19px; }
.mlist__dir { font-size: 18px; color: var(--body-ink); }
.scoring { margin: 32px 0 0; display: grid; gap: 18px; }
.scoring div { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; }
.scoring dt { font-weight: 700; }
.scoring dd { margin: 0; color: var(--body-ink); }

/* levels: back on the box navy */
.levels { background: var(--navy-800); color: var(--on-navy); }
.levels h2 { max-width: 22ch; }
.levels__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 48px; border-top: 1px solid rgba(201, 216, 227, 0.22); }
.level { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 28px; row-gap: 10px; padding: 36px 40px 36px 0; }
.level--two { padding-left: 40px; border-left: 1px solid rgba(201, 216, 227, 0.22); }
.level__ring { grid-row: 1 / span 2; margin: 0; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; border: 4px solid var(--lime); font-weight: 800; font-size: 34px; color: #f6f7f7; font-variant-numeric: tabular-nums; }
.level--two .level__ring { border-style: dashed; border-color: var(--orange); }
.level h3 { font-size: 26px; }
.level h3 span { display: block; margin-top: 4px; font-weight: 500; font-size: 19px; color: var(--on-navy-2); }
.level p { margin: 0; color: var(--on-navy); }
.levels__rule { margin: 8px 0 0; padding-top: 28px; border-top: 1px solid rgba(201, 216, 227, 0.22); font-size: 20px; color: var(--on-navy); max-width: 60ch; }

/* kit contents */
.kitlist { background: var(--paper); }
.kitlist__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.kit--still { border-radius: 6px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(7, 31, 46, 0.55); background: var(--navy-850); }
.kit--still .kit__box { -webkit-mask-image: none; mask-image: none; }
.contents { margin: 8px 0 0; }
.contents div { padding: 20px 0; border-top: 1px solid var(--rule); }
.contents dt { font-weight: 700; font-size: 21px; }
.contents dd { margin: 6px 0 0; color: var(--body-ink); max-width: 52ch; }
.contents__not dt { color: #8a3d0a; }

/* audience */
.audience { background: var(--paper-2); }
.audience__list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.audience__list li { padding: 28px 32px 8px 0; border-top: 3px solid var(--navy-ink); }
.audience__list li + li { padding-left: 32px; border-left: 1px solid var(--rule); }
.audience__list p { margin: 10px 0 0; color: var(--body-ink); }

/* closing */
.closing { background-color: var(--navy-800); color: var(--on-navy); }
.closing__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
.closing p { color: var(--on-navy); }
.closing__order { justify-self: end; }
.closing__prices { margin: 0 0 22px; font-weight: 700; font-size: 26px; }
.closing__prices b { color: var(--lime); }
.closing__prices .dot { margin: 0 0.45em; color: var(--on-navy-2); }
.closing__po { margin: 18px 0 0; font-size: 19px; }

/* footer */
.foot { background: var(--navy-900); color: var(--on-navy-2); padding-block: 48px 40px; font-size: 16px; }
.foot__grid { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 40px; align-items: center; }
.foot__brand { display: flex; align-items: center; gap: 14px; }
.foot__brand img { width: 40px; height: auto; }
.foot__brand p { margin: 0; line-height: 1.4; }
.foot__brand strong { color: var(--on-navy); font-stretch: var(--semi-expanded); }
.foot nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: center; }
.foot nav a { display: inline-block; padding: 8px 10px; text-decoration: none; color: var(--on-navy); }
.foot nav a:hover { color: var(--lime); text-decoration: underline; }
.foot__contact { margin: 0; }
.foot__contact a { color: var(--lime); }
.foot__legal { grid-column: 1 / -1; margin: 12px 0 0; padding-top: 20px; border-top: 1px solid rgba(201, 216, 227, 0.16); font-size: 15px; }

/* ---------- inner pages (Order, Resources, legal) ---------- */
.pagehead { background-color: #0b3049; background-image: linear-gradient(180deg, #0c3350 0%, #0a2d45 100%); color: var(--on-navy); padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 72px); }
.pagehead h1 { margin: 0; font-weight: 700; font-stretch: var(--semi-condensed); font-size: clamp(38px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.005em; max-width: 20ch; text-wrap: balance; }
.pagehead p { margin: 18px 0 0; font-size: 21px; line-height: 1.4; max-width: 56ch; color: var(--on-navy); }

/* order options */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: clamp(-40px, -3vw, -24px); position: relative; }
.option { background-color: var(--navy-800); background-image: linear-gradient(180deg, #0f3350 0%, var(--navy-800) 55%); color: var(--on-navy); border-radius: 6px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 30px 60px -36px rgba(7, 31, 46, 0.7), inset 0 0 0 1px rgba(201, 216, 227, 0.12); display: flex; flex-direction: column; scroll-margin-top: 24px; }
.option:target { outline: 3px solid var(--lime); outline-offset: 4px; }
.option__pic { display: block; margin: 0 0 24px; aspect-ratio: 1304 / 764; display: grid; place-items: center; }
.option__pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.35)); }
.option h2 { margin: 0; font-weight: 700; font-stretch: var(--semi-expanded); font-size: clamp(28px, 3vw, 36px); line-height: 1.1; color: #f2f5f6; }
.option__price { margin: 10px 0 0; font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--lime); font-variant-numeric: tabular-nums; }
.option__lede { margin: 18px 0 0; color: var(--on-navy); }
.option__includes { margin: 24px 0 28px; padding: 0; list-style: none; border-top: 1px solid rgba(201, 216, 227, 0.22); }
.option__includes li { padding: 12px 0 12px 30px; border-bottom: 1px solid rgba(201, 216, 227, 0.22); position: relative; color: var(--on-navy); }
.option__includes li::before { content: ""; position: absolute; left: 0; top: 15px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23b6e96a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / contain; }
.option .btn { margin-top: auto; align-self: flex-start; }
.order-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(56px, 7vw, 96px); }
.order-notes > div { padding: 24px 32px 0 0; border-top: 3px solid var(--navy-ink); }
.order-notes > div + div { padding-left: 32px; border-left: 1px solid var(--rule); }
.order-notes > .order-notes__warn { border-top-color: var(--orange); }
.order-notes__warn h2 { color: #8a3d0a; }
.order-notes h2 { font-size: 24px; margin: 0 0 8px; max-width: none; }
.order-notes p { margin: 0; color: var(--body-ink); }
.order-notes a { color: var(--steel-ink); font-weight: 600; }

/* resources */
.guide { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.guide__covers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.guide__covers li { display: grid; grid-template-columns: 2.4ch 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.guide__covers b { color: var(--steel-ink); font-variant-numeric: tabular-nums; }
.previews { display: grid; gap: 28px; }
.preview { margin: 0; }
.preview__frame { position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(7, 31, 46, 0.55), 0 1px 3px rgba(7, 31, 46, 0.12); background: #1a2a3f; }
.preview__frame img { width: 100%; height: auto; }
.preview__frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(180deg, rgba(26, 42, 63, 0) 0%, rgba(26, 42, 63, 0.92) 100%); pointer-events: none; }
.preview--sheet .preview__frame { background: #fff; }
.preview--sheet .preview__frame::after { display: none; }
.preview figcaption { margin-top: 12px; font-size: 18px; color: var(--body-ink); }
.included { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 16px; border-radius: 999px; background: var(--navy-ink); color: #f6f7f7; font-weight: 600; font-size: 17px; }
.included::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }

/* legal pages */
.legal { padding-block: clamp(48px, 6vw, 80px); }
.legal .wrap { max-width: 680px; }
.legal p, .legal li { max-width: 62ch; }
.legal h1 { margin: 0 0 6px; font-weight: 800; font-size: clamp(34px, 4vw, 46px); line-height: 1.1; }
.legal h2 { margin: 36px 0 6px; font-weight: 700; font-size: 22px; max-width: none; }
.legal p, .legal li { color: var(--body-ink); }
.legal a { color: var(--steel-ink); }
.legal__updated { font-size: 18px; color: var(--body-ink); }

/* ---------- motion ---------- */
/* One authored moment: the drone marker flying the selected maneuver on the flight map (site.js).
   Everything else is still; content is visible by default. */

/* ---------- below the desktop frame ---------- */
@media (max-width: 1279.98px) {
  .mast { flex-wrap: wrap; gap: 6px 16px; padding-block: 12px; }
  .mast__product { order: 3; flex-basis: 100%; margin: 4px 0 0; font-size: 24px; }
  .mast__nav { margin-left: auto; }
  .mast__nav ul { gap: 2px; }
  .mast__brand { font-size: 19px; }
  .mast__brand img { width: 34px; }

  .hero { padding: 40px var(--gutter) 0; display: grid; gap: 36px; overflow: hidden; }
  .hero__copy { max-width: 640px; }
  .hero__sub { margin-top: 22px; }
  .hero__prices { margin-top: 26px; }
  .hero__cta { margin: 26px 0 0; }
  .hero__po { margin-top: 18px; }
  .hero .kit { width: calc(100% + var(--gutter)); margin-right: calc(-1 * var(--gutter)); }


  .session { padding: 56px var(--gutter) 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .session__rule { grid-column: 1 / -1; margin-bottom: -16px; }
  .session h2 { grid-column: 1 / -1; }
  .session .vrule { display: none; }
  .round { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; grid-column: 1 / -1; padding: 20px 0; border-top: 1px solid var(--rule); }
  .round__badge { grid-row: 1 / span 2; }
  .round__body { grid-column: 1 / -1; margin-top: 14px; }
  .round__arrow { display: none; }
  .stat { grid-column: span 1; padding-top: 20px; border-top: 1px solid var(--rule); }
  .stat--3 { grid-column: 1 / -1; }
  .stat__label { margin-top: 10px; }
  .stat__body { margin-top: 4px; }

  .maneuvers__grid, .kitlist__grid, .closing__grid, .guide { grid-template-columns: 1fr; }
  .closing__order { justify-self: start; }
  .levels__grid { grid-template-columns: 1fr; }
  .level { padding: 32px 0; }
  .level--two { padding-left: 0; border-left: 0; border-top: 1px solid rgba(201, 216, 227, 0.22); }
  .audience__list, .order-notes { grid-template-columns: 1fr; }
  .audience__list li, .audience__list li + li, .order-notes > div, .order-notes > div + div { padding: 24px 0; border-left: 0; }
  .order-notes > div + div { margin-top: 8px; }
  .options { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot nav ul { justify-content: flex-start; margin-left: -10px; }
}
@media (max-width: 560px) {
  .mast__brand span { font-size: 18px; }
  .mast__nav a { padding: 8px 7px; font-size: 16px; }
  .hero h1 { font-size: 38px; }
  .hero__sub { font-size: 19px; }
  .hero__sub + .hero__sub { font-size: 18px; }
  .hero__prices { font-size: 22px; }
  .btn { font-size: 20px; }
  .scoring div { grid-template-columns: 1fr; gap: 4px; }
  .mlist__item { grid-template-columns: 2.6ch 1fr; row-gap: 2px; }
  .mlist__dir { grid-column: 2; }
  .level { grid-template-columns: 1fr; }
  .level__ring { grid-row: auto; width: 72px; height: 72px; font-size: 28px; margin-bottom: 8px; }
}
.paper { background: var(--paper); }
.paper:not(.block):not(.legal) > .wrap { padding-bottom: clamp(64px, 9vw, 120px); }
.pagehead + .paper .options { margin-top: clamp(-56px, -4vw, -28px); }
.pagehead--order + .paper { padding-top: clamp(40px, 5vw, 64px); }
.pagehead--order + .paper .options { margin-top: 0; }
.preview--sheet { margin-top: 32px; max-width: 1040px; }
.sheet__cta { margin-top: 32px; }
.frame-br { display: none; }
@media (min-width: 1280px) {
  .frame-br { display: inline; }
  .stat--3 .stat__body { text-wrap: wrap; }
}