/* Battery Ranking, batteryranking.com.
   vestris.ai's warm cream, painted skies, serif voice and olive buttons, carrying
   the internal metrics dashboard's language: tonal linked cards (28px outer
   corners, 6px joins, 2px seams, no shadows), slate/clay/sage measure bars,
   Phosphor icons and hatching only for withheld values. Light mode only. */

@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin.5eb09b5ac0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin-italic.5a51946dff.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-latin-ext.ee9eeb232c.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-grotesk-latin.4c8b93f431.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --page: #f1efe6;
  --page-deep: #e9e6da;
  --surface: #fbfaf5;
  --surface-low: #f5f3eb;
  --control: #e7e4d8;
  --control-hover: #dedacb;
  --ink: #23251f;
  --ink-2: #55574d;
  --muted: #66685d;
  --hair: #e2dfd3;
  --axis: #b2b0a3;
  --olive: #5b5f47;
  --olive-hover: #484c37;
  --on-olive: #f6f4ec;
  --active: #4b7188;
  --standby: #9b7558;
  --charging: #537f73;
  --measure: var(--ink-2);
  --wash: #f3f1e9;
  --selected: #e4e6d6;
  --glass: rgba(251, 250, 245, .78);
  --glass-edge: rgba(91, 95, 71, .16);
  --hatch-ink: rgba(48, 54, 48, .35);
  --card-corner: 28px;
  --join-corner: 6px;
  --join-gap: 2px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header: 84px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
.m-active { --measure: var(--active); }
.m-standby { --measure: var(--standby); }
.m-charging { --measure: var(--charging); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); scrollbar-color: var(--axis) transparent; scrollbar-width: thin; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--olive); }
::selection { background: rgba(91, 95, 71, .22); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--axis); transition: text-decoration-color .2s, color .2s, background-color .2s; }
a:hover { text-decoration-color: var(--olive); }
/* Text-only links that open a new tab get an arrow after them. */
a[target='_blank']:not(:empty):not(:has(*))::after { content: "↗️"; display: inline-block; margin-inline-start: 0.125rem; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
.r-rank, .val { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite, .defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.hatch-line { stroke: var(--hatch-ink); stroke-width: 1; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--olive); color: var(--on-olive); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- type */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; text-align: center; font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.1rem); color: var(--ink); }
.display em { font-style: italic; letter-spacing: -.015em; }
.display-hero { font-size: clamp(3rem, 1.5rem + 5.6vw, 6rem); line-height: .98; }
.display-left { text-align: left; }
.display-small { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem); }
.lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 44em; }

/* ---------------------------------------------------------------- buttons, links */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--olive); color: var(--on-olive);
  font: 500 .98rem/1.25 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s, transform .2s var(--ease); }
.button:hover { background: var(--olive-hover); color: var(--on-olive); }
.button:active { transform: translateY(1px); }
.button-soft { background: var(--control); color: var(--ink); }
.button-soft:hover { background: var(--control-hover); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--olive); }
.text-link .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.text-link:hover { color: var(--olive-hover); }
.text-link:hover .icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- header: the floating bar */
.site-header { position: sticky; top: 0; z-index: 30; height: var(--header); padding: 12px var(--gutter) 0; pointer-events: none; }
.nav-bar { pointer-events: auto; max-width: var(--wrap); margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 20px; padding: 0 10px 0 18px;
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 16px; }
@supports (backdrop-filter: blur(1px)) { .nav-bar { backdrop-filter: blur(18px) saturate(1.25); } }
@media (prefers-reduced-transparency: reduce) { .nav-bar { background: var(--surface); backdrop-filter: none; } }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: none; }
.brand-icon { width: 26px; height: 26px; }
.brand-name { font-family: var(--serif); font-size: 1.62rem; letter-spacing: -.01em; line-height: 1; }
.site-nav { display: flex; gap: 2px; margin: 0 auto; }
.site-nav a { text-decoration: none; font-size: .95rem; padding: 8px 13px; border-radius: 10px; color: var(--ink); white-space: nowrap; }
.site-nav a:hover { background: var(--control); }
.site-nav a[aria-current="page"] { background: var(--control); }
.nav-menu { display: none; }
.search-header { width: 230px; flex: none; }
.search-header input { height: 40px; font-size: .92rem; padding: 0 34px 0 38px; background: var(--surface); }
.search-header .search-icon { left: 13px; width: 16px; height: 16px; }
.search-key { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 400 .8rem/1 var(--sans); color: var(--muted); pointer-events: none; }
.search-header input:focus ~ .search-key { opacity: 0; }

