/* Warm grays, one accent for what you can move, no boxes.
   Zone tones are one ordinal ramp (darker = more scanners read it), validated in both modes. */
:root {
  color-scheme: light;
  --surface: #f5f4f0;
  --ink: #1c1b18;
  --ink-2: #5c5a53;
  --ink-3: #8a877e;
  --rule: #dfddd6;
  --accent: #d4541c;
  --z-every: #1c1b18;
  --z-most: #54524b;
  --z-some: #86837a;
  --z-none: #aaa79d;
  --lane-0: #ebe9e3;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface: #1c1b18;
    --ink: #eceae4;
    --ink-2: #b9b6ad;
    --ink-3: #8a877e;
    --rule: #33322e;
    --accent: #e0602a;
    --z-every: #eceae4;
    --z-most: #b2afa6;
    --z-some: #7b7870;
    --z-none: #55534d;
    --lane-0: #262521;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1c1b18;
  --ink: #eceae4;
  --ink-2: #b9b6ad;
  --ink-3: #8a877e;
  --rule: #33322e;
  --accent: #e0602a;
  --z-every: #eceae4;
  --z-most: #b2afa6;
  --z-some: #7b7870;
  --z-none: #55534d;
  --lane-0: #262521;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--surface); }
body {
  color: var(--ink);
  font: 17px/1.55 system-ui, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 1040px; margin: 0 auto; padding: 56px 24px 72px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kicker { margin: 0 0 14px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
h1 { margin: 0; font-size: clamp(32px, 5vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; max-width: 14em; }
.lede { margin: 18px 0 0; font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.versus { margin-top: 24px; max-width: 46em; }
.versus-lede { margin: 0; font-size: 23px; line-height: 1.42; color: var(--ink); }
.versus a, .section-lede a, .method a, .fine a, .specimen a, .takeaway a, .primer a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.versus a:hover, .section-lede a:hover, .method a:hover, .fine a:hover, .specimen a:hover, .takeaway a:hover, .primer a:hover { color: var(--accent); }
.vbars { display: grid; gap: 12px; margin: 26px 0 8px; max-width: 660px; }
.vbar { display: grid; grid-template-columns: 200px minmax(0, 1fr) 104px; gap: 16px; align-items: center; }
.vlabel .name { display: block; font-weight: 600; }
.vlabel .what { display: block; font-size: 13px; color: var(--ink-3); }
.vtrack { height: 10px; background: var(--rule); border-radius: 0 3px 3px 0; }
.vfill { display: block; height: 100%; background: var(--ink); border-radius: 0 3px 3px 0; }
.vfill.est { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, transparent 3px 5px); } /* an estimate */
.vval { font-size: 24px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.share { margin: 20px 0 0; font-size: 17px; color: var(--ink-2); max-width: 40em; }
.vtrack.spread { position: relative; }
.vband { position: absolute; top: 0; bottom: 0; background: var(--ink-3); border-radius: 3px; }
.vdot { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--surface); }
h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.section-lede { margin: 0 0 28px; color: var(--ink-2); max-width: 38em; }
.fine { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); max-width: 52em; }
.block { padding: 56px 0 0; }
.block + .block { margin-top: 40px; border-top: 1px solid var(--rule); }

/* spectrum */
.spectrum { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: end; }
@media (max-width: 760px) { .spectrum { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.bell-figure { margin: 0; }
.chart { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
svg text { fill: var(--ink-2); font: 13px system-ui, -apple-system, "Helvetica Neue", "Segoe UI", sans-serif; }
svg .muted { fill: var(--ink-3); }
svg .strong { fill: var(--ink); font-weight: 600; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 6px 0 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 1px; background: var(--rule); }
.range::-moz-range-track { height: 1px; background: var(--rule); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6.5px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.takeaway { margin: 28px 0 0; font-size: 20px; line-height: 1.45; max-width: 34em; }
.bell-key { margin: 0 0 14px; }
.readout { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; min-height: 1.45em; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.zone { font-size: 14px; color: var(--ink-2); }

.specimen { display: grid; gap: 10px; align-content: start; }
.specimen img { width: 100%; max-width: 220px; aspect-ratio: 1; display: block; border-radius: 2px; background: var(--rule); }
.specimen .big { font-size: 22px; line-height: 1.25; font-weight: 600; }
.specimen .small { font-size: 14px; color: var(--ink-2); }
.specimen .src { font-size: 13px; color: var(--ink-3); }
.linklike { font: inherit; font-size: 14px; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); justify-self: start; }
.linklike:hover { color: var(--ink); text-decoration-color: var(--ink-3); }


/* pairs */
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 40px 36px; }
.pair h3 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.pair .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair figure { margin: 0; }
.pair img { width: 100%; aspect-ratio: 1; display: block; border-radius: 2px; background: var(--rule); }
.pair figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-2); display: grid; gap: 4px; }
.pair figcaption .count { color: var(--ink); font-weight: 600; }
.pair p { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }

/* details */
.more { margin-top: 32px; }
.more summary {
  cursor: pointer; display: inline-block; font-size: 15px; color: var(--ink-2); list-style: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 2px;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " +"; color: var(--ink-3); }
.more[open] summary::after { content: " −"; }
.more summary:hover { color: var(--ink); }
.more-body { padding-top: 24px; }

/* segmented control */
.seg { display: inline-flex; gap: 0; border: 1px solid var(--rule); border-radius: 999px; padding: 3px; margin: 0 0 20px; flex-wrap: wrap; }
.seg button {
  font: inherit; font-size: 14px; color: var(--ink-2); background: none; border: 0; border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.seg .px { margin-left: 2px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] .px { color: inherit; opacity: 0.7; }

/* image resolution: what the choice sets, each setting in pixels, what the chosen one means */
.res { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; margin: 0 0 22px; }
.res-label { font-size: 13px; color: var(--ink-3); }
.res .seg { margin: 0; justify-self: start; flex-wrap: nowrap; }
.res-note { grid-column: 2; margin: 0; font-size: 14px; color: var(--ink-2); max-width: 44em; }
.seg button:focus-visible, .linklike:focus-visible, .more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* android grid */
.grid-wrap { overflow-x: auto; }
.phones { border-collapse: collapse; width: 100%; }
.phones th, .phones td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--rule); font-weight: 400; }
.phones thead th { font-size: 13px; color: var(--ink-3); border-bottom-color: var(--ink-3); }
.phones th[scope="row"] { text-align: left; }
.phones .name { display: block; color: var(--ink); font-size: 15px; }
.phones .what { display: block; color: var(--ink-3); font-size: 12px; }
.phones .group td, .phones .group th { padding-top: 22px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: left; }
.phones .pct { display: block; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Android: one strip per set */
.skey { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.skey > span { display: inline-flex; align-items: center; gap: 8px; }
.skey .mark { position: static; margin: 0; }
.strips { display: grid; gap: 10px; }
.srow { display: grid; grid-template-columns: 132px minmax(0, 1fr) 104px; gap: 16px; align-items: center; }
.slabel { font-size: 15px; }
.strack { position: relative; height: 24px; }
.strack::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.sband { position: absolute; top: 50%; height: 6px; margin-top: -3px; background: var(--ink-3); opacity: 0.35; border-radius: 3px; }
.mark { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; display: inline-block; }
.mark.other { background: var(--ink-3); }
.mark.own { background: var(--ink); width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.mark.google { background: var(--ink); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 1px; transform: rotate(45deg); } /* fits inside Apple's ring where they meet */
.mark.apple { background: var(--surface); border: 2px solid var(--ink); width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.mark.huawei { background: var(--ink); width: 12px; height: 11px; margin: -6px 0 0 -6px; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mark.samsung { background: var(--surface); border: 2px solid var(--ink); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 1px; } /* hollow: an estimate */
.skey .mark.own, .skey .mark.apple, .skey .mark.other, .skey .mark.huawei, .skey .mark.samsung { margin: 0; }
.skey .mark.google { margin: 0 2px; }
.sval { font-size: 15px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shead .sval, .saxis { font-size: 12px; color: var(--ink-3); }
.saxis .strack { height: 16px; display: flex; justify-content: space-between; }
.saxis .strack::before { display: none; }
#stripNote { font-size: 18px; margin-top: 22px; }
#numbers { margin-top: 18px; }
.phones td { font-variant-numeric: tabular-nums; }

/* advice */
.advice { margin: 0; padding: 0; list-style: none; counter-reset: a; display: grid; gap: 22px; max-width: 44em; }
.advice li { counter-increment: a; display: grid; grid-template-columns: 36px minmax(0, 1fr); }
.advice li::before { content: counter(a); color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.advice strong { display: block; font-weight: 600; }
.advice span { color: var(--ink-2); }

/* explorer (inside "Explore all 15 factors") */
.pills { display: flex; flex-wrap: wrap; gap: 6px 4px; margin-bottom: 20px; }
.pills button { font: inherit; font-size: 14px; color: var(--ink-2); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.pills button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.about { margin: 0 0 18px; color: var(--ink-2); max-width: 40em; }
.about.breaks { margin-top: -8px; }
.about.breaks strong, .primer strong { color: var(--ink); font-weight: 600; }
.primer { margin: 0 0 28px; max-width: 40em; }
.primer h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.primer ol { margin: 0 0 6px; padding-left: 1.4em; color: var(--ink-2); }
.primer li { margin: 3px 0; }
.explore { display: grid; grid-template-columns: minmax(200px, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 720px) { .explore { grid-template-columns: minmax(0, 1fr); } }
.explore img { width: 100%; max-width: 360px; aspect-ratio: 1; display: block; border-radius: 2px; background: var(--rule); }
.explore .step { margin-top: 10px; font-weight: 600; }
.explore .seg { margin: 4px 0 0; }
.ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 16px; }
.headline .step { margin: 0; }
.rows { display: grid; gap: 10px; margin-top: 14px; }
.row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: 14px; }
.row .label { color: var(--ink-3); }
.row.ok .label { color: var(--ink); }
.row .track { position: relative; height: 6px; background: var(--rule); border-radius: 3px; }
.row .fill { display: block; height: 100%; background: var(--ink-3); border-radius: 3px; }
.row.ok .fill { background: var(--ink); }
.row .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink-2); }
.row .val { text-align: right; font-variant-numeric: tabular-nums; }
.tips { display: grid; gap: 6px; margin-top: 40px; }
.tips h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.tip-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; }
.tip-row .label { font-size: 13px; color: var(--ink-2); }
.tip-cells { display: grid; gap: 2px; }
.tip-cells .tip-none { height: 24px; box-sizing: border-box; border: 1px dashed var(--rule); border-radius: 2px; font: 600 10.5px/22px system-ui, -apple-system, sans-serif; color: var(--ink-3); text-align: center; overflow: hidden; white-space: nowrap; } /* printed bigger: too big for the picture */
.tip-cells button { height: 24px; border: 0; border-radius: 2px; padding: 0; cursor: pointer; font: 600 10.5px/24px system-ui, -apple-system, sans-serif; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .tip-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin: 14px 0 0; }
.key i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.key-title { color: var(--ink-3); }
.lanes-key { margin: 0 0 12px; }
.key i.ramp { width: 44px; background: linear-gradient(to right, var(--lane-0), var(--z-every)); }
.key i.uline { width: 18px; height: 3px; border-radius: 0; background: var(--accent); vertical-align: 3px; }

/* method */
.footer { padding-bottom: 8px; }
.method p, .method li { color: var(--ink-2); font-size: 15px; max-width: 46em; }
.method h3 { margin: 28px 0 6px; font-size: 16px; font-weight: 600; }
.method ul { padding-left: 18px; margin: 6px 0; }
.method a { color: var(--ink); text-decoration-color: var(--ink-3); text-underline-offset: 3px; }

.tooltip {
  position: fixed; z-index: 20; pointer-events: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 6px; padding: 7px 10px; font-size: 13px; line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10); max-width: 260px;
}
.tooltip .v { font-weight: 600; }
.tooltip .k { color: var(--ink-2); }

@media (max-width: 560px) {
  .versus-lede { font-size: 19px; }
  .vbar { grid-template-columns: 112px minmax(0, 1fr) 84px; gap: 10px; }
  .vval { font-size: 20px; }
  .vval.wide { font-size: 16px; } /* a range, "27%–67%", fits the column */
  .phones th, .phones td { padding: 10px 4px; }
  .phones thead th { font-size: 11px; }
  .phones .name { font-size: 14px; }
  body { font-size: 16px; }
  .page { padding: 36px 16px 56px; }
  .lede, .takeaway { font-size: 18px; }
  .row { grid-template-columns: 108px minmax(0, 1fr) 44px; gap: 10px; }
  .srow { grid-template-columns: 84px minmax(0, 1fr) 92px; gap: 10px; }
  .res { grid-template-columns: minmax(0, 1fr); }
  .res-note { grid-column: 1; }
  .res .seg button { padding: 6px 10px; }
  .slabel, .sval { font-size: 14px; }
  .block { padding-top: 40px; }
}
@media print {
  .range, .seg, .linklike, .tooltip { display: none !important; }
  .block + .block { break-before: auto; }
}
.who th.left, .who td.left { text-align: left; } /* the phones table: names left, numbers centred */
.specimen .scan-it { display: inline-block; margin: 8px 0 4px; font-size: 13px; color: var(--ink-2); } /* the exact picture, to scan */