@layer reset, tokens, base, layout, components, utilities;

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

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

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

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  :target {
    scroll-margin-block: 5ex;
  }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    --color-bg: light-dark(#ffffff, #000000);
    --color-text: light-dark(#1d1d1f, #f5f5f7);
    --color-text-secondary: light-dark(#6e6e73, #86868b);
    --color-link: light-dark(#0066cc, #2997ff);
    --color-fill-button: #0071e3;
    --color-fill-button-active: #006edb;
    --color-separator: light-dark(#d2d2d7, #424245);
    --color-fill-band: light-dark(#fafafa, #161617);

    /* The header sits over the content it tints, so its ground is the page
       ground with alpha — solid enough to keep the wordmark legible over
       whatever scrolls beneath it. */
    --color-bg-header: light-dark(rgb(255 255 255 / 0.72), rgb(0 0 0 / 0.72));

    --font-stack: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --text-display: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);
    --text-title: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);
    --text-lead: clamp(1.25rem, 1.125rem + 0.6vw, 1.5rem);
    --text-body: 1.0625rem;
    --text-eyebrow: 1rem;
    --text-tout: 1.1875rem;
    --text-footnote: 0.875rem;
    --text-caption: 0.75rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;

    --color-text-on-fill: #ffffff;

    --measure: 61.25rem;
    --measure-prose: 52ch;
    --gutter: 1.5rem;
    --radius-pill: 980px;

    /* The app icon at the top of the hero: 50px on a phone, growing with the
       window to 84px from 1369px wide. The icon's sizes attribute in the
       homepage markup repeats this curve in pixels — change the two together. */
    --size-app-icon: clamp(3.125rem, 1.8375rem + 3.99vw, 5.25rem);
  }

  /* Increase Contrast: secondary greys step to Apple's own footer alphas
     composited on these grounds; separators step up one grade. */
  @media (prefers-contrast: more) {
    :root {
      --color-text: light-dark(#000000, #ffffff);
      --color-text-secondary: light-dark(#474747, #b8b8b8);
      --color-separator: light-dark(#6e6e73, #86868b);
    }
  }

  /* Browsers without light-dark() — Safari before 17.5, Firefox before 120,
     Chrome before 123 — would otherwise drop every colour token above and fall
     back to bare system colours. They get the same palette as plain values,
     switched by the system appearance instead. */
  @supports not (color: light-dark(#000000, #ffffff)) {
    :root {
      --color-bg: #ffffff;
      --color-text: #1d1d1f;
      --color-text-secondary: #6e6e73;
      --color-link: #0066cc;
      --color-separator: #d2d2d7;
      --color-fill-band: #fafafa;
      --color-bg-header: rgb(255 255 255 / 0.72);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --color-bg: #000000;
        --color-text: #f5f5f7;
        --color-text-secondary: #86868b;
        --color-link: #2997ff;
        --color-separator: #424245;
        --color-fill-band: #161617;
        --color-bg-header: rgb(0 0 0 / 0.72);
      }
    }
  }

  /* Manual-appearance hook. Nothing sets data-theme today; appearance follows
     the system. */
  :root[data-theme="light"] {
    color-scheme: light;
  }

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

@layer base {
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-stack);
    font-size: var(--text-body);
    line-height: 1.47059;
    letter-spacing: -0.022em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1 {
    font-size: var(--text-display);
    font-weight: 700;
    line-height: 1.0555555556;
    letter-spacing: -0.009em;
  }

  h2 {
    font-size: var(--text-title);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0em;
  }

  p {
    text-wrap: pretty;
  }

  /* Colour alone cannot mark a link (3.02:1/2.77:1 against the copy around it):
     prose links stay underlined. .wordmark and .button-pill are the two
     exceptions, each carrying its own affordance. */
  a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  :focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }
}

@layer layout {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
  }

  .site-footer,
  .stage {
    width: min(var(--measure), 100% - 2 * var(--gutter));
    margin-inline: auto;
  }

  /* Anything scrolled into view stops below the header instead of underneath
     it: 0.75rem of padding either side of a 1.3125rem wordmark, plus room for
     the hairline. */
  html {
    scroll-padding-block-start: 3.5rem;
  }

  /* The wordmark stays put as the page scrolls. The padding is tighter than the
     footer's on purpose: a bar that never leaves spends viewport for as long as
     the reader is on the page. Its ground is tinted and blurred at all times,
     which shows only once content is passing underneath — at the top of the page
     the tint sits on the page's own colour and cannot be seen. The bottom
     padding belongs to the stage inside, so the hairline it carries lands on the
     bar's own bottom edge. */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding-block: var(--space-3) 0;
    background-color: var(--color-bg-header);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }

  /* At rest the hairline is the width of the copy below it, not of the window —
     the bar is still part of the page. */
  .site-header .stage {
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-separator);
  }

  /* Once the bar lifts off and floats over content, that hairline continues to
     both edges. This piece is the continuation, and it fades in across the first
     2rem of scroll — it reads the scroll position directly, so no script is
     involved, and where that cannot be read the hairline simply stays the width
     of the stage. */
  @supports (animation-timeline: scroll()) {
    .site-header::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      block-size: 1px;
      background-color: var(--color-separator);
      opacity: 0;
      animation-name: header-hairline-extends;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll();
      animation-range: 0 var(--space-6);
    }
  }

  @keyframes header-hairline-extends {
    to {
      opacity: 1;
    }
  }

  /* A translucent ground needs the blur behind it; without one, copy scrolls
     visibly through the wordmark. Where the blur cannot be drawn — or where the
     reader has asked for less transparency or more contrast — the bar takes the
     page's own solid ground instead. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
      background-color: var(--color-bg);
    }
  }

  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .site-header {
      background-color: var(--color-bg);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }

  .site-main {
    width: 100%;
    margin-block: auto;
    padding-block: var(--space-8) var(--space-9);
    text-align: center;
  }

  .site-main section + section {
    margin-block-start: var(--space-9);
  }

  .site-footer {
    padding-block: var(--space-4) var(--space-5);
    border-block-start: 1px solid var(--color-separator);
  }
}

@layer components {
  .wordmark {
    color: var(--color-text);
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: 0.011em;
    text-decoration: none;
  }

  .eyebrow {
    color: var(--color-text-secondary);
    font-size: var(--text-eyebrow);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.011em;
  }

  .eyebrow + h1 {
    margin-block-start: var(--space-3);
  }

  /* Small print just under the header: the app's availability, set apart from
     the hero below it. */
  .availability {
    color: var(--color-text-secondary);
    font-size: var(--text-footnote);
    font-weight: 600;
    line-height: 1.2857742857;
    letter-spacing: -0.016em;
  }

  /* The hero opens on the app icon with the app's name beneath it. The image
     carries the icon's own rounded shape and transparent corners, so nothing
     here clips or rounds it. */
  .app-icon {
    inline-size: var(--size-app-icon);
    block-size: var(--size-app-icon);
    margin-inline: auto;
  }

  .app-name {
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1.2353641176;
    letter-spacing: -0.022em;
  }

  .app-icon + .app-name {
    margin-block-start: var(--space-4);
  }

  .app-name + h1 {
    margin-block-start: var(--space-3);
  }

  /* The note above belongs to the top of the page and the icon to the hero, so
     the step between them is a large one. */
  .availability + .app-icon {
    margin-block-start: var(--space-9);
  }

  .lead {
    font-size: var(--text-lead);
    line-height: 1.3334;
    letter-spacing: 0.009em;
  }

  /* Both gaps under a display heading, sized to what follows it: a lead is the
     larger element and takes the larger step. Each carries the .site-main class
     so neither can be outranked by the other's selector. */
  .site-main h1 + .lead {
    margin-block-start: var(--space-6);
  }

  .site-main h1 + p {
    margin-block-start: var(--space-5);
  }

  /* The homepage's intro is semibold, close to the weight of the headline
     above it, so the two read as one statement. */
  .home-main h1 + .lead {
    font-weight: 600;
  }

  .title-compact {
    font-size: var(--text-title);
    font-weight: 600;
    line-height: 1.1;
  }

  .site-main p {
    max-inline-size: var(--measure-prose);
    margin-inline: auto;
  }

  .site-main p + p {
    margin-block-start: var(--space-4);
  }

  .site-main .lead + p {
    margin-block-start: var(--space-4);
  }

  .site-main h2 + p {
    margin-block-start: var(--space-5);
  }

  /* A heading couples to what follows at 1.2–1.6× that element's own size, so a
     lead needs more room than body copy does: 1.5rem of lead wants ~2rem, which
     is the gap the display headline already takes. Without this the lead sits
     the same distance from the heading above and the copy below, and groups
     with neither. */
  .site-main h2 + .lead {
    margin-block-start: var(--space-6);
  }

  .band {
    background-color: var(--color-fill-band);
    padding-block: var(--space-8);
  }

  /* The closing note is centred on the same ground as the section above it, so
     nothing about its shape says the two are different blocks. Hierarchy is
     what separates them: a heading at the size the cards above use places this
     note a tier below everything it follows, and under it stands only the
     support address. The hairline and the space above it only confirm a break
     the type has already made, which is the point — the hairline's colour is
     far too faint to be relied on. The heading stays an h2: what drops is its
     size, not its place in the outline. Below the address the note keeps the
     same space as above the heading, so it sits centred between the two
     hairlines. */
  .closing {
    border-block-start: 1px solid var(--color-separator);
    padding-block: var(--space-8);
  }

  .closing h2 {
    font-size: var(--text-tout);
    line-height: 1.2105263158;
    letter-spacing: 0.012em;
  }

  .truths {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-block-start: var(--space-7);
    text-align: left;
  }

  @media (min-width: 734px) {
    .truths {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .truths svg {
    display: block;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-block-end: var(--space-4);
  }

  .truths h3 {
    font-size: var(--text-tout);
    font-weight: 600;
    line-height: 1.2105263158;
    letter-spacing: 0.012em;
  }

  .truths p {
    margin-inline: 0;
  }

  .truths h3 + p {
    margin-block-start: var(--space-3);
  }

  .button-pill {
    display: inline-block;
    background-color: var(--color-fill-button);
    color: var(--color-text-on-fill);
    font-size: var(--text-body);
    line-height: 1.2;
    letter-spacing: -0.022em;
    padding: 0.75rem 1.375rem;
    border-radius: var(--radius-pill);
    min-block-size: 2.75rem;
    text-decoration: none;
  }

  .button-pill:hover,
  .button-pill:active {
    background-color: var(--color-fill-button-active);
  }

  /* A button needs the button gap whatever precedes it. Written as one rule on
     the row itself rather than as a set of sibling pairs: the paragraph-to-
     paragraph rule matches a .cta-row too and is the more specific of the two,
     so any `something + .cta-row` pair loses to it and the button gets pulled up
     against the copy. */
  .site-main .cta-row {
    margin-block-start: var(--space-6);
  }

  .site-footer p {
    color: var(--color-text-secondary);
    font-size: var(--text-caption);
    line-height: 1.334;
    letter-spacing: -0.01em;
  }

  .site-footer p + p {
    margin-block-start: var(--space-2);
  }

  .footer-nav {
    margin-block: var(--space-2);
    font-size: var(--text-caption);
    line-height: 1.334;
  }

  .legal-main {
    margin-block: 0;
    text-align: left;
  }

  /* The homepage opens with its availability note, which sits close under the
     header instead of a full step below it, and ends on the closing note, which
     brings its own space below. In a window taller than the page — a tall
     monitor, or a zoomed-out browser — it stays at the top rather than centring
     like the short pages: any spare height goes above the footer, and the note
     stays under the header. */
  .home-main {
    margin-block: 0 auto;
    padding-block: var(--space-4) 0;
  }

  .legal-copy > * {
    max-inline-size: var(--measure-prose);
  }

  .legal-copy p {
    margin-inline: 0;
  }

  .legal-copy h2 {
    margin-block-start: var(--space-7);
  }

  /* Matches the coupling everywhere else: a heading sits closer to its own copy
     than that copy sits to the paragraph after it. At 1rem the two gaps were
     equal and the headings stopped reading as headings. */
  .legal-copy h2 + p,
  .legal-copy h2 + ul {
    margin-block-start: var(--space-5);
  }

  .legal-copy ul {
    padding-inline-start: 1.25rem;
  }

  .legal-copy li + li {
    margin-block-start: var(--space-2);
  }

  .legal-copy .policy-date {
    color: var(--color-text-secondary);
    margin-block-start: var(--space-4);
  }

  /* A list of terms and their explanations: each term reads as a small
     heading, close to its own text and well clear of the entry before it. */
  .legal-copy p + dl,
  .legal-copy dl + p {
    margin-block-start: var(--space-5);
  }

  .legal-copy dt {
    font-weight: 600;
  }

  .legal-copy dt + dd {
    margin-block-start: var(--space-2);
  }

  .legal-copy dd + dt {
    margin-block-start: var(--space-5);
  }

  @media (prefers-reduced-motion: no-preference) {
    .button-pill {
      transition: background-color 150ms ease-out;
    }
  }
}

@layer utilities {
  /* A sentence written as two beats. Wrap each beat in a .beat and they run
     together on a phone, wrapping wherever the measure needs — no stranded
     fragment on a narrow screen. From tablet width up each beat takes its own
     line, which is the rhythm the copy was written for. The whitespace between
     two block-level siblings collapses, so the spacing is right either way. */
  @media (min-width: 734px) {
    .beat {
      display: block;
      /* A beat is written to fit one line, but the measure is in ch and the
         system stack is not one font — the same sentence is wider in Segoe UI or
         Roboto than in SF. When a beat does overflow, balance splits it into even
         lines instead of stranding two words under a full one. */
      text-wrap: balance;
    }
  }
}