/*
 * WayFix marketing page. Same palette as the app: night-apron navy, instrument blue, one warm accent for money.
 *
 * Motion policy. This is a page people see once, so entrances may carry a little delight; everything a person
 * touches must answer instantly. Strong custom curves (the built-in ones are too weak), nothing over ~600 ms on
 * entrance and 160 ms on press, only transform / opacity / clip-path animate, hover effects only where there is a
 * real pointer, and reduced-motion keeps the fades but drops the movement. The site ships no script (its content
 * security policy forbids it), so every bit of motion here is CSS: @starting-style for the hero, scroll-driven
 * animations for the reveals (browsers without them simply show the finished state).
 */
:root {
  /* Design tokens (homepage refresh, October 2026). The older names stay as aliases so every rule below keeps working. */
  --bg: #080c18; --surface: #0f1626; --surface-2: #0b1120; --line: #24304a; --line-strong: #33415e;
  --text: #eef2f8; --text-2: #c5cfdf; --text-3: #93a0b8; --accent: #f2b544; --link: #7fb2ff; --ok: #3ddc84;
  --panel: var(--surface); --panel-2: var(--surface-2); --line-2: var(--line-strong); --muted: var(--text-3); --accent-2: var(--link); --gold: var(--accent);
  /* Type: the site's own stack for everything (Rich's call, 3 October 2026); .data adds tabular numerals and nothing else. */
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-data: var(--font-body);
  --wrap: 1280px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press: transform 160ms var(--ease-out);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[id] { scroll-margin-top: 76px; }
.data { font-variant-numeric: tabular-nums; }
/* Text links in prose and the brand keep their look but answer to a 44 px tall touch target: the padding grows the hit
   area and the negative margin gives the space back, so the line height does not change. */
figcaption a, #pricing .fine a, .faq details p a { display: inline-block; padding-block: 11px; margin-block: -11px; }
.brand { padding-block: 5px; margin-block: -5px; min-height: 44px; display: flex; align-items: center; }
.strip a { min-height: 44px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---- top bar ---- */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 12px 24px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: rgba(8, 12, 24, 0.78); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--line); }
.brand { display: block; line-height: 0; }
.brand img { width: 180px; } /* the WayFix lockup is white and cyan for a dark ground; on a light surface it sits on a navy plate (#031f45, 12px radius, 16px 8px padding): the site has no light surface today */
.top nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: none; font-size: 15px; letter-spacing: 0.01em; padding: 8px 12px; border-radius: 8px; transition: color 150ms ease, background-color 150ms ease, var(--press); }
.top nav a:active { transform: scale(0.97); }
.top nav .sign-in { color: var(--text-3); margin-left: 8px; }
@media (hover: hover) and (pointer: fine) { .top nav a:hover { color: var(--text); background: rgba(127, 178, 255, 0.08); } }
.join-btn .short { display: none; }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: 4px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; }
.menu-btn .cross { display: none; }
.top.open .menu-btn .bars { display: none; } .top.open .menu-btn .cross { display: block; }
.anchor-alias { display: block; height: 0; }
@media (max-width: 767px) {
  .top { gap: 10px; padding-inline: 16px; }
  .brand img { width: 150px; }
  .top nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px 16px 16px; background: rgba(8, 12, 24, 0.97); border-bottom: 1px solid var(--line); }
  .top.open nav { display: flex; }
  /* The open menu sits above the cookie banner (z-index 60; review D-101 F1: the at-top banner covered every menu link on a phone). */
  .top.open { z-index: 61; }
  .top nav a { min-height: 48px; font-size: 17px; padding-inline: 12px; }
  .top nav .sign-in { margin: 6px 0 0; border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }
  .join-btn { margin-left: auto; }
  .join-btn .long { display: none; } .join-btn .short { display: inline; }
  .menu-btn { display: inline-flex; }
}

