/* ==========================================================================
   Air — marketing site
   Plain CSS. No framework, no build step.

   Layout notes
   - Colour is driven by CSS custom properties on :root.
   - Night mode is a single attribute on <html>: data-theme="night".
     Every colour below is redefined under that attribute, so nothing else
     in the site needs to know which theme is active.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme tokens
   -------------------------------------------------------------------------- */
:root {
  /* Day */
  --sky-top:      #7fbdf0;
  --sky-bottom:   #cfe6f8;
  --page-bg:      #f6fafd;
  --panel-bg:     #ffffff;
  --text:         #16222e;
  --text-soft:    #4a5c6d;
  --text-faint:   #74869a;
  --hairline:     rgba(22, 34, 46, 0.12);
  --btn-bg:       #16222e;
  --btn-text:     #ffffff;
  --btn-bg-hover: #22323f;
  --focus-ring:   #1f6fb8;

  /* Typography */
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter:       clamp(20px, 5vw, 40px);
  --measure:      68rem;   /* wide sections */
  --measure-text: 38rem;   /* comfortable reading width */
  --section-y:    clamp(72px, 11vw, 140px);
}

[data-theme="night"] {
  --sky-top:      #0b1a3d;
  --sky-bottom:   #1d3566;
  --page-bg:      #0d1526;
  --panel-bg:     #131e33;
  --text:         #f2f6fb;
  --text-soft:    #b7c4d6;
  --text-faint:   #8c9cb2;
  --hairline:     rgba(242, 246, 251, 0.16);
  --btn-bg:       #ffffff;
  --btn-text:     #101a2c;
  --btn-bg-hover: #e4ecf6;
  --focus-ring:   #8ec5ff;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(17px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

/* One visible focus style everywhere, for keyboard users. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Visible only to screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users get a skip link on the first Tab press. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--panel-bg);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--btn-bg-hover); }

/* The hero sets a text-shadow for white type on sky, and it inherits into
   the button — putting a blue halo behind the dark label inside the white
   pill. The pill has its own background, so it needs none. */
.button { text-shadow: none; }

.button--on-sky {
  background: #ffffff;
  color: #16222e;
}
.button--on-sky:hover { background: #ffffff; }

.button__icon { width: 19px; height: 19px; flex: none; }

/* --------------------------------------------------------------------------
   4. Site header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { height: 26px; width: auto; }

/* Two files, one shown at a time. Inverting the white mark with a CSS
   filter produced pure #000 rather than the page's ink, and left the
   wordmark dependent on filter support; this does not. */
.wordmark__dark { display: none; }

/* On the sky hero the wordmark is always the light mark. On a solid header
   it follows the theme: ink on the light page, white on the dark one. */
.site-header--solid {
  position: static;
  border-bottom: 1px solid var(--hairline);
  background: var(--page-bg);
}
.site-header--solid .wordmark__light { display: none; }
.site-header--solid .wordmark__dark  { display: inline; }

[data-theme="night"] .site-header--solid .wordmark__light { display: inline; }
[data-theme="night"] .site-header--solid .wordmark__dark  { display: none; }

/* --------------------------------------------------------------------------
   5. Day / night toggle
   -------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.3); }
.theme-toggle svg { width: 16px; height: 16px; flex: none; }

/* On pages without a sky behind it, the toggle borrows page colours. */
.site-header--solid .theme-toggle {
  border-color: var(--hairline);
  background: transparent;
  color: var(--text-soft);
}
.site-header--solid .theme-toggle:hover { background: rgba(127, 127, 127, 0.1); }

/* Show the icon matching the theme you would switch *to*. */
.theme-toggle__night { display: none; }
[data-theme="night"] .theme-toggle__day { display: none; }
[data-theme="night"] .theme-toggle__night { display: inline; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* One section, one sky. The intro fills the first screen and the device
   follows on the same photograph, so scrolling brings the phone up in
   front of the sky instead of onto a new panel. The background gradient
   lands on the page colour, and the photograph is masked out before it
   gets there, so the section ends on the footer without a seam. */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(72px, 10vw, 120px);
  background: linear-gradient(to bottom,
              var(--sky-top) 0%,
              var(--sky-bottom) 46%,
              var(--page-bg) 92%);
}

/* The photograph ends on a hard horizontal edge where the next section
   begins. Fading the image itself reveals the hero's own background
   gradient underneath, which ends on exactly the colour the showcase
   starts on — so the two read as one continuous sky. Done as a mask on
   the image rather than an overlay above it, so it cannot be beaten by
   paint order. */
.hero__picture {
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

.hero__picture,
.hero__picture img {
  position: absolute;
  width: 100%;
}
/* The photograph covers the first screen only. Letting it span the whole
   section stretched it to roughly twice its height, and `cover` then threw
   away everything but a narrow centre strip — which is why the sun and the
   moon disappeared and the two skies stopped looking like the same frame. */
.hero__picture {
  top: 0;
  left: 0;
  height: 100svh;
}
.hero__picture img { inset: 0; height: 100%; }
.hero__picture img {
  /* Both skies carry the same object-position, so the registered sun and
     moon land on the same pixel and the frame never jumps. Biased upward
     so the open sky, not the cloud bank, sits behind the headline. */
  object-fit: cover;
  object-position: 50% 35%;
}
/* Show whichever sky matches the current theme.
   Both stay in the layout and swap with opacity rather than `display`, so
   each one is already decoded when the theme flips. Switching a decoded
   image in with `display` shows one frame of bare background first, which
   is what made the toggle flicker. */
.hero__picture--night { opacity: 0; }
[data-theme="night"] .hero__picture--day   { opacity: 0; }
[data-theme="night"] .hero__picture--night { opacity: 1; }

.hero__content {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Weighted, not centred: the sun and the moon sit at about 30% of the
     frame, so a centred block put the wordmark right beside them. The extra
     top padding drops the type below the luminary and leaves it the open
     upper-right corner. */
  padding-top: clamp(150px, 26vh, 260px);
  padding-bottom: clamp(72px, 9vw, 120px);
  text-align: center;
  color: #ffffff;
  max-width: 46rem;
  /* A shadow rather than a full overlay: keeps the sky untouched while
     holding contrast. A sunlit sky is bright across the whole frame —
     there is no darker region to move the text into — so the shadow has
     to do the work on its own, and is weighted for the worst case of
     white type sitting on a lit cloud. */
  text-shadow: 0 2px 20px rgba(10, 30, 56, 0.60),
               0 1px 4px  rgba(10, 30, 56, 0.50),
               0 0   1px  rgba(10, 30, 56, 0.35);
}

.hero__logo {
  width: clamp(132px, 17vw, 188px);
  margin: 0 auto clamp(22px, 3.5vw, 34px);
  filter: drop-shadow(0 3px 18px rgba(12, 34, 62, 0.4));
}

.hero__title {
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  margin-bottom: clamp(14px, 2vw, 20px);
}

.hero__subtitle {
  font-size: clamp(1.02rem, 1.9vw, 1.3rem);
  font-weight: 600;
  /* Smaller than the headline, so it needs the contrast more, not less. */
  color: #ffffff;
  max-width: 30rem;
  margin: 0 auto clamp(30px, 4.5vw, 44px);
}

/* The hero content is a flex column, so children stretch by default. The
   headline and subtitle should (they are centred text that needs the width);
   the pill should not, or it spans the whole column. */
.hero__content .button { align-self: center; }

.hero__note {
  margin-top: 18px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffffff;
  /* This line can land on a bright cloud, so it carries a heavier shadow
     than the rest of the hero text. */
  text-shadow: 0 1px 10px rgba(12, 34, 62, 0.75),
               0 1px 2px  rgba(12, 34, 62, 0.55);
}

/* --------------------------------------------------------------------------
   7. Content sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--hairline); }

.section__title {
  font-size: clamp(1.65rem, 3.6vw, 2.6rem);
  max-width: 22ch;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.section__body {
  max-width: var(--measure-text);
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  color: var(--text-soft);
}
.section__body + .section__body { margin-top: 1.1em; }

/* --------------------------------------------------------------------------
   8. The app, on the sky
   -------------------------------------------------------------------------- */
.showcase {
  position: relative;
  z-index: 1;              /* above the photograph, which is absolute */
  text-align: center;
}

.showcase__device {
  /* Negative top margin lifts the phone over the last of the photograph,
     which is what puts it in front of the sky. */
  /* Always smaller than the block's bottom padding above, so the phone
     rises into the sky without ever reaching the line of type. */
  margin: clamp(-96px, -7vw, -48px) auto clamp(40px, 6vw, 64px);
  width: min(340px, 74vw);
}
.showcase__device img {
  width: 100%;
  height: auto;
  /* The source is a rounded rectangle. Equal percentages on the two axes
     would draw an ellipse, so the vertical figure is scaled by the image's
     own aspect ratio to keep the corner circular. */
  border-radius: 17.8% / 8.5%;
  box-shadow: 0 26px 60px rgba(12, 32, 58, 0.34),
              0 6px  18px rgba(12, 32, 58, 0.20);
}
[data-theme="night"] .showcase__device img {
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.60),
              0 6px  18px rgba(0, 0, 0, 0.38);
}

.showcase .section__title { margin-inline: auto; }
.showcase .section__body  { margin: 0 auto clamp(30px, 4vw, 40px); }

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(44px, 6vw, 68px);
  border-top: 1px solid var(--hairline);
  font-size: 0.95rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__brand { font-weight: 800; font-size: 1.15rem; }

.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(18px, 3vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a { color: var(--text-soft); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; }
.site-footer__legal { width: 100%; color: var(--text-faint); font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   10. Document pages (privacy, terms, support)
   -------------------------------------------------------------------------- */
.doc { padding-block: clamp(52px, 7vw, 88px); }
.doc__inner { max-width: 44rem; margin-inline: auto; }

.doc h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); margin-bottom: 12px; }
.doc__meta { color: var(--text-faint); font-size: 0.92rem; margin-bottom: clamp(34px, 5vw, 52px); }

.doc h2 {
  font-size: clamp(1.18rem, 2.2vw, 1.42rem);
  margin-top: clamp(38px, 5vw, 54px);
  margin-bottom: 12px;
  padding-top: clamp(30px, 4vw, 42px);
  border-top: 1px solid var(--hairline);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }

.doc h3 { font-size: 1.04rem; margin-top: 26px; margin-bottom: 6px; }

.doc p, .doc li { color: var(--text-soft); }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: 1em; }
.doc ul { margin: 1em 0 0; padding-left: 1.25em; }
.doc li + li { margin-top: 0.5em; }
.doc a { color: var(--focus-ring); text-decoration: underline; }

/* Anything wrapped in .todo must be replaced before launch. */
.todo {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed currentColor;
  border-radius: 5px;
  background: rgba(214, 141, 26, 0.12);
  color: #a8690a;
  font-weight: 800;
  font-size: 0.9em;
}
[data-theme="night"] .todo { background: rgba(255, 195, 96, 0.14); color: #ffcf87; }

.notice {
  margin-bottom: clamp(30px, 4vw, 42px);
  padding: 18px 22px;
  border: 1px solid var(--hairline);
  border-left: 4px solid #d68d1a;
  border-radius: 10px;
  background: var(--panel-bg);
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------------------
   11. Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero__content { min-height: 92svh; padding-top: clamp(140px, 24vh, 210px); }
  /* The portrait crop is already the 9:16 window we want, so it fills the
     hero almost exactly. Nudged down a little to keep the luminary clear
     of the wordmark. */
  .hero__picture img { object-position: 50% 46%; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 400px) {
  .button { width: 100%; justify-content: center; }
}

@media (min-width: 1500px) {
  :root { --measure: 74rem; }
}

/* Respect the reader's motion preference. The site has no animation to
   speak of, but smooth scrolling is still motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}