/* Shared across every page on this site: the marketing page and the support,
   privacy and terms documents.

   Split out of landing.css once the documents adopted the same design. Tokens,
   the self-hosted face, the sticky nav and the closing band are what all four
   pages must agree on; anything only one page draws lives in its own file beside
   this one. personality.css, which used to style the documents, is retired.

   Load order is base.css, then landing.css or doc.css. */
/* ---------------------------------------------------------------- tokens -- */
:root {
  --ground: #f4f5f7;
  --surface: #ffffff;
  --ink: #191c22;
  --ink-soft: #48505e;
  /* Was #79808f, which measured 3.63:1 on --ground and failed AA for body text.
     Darkened along the same hue rather than replaced, so the greys stay related. */
  --muted: #686f7e;
  --surface-2: #edeef3;
  --muted-on-2: #646b7a;
  --line: #dfe3ea;
  --line-strong: #c9cfda;
  --accent: #0f6e63;
  --accent-soft: #e2f0ee;
  --accent-ink: #ffffff;
  /* The hero panel carries the brand at full strength. --accent-soft measured as
     a smudge behind the phone and read as an accident rather than a decision. */
  --hero-panel: #0f6e63;

  /* The closing band. One deliberate colour block at the end of the page, not a
     theme that alternates: it is the same deep teal in light and dark so the page
     ends the same way whichever mode the reader is in. */
  --band: #0b3a35;
  --band-ink: #ffffff;
  --band-soft: #9dc3bd;
  --band-accent: #6fd3c4;
  --band-line: #1d5049;

  --shadow-sm: 0 1px 2px rgba(25, 28, 34, .05), 0 6px 18px rgba(25, 28, 34, .05);
  --shadow-lg: 0 2px 4px rgba(11, 58, 53, .06), 0 24px 60px rgba(11, 58, 53, .13);

  /* Strong ease-out. The built-in curves are too weak to read as intentional,
     and ease-in would delay the first frame, which is the one being watched. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  /* Semantic layers. Nothing on this page needs more than two. */
  --z-base: 0;
  --z-lift: 1;
  --z-nav: 20;

  --radius-panel: 16px;
  --radius-screen: 26px;   /* matches the device corner in the screenshots */
  --radius-pill: 999px;

  --measure: 34em;         /* ~68ch at this size */
  --page: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f1216;
    --surface: #171b21;
    --ink: #e9ecf1;
    --ink-soft: #b3bbc7;
    --muted: #7e8797;
    --surface-2: #1e242c;
    --muted-on-2: #858e9e;
    --line: #262d36;
    --line-strong: #38414d;
    --accent: #3db6a6;
    --accent-soft: #14312e;
    --accent-ink: #0b1013;
    /* Dark mode takes the deep teal instead: --accent is a bright mint here and a
       panel that size would shout down the headline. */
    --hero-panel: #12403a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .5);
  }
}

/* ------------------------------------------------------------------ font -- */
/* Self-hosted. personality.css has named Fraunces since the site launched but
   never loaded it, so every heading has been rendering as Georgia. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- element -- */
* { box-sizing: border-box; }

/* Author `display` otherwise wins over the UA sheet and [hidden] stops hiding. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The hero panel is meant to run off the right edge. Clip contains it without
     making the root a scroll container, which overflow-x:hidden would. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-soft);
  /* The page sells an iPhone app, so its body voice is the phone's own type.
     Paired against Fraunces on a contrast axis: soft serif against neutral sans. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-variation-settings: 'opsz' 144;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;   /* floor is -.04em; letters must not touch */
}
h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
}
h3 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  font-variation-settings: 'opsz' 36;
}

p { margin: 0; text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }
img { max-width: 100%; display: block; }

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

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

/* ---------------------------------------------------------------- layout -- */
.shell {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(52px, 6.5vw, 96px); }

.measure { max-width: var(--measure); }

/* ------------------------------------------------------------------- nav -- */
/* One line at every width, 64px tall. */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out);
}
.nav[data-stuck] { border-bottom-color: var(--line); }
.nav-in {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 36;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wordmark img { width: 28px; height: 28px; border-radius: 7px; }
.mark { color: var(--accent); }

.nav-cta {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover { background: var(--accent-soft); }
}
.nav-cta:active { transform: scale(.97); }

/* Below ~430px the full label and the wordmark together are wider than the bar,
   which pushed the button off the screen. Same destination, shorter label. */
.nav-cta .compact { display: none; }
@media (max-width: 430px) {
  .nav-cta .full { display: none; }
  .nav-cta .compact { display: inline; }
}
/* ----------------------------------------------------------------- close -- */
/* The one colour block on the page. It carries the disclaimer, which is the last
   thing worth reading, and the footer. */
.close {
  background: var(--band);
  color: var(--band-soft);
  padding-block: clamp(56px, 8vw, 104px);
}
.close h2 { color: var(--band-ink); max-width: 14em; }
.close p { margin-top: 16px; color: var(--band-soft); }

/* Two columns so the band is used rather than filled on one side. The warning
   that matters most gets its own column instead of trailing the first. */
.close-cols {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 28px;
}
@media (min-width: 880px) {
  .close-cols { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 72px); }
}
.close-cols p { max-width: 34em; margin-top: 0; }
.close strong { color: var(--band-ink); }
.close a { color: var(--band-accent); }

.close-cta { margin-top: 36px; }

.close-foot {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--band-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
/* On the documents the band holds only the footer row, so the rule that would
   separate it from the disclaimer above has nothing to separate. */
.close-foot--only { margin-top: 0; padding-top: 0; border-top: 0; }

.close-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.close-nav a {
  padding: 8px 16px;
  border: 1px solid var(--band-line);
  border-radius: var(--radius-pill);
  color: var(--band-ink);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .close-nav a:hover { background: rgba(255, 255, 255, .08); }
}
.close-nav a:active { transform: scale(.97); }
.close-copy { font-size: .875rem; color: var(--band-soft); }
/* ----------------------------------------------------------------- badge -- */
.badge-link {
  display: inline-block;
  transition: transform 160ms var(--ease-out);
}
.badge-link img { height: 54px; width: auto; }
@media (hover: hover) and (pointer: fine) {
  .badge-link:hover { transform: translateY(-2px); }
}
.badge-link:active { transform: scale(.97); }
/* Apple ships the badge in two finishes. Black on the paper pages, white on the
   teal band; using one on both would fail contrast on whichever it is not. The
   band keeps the white one in either theme, because the band itself does not
   change with the theme. */
.badge-dark { display: none; }
.close .badge-dark { display: block; }
.close .badge-light { display: none; }
@media (prefers-color-scheme: dark) {
  :not(.close) > * > .badge-link .badge-light { display: none; }
  :not(.close) > * > .badge-link .badge-dark { display: block; }
}

/* ---------------------------------------------------------------- motion -- */
/* Content is visible by default. It is only hidden once the script has confirmed
   both that it is running and that motion is welcome, so a reader with no JS, a
   reader who asked for less motion, and a headless render all get the full page. */
html[data-reveal] .reveal {
  opacity: 0;
  transform: translateY(16px);
}
html[data-reveal] .reveal.is-in {
  opacity: 1;
  transform: none;
  /* Transition rather than keyframes: retargets cleanly if the reader scrolls
     back up mid-animation. */
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta, .close-nav a, .badge-link { transition: none; }
}

@media (max-width: 719px) {
  body { font-size: 16px; }
  .close-foot { flex-direction: column; align-items: flex-start; }
}