/* ==========================================================================
   ISR ScudRunner — landing page
   One page, one stylesheet, no build step. This sheet is the canonical source
   of the shared design tokens — the bento language of Barlow + IBM Plex Mono
   on a #006CFC accent. site/assets/css/site.css deliberately carries the same
   token names and values so the two sites read as one family; port token
   changes from here to there, not the other way round. The two roots stay
   separate files with separate deploys regardless.

   Written mobile-first. The design canvas has a 1440px artboard and a 390px
   artboard; folding the narrow one in as the base and widening from it avoids
   having to unwind fixed pixel widths at every breakpoint.

   Sections: Fonts → Design tokens → Reset → Type → Components → Layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted, latin subset, from Google Fonts:
   https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600
   The page makes zero external requests, which is a hard invariant of this
   repo; re-download from those URLs if a weight is ever added.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Design tokens — measured off the app's own bento styling
   -------------------------------------------------------------------------- */

:root {
  --accent: #006cfc;
  --accent-dark: #0052c4;
  --ink: #0a0c14;
  --ink-soft: #3c4457;
  --grey: #78839b;
  --rim: #e4e7ee;
  --rim-soft: #edf0f5;
  --surface: #ffffff;
  --dark: #0a1324;
  --dark-rim: #22304a;
  --dark-ink: #9aa8c0;
  --dark-grey: #6e7f9e;
  --vfr: #1e913c;
  --error: #b3261e;

  --font-display: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
    system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: 20px;
  --radius-card: 18px;
  --radius-control: 13px;

  /* Displayed screenshot widths. The masters are 1520x3068, so these are the
     widths build_web_images.py encodes against — change both together. */
  --shot-hero: 262px;
  --shot-feature: 277px;
  --shot-grid: 144px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: linear-gradient(180deg, #f5f6f9 0%, #edf0f5 46%, #e7ecf3 100%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-dark);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

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

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0;
}

.mono--plain {
  text-transform: none;
  letter-spacing: 0.06em;
}

.mono--accent {
  color: var(--accent);
}

.h1,
.h2,
.h3 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;
}

.h1 {
  font-weight: 700;
  /* 44px at 375, 78px at 1440 */
  font-size: clamp(2.75rem, 2rem + 3.19vw, 4.875rem);
  line-height: 1.02;
  letter-spacing: -0.021em;
}

.h2 {
  font-weight: 700;
  /* 30px at 375, 42px at 1440 */
  font-size: clamp(1.875rem, 1.61rem + 1.13vw, 2.625rem);
  line-height: 1.09;
  letter-spacing: -0.017em;
}

.h3 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.body-text {
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.body-text strong {
  color: var(--ink);
  font-weight: 600;
}

.small {
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
  margin: 0;
}

.inline-code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

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

.card {
  background: var(--surface);
  border: 1px solid var(--rim);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(10, 19, 36, 0.04),
    0 14px 32px -18px rgba(10, 19, 36, 0.18);
}

.rule {
  height: 1px;
  background: var(--rim);
  border: 0;
  margin: 0;
}

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 20px -8px rgba(0, 108, 252, 0.55);
}

.btn:hover {
  color: #ffffff;
  filter: brightness(1.06);
}

.btn[disabled] {
  filter: grayscale(0.4);
  cursor: progress;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--rim);
  color: var(--ink);
}

.btn-ghost:hover {
  color: var(--ink);
  background: #ffffff;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(30, 145, 60, 0.1);
  color: var(--vfr);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* A screenshot plus the mono breadcrumb naming where in the app it lives. */
.shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* The screenshots' shadow is cast by a box behind the image, not by the image.
   Neither of the obvious ways works, because the masters carry a transparent
   surround - a uniform 13px in a 352px-wide shot, so 3.75% of the width and
   1.86% of the height - so the <img> box is wider than the phone in it:

     - filter: drop-shadow() follows the alpha exactly and looks right, but iOS
       Safari rasterises it against the element's rect instead, painting a flat
       grey block over that surround until a pinch-zoom forces a re-raster;
     - box-shadow on the <img> is clipped to the border box, so it stops ~3%
       short of the frame and rings the phone in a hard-edged halo.

   An empty box inset to the silhouette has neither problem: it is an ordinary
   rounded rect, so nothing consults the alpha channel and nothing is clipped
   in the wrong place. The inset and radius are the frame's own geometry
   measured off the masters, and all twelve share one surround and one aspect
   ratio, so the numbers hold at every --shot-* width. */
.shot picture {
  position: relative;
  isolation: isolate;
}

.shot picture::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.9% 3.8%;
  border-radius: 15.4% / 7.3%;
  box-shadow: 0 22px 38px rgba(10, 19, 36, 0.22);
}

