/* Cadence website. The app's own greys, SF Pro Rounded where the device has it (every iPhone, iPad
   and Mac in Safari) and the system's face elsewhere, so the site asks no other server for a font. */
:root {
  --bg: #F8F8F8;
  --card: #FFFFFF;
  --fill: #EAE9E9;
  --label: #161616;
  --label-2: #5D5D5D;
  --label-4: #BABABA;
  --rule: #EAE9E9;
  --void: #000000;
  --night-ink: #E9E6E0;
  --frame: #1C1C1E;
  --frame-edge: #3A3A3C;
  --glass-night: rgba(255, 255, 255, .13);
  --badge: #000000;
  --badge-ink: #FFFFFF;
  --badge-edge: #A6A6A6;
  --white: #FFFFFF;
  --blank: #FFF3B0;
  /* The app's brand blue (Tokens.Brand): --brand for what's chosen or on, as the app's switches are;
     --brand-ink for blue type, its deep turn on light and its light turn on dark. */
  --brand: #0D7BDE;
  --brand-ink: #0A5CA7;
  --lift: 0 30px 60px rgba(22, 22, 22, .16), 0 8px 18px rgba(22, 22, 22, .10);
  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --reading: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --card: #111111; --fill: #1F1F1F; --label: #FFFFFF; --label-2: #BABABA;
    --label-4: #5D5D5D; --rule: #1F1F1F; --frame-edge: #48484A; --blank: #5A4A00; --brand-ink: #62A9EA;
    --lift: 0 30px 60px rgba(0, 0, 0, .7), 0 8px 18px rgba(0, 0, 0, .5); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--label); font: 18px/1.5 var(--round); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--label); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--round); font-weight: 700; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.01em; }
h3 { font-size: 21px; line-height: 1.2; }
p { margin: 0; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--label-2); max-width: 32em; }

/* Apple's own App Store badge, as an image from Apple's marketing tools. */
.badge { display: block; height: 54px; width: auto; }
.badge-link { display: inline-block; border-radius: 10px; transition: transform .2s cubic-bezier(.19, 1, .22, 1); }
.badge-link:hover { transform: translateY(-1px); }
.get { display: grid; justify-items: center; gap: 12px; }
.note-line { font-size: 15px; color: var(--label-2); }

/* Top bar */
.nav { position: relative; z-index: 3; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.wordmark { display: inline-flex; color: var(--label); }
.wordmark svg { height: 27px; width: auto; display: block; }

/* Footer */
footer { padding-block: 32px 56px; }
footer .wrap { display: grid; justify-items: center; gap: 14px; text-align: center; font-size: 15px; color: var(--label-2); }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
footer nav a { text-decoration: none; }
footer nav a:hover, footer nav a[aria-current="page"] { color: var(--label); }

/* A text page: Privacy Policy, Terms of Use, Support. */
.doc { max-width: 720px; margin-inline: auto; padding: 48px var(--gutter) 72px; }
.doc h1 { font-size: clamp(36px, 6vw, 56px); line-height: 1.06; }
.doc .updated { color: var(--label-2); font-size: 15px; margin-top: 12px; }
.doc section { margin-top: 36px; display: grid; gap: 14px; }
.doc h2 { font-size: 23px; line-height: 1.25; }
.doc p { color: var(--label); opacity: .86; line-height: 1.6; }
.doc .intro { margin-top: 28px; display: grid; gap: 14px; }
.doc .intro p { font-size: 20px; line-height: 1.5; opacity: 1; }
.doc a { text-underline-offset: 3px; }
.blank { background: var(--blank); border-radius: 4px; padding: 0 4px; }
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.refs li { display: grid; gap: 2px; }
.refs a { font-weight: 600; line-height: 1.35; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
.refs span { font-size: 15px; color: var(--label-2); }

@media (prefers-reduced-motion: reduce) {
  .badge-link { transition: none; }
}