/* AirwayControl web drafts: shared base. Each page sets its own tokens on :root.
   Type is the system stack (SF Pro on Apple devices), per the project's font law; the scale
   and tracking follow Apple's product pages. */

/* MOTION TOKENS: every duration, curve, stagger and distance on the site lives here and nowhere
   else (the web motion law, docs/handoff/claude-memory/web-motion-law.md, 2026-09-29). A call site
   names a token; it never writes a number of seconds or a cubic-bezier of its own. Entrances use
   --ease-out (fast start, long soft landing), state changes and exits --ease-in-out; nothing is
   linear except the wall's conveyor, which carries its own named exception in round3.css.
   Every move is a transition or a CSS animation, so it can be interrupted and never cuts. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* entrances: cascade steps, page-in, notification */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);  /* state changes: hover, press, focus, bold, page-out */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);       /* Apple's staggered curve: scroll reveals, carousels */
  --dur-fast: 180ms;     /* hover, press, focus ring, underline */
  --dur-base: 320ms;     /* the bold that marks the page you are on, small toggles */
  --dur-slow: 500ms;     /* labels and names that swap in a carousel */
  --dur-enter: 520ms;    /* one step of an entrance cascade */
  --dur-page-out: 240ms; /* the page you leave fades out */
  --dur-reveal: 1s;      /* a block that fades up once as it scrolls into view */
  --dur-word: 350ms;     /* one word of the write-on paragraph */
  --stagger: 70ms;       /* between two steps of a cascade */
  --reveal-step: 120ms;  /* between two scroll reveals in the same row */
  --page-in-start: 80ms; /* a sub-page's cascade starts as the old page is half gone */
  --glide-after: 280ms;  /* /#day from a sub-page: land, then glide once the old page is gone */
  --rise: 12px;          /* how far an entering block travels up */
  --reveal-rise: 24px;   /* how far a scroll reveal travels up */
  --settle-scale: 0.98;  /* the lock-screen cards settle from just under full size */
  /* the hero keeps its original, calm speed (Christopher 2026-09-29: "starts immediately" means no
     dead waiting, NOT faster motion). These are the exact values from before f143c243; only the
     start times changed. */
  --dur-hero-la: 900ms;  /* the Live Activity settles in (was .9s, var(--ease)) */
  --dur-hero-nt: 700ms;  /* the gate notification settles in (was .7s, var(--ease)) */
  --dur-hero-text: 700ms;/* the glass card and its lines, at the notification's calm pace */
  --hero-drop: 14px;     /* how far the lock-screen cards come down from (was -14px) */
  --dur-dot: 400ms;      /* a carousel dot grows into the active dash (was .4s) */
  --dur-names: 600ms;    /* the plane names swap beside the flip (was .6s) */
  --dur-tile-action: 300ms; /* the download button appears on a wall tile (was .3s) */
}
@media (prefers-reduced-motion: reduce) {
  /* opacity only, no movement, shorter; anchors jump (no smooth scroll is set) */
  :root {
    --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 240ms; --dur-enter: 260ms; --dur-page-out: 160ms;
    --dur-reveal: 0ms; --dur-word: 0ms; --stagger: 30ms; --reveal-step: 0ms; --page-in-start: 0ms;
    --rise: 0px; --reveal-rise: 0px; --settle-scale: 1; --hero-drop: 0px;
    --dur-hero-la: 300ms; --dur-hero-nt: 300ms; --dur-hero-text: 260ms;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
/* links and controls: no state changes with a hard cut. The underline is always there in a
   transparent colour and fades in on hover; the focus ring is always there, transparent, and fades
   in on keyboard focus; buttons brighten on hover and dim on press, all on --dur-fast. */
a { color: var(--link); text-decoration: underline; text-decoration-color: transparent; transition: color var(--dur-fast) var(--ease-in-out), text-decoration-color var(--dur-fast) var(--ease-in-out), background-color var(--dur-fast) var(--ease-in-out), filter var(--dur-fast) var(--ease-in-out), opacity var(--dur-fast) var(--ease-in-out), outline-color var(--dur-fast) var(--ease-in-out); }
a:hover { text-decoration-color: currentColor; }
a, button { outline: 2px solid transparent; outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1260px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(980px, 100% - 2 * var(--gutter)); margin-inline: auto; }
:root { --gutter: 22px; }
@media (min-width: 734px) { :root { --gutter: 40px; } }

/* type scale (Apple: 80/56/40/28/21/17/14/12) */
.t-hero { font-size: clamp(44px, 7.4vw, 96px); line-height: 1.04; font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.t-h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.06; font-weight: 600; letter-spacing: -0.009em; margin: 0; text-wrap: balance; }
.t-h2 { font-size: clamp(30px, 3.9vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.003em; margin: 0; text-wrap: balance; }
.t-h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.14; font-weight: 600; letter-spacing: 0.007em; margin: 0; text-wrap: balance; }
.t-lead { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.33; font-weight: 400; letter-spacing: 0.009em; color: var(--soft); margin: 0; text-wrap: pretty; }
.t-body { font-size: 17px; line-height: 1.47; color: var(--soft); margin: 0; max-width: 34em; text-wrap: pretty; }
.t-body b, .t-lead b { color: var(--ink); font-weight: 600; }
.t-eyebrow { font-size: 17px; line-height: 1.2; font-weight: 600; color: var(--accent); margin: 0; letter-spacing: -0.02em; }
.t-small { font-size: 12px; line-height: 1.33; color: var(--soft); letter-spacing: -0.01em; }

/* buttons: Apple's pill */
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border-radius: 980px; background: var(--link); color: #fff; font-size: 17px; font-weight: 400; letter-spacing: -0.022em; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn:active { filter: brightness(0.92); }
.btn--ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.more { font-size: 17px; }
.more::after { content: " \203A"; }

/* reveal (only blocks that start below the fold are ever hidden) */
.reveal { transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.reveal.is-pending { opacity: 0; transform: translateY(var(--reveal-rise)); }
.reveal[data-delay="1"] { transition-delay: calc(1 * var(--reveal-step)); }
.reveal[data-delay="2"] { transition-delay: calc(2 * var(--reveal-step)); }
.reveal[data-delay="3"] { transition-delay: calc(3 * var(--reveal-step)); }

/* word-by-word brightening */
[data-words] .w { color: var(--dim); transition: color var(--dur-word) var(--ease); }
[data-words] .w.on { color: var(--ink); }

/* tilt: a phone that stands up once */
.tilt { perspective: 1400px; }
.tilt__phone {
  transform-origin: 50% 88%;
  transform: rotateX(calc((1 - var(--t, 1)) * 58deg)) translateY(calc((1 - var(--t, 1)) * 6%)) scale(calc(0.9 + var(--t, 1) * 0.1));
  filter: drop-shadow(0 calc(40px * var(--t, 1)) 60px rgba(0, 0, 0, calc(0.28 * var(--t, 1))));
  will-change: transform;
}

/* carousel */
.carousel { position: relative; }
.track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100% - 1260px) / 2)); scroll-padding-inline: max(var(--gutter), calc((100% - 1260px) / 2)); padding-bottom: 8px; }
.track::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; flex: 0 0 min(372px, 82vw); border-radius: 28px; overflow: hidden; background: var(--tile); position: relative; }
.paddles { display: flex; gap: 14px; justify-content: flex-end; margin-top: 24px; }
.paddle { transition: filter var(--dur-fast) var(--ease-in-out), background-color var(--dur-fast) var(--ease-in-out), outline-color var(--dur-fast) var(--ease-in-out); width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tile-2); color: var(--ink); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.paddle:hover { filter: brightness(0.95); }
.paddle:active { filter: brightness(0.88); }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: 52px; display: flex; align-items: center; background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.nav .brand img { width: 40px; height: auto; filter: var(--mark-filter, none); }
.nav .links { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.nav .links a { color: var(--soft); }
.nav .links .btn { min-height: 28px; padding: 4px 12px; font-size: 12px; color: #fff; }
@media (max-width: 600px) { .nav .links a:not(.btn) { display: none; } }

/* footer */
.foot { background: var(--foot-bg); color: var(--soft); font-size: 12px; line-height: 1.33; padding-block: 28px 40px; }
.foot .wrap { display: grid; gap: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot nav a { color: var(--soft); }
.foot hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* reduced motion: the tokens above already drop movement and shorten the fades */