/* ---------------------------------------------------------------------------
   MissionAlarm marketing site — site.css
   Every value comes from assets/tokens.css, which is a verbatim copy of the
   generated design-system/tokens.css. Refresh that copy whenever tokens.ts
   changes; do not hand-edit either file.
   Dark only, matching the app. No build step, no framework.
   --------------------------------------------------------------------------- */

/* --- reset --------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--space-huge) + var(--space-xxl));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line);
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

[hidden] { display: none !important; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: var(--border-control) solid var(--acid);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--acid); color: var(--text-inverse); }

/* --- shared type roles --------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--acid);
  margin: 0 0 var(--space-md);
}
.eyebrow.muted { color: var(--text-secondary-accessible); }
.eyebrow.ember { color: var(--ember); }

.h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(var(--display-mobile-size), 4.8vw, var(--display-size));
  line-height: 1.08;
  letter-spacing: var(--display-tracking);
  max-width: 20ch;
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--headline-weight);
  font-size: var(--headline-size);
  line-height: var(--headline-line);
  letter-spacing: var(--headline-tracking);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--title-size);
  font-weight: 400;
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  color: var(--text-secondary-accessible);
  max-width: 60ch;
  margin-top: var(--space-lg);
}

.prose {
  font-size: var(--title-size);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  color: var(--text-secondary-accessible);
  max-width: 56ch;
}
.prose strong { color: var(--text-primary); font-weight: var(--body-bold-weight); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
}

/* --- layout -------------------------------------------------------------- */

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

.section {
  padding-block: clamp(var(--space-huge), 9vw, calc(var(--space-huge) * 2.6));
  border-top: var(--border-hairline) solid var(--smoke);
}

.section-head { max-width: 68ch; }
.section-head .lede + .lede { margin-top: var(--space-md); }

/* section head paired with a real screenshot */
.lead { display: grid; gap: var(--space-xl); align-items: center; }
.section-head .lede { margin-top: var(--space-lg); }

/* --- icons --------------------------------------------------------------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--size-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico.sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.ico.md { width: var(--size-icon-md); height: var(--size-icon-md); }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--size-button);
  padding-inline: var(--space-xl);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--title-size);
  font-weight: var(--body-bold-weight);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  text-decoration: none;
  white-space: nowrap;
  border: var(--border-control) solid transparent;
  transition: transform var(--duration-ui) var(--ease-spring),
              background-color var(--duration-ui) linear,
              border-color var(--duration-ui) linear;
}

.btn-primary {
  background: var(--acid);
  color: var(--text-inverse);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

/* The header button carries two labels and shows one; the narrow one keeps the
   header on a single line at 360px. display:none also hides it from screen readers,
   so only the visible label is ever announced. */
.cta-short { display: none; }

.btn-sm {
  min-height: var(--size-touch-target);
  padding-inline: var(--space-md);
  font-size: var(--body-bold-size);
  font-weight: var(--body-bold-weight);
  line-height: var(--body-bold-line);
  letter-spacing: var(--body-bold-tracking);
}

.cta-block {
  margin-top: var(--space-xxl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
}
.cta-note {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
}

/* --- skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-xs);
  z-index: 30;
  background: var(--acid);
  color: var(--text-inverse);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-weight: var(--body-bold-weight);
}
.skip:focus { left: var(--space-md); }

/* --- header -------------------------------------------------------------- */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  background: var(--surface-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-hairline) solid var(--smoke);
}

.head-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--title-size);
  font-weight: var(--alarm-time-weight);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark b { color: var(--acid); font-weight: inherit; }

