/* The one design every page shares: tokens, type, the bar, the page pills,
   the footer, and the document layout the FAQ, the policies and the 404
   are set in. Each page keeps only its own layout in an inline <style>,
   which loads after this file and so can refine anything here.

   Layout, type scale and spacing follow what apple.com ships, measured at
   1440 x 900: a white page with #f5f5f7 panels, a 21px eyebrow over a
   48px headline, 21px intros, a 52px frosted bar and a grey footer. The
   content and code are our own. Linked with a ?v= query because nginx
   sets no cache rule for .css: bump it whenever this file changes. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f5f5f7;
  --text: #1d1d1f;
  --grey: #6e6e73;
  --hair: #d2d2d7;
  --link: #0066cc;
  --brand: #7E5BEF;
  --brand-hover: #6B46E0;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --gutter: max(22px, 6.25%, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --wide: min(980px, calc(100% - 2 * var(--gutter)));
  --edge: max(var(--gutter), calc((100% - 980px) / 2));
  /* Reading width for documents: Apple's legal pages hold copy to ~692px. */
  --measure: min(692px, calc(100% - 2 * var(--gutter)));
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px;
}
.wrap { width: var(--wide); margin: 0 auto; }
h1, h2, h3, p { margin: 0; }
.plain { list-style: none; margin: 0; padding: 0; }

/* ---------- the bar: the page's one standing piece of material ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 52px;
  background: rgba(251,251,253,0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.bar .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }
.bar .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text);
  font-size: 19px; font-weight: 600; letter-spacing: 0.012em;
  margin-right: auto;
}
.bar .brand:hover { text-decoration: none; }
.bar .brand img { width: 36px; height: 36px; border-radius: 22.37%; }
.bar .cta {
  font-size: 12px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.33;
  color: #fff; background: var(--brand);
  padding: 4px 11px; border-radius: 980px;
}
.bar .cta:hover { background: var(--brand-hover); text-decoration: none; }

/* ---------- page pills ----------
   One pill per page of the site, the same row on every page; the page
   you are on is the filled one, with a soft glow in the app's colours.
   On a phone the row does not wrap: like Apple's local nav it is one
   36px row that scrolls sideways, centred while it fits, and site.js
   scrolls the current pill into view. */
.pagenav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 20px 16px 8px;
  isolation: isolate;
}
.pagenav a {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: 18px;
  border: 1px solid var(--hair);
  background: rgba(0,0,0,0.035);
  color: var(--text);
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.2s, background-color 0.2s;
}
.pagenav a:hover { border-color: var(--text); }
.pagenav a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 18px; }
.pagenav img { width: 18px; height: 18px; border-radius: 5px; }
.pagenav a[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.pagenav a[aria-current="page"]::before {
  content: ""; position: absolute; inset: 3px 8px; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, #7E5BEF, #E0559F, #F2994A, #4FA8E8);
  filter: blur(10px); opacity: 0.75;
}

/* ---------- type ---------- */
.headline {
  font-size: 48px; line-height: 1.08349; font-weight: 600; letter-spacing: -0.003em;
  text-wrap: balance;
}
.eyebrow {
  font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: 0.011em;
  margin-bottom: 12px;
}
.intro {
  font-size: 21px; line-height: 1.381; font-weight: 600; letter-spacing: 0.011em;
  color: var(--grey); text-wrap: pretty;
}
.intro strong { color: var(--text); font-weight: 600; }

/* ---------- documents: the FAQ, the policies ----------
   One reading column; a masthead in the page's own type scale; panels in
   the page's own grey with its 18px radius; and nothing else. */
.doc { width: var(--measure); margin: 0 auto; padding: 64px 0 120px; }
.doc > * + * { margin-top: 56px; }
.masthead .eyebrow { color: var(--grey); }
.masthead .standfirst { margin-top: 20px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.meta span {
  font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--grey);
  background: var(--panel); border-radius: 980px; padding: 6px 12px; white-space: nowrap;
}

.panel-box, .summary, .voice, .callout {
  background: var(--panel); border-radius: 18px;
}
.summary { padding: 32px 36px; }
.summary h2, .contents h2 {
  font-size: 12px; line-height: 1.33337; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey);
}
/* Bulleted lists belong to the document pages only: on the homepage .plain
   is a bare list reset (the gallery track, the feature grid, the checks). */
.summary ul, .doc ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.summary ul { margin-top: 16px; }
.summary li, .doc ul.plain li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.summary li::before, .doc ul.plain li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text); margin-top: 0.62em;
}
.doc ul.plain li::before { background: var(--grey); }
.summary strong, .doc ul.plain strong { font-weight: 600; }

.contents ol {
  list-style: none; margin: 16px 0 0; padding: 0; counter-reset: toc;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 32px;
  border-top: 1px solid var(--hair);
}
.contents li { border-bottom: 1px solid var(--hair); }
.contents a { display: flex; gap: 12px; padding: 11px 0; font-size: 14px; letter-spacing: -0.016em; }
.contents a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  color: var(--grey); font-variant-numeric: tabular-nums;
}