/* ---- buttons: instant, pressable ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--accent); color: var(--bg); text-decoration: none; font-weight: 700; font-size: 16px; padding: 11px 22px; border-radius: 10px; border: 1px solid transparent; user-select: none; -webkit-user-select: none; transition: var(--press), background-color 150ms ease, box-shadow 150ms ease; will-change: transform; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #f7c568; box-shadow: 0 6px 24px rgba(242, 181, 68, 0.28); }
  .btn.ghost:hover { background: rgba(127, 178, 255, 0.12); box-shadow: none; }
}
.btn.ghost { background: transparent; border-color: #3a4a78; color: var(--text); }
.btn.small { font-size: 14px; padding: 8px 14px; min-height: 44px; }

/* ---- hero: the flight deck photograph, the words and the short form bottom-left ---- */
.hero { position: relative; min-height: min(88svh, 820px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } /* a column: the words and the form, then the works-with line under them, never beside */
.hero-bg { position: absolute; inset: 0; background: url("/img/hero.fde1f1ab50.webp") 50% 40% / cover no-repeat; transform: scale(1); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 24, 0.35) 0%, rgba(8, 12, 24, 0.55) 45%, var(--bg) 100%), radial-gradient(80% 60% at 20% 80%, rgba(8, 12, 24, 0.75), transparent 70%); }
.hero-in { position: relative; width: 100%; padding-block: 120px 40px; }
.eyebrow { margin: 0 0 10px; color: var(--link); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
h1, .h1 { margin: 0; font-size: clamp(44px, 8vw, 96px); line-height: 1; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.lede { max-width: 640px; margin: 22px 0 0; font-size: clamp(18px, 2.2vw, 22px); color: #d5dcef; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.cta.center { justify-content: center; }
.hero-more { margin: 18px 0 0; font-size: 15px; }
.hero-more a { color: var(--link); font-weight: 600; text-decoration: none; box-shadow: inset 0 -1px 0 rgba(127, 178, 255, 0.4); }
/* Entrance: each line settles in turn, 60 ms apart, from a hair below. Transitions (not keyframes) so a repaint never restarts them. */
.hero-in > * { opacity: 1; transform: translateY(0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.hero-in > :nth-child(2) { transition-delay: 60ms; } .hero-in > :nth-child(3) { transition-delay: 120ms; } .hero-in > :nth-child(4) { transition-delay: 180ms; } .hero-in > :nth-child(5) { transition-delay: 300ms; }
@starting-style { .hero-in > * { opacity: 0; transform: translateY(14px); } }
.hero-bg { transition: transform 1600ms var(--ease-out); }
@starting-style { .hero-bg { transform: scale(1.04); } }
/* The short form in the hero: email and the button on one line, the consent under it, the promise under that. */
.join.variant-hero { max-width: 640px; margin: 28px 0 0; padding: 0; background: none; border: 0; border-radius: 0; }
.join.variant-hero .fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.join.variant-hero .field label { position: absolute; left: -10000px; }
.join.variant-hero input[type="email"] { margin-top: 0; background: rgba(8, 12, 24, 0.7); }
.join.variant-hero .consent { margin-top: 12px; }
.join.variant-hero .consent label { color: var(--text-2); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.join.variant-hero .promise { margin: 10px 0 0; color: var(--text-2); font-size: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.works { position: relative; width: 100%; }
@media (max-width: 560px) {
  .hero-in { padding-block: 96px 40px; }
  .join.variant-hero .fields { grid-template-columns: minmax(0, 1fr); }
  .join.variant-hero .btn { width: 100%; }
}

/* ---- new: the two challenge modes as two picture tiles under the hero, each a link to its section ---- */
.band.new { padding-block: 28px 56px; border-bottom: 1px solid var(--line); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile { position: relative; display: flex; align-items: flex-end; min-height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2) 50% 50% / cover no-repeat; color: var(--text); text-decoration: none; transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
.tile-boss { background-image: url("/img/hero-boss.5581d86904.webp"); background-position: 62% 45%; }
.tile-wx { background-image: url("/img/hero-wx.a14bdea19c.webp"); background-position: 68% 50%; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 24, 0.05) 0%, rgba(8, 12, 24, 0.35) 45%, rgba(8, 12, 24, 0.9) 100%); }
.tile-in { position: relative; z-index: 1; display: grid; gap: 6px; padding: 24px; }
.tile .eyebrow { margin: 0; }
.tile-title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); }
.tile-line { color: var(--text-2); font-size: 16px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.tile-go { margin-top: 8px; color: var(--link); font-weight: 600; font-size: 15px; }
.tile-go::after { content: " \2192"; }
@media (hover: hover) and (pointer: fine) { .tile:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); } }
@media (max-width: 760px) { .tiles { grid-template-columns: minmax(0, 1fr); } .tile { min-height: 260px; } .tile-boss { background-image: url("/img/hero-boss-900.b243e28d8b.webp"); } .tile-wx { background-image: url("/img/hero-wx-900.d0dd452f41.webp"); } }
.new-ico, .wx-ico { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wx-card .example { justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 8px; margin-bottom: 4px; }
.wx-card .wx-ico { width: 28px; height: 28px; margin-top: 2px; color: var(--text-2); }
/* Boss cards share the challenge-card idiom; the level mark stands where the weather icon does. */
.wx-card.boss-card { border-left-color: var(--accent); grid-template-columns: minmax(0, 1fr); } /* one column, no level badge; the .wx-card rule below would otherwise keep its two (order D-317: the ladder renumbers at release 25) */
/* Four flight report cards, each its own picture. */
/* The log book's four cards as a scattered deck: each tilted and overlapping the next, the hovered one lifted, straightened
   and brought to the front, the gold flight with a gold glow. Steps and widths are fractions of the deck so the four fit
   between 901 px and the full wrap; under 900 px they fall back to the plain two-by-two grid. */
.card-grid.scatter { position: relative; list-style: none; margin: 56px auto 0; padding: 0; max-width: 1100px; height: 220px; }
.card-grid.scatter li { position: absolute; top: 0; width: min(300px, 27%); transition: transform 220ms cubic-bezier(.23, 1, .32, 1), box-shadow 220ms ease; }
.card-grid.scatter li img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.card-grid.scatter .s1 { left: 0; top: 30px; transform: rotate(-6deg); z-index: 1; }
.card-grid.scatter .s2 { left: 24%; top: 4px; transform: rotate(3deg); z-index: 2; }
.card-grid.scatter .s3 { left: 48%; top: 34px; transform: rotate(-4deg); z-index: 3; }
.card-grid.scatter .s4 { left: 72%; top: 12px; transform: rotate(5deg); z-index: 4; }
.card-grid.scatter .gold-glow img { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 200, 87, 0.35), 0 0 44px rgba(255, 200, 87, 0.22); }
@media (hover: hover) and (pointer: fine) {
  .card-grid.scatter li:hover { transform: translateY(-14px) rotate(0deg) scale(1.06); z-index: 10; }
}
@media (max-width: 900px) {
  .card-grid.scatter { position: static; height: auto; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .card-grid.scatter .s1, .card-grid.scatter .s2, .card-grid.scatter .s3, .card-grid.scatter .s4 { position: static; width: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .card-grid.scatter li { transition: none; } }

/* ---- flight strip: the six stages, as a strip of pills under the hero ---- */
.strip { position: relative; display: flex; gap: 6px; padding: 14px 24px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-block: 1px solid var(--line); background: var(--panel-2); }
.strip::-webkit-scrollbar { display: none; }
.strip-in { display: flex; gap: 6px; margin: 0 auto; }
.strip a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--text-2); text-decoration: none; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); transition: border-color 150ms ease, color 150ms ease, var(--press); }
.strip a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .strip a:hover { border-color: var(--accent); color: var(--text); } }
.strip a i { font-style: normal; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(79, 140, 255, 0.16); color: var(--accent-2); font-size: 11px; font-variant-numeric: tabular-nums; }

/* ---- bands ---- */
.band { padding-block: 96px; }
.band.dark { background: var(--panel-2); border-block: 1px solid var(--line); }
h2 { margin: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.sub { max-width: 720px; margin: 16px 0 0; color: var(--text-2); font-size: 18px; text-wrap: pretty; }
.fine { color: var(--muted); font-size: 15.5px; text-wrap: pretty; }
.center { text-align: center; margin-inline: auto; }

/* ---- the flight loop: on a desktop a rail of the six steps sticks beside the legs and follows the one in view
   (site.js, IntersectionObserver, aria-current="step"); on a phone the rail is gone and the stacked legs keep their numbers ---- */
.rail { display: none; }
@media (min-width: 1024px) {
  .loop-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
  .rail { display: block; position: sticky; top: 96px; margin-top: 64px; }
  .rail ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
  .rail a { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-left: -2px; padding: 8px 14px; border-left: 2px solid transparent; color: var(--text-3); text-decoration: none; font-size: 15px; font-weight: 600; transition: color 150ms ease, border-color 150ms ease; }
  .rail a i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--text-3); font-size: 12px; font-family: var(--font-data); transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; }
  .rail a[aria-current="step"] { color: var(--text); border-left-color: var(--accent); }
  .rail a[aria-current="step"] i { border-color: var(--accent); background: var(--accent); color: var(--bg); }
  @media (hover: hover) and (pointer: fine) { .rail a:hover { color: var(--text); } }
  .strip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rail a, .rail a i { transition: none; } }