.shot--hero img {
  width: var(--shot-hero);
}

.shot--feature img {
  width: var(--shot-feature);
}

.shot--grid img {
  width: var(--shot-grid);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--ink);
}

.wordmark sup {
  font-size: 9px;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* One page of anchors does not earn a drawer: below 900px the section links
   drop out — the footer lists every one of them — and only the beta button
   stays. Nothing to trap focus in, and no JS. */
.masthead__links {
  display: none;
  align-items: center;
  gap: 30px;
}

.masthead__links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}

.masthead__links a:hover {
  color: var(--accent);
}

.masthead__cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  background: var(--accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.masthead__cta:hover {
  color: #ffffff;
  filter: brightness(1.06);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 42px;
  padding-bottom: 46px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow__dash {
  width: 24px;
  height: 1px;
  background: #c9d0dc;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 4px;
}

.hero__actions .btn,
.hero__actions .btn-ghost {
  width: 100%;
}

.meta-list {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.meta-list__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c1c9d6;
}

.hero__shot {
  padding-top: 18px;
}

/* --------------------------------------------------------------------------
   Fact strip
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 8px;
  text-align: center;
}

.fact:nth-child(-n + 2) {
  border-bottom: 1px solid var(--rim-soft);
}

.fact:nth-child(odd) {
  border-right: 1px solid var(--rim-soft);
}

.fact__value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

/* "NOAA · NWS · FAA" is a phrase, not a number, and cannot hold the same size
   in half a phone screen. */
.fact__value--sources {
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   Feature sections
   -------------------------------------------------------------------------- */

.feature {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 56px;
}

.feature__prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 2px;
}

.callout .body-text {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   "Also on board" grid
   -------------------------------------------------------------------------- */

.also {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 56px;
}

.also__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.also__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.also__item .shot {
  gap: 0;
}

.also__caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
}

.also__caption .h3 {
  font-size: 17px;
}

/* --------------------------------------------------------------------------
   Dark principles band
   -------------------------------------------------------------------------- */

.principles {
  background: var(--dark);
  padding: 54px 0;
}

.principles__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.principles__head {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 760px;
}

.principles__head .h2 {
  color: #ffffff;
}

.principles__list {
  display: grid;
  gap: 24px;
}

.principle {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--dark-rim);
}

.principle .h3 {
  color: #ffffff;
}

.principle .body-text {
  color: var(--dark-ink);
}

.principle .body-text .inline-code {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Beta CTA and its form
   -------------------------------------------------------------------------- */

.beta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 56px;
  padding-bottom: 52px;
}

.beta__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.beta-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  margin-top: 4px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--rim);
  border-radius: 11px;
  background: #fbfcfe;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  background: #ffffff;
}

/* The honeypot. Off-screen rather than display:none so that bots which skip
   hidden fields still fill it in; a value means the submission is discarded. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 11px;
  font-size: 15px;
  line-height: 1.5;
}

.form-status--success {
  background: rgba(30, 145, 60, 0.1);
  color: #14682b;
}

.form-status--error {
  background: rgba(179, 38, 30, 0.08);
  color: var(--error);
}

.beta__note {
  text-align: left;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 30px;
  padding-bottom: 44px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 560px;
}

.footer__nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer__nav a,
.footer__col a {
  font-size: 14px;
  color: var(--ink-soft);
}

.footer__nav a:hover,
.footer__col a:hover {
  color: var(--accent);
}

/* The desktop footer's "Product" column duplicates the masthead links, which
   are hidden at phone width — so it stays out of the narrow layout entirely
   and the flat footer__nav row carries the ISR links instead. */