/* ---------------------------------------------------------------- search pill (dashboard) */
.search { position: relative; display: flex; align-items: center; }
.search input { width: 100%; height: 52px; border: 1px solid transparent; border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 1rem var(--sans);
  padding: 0 18px 0 48px; appearance: none; transition: border-color .2s, box-shadow .2s; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus { outline: none; border-color: var(--olive); box-shadow: 0 0 0 3px rgba(91, 95, 71, .14); }
.search input::-webkit-search-cancel-button { appearance: none; display: none; }
.search-clear { position: absolute; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; }
.search-clear:hover { background: var(--control); color: var(--ink); }
.search-clear:active { background: var(--selected); }
.search-clear .icon { width: 14px; height: 14px; }
.search:has(.search-clear:not([hidden])) input { padding-right: 52px; }
.search:has(.search-go):has(.search-clear:not([hidden])) input { padding-right: 136px; }
.search:has(.search-go) .search-clear { right: 96px; }
.search-large:has(.search-go) .search-clear { right: 114px; }
.search-header .search-clear { right: 6px; width: 28px; height: 28px; }
.search-header:has(.search-clear:not([hidden])) .search-key { display: none; }
.search-icon { position: absolute; left: 18px; width: 18px; height: 18px; color: var(--ink-2); pointer-events: none; }
.search-go { position: absolute; right: 6px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--olive); color: var(--on-olive); font: 500 .92rem var(--sans); cursor: pointer; }
.search-go:hover { background: var(--olive-hover); }
.search:has(.search-go) input { padding-right: 112px; }
.search-large input { height: 62px; font-size: 1.06rem; padding-left: 52px; box-shadow: 0 0 0 1px var(--glass-edge); }
.search-large .search-icon { left: 20px; }
.search-large .search-go { height: 48px; right: 7px; padding: 0 22px; }
.search-list { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; text-align: left;
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 16px; max-height: min(420px, 60vh); overflow: auto; }
@supports (backdrop-filter: blur(1px)) { .search-list { backdrop-filter: blur(24px) saturate(1.2); background: rgba(251, 250, 245, .94); } }
.search-header .search-list { left: auto; width: min(420px, 90vw); }
.search-list li { display: grid; grid-template-columns: 1fr auto; gap: 1px 16px; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.search-list li[aria-selected="true"], .search-list li:hover { background: var(--selected); }
.search-list .opt-name { font-size: .98rem; line-height: 1.3; }
.search-list .opt-sub { grid-column: 1; font-size: .78rem; color: var(--muted); }
.search-list .opt-rank { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-size: .78rem; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.search-list .opt-empty { display: block; color: var(--muted); cursor: default; font-size: .92rem; }
.search-list .opt-empty:hover { background: none; }

/* ---------------------------------------------------------------- ranking rows (dashboard) */
.rank-list { --cols: 44px minmax(150px, 1.55fr) minmax(110px, 1fr) repeat(3, minmax(108px, 1fr)); }
.rank-head { display: grid; grid-template-columns: var(--cols); gap: 16px; padding: 0 20px 10px; font-size: .8rem; color: var(--ink-2); align-items: end; }
.rank-head span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.rank-head .icon { width: 15px; height: 15px; color: var(--measure); }
.rank-head small { flex-basis: 100%; font-size: .72rem; color: var(--muted); padding-left: 21px; }
.rank-head .h-rank { justify-content: center; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--join-gap); }
.row-link { display: grid; grid-template-columns: var(--cols); gap: 16px; align-items: center; min-height: 58px; padding: 8px 20px; background: var(--surface); border-radius: var(--join-corner);
  color: var(--ink); text-decoration: none; transition: background-color .15s; }
.row:first-child .row-link { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.row:last-child .row-link { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.row-link:hover { background: var(--wash); }
.row.is-current .row-link { background: var(--selected); }
.row-link:focus-visible { outline-offset: -2px; position: relative; z-index: 1; }
.r-rank { text-align: center; font-size: .92rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.r-name { display: flex; flex-direction: column; min-width: 0; }
.r-brand { font-size: .74rem; color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-model { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.r-score, .r-m { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.r-m .icon { display: none; }
.bar { width: 100%; height: 5px; }
.bar .track { fill: var(--control); }
.bar .fill { fill: var(--measure); }
.bar-index .fill { fill: var(--ink-2); }
.val { font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; min-width: 3.4em; }
.r-score .val { min-width: 2.6em; }
.unit { color: var(--muted); font-size: .8em; }
.table-note { font-size: .86rem; color: var(--muted); margin: 16px 0 0; max-width: 78ch; }

/* ---------------------------------------------------------------- shared sections */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(88px, 11vw, 150px) var(--gutter) 0; }
.section > .display { max-width: 18ch; margin: 0 auto; }
.section-more { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 28px 0 0; }
.section-more-center { justify-content: center; }
.card { background: var(--surface); border-radius: var(--card-corner); }

/* Keys: a drawn glyph and a few words, in place of a caption that explains a figure. */
.keys { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.keys-center { justify-content: center; }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key-bar::before, .key-crowd::before, .key-median::before, .key-dot::before, .key-top::before, .key-tick::before, .key-median-mark::before { content: ""; flex: none; }
.key-bar::before { width: 26px; height: 5px; border-radius: 3px; background: linear-gradient(to right, var(--ink-2) 0 62%, var(--control) 62%); }
.key-crowd::before { width: 16px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--measure) 16%, transparent); border: 1px solid color-mix(in srgb, var(--measure) 35%, transparent); }
.key-median::before { width: 18px; border-top: 1.5px dashed var(--ink-2); }
.measure .key-median::before { width: 0; height: 12px; border-top: 0; border-left: 1.5px dashed var(--ink-2); }
.key-dot::before { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.key-top::before { width: 18px; height: 2px; background: var(--ink); }
.key-tick::before { width: 1.5px; height: 14px; background: var(--ink-2); opacity: .6; }
.key-median-mark::before { width: 9px; height: 7px; background: var(--olive); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.list-meta { display: flex; flex-wrap: wrap; margin: 0; color: var(--ink-2); }

/* ---------------------------------------------------------------- home: hero */
.page-home main { margin-top: calc(-1 * var(--header)); }
.hero { position: relative; isolation: isolate; padding: calc(var(--header) + clamp(36px, 7vh, 96px)) var(--gutter) 0; }
.hero-sky { position: absolute; inset: 0 0 auto; height: min(1080px, 112svh); z-index: -1; overflow: hidden; }
.hero-painting { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-sky::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(241, 239, 230, .38) 0%, rgba(241, 239, 230, .16) 38%, rgba(241, 239, 230, .55) 66%, var(--page) 94%); }
.hero-copy { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-copy .display-hero { margin-bottom: 26px; }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 32px; font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); color: #45473d; }
.hero-stats .num { color: var(--ink); font-weight: 500; }
.hero-stats > span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--axis); vertical-align: .22em; }
/* Left-aligned meta lines: every item carries a leading dot, and the line is shifted
   left by one dot so the dot that would start a wrapped line is clipped. */
.list-meta, .phone-sub { margin-left: -28px !important; clip-path: inset(-6px -6px -6px 28px); }
.list-meta > span::before, .phone-sub > span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px; border-radius: 50%; background: var(--axis); vertical-align: .22em; }
.hero-copy .search { max-width: 640px; margin: 0 auto; }
.hero-frame { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 12px; border-radius: calc(var(--card-corner) + 12px); background: rgba(251, 250, 245, .5); border: 1px solid var(--glass-edge); }
@supports (backdrop-filter: blur(1px)) { .hero-frame { backdrop-filter: blur(16px) saturate(1.15); } }
.frame-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 8px 14px 16px; font-size: .86rem; }
.frame-title { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.frame-title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--charging); vertical-align: 1px; }
.frame-meta { color: var(--ink-2); }
.frame-all { margin-left: auto; font-size: .92rem; }
.hero[data-search] .frame-meta { display: none; }
.hero[data-search] .frame-title::before { background: var(--olive); }
.hero-empty { display: flex; justify-content: center; margin: 0; padding: 28px 20px; border-radius: var(--card-corner); background: var(--surface); }
.hero-frame .rank-head { padding-top: 0; }
.hero-frame .keys { margin: 12px 14px 4px; color: var(--ink-2); }
/* Hero headline: site.js brushes each changed word into the next headline with a
   stroke in that headline's measure colour. Every headline is two fixed rows; the
   size caps at the width that keeps the widest row on one line. The heading keeps
   the height of its tallest headline (set by site.js), so nothing below moves. Words become boxes (.ht-*) only while a stroke runs. */
.display-hero[data-headlines] { display: flex; flex-direction: column; justify-content: flex-end; --brush: var(--ink-2);
  font-size: min(clamp(3rem, 1.5rem + 5.6vw, 6rem), calc((100vw - 2 * var(--gutter)) / 8.2)); }
.display-hero[data-measure="active"] { --brush: var(--active); }
.display-hero[data-measure="standby"] { --brush: var(--standby); }
.display-hero[data-measure="charging"] { --brush: var(--charging); }
.hero-words { display: block; }
.ht-word { position: relative; display: inline-block; white-space: nowrap; }
.ht-ink { display: inline-block; padding: .3em .15em .3em 0; margin: -.3em -.15em -.3em 0; }
.ht-new { position: absolute; top: 0; left: 0; }
.ht-brush { position: absolute; top: .1em; bottom: -.02em; left: 0; width: 0; pointer-events: none; background: var(--brush);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cfilter id='p' x='0' y='0' width='240' height='60' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0125 .24' numOctaves='3' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 .12' result='streaks'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025 .1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1' result='m'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='m' scale='18' xChannelSelector='R' yChannelSelector='G' result='edge'/%3E%3CfeComposite in='streaks' in2='edge' operator='in'/%3E%3C/filter%3E%3Crect width='240' y='9' height='42' filter='url(%23p)'/%3E%3C/svg%3E") 0 50% / 4.8em 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cfilter id='p' x='0' y='0' width='240' height='60' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0125 .24' numOctaves='3' seed='7' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 .12' result='streaks'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025 .1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1' result='m'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='m' scale='18' xChannelSelector='R' yChannelSelector='G' result='edge'/%3E%3CfeComposite in='streaks' in2='edge' operator='in'/%3E%3C/filter%3E%3Crect width='240' y='9' height='42' filter='url(%23p)'/%3E%3C/svg%3E") 0 50% / 4.8em 100% repeat-x; }
.ht-probe { position: absolute; visibility: hidden; }
.ht-measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* "backwards", not "both": a held transform would make each child a stacking context and trap overlays */
  .hero-copy > * { animation: rise .9s var(--ease) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-frame { animation: rise 1.1s var(--ease) .3s backwards; }
  .hero-painting { animation: settle 2.4s var(--ease) backwards; } /* not "both": a held blur slows every repaint over the sky */
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes settle { from { transform: scale(1.06); filter: blur(4px); } }
/* The living sky (assets/sky.js): the painting's own brushwork drifting in WebGL over the
   still image, which stays as the first paint and the fallback. The hero's sky also lags
   the scroll a little, so the glass frame slides over it. */
.sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s var(--ease); }
.sky-canvas[data-live] { opacity: 1; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-painting { animation: settle 2.4s var(--ease) backwards, sky-lag linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    .hero-sky .sky-canvas { animation: sky-lag linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes sky-lag { to { translate: 0 14%; } }
/* The top six arrive in rank order, each bar drawing out from the left. Only the first
   paint plays it: site.js drops data-enter once a search replaces the rows. */
@media (prefers-reduced-motion: no-preference) {
  .hero-frame[data-enter] .row { animation: row-in .8s var(--ease) calc(.5s + var(--i, 0) * 70ms) backwards; }
  .hero-frame[data-enter] .row .fill { transform-box: fill-box; transform-origin: 0 50%; animation: grow 1.2s var(--ease) calc(.62s + var(--i, 0) * 70ms + var(--j, 0) * 70ms) backwards; }
  .hero-frame .row:nth-child(2) { --i: 1; } .hero-frame .row:nth-child(3) { --i: 2; } .hero-frame .row:nth-child(4) { --i: 3; }
  .hero-frame .row:nth-child(5) { --i: 4; } .hero-frame .row:nth-child(6) { --i: 5; }
  .hero-frame .r-m.m-active { --j: 1; } .hero-frame .r-m.m-standby { --j: 2; } .hero-frame .r-m.m-charging { --j: 3; }
}
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------------------------------------------------------------- home: one sky all day
   The home page has no cream ground: one sky stays behind it, fixed to the viewport, the
   morning Cloud Study at the top giving way to the dusk Cloud Study with Trees by the
   ranked section. site.js sets --dusk from the scroll; assets/sky.js lays the dusk over the
   morning in brush strokes in WebGL, and the two images crossfade without it. A cream veil
   keeps ink readable; everything else sits in glass frames and surface cards. */
.day-sky { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; pointer-events: none; }
.day-painting { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.day-dusk { object-position: 50% 80%; opacity: var(--dusk, 0); }
.day-sky::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(241, 239, 230, .36), rgba(241, 239, 230, .14) 32%, rgba(241, 239, 230, .3) 68%, rgba(241, 239, 230, .48)); }
@media (prefers-reduced-motion: no-preference) { .day-morning { animation: settle 2.4s var(--ease) backwards; } }
.page-home .site-footer { position: relative; background: var(--page); border-top: 0; }

/* The horizon: every ranked phone as a slim bar in official order, as tall as its
   screen-on time, standing on the line the top six rise from. Slate for screen on, the
   top three in ink. The bars rise in a wave from the left on the first paint. */
.horizon { position: relative; margin: clamp(28px, 5vh, 56px) calc(-1 * var(--gutter)) 0; }
.horizon-svg { display: block; width: 100%; height: clamp(104px, 19vh, 200px); overflow: visible; touch-action: pan-y; }
.horizon-svg:focus-visible { outline-offset: 4px; }
.horizon-svg.is-line { cursor: pointer; }
.hz-run { fill: var(--active); fill-opacity: .82; transition: fill-opacity .2s; }
.horizon-svg.is-line .hz-run { fill-opacity: .5; }
.hz-hover { fill: var(--ink); }
.hz-ground { stroke: var(--ink-2); stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.horizon-keys { position: absolute; top: 2px; right: var(--gutter); flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; font-size: .78rem; color: var(--ink); pointer-events: none; }
.key-hz::before { content: ""; flex: none; width: 14px; height: 12px;
  background: linear-gradient(var(--active), var(--active)) 0 100% / 2px 55% no-repeat, linear-gradient(var(--active), var(--active)) 4px 100% / 2px 100% no-repeat,
    linear-gradient(var(--active), var(--active)) 8px 100% / 2px 75% no-repeat, linear-gradient(var(--active), var(--active)) 12px 100% / 2px 40% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .hz-run { transform-box: fill-box; transform-origin: 50% 100%; animation: rise-up 1.3s var(--ease) calc(.28s + var(--k, 0) * 32ms) backwards; }
  .hz-run:nth-of-type(2) { --k: 1; } .hz-run:nth-of-type(3) { --k: 2; } .hz-run:nth-of-type(4) { --k: 3; } .hz-run:nth-of-type(5) { --k: 4; } .hz-run:nth-of-type(6) { --k: 5; } .hz-run:nth-of-type(7) { --k: 6; }
  .hz-run:nth-of-type(8) { --k: 7; } .hz-run:nth-of-type(9) { --k: 8; } .hz-run:nth-of-type(10) { --k: 9; } .hz-run:nth-of-type(11) { --k: 10; } .hz-run:nth-of-type(12) { --k: 11; } .hz-run:nth-of-type(13) { --k: 12; }
  .hz-run:nth-of-type(14) { --k: 13; } .hz-run:nth-of-type(15) { --k: 14; } .hz-run:nth-of-type(16) { --k: 15; } .hz-run:nth-of-type(17) { --k: 16; } .hz-run:nth-of-type(18) { --k: 17; } .hz-run:nth-of-type(19) { --k: 18; }
  .hz-run:nth-of-type(20) { --k: 19; } .hz-run:nth-of-type(21) { --k: 20; } .hz-run:nth-of-type(22) { --k: 21; } .hz-run:nth-of-type(23) { --k: 22; } .hz-run:nth-of-type(24) { --k: 23; }

}
@keyframes rise-up { from { transform: scaleY(0); } }

/* Glass over the sky: the top six's frame for every home section, translucent cream with
   a blur where a mouse suggests the device can afford it. Links on the open sky sit on
   small glass pills so they keep their contrast. */
.glass-frame { padding: 12px; border-radius: calc(var(--card-corner) + 12px); background: rgba(251, 250, 245, .66); border: 1px solid var(--glass-edge); }
@media (hover: hover) and (pointer: fine) { @supports (backdrop-filter: blur(1px)) { .glass-frame { background: rgba(251, 250, 245, .52); backdrop-filter: blur(16px) saturate(1.15); } } }
@media (prefers-reduced-transparency: reduce) { .glass-frame { background: var(--surface-low); backdrop-filter: none; } }
.glass-frame .frame-title a { color: inherit; }
.sky-links .text-link { margin: 0; padding: 10px 18px; border-radius: 999px; background: rgba(251, 250, 245, .74); border: 1px solid var(--glass-edge); }
.sky-links .text-link:hover { background: var(--surface); }

@keyframes grow { from { transform: scaleX(0); } }

/* ---------------------------------------------------------------- method flow
   Stages are columns and measures are lanes; below 960px the grid transposes so
   stages become rows. Stage cards are linked like ranking rows. */
.flow { margin: 44px 0 0; }
.read-head .flow { margin-top: 28px; }
.flow-cap { margin: 0 0 12px 6px; font-size: .86rem; color: var(--ink-2); }
.flow-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--join-gap); }
.flow-stage { grid-row: 1 / 6; background: var(--surface); border-radius: var(--join-corner); }
.flow-stage.s1 { border-top-left-radius: var(--card-corner); border-bottom-left-radius: var(--card-corner); }
.flow-stage.s5 { background: var(--selected); border-top-right-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.s1 { grid-column: 1; } .s2 { grid-column: 2; } .s3 { grid-column: 3; } .s4 { grid-column: 4; } .s5 { grid-column: 5; }
.l1 { grid-row: 2; } .l2 { grid-row: 3; } .l3 { grid-row: 4; }
.flow-head { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 20px; padding: 20px 0 8px; font-size: .8rem; color: var(--ink-2); }
.flow-arrow { width: 15px; height: 15px; color: var(--axis); }
.flow-cell, .flow-foot { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; margin: 0 20px; padding: 10px 0; }
.flow-cell.l2, .flow-cell.l3, .flow-foot { border-top: 1px solid var(--hair); }
.flow-foot { grid-row: 5; padding-bottom: 18px; }
.flow-m { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: .92rem; }
.flow-m .icon { width: 17px; height: 17px; color: var(--measure); }
.flow-v { margin-left: auto; font-size: 1.02rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-cell.s2 { gap: 8px; }
.flow-cell.s2::before { content: ""; flex: none; width: 14px; height: 5px; border-radius: 999px; background: var(--measure); }
.flow-cell.s2 .flow-v { margin-left: 0; }
.flow-bar { flex: 1 1 auto; min-width: 24px; height: 6px; }
.flow-bar .track { fill: var(--control); }
.flow-bar .fill, .flow-bar .seg { fill: var(--measure); }
.flow-w { flex: none; min-width: 2.7em; font-size: .8rem; color: var(--measure); font-variant-numeric: tabular-nums; }
.flow-foot .flow-w { color: var(--ink-2); }
.flow-foot .flow-v { font-weight: 500; }
.flow-score { grid-row: 2 / 6; align-self: center; margin: 0 24px; padding: 8px 0 20px; }
.flow-rug { margin: 0 0 14px; }
.rug { display: block; width: 100%; height: 28px; }
.rug-below { fill: var(--ink-2); opacity: .6; }
.rug-above { fill: var(--axis); opacity: .55; }
.rug-mark { stroke: var(--ink); stroke-width: 2; }
.flow-rug-keys { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: .74rem; color: var(--ink-2); }
.flow-rug-keys span { display: inline-flex; align-items: center; gap: 4px; }
.flow-rug-keys .icon { width: 13px; height: 13px; }
.flow-score-num { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(3.4rem, 2.6rem + 2vw, 4.6rem); line-height: .9; letter-spacing: -.02em; }
.flow-score .bar { height: 6px; }
.flow-score .bar .track { fill: var(--surface); }
.flow-rank { margin: 12px 0 0; font-size: .86rem; color: var(--ink-2); }
.flow-rank .num { color: var(--ink); }
@media (max-width: 960px) {
  .flow-grid { grid-template-columns: minmax(88px, .9fr) repeat(3, minmax(0, 1fr)); column-gap: 0; row-gap: var(--join-gap); }
  .flow-stage { grid-column: 1 / -1; }
  .flow-stage.s1 { grid-row: 1; border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
  .flow-stage.s2 { grid-row: 2; } .flow-stage.s3 { grid-row: 3; } .flow-stage.s4 { grid-row: 4 / 6; }
  .flow-stage.s5 { grid-row: 6; border-radius: var(--join-corner) var(--join-corner) var(--card-corner) var(--card-corner); }
  .flow-head { grid-column: 1; align-self: center; justify-content: flex-start; margin: 0; padding: 14px 6px 14px 18px; }
  .flow-head.s2 { grid-row: 2; } .flow-head.s3 { grid-row: 3; } .flow-head.s4 { grid-row: 4 / 6; } .flow-head.s5 { grid-row: 6; }
  .flow-arrow { display: none; }
  .flow-cell.s1 { grid-row: 1; } .flow-cell.s2 { grid-row: 2; } .flow-cell.s3 { grid-row: 3; } .flow-cell.s4 { grid-row: 4; }
  .flow-cell.l1 { grid-column: 2; } .flow-cell.l2 { grid-column: 3; } .flow-cell.l3 { grid-column: 4; }
  .flow-cell, .flow-foot { flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 0; margin: 0; padding: 14px 8px; }
  .flow-cell.l2, .flow-cell.l3 { border-top: 0; }
  .flow-cell.s2 { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  .flow-foot.s4 { grid-row: 5; grid-column: 2 / -1; flex-direction: row; align-items: center; gap: 10px; margin-right: 12px; padding-top: 10px; }
  .flow-m { flex-direction: column; align-items: flex-start; gap: 4px; font-size: .8rem; }
  .flow-m .icon { width: 15px; height: 15px; }
  .flow-v { margin-left: 0; font-size: .95rem; }
  .flow-cell .flow-bar { width: 100%; flex: none; }
  .flow-score.s5 { grid-row: 6; grid-column: 2 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; margin: 0 16px 0 8px; padding: 14px 0; }
  .flow-rug { grid-column: 1 / -1; margin: 0 0 4px; }
  .flow-score-num { grid-row: 2 / 4; margin: 0; font-size: 3rem; }
  .flow-rank { margin: 0; }
}
/* Home: a left heading over one wide line in a glass frame, ending on a giant score. */
.section-flow { max-width: calc(1320px + 2 * var(--gutter)); }
.section-flow > .display { max-width: none; margin: 0 0 clamp(24px, 3.5vw, 44px); }
.flow-frame .flow { margin: 0; }
@media (min-width: 961px) {
  .section-flow .flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.45fr); }
  .section-flow .flow-score-num { font-size: clamp(4.6rem, 2.2rem + 4.6vw, 7.6rem); margin-bottom: 12px; }
}
/* Played once on entry (site.js playOnEntry): each stage after the one before it, its bars
   drawing out; then all the blends sweep in up to this model's mark and the score lands. */
.flow .s2 { --sd: 170ms; } .flow .s3 { --sd: 340ms; } .flow .s4 { --sd: 510ms; } .flow .s5 { --sd: 680ms; }
@media (prefers-reduced-motion: no-preference) {
  .flow[data-play] :is(.flow-cell, .flow-foot) { transition: opacity .5s var(--ease) var(--sd, 0ms), transform .8s var(--ease) var(--sd, 0ms); }
  .flow[data-play] .flow-arrow { transition: opacity .4s var(--ease) calc(var(--sd, 0ms) + 120ms), transform .6s var(--ease) calc(var(--sd, 0ms) + 120ms); }
  .flow[data-play] :is(.flow-bar .fill, .flow-bar .seg, .flow-score .bar .fill) { transform-box: fill-box; transform-origin: 0 50%; }
  .flow[data-play] :is(.flow-bar .fill, .flow-bar .seg) { transition: transform 1s var(--ease) calc(var(--sd, 0ms) + 160ms); }
  .flow[data-play] .rug { transition: clip-path 1.1s var(--ease) calc(var(--sd, 0ms) + 80ms); }
  .flow[data-play] :is(.flow-score-num, .flow-rank) { transition: opacity .5s var(--ease) calc(var(--sd, 0ms) + 640ms), transform .9s var(--ease) calc(var(--sd, 0ms) + 640ms); }
  .flow[data-play] .flow-score .bar .fill { transition: transform 1.1s var(--ease) calc(var(--sd, 0ms) + 760ms); }
  .flow[data-play="wait"] :is(.flow-cell, .flow-foot) { opacity: 0; transform: translateX(-14px); }
  .flow[data-play="wait"] .flow-arrow { opacity: 0; transform: translateX(-8px); }
  .flow[data-play="wait"] :is(.flow-bar .fill, .flow-bar .seg, .flow-score .bar .fill) { transform: scaleX(0); }
  .flow[data-play="wait"] .rug { clip-path: inset(0 100% 0 0); }
  .flow[data-play="wait"] :is(.flow-score-num, .flow-rank) { opacity: 0; transform: translateY(12px); }
}

/* ---------------------------------------------------------------- home: fan chart */
.section-fan { padding: clamp(88px, 11vw, 150px) clamp(8px, 1vw, 16px) 0; }
.card-fan { --pad: clamp(16px, 3vw, 32px); position: relative; max-width: 1640px; margin: 0 auto; padding: var(--pad); container-type: inline-size; }
.fan-heading { margin: 6px 0 28px; }
.section-fan .sky-links { margin-top: 22px; }
/* From 900px the heading sits in the plot's empty top-right corner, the box fan-chart.js
   keeps clear (INSET: right of 58% of the width, above 25% of the height). */
@media (min-width: 900px) {
  .fan-heading { position: absolute; z-index: 1; top: calc(var(--pad) + 4px); right: calc(var(--pad) + 24px); width: calc((100% - 2 * var(--pad)) * .42 - 24px);
    margin: 0; text-align: right; font-size: clamp(2.4rem, 4.4cqi, 4.8rem); pointer-events: none; }
}
.fan { margin: 0; }
.fan-frame { position: relative; }
/* Two first paints at their own pixel sizes; site.js swaps in one drawn to the plot's width. */
.fan-compact { display: none; }
@media (max-width: 619px) { .fan-wide { display: none; } .fan-compact { display: block; } }
.fan-plot .fc-svg { width: 100%; }
.fan-plot.is-line { cursor: pointer; }
.grid { stroke: var(--hair); stroke-width: 1; fill: none; }
.fan-lines { stroke: var(--active); stroke-opacity: .11; stroke-width: 1; fill: none; }
.fan-top { stroke: var(--ink); stroke-width: 2; fill: none; }
.fan-median { stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 6 5; fill: none; }
.fan-axis { stroke: var(--axis); stroke-width: 1.2; fill: none; }
.fan-hover { stroke: var(--olive); stroke-width: 2.8; fill: none; }
.axis-label { font: 400 13px var(--sans); fill: var(--muted); text-anchor: middle; }
.axis-label-y, .axis-label[text-anchor="end"] { text-anchor: end; }
.axis-label[text-anchor="start"] { text-anchor: start; }
.note-title { font: 500 15px var(--sans); fill: var(--ink); }
.note-text { font: 400 14px var(--sans); fill: var(--ink-2); }
.fan-note-right .note-title, .fan-note-right .note-text { text-anchor: end; }
.leader { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.leader-dot { fill: var(--ink); }
/* The top three named on their own lines: a rank badge at the leader's end, then the name. */
.fan-call { cursor: pointer; }
.call-badge { fill: var(--ink); }
.call-rank { font: 600 11px var(--sans); fill: var(--surface); text-anchor: middle; }
.call-name { font: 500 14px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.fan-call-small .call-rank { font-size: 10px; }
.fan-call-small .call-name { font-size: 13px; }
.fan-tip, .hz-tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(251, 250, 245, .95); border: 1px solid var(--glass-edge); border-radius: 14px; padding: 9px 14px; font-size: .88rem;
  line-height: 1.35; white-space: nowrap; transform: translate(14px, -50%); }
.fan-tip strong, .hz-tip strong { display: block; font-weight: 500; }
.fan-tip span, .hz-tip span { font-size: .8rem; color: var(--ink-2); }
.axis-title { font: 500 13px var(--sans); fill: var(--ink-2); }
.fan figcaption { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: .84rem; color: var(--muted); }
.fan figcaption a { color: var(--ink-2); }
.hint-touch { display: none; }
@media (hover: none) { .hint-pointer { display: none; } .hint-touch { display: inline-flex; } }
/* One full charge (site.js): the lines are clipped at the clock's hour, so each phone runs
   down at its own rate and stops at empty, and the names and notes come in as it passes. */
.fan-clock { pointer-events: none; transition: opacity .5s var(--ease); }
.fan-clock.is-done { opacity: 0; }
.clock-hand { stroke: var(--ink); stroke-width: 1.2; }
.clock-foot { fill: var(--ink); }
.fan-clock text { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.fan-clock .clock-hour { font: 400 26px var(--serif); fill: var(--ink); letter-spacing: -.01em; }
.fc-svg :is(.fan-call, .fan-note) { transition: opacity .5s var(--ease); }
.fc-svg.is-playing :is(.fan-call, .fan-note):not(.is-shown) { opacity: 0; }
.fan-replay { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
.fan-replay .icon { order: -1; }
.fan-replay:hover .icon { transform: rotate(-50deg); }

/* ---------------------------------------------------------------- brand rows */
.section-brands { max-width: calc(1320px + 2 * var(--gutter)); }
.brands-side .display { max-width: 12ch; margin: 0; }
.brands-side .section-more { margin-top: 24px; }
.brand-wall { --brand-cols: minmax(150px, 1fr) minmax(0, 2.6fr) 76px; margin-top: 32px; }
.brand-wall .keys { margin: 12px 14px 4px; color: var(--ink-2); }
@media (min-width: 1100px) {
  .section-brands { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.7fr); gap: 48px; align-items: start; }
  .brands-side { position: sticky; top: calc(var(--header) + 40px); }
  .brand-wall { margin-top: 0; }
}
.brand-head { display: grid; grid-template-columns: var(--brand-cols); gap: 24px; padding: 8px 26px 12px; font-size: .8rem; color: var(--ink-2); }
.brand-head > :last-child { text-align: right; }
.brand-scale { display: flex; justify-content: space-between; padding: 0 2px; }
.brand-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--join-gap); }
.brand-rows a { display: grid; grid-template-columns: var(--brand-cols); gap: 24px; align-items: center; min-height: 78px; padding: 14px 26px; background: var(--surface);
  border-radius: var(--join-corner); text-decoration: none; transition: background-color .15s; }
.brand-rows li:first-child a { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.brand-rows li:last-child a { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.brand-rows a:hover { background: var(--wash); }
.brand-row-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brand-row-name { font-family: var(--serif); font-size: clamp(1.7rem, 1.1rem + 1.3vw, 2.45rem); line-height: .95; letter-spacing: -.015em; overflow-wrap: anywhere; }
.brand-row-count { font-size: .8rem; color: var(--muted); }
.brand-row-median { font-family: var(--serif); font-size: 1.7rem; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.brand-row-median small { display: none; font: 400 .78rem var(--sans); color: var(--muted); }
.brand-wall .brand-strip { height: 38px; }
.brand-strip { width: 100%; height: 30px; }
.brand-strip path { vector-effect: non-scaling-stroke; }
.brand-strip .baseline { stroke: var(--axis); stroke-width: 1; }
.brand-strip .graduation { stroke: var(--axis); stroke-width: 1; }
.brand-strip .strip-ticks { stroke: var(--ink-2); stroke-opacity: .55; stroke-width: 1.5; }
.brand-strip .strip-median { fill: var(--olive); }
/* On entry each brand's models rise onto its lane, one lane after another, then its median. */
@media (prefers-reduced-motion: no-preference) {
  .brand-rows[data-play] .strip-ticks { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s var(--ease) calc(var(--i, 0) * 60ms), opacity .4s var(--ease) calc(var(--i, 0) * 60ms); }
  .brand-rows[data-play] .strip-median { transition: opacity .4s var(--ease) calc(var(--i, 0) * 60ms + 460ms), transform .7s var(--ease) calc(var(--i, 0) * 60ms + 460ms); }
  .brand-rows[data-play="wait"] .strip-ticks { transform: scaleY(0); opacity: 0; }
  .brand-rows[data-play="wait"] .strip-median { opacity: 0; transform: translateY(6px); }
  .brand-rows li:nth-child(2) { --i: 1; } .brand-rows li:nth-child(3) { --i: 2; } .brand-rows li:nth-child(4) { --i: 3; } .brand-rows li:nth-child(5) { --i: 4; }
  .brand-rows li:nth-child(6) { --i: 5; } .brand-rows li:nth-child(7) { --i: 6; } .brand-rows li:nth-child(8) { --i: 7; } .brand-rows li:nth-child(n+9) { --i: 8; }
}

/* ---------------------------------------------------------------- home: what it takes to be ranked
   The closing painting, full bleed, with the hero's glass frame rising off its lower
   edge. One linked card per measure draws its minimums on scales the three cards
   share. site.js holds the fills at zero until the frame scrolls in, then draws them. */
.section-join { position: relative; isolation: isolate; margin-top: clamp(64px, 8vw, 120px); padding: clamp(120px, 15vw, 210px) var(--gutter) clamp(80px, 10vw, 140px); }
.page-home .section-join { padding-top: clamp(88px, 12vw, 180px); }
.join-sky { position: absolute; inset: 0 0 auto; height: clamp(520px, 44vw + 180px, 900px); z-index: -1; overflow: hidden; }
.join-painting { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.join-sky::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--page) 0%, rgba(241, 239, 230, .3) 20%, rgba(241, 239, 230, .1) 42%, rgba(241, 239, 230, .45) 70%, var(--page) 97%); }
.section-join > .display { max-width: 18ch; margin: 0 auto; }
.join-frame { max-width: var(--wrap); margin: clamp(48px, 7vw, 96px) auto 0; padding: 12px; border-radius: calc(var(--card-corner) + 12px); background: rgba(251, 250, 245, .55); border: 1px solid var(--glass-edge); }
@supports (backdrop-filter: blur(1px)) { .join-frame { backdrop-filter: blur(16px) saturate(1.15); } }
@media (prefers-reduced-transparency: reduce) { .join-frame { background: var(--surface-low); backdrop-filter: none; } }
.join-frame .frame-title::before { background: var(--olive); }
.gate { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--join-gap); }
.gate-card { background: var(--surface); border-radius: var(--join-corner); padding: 24px 28px 28px; }
.gate-card:first-child { border-top-left-radius: var(--card-corner); }
.gate-card:last-child { border-top-right-radius: var(--card-corner); }
.gate-name { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; font: 500 1.08rem/1.3 var(--sans); }
.gate-name .icon { width: 20px; height: 20px; color: var(--measure); }
.gate-rules { margin: 0; display: grid; gap: 26px; }
.gate-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
.gate-rule dt { font-size: .8rem; color: var(--ink-2); }
.gate-val { margin: 0; font-family: var(--serif); font-size: 2.05rem; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gate-val small { font: 400 .8rem var(--sans); letter-spacing: 0; color: var(--ink-2); }
.gate-fig { grid-column: 1 / -1; margin: 12px 0 0; }
.gate-fig svg { width: 100%; height: auto; overflow: visible; }
.gate-fig .gate-pips { width: auto; height: 22px; }
.gate-scale { display: flex; justify-content: space-between; margin-top: 3px; font-size: .8rem; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-track, .g-cell { fill: var(--control); }
.g-fill, .g-pip { fill: var(--measure); }
.g-trace { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; }
.g-tick { stroke: var(--axis); stroke-width: 1; }
.g-body { fill: none; stroke: var(--axis); stroke-width: 1.5; }
.g-nub { fill: var(--axis); }
.g-grow, .g-pop { transform-box: fill-box; }
.g-grow { transform-origin: 0 50%; }
.g-pop { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .gate[data-play] .g-grow { transition: transform 1.2s var(--ease) calc(var(--gd, 0ms) + 260ms); }
  .gate[data-play] .gate-rule:last-child .g-grow { transition-delay: calc(var(--gd, 0ms) + 480ms); }
  .gate[data-play] .g-pop { transition: opacity .35s var(--ease) calc(var(--gd, 0ms) + var(--pd, 0ms)), transform .7s var(--ease) calc(var(--gd, 0ms) + var(--pd, 0ms)); }
  .gate[data-play="wait"] .g-grow { transform: scaleX(0); }
  .gate[data-play="wait"] .g-pop { opacity: 0; transform: scale(.3); }
  .gate-card:nth-child(2) { --gd: 110ms; }
  .gate-card:nth-child(3) { --gd: 220ms; }
  .g-pop:nth-of-type(2) { --pd: 55ms; } .g-pop:nth-of-type(3) { --pd: 110ms; } .g-pop:nth-of-type(4) { --pd: 165ms; }
  .g-pop:nth-of-type(5) { --pd: 220ms; } .g-pop:nth-of-type(6) { --pd: 275ms; } .g-pop:nth-of-type(n+7) { --pd: 330ms; }
}
.gate-source { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: var(--join-gap) 0 0; padding: 16px 16px 16px 28px;
  background: var(--surface); border-radius: var(--join-corner) var(--join-corner) var(--card-corner) var(--card-corner); }
.gate-source > p { margin: 0; }
.gate-source > p:first-child { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--ink-2); }
.gate-source .icon { width: 24px; height: 24px; color: var(--olive); }
.gate-source strong { font-weight: 500; color: var(--ink); }
.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 820px) {
  .gate { grid-template-columns: 1fr; }
  .gate-card:first-child { border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
  .gate-card:last-child { border-radius: var(--join-corner); }
  .gate-name { margin-bottom: 18px; }
  .gate-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 560px) {
  .section-join { padding-top: 96px; }
  .join-frame { padding: 6px; border-radius: calc(var(--card-corner) + 6px); margin-left: calc(-1 * var(--gutter) + 6px); margin-right: calc(-1 * var(--gutter) + 6px); }
  .gate-card { padding: 20px 22px 24px; }
  .gate-name { margin-bottom: 14px; }
  .gate-rules { grid-template-columns: 1fr; gap: 16px; }
  .gate-rule { grid-template-columns: minmax(0, 1fr) 4.6em; align-items: end; }
  .gate-rule dt { grid-column: 1 / -1; }
  .gate-fig { grid-column: 1; grid-row: 2; margin-top: 6px; }
  .gate-val { grid-column: 2; grid-row: 2; align-self: end; text-align: right; font-size: 1.7rem; }
  .gate-source { padding: 18px 18px 18px 22px; }
  .gate-actions, .gate-actions .button { width: 100%; }
}

/* ---------------------------------------------------------------- app card: QR for the Play listing */
.app-card { position: fixed; z-index: 25; right: 20px; bottom: 20px; display: grid; grid-template-columns: auto 234px; gap: var(--join-gap); padding: 9px; overflow: hidden; isolation: isolate;
  background: var(--page-deep); border: 1px solid var(--glass-edge); border-radius: var(--card-corner);
  visibility: hidden; opacity: 0; transform: translateY(16px) scale(.97); filter: blur(4px);
  transition: opacity .18s ease-in, transform .18s ease-in, filter .18s ease-in, visibility 0s .18s; }
.app-card[data-show] { visibility: visible; opacity: 1; transform: none; filter: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease), filter .5s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .app-card, .app-card[data-show] { transform: none; filter: none; } }
/* Cloud Study with Trees framing two frosted tiles joined like the dashboard's cards:
   the QR on the left, the question and the Play button on the right. */
.app-card-sky { position: absolute; inset: 0; z-index: -1; }
.app-card-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.app-card-qr, .app-card-body { background: rgba(251, 250, 245, .84); border: 1px solid rgba(251, 250, 245, .5); }
@supports (backdrop-filter: blur(1px)) { .app-card-qr, .app-card-body { backdrop-filter: blur(14px) saturate(1.15); } }
@media (prefers-reduced-transparency: reduce) { .app-card-qr, .app-card-body { background: var(--surface); backdrop-filter: none; } }
.app-card-qr { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 9px 9px 7px; color: var(--ink); text-decoration: none;
  border-radius: calc(var(--card-corner) - 9px) var(--join-corner) var(--join-corner) calc(var(--card-corner) - 9px); }
.app-qr { width: 120px; height: 120px; transition: transform .35s var(--ease); }
.app-card-qr:hover .app-qr { transform: scale(1.03); }
.qr-eye { stroke: var(--olive); stroke-width: 1; }
.qr-pupil { fill: var(--olive); }
.app-card-scan { font-size: .72rem; line-height: 1.3; color: var(--ink-2); }
.app-card-body { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px 14px 14px 18px;
  border-radius: var(--join-corner) calc(var(--card-corner) - 9px) calc(var(--card-corner) - 9px) var(--join-corner); }
.app-card-title { margin: 0; padding-right: 26px; font-family: var(--serif); font-size: 1.5rem; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.app-card-title em { font-style: italic; }
.app-card-app { margin: 6px 0 0; font-size: .8rem; line-height: 1.3; color: var(--ink-2); }
.app-card-app strong { font-weight: 600; color: var(--ink); }
.app-card-button { width: 100%; min-height: 40px; padding: 0 14px; font-size: .86rem; gap: 6px; white-space: nowrap; }
.app-card-button .icon { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.app-card-button:hover .icon { transform: translateX(3px); }
.app-card-close { position: absolute; top: 15px; right: 15px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color .2s, color .2s; }
.app-card-close:hover { background: var(--control); color: var(--ink); }
.app-card-close:active { background: var(--control-hover); }
.app-card-close .icon { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- Battery Zen (/battery-zen/)
   The featured app, shown by using it: the hero's sky and serif, then a tour in which the
   steps scroll beside a sticky phone holding the app rebuilt in HTML (zen.css), and the
   dusk painting with the full cell to close. zen.js plays one scene per step; without it
   the dashboard stands still and the steps read as a list. On wide screens the hero is
   short enough for the phone to rise into the first view, as the home page's frame does. */
.page-zen main { margin-top: calc(-1 * var(--header)); }
.zen-hero { position: relative; isolation: isolate; padding: calc(var(--header) + clamp(56px, 12vh, 136px)) var(--gutter) clamp(48px, 9vh, 104px); text-align: center; }
@media (min-width: 900px) { .zen-hero { padding-top: calc(var(--header) + clamp(40px, 8vh, 104px)); padding-bottom: clamp(20px, 3vh, 40px); } }
.zen-hero-copy { max-width: 900px; margin: 0 auto; }
.zen-hero .display-hero { margin-bottom: 18px; }
.zen-promise { margin: 0 0 32px; font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); color: #45473d; }
.zen-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin: 0; }
.zen-actions .button .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.zen-actions .button:hover .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .zen-hero-copy > * { animation: rise .9s var(--ease) backwards; }
  .zen-hero-copy > :nth-child(2) { animation-delay: .08s; }
  .zen-hero-copy > :nth-child(3) { animation-delay: .16s; }
}

.zen-tour { --zen-w: 340; position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 7vw, 120px); }
.zen-stage { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header) + 20px); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 14px; padding-bottom: 20px; }
.zen-stage .zen-frame { grid-column: 2; grid-row: 1; }
.zen-frame { padding: 4px; border-radius: calc(var(--zen-w) * 148px / 1084 + 4px); background: rgba(251, 250, 245, .55); border: 1px solid var(--glass-edge); }
.zen-device { position: relative; width: calc(var(--zen-w) * 1px); height: calc(var(--zen-w) * 2412px / 1084); border-radius: calc(var(--zen-w) * 148px / 1084); overflow: hidden; isolation: isolate; background: #ebe9de; }
.zen-scale { position: absolute; left: 0; top: 0; width: 1084px; height: 2412px; transform-origin: 0 0; transform: scale(calc(var(--zen-w) / 1084)); transition: opacity .15s ease; }
.zen-scale.is-cut { opacity: 0; }
/* zen.js measures the small viewport here to size the phone. */
.zen-svh { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
/* The rail: one button per screen, its bar filling as the scene plays, then Play again. */
.zen-rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(251, 250, 245, .55); border: 1px solid var(--glass-edge); }
.zen-rail button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 11px; background: none; color: var(--ink-2); cursor: pointer; transition: background-color .15s, color .15s; }
.zen-rail button:hover { background: var(--control); color: var(--ink); }
.zen-rail button[aria-current] { background: var(--surface); color: var(--olive); }
.zen-rail .icon { width: 18px; height: 18px; margin-top: -3px; }
.zen-rail-bar { position: absolute; left: 12px; right: 12px; bottom: 7px; height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
.zen-rail-bar > span { display: block; height: 100%; background: var(--olive); transform-origin: 0 50%; transform: scaleX(0); }
.zen-rail .zen-replay { margin-top: 4px; }
.zen-rail .zen-replay .icon { margin-top: 0; }
.zen-rail .zen-replay::before { content: ""; position: absolute; top: -5px; left: 10px; right: 10px; border-top: 1px solid var(--hair); }
.zen-tour:not(.is-live) .zen-rail { display: none; }
.zen-caption { display: none; }
.zen-steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0 0 18vh; }
.zen-step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 48px 0; }
/* Tall enough that, centred, it holds the phone where it sticks. */
.zen-step:first-child { min-height: max(64vh, calc(100vh - 2 * var(--header) - 40px)); }
.zen-step-title { max-width: 11ch; font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.4rem); transition: opacity .5s var(--ease); }
.zen-tour.is-live .zen-step:not([data-active]) .zen-step-title { opacity: .28; }
.zen-key { display: flex; align-items: flex-start; gap: 10px; max-width: 30em; margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.zen-key .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--olive); }
.zen-key a { color: var(--ink); }
/* Keys: the screen's parts as linked tiles, lit while the phone shows them (zen.js). */
.zen-fig { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--join-gap); max-width: 36rem; margin: 0; padding: 0; list-style: none; transition: opacity .5s var(--ease); }
.zen-tile { position: relative; display: grid; align-content: space-between; gap: 18px; min-height: 96px; padding: 16px 16px 14px; border: 0; border-radius: var(--join-corner); background: var(--surface);
  color: var(--ink-2); font: 400 .86rem/1.3 var(--sans); text-align: left; transition: background-color .35s var(--ease), color .35s var(--ease); }
