/* ==========================================================================
   Further Sky — Cobalt night
   Type: Space Grotesk (wordmark, headings) · Inter (body) · IBM Plex Mono (labels, data)
   ========================================================================== */

:root {
  /* Night (dark sections) */
  --deep: #0B1A3F;          /* page background */
  --surface: #102252;       /* cards, alt sections */
  --border: #24407F;
  --void: #070D1F;          /* footer */
  --text: #F6F4EF;
  --text-2: #A9B8D6;
  --text-hero: #DCE4F2;     /* body copy over photos */

  /* Day (light sections) */
  --paper: #F6F4EF;
  --card-light: #FFFFFF;
  --line: #E2DDD1;
  --ink: #141C2E;
  --ink-2: #4E5A72;

  /* Brand accents */
  --cobalt: #1E4BA3;
  --trail: #FFE9B0;
  --horizon: #F2894A;       /* buttons, labels on dark */
  --horizon-hover: #F5A06B;
  --horizon-ink: #A64F1F;   /* orange text on light backgrounds (5:1) */

  /* Status */
  --good: #1F9D55;
  --warn: #E0A100;
  --crit: #D64545;

  /* Type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-body: 17px;
  --fs-small: 15.5px;
  --fs-label: 12px;

  /* Shape and space */
  --radius: 14px;
  --radius-sm: 10px;
  --gutter: 16px;
  --max: 1120px;
  --nav-h: 72px;
  --section-pad: 72px;
}
@media (min-width: 720px) { :root { --gutter: 32px; --section-pad: 96px; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--deep);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--trail); }
p { margin: 0 0 14px; }
section[id] { scroll-margin-top: var(--nav-h); }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 5.4vw, 64px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); max-width: 28ch; }
h3 { font-size: 19px; letter-spacing: -0.01em; }

/* Mono labels: one style everywhere */
.eyebrow, .label, .step-n, .plan-name, .stat, .tel-head, .profile-role, .nav a {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.eyebrow { color: var(--trail); margin-bottom: 16px; }
.label { color: var(--horizon); margin-bottom: 14px; }
.intro { color: var(--text-2); max-width: 62ch; }
.muted { color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--horizon); color: var(--deep); }
.btn-primary:hover { background: var(--horizon-hover); }
.btn-ghost { color: var(--text); border: 1px solid rgba(246,244,239,0.35); }
.btn-ghost:hover { border-color: var(--text); }
a:focus-visible { outline: 2px solid var(--trail); outline-offset: 3px; border-radius: 4px; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  /* Solid deep space so the bar reads the same over light and dark sections */
  background: var(--deep);
  border-bottom: 1px solid rgba(255,233,176,0.12);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.6);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* At the very top, the bar dissolves into the hero photo (set by a tiny script) */
.nav.at-top {
  background: linear-gradient(180deg, rgba(11,26,63,0.9) 0%, rgba(11,26,63,0.65) 55%, rgba(11,26,63,0) 100%);
  background-origin: border-box; /* otherwise the gradient repeats into the 1px border as a dark hairline */
  border-bottom-color: transparent;
  box-shadow: none;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 16px; }
.brand { display: flex; }
.brand img { width: 166px; height: auto; }
.nav nav { display: flex; gap: 28px; align-items: center; }
.nav a { color: var(--text); text-decoration: none; }
.nav a:hover, .nav a.nav-cta { color: var(--trail); }
@media (min-width: 720px) { .brand img { width: 196px; } }
@media (max-width: 959px) { .nav nav a:not(.nav-cta) { display: none; } }  /* tablets too: the links crowd the logo */