.doc section { scroll-margin-top: 72px; }
.doc section > * + * { margin-top: 14px; }
.doc section h2 {
  font-size: 28px; line-height: 1.14286; font-weight: 600; letter-spacing: 0.007em;
  text-wrap: balance;
}
.doc section h2 + * { margin-top: 18px; }
.doc em { font-style: italic; }

.voice { padding: 28px 32px; }
.voice .lede { display: block; font-size: 19px; line-height: 1.42; font-weight: 600; letter-spacing: 0.012em; }
.voice p { color: var(--grey); margin-top: 12px; }
.voice p strong { color: var(--text); }

.callout { padding: 22px 28px; }
.callout strong { font-weight: 600; }

ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
ol.steps li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: baseline; }
ol.steps li::before {
  counter-increment: step; content: counter(step);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--text); color: var(--bg);
  font-size: 13px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
ol.steps strong { font-weight: 600; }

/* The FAQ: one question, one answer, between hairlines. */
.qa section { border-top: 1px solid var(--hair); padding-top: 32px; }
.qa section + section { margin-top: 32px; }
.qa h2 { font-size: 21px; line-height: 1.19048; font-weight: 600; letter-spacing: 0.011em; }
.qa h2 + p { margin-top: 10px; }
.qa p { color: #424245; }
.qa strong { color: var(--text); font-weight: 600; }

/* ---------- footer ---------- */
footer { background: var(--panel); padding: 20px 0 max(32px, env(safe-area-inset-bottom, 0px)); font-size: 12px; line-height: 1.33337; letter-spacing: -0.01em; color: var(--grey); }
/* Each link draws its divider to its LEFT, in the gap. The one starting a
   line (the first, or one that wrapped) lands outside the box and is clipped,
   so a wrapped row never ends on a dangling bar; the focus ring (5px out) is
   inside the clip. */
footer .links { display: flex; flex-wrap: wrap; gap: 8px 21px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); clip-path: inset(-8px); }
footer .links a { color: #424245; position: relative; }
footer .links a::before { content: ""; position: absolute; left: -11px; top: 0; bottom: 0; width: 1px; background: var(--hair); }
/* Social icons are 29px: Instagram's floor ("never show the glyph smaller
   than 29x29 pixels"), and X asks for its logo at the same size as the others.
   That also clears LinkedIn's 21px [in] and X's 16px. The 16px gaps cover
   Instagram's clear space (half the glyph, 14.5px), and the 8px padding makes
   each tap target 45px, the neighbours just touching. */
footer .legal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 16px; }
footer .grow { flex: 1; }
footer .social-row { display: flex; align-items: center; gap: 16px; }
footer a.social { color: #424245; display: inline-flex; padding: 8px; margin: -8px; }
footer a.social:hover { color: var(--text); }
footer a.social svg, footer a.social img { width: 29px; height: 29px; display: block; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Apple's medium and small breakpoints ---------- */
@media (max-width: 1068px) {
  .headline { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
}
@media (max-width: 734px) {
  .bar { height: 48px; }
  .bar .brand { font-size: 17px; letter-spacing: -0.022em; }
  .bar .brand img { width: 32px; height: 32px; }
  .pagenav {
    flex-wrap: nowrap; justify-content: flex-start;
    padding: 12px var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .pagenav::-webkit-scrollbar { display: none; }
  .pagenav a { flex: none; padding: 0 15px; }
  /* Auto margins centre the row while it fits and fall to 0 once it scrolls,
     so the first pill is never pushed out of reach on the left. */
  .pagenav a:first-child { margin-left: auto; }
  .pagenav a:last-child { margin-right: auto; }
  .headline { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; }
  .eyebrow { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; margin-bottom: 8px; }
  .intro { font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em; }
  .doc { padding: 40px 0 88px; }
  .doc > * + * { margin-top: 44px; }
  .doc section h2 { font-size: 24px; line-height: 1.16667; letter-spacing: 0.009em; }
  .summary { padding: 24px; }
  .voice { padding: 24px; }
  .callout { padding: 20px 24px; }
  .qa h2 { font-size: 19px; line-height: 1.21053; letter-spacing: 0.012em; }
  footer .links a { margin-bottom: 2px; }
  /* Icons on their own line, at the left: the spacer would otherwise wrap
     with them on some widths and push them to the right edge. */
  footer .grow { display: none; }
}
/* The narrowest phones (320–360pt wide). */
@media (max-width: 360px) {
  .headline { font-size: 28px; }
}
/* Phones held sideways and other short, wide windows. */
@media (max-height: 520px) and (orientation: landscape) {
  .bar { height: 44px; }
  .bar .brand img { width: 28px; height: 28px; }
  .doc { padding-top: 32px; }
}