.head-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: none;
}
.head-nav a.navlink {
  color: var(--text-secondary-accessible);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.head-nav a.navlink:hover { color: var(--text-primary); }

/* --- hero ----------------------------------------------------------------
   The hero's structure, its 3D stage and its static six-screen fallback are
   owned by assets/hero.css. Only the parts that file leaves to the page live
   here: the headline block, which must be visible in every hero state, and a
   filmstrip override so the static fallback is not six full-height phones on
   a 360px screen.
   ------------------------------------------------------------------------- */

.hero__intro {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(var(--space-huge) + var(--space-xxl)) var(--space-gutter) var(--space-xxl);
  min-height: 82svh;
  display: grid;
  align-content: center;
  /* When the copy is taller than the viewport, centring would push the eyebrow
     up behind the fixed header. "safe" falls back to start in that case. */
  align-content: safe center;
  justify-items: center;
  text-align: center;
}

.hero__intro h1 {
  font-family: var(--font-display);
  font-weight: var(--alarm-time-weight);
  font-size: clamp(var(--display-mobile-size), 7.2vw, var(--alarm-time-size));
  line-height: 1.02;
  letter-spacing: var(--alarm-time-tracking);
  max-width: 16ch;
  text-wrap: balance;
}

.hero-sub {
  margin-top: var(--space-xl);
  text-wrap: pretty;
  max-width: 54ch;
  font-size: var(--title-size);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  color: var(--text-secondary-accessible);
}
.hero-sub strong { color: var(--text-primary); font-weight: var(--body-bold-weight); }

.hero__intro .cta-block { justify-content: center; }

/* hero.js declines 3D on a coarse pointer under 900px, so on a phone the
   static fallback IS the hero. Six stacked full-width phones would be four
   thousand pixels of scroll before the first sentence of the page, so it
   becomes a snapping filmstrip. The overflow is inside the strip; the page
   itself never scrolls sideways. */
@media (max-width: 899px) {
  .hero__shots {
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-sm);
    scrollbar-width: thin;
  }
  .hero__shot {
    flex: 0 0 min(70vw, 260px);
    scroll-snap-align: start;
  }
  .hero__shot-text {
    font-size: var(--caption-size);
    line-height: var(--caption-line);
    letter-spacing: var(--caption-tracking);
  }
}

/* --- steps --------------------------------------------------------------- */

.steps { margin-top: var(--space-huge); display: grid; gap: var(--space-huge); }

.step {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding-top: var(--space-xl);
  border-top: var(--border-hairline) solid var(--smoke);
}
.step:first-child { border-top: 0; padding-top: 0; }

.step-num {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--acid);
  display: block;
  margin-bottom: var(--space-sm);
}
.step h3 { margin-bottom: var(--space-md); }
.step .prose { max-width: 52ch; }

.shot {
  position: relative;
  width: min(100%, 264px);
  aspect-ratio: 360 / 780;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: var(--border-hairline) solid var(--smoke);
  background: var(--surface-raised);
  justify-self: center;
}
/* The source PNGs are 462x780 mockup exports: the phone screen occupies the
   left 360px and the rest is annotation. Crop to the screen, never scale it. */
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* --- mission cards ------------------------------------------------------- */

.m-pushups { --stripe: var(--mission-pushups); }
.m-shake   { --stripe: var(--mission-shake); }
.m-math    { --stripe: var(--mission-math); }
.m-object  { --stripe: var(--mission-pushups); }
.m-bed     { --stripe: var(--mission-make-bed); }
.m-grass   { --stripe: var(--mission-touch-grass); }
.m-pet     { --stripe: var(--mission-pet-hunt); }

.missions {
  margin-top: var(--space-huge);
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.mission {
  position: relative;
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--smoke);
  border-left: var(--size-mission-stripe-width) solid var(--stripe, var(--acid));
  border-radius: var(--radius-card);
  padding: var(--space-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.mission .ico { color: var(--stripe, var(--acid)); }
.mission h3 {
  font-family: var(--font-display);
  font-size: var(--title-size);
  font-weight: var(--headline-weight);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
}
.mission p {
  color: var(--text-secondary-accessible);
  font-size: var(--body-size);
  line-height: var(--body-line);
}
.mission-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.badge {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge-free {
  color: var(--acid);
  border: var(--border-hairline) solid var(--acid);
}
.badge-pro {
  color: var(--text-primary);
  background: var(--volt-deep);
}

.where {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  color: var(--text-secondary-accessible);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: var(--space-xs);
}
.where .ico { color: inherit; }

/* --- callout ------------------------------------------------------------- */

.callout {
  margin-top: var(--space-xxl);
  background: var(--surface-raised);
  border-left: var(--size-mission-stripe-width) solid var(--acid);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}
.callout.volt { border-left-color: var(--volt); }
.callout .callout-title {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--acid);
}
.callout.volt .callout-title { color: var(--volt-text); }
.callout p {
  color: var(--text-primary);
  font-size: var(--body-size);
  line-height: var(--body-line);
  max-width: 78ch;
}
.callout p + p { margin-top: var(--space-sm); }

/* --- free vs pro --------------------------------------------------------- */

.split {
  margin-top: var(--space-huge);
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.col {
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--smoke);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
}
.col.pro {
  background: var(--surface-float);
  border-color: var(--volt-deep);
}

.col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-md);
  border-bottom: var(--border-hairline) solid var(--smoke);
}
.col-head h3 {
  font-family: var(--font-display);
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-line);
  letter-spacing: var(--headline-tracking);
}
.col-head .price-tag {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
}
.col.free .col-head h3 { color: var(--acid); }
.col.pro .col-head h3 { color: var(--volt-text); }