/* ---- the video slot (behind SHOW_FLIGHT_VIDEO): a poster and a play button; the clip is loaded on the click ---- */
.video-slot { margin: 44px 0 0; }
.video-play { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); cursor: pointer; color: var(--text); }
.video-play img { width: 100%; display: block; filter: brightness(0.85); }
.video-play .play-ico { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--bg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); transition: var(--press); }
.video-play:active .play-ico { transform: scale(0.95); }
.video-play .play-label { position: absolute; left: 16px; bottom: 14px; font-size: 14px; font-weight: 600; color: var(--text); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.video-slot video { width: 100%; display: block; border-radius: 14px; border: 1px solid var(--line); background: #000; }
@media (prefers-reduced-motion: reduce) { .video-play .play-ico { transition: none; } }

/* ---- the flight path: six legs joined by a dashed track ---- */
.path { list-style: none; margin: 64px 0 0; padding: 0; position: relative; }
.path::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; border-left: 2px dashed var(--line-2); }
.leg { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; padding: 0 0 80px 68px; }
.leg:last-child { padding-bottom: 0; }
.leg .n { position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); color: var(--accent-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.leg h3 { margin: 5px 0 8px; font-size: 28px; line-height: 34px; letter-spacing: -0.01em; } /* the heading sits level with its number */
.leg-txt > p:first-of-type { margin: 0 0 12px; font-size: 19px; color: var(--text); font-weight: 600; text-wrap: balance; }
.leg-txt .fine { margin: 0; }
figure { margin: 0; }
figure img { border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { figure img:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); } }
figcaption { margin-top: 10px; color: var(--muted); font-size: 13.5px; }
.wide { margin-top: 44px; }
#cockpit .eyebrow, #cockpit h2 { text-align: center; }
#cockpit .sub { margin-inline: auto; text-align: center; }
.shot img { border-radius: 10px; }
/* the tablet render carries its own frame and shadow: no card chrome, no uncover animation */
.tablet img { border: 0; border-radius: 0; box-shadow: none; animation: none; }

/* Scroll reveals. The text of a leg drifts up as it enters; its picture is uncovered from the bottom, the way a
 * card is dealt. Tied to the scroll position, so scrolling back and forth never "replays" — the element is simply
 * where the scroll says it is. Finished state everywhere the timeline is unsupported. */
@supports (animation-timeline: view()) {
  .leg-txt, .two > *, .chips, .plan { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  figure img { animation: uncover linear both; animation-timeline: view(); animation-range: entry 10% entry 55%; }
  .plan:nth-child(2) { animation-range: entry 8% entry 48%; } .plan:nth-child(3) { animation-range: entry 16% entry 56%; } .plan:nth-child(4) { animation-range: entry 24% entry 64%; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes uncover { from { opacity: 0; clip-path: inset(0 0 22% 0 round 14px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 14px); } }

/* ---- boss flights: the storm picture as the band, the text and the ladder over it ---- */
#boss { position: relative; min-height: 720px; display: flex; align-items: center; padding-block: 88px; overflow: hidden; border-block: 1px solid var(--line); }
.boss-bg { position: absolute; inset: 0; background: url("/img/hero-boss.5581d86904.webp") 62% 45% / cover no-repeat; }
.boss-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 24, 0.88) 0%, rgba(8, 12, 24, 0.72) 42%, rgba(8, 12, 24, 0.25) 75%, rgba(8, 12, 24, 0.1) 100%), linear-gradient(180deg, rgba(8, 12, 24, 0.2) 0%, transparent 30%, transparent 70%, var(--bg) 100%); }
#boss .wrap { position: relative; width: 100%; }
#boss .two { align-items: center; }
#boss h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
#boss .sub, #boss .fine { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.bosses { list-style: none; margin: 0; padding: 6px 18px; background: rgba(12, 18, 34, 0.62); border: 1px solid rgba(143, 160, 196, 0.28); border-radius: 14px; backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.bosses li { display: grid; grid-template-columns: 168px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(143, 160, 196, 0.18); align-items: baseline; }
.bosses li:last-child { border-bottom: 0; }
.bosses b { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.bosses span { color: var(--text-2); font-size: 14.5px; }
.bosses span .data { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---- WX Ops: the rain picture as the band, the aircraft kept to the right, the points as a card ---- */
#wx { position: relative; min-height: 640px; display: flex; align-items: center; padding-block: 88px; overflow: hidden; border-block: 1px solid var(--line); }
.wx-bg { position: absolute; inset: 0; background: url("/img/hero-wx.a14bdea19c.webp") 68% 50% / cover no-repeat; }
.wx-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 24, 0.9) 0%, rgba(8, 12, 24, 0.74) 42%, rgba(8, 12, 24, 0.3) 72%, rgba(8, 12, 24, 0.12) 100%), linear-gradient(180deg, rgba(8, 12, 24, 0.25) 0%, transparent 30%, transparent 70%, var(--bg) 100%); }
#wx .wrap { position: relative; width: 100%; }
#wx .two { align-items: center; }
/* Sample WX Ops challenge cards under the list: the app's .wx-card idiom (severity as a left border, the kind, the title,
   airport and city, the window, the reward). Four across on a desktop; on a narrow screen the row scrolls sideways with
   the next card's edge showing (scroll-snap, the row scrolls, never the page); under 480 px they stack. */