/* ---------- Hero: always fills the first screen ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;          /* mobile: excludes browser toolbars */
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 48px) 0 clamp(88px, 23vh, 280px);
  background: var(--deep) url("assets/hero-launch.jpg") center top / cover no-repeat;
  background-image: image-set(url("assets/hero-launch.webp") type("image/webp"), url("assets/hero-launch.jpg") type("image/jpeg"));
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,26,63,0) 45%, rgba(11,26,63,0.85) 100%),
    linear-gradient(90deg, rgba(11,26,63,0) 35%, rgba(11,26,63,0.55) 100%);
}
.hero-inner { position: relative; width: 100%; display: flex; justify-content: flex-end; }
.hero-copy { max-width: 580px; }
.lede { font-size: 18px; color: var(--text-hero); max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 719px) {
  .hero { background-position: 46% top; background-image: image-set(url("assets/hero-launch-1000.webp") type("image/webp"), url("assets/hero-launch.jpg") type("image/jpeg")); }
  .hero-shade { background: linear-gradient(180deg, rgba(11,26,63,0.05) 12%, rgba(11,26,63,0.72) 42%, rgba(11,26,63,0.92) 100%); }
}

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; }

/* Night sections with the console grid */
.section-alt {
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(169,184,214,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,184,214,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Day sections */
.section-light { background: var(--paper); color: var(--ink); }
.section-light h2, .section-light h3 { color: var(--ink); }
.section-light p, .section-light .intro { color: var(--ink-2); }
.section-light .label { color: var(--horizon-ink); }
.section-light a { color: var(--cobalt); }
.section-light a:focus-visible { outline-color: var(--cobalt); }

/* Cards: one recipe, two modes */
.card, .plan, .steps li, .telemetry, .profile {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 24px;
}
.section-light .card, .section-light .profile {
  background: var(--card-light);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(20,28,46,0.05);
}

/* ---------- Problem ---------- */
.grid-3 { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.section-light .stat { color: var(--cobalt); margin-bottom: 10px; }
.card p:last-child { margin: 0; font-size: var(--fs-small); }

/* ---------- Steps ---------- */
.steps {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { position: relative; background: rgba(11,26,63,0.65); }
/* HUD corner brackets */
.steps li::before, .steps li::after {
  content: ""; position: absolute; width: 12px; height: 12px; border: 0 solid var(--trail);
}
.steps li::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 4px; }
.steps li::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 4px; }
.step-n { display: block; color: var(--horizon); margin-bottom: 10px; }
.steps p { color: var(--text-2); margin: 0; font-size: var(--fs-small); }

/* ---------- Split layouts ---------- */
.split { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.checks { list-style: none; padding: 0; margin: 20px 0 0; }
.checks li { position: relative; padding: 7px 0 7px 26px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 12px; height: 2px; background: var(--horizon);
}
.section-light .checks li { color: var(--ink); }
.section-light .checks li::before { background: var(--horizon-ink); }

/* ---------- Telemetry table (always night, even on light sections) ---------- */
.telemetry { margin: 0; padding: 20px; overflow-x: auto; color: var(--text); }
.section-light .telemetry { box-shadow: 0 24px 48px -20px rgba(11,26,63,0.5); }
.tel-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--text); }
.tel-head .muted { color: var(--text-2); }
.telemetry table { width: 100%; border-collapse: collapse; font-size: 15px; }
.telemetry th {
  font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2); text-align: left;
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border);
}
.telemetry td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--text); }
.telemetry tr:last-child td { border-bottom: 0; }
.telemetry .mono { font-family: var(--mono); font-size: 13.5px; color: var(--text-2); }
.telemetry .t { color: var(--trail); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.dot.go { background: var(--good); box-shadow: 0 0 0 3px rgba(31,157,85,0.25); }
.dot.hold { background: var(--warn); box-shadow: 0 0 0 3px rgba(224,161,0,0.25); }
.dot.nogo { background: var(--crit); box-shadow: 0 0 0 3px rgba(214,69,69,0.25); }

/* ---------- Pricing ---------- */
.pricing { display: grid; gap: 16px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pricing { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { background: var(--deep); display: flex; flex-direction: column; }
.plan-featured { border: 2px solid var(--horizon); padding: 23px; }
.plan-name { color: var(--trail); margin-bottom: 10px; }
.price { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.price span { font-family: var(--body); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.plan p:last-of-type { color: var(--text-2); font-size: var(--fs-small); margin: 0; }

/* ---------- About / profile ---------- */
.profile { margin: 0; display: grid; gap: 22px; align-items: center; grid-template-columns: 1fr; padding: 20px; }
@media (min-width: 560px) { .profile { grid-template-columns: 200px minmax(0, 1fr); } }
.headshot { width: 100%; max-width: 260px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
.headshot-placeholder {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--deep);
  background-image:
    linear-gradient(rgba(169,184,214,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,184,214,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}
.headshot-placeholder span { font-family: var(--display); font-weight: 600; font-size: 64px; color: var(--paper); }
.profile figcaption p { margin: 0; }
.profile-name { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.section-light .profile-name { color: var(--ink); }
.section-light .profile-role { color: var(--horizon-ink); margin-top: 6px; }
.profile figcaption .profile-quote {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 16px; line-height: 1.55; font-style: italic;
}

/* ---------- Closing CTA ---------- */
.cta {
  padding: calc(var(--section-pad) + 16px) 0;
  background:
    linear-gradient(180deg, rgba(11,26,63,0.78), rgba(11,26,63,0.94)),
    url("assets/hero-launch.jpg") center 30% / cover no-repeat;
}
.cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-inner h2 { max-width: none; }
.cta-inner p:not(.eyebrow) { color: var(--text-hero); max-width: 56ch; margin-bottom: 28px; }

/* ---------- Footer ---------- */
.footer { background: var(--void); padding: 40px 0 48px; border-top: 1px solid var(--border); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-inner p { margin: 0; color: var(--text-2); font-size: 15px; }
.footer-inner a { color: var(--text); text-decoration: none; }
.footer-inner a:hover { color: var(--trail); }
.footer-inner .footer-note { width: 100%; font-size: 13px; padding-top: 16px; border-top: 1px solid rgba(36,64,127,0.5); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* Short landscape screens: tighten the hero so it still fits on load */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding: calc(var(--nav-h) + 12px) 0 24px; }
  .hero h1 { font-size: 30px; margin-bottom: 10px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .lede { font-size: 15px; margin-bottom: 0; }
  .hero-actions { margin-top: 14px; }
  .hero .btn { padding: 10px 16px; }
}

.nowrap { white-space: nowrap; }

/* ---------- Design pass 2 ---------- */
::selection { background: var(--trail); color: var(--deep); }

/* Nav CTA as an outlined pill */
.nav a.nav-cta {
  padding: 9px 14px; border: 1px solid rgba(255,233,176,0.55); border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
.nav a.nav-cta:hover { background: var(--trail); color: var(--deep); }

/* Section header: heading left, intro right on wide screens */
.section-head { display: grid; gap: 8px 48px; align-items: end; }
.section-head h2, .section-head .intro { margin-bottom: 0; }
@media (min-width: 1000px) { .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Problem cards: numbered */
.stat { display: flex; align-items: baseline; gap: 10px; }
.idx { color: var(--horizon-ink); font-weight: 500; }
.section-light .card { transition: transform .2s ease, box-shadow .2s ease; }
.section-light .card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(20,28,46,0.35); }

/* Telemetry: live indicator */
.live {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px;
  background: var(--good); box-shadow: 0 0 0 0 rgba(31,157,85,0.6); animation: pulse 2s infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,0.55); } 70% { box-shadow: 0 0 0 7px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } }

/* Pricing: badge and per-plan links pinned to the bottom */
.plan-featured { position: relative; }
.plan-badge {
  position: absolute; top: -12px; left: 22px; margin: 0;
  background: var(--horizon); color: var(--deep);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.plan p:last-of-type { margin-bottom: 20px; }
.plan-link {
  margin-top: auto; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--trail);
}
.plan-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.plan-featured .plan-link { color: var(--horizon); }

@media (prefers-reduced-motion: reduce) {
  .live { animation: none; }
  .nav { transition: none; }
  .section-light .card, .nav a.nav-cta { transition: none; }
}

/* ---------- Brighter rhythm ---------- */
/* Hero: lighter shading so more sky shows */
.hero-shade {
  background:
    linear-gradient(180deg, rgba(11,26,63,0) 50%, rgba(11,26,63,0.7) 100%),
    linear-gradient(90deg, rgba(11,26,63,0) 40%, rgba(11,26,63,0.45) 100%);
}
/* Night sections: a touch brighter cobalt */
.section-alt { background-color: #13296B; }
/* White variant to separate stacked light sections */
.section-white { background: #FFFFFF; }
.section-white .card, .section-white .plan:not(.plan-featured) { background: var(--paper); border-color: var(--line); }

/* Connects-to strip */
.strip { background: #FFFFFF; border-bottom: 1px solid var(--line); padding: 22px 0; color: var(--ink-2); }
.strip-inner { display: flex; align-items: center; gap: 12px 28px; }
.strip-label { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--horizon-ink); }
.strip-label { flex: none; }
/* Slow, endless scroll: two copies of the list move left by one copy's width, then loop */
.strip-marquee {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.strip-track { display: flex; width: max-content; animation: strip-scroll 32s linear infinite; }
.strip-marquee:hover .strip-track { animation-play-state: paused; }
@keyframes strip-scroll { to { transform: translateX(-50%); } }
.strip-list { list-style: none; margin: 0; padding: 0 40px 0 0; display: flex; gap: 40px; white-space: nowrap; }
@media (max-width: 719px) {
  .strip-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .strip-marquee { margin: 0 calc(-1 * var(--gutter)); }   /* run edge to edge on phones */
  .strip-track { animation-duration: 26s; }
}
/* Reduced motion: no autoscroll; the row stays on one line and can be swiped or scrolled by hand */
@media (prefers-reduced-motion: reduce) {
  .strip-marquee {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
            mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .strip-marquee::-webkit-scrollbar { display: none; }
  .strip-track { animation: none; }
  .strip-list[aria-hidden="true"] { display: none; }
  .strip-list { padding-right: 32px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 719px) {
  .strip-list { padding-left: var(--gutter); }
}
.strip-list li { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }

/* Pricing on white: light cards, featured card stays night */
.section-light .plan { color: var(--ink); }
.section-light .plan:not(.plan-featured) .plan-name { color: var(--horizon-ink); }
.section-light .plan:not(.plan-featured) .price span,
.section-light .plan:not(.plan-featured) p:last-of-type { color: var(--ink-2); }
.section-light .plan:not(.plan-featured) .plan-link { color: var(--cobalt); }
.section-light .plan-featured { background: var(--deep); color: var(--text); box-shadow: 0 24px 48px -24px rgba(11,26,63,0.6); }
.section-light .plan-featured .plan-name { color: var(--trail); }
.section-light .plan-featured .price { color: var(--text); }
.section-light .plan-featured p:last-of-type, .section-light .plan-featured .price span { color: var(--text-2); }
.section-light .plan-featured .plan-link { color: var(--horizon); }
.section-light .plan-badge { color: var(--deep); }

/* About now on night: the profile card stays light */
.profile { background: var(--card-light); border-color: var(--line); }
.profile-name { color: var(--ink); }
.profile .profile-role { color: var(--horizon-ink); margin-top: 6px; }
.profile figcaption .profile-quote { color: var(--ink-2); }
.about > div > p:not(.label) { color: var(--text-2); }

/* Dark button for light sections */
.btn-dark, .section-light .btn-dark { background: var(--deep); color: var(--text); margin-top: 24px; }
.btn-dark:hover, .section-light .btn-dark:hover { background: var(--cobalt); }
.btn-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--trail); margin-left: 6px; }

/* FAQ */
.faq-wrap { display: grid; gap: 32px 64px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 20px; color: var(--horizon-ink); transition: transform .2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
.faq details p { margin: 0 0 20px; max-width: 62ch; }

/* Skip link for keyboard users */
.skip { position: absolute; left: 16px; top: -48px; z-index: 20; background: var(--trail); color: var(--deep); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Phones: keep the shade behind the text (must follow the base .hero-shade above) */
@media (max-width: 719px) {
  .hero { padding-bottom: clamp(36px, 6svh, 64px); }   /* no empty band under the buttons */
  .hero .eyebrow { text-wrap: balance; }                /* two even lines instead of a lone last word */
  .hero-shade { background: linear-gradient(180deg, rgba(11,26,63,0.05) 12%, rgba(11,26,63,0.72) 42%, rgba(11,26,63,0.92) 100%); }
}

/* Over the photo, a soft shadow keeps nav links legible where the arc crosses them */
.nav.at-top a { text-shadow: 0 1px 2px rgba(11,26,63,0.9), 0 0 12px rgba(11,26,63,0.9); }
.nav.at-top a.nav-cta { text-shadow: none; background: rgba(11,26,63,0.55); }
.nav.at-top a.nav-cta:hover { background: var(--trail); }

/* ==========================================================================
   Motion — only when <html class="motion"> (set in <head>, off for reduced motion)
   ========================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Hero: photo settles in, then the copy launches upward line by line */
.motion .hero { overflow: hidden; }
.motion .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: inherit; animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both;
}
.hero-shade, .hero-inner { z-index: 1; }
.motion .hero-copy > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.motion .hero-copy > :nth-child(1) { animation-delay: .25s; }
.motion .hero-copy > :nth-child(2) { animation-delay: .4s; }
.motion .hero-copy > :nth-child(3) { animation-delay: .55s; }
.motion .hero-copy > :nth-child(4) { animation-delay: .7s; }
.motion .nav-inner { animation: drop .7s ease-out .1s both; }

/* Scroll reveal */
.motion .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion .reveal.in { opacity: 1; transform: none; }

/* Steps: HUD brackets lock on after the card appears */
.motion .steps li.reveal::before { transform: translate(-8px, -8px); opacity: 0; transition: transform .5s ease, opacity .5s ease; transition-delay: calc(var(--i, 0) * 90ms + .35s); }
.motion .steps li.reveal::after  { transform: translate(8px, 8px);  opacity: 0; transition: transform .5s ease, opacity .5s ease; transition-delay: calc(var(--i, 0) * 90ms + .35s); }
.motion .steps li.reveal.in::before, .motion .steps li.reveal.in::after { transform: none; opacity: 1; }

/* Telemetry rows scan in after the panel */
.motion .telemetry tbody tr { opacity: 0; transform: translateX(-8px); transition: opacity .45s ease, transform .45s ease; }
.motion .telemetry.in tbody tr { opacity: 1; transform: none; }
.motion .telemetry.in tbody tr:nth-child(1) { transition-delay: .25s; }
.motion .telemetry.in tbody tr:nth-child(2) { transition-delay: .37s; }
.motion .telemetry.in tbody tr:nth-child(3) { transition-delay: .49s; }
.motion .telemetry.in tbody tr:nth-child(4) { transition-delay: .61s; }

/* ==========================================================================
   Contact form (closing section)
   ========================================================================== */
.cta-grid { display: grid; gap: 40px 64px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .cta-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.cta-copy h2 { max-width: none; }
.cta-copy > p:not(.eyebrow) { color: var(--text-hero); max-width: 48ch; }
.cta-points { list-style: none; padding: 0; margin: 22px 0 0; }
.cta-points li { position: relative; padding: 6px 0 6px 26px; color: var(--text); }
.cta-points li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 2px; background: var(--horizon); }

.contact {
  background: var(--card-light); color: var(--ink);
  border-radius: 16px; padding: 28px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  display: grid; gap: 16px;
}
@media (max-width: 559px) { .contact { padding: 20px; } }
.field-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); padding: 0;
}
.field em { font-style: normal; text-transform: none; letter-spacing: 0; font-family: var(--body); color: #8A93A6; margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field textarea { resize: vertical; min-height: 88px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field input::placeholder, .field textarea::placeholder { color: #9AA2B3; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background-color: #FFFFFF; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(30,75,163,0.18);
}
.field.invalid input { border-color: var(--crit); box-shadow: 0 0 0 3px rgba(214,69,69,0.15); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: all .15s ease;
}
.chip input:checked + span { background: var(--deep); border-color: var(--deep); color: var(--text); }
.chip input:focus-visible + span { outline: 2px solid var(--cobalt); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-submit { border: 0; cursor: pointer; width: 100%; padding: 15px 20px; font-size: 16px; margin-top: 4px; }
.btn-submit[disabled] { opacity: .6; cursor: progress; transform: none; }
.form-status { margin: 0; font-size: 15px; min-height: 1px; }
.form-status.ok { color: var(--good); font-weight: 600; }
.form-status.err { color: var(--crit); }
.contact.sent > *:not(.form-done) { display: none; }
.form-done { text-align: center; padding: 24px 8px; }
.form-done h3 { color: var(--ink); font-size: 22px; }
.form-done p { color: var(--ink-2); margin: 0; }

/* Small phones: keep the logo and the header button on one line */
.nav-cta { white-space: nowrap; }
@media (max-width: 399px) {
  .brand img { width: 144px; }
  .nav .nav-cta { padding-left: 12px; padding-right: 12px; letter-spacing: 0.08em; }
}

/* First screen, edge sizes -------------------------------------------- */
/* Small or short phones: keep the headline and both buttons above the fold */
@media (max-width: 359px) and (orientation: portrait), (max-width: 719px) and (max-height: 640px) and (orientation: portrait) {
  .hero { padding-top: calc(var(--nav-h) + 20px); }
  .hero h1 { font-size: 31px; margin-bottom: 12px; }
  .hero .eyebrow { margin-bottom: 10px; }
  .lede { font-size: 16px; }
  .hero-actions { margin-top: 18px; gap: 10px; }
  .hero .btn { padding: 12px 18px; }
}
/* Big monitors: scale the hero copy up so it doesn't float small in a huge frame */
@media (min-width: 1800px) and (min-height: 1000px) {
  .hero-copy { max-width: 700px; }
  .hero h1 { font-size: 78px; }
  .lede { font-size: 20px; }
  .hero .btn { font-size: 17px; padding: 15px 24px; }
}
/* 1440p and ultrawide: widen the layout and scale the header and hero to match */
@media (min-width: 2200px) and (min-height: 1200px) {
  :root { --max: 1480px; --nav-h: 92px; }
  .brand img { width: 250px; }
  .nav nav { gap: 36px; }
  .nav a { font-size: 13px; }
  .hero-copy { max-width: 860px; }
  .hero h1 { font-size: 96px; }
  .lede { font-size: 23px; }
  .hero .eyebrow { font-size: 14px; }
  .hero .btn { font-size: 19px; padding: 18px 28px; }
}
/* Small phones: the telemetry table drops the SKU code so every column fits without sideways scrolling */
@media (max-width: 400px) {
  .telemetry { padding: 16px; }
  .telemetry th:first-child, .telemetry td:first-child { display: none; }
  .telemetry table { font-size: 14px; }
  .telemetry td { padding-right: 8px; }
  .tel-head { flex-wrap: wrap; row-gap: 2px; }
}
@media (max-width: 340px) {
  .telemetry { padding: 14px; }
  .telemetry table { font-size: 13px; }
  .telemetry td { padding-right: 6px; }
}
/* Big monitors: scale everything below the first screen by the same factor, keeping the
   column edges lined up with the header (inner widths are divided by the zoom). */
@media (min-width: 1800px) and (min-height: 1000px) {
  main > section:not(.hero), .footer {
    zoom: 1.12;
    --max: calc(1120px / 1.12); --gutter: calc(32px / 1.12); --nav-h: calc(72px / 1.12);
  }
}
@media (min-width: 2200px) and (min-height: 1200px) {
  main > section:not(.hero), .footer {
    zoom: 1.3;
    --max: calc(1480px / 1.3); --gutter: calc(32px / 1.3); --nav-h: calc(92px / 1.3);
  }
}

/* Form fine print, footer links */
.form-legal { margin: 0; font-size: 13px; color: var(--ink-2); }
.form-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }

/* Legal and utility pages */
.page-top { padding-top: calc(var(--nav-h) + 56px); }
.legal { max-width: 70ch; }
.legal h1 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 8px; }
.legal .updated { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--horizon-ink); margin: 0 0 32px; }
.legal h2 { font-size: 22px; margin: 40px 0 10px; max-width: none; }
.legal p, .legal li { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.65; }
.legal ul { padding-left: 20px; margin: 0 0 16px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--cobalt); }
.lost .hero-inner { justify-content: flex-start; }