.zen-tile:first-child { border-top-left-radius: var(--card-corner); border-bottom-left-radius: var(--card-corner); }
.zen-tile:last-child { border-top-right-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.zen-tile .icon { width: 22px; height: 22px; color: var(--measure); transition: color .35s var(--ease); }
.zen-tile .icon + span + .icon { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; color: var(--olive); opacity: 0; transition: opacity .25s; }
.zen-tile[data-on], .zen-tile[aria-pressed="true"] { background: var(--selected); color: var(--ink); }
.zen-tile[data-on] > .icon:first-child, .zen-tile[aria-pressed="true"] > .icon:first-child { color: var(--olive); }
.zen-tile.m-active[aria-pressed="true"] > .icon:first-child, .zen-tile.m-standby[aria-pressed="true"] > .icon:first-child, .zen-tile.m-charging[aria-pressed="true"] > .icon:first-child { color: var(--measure); }
.zen-tile[data-done] .icon + span + .icon { opacity: 1; }
button.zen-tile:not(:disabled) { cursor: pointer; }
button.zen-tile:not(:disabled):hover { background: var(--control); color: var(--ink); }
button.zen-tile[aria-pressed="true"]:hover { background: var(--selected); }
button.zen-tile:focus-visible { outline-offset: -2px; position: relative; z-index: 1; }
.zen-tour.is-live .zen-step:not([data-active]) :is(.zen-fig, .zen-models) { opacity: .45; }
.zen-tour.is-live .zen-step:not([data-active]) :is(.zen-fig, .zen-models):is(:hover, :focus-within) { opacity: 1; }
/* The ranking step's two models: linked cards with rank, name, serif score and index bar. */
.zen-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--join-gap); max-width: 36rem; margin: 10px 0 0; padding: 0; list-style: none; transition: opacity .5s var(--ease); }
.zen-models a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rank score" "name score" "bar bar"; gap: 2px 12px; height: 100%; box-sizing: border-box;
  padding: 18px 20px 20px; border-radius: var(--join-corner); background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color .15s; }