.wx-samples { margin-top: 36px; }
.wx-samples .fine { margin: 0 0 14px; color: var(--muted); }
/* The "Read more" line under the home's pricing, watching, boss and WX sections (the product pages, 13 October 2026). */
.read-more, .wx-samples .read-more { margin: 18px 0 0; }
.wx-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wx-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 16px 14px 12px; background: rgba(12, 18, 34, 0.78); border: 1px solid rgba(143, 160, 196, 0.28); border-left-width: 4px; border-radius: 12px; }
.wx-card.sev-1 { border-left-color: #3ddc84; } .wx-card.sev-2 { border-left-color: #ffb547; } .wx-card.sev-3 { border-left-color: #ff5c7a; }
.wx-card .wx-body { display: grid; gap: 3px; font-size: 12.5px; color: var(--text-2); }
.wx-card .wx-body b { font-size: 15px; color: var(--text); }
.wx-card .wx-body .data { font-size: 12px; letter-spacing: 0.01em; }
.wx-card .wx-reward { color: var(--accent); font-weight: 600; }
@media (max-width: 1024px) and (min-width: 481px) {
  .wx-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; margin-inline: -2px; scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .wx-card { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
}
@media (max-width: 480px) { .wx-row { grid-template-columns: minmax(0, 1fr); } }
#wx h2, #wx .tagline { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
#wx .sub, #wx .fine { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
#wx .sub + .sub { margin-top: 12px; }
#wx .tagline { margin-top: 22px; font-weight: 600; font-size: 18px; color: #fff; }
/* Operations monitoring: the dispatch-centre plate behind a full-width intro and a 4x2 grid of the checks, in the WX card
   idiom without a severity border (these are live rules, not samples); the fade runs top to bottom since the content
   covers the whole width. */
#watching { position: relative; min-height: 760px; display: flex; align-items: center; padding-block: 88px; overflow: hidden; border-block: 1px solid var(--line); }
.watching-bg { position: absolute; inset: 0; background: url("/img/hero-watching.a482350b9d.webp") 50% 40% / cover no-repeat; }
.watching-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 24, 0.84) 0%, rgba(8, 12, 24, 0.5) 34%, rgba(8, 12, 24, 0.62) 70%, rgba(8, 12, 24, 0.9) 100%); }
#watching .wrap { position: relative; width: 100%; }
#watching h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
#watching .sub, #watching .fine { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.watching-intro { max-width: 760px; margin: 0 0 36px; }
.watch-card { border-left-width: 1px; border-color: var(--gold); }  /* outlined like the Founding plan box */
@media (max-width: 860px) { #watching { min-height: 0; } }
/* The landing card (docs/site-change-recommendations.md, "Work order: the landing card"): a full-width sibling of the
   watch list — the copy on the left, an EXAMPLE landing report on the right, one column on a phone. Seven cards no
   longer fill the 4 × 2 grid, so the Systems card spans two columns on a desktop. Classes only; no motion. */
@media (min-width: 1025px) { .wx-row .watch-card:last-child { grid-column: span 2; } }
.landing-card { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: center; padding: 28px 32px; border: 1px solid var(--gold); border-radius: 12px; background: rgba(12, 18, 34, 0.92); }
.landing-card h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 24px; color: var(--text); }
.landing-card h3 .wx-ico { width: 28px; height: 28px; color: var(--text-2); }
.landing-lead { margin: 12px 0 0; font-size: 17px; line-height: 1.45; color: var(--text); }
.landing-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.landing-points b { color: var(--text); }
.landing-data { margin: 14px 0 0; font-size: 12px; font-weight: 600; color: var(--accent); }
.landing-report { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; display: grid; gap: 14px; }
.lr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lr-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 9px; }
.lr-chip { font-size: 12px; font-weight: 600; border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; }
.lr-amber { color: var(--accent); } .lr-green { color: var(--ok); }
.lr-score { display: flex; align-items: baseline; gap: 14px; }
.lr-num { font-size: 56px; font-weight: 700; line-height: 1; color: var(--accent); }
.lr-sub { font-size: 12px; color: var(--text-3); }
.lr-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lr-parts li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-2); }
.lr-parts li .data { text-align: right; }
.lr-bar { display: block; height: 8px; border-radius: 4px; background: #1a2540; }
.lr-bar i { display: block; height: 8px; border-radius: 4px; }
.w100 { width: 100%; } .w60 { width: 60%; }
.lr-green-bg { background: var(--ok); } .lr-amber-bg { background: var(--accent); }
.lr-profile { margin: 0; }
.lr-profile figcaption { font-size: 11px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.lr-profile svg { width: 100%; height: auto; display: block; }
.lr-zone { fill: var(--ok); opacity: 0.12; }
.lr-ground { stroke: var(--line-strong); stroke-width: 1; }
.lr-ref { fill: none; stroke: var(--link); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lr-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.lr-dot { fill: var(--accent); }
.lr-tick { stroke: var(--text); stroke-width: 1.5; }
.lr-profile text { font-size: 10px; font-family: inherit; }
.lr-t-dim { fill: var(--text-3); } .lr-t-green { fill: var(--ok); } .lr-t-blue { fill: var(--link); } .lr-t-amber { fill: var(--accent); } .lr-t-text { fill: var(--text); }
.lr-narrow { display: none; }
.lr-coach { margin: 0; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; line-height: 1.45; color: var(--text); }
.lr-coach b { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-right: 8px; }
@media (max-width: 1024px) { .lr-profile text { font-size: 12px; } }  /* the two-column card on a tablet draws the chart at about 0.8 scale: 12 renders near 10 px */
@media (max-width: 860px) {
  .landing-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 16px; align-items: stretch; }
  .landing-report { padding: 16px; }
  .lr-profile text { font-size: 10px; }  /* one column again: the chart is wide enough for the desktop size */
}
@media (max-width: 560px) {
  .lr-num { font-size: 52px; }
  .lr-parts li { grid-template-columns: 96px minmax(0, 1fr) 48px; }
  .lr-profile text { font-size: 17px; }  /* the chart scales down to about 60 %; 17 renders near 10 px */
  .lr-wide { display: none; } .lr-narrow { display: inline; }
}
.bosses.points li { grid-template-columns: 22px 1fr; }
.bosses.points li::before { content: "\2713"; color: var(--gold); font-weight: 700; }
.bosses.points span { color: var(--text); font-size: 15px; }
@media (max-width: 860px) { #boss { min-height: 0; } .boss-bg { background-position: 70% 30%; } .boss-bg::after { background: linear-gradient(180deg, rgba(8, 12, 24, 0.55) 0%, rgba(8, 12, 24, 0.82) 45%, var(--bg) 100%); } }
@media (max-width: 640px) { .bosses li { grid-template-columns: 1fr; gap: 2px; } }
@supports (animation-timeline: view()) { .bosses { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } }

/* ---- Levels: the terminal plate behind the pitch, the screenshot below on the plain background ---- */
#levels { position: relative; border-block: 1px solid var(--line); padding-block-start: 0; }
.levels-hero { position: relative; min-height: 620px; display: flex; align-items: center; padding-block: 88px; overflow: hidden; }
.levels-bg { position: absolute; inset: 0; background: url("/img/hero-levels.be5a06aec7.webp") 60% 42% / cover no-repeat; }
.levels-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 12, 24, 0.94) 0%, rgba(8, 12, 24, 0.84) 38%, rgba(8, 12, 24, 0.38) 68%, rgba(8, 12, 24, 0.1) 100%), linear-gradient(180deg, rgba(8, 12, 24, 0.25) 0%, transparent 28%, transparent 68%, var(--bg) 100%); }
.levels-hero .wrap { position: relative; width: 100%; }
.levels-hero .two { align-items: center; }
.levels-hero h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
.levels-hero .sub { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
@media (max-width: 860px) { .levels-hero { min-height: 0; } }

/* ---- FAQ as an MCDU ---- */
/* Share Tech Mono (SIL Open Font License 1.1), served from here because the site's CSP allows no outside stylesheet or font. */
@font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/share-tech-mono.woff2") format("woff2"); }
.mcdu-wrap { display: none; }
.faq-fallback { display: block; max-width: 820px; }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; color: var(--text); padding-block: 6px; }
.faq details p, .faq details ul { color: var(--text-2); font-size: 15.5px; margin: 8px 0 0; }
.faq details ul { padding-left: 20px; }
@media (min-width: 1000px) {
  .mcdu-wrap { display: block; position: relative; margin-top: 36px; }
  .faq-fallback { display: none; }
}
.mcdu-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* The unit: the photo as the box, every control placed in percentages of it; type scales with the box (container units). */
.mcdu-device { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; aspect-ratio: 1672 / 941; background: #000 url("/img/hero-faq-mcdu.a8f86204cc.webp") 50% 50% / cover no-repeat; border-radius: 10px; overflow: hidden; container-type: inline-size; }
.mcdu-screen { position: absolute; left: 24.8%; top: 13.6%; width: 49.8%; height: 71.4%; box-sizing: border-box; padding: 2.6cqw 2.2cqw 2cqw; overflow: hidden; font-family: "Share Tech Mono", "Courier New", monospace; color: #fff; }
.mcdu-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.22) 3px); mix-blend-mode: multiply; }
.mcdu-page { display: none; position: absolute; inset: 1.7cqw 2.2cqw 1.4cqw; }
.mcdu-titlebar { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.67cqw; font-weight: 700; letter-spacing: 0.04em; border-bottom: 1px solid #16391f; padding-bottom: 0.9cqw; }
.mcdu-pagemark { color: #5dffa0; font-size: 1.25cqw; }
.mcdu-body { padding-top: 1.3cqw; font-size: 1.5cqw; line-height: 1.6; }
.mcdu-body p { margin: 0 0 0.55em; }
.mcdu-body.mcdu-green { color: #9be89b; }
.mcdu-body.mcdu-tall { padding-top: 2.2cqw; font-size: 1.6cqw; line-height: 1.7; }
.mcdu-cyan { color: #7fe0ff; }
.mcdu-caution { color: #ffd27f; }
.mcdu-standby { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.3cqw; padding: 5cqw 1cqw 1cqw; }
.mcdu-logo { width: 26.7cqw; height: auto; opacity: 0.92; }
.mcdu-hint { margin: 0; color: #3f7a52; font-size: 1.33cqw; letter-spacing: 0.04em; text-align: center; }
.mcdu-scratch { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; border-top: 1px solid #16391f; padding-top: 0.75cqw; color: #e8e8e8; font-size: 1.33cqw; min-height: 1.6em; }
.mcdu-cursor { display: inline-block; width: 0.75cqw; height: 1.33cqw; background: #d8d8d8; margin-left: 0.2cqw; vertical-align: -0.2cqw; animation: mcdu-blink 1.1s steps(1) infinite; }
@keyframes mcdu-blink { 50% { opacity: 0; } }
#mcdu-standby:checked ~ .mcdu-device .mcdu-page-standby, #mcdu-q1:checked ~ .mcdu-device .mcdu-page-q1, #mcdu-q2:checked ~ .mcdu-device .mcdu-page-q2, #mcdu-q3:checked ~ .mcdu-device .mcdu-page-q3, #mcdu-q4:checked ~ .mcdu-device .mcdu-page-q4, #mcdu-q5:checked ~ .mcdu-device .mcdu-page-q5, #mcdu-q6:checked ~ .mcdu-device .mcdu-page-q6 { display: block; }
/* The six left-hand keys and the first right-hand key (Boss flights, order D-317; the right column mirrors the left on the
   photo: keys at 79.5 to 84.2 percent, the dash at 76.4 to 78.1), their annunciators and the printed plates under them. */
/* The label is the hit box, a little larger than the drawn key (44 px tall from 1000 px); the glow fills it. */
.mcdu-key { position: absolute; left: 14.35%; width: 6.5%; height: 8.2%; cursor: pointer; border-radius: 6px; }
.mcdu-k1 { top: 21.1%; } .mcdu-k2 { top: 31.2%; } .mcdu-k3 { top: 41.3%; } .mcdu-k4 { top: 51.4%; } .mcdu-k5 { top: 61.5%; } .mcdu-k6 { top: 71.6%; } .mcdu-k7 { top: 21.1%; left: 78.6%; }
.mcdu-glow { position: absolute; inset: 0; border-radius: 0.8cqw; background: radial-gradient(ellipse at center, rgba(93, 255, 160, 0.55), rgba(93, 255, 160, 0) 70%); opacity: 0; mix-blend-mode: screen; transition: opacity 120ms ease; pointer-events: none; }
.mcdu-key:hover .mcdu-glow { opacity: 0.4; }
#mcdu-q1:checked ~ .mcdu-device .mcdu-k1 .mcdu-glow, #mcdu-q2:checked ~ .mcdu-device .mcdu-k2 .mcdu-glow, #mcdu-q3:checked ~ .mcdu-device .mcdu-k3 .mcdu-glow, #mcdu-q4:checked ~ .mcdu-device .mcdu-k4 .mcdu-glow, #mcdu-q5:checked ~ .mcdu-device .mcdu-k5 .mcdu-glow, #mcdu-q6:checked ~ .mcdu-device .mcdu-k7 .mcdu-glow, #mcdu-standby:checked ~ .mcdu-device .mcdu-k6 .mcdu-glow { opacity: 1; }
/* Keyboard: the radios take focus (Tab, then the arrow keys move between topics); the focused key shows a ring. */
#mcdu-q1:focus-visible ~ .mcdu-device .mcdu-k1, #mcdu-q2:focus-visible ~ .mcdu-device .mcdu-k2, #mcdu-q3:focus-visible ~ .mcdu-device .mcdu-k3, #mcdu-q4:focus-visible ~ .mcdu-device .mcdu-k4, #mcdu-q5:focus-visible ~ .mcdu-device .mcdu-k5, #mcdu-q6:focus-visible ~ .mcdu-device .mcdu-k7, #mcdu-standby:focus-visible ~ .mcdu-device .mcdu-k6 { outline: 2px solid var(--gold); outline-offset: 3px; }
.mcdu-led { position: absolute; left: 21.0%; width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: translate(-50%, -50%); }
.mcdu-led1 { top: 25.2%; } .mcdu-led2 { top: 35.3%; } .mcdu-led3 { top: 45.4%; } .mcdu-led4 { top: 55.5%; } .mcdu-led5 { top: 65.6%; } .mcdu-led6 { top: 75.7%; } .mcdu-led7 { top: 25.2%; left: 78.1%; }
#mcdu-q1:checked ~ .mcdu-device .mcdu-led1, #mcdu-q2:checked ~ .mcdu-device .mcdu-led2, #mcdu-q3:checked ~ .mcdu-device .mcdu-led3, #mcdu-q4:checked ~ .mcdu-device .mcdu-led4, #mcdu-q5:checked ~ .mcdu-device .mcdu-led5, #mcdu-q6:checked ~ .mcdu-device .mcdu-led7, #mcdu-standby:checked ~ .mcdu-device .mcdu-led6 { background: #5dffa0; box-shadow: 0 0 8px 3px rgba(93, 255, 160, 0.9); }
.mcdu-plate { position: absolute; left: 14.0%; width: 7.2%; text-align: center; font-family: var(--font-body); font-size: clamp(8px, 0.85cqw, 11px); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #d8dbe1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); pointer-events: none; }
.mcdu-plate1 { top: 29.0%; } .mcdu-plate2 { top: 39.1%; } .mcdu-plate3 { top: 49.2%; } .mcdu-plate4 { top: 59.3%; } .mcdu-plate5 { top: 69.4%; } .mcdu-plate6 { top: 79.5%; } .mcdu-plate7 { top: 29.0%; left: 78.2%; }
/* The complete answer under the unit, in the page's own type, for readers and search alike. */
.faq-full { max-width: 1200px; margin: 18px auto 0; min-height: 4.5em; }
.faq-full > p { display: none; margin: 0; color: var(--text-2); font-size: 15.5px; }
.faq-full > p b { color: var(--text); font-weight: 600; }
.faq-full .faq-full-standby { color: var(--muted); }
#mcdu-standby:checked ~ .faq-full .faq-full-standby, #mcdu-q1:checked ~ .faq-full .faq-full-q1, #mcdu-q2:checked ~ .faq-full .faq-full-q2, #mcdu-q3:checked ~ .faq-full .faq-full-q3, #mcdu-q4:checked ~ .faq-full .faq-full-q4, #mcdu-q5:checked ~ .faq-full .faq-full-q5, #mcdu-q6:checked ~ .faq-full .faq-full-q6 { display: block; }
@media (prefers-reduced-motion: reduce) { .mcdu-cursor { animation: none; } .mcdu-glow { transition: none; } }
/* Tablets (the unit shows from 760 px) load the 900-wide plate. */
@media (max-width: 900px) { .mcdu-device { background-image: url("/img/hero-faq-mcdu-900.1e6e25f3e3.webp"); } }

/* ---- verification ---- */
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.catch { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.catch li { display: grid; grid-template-columns: 22px 168px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.catch li::before { content: "✓"; color: var(--ok); font-weight: 700; font-size: 14px; }
.catch b { color: var(--gold); font-weight: 600; }
.catch span { color: var(--text-2); font-size: 15.5px; }

/* ---- aircraft ---- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 34px 0 18px; justify-content: center; }
.chips li { padding: 10px 22px; border: 1px solid #33426e; border-radius: 999px; background: var(--panel); font-weight: 600; letter-spacing: 0.04em; }
#aircraft .eyebrow, #aircraft h2 { text-align: center; }
#aircraft .sub { margin-inline: auto; text-align: center; }
#aircraft .fine { max-width: 640px; }
/* The three screens of the app, image left / right / left; the same 1 px gold and 14 px corners as .plan.best, no fill gradient; no hover, no animation. */
.shots { list-style: none; margin: 56px auto 0; padding: 0; max-width: 1080px; display: flex; flex-direction: column; gap: 56px; }
.shot { display: flex; align-items: center; gap: 56px; }
.shot-img { flex: 0 0 600px; margin: 0; border: 1px solid var(--gold); border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.shot-img img { width: 100%; height: auto; display: block; }
.shot-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.shot-txt::before { content: ""; width: 48px; height: 3px; background: var(--gold); }
.shot-txt h3 { margin: 0; font-size: 48px; line-height: 1.08; }
.shot-txt p { margin: 0; font-size: 20px; line-height: 1.45; color: var(--text-2); }
.shot.flip .shot-txt { order: -1; align-items: flex-end; text-align: right; }
@media (max-width: 860px) {
  .shot { flex-direction: column; align-items: stretch; gap: 18px; }
  .shot-img { flex: none; width: 100%; }
  .shot.flip .shot-txt { order: 0; align-items: flex-start; text-align: left; }
}

/* ---- early access ---- */
/* Legal pages (terms.html, privacy.html) */
.wrap.legal { max-width: 760px; padding-block: 40px 72px; }
.legal h1 { margin: 0 0 6px; font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.02em; }
.legal .sub { margin: 0 0 28px; color: var(--muted); }
.legal h2 { margin: 30px 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--text-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.legal ul { padding-left: 22px; } .legal li { margin: 6px 0; }
.legal a { color: var(--accent-2); }
.draft { margin: 0 0 22px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 200, 87, 0.12); border: 1px solid rgba(255, 200, 87, 0.45); color: var(--gold); font-weight: 600; font-size: 14px; }
.join .consent a { color: var(--accent-2); }

/* The launch-notice form (the waiting list; before launch it stands where the "Take a seat" card will) */
.join { max-width: 640px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 22px; }
.join h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.join > p { margin: 0 0 18px; color: var(--text-2); font-size: 15.5px; text-wrap: pretty; }
.join .fields { display: grid; gap: 14px; }
.join .field { position: relative; }
.join .field label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.join .opt { font-weight: 500; letter-spacing: 0; text-transform: none; }
.join input[type="email"], .join input[type="text"] { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 11px 14px; font: inherit; font-size: 16px; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; }
.join input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* The honeypot: off-screen, never announced, never in the tab order; display:none would be the bots' own tell. */
.join .trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.join .consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 16px; }
.join .consent label { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); line-height: 1.45; }
.join .consent input { width: 20px; height: 20px; margin: 2px 0 0 2px; accent-color: var(--accent); }
.form-status:focus-visible { outline: none; }
.join .cta { margin-top: 18px; }
.join button.btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.join .btn[disabled] { opacity: 0.6; cursor: default; }
.form-status { margin: 12px 0 0; min-height: 1.4em; font-size: 14.5px; }
.form-status.ok { color: var(--ok); } .form-status.err { color: #ff9aa6; }
@media (max-width: 560px) { .join { padding: 20px 16px; } }

/* The product pages (/pricing, /verification, /boss-flights, /wx-ops): the page's one h1 sits inside the first band, set like a
   band's h2; on /pricing the copied h2 "Founding Flight Crew" follows it a line smaller. The home has no h1 in a band. */
.band h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.015em; }
.band h1 + h2 { margin-top: 14px; font-size: clamp(22px, 3vw, 30px); color: var(--text-2); }
#pricing .eyebrow, #pricing h1, #pricing h2 { text-align: center; }
#pricing .sub { margin-inline: auto; text-align: center; }
.plans-wrap { position: relative; margin: 48px 0 40px; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.plan { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; transition: border-color 150ms ease, transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .plan:hover { border-color: var(--line-2); transform: translateY(-2px); } .plan.best:hover { border-color: var(--gold); } }
.plan h3 { margin: 0; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.plan .price { margin: 10px 0 8px; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan p:last-child { margin: 0; color: var(--text-2); font-size: 15px; text-wrap: pretty; }
.plan.best { border-color: var(--gold); background: linear-gradient(180deg, rgba(255, 200, 87, 0.1), var(--panel) 60%); }
.plan.best h3, .plan.best .price { color: var(--gold); }
.plan.best::after { content: "Founding crew"; position: absolute; top: -11px; right: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg); background: var(--gold); padding: 3px 9px; border-radius: 999px; }
.soon { color: var(--muted); font-size: 15px; }

/* ---- footer ---- */
footer { padding-block: 56px calc(72px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.foot img { width: 200px; opacity: 0.9; }
.foot p { margin: 18px 0 0; color: var(--text-2); }
.foot .legal { color: #6f7fa6; font-size: 13px; max-width: 820px; text-wrap: pretty; }

/* ---- narrow screens ---- */
@media (max-width: 860px) {
  .band { padding-block: 64px; }
  .leg, .two { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .leg { padding: 0 0 56px 60px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catch li { grid-template-columns: 22px minmax(0, 1fr); } .catch span { grid-column: 2; }
}
@media (max-width: 480px) { .plans { grid-template-columns: minmax(0, 1fr); } .hero-in { padding-block: 96px 44px; } }
@media (min-width: 861px) { .leg.flip .leg-txt { order: 2; } .leg.flip figure { order: 1; } }

/* ---- reduced motion: keep the fades, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-in > * { transition: opacity 400ms ease; transform: none; }
  .hero-bg { transition: none; }
  @starting-style { .hero-in > * { transform: none; } .hero-bg { transform: none; } }
  .tile { transition: none; } .tile:hover { transform: none; }
  @keyframes rise { from { opacity: 0; } to { opacity: 1; } }
  @keyframes uncover { from { opacity: 0; } to { opacity: 1; } }
  figure img, .plan, .btn, .top nav a, .strip a { transition: none; }
  figure img:hover, .plan:hover { transform: none; }
}

/* The plan cards' links to the app's Subscribe page; the grid closes up to three when the Founding card is gone. */
.plan .go { margin: 18px 0 0 !important; }
.plan .go a { display: inline-block; color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid #3a4a78; border-radius: 10px; padding: 8px 14px; transition: border-color 150ms ease, background-color 150ms ease; }
.plan .go a:hover { border-color: var(--accent); background: rgba(242, 181, 68, 0.10); }
.plan.best .go a { border-color: var(--gold); color: var(--gold); } .plan.best .go a:hover { background: rgba(255, 200, 87, 0.12); }
.plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Before launch: the plans are on show and nothing is for sale. The "launching" class on .plans-wrap dims the cards, stills
   their hover and lays a "Launching soon" ribbon across the foot of the grid — real text in a real element, so it reads
   on a phone and to a screen reader; the cards get room at the bottom so no price or line is covered. On a narrow
   screen the grid is a tall column, so the ribbon sits at its top and stays pinned under the header while the cards
   scroll past. The sticker overhangs the grid by 16 px a side, which the page padding absorbs (D-019, 10 October 2026: at -4 % it
   reached 1306 px at a 1280 px viewport and the page scrolled sideways). Launch day removes the class (README "Launch day"). */
.plans-wrap .ribbon { display: none; }
.launching .plans { opacity: 0.6; filter: saturate(0.7); }
.launching .plan { padding-bottom: 76px; }
.launching .plan:hover { transform: none; border-color: var(--line); } .launching .plan.best:hover { border-color: var(--gold); }
.launching .ribbon { display: block; position: absolute; z-index: 2; left: -16px; right: -16px; bottom: 14px; margin: 0; transform: rotate(-1.5deg); text-align: center; background: var(--gold); color: var(--bg); font-weight: 800; font-size: clamp(16px, 2.4vw, 24px); letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; padding: 12px 16px; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
@media (max-width: 860px) { .launching .plan { padding-bottom: 22px; } .launching .ribbon { position: sticky; top: 84px; bottom: auto; left: 0; right: 0; margin: 0 0 14px; } }

/* Last, so it wins over the section rules above: phones load the 900-wide plates (the build hashes them like the rest). */
@media (max-width: 860px) { .hero-bg { background-image: url("/img/hero-900.5d134f66ab.webp"); } .boss-bg { background-image: url("/img/hero-boss-900.b243e28d8b.webp"); } .wx-bg { background-image: url("/img/hero-wx-900.d0dd452f41.webp"); } .watching-bg { background-image: url("/img/hero-watching-900.f5bf187b9a.webp"); } .levels-bg { background-image: url("/img/hero-levels-900.62e1e2a692.webp"); } }

/* Portrait phones: the boss and WX Ops sections show their plate whole as a band at the top with the text below it,
   instead of a cover crop that showed a slice of fuselage. */
@media (max-width: 860px) {
  #boss, #wx, #watching, .levels-hero { flex-direction: column; align-items: stretch; padding-top: 0; min-height: 0; }
  .boss-bg, .wx-bg, .watching-bg, .levels-bg { position: relative; inset: auto; width: 100%; aspect-ratio: 2 / 1; background-size: cover; background-position: 50% 50%; margin-bottom: 4px; }
  .boss-bg::after, .wx-bg::after, .watching-bg::after, .levels-bg::after { background: linear-gradient(180deg, rgba(8, 12, 24, 0) 0%, rgba(8, 12, 24, 0) 58%, var(--bg) 100%); }
}

/* Between the phone layout and the full bar the links are tight: smaller type, the sign-in link dropped from the bar (it is still in the footer). */
@media (min-width: 768px) and (max-width: 900px) { .top nav a { font-size: 14px; padding-inline: 8px; } .top nav .sign-in { display: none; } .brand img { width: 150px; } }

/* ---- the cookie banner (consent.js): fixed at the foot, never over the hero, no layout shift; Accept and Decline the same button ---- */
.consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-inline: auto; z-index: 60; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 18px 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.consent-banner[hidden] { display: none; }
/* Wide screens: bottom right, clear of the hero's form on the left (review D-094 F1: centered, its foot overlapped the email field and
   the Join button by 20 px at 1366x768). While it is open the page carries bottom padding, so on any width every form and link can
   be scrolled clear of it (the banner is about 212 px tall at 1366 px and 247 px at 390 px). */
@media (min-width: 900px) { .consent-banner { left: auto; margin-inline: 0; } }
body.consent-open { padding-bottom: 280px; }
/* consent.js moves the banner to the top, under the sticky header, when the foot would cover the hero's email field or Join button
   (review D-099 item 1: a 1024x768 laptop, a 390x720 phone); --consent-top is the header's height plus 12 px, set by the script. */
.consent-banner.at-top { top: var(--consent-top, 80px); bottom: auto; }
.consent-banner h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.01em; }
.consent-banner p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.consent-banner a { color: var(--accent-2); }
.consent-actions { display: flex; gap: 10px; margin-top: 14px; }
.consent-actions .btn { flex: 1 1 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; }
@media (max-width: 520px) { .consent-banner { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; } }
/* The payload note under the aircraft band: its gap was an inline style until 12 October 2026 (the site CSP forbids inline styles; the guard now refuses them). */
.fine.center.spaced { margin-top: 30px; }
.consent-banner h2:focus { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* ---- Season 1 poster wall (order D-330; the site-wayfix branch) ----
   Inside the boss flights section, under the intro line, where the four sample cards stood (Rich, 2 November 2026). Five across,
   three on a tablet, two on a phone; every tile is a 2:3 button whose picture carries width and height so nothing shifts. The hover and focus state lifts the tile 8 px with the
   site's blue as the border and glow (the site has no cyan token; the mockup's cyan is Rich's call), and slides the boss's line and
   the View poster pill up over the lower part; the "Boss n" label takes the same blue. Hover only where there is a real pointer;
   reduced motion keeps the overlay's fade and drops the lift. */
.poster-wall { margin-top: 36px; }
.poster-wall > .fine { margin: 0 0 14px; color: var(--muted); }
.poster-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 20px; }
.poster-tile { display: block; width: 100%; aspect-ratio: 2 / 3; margin: 0; padding: 0; position: relative; overflow: hidden; border: 2px solid rgba(143, 160, 196, 0.22); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 220ms var(--ease-out), border-color 150ms ease, box-shadow 220ms ease; will-change: transform; }
.poster-tile img { width: 100%; height: 100%; object-fit: cover; }
.poster-over { position: absolute; inset: auto 0 0; display: grid; gap: 10px; justify-items: start; padding: 48px 14px 14px; text-align: left; background: linear-gradient(180deg, rgba(8, 12, 24, 0) 0%, rgba(8, 12, 24, 0.84) 36%, rgba(8, 12, 24, 0.95) 100%); color: var(--text); font-size: 13.5px; line-height: 1.4; text-wrap: pretty; transform: translateY(100%); opacity: 0; transition: transform 260ms var(--ease-out), opacity 200ms ease; }
.poster-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--link); color: var(--bg); font-weight: 700; font-size: 13px; }
.poster-tile:focus-visible { outline: none; border-color: var(--link); box-shadow: 0 0 0 1px var(--link), 0 12px 36px rgba(127, 178, 255, 0.35); transform: translateY(-8px); }
.poster-tile:focus-visible .poster-over { transform: none; opacity: 1; }
.poster:focus-within .poster-n { color: var(--link); }
@media (hover: hover) and (pointer: fine) {
  .poster-tile:hover { border-color: var(--link); box-shadow: 0 0 0 1px var(--link), 0 12px 36px rgba(127, 178, 255, 0.35); transform: translateY(-8px); }
  .poster-tile:hover .poster-over { transform: none; opacity: 1; }
  .poster:hover .poster-n { color: var(--link); }
}
.poster-tile:active { transform: translateY(-8px) scale(0.985); }
.poster-cap { margin: 12px 0 0; display: grid; gap: 2px; }
.poster-n { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); transition: color 150ms ease; }
.poster-cap b { font-size: 16px; color: var(--text); }
@supports (animation-timeline: view()) { .poster-grid { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; } }
@media (max-width: 1024px) { .poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .poster-over { display: none; } }
/* The large poster: a modal dialog over the dimmed page, the picture at the page's height, the title and the line beside it,
   previous and next below them, a close button in the corner. No download, no share link. */
.poster-dialog { padding: 0; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); color: var(--text); max-width: min(94vw, 1040px); max-height: 94svh; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.poster-dialog::backdrop { background: rgba(8, 12, 24, 0.84); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.poster-dialog-in { position: relative; }
.poster-large { margin: 0; display: grid; grid-template-columns: auto minmax(220px, 300px); }
.poster-large img { display: block; height: min(88svh, 1536px); width: auto; max-width: 100%; background: #000; }
.poster-large figcaption { padding: 56px 24px 24px; display: grid; gap: 10px; align-content: start; }
.poster-dialog-name { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
.poster-dialog-line { margin: 0; color: var(--text-2); font-size: 15.5px; text-wrap: pretty; }
.poster-nav { display: flex; gap: 8px; margin-top: 12px; }
.poster-nav button, .poster-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; font: inherit; transition: background-color 150ms ease, var(--press); }
.poster-nav button:active, .poster-close:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .poster-nav button:hover, .poster-close:hover { background: rgba(127, 178, 255, 0.12); } }
.poster-close { position: absolute; top: 12px; right: 12px; }
@media (max-width: 760px) {
  .poster-large { grid-template-columns: minmax(0, 1fr); }
  .poster-large img { height: auto; width: 100%; max-height: 62svh; object-fit: contain; }
  .poster-large figcaption { padding: 18px 20px 20px; }
  .poster-dialog { max-width: 94vw; }
}
@media (prefers-reduced-motion: reduce) {
  .poster-tile, .poster-over, .poster-n, .poster-nav button, .poster-close { transition: none; }
  .poster-tile:hover, .poster-tile:focus-visible, .poster-tile:active { transform: none; }
  .poster-over { transition: opacity 200ms ease; }
}