/* Shared chrome for the guide / comparison pages (/app-store-privacy-labels, /compare/*,
   /privacy-first-ios-analytics). One file on purpose: these four pages are the only ones that
   share a skin, so re-styling them after a site redesign is one edit, not four. Loaded as an
   external stylesheet — allowed by style-src 'self'; the site's CSP forbids inline <script>,
   never inline or external CSS. Tokens mirror docs.html so the pages read as one site. */

/* Every token here that carries TEXT clears WCAG AA 4.5:1 on the worst surface it can land on,
   which is --panel-2 in dark (the .toc) and the *-soft chip fills over --bg in light (.lbl-chip,
   .preset.on). 4.5 and not 3.0 because none of it is large text: --faint runs at 11px to 13.5px
   and the chips at 10.5px. The *-soft fills are deliberately not derived from the text colours
   next to them: a fill or a mark only owes 3:1, and holding them at the brighter hue is what
   keeps the palette recognisable while the text on top of it is dark enough to read. Anything
   changed here has to be re-measured against all four surfaces in BOTH blocks. */
:root { color-scheme: dark;
        --bg:#0b0e14; --panel:#141925; --panel-2:#1b2233; --line:#232c40; --text:#e7ecf5;
        --muted:#8b97ad; --faint:#818da5; --accent:#5b8cff; --accent-2:#8b5cf6; --good:#34d399;
        --accent-fill:#2f62d6; --accent-fill-2:#6a3fd6; --linked-text:#a78bfa;
        --warn:#f5b342; --danger:#f87171;
        --accent-soft:rgba(91,140,255,.14); --good-soft:rgba(52,211,153,.12); --warn-soft:rgba(245,179,66,.12);
        --shadow:0 1px 3px rgba(0,0,0,.4), 0 18px 50px rgba(0,0,0,.35); }
