:root {
  color-scheme: light;
  --ink: #181716;
  --muted: #6f6a64;
  --paper: #f7f4ef;
  --paper-deep: #ede8df;
  --accent: #e94f3d;
  --accent-dark: #bd382c;
  --line: rgba(24, 23, 22, 0.12);
  --card: rgba(255, 255, 255, 0.62);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.shell { width: min(100% - 48px, 1120px); margin: 0 auto; }
.site-header { align-items: center; display: flex; justify-content: space-between; padding: 22px 0; }
.wordmark { color: var(--ink); font-size: 1.4rem; font-weight: 780; letter-spacing: -0.075em; text-decoration: none; }
.wordmark span { color: var(--accent); }
.site-nav { display: flex; gap: 20px; }
.language-picker { appearance: none; background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: .86rem; padding: 0 15px 0 0; }
.language-picker:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.site-nav a, .site-footer a, .legal-footer a { color: var(--muted); font-size: .86rem; text-decoration: none; }
.site-nav a:hover, .site-footer a:hover, .legal-footer a:hover { color: var(--accent-dark); }
.eyebrow { color: var(--accent-dark); font-size: .76rem; font-weight: 800; letter-spacing: .02em; text-transform: none; }
.button { align-items: center; background: var(--ink); border-radius: 999px; color: #fff; display: inline-flex; font-size: .94rem; font-weight: 750; gap: 9px; padding: 14px 20px; text-decoration: none; }
.button::before { background: var(--accent); border-radius: 50%; content: ""; height: 8px; width: 8px; }
.button.light { background: #fff; color: var(--ink); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: .82rem; justify-content: space-between; padding: 26px 0 34px; }
.site-footer nav { display: flex; gap: 16px; }

/* Apple-provided artwork stays unmodified. 48px Store badges have 12px
   clear space on each side; the 40px Health badge has 10px. Never put these
   inside .button (which adds our red dot), apply effects, or animate them. */
.apple-store-badges { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; margin: 20px -12px 0; }
.apple-store-badges[hidden], .apple-store-badge[hidden], .apple-store-note[hidden] { display: none; }
.apple-store-badge { appearance: none; background: none; border: 0; border-radius: 0; color: inherit; display: inline-flex; padding: 12px; text-decoration: none; }
.apple-store-badge img { display: block; height: 48px; width: auto; }
.apple-store-badge:disabled { cursor: default; opacity: 1; }
.apple-store-badge:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 0; }
.hero .apple-store-note { flex-basis: 100%; font-size: .82rem; line-height: 1.5; margin: 0 12px; }
.apple-health-badge { display: inline-flex; margin: 22px -10px 0; padding: 10px; }
.apple-health-badge img { display: block; height: 40px; width: auto; }
.apple-purchase-badge { display: inline-flex; padding: 10px; margin: 20px -10px 0; }
.apple-purchase-badge img { display: block; height: 40px; width: auto; }
.plan > .apple-purchase-note { margin: 0 0 16px; font-size: .82rem; line-height: 1.5; }
.showcase .apple-health-note { font-size: .85rem; line-height: 1.5; margin-top: 10px; }
.site-footer { flex-wrap: wrap; }
.site-footer nav { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.apple-trademarks { flex-basis: 100%; font-size: .72rem; line-height: 1.55; margin: 18px 0 0; max-width: 870px; }

.legal-page { line-height: 1.65; }
.legal-content { max-width: 720px; padding: 68px 0 78px; }
.legal-content h1 { font-size: clamp(2.1rem, 6vw, 3.1rem); letter-spacing: -.055em; line-height: 1; margin: 12px 0 8px; }
.legal-content h2 { font-size: 1.18rem; letter-spacing: -.02em; margin: 42px 0 12px; }
.legal-content h3 { font-size: 1rem; letter-spacing: -.01em; margin: 25px 0 8px; }
.legal-content p, .legal-content li { color: #403d39; }
.legal-content ul { padding-left: 1.3em; }
.legal-content li { margin-bottom: 9px; }
.legal-content strong { color: var(--ink); }
.legal-content a { color: var(--accent-dark); }
.updated { color: var(--muted); font-size: .9rem; margin: 0; }
.legal-footer { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 58px; padding-top: 22px; }

@media (max-width: 650px) {
  .shell { width: min(100% - 36px, 1120px); }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: .79rem; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
  .legal-content { padding: 44px 0 60px; }
}