/* ledger — tokens. Every value here is accounted for in DESIGN.md; nothing is invented in the layers below.
Contrast measured on #ffffff with tools/contrast.py (and on the surface each colour actually sits on):
ink #171717 17.93 | ink-strong #4d4d4c 8.46 | ink-soft #6c6c6b 5.26 (4.69 on --surface)
link #00578b 7.68 | link-hover #004d7d 8.91 | blue #0079c2 4.65, white on it 4.65
free #075f0a 7.92 (7.47 on --free-soft) | free-mid #0a850e white on it 4.80
Reading text is only ever --ink on --canvas or --surface. No gradients, no shadows: depth is a 1px line. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2");
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}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format("woff2");
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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
/* ink */
--ink:#171717;--ink-strong:#4d4d4c;--ink-soft:#6c6c6b;
/* action: --link carries text, --blue carries fills, borders and type from 24px up */
--link:#00578b;--link-hover:#004d7d;--blue:#0079c2;--blue-soft:#bde7ff;
/* free / included / confirmed */
--free:#075f0a;--free-mid:#0a850e;--free-soft:#ebfdec;
/* a missing fact is grey, never red */
--unsure:#6c6c6b;--warn-line:#e27423;--critical:#b4183a;
/* surfaces and lines */
--canvas:#ffffff;--surface:#f2f2f1;--surface-2:#f7f7f6;--line:#d9d8d6;--line-strong:#8d8d8b;
/* page ground and article ground are separate so direction B can lift the sheet off the page */
--page-bg:var(--canvas);--sheet-bg:transparent;--sheet-line:transparent;--sheet-pad:0;
/* type */
--font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--t-h1:26px;--lh-h1:1.2;
--t-h2:20px;--lh-h2:1.3;
--t-h3:17px;--lh-h3:1.35;
--t-lead:17px;--lh-lead:1.55;
--t-body:16px;--lh-body:1.6;
--t-data:15px;--lh-data:1.45;
--t-meta:13px;--lh-meta:1.4;
--t-label:13px;
--w-body:400;--w-em:600;--w-bold:700;
--measure:72ch;
/* space: 8px base */
--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-6:24px;--s-8:32px;--s-12:48px;--s-16:64px;
--page-w:1080px;--gutter:16px;--section-gap:40px;--block-gap:16px;--pad:12px;--cell-y:8px;--cell-x:10px;
/* radius */
--r-sm:4px;--r:8px;
/* the one border every block uses */
--border:1px solid var(--line);
}
@media (min-width:48em){
:root{
--t-h1:34px;--t-h2:23px;--t-h3:18px;--t-lead:18px;
--gutter:24px;--section-gap:48px;--pad:16px;--cell-y:10px;--cell-x:12px;
}
}
/* ledger — page shell. Mobile first. One column on every page type (owner's pick, 2026-11-09).
No sticky header: on a phone a fixed bar costs 56px of the page the reader came to read. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--page-bg);color:var(--ink);font-family:var(--font);
font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-body);
-webkit-font-smoothing:antialiased;font-synthesis-weight:none}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0}
/* links: underlined in reading text, because colour alone never carries meaning */
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--link-hover)}
a:active{color:var(--ink)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* header: brand row, then the nav strip with the search pinned to its right end */
.site-header{max-width:var(--page-w);margin-inline:auto;padding:var(--s-4) var(--gutter) 0}
.site-top{padding-bottom:var(--s-2)}
.brand{display:inline-block;padding-block:var(--s-2);color:var(--ink);font-size:18px;font-weight:var(--w-bold);letter-spacing:-0.01em;text-decoration:none}
.brand:hover{color:var(--link)}
.site-bar{border-bottom:var(--border)}
.site-nav ul{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
.site-nav ul::-webkit-scrollbar{display:none}
.site-nav li{flex:0 0 auto}
.site-nav a{display:flex;align-items:center;gap:var(--s-1);padding:var(--s-3);border-bottom:2px solid transparent;
color:var(--ink-strong);font-size:var(--t-data);text-decoration:none;text-wrap:nowrap;transition:color .1s ease-out}
.site-nav a:hover{color:var(--link)}
.site-nav a[aria-current]{color:var(--ink);font-weight:var(--w-em);border-bottom-color:var(--blue)}
.site-nav-search{position:sticky;right:0;margin-left:auto;background:var(--page-bg)}
.site-nav-search a{min-height:44px;padding-inline:var(--s-3);color:var(--ink-strong)}
/* search: the field replaces the whole menu panel (site.js); without JS the icon links to /sitemap/ */
.site-search{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding-bottom:var(--s-2)}
.site-search[hidden],.site-nav[hidden],.site-search-results[hidden]{display:none}
.site-search input{flex:1 1 12rem;min-width:0;padding:var(--s-2) var(--s-3);border:var(--border);border-radius:var(--r-sm);
background:var(--canvas);color:var(--ink);font:inherit;font-size:var(--t-data)}
.site-search input::placeholder{color:var(--ink-soft)}
.site-search-close{padding:var(--s-2) var(--s-3);border:var(--border);border-radius:var(--r-sm);background:var(--canvas);
color:var(--ink);font:inherit;font-size:var(--t-data);line-height:1;cursor:pointer}
.site-search-close:hover{color:var(--link);border-color:var(--ink-soft)}
.site-search-results{flex:1 1 100%;margin:0;padding:0;list-style:none;border:var(--border);border-radius:var(--r-sm);background:var(--canvas)}
.site-search-results li+li{border-top:var(--border)}
.site-search-results a{display:block;padding:var(--s-2) var(--s-3);font-size:var(--t-data);text-decoration:none}
.site-search-results a:hover{background:var(--surface)}
.site-search-results small{display:block;color:var(--ink-soft);font-size:var(--t-meta)}
.icon{flex:0 0 auto}
/* main */
.main{max-width:var(--page-w);margin-inline:auto;padding:var(--s-4) var(--gutter) var(--s-12)}
.crumbs ol{display:flex;flex-wrap:wrap;margin:0 0 var(--s-4);padding:0;list-style:none;
font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--ink-soft)}
.crumbs li+li::before{content:"/";margin:0 .5em;color:var(--line-strong)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--link);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink)}
/* the article sheet: direction B gives it a ground, a border and padding; A and C leave it flush */
.article{background:var(--sheet-bg);border:1px solid var(--sheet-line);padding:var(--sheet-pad)}
.page-head{margin-bottom:var(--s-6)}
.article h1{margin:0 0 var(--s-3);font-size:var(--t-h1);line-height:var(--lh-h1);font-weight:var(--w-bold);letter-spacing:-0.015em;text-wrap:balance}
.article .lead{max-width:var(--measure);margin:0 0 var(--s-3);font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--ink)}
.byline{margin:0;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--ink-soft)}
.byline time{font-variant-numeric:tabular-nums}
.article h2{margin:var(--section-gap) 0 var(--s-3);font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:var(--w-bold);letter-spacing:-0.01em}
.article h3{margin:var(--s-6) 0 var(--s-2);font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-bold)}
/* one text column; only wide data breaks out of it. --measure:none in direction C puts everything full width. */
.article>*{max-width:var(--measure)}
.article>.table-wrap,.article>.pricefold,.article>.addons,.article>.matrix,.article>.pick{max-width:none}
.article>p,.article>ul:not([class]),.article>ol{margin:0 0 var(--s-4)}
.article>ul:not([class]),.article>ol{padding-left:1.2em}
.article>ul:not([class]) li,.article>ol li{margin-bottom:var(--s-2)}
.article>div,.article>section,.article>nav,.article>aside,.article>ul[class],.article>table{margin:0 0 var(--block-gap)}
.article h2+*,.article h3+*{margin-top:0}
strong,b{font-weight:var(--w-em)}
.article em{font-style:italic}
/* footer */
.site-footer{max-width:var(--page-w);margin-inline:auto;padding:var(--s-6) var(--gutter) var(--s-8);border-top:var(--border)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:0 0 var(--s-4);padding:0;list-style:none}
.footer-links a{font-size:var(--t-data);text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-mail{margin:0 0 var(--s-2);font-size:var(--t-data);color:var(--ink-strong)}
.adults-only{max-width:48ch;margin:0;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ledger — blocks. The devices are the owner's picks of 2026-11-09; this is their visual treatment.
A "panel" is --surface inside a 1px --line. Direction C turns panels into rules (variants/c.css). */
/* the small uppercase label, the only tracked type on the site */
/* капсом набираются только заголовки блоков: их не больше трёх на экран */
.quick-label,.pros h3,.cons h3{
font-size:var(--t-label);font-weight:var(--w-bold);text-transform:uppercase;letter-spacing:.06em}
/* подписи данных повторяются десятками раз на странице, поэтому они тихие: обычный регистр, без трекинга */
.addons-store,.fa-lab,.local-meta{font-size:var(--t-meta);font-weight:var(--w-body);color:var(--ink-soft)}
.compare-app{font-size:var(--t-data);font-weight:var(--w-body);color:var(--ink-strong)}
.pricefold-head{font-size:var(--t-data);font-weight:var(--w-bold)}
/* At a glance — the first thing under the lead on a review or comparison */
.quick{padding:var(--pad);background:var(--surface);border:var(--border);border-radius:var(--r)}
.quick-label{margin:0 0 var(--s-2);color:var(--ink-strong)}
.quick ul{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.quick li{position:relative;padding-left:var(--s-4);font-size:var(--t-data);line-height:var(--lh-data)}
.quick li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--blue)}
/* tip / warn */
.callout{padding:var(--pad);background:var(--surface);border:var(--border);border-left:3px solid var(--blue);border-radius:0 var(--r-sm) var(--r-sm) 0}
.callout--warn{border-left-color:var(--warn-line)}
.callout>:first-child{margin-top:0}.callout>:last-child{margin-bottom:0}
.callout p{max-width:var(--measure);margin:0 0 var(--s-2);font-size:var(--t-data);line-height:var(--lh-data)}
.callout p:last-child{margin-bottom:0}
/* an app inside a list: name, facts panel on the side, text, links */
.pick{padding-top:var(--s-6);border-top:var(--border)}
.pick h3{margin:0 0 var(--s-3);font-size:var(--t-h3)}
.pick h3 a{display:inline-block;padding-block:var(--s-1)}
.pick-facts{margin:0 0 var(--s-4);padding:var(--s-3);background:var(--surface);border:var(--border);border-radius:var(--r-sm)}
.pick-facts div+div{margin-top:var(--s-2)}
.pick-facts dt{color:var(--ink-soft);font-size:var(--t-meta);font-weight:var(--w-body)}
.pick-facts dd{margin:0;font-size:var(--t-data);line-height:var(--lh-data)}
.pick-price{font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.pick-text>:first-child{margin-top:0}
.pick-text p{margin:0 0 var(--s-4);max-width:var(--measure)}
.pick-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0;padding:0;list-style:none;font-size:var(--t-data)}
.pick-links a{display:inline-block;padding-block:var(--s-1);text-decoration:none}.pick-links a:hover{text-decoration:underline}
@media (min-width:48em){
.pick{display:grid;grid-template-columns:minmax(0,1fr) 15rem;grid-template-areas:"h f" "t f" "l f";gap:var(--s-3) var(--s-6)}
.pick h3{grid-area:h}.pick-facts{grid-area:f;align-self:start;margin:0}
.pick-text{grid-area:t}.pick-links{grid-area:l}
}
/* facts strip on a review: the links in a row, then one line per fact */
.facts-links{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-3);padding:0;list-style:none}
/* the builder writes Labeldomain as siblings, so the box is the , not the */
.facts-links li{flex:0 0 auto;padding:var(--s-2) var(--s-3);border:var(--border);border-radius:var(--r-sm)}
.facts-links li:hover{border-color:var(--link);background:var(--surface)}
.facts-links a{display:block;font-size:var(--t-data);font-weight:var(--w-em);text-decoration:none}
.facts-links small{display:block;color:var(--ink-soft);font-size:var(--t-meta);font-weight:var(--w-body)}
.facts-line{margin:0 0 var(--s-2);font-size:var(--t-data);line-height:var(--lh-data)}
.facts-line b{color:var(--ink-strong);font-weight:var(--w-em)}
/* hub rows: app, blurb, and the cheapest listed price on the side */
.cards{margin:0;padding:0;list-style:none;border-top:var(--border)}
.cards li{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);justify-content:space-between;
padding:var(--s-3) 0;border-bottom:var(--border)}
.cards-main{flex:1 1 16rem;min-width:0}
.cards-main a{display:inline-block;font-size:var(--t-h3);font-weight:var(--w-bold);text-decoration:none}
.cards-main a:hover{text-decoration:underline}
.cards-blurb{display:block;margin-top:var(--s-1);max-width:var(--measure);font-size:var(--t-data);line-height:var(--lh-data);color:var(--ink-strong)}
.cards-side{flex:0 0 auto;text-align:left}
.cards-price{display:block;font-size:var(--t-h3);font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
.cards-plan,.cards-store{display:block;font-size:var(--t-meta);color:var(--ink-soft)}
.cards-none{display:block;font-size:var(--t-meta);color:var(--ink-soft)}
@media (min-width:48em){.cards-side{text-align:right}}
/* index rows */
.page-list,.related ul,.platform-list{margin:0;padding:0;list-style:none}
.page-list{border-top:var(--border)}
.page-list li{padding:var(--s-3) 0;border-bottom:var(--border)}
.page-list h3{margin:0 0 var(--s-1);font-size:var(--t-h3)}
.page-list h3 a{display:inline-block;padding-block:var(--s-1);text-decoration:none}.page-list h3 a:hover{text-decoration:underline}
.page-list p{max-width:var(--measure);margin:0;font-size:var(--t-data);line-height:var(--lh-data);color:var(--ink-strong)}
.page-list-date{margin-top:var(--s-1)!important;font-size:var(--t-meta)!important;color:var(--ink-soft)!important}
.related h2{margin-top:var(--s-16)}
.related li{padding:var(--s-2) 0;border-bottom:var(--border)}
.related a{display:inline-block;padding-block:var(--s-1);font-size:var(--t-data);text-decoration:none}.related a:hover{text-decoration:underline}
.platform-list li{padding:var(--s-2) 0;border-bottom:var(--border);font-size:var(--t-data)}
/* compare: a feature, then one answer per app */
.compare-list{margin:0;padding:0;list-style:none;border-top:var(--border)}
.compare-list>li{padding:var(--s-3) 0;border-bottom:var(--border)}
.compare-feat{margin:0 0 var(--s-2);font-weight:var(--w-bold);font-size:var(--t-data)}
.compare-line{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--s-3);margin:0 0 var(--s-1);
font-size:var(--t-data);line-height:var(--lh-data)}
.compare-app{padding-top:.1em}
/* answers: the word carries the meaning, the colour only repeats it */
.ans--y{color:var(--free);font-weight:var(--w-em)}
.ans--u{color:var(--unsure)}
/* matrix: a panel per app */
.matrix-grid{display:grid;gap:var(--block-gap)}
.matrix-card{padding:var(--pad);border:var(--border);border-radius:var(--r)}
.matrix-card h3{margin:0 0 var(--s-2);font-size:var(--t-h3)}
.matrix-card ul{margin:0;padding:0;list-style:none}
.matrix-card li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);padding:var(--s-2) 0;
border-top:var(--border);font-size:var(--t-data);line-height:var(--lh-data)}
.matrix-k{color:var(--ink-strong)}
@media (min-width:48em){.matrix-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}}
/* a feature across apps, grouped by Free / Paid / Not confirmed */
.featureapps{display:grid;gap:var(--s-6)}
.fa-group h3{margin:0 0 var(--s-2);font-size:var(--t-h3)}
.fa-group ul{margin:0;padding:0;list-style:none;border-top:var(--border)}
.fa-group li{padding:var(--s-3) 0;border-bottom:var(--border)}
.fa-head{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3);font-size:var(--t-data)}
.fa-head strong{font-size:var(--t-h3);font-weight:var(--w-bold)}
.fa-head>span{color:var(--ink-strong)}
.fa-plan{display:inline-flex;align-items:baseline;gap:var(--s-1)}
.fa-lab{color:var(--ink-soft)}
.fa-how,.fa-lim{max-width:var(--measure);margin:var(--s-1) 0 0;font-size:var(--t-data);line-height:var(--lh-data);color:var(--ink-strong)}
.fa-group--free .fa-head strong{color:var(--ink)}
.fa-group--free h3{color:var(--free)}
/* apps listed for one country */
.local-list{margin:0;padding:0;list-style:none;border-top:var(--border)}
.local-list li{padding:var(--s-3) 0;border-bottom:var(--border);font-size:var(--t-data);font-weight:var(--w-em)}
.local-list li a{display:inline-block;padding-block:var(--s-1)}
.local-meta{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin:var(--s-1) 0 0}
/* pros and cons */
.proscons{display:grid;gap:var(--block-gap)}
.pros,.cons{padding:var(--pad);border:var(--border);border-radius:var(--r)}
.pros h3,.cons h3{margin:0 0 var(--s-2);color:var(--ink-strong)}
.pros h3{color:var(--free)}
.pros ul,.cons ul{margin:0;padding:0;list-style:none}
.pros li,.cons li{position:relative;margin-bottom:var(--s-2);padding-left:var(--s-4);font-size:var(--t-data);line-height:var(--lh-data)}
.pros li:last-child,.cons li:last-child{margin-bottom:0}
/* the tick is drawn, not typed: U+2713 is outside the Inter subset this site ships, so a character
would fall back to whatever the device has, or to a box. The dash is U+2013, which is in the subset. */
.pros li::before{content:"";position:absolute;left:2px;top:.42em;width:.42em;height:.2em;
border-left:2px solid var(--free);border-bottom:2px solid var(--free);transform:rotate(-45deg)}
.cons li::before{content:"\2013";position:absolute;left:0;color:var(--ink-soft)}
@media (min-width:48em){.proscons{grid-template-columns:1fr 1fr}}
/* verdict */
.verdict{display:grid;gap:var(--block-gap)}
.verdict p{max-width:none;margin:0;padding:var(--pad);border:var(--border);border-radius:var(--r);font-size:var(--t-data);line-height:var(--lh-data)}
.verdict p:first-child{background:var(--surface)}
@media (min-width:48em){.verdict{grid-template-columns:1fr 1fr}}
/* FAQ */
.faq details{border-bottom:var(--border)}
.faq details:first-of-type{border-top:var(--border)}
.faq summary{display:grid;grid-template-columns:1em minmax(0,1fr);gap:var(--s-2);padding:var(--s-3) 0;
list-style:none;cursor:pointer;font-weight:var(--w-em);font-size:var(--t-data)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--ink-soft);font-weight:var(--w-bold)}
.faq details[open] summary::before{content:"–"}
.faq summary:hover{color:var(--link)}
.faq details>:not(summary){max-width:var(--measure);margin:0 0 var(--s-3);padding-left:calc(1em + var(--s-2));
font-size:var(--t-data);line-height:var(--lh-data)}
/* sources: closed by default, one line of links inside */
.sources-fold summary{padding-block:var(--s-3);list-style:none;cursor:pointer}
.sources-fold summary::-webkit-details-marker{display:none}
.sources-fold summary h2{display:inline;margin:0;font-size:var(--t-h3)}
.sources-fold summary::after{content:" +";color:var(--ink-soft);font-weight:var(--w-bold)}
.sources-fold[open] summary::after{content:" –"}
.sources-fold summary:hover h2{color:var(--link)}
.sources-fold summary:active h2{color:var(--ink)}
.sources{margin-top:var(--s-16)!important;padding-top:var(--s-4);border-top:var(--border)}
.sources-line{max-width:none;margin:var(--s-3) 0 0;font-size:var(--t-meta);line-height:1.7;color:var(--ink-strong)}
.sources-sep{color:var(--ink-soft)}
/* small print under data */
.data-note,.checked{max-width:var(--measure);margin:var(--s-2) 0 0;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--ink-soft)}
.avail p{max-width:var(--measure);margin:0 0 var(--s-2);font-size:var(--t-data);line-height:var(--lh-data)}
.avail>p:last-child{margin-bottom:0}
/* ledger — tables. Prices are the reason this site exists, so the number is the loudest thing in a row:
right-aligned, tabular figures, with its currency and store beside it. Head sits on --surface.
Wide screens scroll with the first column fixed; under 640px site.js folds each row into a . */
.table-wrap{overflow-x:auto;overscroll-behavior-inline:contain;border:var(--border);border-radius:var(--r-sm)}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-data);line-height:var(--lh-data)}
.table-wrap th,.table-wrap td{padding:var(--cell-y) var(--cell-x);text-align:left;vertical-align:top;border-bottom:var(--border)}
.table-wrap thead th{position:relative;background:var(--surface);color:var(--ink);font-weight:var(--w-bold);white-space:nowrap}
.table-wrap thead th::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:var(--line-strong)}
.table-wrap tbody tr:last-child>*{border-bottom:0}
.table-wrap tbody th{font-weight:var(--w-em)}
/* numbers align down a column wherever they appear */
.table-wrap td,.pm-price,.pricefold-price,.plans td{font-variant-numeric:tabular-nums}
/* the first column stays while a wide table scrolls sideways */
.table-wrap--fold thead th:first-child,.table-wrap--fold tbody td:first-child,.table-wrap--fold tbody th:first-child{
position:sticky;left:0;background:var(--canvas);border-right:var(--border)}
.table-wrap--fold thead th:first-child{background:var(--surface);z-index:2}
.table-wrap--fold tbody td:first-child,.table-wrap--fold tbody th:first-child{z-index:1}
.pricemap-t th,.pricemap-t td{min-width:7.5rem}
.pricemap-t thead th:first-child,.pricemap-t tbody th{min-width:6.5rem}
.pm-price{font-weight:var(--w-bold)}
/* facts table on a review / country page */
table.facts{font-size:var(--t-data)}
table.facts th[scope=row]{width:40%;color:var(--ink-strong);font-weight:var(--w-em)}
/* where an app runs */
.where-t th[scope=row]{font-weight:var(--w-em)}
.where-t td a{font-size:var(--t-meta)}
/* prices per app, folded: app and price in the summary, the rest inside */
.pricefold{border:var(--border);border-radius:var(--r-sm);overflow:hidden}
.pricefold-head{display:grid;grid-template-columns:1em minmax(0,1fr) auto;gap:var(--s-2);margin:0;
padding:var(--cell-y) var(--cell-x);background:var(--surface);border-bottom:1px solid var(--line-strong);color:var(--ink)}
.pricefold-row{border-bottom:var(--border)}
.pricefold-row:last-child{border-bottom:0}
.pricefold-row summary{display:grid;grid-template-columns:1em minmax(0,1fr) auto;gap:var(--s-2);
padding:var(--cell-y) var(--cell-x);list-style:none;cursor:pointer;font-size:var(--t-data)}
.pricefold-row summary::-webkit-details-marker{display:none}
.pricefold-row summary::before{content:"+";color:var(--ink-soft);font-weight:var(--w-bold)}
.pricefold-row[open] summary::before{content:"–"}
.pricefold-row summary:hover{background:var(--surface-2)}
.pricefold-app{font-weight:var(--w-em)}
.pricefold-app a{display:inline-block;padding-block:var(--s-1)}
.pricefold-price{font-weight:var(--w-bold);font-variant-numeric:tabular-nums;text-align:right}
.pricefold-row dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-3);
margin:0;padding:0 var(--cell-x) var(--cell-y) calc(var(--cell-x) + 1em + var(--s-2));font-size:var(--t-meta)}
.pricefold-row dt{color:var(--ink-soft)}
.pricefold-row dd{margin:0;color:var(--ink)}
/* add-ons under their country */
.addons{display:grid;gap:var(--s-4)}
.addons-country{border:var(--border);border-radius:var(--r-sm);overflow:hidden}
.addons-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2);
margin:0;padding:var(--cell-y) var(--cell-x);background:var(--surface);border-bottom:1px solid var(--line-strong);
font-size:var(--t-data);font-weight:var(--w-bold)}
.addons-store{color:var(--ink-soft)}
.addons-items{margin:0;padding:0;list-style:none}
.addons-item{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-4);
padding:var(--cell-y) var(--cell-x);border-bottom:var(--border);font-size:var(--t-data)}
.addons-item:last-child{border-bottom:0}
.addons-what b{font-weight:var(--w-em)}
.addons-what span{display:block;color:var(--ink-soft);font-size:var(--t-meta)}
.addons-prices{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);margin:0;padding:0;list-style:none;
font-weight:var(--w-bold);font-variant-numeric:tabular-nums}
/* narrow screens: site.js folds table rows into (the table stays as the source) */
.table-wrap.is-folded{display:none}
.rowfold{border:var(--border);border-radius:var(--r-sm);overflow:hidden}
.rowfold-row{border-bottom:var(--border)}
.rowfold-row:last-child{border-bottom:0}
.rowfold summary{display:grid;grid-template-columns:1em minmax(0,1fr);gap:var(--s-2);padding:var(--cell-y) var(--cell-x);
list-style:none;cursor:pointer;font-weight:var(--w-em);font-size:var(--t-data)}
.rowfold summary::-webkit-details-marker{display:none}
.rowfold summary::before{content:"+";color:var(--ink-soft);font-weight:var(--w-bold)}
.rowfold-row[open] summary::before{content:"–"}
.rowfold summary:hover{background:var(--surface-2)}
.rowfold dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-3);
margin:0;padding:0 var(--cell-x) var(--cell-y) calc(var(--cell-x) + 1em + var(--s-2));font-size:var(--t-meta)}
.rowfold dt{color:var(--ink-soft)}
.rowfold dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
/* ledger — shared polish. Everything here applies to all three directions; what differs is in variants/. */
::selection{background:var(--blue-soft);color:var(--ink)}
/* the first section head sits closer than a mid-page one: the lead already separated it */
.page-head+h2,.page-head+div+h2,.article>h2:first-child{margin-top:var(--s-8)}
/* long unbroken strings (package names, urls inside text) must not push a phone page sideways */
.article p,.article li,.article dd,.table-wrap td,.table-wrap th{overflow-wrap:break-word}
.article p,.article li{text-wrap:pretty}
/* a price that is confirmed reads as a fact, not as an offer: the number in ink, the store under it */
.cards-price,.pick-price,.pricefold-price,.pm-price{letter-spacing:-0.01em}
/* "Not confirmed" and "No price confirmed" are grey everywhere, never red, never bold */
.cards-none,.ans--u{font-weight:var(--w-body)}
/* tables the writer wrote by hand (plans) get the same head rule as the generated ones */
table.plans th[scope=col]{background:var(--surface)}
table.plans td:first-child,table.plans th[scope=row]{font-weight:var(--w-em)}
/* the search icon lines up with the nav text */
.site-nav-search .icon{display:block}
/* an h2 inside a block (FAQ, Sources, Related) is a block head, not a page section */
.sources h2,.faq h2{margin-top:0}
.faq h2{font-size:var(--t-h3);margin-bottom:var(--s-3)}
/* nothing on this site animates except a link changing colour */
a,.site-nav a,.site-search-close,summary{transition:color .1s ease-out}
.site-search-close:active,.site-nav a:active,summary:active{color:var(--ink)}
@media print{
.site-nav,.site-search,.site-nav-search{display:none}
.article{border:0;padding:0}
details{display:block}details>*{display:block}
}
/* Pictures (owner task 2026-11-10): page cover, 1-2 figures between text blocks with no caption,
app icons in picks and cards, page thumbnails in lists, favicons beside app names in tables.
Cover and figures take the full width of the text container. */
.article>figure.cover,.article>figure.fig{max-width:none}
.article>figure.cover{margin:0 0 var(--section-gap)}
.article>figure.fig{margin:var(--section-gap) 0 0}
.article>figure.fig+h2{margin-top:var(--s-6)}
figure.cover img,figure.fig img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--surface)}
.app-icon{flex:0 0 auto;border-radius:22%;background:var(--surface);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.pick h3 .app-icon{display:inline-block;width:56px;height:56px;margin-right:var(--s-3);vertical-align:middle}
.cards li{align-items:center}
.cards li>.app-icon,.cards-main>.app-icon{width:48px;height:48px}
.cards li{flex-wrap:nowrap}
.cards-main{display:flex;flex-direction:column}
.cards-main>.app-icon{margin-bottom:var(--s-2)}
@media (min-width:36em){
.cards-main{display:grid;grid-template-columns:48px 1fr;column-gap:var(--s-3);align-items:start}
.cards-main>.app-icon{grid-row:1/span 2;margin:0}
.cards-main>a,.cards-main>.cards-blurb{grid-column:2}
}
@media (max-width:35.99em){.cards li{flex-wrap:wrap}}
.page-list li.has-thumb{display:grid;grid-template-columns:1fr;gap:var(--s-2)}
.page-thumb{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover;border-radius:var(--r-sm);background:var(--surface)}
.page-thumb--icon{width:72px;aspect-ratio:1;border-radius:22%}
@media (min-width:36em){
.page-list li.has-thumb{grid-template-columns:168px 1fr;column-gap:var(--s-4);align-items:start}
.page-list li.has-thumb>.page-thumb{grid-row:1/span 3}
.page-list li.has-thumb>.page-thumb--icon{width:72px}
.page-list li.has-thumb>:not(.page-thumb){grid-column:2}
}
.app-fav{display:inline-block;width:20px;height:20px;margin-right:6px;vertical-align:-4px;border-radius:4px}
/* Direction B — "Broadsheet": the printed review supplement. Grey page, white sheet, more air,
one step larger body, no zebra, blue only on links and the current page. */
:root{
--page-bg:var(--surface);
--sheet-bg:var(--canvas);
--sheet-line:var(--line);
--sheet-pad:var(--s-4);
--t-body:17px;--lh-body:1.65;--t-data:15px;
/* заголовок крупнее: при тексте в 17px прежние 34px давали отношение 2.0 — заголовок не доминировал */
--t-h1:30px;
--measure:68ch;
--section-gap:48px;
/* the sheet is a page, not a canvas: narrow enough that a 68ch column fills it */
--page-w:900px;
}
@media (min-width:48em){:root{--sheet-pad:var(--s-8);--section-gap:56px;--t-h1:42px}}
body{background:var(--page-bg)}
.site-bar{border-bottom-color:var(--line-strong)}
.site-nav-search{background:var(--page-bg)}
/* the sheet holds the article; the crumbs and footer stay on the page ground */
.article{border-radius:var(--r-sm)}
/* a section head opens under a full-width hairline, the way a printed page breaks */
.article h2{padding-top:var(--s-4);border-top:var(--border)}
.faq h2,.sources-fold summary h2{padding-top:0;border-top:0}
.sources{border-top:0}
.related h2{padding-top:var(--s-4);border-top:var(--border)}
/* panels are quieter inside a sheet: no fill except on the one block that must be read first */
.matrix-card,.pros,.cons,.verdict p{background:var(--canvas);border-radius:var(--r-sm)}
.pick-facts{background:var(--surface);border:0;border-radius:var(--r-sm)}
.verdict p:first-child{background:var(--surface)}
.quick{border-radius:var(--r-sm)}
/* no zebra: the head rule and the row lines do the work */
.table-wrap--fold thead th:first-child,.table-wrap--fold tbody td:first-child,.table-wrap--fold tbody th:first-child{background:var(--canvas)}
.table-wrap--fold thead th:first-child{background:var(--surface)}
/* зелёный появляется один раз — как цвет заголовка группы Free, не как ещё одна рамка */
.fa-group--free h3{color:var(--free)}
/* Меньше кеглей на первом экране: «At a glance» читается тем же кеглем, что и текст, а крошки
и дата правки — кеглем таблиц. Было шесть размеров над сгибом, стало пять. */
.quick li{font-size:var(--t-body);line-height:var(--lh-body)}
.crumbs ol,.byline{font-size:var(--t-data)}
/* на листе фон уже отделяет блок, рамка поверх него — вторая граница на том же месте */
.quick{border:0}