@media (prefers-color-scheme: light) {
  :root { color-scheme: light;
          --bg:#f7f8fc; --panel:#fff; --panel-2:#f0f3fa; --line:#e3e8f2; --text:#10141d;
          --muted:#5d6880; --faint:#5e6c85; --accent:#3a5fc0; --accent-2:#7c4fe0; --good:#087351;
          --accent-fill:#3a5fc0; --accent-fill-2:#7c4fe0; --linked-text:#6d3fd6;
          --warn:#8a5a12; --danger:#c81e1e;
          --accent-soft:rgba(79,126,242,.10); --good-soft:rgba(14,159,116,.10); --warn-soft:rgba(183,121,31,.10);
          --shadow:0 1px 3px rgba(20,30,60,.08), 0 18px 50px rgba(20,30,60,.10); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* overflow-wrap: a single long identifier in prose (ATTrackingManager.requestTrackingAuthorization)
   is wider than a 375px column, and because inline code is not inside anything scrollable it pushes
   <body> sideways. Inline code wraps; block code keeps its lines and scrolls inside its own <pre>. */
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; overflow-wrap: anywhere;
       background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
pre { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
      padding: 16px 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; margin: 12px 0; }
pre code { background: none; border: none; padding: 0; }
pre .c { color: var(--faint); }
pre .hl { color: var(--accent); font-weight: 600; }

/* ── Nav / footer ─────────────────────────────────────────────────────────── */
nav.top { border-bottom: 1px solid var(--line); }
/* min-height, not height: at the largest accessibility text sizes the row is taller than 58px,
   and a fixed height let it spill over the border instead of moving it down. flex-wrap is the
   last resort under the steps below: two tidy rows beat a nav hanging outside its own bar. */
.navrow { max-width: 880px; margin: 0 auto; padding: 8px 22px; display: flex; align-items: center;
          min-height: 58px; gap: 20px; flex-wrap: wrap; row-gap: 6px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 740; letter-spacing: -.025em; color: var(--text); white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo .mark { width: 24px; height: 24px; flex: none; }
.navrow .links { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
/* nowrap: these are labels, not prose. Left to wrap, "Sign in" and "Start free" broke over two
   lines on a 375px phone and doubled the height of the bar. They drop out instead, in order. */
.navrow .links a { color: var(--muted); white-space: nowrap; }
/* Text links keep their place in the bar but hit 40px tall (the bar is 56-62px); the
   negative margin cancels the padding in the layout, so only the touch area grows. */
.navrow .links a:not(.cta) { padding: 10px 0; margin: -10px 0; }
.navrow .links a.cta { color: #fff; background: linear-gradient(135deg, var(--accent-fill), var(--accent-fill-2));
                      border: 0; border-radius: 9px; padding: 9px 12px; margin: 0; font-weight: 640;
                      display: inline-block; }
.navrow .links a.cta:hover { text-decoration: none; filter: brightness(1.08); }
/* Four nav links plus the wordmark do not fit 375px at the default gap, and the overflow
   lands on <body> rather than inside anything scrollable. Three steps down, each one dropping
   what a phone reader needs least, so the wordmark, Sign in and Start free survive to 320px. */
@media (max-width: 640px) {
  .navrow { gap: 12px; padding: 8px 16px; }
  .navrow .links { gap: 13px; font-size: 13.5px; }
  /* The Start free button is wider than the text link it sits beside, so at this width the
     secondary links fold away rather than pushing the nav past the viewport. Docs and Sign in
     stay: one way in for a reader, one for a customer. */
  .navrow .links a.hide-xs { display: none; }
}
@media (max-width: 430px) {
  .navrow { gap: 10px; }
  .navrow .links { gap: 10px; font-size: 13px; }
  /* Vertical padding up, horizontal down: the button narrows without getting harder to hit. */
  .navrow .links a.cta { padding: 9px 10px; }
  .logo { font-size: 15px; }
}
@media (max-width: 359px) {
  /* Every page ends this row with Sign in and then Start free, so the last two children are
     the way in for a customer. Whatever precedes them is a link the page body also carries. */
  .navrow .links a:not(:nth-last-child(-n+2)) { display: none; }
}
footer.site { border-top: 1px solid var(--line); margin-top: 60px; }
.footrow { max-width: 880px; margin: 0 auto; padding: 28px 22px 44px; display: flex; gap: 10px 20px;
           flex-wrap: wrap; align-items: center; font-size: 13.5px; }
.footrow a { color: var(--muted); }
.footrow a:hover { color: var(--text); }
.footrow .made { color: var(--faint); margin-left: auto; }
@media (max-width: 700px) { .footrow .made { margin-left: 0; flex-basis: 100%; } }

/* ── Page body ────────────────────────────────────────────────────────────── */
main { max-width: 880px; margin: 0 auto; padding: 40px 22px 20px; }
h1 { font-size: clamp(28px, 4.2vw, 36px); letter-spacing: -.03em; line-height: 1.14; margin: 0 0 10px; text-wrap: balance; }
.sub { color: var(--muted); font-size: 17px; margin: 0 0 30px; max-width: 64ch; text-wrap: pretty; }
h2 { font-size: 22px; letter-spacing: -.02em; margin: 44px 0 10px; scroll-margin-top: 16px; text-wrap: balance; }
h3 { font-size: 16.5px; margin: 26px 0 6px; }
p, li { color: var(--muted); font-size: 15px; }
strong { color: var(--text); font-weight: 640; }
ul, ol { padding-left: 22px; }
li { margin: 5px 0; }
.pill { display: inline-block; font-size: 12px; font-weight: 650; color: var(--accent);
        background: var(--accent-soft); border: 1px solid var(--line); padding: 3px 11px;
        border-radius: 999px; margin-bottom: 14px; }
.updated { color: var(--faint); font-size: 13px; }

/* ── Boxes ────────────────────────────────────────────────────────────────── */
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 16px 0; }
.box > p { margin: 0; }
.box > p + p { margin-top: 10px; }
.box.good { border-color: var(--good); background: var(--good-soft); }
.box.warn { border-color: var(--warn); background: var(--warn-soft); }
.box .t { font-weight: 700; color: var(--text); }
.box.good .t { color: var(--good); }
.box.warn .t { color: var(--warn); }

/* ── Tables (comparisons) ─────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; margin: 16px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--faint); padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: bottom; }
th.us { color: var(--accent); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
td:first-child { color: var(--text); font-weight: 600; width: 21%; }
tbody tr:hover td { background: var(--panel); }
.yes { color: var(--good); font-weight: 700; }
.no { color: var(--faint); font-weight: 700; }

/* ── The two-column "who should pick what" cards ──────────────────────────── */
.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 18px 0; }
.verdict .card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.verdict .card.us { border-color: var(--accent); }
.verdict h3 { margin: 0 0 8px; font-size: 15.5px; color: var(--text); }
/* The card's heading link is the whole point of the card: give the finger a 36px row. */
.verdict h3 a { display: inline-block; padding: 7px 0; margin: -7px 0; }
.verdict ul { margin: 0; padding-left: 20px; }
.verdict li { font-size: 14px; }

/* ── The privacy-label tool ───────────────────────────────────────────────── */
.toolgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 26px; align-items: start; }
@media (max-width: 900px) { .toolgrid { grid-template-columns: 1fr; } }
.sticky { position: sticky; top: 18px; }
@media (max-width: 900px) { .sticky { position: static; } }
/* minmax(0, 1fr), not 1fr: a bare 1fr track refuses to shrink below its content's min-content
   width, and the long code samples in .td (setUserProperties([...])) then push the whole row —
   and the page — past the viewport on a phone. Pair it with wrapping inside the code spans. */
.opt { display: grid; grid-template-columns: 30px minmax(0, 1fr) 44px; gap: 12px; align-items: start; cursor: pointer;
       padding: 14px 4px; border-top: 1px solid var(--line); }
.opt:first-of-type { border-top: none; }
.opt.sub { padding-left: 26px; grid-template-columns: 20px minmax(0, 1fr) 44px; }
.opt .td code, .opt .tt { overflow-wrap: anywhere; }
.opt .ic { font-size: 18px; line-height: 1.4; }
.opt .tt { font-weight: 650; color: var(--text); font-size: 14.5px; display: block; margin-bottom: 3px; }
.opt .td { color: var(--muted); font-size: 13.5px; display: block; }
.opt .td code { font-size: 12.5px; }
.lbl-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; border-radius: 999px; padding: 2px 8px;
            margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.lbl-chip.always { color: var(--muted); background: var(--panel-2); }
.lbl-chip.none { color: var(--good); background: var(--good-soft); }
.lbl-chip.notlinked { color: var(--accent); background: var(--accent-soft); }
/* --accent-2 itself is 4.0:1 on this fill; the chip text is 10.5px, so it gets its own step (5.6:1 dark, 5.0:1 light). */
.lbl-chip.linked { color: var(--linked-text); background: rgba(139,92,246,.14); }
/* The switch */
.switch { position: relative; width: 40px; height: 24px; justify-self: end; margin-top: 2px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .trk { position: absolute; inset: 0; border-radius: 999px; background: var(--panel-2);
               border: 1px solid var(--line); transition: background .15s, border-color .15s; pointer-events: none; }
.switch .trk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
                      border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + .trk { background: var(--accent-soft); border-color: var(--accent); }
.switch input:checked + .trk::after { transform: translateX(16px); background: var(--accent); }
.switch input:focus-visible + .trk { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled { cursor: default; }
.switch input:disabled + .trk { opacity: .55; }
.subopts { border-left: 2px solid var(--line); margin: 0 0 0 14px; }
.subopts[hidden] { display: none; }

/* The App Store label preview card */
.privcard { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 14px;
            box-shadow: var(--shadow); }
.privcard .apphead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.privcard .apphead .icon { width: 40px; height: 40px; border-radius: 22%; flex: none; color: #fff; font-weight: 800;
                           display: flex; align-items: center; justify-content: center;
                           background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.privcard .nm { font-weight: 700; font-size: 15px; }
.privcard .sub2 { color: var(--faint); font-size: 12px; }
.privcard .sec { border-top: 1px solid var(--line); padding: 11px 0 9px; }
.privcard .sec:first-of-type { border-top: none; padding-top: 0; }
.privcard h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text); }
.privcard .exp { color: var(--muted); font-size: 12px; margin: 0 0 8px; }
.privcard .none { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.privcard .none .ti { width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--good-soft);
                      color: var(--good); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.privcard .types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
@media (max-width: 460px) { .privcard .types { grid-template-columns: 1fr; } }
.privcard .type { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.privcard .type .ti { width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--panel-2);
                      display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.privcard .cat { font-weight: 640; display: block; color: var(--text); }
.privcard .items { color: var(--faint); font-size: 11px; }
.privcard .fine { color: var(--faint); font-size: 11px; margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.flash { animation: flash .5s ease-out; }
@keyframes flash { from { background: var(--accent-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* The generated App Store Connect checklist */
.tick { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
        border-top: 1px solid var(--line); padding: 11px 0; }
.tick:first-child { border-top: none; }
.tick .box2 { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--good); color: var(--good);
              display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.tick .box2.n { border-color: var(--line); color: var(--muted); }
.tick b { color: var(--text); font-weight: 650; font-size: 14.5px; }
.tick .note { color: var(--muted); font-size: 13.5px; }
.tick .k { color: var(--faint); font-size: 12.5px; margin-top: 3px; }
.btn { font: inherit; font-size: 13.5px; font-weight: 640; padding: 8px 15px; border-radius: 9px; cursor: pointer;
       border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.copyrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }

/* CTA strip at the foot of every guide */
.cta { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin: 40px 0 0;
       display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cta h3 { margin: 0 0 4px; font-size: 17px; color: var(--text); }
.cta p { margin: 0; font-size: 14px; }
.cta .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .cta .actions { margin-left: 0; } }

/* ══════════════════════════════════════════════════════════════════════════════
   Visual components. These pages used to be walls of text; everything below is a
   way of SHOWING a claim instead of only stating it. All of them are plain CSS on
   plain markup, so there is nothing to load and nothing to break in a text browser.
   ══════════════════════════════════════════════════════════════════════════════ */

/* A visual row may be wider than the 880px reading column: prose stays narrow and
   readable, diagrams get the room they need. Centred by negative margins so the
   element can sit anywhere in the flow. */
.wide { width: min(1080px, calc(100vw - 44px)); margin-left: 50%; transform: translateX(-50%); }

/* ── Answer-first summary, straight under the h1 ───────────────────────────── */
.tldr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
        background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
        border-radius: 14px; padding: 16px 20px; margin: 22px 0 8px; }
.tldr .k { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
           color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.tldr p { margin: 0; font-size: 15px; }
.tldr p + p { margin-top: 8px; }
@media (max-width: 560px) { .tldr { grid-template-columns: 1fr; gap: 9px; } .tldr .k { justify-self: start; } }

/* ── On-page contents. Cheap orientation for a reader, and a set of internal
      anchor links search engines use to build jump-to results. ─────────────── */
.toc { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 22px 0 0; }
.toc .tochd { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint);
             margin: 0 0 9px; font-weight: 700; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px 22px;
          grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; font-size: 14px; }
.toc li a { display: block; padding: 3px 0; }
.toc li a::before { content: counter(toc) ". "; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ── Figures ──────────────────────────────────────────────────────────────── */
figure { margin: 20px 0; }
figcaption { color: var(--faint); font-size: 12.5px; margin-top: 10px; text-align: center; text-wrap: pretty; }

/* ── The three App Store privacy buckets, drawn ───────────────────────────── */
.buckets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Four buckets (the comparisons index) read as a 2 x 2 grid rather than three plus an orphan. */
.buckets.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 780px) { .buckets, .buckets.four { grid-template-columns: 1fr; } }
.bucket { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; position: relative; }
.bucket .cap { font-size: 26px; line-height: 1; margin-bottom: 10px; display: block; }
.bucket h3 { margin: 0 0 5px; font-size: 15px; color: var(--text); }
.bucket p { margin: 0; font-size: 13.5px; }
.bucket .verdict { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
                   font-weight: 700; border-radius: 999px; padding: 4px 11px;
                   color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); }
.bucket.here { border-color: var(--accent); box-shadow: var(--shadow); }
.bucket.here .verdict { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.bucket.clear .verdict { color: var(--good); background: var(--good-soft); border-color: transparent; }

/* ── Example label cards, shown side by side ──────────────────────────────── */
.exgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .exgrid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.excard { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.excard > .hd { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.excard > .hd h3 { margin: 0 0 3px; font-size: 14.5px; color: var(--text); }
.excard > .hd p { margin: 0; font-size: 12.5px; }
.excard .privcard { border: none; border-radius: 0; box-shadow: none; padding: 14px 16px 12px; background: transparent; }
.excard.pick { border-color: var(--accent); }
.excard.pick > .hd { background: var(--accent-soft); }

/* ── Yes / no decision flow ───────────────────────────────────────────────── */
.qflow { display: grid; gap: 10px; }
.qstep { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center;
         background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.qstep .n { width: 30px; height: 30px; border-radius: 10px; background: var(--panel-2); color: var(--muted);
            font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.qstep .q { font-weight: 650; color: var(--text); font-size: 14.5px; display: block; }
.qstep .why { color: var(--muted); font-size: 13px; display: block; margin-top: 2px; }
.qstep .a { font-size: 13px; font-weight: 800; letter-spacing: .04em; border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.qstep .a.yes { color: var(--accent); background: var(--accent-soft); }
.qstep .a.no { color: var(--good); background: var(--good-soft); }
.qstep.out { border-color: var(--good); background: var(--good-soft); grid-template-columns: 30px minmax(0, 1fr); }
.qstep.out .n { background: var(--good); color: #fff; }
@media (max-width: 620px) {
  .qstep { grid-template-columns: 30px minmax(0, 1fr); }
  .qstep .a { grid-column: 2; justify-self: start; }
}

/* ── Two lanes, compared side by side (identity models, where data goes) ──── */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .lanes { grid-template-columns: 1fr; } }
.lane { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.lane.us { border-color: var(--accent); }
.lane > h3 { margin: 0 0 3px; font-size: 15px; color: var(--text); display: flex; align-items: center; gap: 9px; }
.lane > h3 .tagx { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
                   border-radius: 999px; padding: 2px 9px; color: var(--muted); background: var(--panel-2); }
.lane.us > h3 .tagx { color: var(--accent); background: var(--accent-soft); }
.lane > p.sub3 { margin: 0 0 14px; font-size: 13px; color: var(--faint); }
/* The steps a piece of data takes, top to bottom, with a connector between them. */
.hop { position: relative; padding: 0 0 16px 26px; font-size: 13.5px; color: var(--muted); }
.hop:last-child { padding-bottom: 0; }
.hop::before { content: ""; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%;
               background: var(--panel-2); border: 2px solid var(--line); }
.hop::after { content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--line); }
.hop:last-child::after { display: none; }
.hop b { color: var(--text); font-weight: 650; display: block; }
.lane.us .hop::before { border-color: var(--accent); }
.hop.stop::before { border-color: var(--good); background: var(--good); }
.hop.bad::before { border-color: var(--warn); background: var(--warn); }

/* ── Horizontal bar comparison ────────────────────────────────────────────── */
.bars { display: grid; gap: 13px; background: var(--panel); border: 1px solid var(--line);
        border-radius: 16px; padding: 20px 22px; }
/* The track is deliberately bounded rather than elastic: a 4%-wide bar with its
   label pinned to the far right of a 1000px row reads as two unrelated things. */
.bars .row { display: grid; grid-template-columns: minmax(84px, 118px) minmax(110px, 240px) minmax(0, 1fr);
             gap: 14px; align-items: center; }
.bars .row .nm { font-size: 13.5px; font-weight: 650; color: var(--text); }
.bars .row .track { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.bars .row .track i { display: block; height: 100%; border-radius: 999px; background: var(--muted); min-width: 6px; }
.bars .row.us .track i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bars .row .val { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.bars .row.us .val { color: var(--text); font-weight: 650; }
.bars .cap2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; }
.bars .cap2 + .row { margin-top: -4px; }
.bars .foot2 { font-size: 12.5px; color: var(--faint); margin: 2px 0 0; }
@media (max-width: 620px) {
  .bars .row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .bars .row .track { order: 3; }
  .bars .row .val { order: 2; }
}

/* ── At-a-glance number strip ─────────────────────────────────────────────── */
.statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
             background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.statstrip .s { background: var(--panel); padding: 16px 18px; }
.statstrip .s .v { font-size: 22px; font-weight: 760; letter-spacing: -.025em; color: var(--text); font-variant-numeric: tabular-nums; }
.statstrip .s .v.g { color: var(--good); }
.statstrip .s .l { font-size: 12px; color: var(--muted); margin-top: 3px; text-wrap: pretty; }

/* ── Checklist scorecard (the questions to ask a vendor) ──────────────────── */
.score { display: grid; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.score .q2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 34%); gap: 8px 18px;
             padding: 13px 20px; border-top: 1px solid var(--line); align-items: baseline; }
.score .q2:first-child { border-top: none; }
.score .q2 .ask { font-size: 14px; color: var(--text); font-weight: 620; }
.score .q2 .want { font-size: 13px; color: var(--muted); }
.score .q2 .want b { color: var(--good); font-weight: 700; }
@media (max-width: 640px) { .score .q2 { grid-template-columns: 1fr; gap: 3px; } }

/* ── Small labelled chips used inline in prose and headings ───────────────── */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
       border-radius: 999px; padding: 3px 10px; vertical-align: 1px; }
.tag.ok { color: var(--good); background: var(--good-soft); }
.tag.no { color: var(--danger); background: rgba(248,113,113,.12); }
.tag.info { color: var(--accent); background: var(--accent-soft); }
.tag.warnt { color: var(--warn); background: var(--warn-soft); }

/* ── Platform switch, shared with the landing page's markup contract ──────── */
html[data-platform="android"] [data-plat="ios"] { display: none !important; }
html:not([data-platform="android"]) [data-plat="android"] { display: none !important; }

/* ── Preset buttons above the interactive tool ────────────────────────────── */
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; align-items: center; }
.presets .lbl2 { font-size: 12.5px; color: var(--faint); margin-right: 2px; }
.preset { font: inherit; font-size: 13px; font-weight: 620; padding: 7px 14px; border-radius: 999px; cursor: pointer;
          border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.preset:hover { border-color: var(--accent); color: var(--text); }
.preset.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ── Shared a11y utilities ── */
/* Skip link: first focusable thing on the page, visible only while focused. */
.skip { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 10px 14px; border-radius: 8px;
        background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow);
        font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; outline: 2px solid var(--accent); outline-offset: 2px; }
/* Visually hidden, still read by assistive tech (table captions, live notes). */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Wide tables: site.js wraps every .tablewrap / .cmpwrap in .scrollhint and keeps data-scroll
   current, and the edge that still has columns behind it gets a fade. Nothing shows when the
   table fits. The first column sticks so the row labels stay while the figures scroll. */
.scrollhint { position: relative; }
.scrollhint::before, .scrollhint::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px;
        pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 2; }
.scrollhint::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.scrollhint::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.scrollhint[data-scroll="start"]::after, .scrollhint[data-scroll="mid"]::after,
.scrollhint[data-scroll="mid"]::before, .scrollhint[data-scroll="end"]::before { opacity: 1; }
.scrollhint[data-scroll]:not([data-scroll="none"]) th:first-child,
.scrollhint[data-scroll]:not([data-scroll="none"]) td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .scrollhint::before, .scrollhint::after { transition: none; } }
.scrollhint tbody tr:hover td:first-child { background: var(--panel); }