.zen-models li:first-child a { border-top-left-radius: var(--card-corner); border-bottom-left-radius: var(--card-corner); }
.zen-models li:last-child a { border-top-right-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.zen-models a:hover { background: var(--wash); }
.zen-models a:focus-visible { outline-offset: -2px; }
.zen-model-rank { grid-area: rank; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.zen-model-name { grid-area: name; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.zen-model-score { grid-area: score; align-self: center; font: 400 2.4rem/1 var(--serif); letter-spacing: -.02em; }
.zen-models .bar { grid-area: bar; margin-top: 14px; }
.zen-device.is-pointing { cursor: pointer; }

.zen-close { position: relative; isolation: isolate; display: grid; justify-items: center; gap: clamp(24px, 4vw, 36px); margin-top: clamp(24px, 4vw, 64px);
  padding: clamp(110px, 13vw, 190px) var(--gutter) clamp(80px, 10vw, 140px); text-align: center; }
.zen-close > .display { max-width: 14ch; }
.zen-big { --zen-big-w: 200; position: relative; width: calc(var(--zen-big-w) * 1px); height: calc(var(--zen-big-w) * 216px / 132); }
.zen-big-scale { position: absolute; left: 0; top: 0; width: 264px; height: 432px; transform-origin: 0 0; transform: scale(calc(var(--zen-big-w) / 264)); }
.zen-big .za-bare { width: 264px; height: 432px; }
.zen-get { display: flex; align-items: center; gap: var(--join-gap); padding: 10px; border-radius: calc(var(--card-corner) + 10px); background: rgba(251, 250, 245, .55); border: 1px solid var(--glass-edge); }
@supports (backdrop-filter: blur(1px)) { .zen-get, .zen-frame { backdrop-filter: blur(16px) saturate(1.15); } }
@media (prefers-reduced-transparency: reduce) { .zen-get, .zen-frame { background: var(--surface-low); backdrop-filter: none; } }
.zen-qr { display: grid; justify-items: center; gap: 4px; padding: 10px 10px 8px; border-radius: var(--card-corner) var(--join-corner) var(--join-corner) var(--card-corner);
  background: var(--surface); color: var(--ink-2); font-size: .72rem; line-height: 1.3; text-decoration: none; }
.zen-get .zen-actions { align-self: stretch; padding: 0 26px; border-radius: var(--join-corner) var(--card-corner) var(--card-corner) var(--join-corner); background: var(--surface); }
@media (max-width: 1023px), (pointer: coarse) {
  .zen-qr { display: none; }
  .zen-get { padding: 0; border: 0; background: none; backdrop-filter: none; }
  .zen-get .zen-actions { padding: 0; background: none; }
}

/* Phones: the phone stays under the header with the step's heading above it; the steps
   become the scroll that moves the tour, kept for assistive technology. The stage stays
   clear so the hero's sky fades behind the phone, and the dusk painting spans the whole
   close rather than ending under its heading. */
@media (max-width: 899px) {
  .zen-tour { display: block; }
  .zen-stage { grid-template-columns: none; justify-items: center; gap: 10px; padding-bottom: 32px; }
  .zen-stage .zen-frame, .zen-rail { grid-column: auto; grid-row: auto; }
  .zen-rail { flex-direction: row; padding: 4px; }
  .zen-rail button { width: 38px; height: 38px; }
  .zen-rail .zen-replay { margin: 0 0 0 4px; }
  .zen-rail .zen-replay::before { top: 9px; bottom: 9px; left: -5px; right: auto; border-top: 0; border-left: 1px solid var(--hair); }
  .zen-fig { max-width: none; }
  .zen-step { min-height: 0; padding: 28px 0; gap: 12px; }
  .zen-step-title { max-width: none; font-size: clamp(2.1rem, 1.4rem + 3vw, 3rem); }
  .zen-tour.is-live .zen-stage { position: sticky; top: var(--header); z-index: 2; height: calc(100svh - var(--header)); align-content: start; padding: 4px 0 0; }
  .zen-tour.is-live .zen-caption { display: flex; align-items: flex-end; justify-content: center; min-height: 2.08em; margin: 0; font-size: clamp(1.8rem, 1.2rem + 3vw, 2.5rem); line-height: 1.02; }
  .zen-tour.is-live .zen-steps { position: relative; z-index: 1; margin-top: calc(var(--header) - 100svh); }
  .zen-tour.is-live .zen-step { min-height: 64svh; padding: 0; }
  .zen-tour.is-live .zen-step > * { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zen-tour.is-live .zen-step > :is(.zen-fig, .zen-models) { display: none; }
  .zen-close .join-sky { bottom: 0; height: auto; }
}
@media (max-width: 560px) { .zen-fig { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zen-tile, .zen-tile:first-child, .zen-tile:last-child { border-radius: var(--join-corner); }
  .zen-tile:first-child { border-top-left-radius: var(--card-corner); } .zen-tile:nth-child(2) { border-top-right-radius: var(--card-corner); }
  .zen-tile:nth-last-child(2):nth-child(odd) { border-bottom-left-radius: var(--card-corner); } .zen-tile:last-child { border-bottom-right-radius: var(--card-corner); }
  .zen-tile:last-child:nth-child(odd) { grid-column: span 2; border-bottom-left-radius: var(--card-corner); } }

/* ---------------------------------------------------------------- inner pages */
/* Inner pages open under the same sky: a band behind the heading that fades into the cream. */
.page-sky { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: clamp(360px, 50vh, 540px); overflow: hidden; pointer-events: none; }
.page-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.page-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(241, 239, 230, .38), rgba(241, 239, 230, .55) 50%, var(--page) 100%); }
.sheet { max-width: var(--wrap); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(64px, 8vw, 110px); }
.sheet-narrow { max-width: calc(820px + 2 * var(--gutter)); }
.list-head, .read-head { margin-bottom: clamp(32px, 4vw, 48px); }
.list-head .display, .read-head .display { font-size: clamp(2.7rem, 1.6rem + 3.2vw, 4.4rem); margin-bottom: 18px; }
.list-head .lead, .read-head .lead { max-width: 42em; }
.updated { font-size: .86rem; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; }
.crumbs a { display: inline-block; text-decoration: none; padding: 5px 12px; border-radius: 999px; background: var(--control); color: var(--ink); }
.crumbs a:hover { background: var(--control-hover); }
.crumbs span { display: inline-block; padding: 5px 4px; color: var(--muted); }
.notice { background: var(--surface); border-radius: 22px; padding: 16px 20px; margin: 0 0 28px; }
.notice p { margin: 0; }

/* Rankings */
.ranking-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.ranking-controls .search { flex: 1 1 380px; max-width: 560px; }
/* Order menu, as the dashboard draws it: a pill opens a glass listbox 4px below, scaled from its corner */
.sort-control { display: flex; align-items: center; gap: 6px; }
.sort-toggle { display: inline-flex; align-items: center; height: 44px; padding: 0 12px 0 18px; border: 0; border-radius: 999px; background: var(--control); color: var(--ink);
  font: 400 .92rem var(--sans); cursor: pointer; transition: background-color .15s; }
.sort-prefix { color: var(--ink-2); white-space: pre; }
#sort-label { font-weight: 500; white-space: nowrap; }
.sort-toggle .chevron { width: 14px; height: 14px; margin-left: 6px; color: var(--ink-2); transition: transform .15s; }
.sort-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.sort-toggle:hover, .sort-toggle[aria-expanded="true"] { background: var(--control-hover); }
.sort-direction { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--control); color: var(--ink-2); cursor: pointer; transition: background-color .15s; }
.sort-direction:hover { background: var(--control-hover); color: var(--ink); }
.sort-direction[aria-pressed="true"] { background: var(--selected); color: var(--ink); }
.sort-direction .icon { width: 17px; height: 17px; }
.sort-layer { position: fixed; z-index: 45; inset: 0; }
.sort-scrim { position: absolute; inset: 0; touch-action: none; }
.sort-popup { position: absolute; width: max-content; transform-origin: var(--anchor-x, 0%) var(--anchor-y, 0%);
  animation: menu-scale-in 130ms cubic-bezier(.4, 0, .2, 1) both, menu-fade-in 110ms cubic-bezier(.4, 0, .2, 1) both; }
.sort-popup[data-phase="closing"] { animation: menu-scale-out 80ms cubic-bezier(.4, 0, .2, 1) both, menu-fade-out 80ms cubic-bezier(.4, 0, .2, 1) both; }
.sort-menu { min-width: min(200px, var(--menu-max-width, 200px)); max-width: min(280px, var(--menu-max-width, 280px)); overflow: hidden;
  background: var(--surface); border: 1px solid var(--glass-edge); border-radius: 16px; font: 400 .95rem/1.3 var(--sans); }
@supports (backdrop-filter: blur(1px)) { .sort-menu { backdrop-filter: blur(24px) saturate(1.2); background: rgba(251, 250, 245, .97); } }
@media (prefers-reduced-transparency: reduce) { .sort-menu { background: var(--surface); backdrop-filter: none; } }
.sort-items { max-height: var(--menu-max-height, calc(100dvh - 24px)); padding: 4px; overflow-y: auto; overscroll-behavior: contain; }
.sort-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.sort-menu button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort-menu button > .icon { width: 18px; height: 18px; color: var(--ink-2); }
.sort-menu [data-sort="active"] > .icon:first-child { color: var(--active); }
.sort-menu [data-sort="standby"] > .icon:first-child { color: var(--standby); }
.sort-menu [data-sort="charging"] > .icon:first-child { color: var(--charging); }
.sort-menu button > .check { width: 16px; height: 16px; margin-left: auto; padding-left: 4px; box-sizing: content-box; color: var(--olive); visibility: hidden; }
.sort-menu button[aria-selected="true"] { color: var(--olive); font-weight: 500; }
.sort-menu button[aria-selected="true"] .check { visibility: visible; }
.sort-menu button:is(:hover, :focus-visible) { background: var(--wash); }
.sort-menu button:active { background: var(--selected); }
.sort-menu button:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; }
@keyframes menu-scale-in { from { transform: var(--menu-enter-transform, scale(.85)); } to { transform: scale(1); } }
@keyframes menu-fade-in { from { opacity: var(--menu-enter-opacity, 0); } to { opacity: 1; } }
@keyframes menu-scale-out { from { transform: var(--menu-exit-transform, scale(1)); } to { transform: scale(.9); } }
@keyframes menu-fade-out { from { opacity: var(--menu-exit-opacity, 1); } to { opacity: 0; } }
.rank-head .is-sort { color: var(--ink); font-weight: 500; }
.results-status { min-height: 1.4em; font-size: .9rem; color: var(--ink-2); margin: 0 0 12px; }
.results-status:empty { margin: 0; min-height: 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; }
.pager-status { margin: 0; font-size: .84rem; color: var(--ink-2); }
.pager ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; font-size: .9rem; text-decoration: none;
  background: var(--control); font-variant-numeric: tabular-nums; }
