/* Privacy Policy and Terms (v2). Tokens, topbar, buttons, QR card and the closing legal line are the
   v2 landing page's (index.html), so the legal pages read as part of the same site. */
:root {
  --paper: #fffdf8;
  --ink: #21222a;
  --muted: #5c5d68;
  --line: #ece8dd;
  --red: #ff6b6b;
  --blue: #5c9bd6;
  --yellow: #ffd93d;
  --green: #6bcc78;
  --purple: #b387ff;
  --orange: #ffa652;
  --pink: #ff8fa3;

  --red-ink: #c94040;
  --purple-ink: #6840a9;
  --purple-ui: #8058d0;

  --card: rgba(255, 255, 255, 0.84);
  --card-line: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 0 42px rgba(73, 60, 98, 0.08);
  --content-width: 1120px;
  --page-gutter: 24px;
  --topbar-clear: 88px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--purple-ink); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: fixed; z-index: 100; top: 12px; left: 12px;
  padding: 12px 16px; border-radius: 999px;
  color: white; background: var(--purple-ink); font-weight: 800;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.dot-wave-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* clip, not hidden: hidden would make this a scroll container and break the sticky contents list */
.site-shell { position: relative; z-index: 1; overflow-x: clip; }
.inner { width: min(var(--content-width), 100%); margin: 0 auto; }

/* ---------- Topbar (same as v2 landing) ---------- */
.topbar {
  position: fixed; z-index: 30; top: 16px; left: 50%;
  width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 0 0 30px rgba(73, 60, 98, 0.08);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--red-ink); font-weight: 800; font-size: 1.05rem; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.nav-links { display: flex; gap: 4px; color: var(--muted); font-size: 0.93rem; font-weight: 700; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; }
.nav-links a:hover { color: var(--ink); background: white; }
.nav-menu { display: none; }   /* phones only: opens the page links (see the phone styles) */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 800; font-size: 1rem; white-space: nowrap; cursor: pointer;
}
.btn-primary { color: white; background: var(--purple-ui); box-shadow: 0 0 28px rgba(123, 85, 195, 0.24); }
.btn-secondary { color: var(--ink); background: white; border-color: var(--line); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 0.92rem; }
/* the nav bar's Download carries the Apple mark, like the phone download bar */
.topbar .btn-primary { gap: 7px; padding: 0 18px 0 15px; }
.topbar .btn-primary svg { width: 18px; height: 18px; flex: none; }
.btn-primary { transition: background-color 260ms ease, box-shadow 260ms ease; }
.btn-primary:hover, .btn-primary:focus-visible { background-color: var(--ink); box-shadow: 0 8px 18px rgba(33, 34, 42, 0.18); }
.btn-secondary { transition: border-color 220ms ease, color 220ms ease; }
.btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--purple-ui); color: var(--purple-ink); }

/* ---------- Hero ---------- */
/* A short, centred hero: a switch between the two legal pages, the title, one plain-language line,
   the effective date, then the summary cards. The full text starts right below. */
