/*
  Crewside: the landing page. One stylesheet, no build step, no web fonts.

  Tokens mirror mobile/src/ui/tokens.ts 1:1 so the site and the app are
  unmistakably the same product. Dark is the original 2026-07-08 palette;
  light is palette A "Cool slate", approved by Matea 2026-08-07.

  Rules carried from the app:
    - no raw hex in rules below this block, tokens only
    - depth = lighter surface + hairline border, never shadows; 2 levels max
    - rose = actions (tap it), lavender = signals (read it), never swapped
    - the window mark's three colours are LOCKED and identical in both themes
*/

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;

  --bg: #131a23;
  --surface: #1c2530;
  --surface-raised: #242f3c;
  --border: #303c4a;
  --ink: #f2f6fa;
  --ink-muted: #96a7b8;

  --primary: #f27ba0;
  --primary-pressed: #f79dba;
  --on-primary: #421324;
  --signal: #b39dff;
  --signal-bg: #232033;

  --success: #43d9a3;
  --success-bg: #16281f;
  --danger: #ff7a6e;
  --danger-bg: #33201c;
  --pending: #ffc46b;
  --pending-bg: #2e2517;

  --tint-stone: #a8adb8;
  --tint-steel: #7fa3c9;

  /* Focus ring reads on both canvases without being an accent. */
  --focus: #b39dff;

  /* Interactive boundaries only (inputs, icon buttons, ghost buttons).
     --border stays the app's hairline and is used for cards, which are
     decorative grouping. This one is a WCAG 1.4.11 target: a field the
     visitor is meant to type in has to be findable as a field, and the
     hairline measures 1.38:1 against the card it sits on, which is not.
     #63788D measures 3.39:1 on --surface and 3.84:1 on the field's own
     fill, so it clears 3:1 against both of its neighbours. */
  --control-border: #63788d;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eff3f7;
  --surface: #ffffff;
  --surface-raised: #e4eaf1;
  --border: #c9d4de;
  --ink: #16202b;
  --ink-muted: #4e6172;

  --primary: #b93d6e;
  --primary-pressed: #9c3059;
  --on-primary: #ffffff;
  --signal: #6a50c7;
  --signal-bg: #ece7fb;

  --success: #177a55;
  --success-bg: #dff3ea;
  --danger: #b3362b;
  --danger-bg: #fbe5e2;
  --pending: #8a5d00;
  --pending-bg: #f7ecd7;

  /* City tints deepened for a white surface, same hue family as the app. */
  --tint-stone: #5c6270;
  --tint-steel: #35618f;

  --focus: #6a50c7;

  /* 3.40:1 on --surface (white), 3.05:1 on the page canvas. */
  --control-border: #7e8d9c;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* System stack only. No Google Fonts request, no third-party processor,
     and the app ships in the same faces. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem);
  --fs-display: clamp(1.85rem, 1.4rem + 2.2vw, 2.75rem);
  --fs-title: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --fs-lead: clamp(1.075rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-caption: 0.8125rem;

  --lh-tight: 1.08;
  --lh-body: 1.6;
  --ls-display: -0.02em;

  --maxw: 1080px;
  --maxw-prose: 68ch;
  --touch: 48px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
}

/* ----------------------------------------------------------------- base */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: var(--ls-display);
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--primary);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--primary-pressed);
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--space-1);
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-24));
}

.section--tight {
  padding-block: clamp(var(--space-12), 6vw, var(--space-16));
}

.muted {
  color: var(--ink-muted);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-muted);
}

.h-display {
  font-size: var(--fs-display);
  font-weight: 800;
}

.h-title {
  font-size: var(--fs-title);
  font-weight: 700;
}

.prose {
  max-width: var(--maxw-prose);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -6);
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus-visible {
  top: var(--space-4);
}

/* ------------------------------------------------------------ the brand */