.checklist { margin-top: var(--space-md); display: grid; gap: var(--space-sm); }
.checklist li {
  display: grid;
  grid-template-columns: var(--size-icon-md) 1fr;
  gap: var(--space-sm);
  align-items: start;
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-primary);
}
.checklist li .ico { margin-top: 2px; }
.col.free .checklist li .ico { color: var(--acid); }
.col.pro .checklist li .ico { color: var(--volt-text); }
.checklist li span.sub {
  display: block;
  color: var(--text-secondary-accessible);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
}

/* --- limits -------------------------------------------------------------- */

.limits { margin-top: var(--space-huge); display: grid; gap: var(--space-lg); }

.limit {
  background: var(--surface-raised);
  border-left: var(--size-mission-stripe-width) solid var(--ember);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}
.limit h3 {
  font-family: var(--font-display);
  font-size: var(--title-size);
  font-weight: var(--headline-weight);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  margin-bottom: var(--space-xs);
}
.limit p {
  color: var(--text-secondary-accessible);
  font-size: var(--body-size);
  line-height: var(--body-line);
  max-width: 82ch;
}
.limit p strong { color: var(--text-primary); font-weight: var(--body-bold-weight); }

/* --- pricing ------------------------------------------------------------- */

.prices {
  margin-top: var(--space-huge);
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 264px), 1fr));
  align-items: stretch;
}

.plan {
  position: relative;
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--smoke);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.plan.featured {
  background: var(--surface-float);
  border: var(--border-control) solid var(--volt-deep);
}

.plan-flag {
  position: absolute;
  top: calc(var(--space-sm) * -1);
  left: var(--space-xl);
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--volt-deep);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
}

.plan h3 {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.plan-amount {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--display-mobile-size);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: var(--display-mobile-tracking);
}
.plan-per {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-secondary-accessible);
}

.plan-trial {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-full);
  border: var(--border-hairline) solid var(--acid);
  color: var(--acid);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
}
.plan-trial.none {
  border-color: var(--smoke-border);
  color: var(--text-secondary-accessible);
}

.plan p {
  color: var(--text-secondary-accessible);
  font-size: var(--body-size);
  line-height: var(--body-line);
}
.plan p.claim { color: var(--text-primary); }

.fineprint { margin-top: var(--space-xxl); display: grid; gap: var(--space-md); max-width: 78ch; }
.fineprint p {
  color: var(--text-secondary-accessible);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
}
.fineprint p strong { color: var(--text-primary); font-weight: var(--body-bold-weight); }

/* --- platforms ----------------------------------------------------------- */

.platforms {
  margin-top: var(--space-huge);
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}

.platform {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--smoke);
  border-left: var(--size-mission-stripe-width) solid var(--smoke-border);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
}
.platform.is-now { border-left-color: var(--acid); }
.platform.is-next { border-left-color: var(--volt); }

.platform-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-hairline) solid var(--smoke);
}
.platform-top h3 {
  font-family: var(--font-display);
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-line);
  letter-spacing: var(--headline-tracking);
}
.platform.is-now .platform-top h3 { color: var(--acid); }
.platform.is-next .platform-top h3 { color: var(--volt-text); }