.footer__cols {
  display: none;
}

/* --------------------------------------------------------------------------
   Tablet — 680px and up
   -------------------------------------------------------------------------- */

@media (min-width: 680px) {
  :root {
    --gutter: 32px;
    --shot-grid: 200px;
  }

  .also__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }

  .principles__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }

  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fact:nth-child(-n + 2) {
    border-bottom: 0;
  }

  .fact:nth-child(odd) {
    border-right: 0;
  }

  .fact:not(:last-child) {
    border-right: 1px solid var(--rim-soft);
  }

  .fact__value--sources {
    font-size: 20px;
  }

  .hero__actions {
    flex-direction: row;
    gap: 14px;
  }

  .hero__actions .btn,
  .hero__actions .btn-ghost {
    width: auto;
  }

  .beta-form {
    padding: 30px;
  }
}

/* --------------------------------------------------------------------------
   Desktop — 1024px and up. The zigzag, and the only place the layout stops
   being a single column.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --radius-card: 20px;
    --shot-hero: 352px;
    --shot-feature: 307px;
    --shot-grid: 228px;
  }

  .mono {
    font-size: 11px;
  }

  .h3 {
    font-size: 21px;
  }

  .lede {
    font-size: 19px;
  }

  .small {
    font-size: 14px;
  }

  .masthead {
    min-height: 84px;
  }

  .masthead__links {
    display: flex;
  }

  .wordmark {
    font-size: 19px;
  }

  .wordmark sup {
    font-size: 11px;
  }

  .masthead__cta {
    height: 44px;
    padding: 0 20px;
    font-size: 15px;
  }

  .hero {
    flex-direction: row;
    align-items: center;
    gap: 72px;
    padding-top: 82px;
    padding-bottom: 74px;
  }

  .hero__prose {
    width: 616px;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }

  .hero__prose .lede {
    max-width: 545px;
  }

  .hero__shot {
    flex-grow: 1;
    padding-top: 0;
  }

  .facts {
    padding: 30px 0;
  }

  .fact {
    padding: 0 8px;
    gap: 7px;
  }

  .fact__value {
    font-size: 30px;
  }

  .fact__value--sources {
    font-size: 30px;
  }

  .feature {
    flex-direction: row;
    align-items: center;
    gap: 84px;
    padding-bottom: 96px;
  }

  .feature__prose {
    width: 560px;
    gap: 22px;
  }

  .feature .shot {
    flex-grow: 1;
    gap: 22px;
  }

  /* Alternate which side the screenshot falls on. Section order is
     load-bearing for the copy, so this is driven by a modifier rather than
     :nth-of-type — moving a section must not silently flip its layout. */
  .feature--shot-first {
    flex-direction: row-reverse;
  }

  .also {
    gap: 40px;
    padding-bottom: 96px;
  }

  .also__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .also__head .h2 {
    font-size: 38px;
  }

  .also__grid {
    gap: 34px;
  }

  .also__item {
    gap: 22px;
  }

  .also__caption {
    gap: 8px;
  }

  .also__caption .h3 {
    font-size: 21px;
  }

  .principles {
    padding: 88px 0;
  }

  .principles__inner {
    gap: 46px;
  }

  .principles__head {
    gap: 16px;
  }

  .principles__list {
    gap: 34px;
  }

  .principle {
    gap: 13px;
    padding-top: 26px;
  }

  .beta {
    align-items: center;
    gap: 26px;
    padding-top: 96px;
    padding-bottom: 88px;
  }

  .beta__head {
    align-items: center;
    text-align: center;
    max-width: 680px;
  }

  .beta__head .h2 {
    font-size: 50px;
  }

  .beta-form {
    width: 560px;
  }

  .beta__note {
    text-align: center;
  }

  .footer {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 56px;
    padding-top: 40px;
    padding-bottom: 52px;
  }

  .footer__nav {
    display: none;
  }

  .footer__cols {
    display: flex;
    gap: 56px;
  }
}