:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --bg-elev: #f6f8fa;
    --text: #1f2328;
    --text-muted: #59636e;
    --heading: #0b0c0e;
    --accent: #2f6feb;
    --border: #d1d9e0;
    --table-head: #f0f3f6;
    --table-stripe: #fafbfc;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
    /* Destructive text, matching the app's red on "Delete My SyncSessions Data".
       Apple's ACCESSIBLE system red rather than plain systemRed (#FF3B30), which reads at
       about 3.3:1 on white and fails AA for body text. These are Apple's own high-contrast
       values, so the page matches the app and stays legible. */
    --danger: #d70015;
    /* Height of the CTA badge. Apple's badge box is 119.66407 x 40 and this row renders
       it at 52. It was one variable because TestFlight sat beside it and the pair had to
       match; TestFlight went on 2026-09-04 and only the store badge is left, so this is
       now simply how big Apple's artwork is drawn. Apple allow scaling the badge as long
       as the aspect ratio holds, which `aspect-ratio` below enforces. Set it to 40px for
       Apple's own scale. Theme-independent, so it is declared here only. */
    --cta-h: 52px;
  }
  /* Auto: follow the visitor's OS setting when no explicit choice is made */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0d1117;
      --bg-elev: #161b22;
      --text: #e6edf3;
      --text-muted: #9198a1;
      --heading: #f0f6fc;
      --accent: #6ea8ff;
      --border: #30363d;
      --table-head: #161b22;
      --table-stripe: #12161c;
      --shadow: 0 1px 3px rgba(0,0,0,0.4);
      --danger: #ff6961;
    }
  }
  /* Explicit overrides from the toggle (higher specificity wins over the media query) */
  html[data-theme="light"] {
    --bg: #ffffff; --bg-elev: #f6f8fa; --text: #1f2328; --text-muted: #59636e;
    --heading: #0b0c0e; --accent: #2f6feb; --border: #d1d9e0;
    --table-head: #f0f3f6; --table-stripe: #fafbfc; --shadow: 0 1px 3px rgba(0,0,0,0.08);
    --danger: #d70015;
  }
  html[data-theme="dark"] {
    --bg: #0d1117; --bg-elev: #161b22; --text: #e6edf3; --text-muted: #9198a1;
    --heading: #f0f6fc; --accent: #6ea8ff; --border: #30363d;
    --table-head: #161b22; --table-stripe: #12161c; --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --danger: #ff6961;
  }

  /* Names a destructive action, so the page reads it the way the app draws it. */
  .danger { color: var(--danger); }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  /* max-width comes from /assets/site-common.css — these two pages take .wrap--document,
     the wider of the two measures, because they hold tables and code. Padding stays here. */
  .wrap { padding: 0 24px 96px; }

  header.hero {
    padding: 72px 0 40px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
  .brand { font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: .2px; margin: 0 0 20px; }
  h1 { font-size: 44px; line-height: 1.1; margin: 0 0 14px; color: var(--heading); letter-spacing: -0.5px; }
  .tagline { font-size: 20px; font-weight: 600; color: var(--heading); margin: 0 0 18px; }
  .lede { font-size: 17px; color: var(--text-muted); margin: 0 0 14px; }
  .platforms { font-size: 15px; color: var(--text-muted); margin: 0; }

  h2 {
    font-size: 26px; color: var(--heading); margin: 56px 0 16px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border); letter-spacing: -0.3px;
  }
  h3 { font-size: 18px; color: var(--heading); margin: 28px 0 8px; }
  p { margin: 0 0 14px; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  strong { color: var(--heading); }

  ul.features { list-style: none; padding: 0; margin: 0; }
  ul.features li {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow);
  }
  ul.features li .ft { display: block; font-weight: 600; color: var(--heading); margin-bottom: 3px; }
  ol.steps { padding-left: 22px; margin: 0; }
  ol.steps li { margin-bottom: 12px; }
  ul.plain { padding-left: 22px; }
  ul.plain li { margin-bottom: 8px; }

  table {
    width: 100%; border-collapse: collapse; margin: 8px 0 20px;
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
    font-size: 15px;
  }
  th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
  th { background: var(--table-head); color: var(--heading); font-weight: 600; }
  tr:last-child td { border-bottom: none; }
  tbody tr:nth-child(even) { background: var(--table-stripe); }

  .muted-note { font-size: 14px; color: var(--text-muted); }
  .support-card {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
    padding: 18px 20px; box-shadow: var(--shadow);
    /* Paragraphs carry bottom margin only (see `p` below), so a card followed by
       body text would sit flush against it with no gap at all. Harmless where the
       card ends a section, which is why it went unnoticed until one gained a
       paragraph after it. */
    margin-bottom: 22px;
  }
  /* Otherwise the last paragraph's 14px bottom margin lands inside the card and its
     padding reads lopsided — 18px above, 32px below. */
  .support-card > p:last-child { margin-bottom: 0; }
  /* The footer is styled by /assets/site-footer.css, shared with the landing page and the User
     Guide. Nothing for it here: two files describing one element is the drift that produced
     three different footers in the first place. `.page-updated` went with it — the only user of
     that class was a hand-typed date that disagreed with the one beside it. */

  /* App badges */
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  /* Fixed height, not vertical padding: padding would make the badge as tall as its
     two lines of text happen to measure, and system-ui is a different font with
     different metrics on every OS — so the row would line up here and not on Windows.
     `align-items: center` already centers the content, and `* { box-sizing }` above
     means the border sits inside the 52px. */
  /* The .badge / .badge-tf rules that stood here drew the TestFlight pill and had no
     other user in either page; they went with it on 2026-09-04. `.beta-note` below did
     NOT go — the Siri page uses it for unrelated text. */
  /* .badge-as is now nothing but the script's hook and the not-yet-a-link cursor. It
     used to style a badge we drew in HTML; that badge is artwork now (.store-badge
     below), and the background and 1px border left behind drew a SECOND box around it —
     visible as a grey ring a pixel outside the white pill, with the artwork squeezed to
     50px inside a 52px border-box while TestFlight next to it was a full 52. Style the
     artwork, not this. The script swaps the <span> for an <a> and sets cursor: pointer
     itself. */
  .badge-as { cursor: default; }
  .beta-note { font-size: 13px; color: var(--text-muted); margin-top: 14px; }

  /* Sign in with Apple — Apple's own button asset, 200x32 (@2x), shown as an
     illustration. Apple's guidance is explicit that the PNG is the supported
     route when you are not using the Button API, and this project has no
     Services ID to drive that API with — CloudKit JS authenticates the web app
     with the container token instead.

     Base64 because this page is a single self-contained file and a strict
     no-external-requests one; the app icon above is embedded for the same
     reason. It is a <div role="img">, not a <button> or an <a>: nothing here
     signs anyone in, and it must not invite a click. */
  .siwa-badge {
    /* 212x40 — the asset is 424x80 @2x. */
    display: block; width: 212px; height: 40px; margin: 0 0 14px;
    background: url("/syncsessions/site-assets/siwa-light.png") no-repeat center / 212px 40px;
  }
  /* Apple's guidance: black on light backgrounds, white on dark. Both the media
     query and the explicit toggle overrides, or the badge would stay black for
     someone who set Dark by hand on a light-mode OS. */
  @media (prefers-color-scheme: dark) {
    .siwa-badge { background-image: url("/syncsessions/site-assets/siwa-dark.png"); }
  }
  html[data-theme="light"] .siwa-badge { background-image: url("/syncsessions/site-assets/siwa-light.png"); }
  html[data-theme="dark"] .siwa-badge { background-image: url("/syncsessions/site-assets/siwa-dark.png"); }

  /* App icon */
  .app-icon {
    display: block; width: 112px; height: 112px; margin: 0 0 22px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.28));
  }
  @media (max-width: 560px) { .app-icon { width: 96px; height: 96px; } }

  /* The store badge, in two states.

     LIVE is what ships now, on every platform — Apple's own "Download on the App Store"
     asset, unmodified. iOS 1.0.1 cleared review on 2026-09-15 (macOS went live 09-04), so
     the markup carries --live from the start and site.js only re-points the href at the
     native scheme. Nobody is shown Coming Soon any more.

     BASE = "Coming Soon", our own artwork, no Apple mark on it at all — which was the
     point: Apple supply official badges precisely so third parties do not draw their
     logo themselves, and the badge this replaced did. It is drawn at Apple's exact badge
     box, 119.66407 x 40, so the switch to the real artwork changed a filename and nothing
     else — not the layout, not the row, not the sizing. ⚠️ KEEP THE BASE RULE: it carries
     the geometry (height, aspect-ratio) that --live only overrides the background of, so
     deleting it collapses the badge. Its Coming Soon background is now unreachable, and
     is the state to return to if a future platform is ever announced before it ships.

     ⚠️ The asset is Apple's UMBRELLA badge, which reads "Download on the App Store".
     Apple ship a separate, wider "Download on the Mac App Store" lockup (156.20721 x 40)
     for a Mac-only app. Leaving the umbrella one was the right call and is now settled:
     the Mac App Store product page reads "Mac, iPad, iPhone" (verified 2026-09-15), so
     the app is universal and a Mac lockup would have had to be swapped straight back out.

     A stale instruction was removed here on 2026-09-04. It said to repoint a <picture>
     in README.md; no README in any of the three repos has ever held one.

     ORDER MATTERS BELOW. `html[data-theme="dark"] .store-badge` outweighs a bare
     `.store-badge--live`, so every base rule has a --live twin at equal specificity and
     the --live group is placed after. Move it above and the badge reverts to Coming Soon
     for anyone who set a theme by hand. Same black-on-light / white-on-dark convention
     Apple require of their own, four ways: the media query for Auto, the explicit
     overrides for someone whose chosen theme disagrees with their OS. */
  .store-badge {
    display: block; height: var(--cta-h); aspect-ratio: 119.66407 / 40;
    background: url("/syncsessions/site-assets/badge-comingsoon-blk.svg") no-repeat center / contain;
  }
  @media (prefers-color-scheme: dark) {
    .store-badge { background-image: url("/syncsessions/site-assets/badge-comingsoon-wht.svg"); }
  }
  html[data-theme="light"] .store-badge { background-image: url("/syncsessions/site-assets/badge-comingsoon-blk.svg"); }
  html[data-theme="dark"] .store-badge { background-image: url("/syncsessions/site-assets/badge-comingsoon-wht.svg"); }

  .store-badge--live { background-image: url("/syncsessions/site-assets/appstore-badge-blk.svg"); }
  @media (prefers-color-scheme: dark) {
    .store-badge--live { background-image: url("/syncsessions/site-assets/appstore-badge-wht.svg"); }
  }
  html[data-theme="light"] .store-badge--live { background-image: url("/syncsessions/site-assets/appstore-badge-blk.svg"); }
  html[data-theme="dark"] .store-badge--live { background-image: url("/syncsessions/site-assets/appstore-badge-wht.svg"); }

  /* Theme toggle */
  .theme-toggle {
    position: fixed; top: 18px; right: 18px; z-index: 50;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bg-elev); color: var(--text);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    box-shadow: var(--shadow); font-family: inherit;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  }
  .theme-toggle:hover { border-color: var(--accent); }
  .theme-toggle:active { transform: scale(0.96); }
  .theme-toggle svg { width: 16px; height: 16px; }

  /* The label stays on at every width, deliberately. This block used to drop it below
     560px and square the padding into an icon-only circle. But the control cycles three
     states — Auto, Light, Dark — and an icon alone cannot say which one you are in
     unless you already read the icon: the half-filled circle meaning "Auto" is the one
     nobody guesses. The pill costs about 75px in a corner that holds nothing else, so
     there was no crowding being solved. Reported from an iPhone, 2026-08-12: portrait
     showed a bare circle, landscape the full pill, same page. */
  @media (max-width: 560px) {
    h1 { font-size: 34px; }
    header.hero { padding: 60px 0 32px; }

    /* The phone rules that stood here squeezed TWO badges onto one row — they needed
       359px and a 393pt iPhone gives 345. One badge is 155px at --cta-h: 52px and
       cannot wrap, so the whole block went with TestFlight on 2026-09-04. */
  }