.platform-state {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
  border: var(--border-hairline) solid var(--smoke-border);
  border-radius: var(--radius-full);
  padding: var(--space-xxs) var(--space-xs);
  white-space: nowrap;
}
.platform.is-now .platform-state { color: var(--acid); border-color: var(--acid); }

.platform p {
  color: var(--text-secondary-accessible);
  font-size: var(--body-size);
  line-height: var(--body-line);
  max-width: 60ch;
}
.platform p strong { color: var(--text-primary); font-weight: var(--body-bold-weight); }

.platform-note {
  color: var(--text-primary);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
}

/* --- waitlist ------------------------------------------------------------
   The form works as an ordinary POST with scripts off. The inline script in
   index.html only swaps these states in without a reload.
   ------------------------------------------------------------------------- */

.wl-card {
  margin-top: var(--space-huge);
  max-width: 720px;
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--smoke);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
}

.wl-form { display: grid; gap: var(--space-lg); }

.wl-field { display: grid; gap: var(--space-xs); min-width: 0; }

.wl-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.wl-fieldset .wl-label { display: block; padding: 0; margin-bottom: var(--space-xs); }

.wl-label {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary-accessible);
}

.wl-input {
  width: 100%;
  min-height: var(--size-button);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-base);
  color: var(--text-primary);
  border: var(--border-control) solid var(--smoke-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--title-size);
  font-weight: var(--body-weight);
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
  appearance: none;
  transition: border-color var(--duration-ui) linear;
}
.wl-input::placeholder { color: var(--text-secondary); }
.wl-input:hover { border-color: var(--text-secondary-accessible); }
.wl-input:focus { border-color: var(--acid); outline: none; }
.wl-input:focus-visible {
  border-color: var(--acid);
  outline: var(--border-control) solid var(--acid);
  outline-offset: 2px;
}
.wl-input:user-invalid { border-color: var(--blaze); }

/* segmented control: two real radios, their labels drawn as the segments */
.seg {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  width: fit-content;
  max-width: 100%;
  padding: var(--space-xxs);
  background: var(--surface-base);
  border: var(--border-hairline) solid var(--smoke);
  border-radius: var(--radius-full);
}
.seg-in {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.seg-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-touch-target);
  padding-inline: var(--space-lg);
  border-radius: var(--radius-full);
  color: var(--text-secondary-accessible);
  font-family: var(--font-body);
  font-size: var(--body-bold-size);
  font-weight: var(--body-bold-weight);
  line-height: var(--body-bold-line);
  letter-spacing: var(--body-bold-tracking);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-ui) linear, color var(--duration-ui) linear;
}
.seg-opt:hover { color: var(--text-primary); }
.seg-in:checked + .seg-opt { background: var(--acid); color: var(--text-inverse); }
.seg-in:checked + .seg-opt:hover { color: var(--text-inverse); }
.seg-in:focus-visible + .seg-opt {
  outline: var(--border-control) solid var(--acid);
  outline-offset: 2px;
}

.wl-hint {
  margin-top: var(--space-sm);
  color: var(--text-secondary-accessible);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
  max-width: 56ch;
}

.wl-submit { justify-self: start; }
.wl-submit[aria-busy="true"] { opacity: var(--opacity-disabled); pointer-events: none; }

/* the bot trap. Off-screen rather than display:none, so bots still fill it in. */
.wl-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wl-fine {
  margin-top: var(--space-md);
  max-width: 62ch;
  color: var(--text-secondary-accessible);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
}
.wl-fine a { color: var(--text-primary); text-underline-offset: 3px; }

.wl-msg {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-float);
  border-left: var(--size-mission-stripe-width) solid var(--smoke-border);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: var(--body-size);
  line-height: var(--body-line);
  max-width: 62ch;
}
.wl-msg:empty { display: none; }
.wl-msg.is-ok { border-left-color: var(--acid); }
.wl-msg.is-already { border-left-color: var(--volt); }
.wl-msg.is-error { border-left-color: var(--blaze); }

