/* Stratus site (company page + aircraft pages share this sheet). House style: black canvas, tight bold grotesk (Inter Tight stands in for the posters' Helvetica Bold),
   cream (237, 236, 227) for the big type and cards, yellow only for focus. Layout follows the reference product pages:
   media inset by one gutter, small-caps labels, numbered tabs. */
:root {
  --black: #000;
  --ink: #0b0b0b;
  --white: #fff;
  --cream: #edece3;
  --cream-ink: #141414;
  --dim: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.16);
  --yellow: #f0be28;
  --gutter: clamp(16px, 2.3vw, 32px);
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tight: -0.065em;
  color-scheme: dark;
}
/* the site is dark by design (the brand), in both OS themes */
:root[data-theme="light"], :root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--black); color: var(--white);
  font-family: var(--font); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

.skip { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--black); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.label--dim { color: var(--dim); }
.dim { color: var(--dim); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50; height: 72px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter); background: var(--black);
}
.nav__logo img { height: 24px; width: auto; }
.nav__links { display: flex; gap: 40px; font-size: 15px; font-weight: 500; }
.nav__links a, .nav__cta { opacity: 0.92; transition: opacity 0.15s; }
.nav__links a:hover, .nav__cta:hover { opacity: 0.6; }
.nav__cta { justify-self: end; font-size: 15px; font-weight: 500; }
.nav__menu { display: none; justify-self: end; background: none; border: 0; color: var(--white); font: 500 15px var(--font); padding: 8px 0; cursor: pointer; }
.drawer { position: fixed; inset: 72px 0 0; z-index: 49; background: var(--black); padding: 24px var(--gutter); display: flex; flex-direction: column; }
.drawer[hidden] { display: none; }
.drawer a { font-size: 34px; font-weight: 700; letter-spacing: -0.04em; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* Hero: three stacked layers on one frame, each object-fit: cover from the same centre, so the matte stays registered */
.hero { padding: 0 var(--gutter); }
.hero__frame { position: relative; height: calc(100svh - 72px - var(--gutter)); min-height: 520px; max-height: 1100px; overflow: hidden; background: #1c2128; }
.hero__frame picture, .hero__bg, .hero__cut { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg, .hero__cut { object-fit: cover; object-position: 50% 50%; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.38) 100%); }
.hero__word {
  position: absolute; left: 0.02em; bottom: 0.2em; z-index: 1;
  font-size: clamp(120px, 23vw, 420px); font-weight: 700; line-height: 0.8; letter-spacing: -0.075em;
  color: var(--cream); white-space: nowrap; padding-left: 0.04em;
}
/* an aircraft name ("Stratus-1") is longer than the company word, so it runs smaller to keep the same width */
.hero__word.hero__word--long { font-size: clamp(96px, 18.5vw, 340px); }
.hero__frame > picture:last-of-type { z-index: 2; }
.hero__tags {
  position: absolute; z-index: 3; left: calc(var(--gutter) * 0.8); width: 70%; bottom: 18px;
  display: flex; justify-content: space-between;
  margin: 0; padding: 0; list-style: none; font-size: clamp(14px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.02em; color: var(--cream);
}

/* Intro */
.intro {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: 32px; align-items: start;
  padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(48px, 6vw, 88px);
}
.intro__meta { display: grid; gap: 10px; }
.intro__lede { font-size: clamp(24px, 2.9vw, 44px); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; max-width: 26ch; }
.intro__down { font-size: 28px; line-height: 1; padding: 4px; }

.wide { padding: 0 var(--gutter); }
.wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 55%; }

/* Section heads */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 28px; }
.section-head h2, .status h2 { font-size: clamp(34px, 4.2vw, 64px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; }
.specs, .missions, .build, .posters, .tiers { padding: clamp(72px, 9vw, 140px) var(--gutter) 0; }

/* Spec cards: cream, one clipped corner */
.specs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  margin: 0; background: var(--cream); color: var(--cream-ink); padding: 22px 22px 26px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  display: flex; flex-direction: column;
}
.card__title { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; margin: 18px 0 22px; }
.card dl { margin: 0; margin-top: auto; }
.card dl div { border-top: 1px solid rgba(0,0,0,0.25); padding: 9px 0 14px; }
.card dt { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.card dd { margin: 2px 0 0; font-size: 15px; color: #4a4a46; }

/* Mission mosaic */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #1c2128; }
.tile--wide { grid-column: span 2; aspect-ratio: auto; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0) 55%); }
.tile:hover img { transform: scale(1.035); }
.tile__text { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; display: grid; gap: 6px; }
.tile__text strong { font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.tile__text span { font-size: 15px; max-width: 42ch; color: rgba(255,255,255,0.85); }

/* Build tabs */
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tabs button {
  background: none; border: 0; color: var(--dim); font: 500 15px var(--font); padding: 0 0 12px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button[aria-selected="true"] { color: var(--white); border-color: var(--white); }
.panel {
  position: relative; background: var(--cream); color: var(--cream-ink); min-height: 440px;
  display: grid; grid-template-columns: 120px 1fr minmax(0, 1.05fr); gap: 32px; padding: 28px;
}
.panel[hidden] { display: none; }
.panel__count { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.panel__body { display: grid; align-content: start; gap: 14px; }
.panel__text { font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; max-width: 24ch; }
.panel img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; align-self: start; }
.panel__num { position: absolute; left: 22px; bottom: 6px; font-size: clamp(96px, 11vw, 168px); font-weight: 500; line-height: 1; letter-spacing: -0.06em; }

/* Poster strip */
.strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.strip img { height: clamp(300px, 36vw, 520px); width: auto; flex: none; scroll-snap-align: start; }

/* Status: cream band, like the reference's news band */
.status { margin-top: clamp(72px, 9vw, 140px); background: var(--cream); color: var(--cream-ink); padding: clamp(56px, 7vw, 104px) var(--gutter); }
.status__head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid rgba(0,0,0,0.35); }
.status__note { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -0.015em; max-width: 44ch; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.steps li { display: grid; gap: 6px; align-content: start; padding: 22px 20px 8px 0; border-top: 3px solid transparent; margin-top: -2px; color: #6b6b66; }
.steps li strong { font-size: 20px; letter-spacing: -0.03em; color: var(--cream-ink); }
.steps li span:last-child { font-size: 15px; max-width: 24ch; }
.steps__n { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; }
.steps li.done { border-color: var(--cream-ink); }
.steps li.now { border-color: var(--cream-ink); }
.steps li.now .steps__n::after { content: " · now"; }
.steps li:not(.done):not(.now) strong { color: #6b6b66; }

/* Tiers + form */
.tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier { border: 1px solid var(--line); padding: 24px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.tier h3 { font-size: clamp(36px, 3.6vw, 56px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; }
.tier p { color: rgba(255,255,255,0.75); max-width: 34ch; }
.signup { margin-top: 56px; max-width: 680px; }
.signup__hp { position: absolute; left: -9999px; }
.signup__label { display: block; font-size: clamp(26px, 2.8vw, 40px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin-bottom: 20px; }
.signup__row { display: flex; gap: 10px; }
.signup input[type="email"] {
  flex: 1; min-width: 0; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: var(--white);
  font: 400 17px var(--font); padding: 14px 16px; border-radius: 0;
}
.signup input::placeholder { color: rgba(255,255,255,0.4); }
.signup button { background: var(--white); color: var(--black); border: 0; font: 600 16px var(--font); padding: 0 24px; cursor: pointer; border-radius: 999px; white-space: nowrap; }
.signup button:hover { background: var(--cream); }
.signup__fine { margin-top: 12px; font-size: 14px; color: var(--dim); }

/* Footer */
.foot { margin-top: clamp(96px, 11vw, 160px); padding: 48px var(--gutter) 28px; border-top: 1px solid var(--line); }
.foot__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot__top > img { height: 30px; width: auto; }
.foot__cols { display: flex; gap: clamp(40px, 8vw, 120px); }
.foot__cols div { display: grid; gap: 8px; align-content: start; }
.foot__cols .label { margin-bottom: 8px; }
.foot__cols a { font-size: 15px; }
.foot__cols a:hover { opacity: 0.6; }
.foot__bottom { margin-top: 72px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.foot__flag { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Company page ---------- */
.fleet, .approach { padding: clamp(72px, 9vw, 140px) var(--gutter) 0; }

/* Aircraft feature tile */
.feature { position: relative; display: block; overflow: hidden; aspect-ratio: 21 / 9; background: #1c2128; }
.feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(.2,.7,.2,1); }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.66), rgba(0,0,0,0) 55%); }
.feature:hover img { transform: scale(1.025); }
.feature__text { position: absolute; z-index: 1; left: 28px; right: 120px; bottom: 26px; display: grid; gap: 10px; }
.feature__text strong { font-size: clamp(56px, 8vw, 132px); font-weight: 700; letter-spacing: -0.065em; line-height: 0.85; color: var(--cream); }
.feature__text > span:last-child { font-size: 17px; max-width: 46ch; color: rgba(255,255,255,0.86); }
.feature__go { position: absolute; z-index: 1; right: 28px; bottom: 22px; font-size: 40px; line-height: 1; transition: transform 0.3s; }
.feature:hover .feature__go { transform: translateX(6px); }
.feature__meta { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.feature__meta div { border-top: 1px solid var(--line); padding: 14px 16px 0 0; margin-top: 16px; }
.feature__meta dt { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.feature__meta dd { margin: 4px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }

/* Company page: aircraft and ground station side by side, each a square tile with its own spec row */
.fleet__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.fleet__kind { margin: 0 0 12px; }
.fleet__pair .feature { aspect-ratio: 1 / 1; }
.fleet__pair .feature__text { right: 80px; }
.fleet__pair .feature__text strong { font-size: clamp(56px, 6.4vw, 112px); }
.fleet__pair .feature__text > span:last-child { font-size: 16px; max-width: 40ch; }
.fleet__pair .feature__meta { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) {
  .fleet__pair { grid-template-columns: 1fr; gap: 56px; }
  .fleet__pair .feature { aspect-ratio: 16 / 10; }
  .fleet__pair .feature__meta { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 800px) {
  .fleet__pair .feature { aspect-ratio: 4 / 5; }
  .fleet__pair .feature__text { right: 18px; }
  .fleet__pair .feature__meta { grid-template-columns: 1fr 1fr; }
  /* the tall tile shows the map's full height with the aircraft 57 % down, behind the text; scaling from the
     bottom edge lifts it to about 42 % */
  .feature--app img { transform: scale(1.35); transform-origin: 47% 100%; }
}

/* Manifesto: one huge centred line, like the reference's "Autonomy for every mission" */
.manifesto { padding: clamp(110px, 15vw, 240px) var(--gutter); text-align: center; }
.manifesto p { font-size: clamp(52px, 9.4vw, 168px); font-weight: 700; letter-spacing: -0.065em; line-height: 0.86; text-transform: uppercase; color: var(--cream); }

/* Approach rows */
.rows { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 32px; padding: 26px 0 40px; border-top: 1px solid var(--line); }
.row h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.row__short { font-size: 17px; font-weight: 500; }
.row__long { color: rgba(255,255,255,0.72); max-width: 52ch; }

/* Journal: cream band */
.journal { margin-top: clamp(96px, 11vw, 160px); background: var(--cream); color: var(--cream-ink); padding: clamp(56px, 7vw, 104px) var(--gutter); }
.journal__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.35); }
.journal h2 { font-size: clamp(34px, 4.2vw, 64px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; }
.journal__head a:hover { opacity: 0.6; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post { display: grid; gap: 12px; align-content: start; padding-top: 24px; }
.post time { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b66; }
.post h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; }
.post p { color: #4a4a46; max-width: 40ch; }

/* Two-up poster panels */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo__panel { display: grid; gap: 24px; align-content: start; padding: clamp(24px, 3vw, 44px) var(--gutter) clamp(32px, 4vw, 56px); }
.duo__panel--olive { background: #4b4e3d; }
.duo__panel--steel { background: #8b8f8d; color: var(--cream-ink); }
.duo__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid currentColor; }
.duo__head strong { font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.duo__panel img { width: min(100%, 440px); aspect-ratio: 900 / 1343; justify-self: center; box-shadow: 0 24px 60px rgba(0,0,0,0.35); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.duo__panel:hover img { transform: translateY(-6px); }
.duo__note { font-size: 17px; max-width: 40ch; }

/* Updates + contact */
.reach { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); padding: clamp(72px, 9vw, 140px) var(--gutter) 0; }
.reach .signup { margin-top: 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.contact__grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.contact__grid input, .contact__grid textarea {
  background: transparent; border: 1px solid rgba(255,255,255,0.4); color: var(--white); border-radius: 0;
  font: 400 17px var(--font); letter-spacing: 0; text-transform: none; padding: 12px 14px; resize: vertical;
}
.contact__msg { grid-column: 1 / -1; }
.contact .signup__row button { padding: 14px 28px; }
.contact__grid[hidden], .signup__row[hidden] { display: none; }

@media (max-width: 1000px) {
  .row { grid-template-columns: 1fr 2fr; }
  .row__long { grid-column: 2; }
  .reach { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .feature { aspect-ratio: 4 / 5; }
  .feature__text { left: 18px; right: 18px; bottom: 20px; }
  .feature__go { display: none; }
  .feature__meta { grid-template-columns: 1fr 1fr; }
  .hero__word.hero__word--long { font-size: 24vw; }
  .row { grid-template-columns: 1fr; gap: 10px; padding-bottom: 28px; }
  .row__long { grid-column: auto; }
  .journal__head { flex-direction: column; gap: 10px; }
  .posts { grid-template-columns: 1fr; gap: 8px; }
  .duo { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
}

/* Scroll reveal (added by main.js only when motion is OK) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Tablet */
@media (max-width: 1000px) {
  .panel { grid-template-columns: 1fr 1fr; }
  .panel__count { grid-column: 1 / -1; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 8px; }
}
/* Phone */
@media (max-width: 800px) {
  .nav { grid-template-columns: 1fr auto; height: 64px; }
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }
  .drawer { inset: 64px 0 0; }
  .hero__frame { height: calc(100svh - 64px - var(--gutter)); min-height: 480px; }
  .hero__bg, .hero__cut { object-position: 42% 50%; }
  .hero__word { font-size: 31vw; bottom: 0.42em; }
  .hero__tags { bottom: 16px; font-size: 14px; }
  .intro { grid-template-columns: 1fr; gap: 20px; }
  .intro__down { display: none; }
  .wide img { aspect-ratio: 4 / 3; }
  .section-head { flex-direction: column; gap: 8px; }
  .specs__grid, .mosaic, .tiers__grid { grid-template-columns: 1fr; }
  .tile--wide { grid-column: auto; aspect-ratio: 4 / 3; }
  .panel { grid-template-columns: 1fr; gap: 20px; padding: 20px 20px 120px; min-height: 0; }
  .panel img { max-height: 260px; }
  .status__head { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-top: 0; border-left: 3px solid transparent; padding: 14px 0 14px 16px; margin: 0; }
  .signup__row { flex-direction: column; }
  .signup button { padding: 14px 24px; }
  .foot__bottom { flex-direction: column; }
}

/* ---------- Anvil page (ground station) ---------- */
:root { --caution: #ff8a1f; --warning: #ff3b30; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }

/* Hero: meta row, the huge word, then the window in the HUD's yellow corner brackets */
.app-hero { padding: clamp(28px, 4vw, 56px) var(--gutter) 0; }
.app-hero__meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.app-hero__word {
  font-size: clamp(120px, 27vw, 500px); font-weight: 700; line-height: 0.78; letter-spacing: -0.05em;
  color: var(--cream); margin: clamp(18px, 3vw, 40px) 0 clamp(28px, 4vw, 56px) -0.05em;
}
.shot { margin: 0; }
.shot__frame { position: relative; display: block; padding: clamp(10px, 1.4vw, 20px); }
.shot__frame img { width: 100%; border: 1px solid var(--line); }
.shot__corner { position: absolute; width: clamp(18px, 2.4vw, 36px); height: clamp(18px, 2.4vw, 36px); border: 0 solid var(--yellow); }
.shot__corner--tl { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; }
.shot__corner--tr { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px; }
.shot__corner--bl { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px; }
.shot__corner--br { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }
.shot__cap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--dim); }
.shot__cap .mono { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-size: 12px; }
.shot__cap .mono::before { content: ""; width: 9px; height: 9px; background: var(--yellow); }

/* Dark cockpit: a big two-line statement and the four row states, drawn like Anvil's systems list */
.cockpit { padding: clamp(72px, 9vw, 140px) var(--gutter) 0; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.cockpit__line { font-size: clamp(40px, 5vw, 88px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; color: var(--cream); }
.cockpit__line span { color: var(--warning); }
.cockpit__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cockpit__rows li {
  display: grid; grid-template-columns: 14px 64px 1fr; column-gap: 14px; row-gap: 4px; align-items: center;
  padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--line); background: var(--ink); border-left: 3px solid transparent; color: rgba(255,255,255,0.5);
}
.cockpit__rows strong { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: rgba(255,255,255,0.85); }
.cockpit__rows span:not(.sq) { font-size: 14px; }
.cockpit__rows em { grid-column: 2 / -1; font-style: normal; font-size: 14px; color: rgba(255,255,255,0.62); }
.cockpit__rows .sq { width: 11px; height: 11px; border: 1.5px solid currentColor; }
.cockpit__rows .caution { border-left-color: var(--caution); color: var(--caution); background: rgba(255,138,31,0.08); }
.cockpit__rows .warning { border-left-color: var(--warning); color: var(--warning); background: rgba(255,59,48,0.10); }
.cockpit__rows .caution strong, .cockpit__rows .warning strong { color: currentColor; }
.cockpit__rows .caution .sq, .cockpit__rows .warning .sq { background: currentColor; }
.cockpit__rows .none { color: rgba(255,255,255,0.3); }
.cockpit__rows .none strong { color: rgba(255,255,255,0.35); }
.cockpit__rows .none .sq { border-style: dashed; }
@media (prefers-reduced-motion: no-preference) {
  .cockpit__rows .warning.reveal.in { animation: blink3 0.36s steps(1) 0.5s 3; }
}
@keyframes blink3 { 50% { background: rgba(255,59,48,0.32); } }

/* Feature panels show whole screenshots: contained on black, not cropped */
.panel--shot img { object-fit: contain; background: var(--black); border: 1px solid #000; max-height: 420px; }

/* Text-only spec cards */
.card__big { font-size: clamp(36px, 3.6vw, 56px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; margin: 34px 0 40px; }
.wide--shot { padding-top: clamp(72px, 9vw, 140px); }
.wide--shot img { aspect-ratio: auto; border: 1px solid var(--line); }
.steps.steps--four { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .cockpit { grid-template-columns: 1fr; }
  .steps.steps--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
  .app-hero__word { font-size: 34vw; }
  .shot__cap { flex-direction: column; gap: 6px; }
  .steps.steps--four { grid-template-columns: 1fr; }
}
/* the app's screen in a feature tile: zoomed into the map (own-ship brackets and the yellow leg), so the word sits on
   imagery, not on panels of small text; the full window is on the Anvil page */
.feature--app::after { background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0) 60%), linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0) 55%); }