/* Wordmark: lowercase, dotless i (U+0131) carrying its own dot, so the sun
   can be recoloured at all. You cannot recolour a real tittle.

   EVERY NUMBER BELOW IS THE RULED ONE, ported from the approved board
   (crewside-animation-preview.html, blessed by Matea 2026-08-11) rather than
   re-derived. The board renders at 36px, so the pixel values there convert:
     dot        7.92px / 36  = 0.22em   <- one of the two numbers Matea locked
     dot bottom 24.70px / 36 = 0.686em
   line-height:1 is load-bearing. The dot is positioned from the bottom of the
   inline box, so an inherited line-height would move it. */
.wordmark {
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  display: inline-block;
  color: var(--ink);
  white-space: nowrap;
}

.wm-i {
  position: relative;
  display: inline-block;
}

/* scaleY, not a smaller font-size: shrinking the glyph thins the stroke and
   narrows the letter, transforming keeps full weight and the same advance
   width so nothing around it reflows. */
.wm-stem {
  display: inline-block;
  transform: scaleY(0.9);
  transform-origin: 50% 84.78%;
}

/* Amber in BOTH themes, with the glow, exactly as approved. This is the
   sun that leaves the window in the app's opening animation, so it is brand
   geometry and sits outside the palettes like the window mark itself.
   WCAG 1.4.3 exempts logotypes from the contrast floor, which is why this
   survives on the light canvas where amber body text never would. */
.wm-dot {
  position: absolute;
  left: 50%;
  bottom: 0.686em;
  transform: translateX(-50%);
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  display: block;
  background: #ffc46b;
  box-shadow:
    0 0 0.187em 0.066em rgba(255, 196, 107, 0.55),
    0 0 0.44em 0.165em rgba(255, 196, 107, 0.24);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
}

.lockup__mark {
  width: 34px;
  height: 34px;
  flex: none;
  display: block;
}

.lockup__word {
  font-size: 1.4rem;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.btn:hover {
  background: var(--primary-pressed);
  color: var(--on-primary);
}

.btn--secondary {
  background: transparent;
  border-color: var(--control-border);
  color: var(--ink);
}

.btn--secondary:hover {
  background: var(--surface-raised);
  color: var(--ink);
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.theme-toggle:hover {
  background: var(--surface-raised);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Show the icon for the mode you would switch TO. */
:root:not([data-theme="light"]) .theme-toggle__sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle__moon {
  display: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--signal-bg);
  color: var(--signal);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.trust {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.trust__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--signal-bg);
  color: var(--signal);
  font-size: 12px;
  font-weight: 800;
}

/* ----------------------------------------------------------------- hero */

.hero {
  padding-top: clamp(var(--space-12), 7vw, var(--space-20));
  padding-bottom: clamp(var(--space-12), 7vw, var(--space-20));
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-8), 6vw, var(--space-20));
  align-items: center;
}

.hero__slogan {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: var(--lh-tight);
  margin-top: var(--space-5);
}