.pager a:hover { background: var(--control-hover); }
.pager span[aria-current] { background: var(--olive); color: var(--on-olive); }
.more-row { margin-top: 16px; }

/* Phone */
.phone-head { margin-bottom: 32px; }
.phone-head .display { font-size: clamp(2.7rem, 1.5rem + 3.6vw, 4.8rem); margin-bottom: 14px; }
.phone-sub { display: flex; flex-wrap: wrap; color: var(--ink-2); margin: 0; }
.phone-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.phone-body > .cards { max-width: none; }
/* The evidence and battery cards sit beside the score as one linked stack; below
   1000px they join the bottom of the measure stack as two more linked cards. */
.phone-side { position: sticky; top: calc(var(--header) + 16px); display: grid; gap: var(--join-gap); }
@media (max-height: 959px) { .phone-side { position: static; } }
.evidence-card, .battery-card { background: var(--surface); padding: 24px 28px 28px; }
.evidence-card { border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
.battery-card { border-radius: var(--join-corner) var(--join-corner) var(--card-corner) var(--card-corner); }
.cap-value { margin: 0 0 12px; font-size: 1rem; color: var(--ink-2); }
.cap-value .num { font-family: var(--serif); font-size: 2.9rem; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.cap-unknown { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--muted); }
.ruler-capacity { --measure: var(--ink-2); }
.battery-card .keys { margin-top: 6px; gap: 4px 14px; font-size: .76rem; }
/* Five capacity labels crowd the 340px card; 0, 6,000 and 12,000+ stay. */
.battery-card .rule-axis-5 span:nth-child(even) { display: none; }
.battery-card .evidence { margin-top: 10px; }
.side-sub { margin: 14px 0 2px; padding-top: 14px; border-top: 1px solid var(--hair); font: 500 .9rem/1.3 var(--sans); }
.draws { margin: 0; display: grid; }
.draws div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 12px; padding: 7px 0; }
.draws dt { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2); }
.draws dt .icon { width: 16px; height: 16px; color: var(--measure); align-self: center; }
.draws dd { margin: 0; text-align: right; color: var(--ink-2); font-size: .9rem; }
.draws .est-approx { font-size: 1.1rem; margin-right: 3px; }
.draws .num { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); font-size: 1rem; }
.draws small { display: block; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The three percentiles under the score, as in a ranking row. */
.score-parts { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; }
.score-parts li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "i l n" "b b b"; align-items: center; gap: 6px 8px; }
.score-parts .icon { grid-area: i; width: 16px; height: 16px; color: var(--measure); }
.score-parts .part-label { grid-area: l; font-size: .86rem; color: var(--ink-2); }
.score-parts .num { grid-area: n; font-variant-numeric: tabular-nums; font-weight: 500; }
.score-parts .bar { grid-area: b; height: 6px; }
.score-card .keys { margin-top: 10px; }
@media (max-width: 520px) { .score-parts { grid-template-columns: 1fr; gap: 10px; } .score-parts li { grid-template-columns: 16px 88px minmax(0, 1fr) 40px; grid-template-areas: "i l b n"; } .score-parts .num { text-align: right; } }
.side-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 1.08rem/1.3 var(--sans); }
.side-title .icon { width: 20px; height: 20px; color: var(--ink-2); }
.evidence { margin: 0; display: grid; }
.evidence div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.evidence div:last-child { border-bottom: 0; }
.evidence dt { font-size: .84rem; color: var(--ink-2); }
.evidence dd { margin: 0; text-align: right; }
.evidence .num { font-variant-numeric: tabular-nums; font-weight: 500; }
.phone-actions { margin: 18px 0 0; }
.phone-actions .button { width: 100%; }
.phone-actions .icon { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.phone-actions .button:hover .icon { transform: translateX(3px); }
@media (max-width: 999px) {
  .phone-body { grid-template-columns: 1fr; gap: var(--join-gap); }
  .phone-side { position: static; }
  .phone-body > .cards > .card:last-child { border-bottom-left-radius: var(--join-corner); border-bottom-right-radius: var(--join-corner); }
  .evidence-card { border-radius: var(--join-corner); }
}
.phone-sub strong { font-weight: 500; color: var(--ink); }
.code { font-size: .88em; background: var(--control); padding: 1px 7px; border-radius: 6px; }
.cards { display: grid; gap: var(--join-gap); }
.sheet-phone > .cards { max-width: 760px; }
.cards > .card { border-radius: var(--join-corner); padding: 24px 28px; }
.cards > .card:first-child { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.cards > .card:last-child { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.score-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.score-num { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.score-num .num { font-family: var(--serif); font-size: clamp(4rem, 3rem + 3vw, 5.6rem); line-height: .9; letter-spacing: -.02em; }
.score-of { font-size: .95rem; color: var(--ink-2); }
.score-rank { margin: 0; color: var(--ink-2); }
.score-rank .num { font-size: 1.25rem; font-weight: 400; color: var(--ink); }
.score-rule { display: block; width: 100%; height: auto; margin: 14px 0 2px; overflow: visible; }
.score-rule .baseline { stroke: var(--control); stroke-width: 6; stroke-linecap: round; }
.score-rule .score-fill { stroke: var(--ink-2); stroke-width: 6; stroke-linecap: round; }
.score-rule .scale-dot { fill: var(--axis); }
.score-rule .tick { stroke: none; }
.marker { stroke: var(--ink); stroke-width: 2; }
.marker-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 3; }
.marker-label { font: 500 14px var(--sans); fill: var(--ink); }
.measure h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-left: 32px; font: 500 1.08rem/1.3 var(--sans); }
.measure-icon { width: 22px; height: 22px; margin-left: -32px; color: var(--measure); }
.weight { font-size: .82rem; font-weight: 400; color: var(--measure); }
.measure-context { margin: 2px 0 14px 32px; font-size: .82rem; color: var(--muted); }
.measure-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; color: var(--ink-2); }
.est-approx { font-family: var(--serif); font-size: 2rem; color: var(--muted); }
.est-value { font-family: var(--serif); font-size: clamp(2.3rem, 1.9rem + 1.2vw, 2.9rem); line-height: 1; color: var(--ink); letter-spacing: -.01em; }
.ruler { display: block; width: 100%; height: auto; overflow: visible; }
.ruler .crowd { fill: var(--measure); fill-opacity: .16; stroke: var(--measure); stroke-opacity: .35; stroke-width: 1; }
.ruler .median { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.ruler .baseline { stroke: var(--axis); stroke-width: 1.2; }
.ruler .tick { stroke: var(--axis); stroke-width: 1; }
.ruler .unknown { fill: url(#hatch); stroke: var(--axis); stroke-dasharray: 4 3; }
.ruler .marker-off { font: 500 12px var(--sans); fill: var(--ink); text-anchor: end; }
/* Tick labels as HTML under a ruler: evenly spaced, ends flush, the same size at any width.
   Side margins match the drawing's inset (10 of 640 for rulers, 14 of 640 for the score). */
.rule-axis { position: relative; height: 1.35em; margin: 4px 1.5625% 0; font-size: .78rem; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.rule-axis-score { margin: 0 2.1875%; }
.rule-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.rule-axis span:first-child { left: 0; transform: none; }
.rule-axis span:last-child { left: auto; right: 0; transform: none; }
.rule-axis-5 span:nth-child(2) { left: 25%; } .rule-axis-5 span:nth-child(3) { left: 50%; } .rule-axis-5 span:nth-child(4) { left: 75%; }
.rule-axis-7 span:nth-child(2) { left: 16.667%; } .rule-axis-7 span:nth-child(3) { left: 33.333%; } .rule-axis-7 span:nth-child(4) { left: 50%; }
.rule-axis-7 span:nth-child(5) { left: 66.667%; } .rule-axis-7 span:nth-child(6) { left: 83.333%; }
.measure .keys { margin-top: 6px; }
.measure-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hair); }
.measure-facts dt { font-size: .78rem; color: var(--muted); }
.measure-facts dd { margin: 2px 0 0; font-size: .95rem; color: var(--ink-2); }
.measure-facts .num { color: var(--ink); font-size: 1.05rem; }
.nearby { margin-top: clamp(56px, 7vw, 88px); }
.nearby > .display { margin-bottom: 24px; }

/* Ranking board: the list beside a sticky model panel, or the panel under its row */
.peek-slot { display: none; }
@media (min-width: 1180px) {
  .ranking-board.has-peek { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
  .has-peek .peek-slot { display: block; position: sticky; top: calc(var(--header) + 12px); max-height: calc(100vh - var(--header) - 24px); overflow: auto; scrollbar-width: thin; }
  .has-peek .rank-list { --cols: 36px minmax(140px, 1.5fr) minmax(96px, 1fr) repeat(3, minmax(96px, 1fr)); }
  .has-peek .rank-head, .has-peek .row-link { gap: 12px; }
  .has-peek .rank-head { padding: 0 16px 10px; }
  .has-peek .row-link { padding: 8px 16px; }
}
.row.is-open .row-link { background: var(--selected); }
.peek { display: grid; gap: var(--join-gap); }
.peek:focus { outline: none; }
.peek-card { background: var(--surface); border-radius: var(--join-corner); padding: 18px 22px; }
.peek > :first-child { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.peek > :last-child { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.peek-head { display: flex; align-items: flex-start; gap: 10px; }
.peek-titles { flex: 1; min-width: 0; }
.peek-brand { margin: 0; font-size: .78rem; color: var(--muted); }
.peek-name { font: 500 1.08rem/1.3 var(--sans); overflow-wrap: anywhere; }
.peek-close { display: none; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; margin: -4px -8px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--control); color: var(--ink-2); cursor: pointer; }
.peek-close:hover { background: var(--control-hover); color: var(--ink); }
.peek-close .icon { width: 16px; height: 16px; }
[data-peek-live] .peek-close, .peek-host .peek-close { display: inline-flex; }
.peek-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 12px 0 10px; }
.peek-num { font-family: var(--serif); font-size: 3.4rem; line-height: .9; letter-spacing: -.02em; }
.peek-of { font-size: .9rem; color: var(--ink-2); }
.peek-rank { margin-left: auto; font-size: .88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.peek-rank strong { font-weight: 500; color: var(--ink); }
.peek .bar { height: 6px; }
.peek-m-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; font-weight: 500; }
.peek-m-head .icon { width: 18px; height: 18px; color: var(--measure); }
.peek-m-head .weight { margin-left: auto; font-size: .76rem; }
.peek-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 6px 0 8px; }
.peek-est .est-approx { font-size: 1.4rem; }
.peek-val { font-family: var(--serif); font-size: 2rem; line-height: 1.05; letter-spacing: -.01em; }
.peek-val.peek-none { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); }
.peek-words { font-size: .82rem; color: var(--muted); }
.peek-pct { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0; font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.peek-pct strong { font-weight: 500; color: var(--ink); }
.peek-facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 14px; font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.peek-facts span { display: inline-flex; align-items: center; gap: 6px; }
.peek-facts .icon { width: 16px; height: 16px; }
.peek-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; }
.peek-actions .button { min-height: 44px; padding: 0 18px; }
.peek-actions .icon { width: 16px; height: 16px; }
.rows > .peek-host { list-style: none; }
.peek-host .peek-card { background: var(--surface-low); }
.peek-host .peek > :first-child { border-top-left-radius: var(--join-corner); border-top-right-radius: var(--join-corner); }
.peek-host:not(:last-child) .peek > :last-child { border-bottom-left-radius: var(--join-corner); border-bottom-right-radius: var(--join-corner); }
.row:has(+ .peek-host:last-child) .row-link { border-bottom-left-radius: var(--join-corner); border-bottom-right-radius: var(--join-corner); }

/* Brands */
.all-brands { margin-top: clamp(48px, 6vw, 72px); }
.all-brands h2 { font-family: var(--serif); font-size: 2rem; margin-bottom: 18px; }
.maker-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--join-gap); }
.maker-grid li { background: var(--surface); padding: 12px 18px; border-radius: 14px; }
.maker-grid a { text-decoration: none; }
.maker-grid a:hover { text-decoration: underline; text-decoration-color: var(--olive); }
.maker-grid .sub { display: block; font-size: .78rem; color: var(--muted); }
/* Brands chart: lanes of model dots; the picker reuses the topic pills. */
.bchart-controls { display: grid; gap: 14px; margin-bottom: 20px; }
.bchart-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.bchart-measures, .bchart-brands { border: 0; margin: 0; padding: 0; min-width: 0; }
.bchart-measures { display: flex; flex-wrap: wrap; gap: 6px; }
.bchart-measures .topic span { gap: 8px; }
.bchart-measures .icon { width: 17px; height: 17px; color: var(--measure); }
.bchart-measures input:checked + span .icon { color: currentColor; }
.bchart-actions { display: flex; gap: 4px; margin: 0; }
.bchart-actions button { height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: 400 .9rem var(--sans); color: var(--ink-2); cursor: pointer; }
.bchart-actions button:hover { background: var(--control); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip span { display: inline-flex; align-items: baseline; gap: 7px; min-height: 34px; padding: 6px 13px; border-radius: 999px; background: var(--control); font-size: .88rem; line-height: 1.4; transition: background-color .15s; }
.chip small { font-size: .74rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip input:checked + span small { color: inherit; }
.chips-more { margin-top: 8px; }
.chips-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 13px; border-radius: 999px; font-size: .88rem; color: var(--ink-2); cursor: pointer; list-style: none; }
.chips-more summary::-webkit-details-marker { display: none; }
.chips-more summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.chips-more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.chips-more summary:hover { background: var(--control); color: var(--ink); }
.chips-more .chips { margin-top: 8px; }
.bchart { margin: 0; padding: 22px 26px 18px; background: var(--surface); border-radius: var(--card-corner); }
.bchart-frame { position: relative; }
.bchart-svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.bchart-svg:focus-visible { outline-offset: 8px; }
.bc-dot { fill: var(--measure); stroke: var(--surface); stroke-width: 1.5; }
.bc-median { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.bc-all { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.bc-rule { stroke: var(--hair); stroke-width: 1; fill: none; }
.bc-brand { text-decoration: none; }
.bc-brand:hover .bc-name { text-decoration: underline; text-decoration-color: var(--olive); }
.bc-name { font: 400 15px var(--sans); fill: var(--ink); }
.bc-count { font: 400 12px var(--sans); fill: var(--muted); font-variant-numeric: tabular-nums; }
.bc-med { font: 400 13px var(--sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.bc-hover { fill: none; stroke: var(--olive); stroke-width: 2.5; pointer-events: none; }
.bchart-plot.is-dot { cursor: pointer; }
.bchart-empty { margin: 0; padding: 40px 0; text-align: center; color: var(--muted); }
.bchart .keys { margin-top: 12px; }
.key-model::before, .key-brand-median::before, .key-all-median::before { content: ""; flex: none; }
.key-model::before { width: 9px; height: 9px; border-radius: 50%; background: var(--measure); }
.key-brand-median::before { width: 2.5px; height: 14px; border-radius: 2px; background: var(--ink); }
.key-all-median::before { height: 13px; border-left: 1.5px dashed var(--ink-2); }
@media (max-width: 640px) { .bchart { padding: 16px 14px 14px; border-radius: 22px; } }
.brand-figure { margin: 0 0 24px; padding: 18px 24px 16px; background: var(--surface); border-radius: var(--card-corner); }
.brand-figure .brand-strip { height: auto; }
.brand-figure .brand-scale { margin-bottom: 2px; font-size: .8rem; color: var(--ink-2); }
.brand-figure .keys { margin-top: 8px; justify-content: flex-start; }

/* Compare */
.compare-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--join-gap); }
.compare-slot { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; background: var(--surface); border-radius: var(--join-corner); }
.compare-slot:first-child { border-top-left-radius: var(--card-corner); border-bottom-left-radius: var(--card-corner); }
.compare-slot:last-child { border-top-right-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.compare-slot .search { flex: 1; min-width: 0; }
.compare-slot .search input { height: 44px; padding-left: 16px; background: var(--surface-low); }
.slot-letter { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--control); font-size: .85rem; font-weight: 600; flex: none; }
.compare-slot[data-filled] .slot-letter { background: var(--ink); color: var(--surface); }
.compare-chosen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; margin: 0; min-height: 44px; }
.compare-chosen a { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.compare-chosen a:hover { text-decoration: underline; }
.compare-clear { margin-left: auto; flex: none; border: 0; border-radius: 999px; height: 34px; padding: 0 14px; background: var(--control); font: 400 .85rem var(--sans); color: var(--ink); cursor: pointer; }
.compare-clear:hover { background: var(--control-hover); }
/* "Compare" from one phone asks for the second before opening the compare page. */
.pick-dialog { width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: clamp(16px, 12vh, 140px) auto auto; padding: 20px 20px 22px;
  border: 0; border-radius: var(--card-corner); background: var(--page); color: var(--ink); }
.pick-dialog::backdrop { background: rgba(35, 37, 31, .34); }
.pick-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px 6px; }
.pick-title { flex: 1; min-width: 0; margin: 2px 0 0; font: 400 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.1 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.pick-title em { font-style: italic; }
.pick-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: var(--control); color: var(--ink-2); cursor: pointer; }
.pick-close:hover { background: var(--control-hover); color: var(--ink); }
.pick-close .icon { width: 16px; height: 16px; }
.pick-dialog .search { flex-wrap: wrap; align-items: flex-start; }
.pick-dialog .search-icon { top: 17px; }
.pick-dialog .search-clear { top: 10px; }
.pick-dialog .search-list { position: static; flex-basis: 100%; margin-top: 8px; max-height: min(360px, 48dvh); }
/* The compare page is the phone page's layout with one lettered value per phone: a glass
   head naming the phones, then the linked score and measure cards beside the Evidence and
   Battery stack. Every value carries its letter, as the rulers' markers do. */
.compare-out { margin-top: 24px; display: grid; gap: var(--join-gap); --label: 24%; }
.compare-body .cards > .card:first-child, .compare-body .evidence-card { border-top-left-radius: var(--join-corner); border-top-right-radius: var(--join-corner); }
.compare-body .phone-side.is-static { position: static; }
/* Sticks flush under the 60px nav bar (12px from the top), so no row shows between the two. */
.compare-head { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 12px 28px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
@media (prefers-reduced-transparency: reduce) { .compare-head { background: var(--surface); } }
.ch-item { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--ink); }
.ch-item .cmp-letter { width: 24px; height: 24px; margin: 0; font-size: .78rem; }
.ch-name { min-width: 0; font-size: .95rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ch-name small { display: block; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-item:hover .ch-name { text-decoration: underline; }
.measure-swatch { display: inline-block; width: 18px; height: 5px; border-radius: 999px; background: var(--measure); }
.cmp-letter { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: var(--ink); color: var(--surface);
  font: 600 .72rem/1 var(--sans); letter-spacing: 0; align-self: center; }
.cmp-best { align-self: center; margin-left: 4px; padding: 2px 9px; border-radius: 999px; background: var(--selected); font: 400 .72rem/1.5 var(--sans); color: var(--ink); white-space: nowrap; }
.cmp-cols { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 14px 28px; }
.cmp-col { min-width: 0; }
/* Score card: the serif scores side by side, then the shared track, then each measure's
   percentiles as one bar per phone. */
.cmp-scores .score-num { align-items: center; gap: 0; }
.cmp-scores .score-num .num { font-size: clamp(3rem, 2.3rem + 2vw, 4.4rem); }
.cmp-scores .score-rank { margin: 12px 0 0; }
.cmp-brand { margin: 2px 0 0; font-size: .86rem; color: var(--muted); }
.compare-ruler { padding-top: 10px; }
.cmp-marker { stroke: var(--ink); stroke-width: 2; }
.cmp-label circle { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.cmp-label text { font: 600 11px var(--sans); fill: var(--surface); text-anchor: middle; }
.cmp-parts li { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.cmp-part-head { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2); }
.cmp-parts .icon { grid-area: auto; width: 16px; height: 16px; color: var(--measure); }
.cmp-part { display: grid; grid-template-columns: auto minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.cmp-part .cmp-letter, .cmp-facts .cmp-letter, .cmp-draw .cmp-letter { width: 18px; height: 18px; margin: 0; font-size: .64rem; }
.cmp-parts .bar { grid-area: auto; height: 6px; }
.cmp-parts .num { grid-area: auto; text-align: right; }
/* Measure cards: one serif estimate per phone, the words once under them. */
.cmp-ests .measure-est { align-items: center; gap: 4px 6px; margin: 0; }
.cmp-ests .cmp-letter { margin-right: 6px; }
.cmp-ests .est-approx { font-size: 1.6rem; }
.cmp-ests .est-value { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); white-space: nowrap; }
.compare-out[data-cols="3"] .cmp-ests .est-value { font-size: clamp(1.6rem, 1.25rem + .8vw, 2.1rem); }
.cmp-ests .est-words { font-size: .9rem; }
.cmp-words { margin: 8px 0 0; font-size: .86rem; color: var(--ink-2); }
.key-letter::before { content: "A"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 600 .58rem/1 var(--sans); }
.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp-table tr > :first-child { width: var(--label); }
.cmp-facts { margin-top: 16px; border-top: 1px solid var(--hair); font-size: .95rem; }
.cmp-facts thead th { padding: 12px 16px 2px 0; text-align: left; font-weight: 400; }
.cmp-facts th, .cmp-facts td { padding: 5px 16px 5px 0; text-align: left; vertical-align: baseline; }
.cmp-facts tbody th { font-weight: 400; font-size: .78rem; color: var(--muted); }
.cmp-facts td { color: var(--ink-2); }
.cmp-facts .num { color: var(--ink); font-size: 1.05rem; }
/* Side stack: who each letter is, then capacities and currents per phone. */
.cmp-evidence div { align-items: center; }
.cmp-evidence dt { display: flex; align-items: center; min-width: 0; }
.cmp-who { display: grid; min-width: 0; line-height: 1.3; }
.cmp-who a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--ink); font-size: .92rem; }
.cmp-who small a { font-size: .76rem; color: var(--muted); }
.cmp-who a:hover { text-decoration: underline; }
.cmp-evidence dd { white-space: nowrap; color: var(--ink-2); font-size: .9rem; }
.cmp-caps { margin: 0 0 12px; display: grid; }
.cmp-caps div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.cmp-caps dt { display: flex; align-items: baseline; color: var(--ink-2); font-size: .95rem; white-space: nowrap; }
.cap-num { margin-right: 5px; font-family: var(--serif); font-size: 2.3rem; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.cmp-caps .cap-unknown { font-size: 1.8rem; }
.cmp-caps dd { margin: 0; text-align: right; font-size: .8rem; color: var(--muted); }
.cmp-caps dd .num { color: var(--ink); font-weight: 500; font-size: .9rem; }
.cmp-draws > div { align-items: start; padding: 9px 0; }
.cmp-draws > div + div { border-top: 1px solid var(--hair); }
.cmp-draws dt { align-items: flex-start; }
.cmp-draws dt .icon { margin-top: 2px; }
.cmp-draws dd { display: grid; gap: 3px; justify-items: end; }
.cmp-draw { display: inline-flex; align-items: baseline; white-space: nowrap; }
.cmp-draw .cmp-letter { margin-right: 8px; }
.cmp-draw .num { margin-right: 3px; }
.compare-empty { color: var(--muted); margin-top: 24px; }

/* Method and other reading pages */
.read-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.read-index { position: sticky; top: calc(var(--header) + 16px); background: var(--surface); border-radius: 22px; padding: 12px; font-size: .9rem; }
.read-index ol { list-style: none; margin: 0; padding: 0; }
.read-index a { display: block; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-2); line-height: 1.35; }
.read-index a:hover { background: var(--wash); color: var(--ink); }
.read-index a[aria-current="true"] { background: var(--selected); color: var(--ink); }
.read-section { max-width: 820px; padding-bottom: clamp(40px, 5vw, 64px); }
.read-section h2 { display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); letter-spacing: -.015em; line-height: 1.05; margin-bottom: 20px; }
.read-section > p, .prose p, .prose li { max-width: 66ch; }
.read-section > p, .prose p { color: var(--ink-2); }
.read-section strong, .prose strong { color: var(--ink); font-weight: 500; }
.read-figure { margin: 28px 0; padding: clamp(16px, 2.6vw, 28px); background: var(--surface); border-radius: var(--card-corner); }
.read-figure figcaption { margin-top: 12px; font-size: .86rem; color: var(--muted); }
.method-fig { width: 100%; height: auto; overflow: visible; }
.method-fig .grid { stroke: var(--hair); }
.day-line { stroke: var(--measure); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.day-band { fill: var(--measure); }
.fig-note .leader { stroke: var(--measure); }
.fig-note .note-text { fill: var(--measure); font-weight: 500; }
.pool-bar { fill: var(--control); stroke: none; }
.pool-total { fill: var(--active); fill-opacity: .22; }
.pool-label { font: 500 13px var(--sans); fill: var(--ink-2); }
.pool-dim { font: 400 14px var(--sans); fill: var(--ink-2); }
.pool-sum { font: 500 15px var(--sans); fill: var(--ink); }
.pool-wrong { font: italic 400 14px var(--sans); fill: var(--muted); }
.dimension { stroke: var(--axis); stroke-width: 1; fill: none; }
.method-fig .baseline { stroke: var(--axis); stroke-width: 1.2; }
.pct-phone rect { fill: var(--surface-low); stroke: var(--axis); stroke-width: 1.2; }
.pct-phone.is-tied rect { fill: var(--control); }
.pct-phone.is-chosen rect { fill: var(--active); stroke: var(--active); }
.pct-rate { font: 400 13px var(--sans); fill: var(--ink-2); text-anchor: middle; }
.pct-unit { text-anchor: start; fill: var(--muted); }
.plate-back { fill: var(--surface-low); stroke: var(--hair); stroke-width: 1; }
.plate { fill: var(--measure); fill-opacity: .55; }
.measure-defs { margin: 28px 0; display: grid; gap: var(--join-gap); max-width: 820px; }
.measure-defs div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 16px 22px; background: var(--surface); border-radius: var(--join-corner); }
.measure-defs div:first-child { border-top-left-radius: 22px; border-top-right-radius: 22px; }
.measure-defs div:last-child { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
.measure-defs dt { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.measure-defs dd { margin: 0; color: var(--ink-2); }
.table-wrap { width: 100%; overflow-x: auto; }
.spec-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0 28px; background: var(--surface); border-radius: 22px; overflow: hidden; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--hair); }
.spec-table tr:last-child > * { border-bottom: 0; }
.spec-table thead th { font-size: .82rem; font-weight: 500; color: var(--measure, var(--muted)); }
.spec-table tbody th { font-weight: 400; color: var(--ink); }
.spec-table td { color: var(--ink-2); }
.limits { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: var(--join-gap); max-width: 820px; }
.limits li { padding: 16px 22px; background: var(--surface); border-radius: var(--join-corner); color: var(--ink-2); max-width: none; }
.limits li:first-child { border-top-left-radius: 22px; border-top-right-radius: 22px; }
.limits li:last-child { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
.faq { display: grid; gap: var(--join-gap); max-width: 980px; }
.faq-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 40px; padding: 26px 28px 14px; background: var(--surface); border-radius: var(--join-corner); }
.faq-item:first-child { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.faq-item:last-child { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.faq-item h2 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; }
.faq-item p { color: var(--ink-2); }
.faq-a > :last-child { margin-bottom: 12px; }
.prose h2 { font-family: var(--serif); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.3rem); letter-spacing: -.01em; line-height: 1.1; margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }

/* Credits: one linked card, a specimen per row */
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--join-gap); }
.credit { display: grid; grid-template-columns: 132px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px 24px; align-items: center;
  padding: 14px 24px 14px 14px; background: var(--surface); border-radius: var(--join-corner); }