.hero { padding: 148px var(--page-gutter) 0; text-align: center; }
.doc-switch {
  display: inline-flex; gap: 4px; margin-bottom: 26px; padding: 5px;
  border: 1px solid var(--card-line); border-radius: 999px;
  background: var(--card); box-shadow: var(--card-shadow);
  font-size: 0.93rem; font-weight: 800;
}
.doc-switch a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--muted); transition: color 200ms ease, background-color 200ms ease; }
.doc-switch a:hover { color: var(--ink); }
.doc-switch a[aria-current="page"] { color: white; background: var(--purple-ui); }
.hero h1 { font-size: clamp(2.6rem, 4.8vw, 3.85rem); line-height: 1.02; letter-spacing: -0.02em; }
.hero .lede { max-width: 560px; margin: 16px auto 0; color: var(--muted); font-size: 1.16rem; line-height: 1.6; text-wrap: balance; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin-top: 22px; color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.hero-meta .dated { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .dated i { width: 10px; height: 10px; border-radius: 999px; background: var(--green); }
.print-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px;
  border: 0; background: none; color: var(--purple-ink); font-weight: 800; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.print-btn svg { width: 17px; height: 17px; }

/* At a glance: the page's four main points, each with its own icon on a pastel chip
   (the same cards as the home page's privacy band, on white) */
.glance { width: min(var(--content-width), 100%); margin: 44px auto 0; }
.glance ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; text-align: left; }
.glance li {
  display: grid; align-content: start; gap: 14px; padding: 22px;
  border: 1px solid var(--card-line); border-radius: 22px;
  background: var(--card); box-shadow: var(--card-shadow);
  font-size: 1.05rem; font-weight: 800; line-height: 1.3;
}
.glance li span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.glance i { --chip: var(--yellow); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: color-mix(in srgb, var(--chip), white 35%); color: var(--ink); }
.glance i svg { width: 22px; height: 22px; }
.glance .c-pink i { --chip: var(--pink); } .glance .c-blue i { --chip: var(--blue); } .glance .c-green i { --chip: var(--green); }
.glance-note { margin-top: 14px; color: var(--muted); font-size: 0.84rem; }

/* ---------- Body: contents list beside the full text ---------- */
.legal { padding: 56px var(--page-gutter) 0; }
.legal > .inner { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; }

.toc { position: sticky; top: calc(var(--topbar-clear) + 8px); }
.toc-title { margin: 0 0 10px 12px; color: var(--muted); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.toc a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px;
  min-height: 38px; padding: 6px 12px; border-radius: 14px;
  color: var(--muted); font-size: 0.9rem; font-weight: 700; line-height: 1.25;
  transition: color 200ms ease, background-color 200ms ease;
}
.toc a b { color: color-mix(in srgb, var(--muted), white 30%); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.8); }
/* the section being read: white, purple ink, and the logo shape of its row in place of the number */
.toc a[aria-current="location"] { color: var(--purple-ink); background: white; box-shadow: 0 0 22px rgba(73, 60, 98, 0.07); }
.toc a[aria-current="location"] b { font-size: 0; }
.toc a[aria-current="location"] b::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 3px; background: var(--yellow); }
.toc li:nth-child(4n+2) a[aria-current="location"] b::before { border-radius: 50%; background: var(--blue); }
.toc li:nth-child(4n+3) a[aria-current="location"] b::before { border-radius: 0; background: var(--pink); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.toc li:nth-child(4n+4) a[aria-current="location"] b::before { border-radius: 0; background: var(--green); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* The full text sits on one white sheet so long reading stays calm over the dot background */
.doc {
  min-width: 0; padding: 52px 64px 56px;
  border: 1px solid var(--card-line); border-radius: 32px;
  background: white; box-shadow: var(--card-shadow);
}
.doc section { scroll-margin-top: calc(var(--topbar-clear) + 20px); }
.doc section + section { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
.doc h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.doc h2 .num {
  flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 10px; background: #f3edff; color: var(--purple-ink);
  font-size: 0.92rem; font-variant-numeric: tabular-nums; translate: 0 -3px;
}
.doc p, .doc li { color: var(--muted); font-size: 1.02rem; line-height: 1.72; }
.doc p + p, .doc ul + p, .doc .rows + p, .doc .note + p, .doc .plans + p, .doc .links + p { margin-top: 14px; }
.doc strong { color: var(--ink); }
.doc a:not(.btn) { color: var(--purple-ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:not(.btn):hover { text-decoration-thickness: 2px; }
.doc a[target="_blank"]:not(.btn)::after { content: "↗"; display: inline-block; margin-left: 2px; font-size: 0.8em; text-decoration: none; }

/* lists: the logo's shapes as bullets, in turn (as in the home page's FAQ answers) */
.doc ul { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.doc ul li { position: relative; padding-left: 24px; }
.doc ul li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 10px; height: 10px; border-radius: 3px; background: var(--yellow); }
.doc ul li:nth-child(4n+2)::before { border-radius: 50%; background: var(--blue); }
.doc ul li:nth-child(4n+3)::before { border-radius: 0; background: var(--pink); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.doc ul li:nth-child(4n+4)::before { border-radius: 0; background: var(--green); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* a key sentence, pulled out on lavender with the pentagon from the app icon */
.note {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start;
  margin: 18px 0 0; padding: 18px 20px; border-radius: 20px;
  background: #f5efff;
}
.note::before {
  content: ""; width: 26px; height: 25px; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 96'%3E%3Cpolygon points='50,10 90,39 75,86 25,86 10,39' fill='%23b387ff' stroke='%23b387ff' stroke-width='16' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.doc .note p { color: #4c3d66; }
.doc .note strong { color: var(--purple-ink); }
.note + * { margin-top: 18px; }

/* label and description rows (what is stored on the device) */
.rows { margin: 18px 0 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.rows div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding: 16px 20px; }
.rows div + div { border-top: 1px solid var(--line); }
.rows dt { color: var(--ink); font-weight: 800; line-height: 1.5; }
.rows dd { margin: 0; color: var(--muted); line-height: 1.6; }

/* the two plans, as on the home page's pricing cards */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.plan { display: grid; gap: 4px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); }
.plan.full { border-color: color-mix(in srgb, var(--purple), white 60%); background: #faf6ff; }
.plan-name { color: var(--muted); font-size: 0.9rem; font-weight: 800; }
.plan.full .plan-name { color: var(--purple-ink); }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.1; }
.plan-price span, .plan-alt { color: var(--muted); font-size: 0.9rem; font-weight: 600; }

.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.links a.btn { min-height: 44px; padding: 0 18px; font-size: 0.92rem; }

/* contact: a small card with the company and two ways to reach it */
.contact-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: center;
  margin-top: 18px; padding: 22px; border-radius: 24px;
  background: radial-gradient(120% 120% at 0% 0%, #f5eeff 0%, #fdfbff 60%, white 100%);
  border: 1px solid color-mix(in srgb, var(--purple), white 72%);
  font-style: normal;
}
.contact-card img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 10px 22px rgba(104, 64, 169, 0.2); }
.contact-card strong { display: block; font-size: 1.05rem; }
.contact-card span { color: var(--muted); font-size: 0.92rem; }
.contact-card .links { grid-column: 1 / -1; margin: 0; }

/* ---------- Closing line (the page has no footer, as on the other v2 pages) ---------- */
.closing { padding: 56px var(--page-gutter) 36px; }
.final-disclaimer { width: min(720px, 100%); margin: 0 auto; color: var(--muted); font-size: 0.8rem; line-height: 1.5; text-align: center; text-wrap: balance; }
.final-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; width: min(var(--content-width), 100%); margin: 8px auto 0; color: var(--muted); font-size: 0.82rem; }
.final-legal a { font-weight: 700; color: var(--muted); }
.final-legal a:hover { color: var(--purple-ink); }
.final-legal a[aria-current="page"] { color: var(--purple-ink); }

/* ---------- Download on a computer: QR card (same as the other v2 pages) ---------- */
.qr-dialog {
  width: min(340px, calc(100vw - 32px)); padding: 0; margin: auto;
  border: 1px solid var(--card-line); border-radius: 28px; background: white; color: var(--ink);
  box-shadow: 0 40px 90px rgba(33, 34, 42, 0.24), 0 2px 8px rgba(33, 34, 42, 0.06);
}
.qr-dialog[open] { animation: qr-in 260ms cubic-bezier(0.16, 1, 0.3, 1); }
.qr-dialog::backdrop { background: rgba(33, 34, 42, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qr-dialog[open]::backdrop { animation: qr-fade 260ms ease; }
@keyframes qr-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes qr-fade { from { opacity: 0; } }
.qr-body { position: relative; padding: 30px 28px 26px; text-align: center; }
.qr-body:focus { outline: none; }
.qr-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px;
  background: white; color: var(--ink); cursor: pointer;
}
.qr-close svg { width: 18px; height: 18px; }
.qr-close:hover { background: var(--paper); }
.qr-code { position: relative; width: 212px; margin: 8px auto 18px; padding: 12px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.qr-code svg { display: block; width: 100%; height: auto; }
.qr-code img { position: absolute; left: 50%; top: 50%; width: 22%; height: auto; padding: 5px; transform: translate(-50%, -50%); border-radius: 12px; background: white; }
.qr-title { color: var(--ink); font-weight: 800; font-size: 1.24rem; }
.qr-sub { margin-top: 6px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; text-wrap: balance; }
.qr-app { width: 72px; height: 72px; margin: 10px auto 16px; border-radius: 18px; box-shadow: 0 12px 26px rgba(104, 64, 169, 0.22); }
.qr-send { width: 100%; margin-top: 20px; font: inherit; font-weight: 800; cursor: pointer; }
.qr-link { display: inline-block; margin-top: 12px; color: var(--purple-ink); font-weight: 800; font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1060px) {
  .glance ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal > .inner { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; }
  .doc { padding: 44px 40px 48px; }
}

/* Tablets and phones: the contents list becomes a row of chips that sticks under the topbar and
   scrolls sideways; the chip for the section being read stays in view. */
@media (max-width: 860px) {
  .legal { padding-top: 40px; }
  .legal > .inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .toc {
    z-index: 20; top: 76px;
    margin: 0 calc(var(--page-gutter) * -1); padding: 8px var(--page-gutter);
    background: color-mix(in srgb, var(--paper), transparent 8%);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--page-gutter);   /* no fade at the edges: every chip shows whole */
  }
  .toc::-webkit-scrollbar { display: none; }
  .toc-title { display: none; }
  .toc ol { display: flex; gap: 6px; width: max-content; }
  .toc a { display: flex; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: white; white-space: nowrap; font-size: 0.86rem; }
  .toc a b { display: none; }
  .toc a[aria-current="location"] { border-color: var(--purple-ui); color: white; background: var(--purple-ui); box-shadow: none; }
  .doc section { scroll-margin-top: 148px; }   /* clear the topbar and the row of chips */
}

@media (max-width: 760px) {
  :root { --page-gutter: 16px; --topbar-clear: 74px; }
  /* Phones: the bar holds the logo, the download and a menu button; the menu opens the three pages
     (Home · Game Guide · Why it works) in a panel under the bar. The bar slides up out of the way while
     the reader scrolls down and comes back on the way up (html.nav-up). site-nav.js runs both. */
  .topbar { top: 10px; gap: 8px; padding: 6px 6px 6px 8px; transition: translate 360ms cubic-bezier(0.16, 1, 0.3, 1); }
  html.nav-up .topbar, html:has(dialog[open]) .topbar { translate: 0 calc(-100% - 14px); }   /* also out of the way under an open sheet */
  .brand { margin-right: auto; }
  .brand img { width: 36px; height: 36px; border-radius: 10px; }
  .nav-menu {
    display: grid; place-content: center; gap: 5px; flex: none; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 999px; background: white; color: var(--ink); cursor: pointer;
  }
  .nav-menu span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: translate 260ms ease, rotate 260ms ease; }
  .topbar.is-open .nav-menu span:first-child { translate: 0 3.5px; rotate: 45deg; }    /* the two lines cross into an X */
  .topbar.is-open .nav-menu span:last-child { translate: 0 -3.5px; rotate: -45deg; }
  .nav-menu:focus-visible { outline: 3px solid var(--purple-ink); outline-offset: 2px; }
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    display: grid; gap: 4px; padding: 8px; border-radius: 26px;
    background: var(--paper); box-shadow: 0 18px 44px rgba(73, 60, 98, 0.18);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    font-size: 1.02rem;
    opacity: 0; visibility: hidden; translate: 0 -6px;
    transition: opacity 200ms ease, translate 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 260ms;
  }
  .topbar.is-open .nav-links { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  .nav-links a { min-height: 52px; padding: 0 18px; border-radius: 18px; }
  @media (max-width: 350px) { .brand span { display: none; } }   /* the smallest phones: the icon alone */
  @media (prefers-reduced-motion: reduce) { .topbar, .nav-links, .nav-menu span { transition: none; } }
  .hero { padding-top: 116px; }
  .doc-switch { margin-bottom: 20px; }
  .hero .lede { font-size: 1.04rem; }
  .glance { margin-top: 32px; }
  .glance ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .glance li { grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; border-radius: 20px; }
  .toc { top: 70px; }   /* right under the nav bar, which stays put on these pages (data-stay) */
  .doc section { scroll-margin-top: 140px; }
  .doc { padding: 30px 20px 34px; border-radius: 26px; }
  .doc section + section { margin-top: 34px; padding-top: 34px; }
  .doc h2 { font-size: 1.28rem; gap: 10px; }
  .doc h2 .num { min-width: 28px; height: 28px; font-size: 0.84rem; border-radius: 9px; translate: 0 -2px; }
  .doc p, .doc li { font-size: 1rem; line-height: 1.68; }
  .rows div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .contact-card { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .contact-card img { width: 48px; height: 48px; border-radius: 12px; }
  .contact-card .links .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
  .hero > :nth-child(2) { animation-delay: 60ms; }
  .hero > :nth-child(3) { animation-delay: 120ms; }
  .hero > :nth-child(4) { animation-delay: 180ms; }
  .hero > :nth-child(5) { animation-delay: 260ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  .hero-meta .dated i { animation: pulse 2.4s ease-out infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(107, 204, 120, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(107, 204, 120, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot-wave-canvas { display: none; }
  .qr-dialog[open], .qr-dialog[open]::backdrop { animation: none; }
}

/* ---------- Print: just the text, on plain paper ---------- */
@media print {
  .topbar, .dot-wave-canvas, .skip-link, .doc-switch, .print-btn, .toc, .final-legal, .qr-dialog { display: none !important; }
  body { background: white; }
  .hero { padding: 0; }
  .hero > * { animation: none !important; }
  .glance li, .doc { border: 0; box-shadow: none; }
  .glance li { padding: 8px 0; }
  .legal { padding-top: 24px; }
  .legal > .inner { display: block; }
  .doc { max-width: none; padding: 0; }
  .doc section { break-inside: avoid-page; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; color: var(--muted); }
  .closing { padding-top: 24px; }
}

/* Edge to edge on iPhone. viewport-fit=cover lets the page run behind Safari's status bar and bottom
   toolbar, instead of Safari filling those strips with a flat band (and cutting bottom sheets short).
   The bars' space is kept clear where it matters: the page starts below the status bar, the nav bar
   sits under it, and the side gutters clear the notch in landscape; the bottom download bar and the
   sheets already add the bottom inset. On other devices these insets are zero and nothing moves. */
:root { --safe-top: env(safe-area-inset-top, 0px); --page-gutter: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
body { padding-top: var(--safe-top); }
.topbar { top: calc(16px + var(--safe-top)); }
@media (max-width: 760px) {
  :root { --page-gutter: 16px; }
  .topbar { top: calc(10px + var(--safe-top)); }
  html.nav-up .topbar, html:has(dialog[open]) .topbar { translate: 0 calc(-100% - 14px - var(--safe-top)); }
}
@media (max-width: 860px) { .toc { top: calc(76px + var(--safe-top)); } }
@media (max-width: 760px) { .toc { top: calc(70px + var(--safe-top)); } }