.hero__subline {
  margin-top: var(--space-5);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__fineprint {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
}

.hero__art {
  display: flex;
  justify-content: center;
}

/* The phone echoes the app's layover list. Same visual language, not a
   screenshot: a screenshot dates the moment the app changes. */
.phone {
  width: min(340px, 100%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

:root[data-theme="light"] .phone {
  background: var(--surface-raised);
}

.phone__label {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.lo-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.lo-card__code {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* City tints live here as classes, NOT as inline style attributes. Our own
   CSP is `style-src 'self'`, which blocks a style="" attribute outright, so
   an inline tint silently renders as inherited ink. That shipped once and was
   only caught on the real host, because a local static server sends no CSP.
   Any future tint goes in this block. */
.lo-card__code--stone {
  color: var(--tint-stone);
}

.lo-card__code--steel {
  color: var(--tint-steel);
}

.lo-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.lo-card__city {
  color: var(--ink);
  font-size: 0.9rem;
}

/* flex-start, not center: when the status wraps to two lines the dot would
   otherwise float halfway down the block instead of sitting with the first
   word it belongs to. */
.lo-card__status {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
}

.lo-card__status--open {
  color: var(--signal);
}

.lo-card__status--soon {
  color: var(--pending);
}

.live-dot {
  flex: none;
  width: 8px;
  height: 8px;
  /* centres the dot on the cap height of the first line */
  margin-top: 0.32em;
  border-radius: 50%;
  background: var(--signal);
  animation: pulse 1.6s var(--ease) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

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

.mission__p + .mission__p {
  margin-top: var(--space-5);
}

.mission__note {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-8);
  max-width: var(--maxw-prose);
  border-color: color-mix(in srgb, var(--signal) 35%, var(--border));
}

.mission__note .trust__badge {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

/* ------------------------------------------------------------------ how */

.how__heading {
  margin-bottom: var(--space-10);
  max-width: 20ch;
}

.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.how__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.how__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--signal-bg);
  color: var(--signal);
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- waitlist */

.waitlist__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}

.waitlist__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.wl-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.wl-form[hidden],
.wl-success[hidden],
.wl-status[hidden],
.field__error[hidden] {
  display: none;
}

.wl-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink);
}

.field__input {
  min-height: var(--touch);
  border-radius: var(--radius-md);
  border: 1px solid var(--control-border);
  background: var(--bg);
  color: var(--ink);
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease);
}

:root[data-theme="light"] .field__input {
  background: var(--surface);
}

.field__input::placeholder {
  color: var(--ink-muted);
}

.field__input:focus-visible {
  border-color: var(--primary);
}

.field__input[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__error {
  font-size: var(--fs-caption);
  color: var(--danger);
}

.field__consent {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-muted);
}

.banner {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.banner--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.banner--pending {
  background: var(--pending-bg);
  color: var(--pending);
}

.wl-success {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}

.wl-success__check {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  font-size: 22px;
  font-weight: 800;
}

/* ------------------------------------------------------------------ faq */

.faq__heading {
  margin-bottom: var(--space-8);
}

.faq__list {
  max-width: var(--maxw-prose);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--touch);
  padding: var(--space-4) 0;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__chevron {
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.faq__item[open] .faq__chevron {
  transform: rotate(-135deg);
}

.faq__a {
  padding-bottom: var(--space-5);
  color: var(--ink-muted);
}

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

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-12);
}

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__claim {
  font-weight: 700;
  color: var(--ink);
}

.site-footer__line {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  max-width: 46ch;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--fs-caption);
  font-weight: 700;
}

/* ------------------------------------------------------------ legal doc */

.legal {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
}

.legal__doc {
  max-width: var(--maxw-prose);
}

.legal__doc h1 {
  font-size: var(--fs-display);
  font-weight: 800;
}

.legal__doc h2 {
  font-size: var(--fs-title);
  font-weight: 700;
  margin-top: var(--space-10);
}

.legal__doc p {
  margin-top: var(--space-4);
  color: var(--ink-muted);
}

.legal__doc .legal__address {
  color: var(--ink);
}

.legal__back {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-top: var(--space-10);
  font-weight: 700;
}

/* -------------------------------------------------------------- status */

.status-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding-block: var(--space-16);
}

.status-card {
  max-width: 48ch;
  /* the grid centres .container, not the card inside it */
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.status-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 26px;
  font-weight: 800;
  background: var(--signal-bg);
  color: var(--signal);
}

.status-card__icon--success {
  background: var(--success-bg);
  color: var(--success);
}

.status-card__icon--pending {
  background: var(--pending-bg);
  color: var(--pending);
}

/* --------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .hero__grid,
  .waitlist__grid {
    grid-template-columns: 1fr;
  }
  .hero__art {
    order: -1;
  }
  .how__steps {
    grid-template-columns: 1fr;
  }
}

@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;
  }
}