.credit:first-child { border-top-left-radius: var(--card-corner); border-top-right-radius: var(--card-corner); }
.credit:last-child { border-bottom-left-radius: var(--card-corner); border-bottom-right-radius: var(--card-corner); }
.credit-art { display: grid; place-items: center; height: 76px; border-radius: 16px; background: var(--surface-low); overflow: hidden; }
.credit:first-child .credit-art { border-top-left-radius: 20px; }
.credit:last-child .credit-art { border-bottom-left-radius: 20px; }
.credit-painting { width: 100%; height: 100%; object-fit: cover; }
.credit-glyph { color: var(--ink); line-height: 1; }
.credit-serif { font: 400 2.6rem var(--serif); letter-spacing: -.02em; }
.credit-sans { font: 500 2.1rem var(--sans); letter-spacing: -.03em; }
.credit-zen-sans { font: 400 2.1rem "Google Sans", var(--sans); letter-spacing: -.02em; }
.credit-zen-title { font: 400 2.1rem "Bricolage Grotesque", var(--sans); letter-spacing: -.02em; }
.credit-icons { display: flex; gap: 8px; font-size: 1.35rem; color: var(--ink-2); }
.credit-work { display: flex; flex-direction: column; min-width: 0; }
.credit-title { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; letter-spacing: -.01em; }
.credit-title cite { font-style: italic; }
.credit-by { font-size: .84rem; color: var(--muted); line-height: 1.35; }
.credit-use { font-size: .9rem; color: var(--ink-2); }
.credit-rights { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .9rem; color: var(--ink-2); }
.credit-rights a { display: inline-flex; align-items: center; gap: 6px; color: var(--olive); text-decoration: none; }
.credit-rights a:hover { color: var(--olive-hover); text-decoration: underline; }
.credit-rights .icon { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .credit { grid-template-columns: 96px minmax(0, 1fr); padding: 12px 18px 12px 12px; align-items: start; }
  .credit-art { grid-row: span 3; height: 72px; }
  .credit-use { font-size: .84rem; }
  .credit-icons { gap: 4px; font-size: 1.1rem; }
}