.wl-done {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-xl);
  background: var(--surface-float);
  border-left: var(--size-mission-stripe-width) solid var(--acid);
  border-radius: var(--radius-lg);
}
.wl-done:focus { outline: none; }
.wl-done h3 {
  font-family: var(--font-display);
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-line);
  letter-spacing: var(--headline-tracking);
  color: var(--acid);
}
.wl-done p {
  color: var(--text-primary);
  font-size: var(--body-size);
  line-height: var(--body-line);
  max-width: 60ch;
}
.wl-done .wl-done-note {
  color: var(--text-secondary-accessible);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
}

/* The scripts-off return panels. Hidden until the server's 303 puts their id in
   the fragment, so :target alone does the work and no JavaScript is involved. */
.wl-return { display: none; }
.wl-return:target {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--space-xl);
  margin-block-end: var(--space-xl);
  background: var(--surface-float);
  border-left: var(--size-mission-stripe-width) solid var(--acid);
  border-radius: var(--radius-lg);
}
.wl-return.is-error:target { border-left-color: var(--blaze); }
.wl-return h3 {
  font-family: var(--font-display);
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-line);
  letter-spacing: var(--headline-tracking);
  color: var(--acid);
}
.wl-return.is-error h3 { color: var(--blaze); }
.wl-return p {
  color: var(--text-primary);
  font-size: var(--body-size);
  line-height: var(--body-line);
  max-width: 60ch;
}

/* --- footer -------------------------------------------------------------- */

.site-foot { border-top: var(--border-hairline) solid var(--smoke); }
.foot-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-gutter) var(--space-huge);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  justify-content: space-between;
  align-items: flex-start;
}
.foot-brand { display: grid; gap: var(--space-xs); }
.foot-brand p {
  color: var(--text-secondary-accessible);
  font-size: var(--caption-size);
  line-height: var(--caption-line);
  letter-spacing: var(--caption-tracking);
  max-width: 40ch;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; }
.foot-nav a {
  color: var(--text-secondary-accessible);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
}
.foot-nav a:hover { color: var(--text-primary); }

.foot-ph {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
  color: var(--ember);
  border: var(--border-hairline) dashed var(--ember);
  border-radius: var(--radius-sm);
  padding: var(--space-xxs) var(--space-xs);
  white-space: nowrap;
}

.foot-legal {
  border-top: var(--border-hairline) solid var(--smoke);
  padding: var(--space-lg) var(--space-gutter);
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  color: var(--text-secondary-accessible);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  font-weight: var(--mono-label-weight);
  line-height: var(--mono-label-line);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
}

/* --- breakpoints --------------------------------------------------------- */

@media (min-width: 880px) {
  .lead { grid-template-columns: minmax(0, 1fr) 264px; gap: var(--space-huge); }
  .step { grid-template-columns: minmax(0, 1fr) 264px; gap: var(--space-huge); }
  .step:nth-child(even) { grid-template-columns: 264px minmax(0, 1fr); }
  .step:nth-child(even) .step-copy { order: 2; }
  .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .head-nav { gap: var(--space-md); }
  .shot { width: min(100%, 216px); }
  .col, .plan, .platform, .wl-card { padding: var(--space-lg); }
  .wl-done { padding: var(--space-md) var(--space-lg); }
  .callout, .limit { padding: var(--space-md) var(--space-lg); }
}

@media (max-width: 560px) {
  .head-nav a.navlink.support { display: none; }
  /* the header sits on one line down to 360px: short label, small wordmark */
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .wordmark { font-size: var(--body-bold-size); }
}

@media (max-width: 420px) {
  .head-nav a.navlink { display: none; }
  .btn { padding-inline: var(--space-lg); }
  .btn-sm { padding-inline: var(--space-sm); }
  .wordmark { font-size: var(--body-bold-size); }
  .seg { width: 100%; }
  .seg-opt { flex: 1 1 0; padding-inline: var(--space-sm); }
  .wl-submit { justify-self: stretch; width: 100%; }
  .wrap, .head-inner, .foot-inner, .foot-legal { padding-inline: var(--space-md); }
  .hero__intro { padding-inline: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-head, .skip { display: none; }
  body { background: #fff; color: #000; }
}