/* Contact: the address is the page's one action. */
.contact-email { margin: 0; background: var(--surface); border-radius: var(--card-corner); padding: clamp(22px, 3.4vw, 36px); font: 400 clamp(1.6rem, 5vw, 2.5rem)/1.15 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.contact-email a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .14em; }
.contact-email a:hover { color: var(--olive); }
.contact-tips { margin-top: 40px; }

/* Pill pickers (brands chart, full charge) */
.topic, .chip { position: relative; }
.topic input, .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.topic span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--control); font-size: .94rem; transition: background-color .15s; }
.topic input:hover + span, .chip input:hover + span { background: var(--control-hover); }
.topic input:checked + span, .chip input:checked + span { background: var(--olive); color: var(--on-olive); }
.topic input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 2px; }
.sheet-missing .search { max-width: 600px; margin-bottom: 24px; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--hair); margin-top: clamp(40px, 6vw, 80px); }
.page-home .site-footer { margin-top: 0; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
.footer-brand p { color: var(--ink-2); max-width: 30ch; margin-top: 14px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; }
.footer-brand p em { font-style: italic; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-nav h2 { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.footer-nav a { display: block; text-decoration: none; padding: 4px 0; color: var(--ink); font-size: .95rem; }
.footer-nav a:hover { color: var(--olive); }
.footer-meta { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 36px; }
.fine { font-size: .78rem; color: var(--muted); text-align: center; text-wrap: balance; margin: 0; padding-top: 18px; border-top: 1px solid var(--hair); }

/* ---------------------------------------------------------------- responsive */
/* Six destinations and the header search share one row from 1170px. */
@media (max-width: 1169px) { .search-header { display: none; } }
@media (max-width: 1080px) {
  .read-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .read-index { position: static; margin-bottom: 36px; }
  .read-index ol { columns: 2; column-gap: 16px; }
}
@media (max-width: 900px) {
  /* One row: the brand and a Menu pill whose glass panel drops under the bar. */
  .nav-bar { position: relative; padding: 0 10px 0 14px; }
  .site-nav { display: none; }
  .nav-menu { display: block; margin-left: auto; }
  .nav-menu summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 16px; border-radius: 10px; background: var(--control); font-size: .95rem; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  .nav-menu summary::-webkit-details-marker { display: none; }
  .nav-menu summary .icon { width: 15px; height: 15px; transition: transform .15s; }
  .nav-menu[open] summary .icon { transform: rotate(180deg); }
  .nav-menu-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--glass-edge); border-radius: 16px; }
  .nav-menu-panel a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 1rem; }
  .nav-menu-panel a:hover, .nav-menu-panel a[aria-current="page"] { background: var(--control); }
  .nav-menu-panel .icon { width: 17px; height: 17px; color: var(--ink-2); }
  .brand-name { font-size: 1.45rem; }
  .rank-list { --cols: 28px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .rank-head { gap: 0 12px; padding: 0 16px 8px 10px; font-size: .76rem; }
  .rank-head > :nth-child(-n+3) { display: none; }
  .rank-head .m-active { grid-column: 2; } .rank-head .m-standby { grid-column: 3; } .rank-head .m-charging { grid-column: 4; }
  .rank-head .icon { display: none; }
  .rank-head small { padding-left: 0; font-size: .72rem; }
  .row-link { grid-template-areas: "rank name name score" ". a s c"; grid-template-columns: var(--cols); gap: 6px 12px; padding: 12px 16px 12px 10px; }
  .r-rank { grid-area: rank; align-self: start; padding-top: 14px; }
  .r-name { grid-area: name; }
  .r-score { grid-area: score; grid-template-columns: 1fr; gap: 4px; }
  .r-score .val { order: -1; font-size: 1rem; }
  .r-m { grid-template-columns: 14px minmax(16px, 1fr) auto; gap: 6px; }
  .r-m .icon { display: block; width: 14px; height: 14px; color: var(--measure); }
  .r-m.m-active { grid-area: a; } .r-m.m-standby { grid-area: s; } .r-m.m-charging { grid-area: c; }
  .r-m .val { min-width: 0; font-size: .82rem; }
  .brand-head { display: none; }
  .brand-rows a { grid-template-columns: 1fr auto; gap: 8px 16px; padding: 14px 18px; }
  .brand-rows .brand-strip { grid-column: 1 / -1; }
  .brand-row-median { grid-column: 2; grid-row: 1; align-self: start; font-size: 1.4rem; }
  .brand-row-median small { display: inline; }
  .compare-slots { grid-template-columns: 1fr; }
  .compare-slot:first-child { border-radius: var(--card-corner) var(--card-corner) var(--join-corner) var(--join-corner); }
  .compare-slot:last-child { border-radius: var(--join-corner) var(--join-corner) var(--card-corner) var(--card-corner); }
  .faq-item { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero { padding-top: calc(var(--header) + 36px); }
  .hero-frame, .glass-frame { padding: 6px; border-radius: calc(var(--card-corner) + 6px); margin-left: calc(-1 * var(--gutter) + 6px); margin-right: calc(-1 * var(--gutter) + 6px); }
  .horizon-keys { font-size: .72rem; }
  .hero[data-search] .hero-frame { margin-top: 20px; }
  .hero[data-search] .horizon { display: none; } /* the matches come up above the keyboard */
  .frame-bar { padding: 8px 12px 12px; }
  .search .search-go { display: none; }
  .search:has(.search-go) input { padding-right: 18px; }
  .search:has(.search-go) .search-clear { right: 10px; }
  .search:has(.search-go):has(.search-clear:not([hidden])) input { padding-right: 52px; }
  .row-link { gap: 6px 10px; padding: 12px 14px 12px 8px; }
  .rank-head { gap: 0 10px; padding: 0 14px 8px 8px; }
  .r-m { grid-template-columns: 13px minmax(12px, 1fr) auto; gap: 5px; }
  .r-m .icon { width: 13px; height: 13px; }
  .r-m .val { font-size: .78rem; }
  .hero-stats { flex-direction: column; gap: 2px; }
  .hero-stats > span + span::before { display: none; }
  .spec-table th, .spec-table td { padding: 11px 10px; }
  .compare-out { --label: 34%; }
  .compare-head { gap: 8px 12px; padding: 10px 20px; }
  .ch-item { flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 4px; }
  .ch-name { font-size: .8rem; }
  .ch-name small { display: none; }
  /* Values stack one phone per line, each still led by its letter. */
  .cmp-cols { grid-template-columns: 1fr; gap: 8px; }
  .cmp-scores .cmp-col { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .cmp-scores .score-rank { margin: 0; }
  .cmp-scores .score-num .num { font-size: 2.8rem; }
  .cmp-facts { font-size: .86rem; }
  .cmp-facts th, .cmp-facts td { padding-right: 8px; }
  .spec-table tr > :first-child { padding-left: 16px; }
  .measure-defs div { grid-template-columns: 1fr; gap: 4px; }
  .read-index ol { columns: 1; }
  .pager { flex-direction: column; align-items: flex-start; }
  .fan-note { display: none; }
  .cards > .card { padding: 20px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  /* Quick chips scroll sideways in one row, so the chart they drive comes up a screen sooner.
     The opened "more brands" list still wraps: the reader asked to see all of them. */
  .bchart-brands > .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .bchart-brands > .chips::-webkit-scrollbar { display: none; }
  .bchart-brands > .chips .chip { flex: none; }
}
@media (max-width: 400px) {
  /* Three measures share 320 to 400px: each value sits beside its icon, its bar runs under both. */
  .r-m { grid-template-columns: 13px minmax(0, 1fr); grid-template-areas: "i v" "b b"; gap: 4px 5px; }
  .r-m .icon { grid-area: i; }
  .r-m .bar { grid-area: b; }
  .r-m .val { grid-area: v; min-width: 0; text-align: left; font-size: .84rem; }
  .r-m .unit { font-size: .85em; }
  /* Seven tick labels crowd a phone-width ruler; every second one stays. */
  .rule-axis-7 span:nth-child(even) { display: none; }
}
/* Touch: the small pills, links and buttons grow to a 40 to 44px target without moving the layout. */
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .crumbs a { padding: 10px 14px; }
  .crumbs span { padding: 10px 4px; }
  .chip span { min-height: 40px; padding: 10px 14px; }
  .chips-more summary { min-height: 40px; }
  .bchart-actions button, .compare-clear { height: 40px; }
  .footer-nav a { padding: 10px 0; }
  .read-index a { padding: 10px 12px; }
  .text-link { padding-block: 10px; margin-block: -10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .site-header, .footer-nav, .search, .ranking-controls, .pager, .hero-sky, .join-sky, .day-sky, .page-sky, .horizon, .app-card, .zen-rail { display: none; } body { background: #fff; } }

/* ---------------------------------------------------------------- full-charge chart (/full-charge/) */
/* Four group colours, validated together for colour-vision separation and 3:1 on the surface.
   They mark chosen groups only: never measures, buttons or text. */
.page-charge { --g0: #2b5fa8; --g1: #d0702e; --g2: #22a07a; --g3: #7d3470; }
.fc-s0 { --g: var(--g0); }
.fc-s1 { --g: var(--g1); }
.fc-s2 { --g: var(--g2); }
.fc-s3 { --g: var(--g3); }
.fc-controls { display: grid; gap: 14px; margin-bottom: 20px; }
.fc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.fc-spans { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.fc-actions button { display: inline-flex; align-items: center; gap: 7px; }
.fc-actions .icon { width: 16px; height: 16px; }
.fc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fc-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fc-chosen:empty { display: none; }
.fc-chip { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 4px 0 14px; border-radius: 999px; background: var(--surface); font-size: .92rem; }
.fc-chip button { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.fc-chip button:hover { background: var(--control); color: var(--ink); }
.fc-chip .icon { width: 14px; height: 14px; }
.fc-swatch { display: inline-block; flex: none; width: 16px; height: 4px; border-radius: 2px; background: var(--g); vertical-align: middle; }
.fc-add { flex: 1 1 260px; max-width: 420px; }
.fc-add input { height: 42px; font-size: .94rem; padding: 0 18px 0 44px; }
.fc-add input:disabled { opacity: .6; }
.fc-quick legend { padding: 0; margin-bottom: 6px; font-size: .8rem; color: var(--ink-2); }
.fc-quick .chip input:disabled { cursor: default; }
.fc-quick .chip input:disabled + span { opacity: .45; }
.fc { margin: 0; padding: 22px 26px 18px; background: var(--surface); border-radius: var(--card-corner); }
.fc-frame { position: relative; }
.fc-svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; }
.fc-svg:focus-visible { outline-offset: 8px; }
.fc-plot.is-line { cursor: pointer; }
.fan-lines.fc-quiet { stroke: var(--ink); stroke-opacity: .07; }
.fc-g { fill: none; stroke: var(--g); stroke-width: 1.2; }
.fc-g.fc-one { stroke-width: 2.6; }
.fc-halo { fill: none; stroke: var(--surface); stroke-width: 7; stroke-linecap: round; }
.fc-gm { fill: none; stroke: var(--g); stroke-width: 3; stroke-linecap: round; }
.fc-end { fill: var(--g); stroke: var(--surface); stroke-width: 2; }
.fc .fan-tip strong { display: flex; align-items: center; gap: 8px; }
.key-line::before, .key-group::before { content: ""; flex: none; }
.key-line::before { width: 18px; height: 1.5px; background: var(--ink); opacity: .3; }
.key-group::before { width: 18px; height: 3px; border-radius: 2px; background: var(--ink-2); }
.fc-summary { margin-top: 20px; }
.fc-table { width: 100%; border-collapse: separate; border-spacing: 0 var(--join-gap); font-size: .92rem; }
.fc-table thead th { padding: 0 20px 4px; text-align: left; font-weight: 400; font-size: .8rem; color: var(--ink-2); }
.fc-table tbody th, .fc-table td { padding: 14px 20px; background: var(--surface); text-align: left; font-weight: 400; vertical-align: middle; }
.fc-table tbody th { border-radius: var(--join-corner) 0 0 var(--join-corner); }
.fc-table tbody td:last-child { border-radius: 0 var(--join-corner) var(--join-corner) 0; }
.fc-table tbody tr:first-child th { border-top-left-radius: var(--card-corner); }
.fc-table tbody tr:first-child td:last-child { border-top-right-radius: var(--card-corner); }
.fc-table tbody tr:last-child th { border-bottom-left-radius: var(--card-corner); }
.fc-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--card-corner); }
.fc-table .fc-swatch { margin-right: 12px; }
.fc-name { font-weight: 500; }
.fc-kind { display: block; margin-left: 28px; font-size: .78rem; color: var(--muted); }
.fc-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-dim { font-size: .84rem; color: var(--muted); white-space: nowrap; }
/* Full screen keeps the span, the chosen groups and the add field; the plot takes the rest. */
.fc-stage:fullscreen { display: flex; flex-direction: column; padding: clamp(12px, 2vw, 24px) clamp(16px, 3vw, 32px); background: var(--page); overflow: auto; }
.fc-stage::backdrop { background: #f1efe6; }
.fc-stage:fullscreen .fc-quick { display: none; }
.fc-stage:fullscreen .fc-controls { margin-bottom: 12px; }
.fc-stage:fullscreen .fc, .fc-stage:fullscreen .fc-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fc-stage:fullscreen .fc-plot { flex: 1; min-height: 0; overflow: hidden; }
@media (max-width: 640px) {
  .fc { padding: 16px 10px 14px; border-radius: 22px; }
  .fc-add { max-width: none; }
  .fc-table thead { display: none; }
  .fc-table, .fc-table tbody, .fc-table tr { display: block; }
  .fc-table tr { margin-bottom: var(--join-gap); }
  .fc-table tbody th, .fc-table td { display: block; border-radius: 0 !important; padding: 10px 16px; }
  .fc-table tbody th { padding-top: 14px; }
  .fc-table td:empty { display: none; }
  .fc-table td::before { content: attr(data-h); display: block; font-size: .74rem; color: var(--muted); }
  .fc-table tbody tr:first-child th { border-radius: 22px 22px 0 0 !important; }
  .fc-table tbody tr:last-child > :last-child { border-radius: 0 0 22px 22px !important; }
}
@media (pointer: coarse) { .fc-chip { min-height: 44px; } .fc-chip button { width: 40px; height: 40px; } }

/* ---------------------------------------------------------------- page transitions
   Same-origin pages hand over through cross-document view transitions (Chrome, Edge,
   Safari 18.2 and later; elsewhere a plain navigation). The nav bar stays put while the
   page under it lifts in. A ranking row, or the ranking panel, becomes the phone page it
   opens: its tile grows into the score card, its name flies to the heading, its score
   to the score and its three bars to the score's three, and back again on the way out.
   assets/transitions.js marks the row (.vt-src); a phone page names its own parts. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.nav-bar { view-transition-name: vt-nav; }
.phone-head .display { width: fit-content; }
.vt-src .r-model { align-self: flex-start; }
.page-phone:not(.vt-off) .score-card, .row.vt-src .row-link, .peek.vt-src .peek-top { view-transition-name: vt-card; }
.page-phone:not(.vt-off) .phone-head .display, .row.vt-src .r-model, .peek.vt-src .peek-name { view-transition-name: vt-title; }
.page-phone:not(.vt-off) .score-num .num, .row.vt-src .r-score .val, .peek.vt-src .peek-num { view-transition-name: vt-score; }
.page-phone:not(.vt-off) .score-parts .m-active .bar, .row.vt-src .r-m.m-active .bar, .peek.vt-src .m-active .bar { view-transition-name: vt-bar-active; }
.page-phone:not(.vt-off) .score-parts .m-standby .bar, .row.vt-src .r-m.m-standby .bar, .peek.vt-src .m-standby .bar { view-transition-name: vt-bar-standby; }
.page-phone:not(.vt-off) .score-parts .m-charging .bar, .row.vt-src .r-m.m-charging .bar, .peek.vt-src .m-charging .bar { view-transition-name: vt-bar-charging; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: vt-out .16s ease-out both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) .06s both; }
::view-transition-old(*):only-child { animation: vt-out .16s ease-out both; }
::view-transition-new(*):only-child { animation: vt-in .42s var(--ease) .06s both; }
::view-transition-group(vt-nav) { animation: none; z-index: 3; }
::view-transition-old(vt-nav) { display: none; }
::view-transition-new(vt-nav) { animation: none; }
/* The tile: a surface box from the row's bounds to the card's, rounding out as it grows,
   with the card's own content fading in at its natural size, never stretched. */
::view-transition-group(vt-card) { z-index: 1; }
::view-transition-image-pair(vt-card) { overflow: clip; background: var(--surface); animation: vt-round .5s var(--ease) both; }
::view-transition-old(vt-card), ::view-transition-new(vt-card) { height: 100%; object-fit: none; object-position: 0 0; mix-blend-mode: normal; }
::view-transition-old(vt-card) { animation: vt-out .12s ease-out both; }
::view-transition-new(vt-card) { animation: vt-fade .28s ease-out .22s both; }
html:active-view-transition-type(vt-back)::view-transition-image-pair(vt-card) { animation-name: vt-unround; }
/* Text keeps its proportions; the sans name and the serif heading cross as they scale. */
::view-transition-group(vt-title), ::view-transition-group(vt-score), ::view-transition-group(vt-bar-active),
::view-transition-group(vt-bar-standby), ::view-transition-group(vt-bar-charging) { z-index: 2; }
::view-transition-old(vt-title), ::view-transition-new(vt-title) { height: 100%; object-fit: contain; object-position: 0 50%; }
::view-transition-old(vt-score), ::view-transition-new(vt-score) { height: 100%; object-fit: contain; object-position: 100% 50%; }
::view-transition-old(vt-title), ::view-transition-old(vt-score) { animation: vt-out .2s ease-in both; }
::view-transition-new(vt-title), ::view-transition-new(vt-score) { animation: vt-fade .26s ease-out .1s both; }
::view-transition-old(vt-bar-active), ::view-transition-new(vt-bar-active), ::view-transition-old(vt-bar-standby), ::view-transition-new(vt-bar-standby),
::view-transition-old(vt-bar-charging), ::view-transition-new(vt-bar-charging) { height: 100%; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes vt-round { from { border-radius: var(--join-corner); } to { border-radius: var(--card-corner); } }
@keyframes vt-unround { from { border-radius: var(--card-corner); } to { border-radius: var(--join-corner); } }