/* Scorura — one stylesheet, both directions (logical properties), both themes.
   Sections: 1 fonts · 2 tokens · 3 reset/base · 4 layout · 5 topbar/nav · 6 buttons/chips
   7 hero/scorecard · 8 strip · 9 ranked rows · 10 table · 11 method/trust · 12 guides/faq/cta
   13 footer · 14 utilities/motion */

/* 1 ─ fonts (self-hosted, Arabic + Latin subsets of one family) */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E,U+2010-2011}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E,U+2010-2011}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}

/* 2 ─ tokens. Light is the default; dark redefines only tokens. */
:root{
  color-scheme:light;
  --bg:#FFFFFF;          /* page ground */
  --panel:#F8FAFC;       /* quiet surface */
  --card:#FFFFFF;        /* raised surface */
  --text:#0F172A;        /* ink */
  --sec:#5C6B82;         /* secondary text */
  --rule:#E2E8F0;        /* hairlines */
  --rule-strong:#C4CDD9;
  --accent:#1D4ED8;      /* fills: buttons, bars */
  --accent-hover:#1E40AF;
  --accent-text:#1D4ED8; /* accent as text on bg/panel */
  --accent-soft:#EFF6FF; /* tinted surface */
  --accent-ring:rgba(29,78,216,.18);
  --on-accent:#FFFFFF;
  --good:#047857;--good-soft:#ECFDF5;
  --warn:#B45309;--warn-soft:#FFFBEB;
  --bad:#B91C1C;--bad-soft:#FEF2F2;
  --band:#0F172A;--band-text:#FFFFFF;--band-sec:#CBD5E1;--band-rule:rgba(255,255,255,.12);
  --thead:#0F172A;--hero-a:#EFF6FF;--hero-b:#FFFFFF;--dot:rgba(15,23,42,.08);
  --shadow-1:0 1px 2px rgba(15,23,42,.05);
  --shadow-2:0 1px 2px rgba(15,23,42,.05),0 20px 40px -28px rgba(15,23,42,.35);
  --shadow-3:0 1px 2px rgba(15,23,42,.05),0 30px 60px -36px rgba(15,23,42,.35);
  --shadow-accent:0 12px 28px -12px rgba(29,78,216,.6);
  --grad-accent:linear-gradient(135deg,#2563EB 0%,#1D4ED8 48%,#4338CA 100%); /* buttons, active tiles, bar fills */
  --grad-text:linear-gradient(90deg,#1D4ED8,#4338CA); /* display words */
  --glow:rgba(37,99,235,.16);
  /* the header scale: minor subdivisions and the ten major divisions */
  --tick:rgba(15,23,42,.14);--tick-2:rgba(29,78,216,.42);
  --head:#F5F8FD;        /* the header band's flat ground */
  --rail:rgba(29,78,216,.78); /* the rule that opens the band */
  /* The ring's criterion colours. They were a cyan-and-violet set that belongs to another site's
     palette; they are now one hue - the brand blue - stepped light and dark so neighbouring
     segments stay apart without introducing a colour the brand does not own. */
  --seg-1:#1D4ED8;--seg-2:#60A5FA;--seg-3:#1E3A8A;--seg-4:#3B82F6;--seg-5:#172554;--seg-dim:.28;
  --t:180ms cubic-bezier(.2,.7,.2,1);
  --t-panel:220ms cubic-bezier(.2,.7,.2,1);
  --r-sm:10px;--r:16px;--r-lg:20px;--r-xl:24px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B1220;--panel:#111A2E;--card:#131D33;--text:#E6EBF5;--sec:#9AA8BF;--rule:#233047;--rule-strong:#334259;
    --accent:#2563EB;--accent-hover:#1D4ED8;--accent-text:#7CB0FF;--accent-soft:rgba(59,130,246,.14);--accent-ring:rgba(96,165,250,.28);--on-accent:#FFFFFF;
    --good:#4ADE80;--good-soft:rgba(52,211,153,.14);--warn:#FCD34D;--warn-soft:rgba(251,191,36,.14);--bad:#FCA5A5;--bad-soft:rgba(248,113,113,.14);
    --band:#111A2E;--band-text:#E6EBF5;--band-sec:#9AA8BF;--band-rule:rgba(255,255,255,.1);
    --thead:#1E2A42;--hero-a:#0F1A33;--hero-b:#0B1220;--dot:rgba(230,235,245,.07);--grad-accent:linear-gradient(135deg,#2563EB 0%,#3B5BDB 50%,#4F46E5 100%);--grad-text:linear-gradient(90deg,#7CB0FF,#A5B4FC);--glow:rgba(59,130,246,.22);--tick:rgba(230,235,245,.16);--tick-2:rgba(124,176,255,.5);--head:#0E1729;--rail:rgba(124,176,255,.55);--seg-1:#60A5FA;--seg-2:#BFDBFE;--seg-3:#2563EB;--seg-4:#93C5FD;--seg-5:#1D4ED8;--seg-dim:.55;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 1px 2px rgba(0,0,0,.4),0 20px 40px -28px rgba(0,0,0,.7);--shadow-3:0 1px 2px rgba(0,0,0,.4),0 30px 60px -36px rgba(0,0,0,.8);--shadow-accent:0 12px 28px -12px rgba(37,99,235,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1220;--panel:#111A2E;--card:#131D33;--text:#E6EBF5;--sec:#9AA8BF;--rule:#233047;--rule-strong:#334259;
  --accent:#2563EB;--accent-hover:#1D4ED8;--accent-text:#7CB0FF;--accent-soft:rgba(59,130,246,.14);--accent-ring:rgba(96,165,250,.28);--on-accent:#FFFFFF;
  --good:#4ADE80;--good-soft:rgba(52,211,153,.14);--warn:#FCD34D;--warn-soft:rgba(251,191,36,.14);--bad:#FCA5A5;--bad-soft:rgba(248,113,113,.14);
  --band:#111A2E;--band-text:#E6EBF5;--band-sec:#9AA8BF;--band-rule:rgba(255,255,255,.1);
  --thead:#1E2A42;--hero-a:#0F1A33;--hero-b:#0B1220;--dot:rgba(230,235,245,.07);--grad-accent:linear-gradient(135deg,#2563EB 0%,#3B5BDB 50%,#4F46E5 100%);--grad-text:linear-gradient(90deg,#7CB0FF,#A5B4FC);--glow:rgba(59,130,246,.22);--tick:rgba(230,235,245,.16);--tick-2:rgba(124,176,255,.5);--head:#0E1729;--rail:rgba(124,176,255,.55);--seg-1:#60A5FA;--seg-2:#BFDBFE;--seg-3:#2563EB;--seg-4:#93C5FD;--seg-5:#1D4ED8;--seg-dim:.55;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 1px 2px rgba(0,0,0,.4),0 20px 40px -28px rgba(0,0,0,.7);--shadow-3:0 1px 2px rgba(0,0,0,.4),0 30px 60px -36px rgba(0,0,0,.8);--shadow-accent:0 12px 28px -12px rgba(37,99,235,.7);
}

/* 3 ─ reset / base */
*,*::before,*::after{box-sizing:border-box;margin:0}
/* metric-matched local fallbacks so the swap to Plex moves as little text as possible (no network fetch) */
@font-face{font-family:"Plex Fallback";src:local("Arial"),local("ArialMT");size-adjust:101%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Plex Fallback";src:local("Geeza Pro"),local("GeezaPro"),local("Segoe UI"),local("Noto Sans Arabic");size-adjust:102.5%;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+FB50-FDFF,U+FE70-FEFC}
html{font-family:"IBM Plex Sans Arabic","Plex Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{line-height:1.7;font-size:1rem;overflow-x:clip;background:var(--bg);color:var(--text)}
html:lang(en) body{line-height:1.6}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
strong,b{font-weight:700}
h1,h2,h3,h4{font-weight:700;line-height:1.25;text-wrap:balance}
p{text-wrap:pretty}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent-soft);color:var(--text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-block-start:-100%;inset-inline-start:1rem;z-index:100;padding:.6rem 1rem;background:var(--accent);color:var(--on-accent);border-radius:var(--r-sm);font-weight:700}
.skip:focus{inset-block-start:1rem}
.num{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
span.num,b.num,i.num,time.num{direction:ltr}
.stats b.num{direction:inherit}
.i{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .i-dir{transform:scaleX(-1)}
.muted{color:var(--sec)}

/* 4 ─ layout */
.container{width:min(1200px,100% - 2.5rem);margin-inline:auto}
.section{padding-block:4rem}
.section-tight{padding-block:2.5rem}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-block-end:1.5rem;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.section-head p{color:var(--sec);margin-block-start:.25rem;max-width:60ch}
.link{color:var(--accent-text);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;transition:gap var(--t)}
.link:hover{text-decoration:underline;text-underline-offset:4px;gap:.55rem}
.link .i{width:1em;height:1em}
.band{background:var(--panel);border-block:1px solid var(--rule)}
@media(max-width:720px){.section{padding-block:2.5rem}}

/* 5 ─ topbar / nav */
.topbar{position:sticky;inset-block-start:0;z-index:30;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-block-end:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.25rem;letter-spacing:0;line-height:1}
.brand .mark{width:32px;height:32px;border-radius:9px;background:var(--accent);flex:none;position:relative}
.brand .mark::before,.brand .mark::after{content:"";position:absolute;inset-inline:8px;height:3.5px;border-radius:2px;background:#fff}
.brand .mark::before{inset-block-start:11px}.brand .mark::after{inset-block-start:17.5px}
.menu{display:flex;align-items:center;gap:.1rem;margin-inline-start:.5rem}
.menu>li{position:relative}
.menu>li>a{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .75rem;border-radius:var(--r-sm);color:var(--sec);transition:color var(--t),background var(--t)}
.menu>li>a .i{width:.9em;height:.9em;opacity:.7;transition:transform var(--t)}
.menu>li>a:hover,.menu>li:focus-within>a{color:var(--text);background:var(--panel)}
.menu>li>a[aria-current]{color:var(--accent-text);font-weight:700}
.menu>li:hover>a .i,.menu>li:focus-within>a .i{transform:rotate(180deg)}
.panel{position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-start:0;min-width:640px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-3);padding:1rem;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t-panel),transform var(--t-panel),visibility 0s linear var(--t-panel)}
.menu>li:hover>.panel,.menu>li:focus-within>.panel{opacity:1;visibility:visible;transform:none;transition:opacity var(--t-panel),transform var(--t-panel),visibility 0s}
.menu>li.is-dismissed>.panel{opacity:0;visibility:hidden} /* Escape closes the panel while focus returns to its link */
@media(min-width:901px) and (max-width:1279px){ /* below 1280 a panel anchored to its own item ran off the end edge (up to 136 px at 1100): anchor every panel to the menu's start instead, at least as wide as the menu so the hover path from any item stays inside it */
  .menu{position:relative}
  .menu>li{position:static}
  .panel{min-width:max(640px,100%)}
}
@media(min-width:901px) and (max-width:1179px){ /* below 1180 the header row is too tight: menu labels stay on one line with less padding, and the Compare button waits for 1180 (qa-r24) */
  .nav-end .btn{display:none}
  .menu>li>a{padding-inline:.5rem;white-space:nowrap}
}
@media(min-width:901px) and (max-width:999px){ /* the narrowest desktop header: tighter gaps so the English row fits at 901 */
  .nav{gap:.5rem}.menu{margin-inline-start:0}.menu>li>a{padding-inline:.4rem}
}
.panel::before{content:"";position:absolute;inset-inline:0;inset-block-start:-.6rem;height:.6rem}
.panel .panel-h{font-size:.75rem;color:var(--sec);margin-block-end:.5rem;padding-inline:.5rem}
.panel-feat{display:grid;gap:.5rem}
.panel-feat a{display:block;padding:.85rem 1rem;border-radius:var(--r);background:var(--panel);transition:background var(--t),transform var(--t)}
.panel-feat a:hover{background:var(--accent-soft);transform:translateY(-1px)}
.panel-feat small{display:block;font-size:.72rem;color:var(--accent-text);font-weight:700}
html:lang(en) .panel .panel-h,html:lang(en) .panel-feat small{letter-spacing:.02em}
.panel-feat b{display:block;line-height:1.35;margin-block-start:.15rem}
.panel-feat span{display:block;font-size:.85rem;color:var(--sec);margin-block-start:.2rem}
.panel-list a{display:flex;align-items:center;justify-content:space-between;padding:.45rem .5rem;border-radius:8px;font-size:.95rem;transition:background var(--t),color var(--t)}
.panel-list a:hover{background:var(--panel);color:var(--accent-text)}
.panel-list a .i{width:.85em;height:.85em;color:var(--sec)}
.nav-end{margin-inline-start:auto;display:flex;align-items:center;gap:.5rem}
.lang{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .7rem;border:1px solid var(--rule);border-radius:999px;font-size:.9rem;color:var(--sec);transition:border-color var(--t),color var(--t)}
.lang:hover{border-color:var(--text);color:var(--text)}
.theme-toggle{width:2.5rem;height:2.5rem;border-radius:999px;border:1px solid var(--rule);display:none;place-items:center;color:var(--sec);transition:border-color var(--t),color var(--t),transform var(--t)}
.theme-toggle:hover{border-color:var(--text);color:var(--text);transform:rotate(15deg)}
.js .theme-toggle{display:grid}
.theme-toggle .i-sun{display:none}.theme-toggle .i-moon{display:block}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}:root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}}
.drawer{display:none}
.burger{width:2.6rem;height:2.6rem;border-radius:var(--r-sm);border:1px solid var(--rule);display:grid;place-items:center;color:var(--text);transition:background var(--t)}
.burger:hover{background:var(--panel)}
.drawer[open] .burger .i-menu{display:none}.drawer:not([open]) .burger .i-close{display:none}
.drawer-body{position:absolute;inset-block-start:100%;inset-inline:0;height:calc(100dvh - 4rem);background:var(--bg);overflow:auto;padding:1rem 1.25rem 3rem;border-block-start:1px solid var(--rule);z-index:40}
.drawer-lang{display:flex;align-items:center;gap:.6rem;padding:.9rem 0;border-block-end:1px solid var(--rule);font-weight:700}
.drawer-lang .i:last-child{margin-inline-start:auto;color:var(--sec)}
.drawer-body .group{padding-block:.75rem;border-block-end:1px solid var(--rule)}
.drawer-body .group>a{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;font-weight:700;font-size:1.05rem}
.drawer-body .group ul{padding-inline-start:.75rem;padding-block:.25rem .5rem;display:grid;gap:.1rem}
.drawer-body .group ul a{display:block;padding:.35rem 0;color:var(--sec)}
.drawer-body .group ul a:hover{color:var(--text)}
.drawer-actions{display:grid;gap:.6rem;padding-block:1rem}
@media(max-width:900px){
  .menu,.nav-end .btn{display:none}
  .lang{padding:.4rem .6rem}
  .drawer{display:block}
}
@media(min-width:901px){.drawer{display:none!important}}

/* 6 ─ buttons / chips / pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.3rem;border-radius:12px;font-weight:700;line-height:1.2;border:1px solid transparent;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),box-shadow var(--t)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-accent)}
.btn-primary:active{transform:none;box-shadow:none}
.btn-ink{background:var(--text);color:var(--bg)}
.btn-ink:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-ghost{border-color:var(--rule);background:var(--card);color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn-line{border-color:var(--rule-strong);color:var(--text);background:transparent}
.btn-line:hover{border-color:var(--text);background:var(--panel)}
.btn-sm{padding:.55rem 1rem;font-size:.95rem;border-radius:10px}
.btn-xs{padding:.4rem .7rem;font-size:.85rem;border-radius:8px}
.btn .i{width:1em;height:1em}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--rule);background:var(--card);font-size:.85rem;color:var(--sec)}
.chip .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.chip-accent{border-color:transparent;background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .65rem;border-radius:8px;font-weight:700;font-size:.9rem;white-space:nowrap}
.pill-s{background:var(--accent);color:var(--on-accent)}
.pill-ok{background:var(--good-soft);color:var(--good)}
.pill-mid{background:var(--warn-soft);color:var(--warn)}
/* Amber on every score under 8 painted 59 of 61 chips the same warning colour, so the colour said
   nothing. The bands now follow the published threshold: at or above it the score is recommended and
   carries the accent; below it the chip is neutral, and amber is kept for a real warning. */
.pill-n{background:var(--panel);color:var(--text);border:1px solid var(--rule-strong)}
.pill-no{background:var(--bad-soft);color:var(--bad)}
.pill-na{background:var(--panel);color:var(--sec);border:1px dashed var(--rule-strong);font-weight:400}
.tag{font-size:.75rem;font-weight:700;color:var(--accent-text);background:var(--accent-soft);padding:.15rem .55rem;border-radius:999px;white-space:nowrap}
.tag-warn{color:var(--warn);background:var(--warn-soft)}
.row .tag{white-space:normal;border-radius:10px;min-width:0;max-width:100%}

/* 7 ─ hero + scorecard */
.hero{position:relative;isolation:isolate;overflow:hidden;border-block-end:1px solid var(--rule)}
.hero-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center;padding-block:4rem 5.5rem}

.hero--wash{background:var(--bg)}
/* decorative glows below use physical insets on purpose: they are ornaments, identical in both directions */
.hero--wash::before{content:"";position:absolute;z-index:-1;inset:-30% auto auto -10%;width:60vw;max-width:820px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--accent-ring),transparent 62%)}
.hero--ink-card{background:var(--panel)}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--accent-text);font-weight:700}
.kicker .i{width:1em;height:1em}
.hero h1{font-size:clamp(2rem,1.1rem + 3.4vw,3.4rem);margin-block-start:1rem;line-height:1.28;max-width:20ch}
html:lang(en) .hero h1{font-size:clamp(2.2rem,1.2rem + 3.6vw,3.7rem);line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.lead{color:var(--sec);font-size:clamp(1.05rem,.95rem + .5vw,1.25rem);margin-block-start:1.25rem;max-width:48ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:2rem}
.stats{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-block-start:2.5rem;padding-block-start:1.5rem;border-block-start:1px solid var(--rule)}
.stats b{display:block;font-size:1.5rem;line-height:1.2}
.stats span{color:var(--sec);font-size:.85rem}
.scorecard{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl);padding:1.5rem;box-shadow:0 0 0 4px var(--accent-ring),var(--shadow-3);transition:transform var(--t-panel),box-shadow var(--t-panel),border-color var(--t)}
.scorecard:hover{transform:translateY(-4px);box-shadow:0 0 0 6px var(--accent-ring),var(--shadow-3);border-color:var(--rule-strong)}
.hero--wash .scorecard{box-shadow:var(--shadow-3)}
.hero--ink-card .scorecard{background:var(--band);color:var(--band-text);border-color:var(--band);box-shadow:var(--shadow-3)}
/* The house rule puts a rank marker at the start edge, as .rank does on every row. The
   scorecard is the one exception: its start corner holds the provider logo and name, so the
   ribbon sits at the end edge. It still mirrors with the layout, being a logical inset. */
.ribbon{position:absolute;inset-block-start:1.5rem;inset-inline-end:1.5rem;background:var(--accent);color:var(--on-accent);font-size:.78rem;font-weight:700;padding:.3rem .7rem;border-radius:999px}
.sc-top{display:flex;align-items:center;gap:1rem}
.logo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:1.2rem;color:#fff;flex:none;background:var(--accent);position:relative;overflow:hidden;line-height:1}
/* Real logo later: drop <img src alt=""> inside .logo. The box keeps its size; the letter hides. */
.logo img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;object-fit:contain;padding:14%;background:#fff} /* without border-box the padding pushed the mark to 128% of a clipped box and ate its edges */
.logo:has(img){background:#fff;border:1px solid var(--rule)}
/* Eleven of the marks are wordmarks three to seven times wider than they are tall. Fitted into the
   square tile they rendered about eight pixels high beside square symbols filling theirs, which is
   what made the row of tiles look uneven. The tile now widens for them and keeps its height, so the
   mark is read at the size it was drawn for. The class is written by the generator, which reads each
   file's own viewBox, so a logo added later needs nothing typed here. */
.logo:has(img.wide){width:auto;aspect-ratio:2/1}
.logo img.wide{padding:8% 4%}
.logo:has(img) .logo-fallback{visibility:hidden}
.logo-b{background:#0F172A}.logo-c{background:#0EA5E9}.logo-d{background:#7C3AED}.logo-e{background:#DB2777}
:root[data-theme="dark"] .logo-b{background:#334155}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-b{background:#334155}}
.sc-top h2,.sc-top h3{font-size:1.25rem}
.sc-top small{color:var(--sec);display:block}
.hero--ink-card .sc-top small{color:var(--band-sec)}
.bigscore{display:flex;align-items:baseline;gap:.6rem;margin-block-start:1.25rem}
.bigscore .n{font-size:4rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--accent-text)}
.hero--ink-card .bigscore .n{color:#fff}
.bigscore .l{color:var(--sec)}
.sub{display:grid;gap:.6rem;margin-block-start:1.25rem}
.sub li{display:grid;grid-template-columns:1fr auto;gap:.3rem .75rem;font-size:.9rem;color:var(--sec)}
.sub b{color:var(--text);font-variant-numeric:tabular-nums}
.bar{grid-column:1/-1;height:6px;border-radius:999px;background:var(--rule);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px;width:0}
.bar i[data-v="0"]{width:0%}.bar i[data-v="1"]{width:1%}.bar i[data-v="2"]{width:2%}.bar i[data-v="3"]{width:3%}.bar i[data-v="4"]{width:4%}.bar i[data-v="5"]{width:5%}.bar i[data-v="6"]{width:6%}.bar i[data-v="7"]{width:7%}.bar i[data-v="8"]{width:8%}.bar i[data-v="9"]{width:9%}.bar i[data-v="10"]{width:10%}.bar i[data-v="11"]{width:11%}.bar i[data-v="12"]{width:12%}.bar i[data-v="13"]{width:13%}.bar i[data-v="14"]{width:14%}.bar i[data-v="15"]{width:15%}.bar i[data-v="16"]{width:16%}.bar i[data-v="17"]{width:17%}.bar i[data-v="18"]{width:18%}.bar i[data-v="19"]{width:19%}.bar i[data-v="20"]{width:20%}.bar i[data-v="21"]{width:21%}.bar i[data-v="22"]{width:22%}.bar i[data-v="23"]{width:23%}.bar i[data-v="24"]{width:24%}.bar i[data-v="25"]{width:25%}.bar i[data-v="26"]{width:26%}.bar i[data-v="27"]{width:27%}.bar i[data-v="28"]{width:28%}.bar i[data-v="29"]{width:29%}.bar i[data-v="30"]{width:30%}.bar i[data-v="31"]{width:31%}.bar i[data-v="32"]{width:32%}.bar i[data-v="33"]{width:33%}.bar i[data-v="34"]{width:34%}.bar i[data-v="35"]{width:35%}.bar i[data-v="36"]{width:36%}.bar i[data-v="37"]{width:37%}.bar i[data-v="38"]{width:38%}.bar i[data-v="39"]{width:39%}.bar i[data-v="40"]{width:40%}.bar i[data-v="41"]{width:41%}.bar i[data-v="42"]{width:42%}.bar i[data-v="43"]{width:43%}.bar i[data-v="44"]{width:44%}.bar i[data-v="45"]{width:45%}.bar i[data-v="46"]{width:46%}.bar i[data-v="47"]{width:47%}.bar i[data-v="48"]{width:48%}.bar i[data-v="49"]{width:49%}.bar i[data-v="50"]{width:50%}.bar i[data-v="51"]{width:51%}.bar i[data-v="52"]{width:52%}.bar i[data-v="53"]{width:53%}.bar i[data-v="54"]{width:54%}.bar i[data-v="55"]{width:55%}.bar i[data-v="56"]{width:56%}.bar i[data-v="57"]{width:57%}.bar i[data-v="58"]{width:58%}.bar i[data-v="59"]{width:59%}.bar i[data-v="60"]{width:60%}.bar i[data-v="61"]{width:61%}.bar i[data-v="62"]{width:62%}.bar i[data-v="63"]{width:63%}.bar i[data-v="64"]{width:64%}.bar i[data-v="65"]{width:65%}.bar i[data-v="66"]{width:66%}.bar i[data-v="67"]{width:67%}.bar i[data-v="68"]{width:68%}.bar i[data-v="69"]{width:69%}.bar i[data-v="70"]{width:70%}.bar i[data-v="71"]{width:71%}.bar i[data-v="72"]{width:72%}.bar i[data-v="73"]{width:73%}.bar i[data-v="74"]{width:74%}.bar i[data-v="75"]{width:75%}.bar i[data-v="76"]{width:76%}.bar i[data-v="77"]{width:77%}.bar i[data-v="78"]{width:78%}.bar i[data-v="79"]{width:79%}.bar i[data-v="80"]{width:80%}.bar i[data-v="81"]{width:81%}.bar i[data-v="82"]{width:82%}.bar i[data-v="83"]{width:83%}.bar i[data-v="84"]{width:84%}.bar i[data-v="85"]{width:85%}.bar i[data-v="86"]{width:86%}.bar i[data-v="87"]{width:87%}.bar i[data-v="88"]{width:88%}.bar i[data-v="89"]{width:89%}.bar i[data-v="90"]{width:90%}.bar i[data-v="91"]{width:91%}.bar i[data-v="92"]{width:92%}.bar i[data-v="93"]{width:93%}.bar i[data-v="94"]{width:94%}.bar i[data-v="95"]{width:95%}.bar i[data-v="96"]{width:96%}.bar i[data-v="97"]{width:97%}.bar i[data-v="98"]{width:98%}.bar i[data-v="99"]{width:99%}.bar i[data-v="100"]{width:100%}
.bar-na{background:repeating-linear-gradient(90deg,var(--rule-strong) 0 6px,transparent 6px 10px)}
.sc-actions{display:flex;gap:.6rem;margin-block-start:1.5rem}
.sc-actions .btn{flex:1 1 auto;min-width:max-content}
.checked{display:flex;align-items:center;gap:.5rem;margin-block-start:1.25rem;padding-block-start:1rem;border-block-start:1px solid var(--rule);font-size:.9rem;color:var(--sec)}
.checked .i{color:var(--good)}
@media(max-width:1000px){.hero-inner{grid-template-columns:1fr;padding-block-end:5rem}.scorecard{max-width:560px}}
@media(max-width:720px){.hero-inner{padding-block:2rem 4rem;gap:2rem}.stats{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.sc-actions{flex-wrap:wrap}}

/* 8 ─ category strip */
.strip{margin-block-start:-3rem;position:relative;z-index:2}
.strip ul{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:.6rem;box-shadow:var(--shadow-2)}
.strip a{display:flex;align-items:center;gap:.75rem;padding:.8rem .9rem;border-radius:14px;transition:background var(--t)}
.strip a:hover{background:var(--panel)}
.strip .ic{width:36px;height:36px;border-radius:10px;background:var(--panel);display:grid;place-items:center;color:var(--accent-text);flex:none}
.strip b{display:block;font-size:.95rem;line-height:1.2}
.strip small{color:var(--sec);font-size:.8rem}
@media(max-width:1000px){.strip ul{grid-template-columns:repeat(3,1fr)}}
.strip{position:relative}
@media(max-width:720px){
  .strip{margin-block-start:-1.75rem;width:100%;padding-inline:1.25rem}
  .strip ul{display:flex;gap:.35rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:.5rem;scrollbar-width:none;padding:.5rem;border-radius:var(--r);-webkit-overflow-scrolling:touch}
  .strip ul::-webkit-scrollbar{display:none}
  .strip li{flex:0 0 auto;scroll-snap-align:start}
  .strip a{padding:.55rem .8rem;border-radius:10px;white-space:nowrap}
  .strip .ic{width:28px;height:28px;border-radius:8px}
  .strip .ic .i{width:1em;height:1em}
  .strip b{font-size:.9rem}.strip small{display:none}
  .strip::after{content:"";position:absolute;inset-block:.5rem;inset-inline-end:1.25rem;width:3.5rem;pointer-events:none;border-start-end-radius:var(--r);border-end-end-radius:var(--r);background:linear-gradient(to right,transparent,var(--card));transition:opacity var(--t)}
  [dir="rtl"] .strip::after{background:linear-gradient(to left,transparent,var(--card))}
  .strip.at-end::after{opacity:0}
}

/* 8b ─ category panes: hash-driven without JS (:target + :has), class-driven with JS */
.cat-pane{display:none}
html:not(.js) .cat-pane:target{display:block}
html:not(.js) #ranking:not(:has(.cat-pane:target)) .cat-pane:first-of-type{display:block}
.js #ranking .cat-pane{display:none}
.js #ranking .cat-pane.is-active{display:block}
html:not(.js) main:not(:has(.cat-pane:target)) .strip a[href="#hosting"],html:not(.js) main:has(#hosting:target) .strip a[href="#hosting"],html:not(.js) main:has(#vpn:target) .strip a[href="#vpn"],html:not(.js) main:has(#builders:target) .strip a[href="#builders"],html:not(.js) main:has(#domains:target) .strip a[href="#domains"],html:not(.js) main:has(#email:target) .strip a[href="#email"]{background:var(--accent-soft);color:var(--accent-text)}
html:not(.js) main:not(:has(.cat-pane:target)) .strip a[href="#hosting"] small,html:not(.js) main:has(#hosting:target) .strip a[href="#hosting"] small,html:not(.js) main:has(#vpn:target) .strip a[href="#vpn"] small,html:not(.js) main:has(#builders:target) .strip a[href="#builders"] small,html:not(.js) main:has(#domains:target) .strip a[href="#domains"] small,html:not(.js) main:has(#email:target) .strip a[href="#email"] small{color:var(--accent-text)}
.js main .strip a[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-text)}
.js main .strip a[aria-selected="true"] .ic{background:var(--card)}
.js main .strip a[aria-selected="true"] small{color:var(--accent-text)}
.cat-pane{scroll-margin-block-start:5rem}

/* 9 ─ ranked rows */
.disc-line{font-size:.85rem;color:var(--sec);margin-block-end:1.25rem;text-wrap:pretty}
.disc-line a{color:var(--accent-text);font-weight:700}
.disc-line a:hover{text-decoration:underline;text-underline-offset:4px}
.disclosure{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1.1rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);font-size:.9rem;color:var(--sec);margin-block-end:1.75rem}
.disclosure .i{color:var(--accent-text);margin-block-start:.2rem}
.disclosure b{color:var(--text)}
.ranked{display:grid;gap:1rem}
.row{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"logo title score act" "logo body score act";gap:.35rem 1.5rem;align-items:start;border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.5rem;background:var(--card);position:relative;transition:box-shadow var(--t),border-color var(--t),transform var(--t)}
.row .logo{grid-area:logo}.rtitle{grid-area:title;min-width:0}.rbody{grid-area:body;min-width:0}.rscore{grid-area:score}.ract{grid-area:act}
.row:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.row.is-best{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.row.is-best:hover{box-shadow:0 0 0 4px var(--accent-ring),var(--shadow-2)}
.rank{position:absolute;inset-block-start:-.8rem;inset-inline-start:1.25rem;background:var(--text);color:var(--bg);font-weight:700;font-size:.8rem;padding:.2rem .65rem;border-radius:999px}
.row.is-best .rank{background:var(--accent);color:var(--on-accent)}
.row .logo{width:64px;height:64px;border-radius:16px;font-size:1.4rem}
.row h3{font-size:1.2rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;align-self:end}
.row p{color:var(--sec);font-size:.92rem;margin-block-start:.15rem;max-width:60ch}
.feats{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin-block-start:.75rem;font-size:.9rem}
.feats li{display:inline-block}
.feats li::before{content:"";display:inline-block;vertical-align:middle;margin-inline-end:.4rem;width:6px;height:6px;border-radius:50%;background:var(--good)}
.subscores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem 1rem;align-items:end;margin-block-start:1rem;padding-block-start:.9rem;border-block-start:1px solid var(--rule);font-size:.8rem;color:var(--sec)}
.subscores li{display:grid;grid-template-columns:1fr auto;gap:.2rem .5rem}
.subscores b{color:var(--text)}
.subscores .bar{height:5px}
.subscores .na b{color:var(--sec);font-weight:400;font-size:.75rem;line-height:1.3;text-align:end}
.note{display:inline-flex;align-items:flex-start;gap:.4rem;line-height:1.5;text-wrap:pretty;margin-block-start:.75rem;font-size:.85rem;color:var(--warn);background:var(--warn-soft);padding:.35rem .7rem;border-radius:8px}
.note .i{width:1em;height:1em;margin-block-start:.2em}
.note time{white-space:nowrap} /* a date never splits between day and month */
.rscore{text-align:center;padding-inline:1.25rem;border-inline-start:1px solid var(--rule)}
.rscore .n{font-size:2.25rem;font-weight:700;color:var(--accent-text);letter-spacing:-.04em;line-height:1}
.rscore .n.is-mid{color:var(--warn)}
.rscore .l{font-size:.85rem;color:var(--sec);display:block;margin-block-start:.3rem}
.rscore .n.is-mid+.l{color:var(--warn);font-weight:700}
.rscore .d{font-size:.8rem;color:var(--sec);display:block;margin-block-start:.35rem;white-space:nowrap}
.rscore .d time,.checked time{color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.ract{display:grid;gap:.5rem;min-width:160px;max-width:230px}
.ract small{text-align:center;color:var(--sec);font-size:.8rem;line-height:1.45;text-wrap:pretty}
.ract small b{color:var(--text)}
@media(max-width:900px){.subscores{grid-template-columns:1fr 1fr}.subscores li.na{grid-column:1/-1}}
@media(max-width:720px){
  .row{grid-template-columns:auto 1fr;grid-template-areas:"logo title" "body body" "score score" "act act";gap:.9rem 1rem;padding:1.6rem 1.1rem 1.1rem}.row .logo{width:48px;height:48px;font-size:1.1rem;align-self:center}.row h3{align-self:center}
  .rscore{display:flex;align-items:center;gap:.75rem;padding:0;border:0;text-align:start}.rscore .l,.rscore .d{margin:0}
  .ract{grid-template-columns:1fr;max-width:none}.ract small{grid-column:1/-1}
  .row>.row-more{grid-column:1/-1}
}

/* 10 ─ table */
.tablewrap{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:auto;background:var(--card);position:relative;scrollbar-width:thin}
.table{width:100%;min-width:960px;font-size:.95rem;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:1rem 1.1rem;text-align:start;border-block-end:1px solid var(--rule);white-space:nowrap;vertical-align:middle}
.table thead th{background:var(--thead);color:#FFFFFF;font-size:.8rem;font-weight:700;position:sticky;inset-block-start:0}
.table th:first-child,.table td:first-child{position:sticky;inset-inline-start:0;background:var(--card);z-index:1;box-shadow:inset -1px 0 0 var(--rule)}
[dir="rtl"] .table th:first-child,[dir="rtl"] .table td:first-child{box-shadow:inset 1px 0 0 var(--rule)}
.table thead th:first-child{background:var(--thead)}
.table tbody tr:last-child td,.table tbody tr:last-child th{border-block-end:0} /* th too: a rule under the rounded corner showed on plan tables (qa-r19) */
.table tbody tr:hover td{background:var(--panel)}
.prov{display:flex;align-items:center;gap:.7rem;font-weight:700}
.prov .logo{width:34px;height:34px;border-radius:9px;font-size:.9rem}
.dots{display:inline-flex;gap:3px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--rule)}
.dots i.on{background:var(--accent)}
.table .date{color:var(--sec);font-size:.85rem}
.table-note{display:flex;gap:1.5rem;flex-wrap:wrap;margin-block-start:.75rem;font-size:.85rem;color:var(--sec)}
.table-note>span{display:inline-flex;align-items:flex-start;gap:.4rem}
.table-note>span>.i{margin-block-start:.25em}

html:lang(en) .table th,html:lang(en) .table td{padding-inline:.85rem}
html:lang(en) .table{font-size:.92rem}
.table-note{text-wrap:pretty}
.table-note>span{max-width:44ch}

/* 10b ─ table filters: category and score work without JS via :has(); name search is JS-only */
.filters{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:end;margin-block-end:1rem}
.seg{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.seg legend{font-size:.8rem;color:var(--sec);padding:0;margin-block-end:.35rem;float:inline-start;width:100%}
.seg label{position:relative}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:inline-block;padding:.4rem .8rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);font-size:.9rem;color:var(--sec);transition:background var(--t),color var(--t),border-color var(--t)}
.seg label:hover span{border-color:var(--rule-strong);color:var(--text)}
.seg input:checked+span{background:var(--accent-soft);color:var(--accent-text);border-color:transparent;font-weight:700}
.seg input:focus-visible+span{outline:3px solid var(--accent-text);outline-offset:2px}
.fsearch{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);min-width:min(17rem,100%);color:var(--sec)}
.fsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.fsearch input{border:0;outline:0;background:transparent;font:inherit;color:var(--text);min-width:0;flex:1}
.fcount{font-size:.85rem;color:var(--sec);margin-inline-start:auto;font-variant-numeric:tabular-nums}
.js-only{display:none}.js .js-only{display:flex}
#compare:has(#fc-hosting:checked) .table tbody tr[data-cat]:not([data-cat="hosting"]),#compare:has(#fc-vpn:checked) .table tbody tr[data-cat]:not([data-cat="vpn"]),#compare:has(#fc-builders:checked) .table tbody tr[data-cat]:not([data-cat="builders"]),#compare:has(#fc-domains:checked) .table tbody tr[data-cat]:not([data-cat="domains"]),#compare:has(#fc-email:checked) .table tbody tr[data-cat]:not([data-cat="email"]){display:none}
#compare:has(#fs-9:checked) .table tbody tr[data-cat]:not([data-band="9"]),#compare:has(#fs-8:checked) .table tbody tr[data-cat]:not([data-band="8"]),#compare:has(#fs-7:checked) .table tbody tr[data-cat]:not([data-band="7"]){display:none}
.table tbody tr.is-hidden{display:none}
#compare:has(#f-ar:checked) .table tbody tr[data-cat]:not([data-ar="1"]),#compare:has(#f-region:checked) .table tbody tr[data-cat]:not([data-region="1"]),#compare:has(#f-wp:checked) .table tbody tr[data-cat]:not([data-wp="1"]),#compare:has(#f-renew:checked) .table tbody tr[data-cat]:not([data-renew="1"]){display:none}
.table tr.empty td{text-align:center;padding-block:2rem;color:var(--sec)}
.freset{font:inherit}
@media(max-width:720px){.fcount{margin-inline-start:0}.fsearch{min-width:0;flex:1 1 100%}}

/* 11 ─ method / trust / changelog */
.method{display:grid;grid-template-columns:1.1fr 1fr;gap:1.5rem 2rem;align-items:start}
.weights{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--shadow-2)}
.weights h3{font-size:1.1rem;margin-block-end:.5rem}
.weights li{display:grid;grid-template-columns:1fr auto;gap:.3rem 1rem;align-items:center;padding-block:.6rem}
.weights li+li{border-block-start:1px solid var(--rule)}
.weights .bar{width:100%}
.weights b{font-variant-numeric:tabular-nums}
.weights p{color:var(--sec);font-size:.85rem;margin-block-start:.75rem}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.tcard{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.25rem;transition:border-color var(--t),transform var(--t)}
.tcard:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.tcard .ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;margin-block-end:.9rem}
.tcard h3{font-size:1.02rem}
.tcard p{color:var(--sec);font-size:.9rem;margin-block-start:.4rem}
.changelog{grid-column:1/-1;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.25rem 1.5rem}
.changelog h3{font-size:1.02rem;display:flex;align-items:center;gap:.5rem}
.changelog h3 .i{color:var(--accent-text)}
.changelog ul{margin-block-start:1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem 2rem}
.changelog li{display:grid;grid-template-columns:1fr;align-content:start;gap:.3rem;font-size:.9rem;padding-inline-start:1rem;border-inline-start:2px solid var(--rule)}
.changelog li:has(.down){border-color:var(--bad)}.changelog li:has(.up){border-color:var(--good)}
.changelog time{color:var(--sec);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.8rem}
.changelog .down{color:var(--bad);font-weight:700}.changelog .up{color:var(--good);font-weight:700}
@media(max-width:1000px){.method{grid-template-columns:1fr}}
@media(max-width:900px){.changelog ul{grid-template-columns:1fr}}
@media(max-width:720px){.trust-grid{grid-template-columns:1fr}}

/* 12 ─ guides / faq / cta */
.glist{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem}
.gfeat{border-radius:var(--r-xl);background:var(--band);color:var(--band-text);padding:2rem;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
.gfeat:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.gfeat::before{content:"";position:absolute;inset:auto auto -40% -20%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.55),transparent 65%)}
.gfeat>*{position:relative}
.gfeat .tag{background:rgba(255,255,255,.12);color:#BFDBFE;align-self:flex-start} /* .gfeat is a column flex box; without this the tag stretches across the card */
.gfeat h3{font-size:1.6rem;margin-block-start:.75rem;max-width:22ch}
.gfeat p{color:var(--band-sec);margin-block-start:.5rem}
.gfeat .meta{color:var(--band-sec);font-size:.8rem;margin-block-start:1rem}
.gside{display:grid;gap:.25rem;align-content:start}
.gside a{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1rem;border-radius:var(--r);transition:background var(--t)}
.gside a:hover{background:var(--panel)}
.gside .thumb{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,var(--accent-soft),var(--panel));border:1px solid var(--rule)}
.gside h3{font-size:1.02rem;line-height:1.4}
.gside small{color:var(--sec)}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.faq details{border-block-start:1px solid var(--rule);padding-block:.9rem}
.faq summary{font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary .i{color:var(--sec);transition:transform var(--t)}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq details p{font-size:.95rem;color:var(--sec);margin-block-start:.5rem;max-width:60ch}
.cta{border-radius:28px;background:var(--band);color:var(--band-text);padding:3rem;display:grid;grid-template-columns:1.2fr auto;gap:2rem;align-items:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;inset:auto -10% -60% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(29,78,216,.55),transparent 70%)}
.cta h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem)}
.cta p{color:var(--band-sec);margin-block-start:.6rem}
.cta .btn{position:relative;z-index:1}
@media(max-width:1000px){.glist{grid-template-columns:1fr}.faq{grid-template-columns:1fr}}
@media(max-width:720px){.gfeat{min-height:260px;padding:1.5rem}.cta{grid-template-columns:1fr;padding:2rem;border-radius:20px}}

.grow{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.g{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.1rem 1.2rem;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.g:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.g .tag{display:inline-block}
.g h3{font-size:1.02rem;margin-block-start:.5rem;line-height:1.45}
.g small{display:block;color:var(--sec);margin-block-start:.6rem;font-size:.8rem}
@media(max-width:900px){.grow{grid-template-columns:1fr}}

/* 13 ─ footer */
.footer{border-block-start:1px solid var(--rule);padding-block:3rem 2rem;color:var(--sec);font-size:.92rem;background:var(--panel)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.footer h3{color:var(--text);font-size:.95rem;margin-block-end:.75rem}
.footer li{margin-block-start:.45rem}
.footer a:hover{color:var(--accent-text)}
.fbottom{margin-block-start:2.5rem;padding-block-start:1.5rem;border-block-start:1px solid var(--rule);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.fgrid{grid-template-columns:1fr}}


/* 15 ─ category hub: page head, jumps, quick list, verdicts, excluded */
.page-head{position:relative;isolation:isolate;overflow:hidden;padding-block:1.9rem 1.7rem;background:var(--head);border-block-end:1px solid var(--rule)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.85rem;color:var(--sec);margin-block-end:1rem}
.crumbs li+li::before{content:"›";margin-inline-end:.35rem;color:var(--rule-strong)}
[dir="rtl"] .crumbs li+li::before{content:"‹"}
.crumbs a{color:var(--accent-text)}
.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--text)}
.page-head h1{font-size:clamp(1.8rem,1.1rem + 2.6vw,2.9rem);line-height:1.25;max-width:26ch;margin-block-start:.75rem}
html:lang(en) .page-head h1{letter-spacing:-.02em;line-height:1.15}
.page-head .lead{max-width:70ch;font-size:1.05rem;margin-block-start:1rem}
.byline{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-block-start:1.5rem;padding-block-start:1.25rem;border-block-start:1px solid var(--rule)}
.byline div{display:grid;gap:.1rem}
.byline dt{font-size:.75rem;color:var(--sec)}
.byline dd{font-weight:700;font-size:.95rem}
.byline time{color:var(--text)}
.jumps{position:sticky;inset-block-start:4rem;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block-end:1px solid var(--rule)}
.jumps .container{position:relative}
.jumps ul{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding-block:.35rem;scroll-padding-inline:.5rem}
.jumps .container::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:3rem;pointer-events:none;background:linear-gradient(to right,transparent,var(--bg))}
[dir="rtl"] .jumps .container::after{background:linear-gradient(to left,transparent,var(--bg))}
@media(max-width:720px){.jumps ul{padding-inline-end:3rem}}
@media(min-width:721px){.jumps .container::after{display:none}}
.jumps ul::-webkit-scrollbar{display:none}
.jumps a{display:inline-block;padding:.5rem .8rem;border-radius:999px;font-size:.9rem;color:var(--sec);white-space:nowrap;transition:background var(--t),color var(--t)}
.jumps a:hover{background:var(--panel);color:var(--text)}
.quicklist{display:grid;gap:.25rem;counter-reset:q}
.quicklist a{display:grid;grid-template-columns:2rem auto 1fr auto auto;gap:.75rem;align-items:center;padding:.6rem .9rem;border-radius:12px;border:1px solid transparent;transition:background var(--t),border-color var(--t)}
.quicklist a:hover{background:var(--panel);border-color:var(--rule)}
.q-rank{width:1.9rem;height:1.9rem;border-radius:999px;background:var(--panel);border:1px solid var(--rule);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.quicklist li:first-child .q-rank{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.quicklist b{min-width:0}
.q-tag{font-size:.8rem;color:var(--sec);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-score{font-weight:700;color:var(--accent-text);min-width:2.5rem;text-align:center;background:var(--accent-soft);border-radius:8px;padding:.15rem .5rem}
.q-price{font-size:.85rem;color:var(--sec);white-space:nowrap}
.q-price bdi{color:var(--text);font-weight:700}
@media(max-width:720px){.quicklist a{grid-template-columns:2rem 1fr auto;row-gap:.15rem}.q-tag{grid-column:2;grid-row:2;white-space:normal}.q-price{grid-column:3;grid-row:2;justify-self:end}}
.row-compact{grid-template-areas:"logo title score act" "logo body score act";padding-block:1.1rem}
.row-compact .logo{width:48px;height:48px;font-size:1.1rem}
.row-compact h3{font-size:1.05rem}
.row-compact p{font-size:.9rem}
@media(max-width:720px){.row-compact{grid-template-areas:"logo title" "body body" "score score" "act act"}}
.table-wide{min-width:1400px}
.mb{display:inline-flex;align-items:center;gap:.5rem;font-variant-numeric:tabular-nums}
.mb .bar{width:56px;height:5px}
.verdicts{display:grid;gap:1rem}
.verdict{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);padding:1.5rem;scroll-margin-block-start:8rem}
.v-head{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start}
.v-head h3{font-size:1.25rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.v-head p{font-size:.92rem;margin-block-start:.2rem;max-width:70ch}
.v-head .rscore{grid-area:auto;border:0;padding:0;text-align:end;align-self:start}
.v-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:1.5rem;margin-block-start:1.25rem;padding-block-start:1.25rem;border-block-start:1px solid var(--rule)}
.v-col h4{font-size:.78rem;color:var(--sec);margin-block-end:.35rem}
.v-col h4+p{font-size:.92rem;margin-block-end:.9rem}
.measured{display:grid;gap:.5rem}
.measured div{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;padding-block:.35rem;border-block-end:1px solid var(--rule)}
.measured dt{color:var(--sec)}
.measured dd{font-weight:700}
.measured dd.na{color:var(--sec);font-weight:400;font-size:.85rem}
.pros,.cons{display:grid;gap:.35rem;font-size:.9rem;margin-block-end:.9rem}
.pros li,.cons li{display:block;padding-inline-start:1.5rem} /* block, not flex: isolated runs and claims inside must stay one line of text */
.pros li,.cons li{position:relative}
.pros li::before,.cons li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.2rem;width:16px;height:16px;border-radius:50%;background-color:var(--good-soft)}
.cons li::before{background-color:var(--bad-soft)}
.pros li::after,.cons li::after{content:"";position:absolute;inset-inline-start:3px;inset-block-start:calc(.2rem + 3px);width:10px;height:10px;background-color:var(--good);-webkit-mask:var(--ic) center/10px no-repeat;mask:var(--ic) center/10px no-repeat}
.pros li::after{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.cons li::after{background-color:var(--bad);--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.sub-stack{grid-template-columns:1fr;gap:.45rem;margin:0;padding:0;border:0}
.v-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-block-start:1.25rem;padding-block-start:1rem;border-block-start:1px solid var(--rule);font-size:.9rem;color:var(--sec)}
.v-foot b{color:var(--text)}
.v-actions{display:flex;gap:.5rem}
.excluded{display:grid;gap:.75rem}
.excluded li{display:grid;grid-template-columns:200px 1fr;gap:1rem;padding:1rem 1.25rem;border:1px dashed var(--rule-strong);border-radius:var(--r);background:var(--panel);font-size:.92rem}
.excluded span{color:var(--sec)}
@media(max-width:1000px){.v-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  .page-head{padding-block:1.25rem 1rem}.byline{gap:.75rem 1.5rem}
  .v-head{grid-template-columns:auto 1fr}.v-head .rscore{grid-column:1/-1;display:flex;align-items:center;gap:.75rem;text-align:start}.v-head .rscore .l,.v-head .rscore .d{margin:0}
  .v-grid{grid-template-columns:1fr;gap:1.25rem}.excluded li{grid-template-columns:1fr}.v-actions{width:100%}.v-actions .btn{flex:1}
}


/* 16 ─ hub v2: compact head, trust line, how strip, folded verdicts */
.page-head-compact{padding-block:1.25rem 1.1rem}
.page-head-compact h1{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.5rem);margin-block-start:.35rem;max-width:none}
.trust-line{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-block-start:.75rem;font-size:.9rem;color:var(--sec)}
.trust-line li{display:inline-flex;align-items:center;gap:.4rem}
.trust-line .i{color:var(--accent-text)}
.trust-line time{color:var(--text);font-weight:700}
.trust-line a{color:var(--accent-text);font-weight:700}
.trust-line a:hover{text-decoration:underline;text-underline-offset:4px}
.trust-line .by{color:var(--sec)}
#ranking .disc-line{margin-block:.25rem 1rem}
#ranking .ranked{margin-block-start:.5rem}
.how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem 3rem;align-items:start;padding:1.5rem;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--panel)}
.how h2{font-size:1.35rem}
.how-text p{color:var(--sec);margin-block-start:.4rem;max-width:60ch}
.how-meta{display:grid;gap:.4rem;margin-block:1rem}
.how-meta div{display:grid;grid-template-columns:9rem 1fr;gap:.75rem;font-size:.9rem}
.how-meta dt{color:var(--sec)}
.how-meta dd{color:var(--text)}
.how-weights{display:grid;gap:.35rem}
.how-weights li{display:grid;grid-template-columns:1fr auto;gap:.2rem .75rem;font-size:.9rem;align-items:center}
.how-weights b{font-variant-numeric:tabular-nums}
.how-weights .bar{width:100%;height:8px}
@media(max-width:900px){.how{grid-template-columns:minmax(0,1fr);padding:1.25rem}.how-meta div{grid-template-columns:1fr;gap:.1rem}}
.fold-h{font-size:1.05rem;margin-block:1.5rem .75rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
.fold-h .muted{font-weight:400;font-size:.9rem}
.verdicts-fold{gap:.5rem}
.verdict-fold{padding:0}
.verdict-fold>summary{padding:1rem 1.25rem;cursor:pointer;border-radius:var(--r-lg);grid-template-columns:auto 1fr auto auto;transition:background var(--t)}
.verdict-fold>summary:hover{background:var(--panel)}
.verdict-fold>summary .logo{width:40px;height:40px;font-size:1rem;border-radius:11px}
.verdict-fold>summary h3{font-size:1.05rem}
.verdict-fold>summary p{display:none}
.verdict-fold>summary .rscore .n{font-size:1.5rem}
.verdict-fold>summary .rscore .d{display:none}
.verdict-fold>summary .v-chev{color:var(--sec);align-self:center;transition:transform var(--t)}
.verdict-fold[open]>summary .v-chev{transform:rotate(180deg)}
.verdict-fold[open]>summary{border-end-start-radius:0;border-end-end-radius:0}
.verdict-fold .v-grid,.verdict-fold .v-foot,.verdict-fold .v-blurb{margin-inline:1.25rem}
.v-blurb{font-size:.92rem;max-width:70ch;margin-block-start:.25rem}
.verdict-fold .v-grid{margin-block-start:0;padding-block-start:1.25rem}
.verdict-fold .v-foot{margin-block-end:1.25rem}
@media(max-width:720px){
  .row{grid-template-areas:"logo title" "score score" "act act" "body body"}
  .row-compact{grid-template-areas:"logo title" "score score" "act act" "body body"}
  .verdict-fold>summary{grid-template-columns:auto 1fr auto}.verdict-fold>summary .rscore{grid-column:auto;display:grid;text-align:end;padding:0;border:0}.verdict-fold>summary .v-chev{grid-column:1/-1;justify-self:center}
}


/* 17 ─ hub v3: answer picks, in-card details, how rubric, fit list, price table, small print, checklist */
.trust-p{font-size:.9rem;color:var(--sec);margin-block-start:.6rem;max-width:90ch;text-wrap:pretty}
.trust-p time{color:var(--text);font-weight:700}
.trust-p .by{color:var(--sec)}
.answer{padding-block:1.25rem .25rem}
.answer h2{font-size:1.05rem;color:var(--sec);font-weight:700;margin-block-end:.75rem}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.picks a{display:grid;align-content:start;gap:.45rem;padding:1rem 1.1rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);height:100%;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.picks a:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.picks li:first-child a{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.a-lab{font-size:.78rem;font-weight:700;color:var(--accent-text)}
.a-name{display:flex;align-items:center;gap:.5rem;font-size:1.05rem}
.a-name .logo{width:30px;height:30px;border-radius:8px;font-size:.85rem}
.a-name b{flex:1;min-width:0}
.a-score{font-weight:700;color:var(--accent-text);background:var(--accent-soft);padding:.1rem .5rem;border-radius:8px;font-size:.95rem}
.a-why{font-size:.88rem;color:var(--text);line-height:1.5}
.a-price{font-size:.8rem;color:var(--sec);line-height:1.5}
.a-price b{color:var(--text)}
@media(max-width:1000px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.picks{gap:.5rem}.picks a{padding:.8rem .9rem}.a-why{font-size:.85rem}}
@media(max-width:480px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}.a-why{font-size:.8rem}.a-price{font-size:.74rem}.a-name{flex-wrap:wrap}.a-name b{flex:1 1 100%;order:2}.a-score{margin-inline-start:auto}}
.row.is-norec{background:color-mix(in srgb,var(--panel) 70%,var(--card))}
.row.is-norec .ract .btn-ghost{grid-column:1/-1}
.row-more{margin-block-start:.9rem;border-block-start:1px solid var(--rule);padding-block-start:.6rem}
.row-more>summary{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;font-weight:700;color:var(--accent-text);cursor:pointer;padding:.25rem 0}
.row-more>summary .i{transition:transform var(--t)}
.row-more[open]>summary .i{transform:rotate(180deg)}
.row-more .v-grid{grid-template-columns:1fr 1fr 1fr;gap:1.25rem;margin-block-start:.75rem;padding-block-start:1rem}
.row-more .v-foot{justify-content:flex-start;margin-block-start:.75rem;padding-block-start:.5rem;border:0}
.subscores.in-more{margin-block-start:1rem;padding-block-start:1rem;border-block-start:1px solid var(--rule)}
@media(max-width:900px){.row-more .v-grid{grid-template-columns:1fr}}
/* Rows from 721px: line placement so the in-card details span the full card under the header.
   .rbody becomes display:contents; rows = title, up to 4 body blocks, a 1fr filler that absorbs tall actions, details. */
@media(min-width:721px){
  .row,.row-compact{grid-template-areas:none;grid-template-rows:auto repeat(4,auto) 1fr auto;row-gap:0}
  .row>.logo{grid-area:1/1/7/2}
  .row>.rtitle{grid-area:1/2/2/3;align-self:start;margin-block-end:.35rem}
  .row>.rscore{grid-area:1/3/7/4}
  .row>.ract{grid-area:1/4/7/5}
  .row>.rbody{display:contents}
  .row>.rbody>*{grid-column:2;min-width:0}
  .row>.rbody>.note{justify-self:start}
  .row>.row-more{grid-area:7/1/8/-1}
}
.measured dt{min-width:0}
.measured dd{text-align:end}
.measured dd.num,.measured dd.nowrap{white-space:nowrap}
.how-h3{font-size:.95rem;margin-block:1rem .35rem}
.example{font-size:.9rem;padding:.6rem .8rem;border-radius:10px;background:var(--card);border:1px solid var(--rule);text-align:start;font-variant-numeric:tabular-nums;white-space:nowrap;width:max-content;min-width:100%}
[dir="rtl"] .example{text-align:end} /* the formula is an LTR paragraph; end of an LTR box is the Arabic start edge */
.how-rubric li{grid-template-columns:1fr auto}
.how-rubric small{grid-column:1/-1;color:var(--sec);font-size:.82rem;line-height:1.5;margin-block-end:.35rem}
@media(min-width:901px){.how-meta div{grid-template-columns:11rem 1fr}}
.table-hint{font-size:.85rem;color:var(--sec);margin-block:.25rem .75rem}
.tscroll{position:relative}
.js .tscroll::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:4rem;pointer-events:none;border-start-end-radius:var(--r-lg);border-end-end-radius:var(--r-lg);background:linear-gradient(to right,transparent,var(--bg));transition:opacity var(--t)}
.js[dir="rtl"] .tscroll::after{background:linear-gradient(to left,transparent,var(--bg))}
.js .tscroll.at-end::after{opacity:0} /* without JS nothing can clear the fade, so it is JS-only */
@media(min-width:721px){.tscroll:has(.pricetable)::after{display:none}} /* the price table only scrolls on phones; no fade over a table that fits (matters without JS) */
.fitlist{display:grid;gap:.5rem}
.fitlist li{display:grid;grid-template-columns:1.2fr 1fr 1.2fr 1.4fr;gap:1rem;align-items:center;padding:.9rem 1.1rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.f-case{font-weight:700}
.f-type{color:var(--sec);font-size:.9rem}
.f-pick{display:inline-flex;align-items:center;gap:.5rem;font-weight:700}
.f-pick .logo{width:28px;height:28px;border-radius:8px;font-size:.8rem}
.f-pick .num{color:var(--accent-text);background:var(--accent-soft);padding:.05rem .45rem;border-radius:6px;font-size:.85rem}
.f-pick:hover b{text-decoration:underline;text-underline-offset:4px}
.f-catch{font-size:.88rem;color:var(--warn)}
@media(max-width:900px){.fitlist li{grid-template-columns:1fr 1fr}.f-catch{grid-column:1/-1}}
@media(max-width:600px){.fitlist li{grid-template-columns:1fr;gap:.35rem}}
.pricetable{min-width:640px}
.fx{font-size:.85rem;color:var(--sec);margin-block-start:.75rem;max-width:90ch;text-wrap:pretty}
.two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem}
.two-col h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin-block-end:.75rem}
.faq-one{grid-template-columns:1fr}
.checklist{display:grid;gap:.5rem;counter-reset:ck}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;padding:.75rem .9rem;border:1px solid var(--rule);border-radius:12px;background:var(--card);font-size:.92rem;counter-increment:ck}
.checklist li::before{content:counter(ck);width:1.6rem;height:1.6rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;font-size:.8rem;font-weight:700}
@media(max-width:900px){.two-col{grid-template-columns:1fr;gap:2rem}}
.brands{margin-block-start:1.25rem;padding:1rem 1.25rem;border-inline-start:3px solid var(--accent);background:var(--panel);border-radius:var(--r-sm)}
.brands h3{font-size:1rem}
.brands p{color:var(--sec);font-size:.92rem;margin-block-start:.25rem;max-width:80ch}
.changelog h2{font-size:1.02rem;display:flex;align-items:center;gap:.5rem}
.changelog h2 .i{color:var(--accent-text)}

/* utilities (CSP forbids inline style attributes) */
.sprite{position:absolute;width:0;height:0}
.pt-0{padding-block-start:0}
.fabout{margin-block-start:.75rem;max-width:36ch}
.nowrap{white-space:nowrap}
time{unicode-bidi:isolate;white-space:nowrap} /* a date never splits between day, month and year */
.prov-mark{font-size:.72rem;font-weight:400;color:var(--warn);margin-inline-start:.3rem;white-space:nowrap;line-height:1.2}
.panel-list a:has(.prov-mark){white-space:nowrap}
.panel-list a:has(.prov-mark)>.num{direction:inherit;margin-inline-start:auto;padding-inline-start:.5rem} /* a bare score needs no ltr run; inherit so the logical margin resolves in the page direction */

/* 14 ─ motion guard */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}}
/* keyboard focus and jump targets clear the sticky topbar (and the jump bar where present) */
html{scroll-padding-block-start:5rem}
html:has(.jumps){scroll-padding-block-start:8.5rem}
@media(min-width:721px){#price .table-hint{display:none}}
/* English pages show Arabic only in the language switch, drawer and footer: a system face avoids a 43 KB font download for one word */
html:lang(en) [lang="ar"]{font-family:system-ui,-apple-system,"Segoe UI","Geeza Pro","Noto Sans Arabic",sans-serif}
/* worked examples: one keyboard-reachable scroller per example, lines do not wrap mid-formula */
.calc{overflow-x:auto;display:grid;gap:.35rem;max-width:100%;border-radius:10px;scrollbar-width:thin}
.calc:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.answer-sub{font-size:.85rem;color:var(--sec);margin-block:-.4rem .8rem;max-width:75ch;line-height:1.6}
.filters-note{font-size:.82rem;color:var(--sec);margin-block:.25rem .5rem;max-width:90ch;line-height:1.6}
.prov-range{font-size:.85rem;color:var(--sec);margin-block-start:.4rem}
td small.term{color:var(--sec);font-size:.78em;white-space:nowrap}
@media(max-width:720px){.example{white-space:normal;width:auto}} /* phones: results stay on screen; formulas may wrap */

/* 15 ─ review page. Every number is generated; these rules only lay it out. */
.review-head{padding-block:1.5rem 1rem;background:linear-gradient(180deg,var(--hero-a),var(--bg))}
.rh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:1.5rem 2.5rem;align-items:start}
.rh-text h1{font-size:clamp(1.7rem,3vw,2.3rem);margin-block:.5rem .35rem}
.rh-text .trust-p{margin-block-end:1rem}
.rv-lead{font-size:1.05rem;color:var(--text);margin-block-end:.6rem;max-width:62ch}
.rv-strong,.rv-catch,.rv-prov{max-width:62ch;margin-block:.35rem;line-height:1.7}
.rv-catch b{color:var(--warn)}
.rv-prov{color:var(--warn);background:var(--warn-soft);padding:.45rem .75rem;border-radius:10px;font-size:.92rem}
.verdict-box{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--shadow-2);display:grid;gap:.75rem}
.vb-top{display:flex;align-items:center;gap:.9rem}
.vb-top .logo{width:56px;height:56px;border-radius:14px;font-size:1.3rem}
.vb-score .n{display:block;font-size:2.6rem;font-weight:700;line-height:1;color:var(--accent-text)}
.vb-score .l{font-size:.85rem;color:var(--sec)}
.vb-rank{font-size:.9rem;font-weight:700}
.vb-price{font-size:.85rem;color:var(--sec);line-height:1.55}
.vb-price b{color:var(--text)}
.verdict-box .subscores{grid-template-columns:1fr;margin-block-start:0;gap:.45rem}
.vb-how{font-size:.85rem}
.vb-actions{display:grid;gap:.5rem}
.vb-actions .btn{width:100%;justify-content:center}
.verdict-box .disc-line{margin:0;font-size:.78rem}
.verdict-box .note{margin:0}
.claims-strip{display:flex;flex-wrap:wrap;gap:.5rem}
.claims-strip li{background:var(--accent-soft);color:var(--accent-text);border-radius:999px;padding:.3rem .8rem;font-size:.85rem;font-weight:700}
.pc{gap:1.5rem 2.5rem}
/* the calculation: the most legible block on the page */
.calc-card{border:2px solid var(--accent);border-radius:var(--r-lg);padding:1.5rem;background:var(--card);box-shadow:0 0 0 6px var(--accent-ring)}
.calc-card h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.calc-lead{color:var(--sec);margin-block:.35rem 1rem;max-width:70ch}
.calc-table{min-width:520px;font-size:1.05rem}
.calc-table td.num,.calc-table th{font-variant-numeric:tabular-nums}
.calc-table tbody td:nth-child(n+2){text-align:end}
.calc-table tr.is-out th,.calc-table tr.is-out td{color:var(--sec);background:var(--panel)}
.calc-table tfoot th,.calc-table tfoot td{border-block-end:0;padding-block:.75rem}
.calc-table tfoot td{text-align:end}
.calc-sum th,.calc-sum td{border-block-start:2px solid var(--text);font-weight:700}
.calc-score th,.calc-score td{font-size:1.2rem}
.calc-score b{font-size:1.9rem;color:var(--accent-text)}
.calc-note{background:var(--warn-soft);color:var(--text);border-inline-start:3px solid var(--warn);padding:.6rem .85rem;border-radius:8px;margin-block-start:1rem;max-width:80ch}
.calc-links{margin-block-start:1rem;font-size:.9rem}
/* criterion blocks */
.crit-list{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
.crit-list>*,.calc-card,.alt-card,.verdict-box{min-width:0} /* grid items must not grow to their tables' min-width; tables scroll inside .tablewrap */
.crit-block{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.25rem;background:var(--card)}
.cb-head{display:flex;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;margin-block-end:.75rem}
.cb-head h3{font-size:1.15rem;margin:0}
.cb-w{color:var(--sec);font-size:.85rem}
.cb-sub{margin-inline-start:auto;font-size:1.6rem;font-weight:700;color:var(--accent-text)}
.cb-sub.na{font-size:.95rem;color:var(--warn)}
.crit-table{min-width:760px}
.crit-table td.num{text-align:end}
.cb-f{color:var(--sec);font-size:.9rem}
.cap{color:var(--warn);font-size:.8rem}
.cb-result{margin-block-start:.75rem;font-size:1rem;line-height:1.7}
.cb-result .num{font-variant-numeric:tabular-nums}
.cb-expr{display:block} /* the sum is one left-to-right expression on its own line at every width: inline, it wrapped around the Arabic label in the side column (qa-r16) */
.cb-round b{font-size:1.15rem;color:var(--accent-text)}
.cb-rank{font-size:.9rem;color:var(--sec);margin-block-start:.25rem}
.support-table{min-width:640px;margin-block-start:.75rem}
.crit-block.is-unmeasured{border-color:var(--warn);background:var(--warn-soft)}
.cb-plain{max-width:75ch;line-height:1.7}
.renorm-table{min-width:420px;margin-block:.75rem}
.renorm-table td.num{text-align:end}
.renorm-table tr.is-out th,.renorm-table tr.is-out td{color:var(--sec)}
.cb-next{font-size:.9rem;color:var(--sec)}
.evidence-slot{margin:1rem 0 0;border:1px dashed var(--rule-strong);border-radius:12px;padding:1rem;text-align:center;color:var(--sec);font-size:.85rem}
/* prices */
.plan-table{min-width:760px}
.plan-table td.num{text-align:end}
.plan-table th small{display:block;color:var(--sec);font-weight:400;font-size:.78rem;white-space:normal}
.plan-table tr.is-tested th,.plan-table tr.is-tested td{background:var(--accent-soft)}
.price-fine{margin-block:1rem;display:grid;gap:.35rem;padding-inline-start:1.1rem;list-style:disc;color:var(--text)}
.price-cta{display:grid;gap:.5rem;max-width:26rem;margin-block-start:1rem}
/* fit and alternatives */
.fit-cols{gap:1.5rem 2.5rem;margin-block-start:.75rem}
.fit-else{display:grid;gap:.5rem;padding-inline-start:1.1rem;list-style:disc}
.alt-some,.alt-none{color:var(--sec);max-width:75ch;margin-block:.35rem 1rem}
.alt-list+p{margin-block-start:1.5rem} /* the back-to-ranking link stands clear of the cards (qa-r17) */
.alt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:1rem}
.alt-card{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.1rem;background:var(--card);display:flex;flex-direction:column;gap:.6rem}
.alt-top{display:flex;align-items:center;gap:.6rem}
.alt-top .a-score{margin-inline-start:auto}
.alt-reasons{display:grid;gap:.3rem;font-size:.9rem}
.alt-links{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;font-size:.9rem;margin-block-start:auto} /* links sit on the card's bottom edge, level across a row of cards (qa-r16) */
@media(max-width:900px){.rh-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){.calc-card{padding:1rem;box-shadow:0 0 0 4px var(--accent-ring)}.calc-table{font-size:.95rem}.calc-score b{font-size:1.6rem}.crit-block{padding:1rem}}

/* phones: the arithmetic is written out line by line instead of hiding in a sideways scroller */
.m-only,.m-lines.m-only,.calc-lines.m-only,.plan-cards.m-only{display:none} /* phone-only blocks; the compound selectors beat the base display:grid below */
.m-lines,.calc-lines{display:grid;gap:.6rem;margin-block:.5rem}
.m-lines li,.calc-lines li{display:grid;gap:.15rem;padding-block:.55rem;border-block-end:1px solid var(--rule)}
.ml-name{font-weight:700}
.ml-val{font-weight:400;color:var(--sec)}
.ml-expr{font-variant-numeric:tabular-nums;color:var(--text)}
.ml-pts,.ml-used{font-size:.85rem;color:var(--sec)}
.m-lines li.is-out,.calc-lines li.is-out{color:var(--sec)}
.calc-lines li .ml-expr{font-size:1.05rem}
.calc-lines .cl-sum{border-block-start:2px solid var(--text);border-block-end:0;font-weight:700}
.calc-lines .cl-div{border-block-end:0}
.calc-lines .cl-score{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-block-end:0}
.calc-lines .cl-score b{font-size:1.9rem;color:var(--accent-text)}
.plan-cards{display:grid;gap:1rem}
.plan-card{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1rem;background:var(--card)}
.plan-card h3{font-size:1.05rem}
.pc-specs{color:var(--sec);font-size:.85rem;margin-block:.2rem .6rem}
.plan-card ul{display:grid;gap:.5rem}
.plan-card li{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .75rem;padding:.6rem .7rem;border-radius:10px;background:var(--panel);font-size:.9rem}
.plan-card li.is-tested{background:var(--accent-soft)}
.pc-term{grid-column:1/-1}
.pc-l{color:var(--sec)}
.cb-label{font-weight:700}
@media(max-width:720px){
  .m-only{display:block}
  .m-lines.m-only,.calc-lines.m-only,.plan-cards.m-only{display:grid}
  .d-only{display:none}
  .rh-grid{grid-template-areas:"intro" "box" "text"}
  .rh-intro{grid-area:intro}.verdict-box{grid-area:box}.rh-text{grid-area:text}
  .verdict-box{padding:1rem;gap:.6rem}
  /* Ordered for the phone: score first, then rank, price, disclosure, the button. A child with no
     order of its own defaults to 0 and lands above the score - the VAT line did exactly that - so the
     default below sends an unlisted child to the end of the box instead of the top of it. */
  .verdict-box>*{order:10}
  .verdict-box>.sr{order:0}
  .vb-top{order:1}.vb-rank{order:2}.vb-price{order:3}.vb-extras{order:3}.vatline{order:3}.verdict-box .disc-line{order:4}.vb-actions{order:5}.vb-subs{order:6}.vb-caveats{order:7}.vb-how{order:8}.verdict-box .note{order:9}
  .review-head{padding-block:1rem .5rem}
  .rv-sec{padding-block:1rem}
}
@media(min-width:721px){.rh-grid{grid-template-areas:"intro box" "text box"}.rh-intro{grid-area:intro}.rh-text{grid-area:text}.verdict-box{grid-area:box}}
.rv-sec{padding-block:1.5rem}
.plan-card li.is-tested .pc-l,.plan-table tr.is-tested th small{color:var(--text)} /* grey on the tested row tint is below 4.5:1 */

/* 15b ─ review page v2: a written review with the measurements as evidence */
.rv-dek{font-size:1.1rem;color:var(--text);max-width:60ch;margin-block:.25rem .6rem;line-height:1.7}
.prose{max-width:68ch}
.prose p.tx,.rh-text p.tx{line-height:1.8;margin-block:0 1rem}
.prose p.tx:last-child{margin-block-end:0}
.tx strong{font-weight:700;color:var(--text)}
.tx .f{font-variant-numeric:tabular-nums}
/* what we found */
.findings{display:grid;gap:.75rem;counter-reset:fd}
.findings li{border:1px solid var(--rule);border-radius:var(--r);padding:.9rem 1.1rem;background:var(--card);display:grid;gap:.35rem}
.fd-top{display:flex;align-items:baseline;gap:.35rem .9rem;flex-wrap:wrap}
.fd-name{font-weight:700;font-size:1.05rem;color:var(--text);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.fd-name:hover{text-decoration-color:currentColor}
.fd-w{color:var(--sec);font-size:.85rem}
.fd-sub{margin-inline-start:auto;font-size:1.35rem;color:var(--accent-text);font-variant-numeric:tabular-nums}
.fd-sub.na{font-size:.9rem;color:var(--warn)}
.fd-text{margin:0;line-height:1.7;max-width:80ch}
.fd-more{margin-block-start:1rem;font-weight:700}
/* what we did */
.did-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:start}
.did-grid h2{margin-block-end:.75rem}
.did-meta{border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem;background:var(--card)}
/* chapters */
.chapter{padding-block:2.5rem;border-block-start:1px solid var(--rule)}
.ch-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
.ch-grid>*{min-width:0}
.ch-kicker{color:var(--accent-text);font-weight:700;font-size:.85rem;margin-block-end:.35rem}
.ch-title{display:flex;align-items:baseline;gap:.5rem 1.25rem;flex-wrap:wrap}
.ch-title h2{font-size:clamp(1.35rem,2.6vw,1.85rem);margin:0;max-width:34ch}
.ch-sub{font-size:1.9rem;font-weight:700;color:var(--accent-text);line-height:1}
.ch-sub.na{font-size:1rem;color:var(--warn)}
.ch-lead{font-size:1.08rem}
.ch-down{max-width:68ch;border-inline-start:3px solid var(--warn);background:var(--warn-soft);border-radius:0 var(--r) var(--r) 0;padding:1rem 1.2rem}
[dir="rtl"] .ch-down{border-radius:var(--r) 0 0 var(--r)}
.ch-down h3{font-size:1.05rem;margin-block-end:.5rem;color:var(--text)}
.ch-down p.tx{line-height:1.8;margin-block:0 .75rem}
.ch-down p.tx:last-child{margin:0}
/* evidence */
.ev{margin-block:1.25rem;border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem;background:var(--card);max-width:68ch}
.ev figcaption,.ev>h4{font-size:.85rem;font-weight:700;color:var(--sec);margin-block-end:.65rem}
.receipt{display:grid;gap:0}
.receipt li,.steps li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:.45rem;border-block-end:1px solid var(--rule)}
.receipt li span,.steps li span{min-width:0}
.receipt li b,.steps li b{white-space:nowrap;font-variant-numeric:tabular-nums}
.receipt .rc-total,.steps .st-total{border-block-end:0;border-block-start:2px solid var(--text);font-weight:700}
.local-table{min-width:420px}
.local-table td.num,.extras-table td.num{text-align:end}
.extras-table td:last-child{white-space:normal;min-width:12rem} /* when a cost is charged is a sentence; the name and price stay on one line */
.extras-table thead th:nth-child(2){text-align:end}
@media(max-width:720px){ /* phones: each cost is a two-line card, name and price on the first line and when it is charged under them, so nothing hides behind the table scroller (qa-r24) */
  .ev .extras-table,.extras-table tbody{display:block;min-width:0;width:100%}
  .extras-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .extras-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .75rem;padding-block:.6rem;border-block-end:1px solid var(--rule)}
  .extras-table tr:last-child{border-block-end:0}
  .extras-table th,.extras-table td{border:0;padding:0 .75rem;white-space:normal;position:static;box-shadow:none;background:none}
  .extras-table td:last-child{grid-column:1/-1;min-width:0;color:var(--sec);font-size:.88rem}
  .extras-table th:first-child,[dir="rtl"] .extras-table th:first-child{position:static;box-shadow:none;background:none} /* outrank the sticky first-column rules of .table (qa-r25) */
}
.vb-extras{font-size:.85rem}
.city-bars{display:grid;gap:.6rem}
.city-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .75rem;align-items:baseline}
.city-bars li b{font-variant-numeric:tabular-nums}
.city-bars .bar{height:8px}
.city-bars .is-med span:first-child,.city-bars .is-med b{color:var(--sec)}
.city-bars .is-med .bar i{background:var(--rule-strong)}
.ev-note{margin-block-start:.75rem;font-size:.92rem;line-height:1.7}
.convos{display:grid;gap:1rem}
.convo{border:1px solid var(--rule);border-radius:12px;padding:.9rem 1rem;background:var(--bg);display:grid;gap:.6rem}
.convo header{display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;font-size:.92rem}
.convo header span{color:var(--sec)}
.cv-msg{display:grid;gap:.25rem}
.cv-who{font-size:.8rem;font-weight:700;color:var(--sec)}
.convo blockquote{margin:0;border-inline-start:3px solid var(--rule-strong);padding-inline-start:.8rem;line-height:1.75}
.cv-them blockquote{border-inline-start-color:var(--accent)}
.cv-tr{color:var(--sec)}
.cv-note{color:var(--sec);font-size:.78rem}
.cv-then{margin:0;line-height:1.7;font-size:.95rem}
.cv-none{margin:0;color:var(--bad);font-weight:700}
.cv-out{margin:0;font-size:.85rem;color:var(--sec);border-block-start:1px solid var(--rule);padding-block-start:.5rem}
.sec-list{display:grid;gap:.5rem}
.sec-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .75rem;padding-block:.5rem;border-block-end:1px solid var(--rule)}
.sec-list li:last-child{border-block-end:0}
.sec-state{font-size:.8rem;font-weight:700;border-radius:999px;padding:.1rem .6rem;align-self:start}
.sec-list .is-ok .sec-state{background:var(--good-soft);color:var(--good)}
.sec-list .is-no .sec-state{background:var(--bad-soft);color:var(--bad)}
.sec-how{grid-column:1/-1;color:var(--sec);font-size:.9rem;line-height:1.6}
.timeline{display:grid;gap:.5rem}
.timeline li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem;align-items:baseline}
.timeline time{color:var(--sec);font-size:.85rem;font-variant-numeric:tabular-nums}
.ev-more{padding:0}
.ev-more>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.1rem;font-weight:700}
.ev-more[open]>summary .i{transform:rotate(180deg)}
.ev-more>:not(summary){margin:0 1.1rem 1rem}
.ev .tscroll,.ev .plan-cards{margin-block-start:.25rem}
.plan-card h4{font-size:1rem}
.ev-terms,.ev-more{max-width:none}
.ev-fine .price-fine{margin-block:.25rem .5rem}
.ev-fine .fx{font-size:.85rem;color:var(--sec)}
/* how we scored it */
.crit-block{max-width:none}
.cb-h{font-size:1.05rem;margin-block-end:.75rem}
.score-rows{display:grid;gap:0}
.score-rows li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) auto;gap:.2rem 1rem;align-items:baseline;padding-block:.55rem;border-block-end:1px solid var(--rule)}
.sr-name{font-weight:700}
.sr-val{color:var(--text)}
.sr-cities{color:var(--sec);font-size:.88rem}
.sr-pts{white-space:nowrap;text-align:end;font-variant-numeric:tabular-nums}
.sr-pts b{font-size:1.05rem}
.sr-x{color:var(--sec)}
.cb-formulas{margin-block-start:.75rem;border-block-start:1px solid var(--rule);padding-block-start:.5rem}
.cb-formulas>summary{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--accent-text);padding-block:.35rem}
.cb-formulas[open]>summary .i{transform:rotate(180deg)}
.formula-lines{display:grid;gap:.5rem;margin-block-start:.5rem}
.formula-lines li{display:grid;gap:.15rem;font-size:.92rem}
/* who should buy, bottom line, about */
.fit-list{display:grid;gap:1rem;margin-block-start:.5rem}
.fit-list li{border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem;background:var(--card)}
.fit-yes li{border-inline-start:3px solid var(--good)}
.fit-no li{border-inline-start:3px solid var(--warn)}
.fit-list h3{font-size:1rem;margin-block-end:.35rem}
.fit-list p.tx{margin:0;line-height:1.75}
.alt-but{font-size:.88rem;color:var(--sec);margin:0}
.bottom-card{border:1px solid var(--rule);border-radius:var(--r-lg);padding:1.5rem;background:var(--card);box-shadow:var(--shadow-1);display:grid;gap:1rem;max-width:52rem}
.bottom-card .vb-actions{max-width:24rem}
.bottom-card .disc-line{margin:0;font-size:.8rem}
.about-cols{gap:1.5rem 2.5rem;margin-block-start:.5rem}
.about-sub{font-size:.95rem;margin-block-end:.5rem}
.people,.rules{display:grid;gap:.5rem}
.people li b{margin-inline-end:.35rem}
.rules{padding-inline-start:1.1rem;list-style:disc;line-height:1.7}
@media(max-width:900px){.did-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){
  .chapter{padding-block:1.75rem}
  .ch-sub{font-size:1.6rem}
  .ev{padding:.85rem .9rem}
  .score-rows li{grid-template-columns:minmax(0,1fr) auto}
  .sr-val{grid-column:1/-1;grid-row:2}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .bottom-card{padding:1.1rem}
}
/* chapters at desktop: the story on the start side, what disappoints and how it was scored beside it */
.ch-head{grid-area:head}.ch-body{grid-area:body}.ch-side{grid-area:side;display:grid;gap:1.25rem;align-content:start;min-width:0}
.ch-grid{grid-template-areas:"head" "body" "side"}
.ev .plan-table{min-width:600px;font-size:.9rem}
@media(min-width:1100px){
  .ch-grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem);grid-template-areas:"head head" "body side";gap:1.25rem 2.5rem;align-items:start}
  .ch-side .score-rows li{grid-template-columns:minmax(0,1fr) auto}
  .ch-side .sr-val{grid-column:1/-1;grid-row:2;color:var(--sec);font-size:.92rem}
  .ch-side .ch-down,.ch-side .crit-block{max-width:none}
  .ch-side .crit-block{padding:1.1rem}
}
.ev .plan-table{min-width:0;width:100%;font-size:.86rem}
.ev .plan-table th,.ev .plan-table td{padding-inline:.5rem}
.fit-none{border:1px dashed var(--rule-strong);border-radius:var(--r);padding:1rem 1.1rem;margin-block-start:.5rem}.fit-none p.tx{margin:0;line-height:1.75}
.ch-side>*{min-width:0}
.ev>.ev-h{font-size:.85rem;font-weight:700;color:var(--sec);margin-block-end:.65rem}
.ev .local-table,.ev .extras-table{min-width:0;width:100%}.ev .local-table th,.ev .local-table td{padding-inline:.5rem}
/* qa-r4: isolation and line breaks */
.f{unicode-bidi:isolate}
bdi:not([dir]){white-space:nowrap}      /* date isolates added by bidi.py never split between day, month and year */
.sr-pts bdi{white-space:nowrap}
[dir="rtl"] .convo blockquote[dir="ltr"]{border-inline-start:0;padding-inline-start:0;border-inline-end:3px solid var(--accent);padding-inline-end:.8rem}
.plan-card li{grid-template-columns:minmax(0,1fr)}
.plan-card li>span{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline}
.plan-card li>span b{white-space:nowrap}
/* qa-r5: desktop side column and calculation table */
.ch-side .renorm-table{min-width:0;width:100%;font-size:.86rem}
.ch-side .renorm-table th,.ch-side .renorm-table td{padding-inline:.5rem}
.ch-side .renorm-table td.num{white-space:nowrap}
.calc-table thead th:nth-child(n+2){text-align:end}
.cb-round{white-space:nowrap}
.formula-lines .ml-expr{justify-self:start}
.city-bars .is-med .bar i{background:var(--sec)} /* graphic contrast 3:1 or more against the track in both themes */
/* qa-r7: tables in English and the regional table alignment */
.ch-side .renorm-table th,.ch-side .renorm-table td{white-space:normal}
.ch-side .renorm-table td.num{white-space:nowrap}
.ev .plan-table th{white-space:normal}
.plan-table td .tag{display:table;margin-block-start:.25rem;margin-inline:0}
.plan-table td .tag{white-space:normal;text-align:start} /* the pill may break onto two lines so the term column can shrink: nowrap overflowed WaveHost's table at 1280 (qa-r21) */
.plan-table tr.is-tested .tag{background:var(--card)} /* on the tinted tested row the pill needs its own ground to read as a label (qa-r20) */
.plan-table td{white-space:nowrap}
.local-table thead th:nth-child(n+2),.local-table td:nth-child(4){text-align:end}
.ev .plan-table{font-size:.84rem}.ev .plan-table th,.ev .plan-table td{padding-inline:.4rem}
.ev .tablewrap table.plan-table{font-size:.84rem}.ev .tablewrap table.plan-table th,.ev .tablewrap table.plan-table td{padding-inline:.45rem}
/* qa-r8 */
.plan-table thead th:nth-child(n+3),.renorm-table thead th:nth-child(n+2){text-align:end}
.renorm-table td:nth-child(n+2){text-align:end}
.changelog time{font-size:inherit;color:inherit;font-weight:inherit}
.changelog li>time{color:var(--sec);font-size:.8rem}
.fd-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.1rem 1rem}
.fd-name{grid-column:1;grid-row:1}.fd-w{grid-column:1;grid-row:2}.fd-sub{grid-column:2;grid-row:1/span 2;margin:0}
.people li b{margin-inline-end:0}

/* 17b ─ hub v5: the lower half as written explanation and advice */
.hub-prose{max-width:min(46rem,100% - 2.5rem)}
.hub-prose>p,.hub-prose li>p{line-height:1.8;margin-block:0 1rem;text-wrap:pretty}
.hub-prose>h2{margin-block:0 .9rem}
.hub-prose>h2~h2{margin-block-start:2.25rem}
.hub-prose>.how-h3,.hub-prose>h3{margin-block:1.75rem .6rem}
.hub-prose .tscroll{margin-block:1rem 1.25rem}
.crit-notes{display:grid;gap:1rem;margin-block:.5rem 1.5rem}
.crit-notes>li{border:1px solid var(--rule);border-radius:var(--r);padding:1rem 1.1rem;background:var(--card)}
.cn-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem .75rem;align-items:baseline;margin-block-end:.5rem}
.cn-head h4{font-size:1.02rem;margin:0}
.cn-head b{color:var(--accent-text)}
.cn-head .bar{grid-column:1/-1;height:6px}
.crit-notes>li>p{margin-block-end:.5rem}
.hub-more{margin-block:.25rem 1rem}
.hub-more>summary{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--accent-text);padding-block:.3rem}
.hub-more[open]>summary .i{transform:rotate(180deg)}
.hub-more>:not(summary){margin-block-start:.5rem}
.cn-formula{font-size:.9rem;color:var(--sec);line-height:1.7}
.fit-cases{display:grid;gap:1rem;margin-block:.5rem 0}
.fit-cases>li{border:1px solid var(--rule);border-inline-start:3px solid var(--accent);border-radius:var(--r);padding:1rem 1.2rem;background:var(--card)}
.fit-cases h3{font-size:1.05rem;margin-block-end:.4rem}
.fit-cases p{margin-block:0 .6rem}
.fit-cases .fc-more{margin:0;font-size:.92rem}
.checklist.advice{display:grid;gap:.75rem;padding-inline-start:1.4rem;list-style:decimal}
.checklist.advice li{line-height:1.75}
.checklist.advice li b{display:block}
.hub-prose .link{display:inline;white-space:normal}.hub-prose .link .i{display:inline-block;vertical-align:-.15em}
.cn-spread{font-size:.9rem;color:var(--sec);line-height:1.7;margin:0}.cn-formula{margin-block:.25rem .5rem}.fit-cases .fc-pool{font-size:.9rem;color:var(--sec)}.sp-found{color:var(--accent-text);font-weight:700}
/* qa-r13 */
.checklist.advice li{grid-template-columns:auto minmax(0,1fr)}
.checklist.advice li>span{min-width:0;line-height:1.75}
.checklist.advice li b{display:block}
#price .pricetable th{white-space:normal}
.hub-prose>h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.hub-prose>h3,.hub-prose .how-h3{font-size:1.2rem}
.hub-prose .calc{margin-block-end:.75rem}
.hub-prose .link.pick{white-space:nowrap}
@media(max-width:720px){.hub-prose .calc{overflow-x:auto}.hub-prose .calc .example{white-space:nowrap;width:max-content}}
/* qa-r14: equations are left-to-right, so their scroll box opens at the equation's start on Arabic pages too */
[dir="rtl"] .hub-prose .calc{direction:ltr}
[dir="rtl"] .hub-prose .calc .example{text-align:start}
/* review: caveats beside perfect sub-scores */
.vb-caveats{display:grid;gap:.35rem;font-size:.82rem;line-height:1.55;color:var(--text);background:var(--warn-soft);border-radius:var(--r-sm);padding:.55rem .7rem}
.vb-caveats b{font-weight:700}
.fd-caveat{margin:0;font-size:.9rem;line-height:1.65;color:var(--text);border-inline-start:3px solid var(--warn);padding-inline-start:.6rem}
.pros li b,.cons li b{font-weight:700}
@media(min-width:1100px) and (max-width:1279px){ /* the chapter column is narrower before 1280: tighter cells keep every plan-table column visible (measured 1100–1279) */
  .ev .tablewrap table.plan-table{font-size:.8rem}
  .ev .tablewrap table.plan-table th,.ev .tablewrap table.plan-table td{padding-inline:.3rem}
}

/* 30 ─ trust pages (methodology, disclosure, about, contact, privacy, terms, changelog) */
.trust-dates{margin-block-start:.6rem;font-size:.85rem;color:var(--sec)}
.trust-body{padding-block:1.5rem 3rem}
.trust-sec{padding-block:1.25rem;border-block-end:1px solid var(--rule);scroll-margin-block-start:7rem}
.trust-sec h2{font-size:1.35rem}
.trust-sec .tscroll{margin-block:.75rem}
.table.trust-table{min-width:0} /* trust tables fit their column; the 960 px minimum is for comparison tables */
@media(max-width:720px){.table.trust-table{min-width:30rem}} /* phones: a trust table scrolls with its cue rather than squeezing a column to one word per line (qa-r32) */
/* A two-column label/value table has no reason to scroll: the value is the whole point, and scrolling hid it on a phone
   (persona read, 2026-09-16). These stack into rows instead, so the answer is always beside its label. */
@media(max-width:720px){
  .table.trust-table.pairs{min-width:0}
  .table.trust-table.pairs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .table.trust-table.pairs tr{display:grid;gap:.15rem;padding-block:.55rem;border-block-end:1px solid var(--rule)}
  .table.trust-table.pairs th,.table.trust-table.pairs td{display:block;border:0;padding:0}
  .table.trust-table.pairs th[scope="row"]{font-weight:400;color:var(--sec);font-size:.85rem}
}
.trust-table td bdi{white-space:nowrap} /* a formula is one expression; it never breaks inside (qa-r32) */
.csp-table td bdi{white-space:normal} /* the CSP header is a list of directives, not one expression */
.trust-table .pill-na{white-space:nowrap}
.trust-sec p+p,.trust-sec p+.disc-line,.trust-sec .disc-line+p{margin-block-start:.8rem}
.trust-sec ul+p,.trust-sec ol+p,.trust-sec p+ul,.trust-sec p+ol{margin-block-start:.8rem} /* a list and the sentence after it are separate thoughts */
.trust-head .container,.trust-jumps .container{max-width:min(46rem,100% - 2.5rem)} /* head, contents bar and body share one column (qa-r32) */
.trust-table th[scope=row]{white-space:normal;min-width:6rem}
.trust-table th[scope=col]{white-space:normal}
.trust-sub{font-size:.95rem;margin-block:.75rem .35rem;color:var(--sec)}
.trust-protocol li{margin-block:.3rem}
.trust-table td{white-space:normal}
.trust-table td bdi{overflow-wrap:anywhere}
.trust-x{display:block;font-weight:400;font-size:.8rem;color:var(--sec)}
.trust-crit{margin-block-start:1.25rem}
.trust-crit h3{font-size:1.1rem}
.trust-rules li{margin-block:.25rem}
span.trust-note{display:inline}
.trust-note{font-size:.9rem;color:var(--sec)}
.trust-report{margin-block-start:1.5rem}
.trust-history{margin-block-start:1.5rem}
.route-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:1rem;margin-block-start:1rem}
.route h3{font-size:1rem}
.route .tx{font-size:.9rem;color:var(--sec)}
.route a bdi{overflow-wrap:anywhere}
.clause-n{margin-inline-end:.25rem;color:var(--sec)}
.cl-month{padding-block:1rem;scroll-margin-block-start:7rem}
.cl-month h2{font-size:1.3rem;margin-block-end:.5rem}
.cl-type{margin-inline-end:.35rem}

.fd-more .link{white-space:normal;display:inline} /* long link labels wrap inside the column instead of pushing past it (qa-r29, 360 px) */

/* 32 ─ guides (/guides/, /guides/{slug}/) */
.guide-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-block-start:.25rem}
.guide-rule{margin-block:1rem .5rem}
.guide-answer{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--panel);padding:1rem 1.1rem;margin-block:1rem}
.guide-answer .how-h3{margin-block-end:.5rem}
.guide-routes{display:grid;gap:.5rem}
.guide-routes li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem .75rem}
.guide-measured{border:1px solid var(--rule);border-inline-start:4px solid var(--accent);border-radius:var(--r);padding:1rem 1.1rem;margin-block:1.25rem}
.guide-measured h2{font-size:1.2rem}
.guide-sec{padding-block:1rem;border-block-end:1px solid var(--rule);scroll-margin-block-start:7rem}
.guide-sec h2{font-size:1.3rem}
.guide-sec p+p{margin-block-start:.8rem}
.step-n{display:inline-grid;place-items:center;min-width:1.8rem;height:1.8rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:.9rem;margin-inline-end:.4rem}
.code-wrap{border:1px solid var(--rule);border-inline-start:3px solid var(--accent);border-radius:var(--r-sm);background:var(--panel);margin-block:.75rem;overflow-x:auto}
.code{direction:ltr;text-align:start;margin:0;padding:.75rem 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;line-height:1.6;white-space:pre;text-align:left}
.guide-list{display:grid;gap:.75rem}
.guide-row{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.guide-row>a{display:flex;flex-direction:column;gap:.3rem}
.guide-row h3{font-size:1.05rem}
.guide-row p{color:var(--sec);font-size:.92rem;margin:0}
.guide-row small{color:var(--sec)}
.guide-row .pill,.guide-row .pill-na{align-self:flex-start}
.guide-featured .guide-row{border-color:var(--accent)}
.band-lite{background:none}
/* Reviews index and comparison pages (/{cat}/reviews/, /{cat}/compare/) */
.row-review .rbody .rv-dek-s{color:var(--text);font-size:.95rem;max-width:62ch}
.row-review .pros,.row-review .cons{margin-block:.55rem 0;gap:.25rem}
.row-review .pros b,.row-review .cons b{font-weight:700}
.row-review .rv-by{font-size:.82rem;margin-block-start:.5rem}
.row-review .ract .btn{white-space:nowrap}
.az-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem}
.az-list li{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border:1px solid var(--rule);border-radius:12px;background:var(--card)}
.az-list a{font-weight:700;color:var(--text);min-width:0}
.az-list a:hover{color:var(--accent-text);text-decoration:underline}
.az-score{margin-inline-start:auto;font-weight:700}
.az-list .prov-mark{margin-inline-start:0}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-row .chip{font-size:.92rem;color:var(--text);padding:.5rem 1rem}
.chip-row .chip:hover{border-color:var(--accent);color:var(--accent-text)}
.link-row{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-block-start:1.25rem}
.link-row .link{white-space:normal}
.col-defs{display:grid;gap:.75rem;margin-block:1rem 2rem}
.col-defs>div{border:1px solid var(--rule);border-radius:12px;background:var(--card);padding:.9rem 1rem}
.col-defs dt{font-weight:700;margin-block-end:.35rem}
.col-defs dd{color:var(--sec);font-size:.92rem;line-height:1.75;margin:0}
.sort-note{font-size:.85rem;color:var(--sec);margin-block:.25rem 0}
.js .sort-note.js-only{display:block}
.th-sort{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;text-align:start;white-space:nowrap}
.th-sort::after{content:"";width:.45rem;height:.45rem;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;opacity:.35;transform:rotate(45deg) translateY(-2px)}
th[aria-sort] .th-sort::after{opacity:1}
th[aria-sort="ascending"] .th-sort::after{transform:rotate(-135deg) translateY(-1px)}
.table thead th:first-child .th-sort{color:#FFFFFF}
/* Compare tool (/compare/): a console to pick two services, then a board of facing rows. Only tokens change in dark mode. */
.cmp-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:1.5rem 2.75rem;border-block-end:1px solid var(--rule);background:radial-gradient(64rem 28rem at 50% -10rem,var(--hero-a),transparent 72%),var(--bg)}
.cmp-hero>.container{position:relative;text-align:center}
.cmp-hero .crumbs{text-align:start}
.cmp-hero .kicker{margin-block-start:1rem;padding:.3rem .8rem;border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--rule)}
.cmp-hero h1{font-size:clamp(2rem,1.2rem + 3vw,3.3rem);line-height:1.15;margin-block:.9rem .75rem;text-wrap:balance}
html:lang(ar) .cmp-hero h1{font-size:clamp(1.8rem,1.1rem + 2.6vw,2.8rem);line-height:1.35}
.cmp-hero .lead{max-width:62ch;margin-inline:auto;color:var(--sec);font-size:1.05rem;text-wrap:pretty}
.cmp-console{display:none;gap:1rem;max-width:58rem;margin:2rem auto 0;padding:1rem;text-align:start;border:1px solid var(--rule);border-radius:var(--r-xl);background:color-mix(in srgb,var(--card) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-3)}
.js .cmp-console{display:grid}
.cmp-nojs{margin-block-start:1.5rem}
.cmp-nojs p{max-width:60ch;margin-inline:auto;color:var(--sec)}
.cmp-nojs .link-row{justify-content:center}
.js .cmp-nojs{display:none}
.cmp-cats{display:flex;gap:.3rem;margin:0;padding:.3rem;border:1px solid var(--rule);border-radius:14px;background:var(--panel);overflow-x:auto;scrollbar-width:none;min-width:0}
.cmp-cat{flex:1 0 auto;position:relative}
.cmp-cat input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cmp-cat span{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem .9rem;border-radius:10px;font-weight:700;font-size:.92rem;color:var(--sec);white-space:nowrap;transition:background var(--t),color var(--t),box-shadow var(--t)}
.cmp-cat small{color:var(--text);font-weight:400;font-size:.75rem;padding:.05rem .45rem;border-radius:999px;background:var(--rule)}
.cmp-cat input:checked+span{background:var(--card);color:var(--text);box-shadow:var(--shadow-1),0 0 0 1px var(--rule)}
.cmp-cat input:checked+span .i{color:var(--accent-text)}
.cmp-cat input:checked+span small{background:var(--accent-soft);color:var(--accent-text)}
.cmp-cat input:focus-visible+span{outline:3px solid var(--accent-text);outline-offset:2px}
.cmp-slots{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:.75rem}
.cmp-slot{display:grid;gap:.35rem;min-width:0}
.cmp-slot-l{font-size:.8rem;font-weight:700;color:var(--sec);padding-inline:.25rem}
.cmp-select{position:relative;display:block}
.cmp-select select{-webkit-appearance:none;appearance:none;width:100%;font:inherit;font-size:1.05rem;font-weight:700;color:var(--text);background:var(--card);border:1px solid var(--rule-strong);border-radius:14px;padding-block:.85rem;padding-inline:1rem 2.6rem;cursor:pointer;text-overflow:ellipsis;transition:border-color var(--t),box-shadow var(--t)}
.cmp-select select:hover{border-color:var(--accent)}
.cmp-select select:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.cmp-select .i{position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);pointer-events:none;color:var(--sec)}
.cmp-orb{width:3.25rem;height:3.25rem;margin-block-end:.1rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--accent-text);border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from 180deg,var(--accent),transparent 30%,var(--accent) 60%,transparent 85%,var(--accent)) border-box;box-shadow:var(--shadow-accent);transition:transform var(--t-panel)}
.cmp-orb:hover{transform:rotate(180deg)}
.cmp-orb .i{width:1.25rem;height:1.25rem}
.cmp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding-inline:.25rem}
.cmp-pairs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;min-width:0}
.cmp-pairs-l{font-size:.8rem;color:var(--sec);margin-inline-end:.2rem}
.cmp-pairs ul{display:flex;flex-wrap:wrap;gap:.4rem}
.cmp-pairs a{display:inline-flex;padding:.3rem .75rem;border-radius:999px;border:1px solid var(--rule);background:var(--card);font-size:.82rem;color:var(--text);transition:border-color var(--t),color var(--t)}
.cmp-pairs a:hover{border-color:var(--accent);color:var(--accent-text)}
.cmp-copy{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .2rem;font:inherit;font-size:.85rem;font-weight:700;color:var(--accent-text);background:none;border:0;cursor:pointer}
.cmp-copy:hover span{text-decoration:underline}
.cmp-legend{display:flex;align-items:center;justify-content:center;gap:.55rem;max-width:58rem;margin:0 auto 1rem;font-size:.85rem;color:var(--sec);text-align:center;text-wrap:pretty}
.cmp-legend .dot,.dcell.is-lead::before{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-ring),0 0 12px var(--accent);flex:none}
.duel{max-width:58rem;margin-inline:auto;border:1px solid var(--rule);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow-2);overflow:clip}
.drow{display:grid;grid-template-columns:minmax(0,1fr) minmax(8.5rem,13rem) minmax(0,1fr);border-block-end:1px solid var(--rule)}
.dcell{position:relative;min-width:0;display:flex;align-items:center;gap:.75rem;padding:.8rem 1.4rem;transition:background var(--t)}
.dcell[data-side="a"]{flex-direction:row-reverse;text-align:end;padding-inline-end:2rem}
.dcell[data-side="b"]{padding-inline-start:2rem}
.dcell.is-lead{background:color-mix(in srgb,var(--accent-soft) 70%,transparent)}
.dcell.is-lead::before{content:"";position:absolute;inset-block-start:50%;transform:translateY(-50%)}
.dcell[data-side="a"].is-lead::before{inset-inline-end:.75rem}
.dcell[data-side="b"].is-lead::before{inset-inline-start:.75rem}
.dcell.is-lead .dval,.dcell.is-lead .dscore:not(.is-mid){color:var(--accent-text)}
.dlab{display:grid;align-content:center;justify-items:center;gap:.3rem;padding:.6rem .5rem;text-align:center;font-size:.8rem;color:var(--sec);background:var(--panel);border-inline:1px solid var(--rule)}
.dlab-t{text-wrap:balance}
.drow.is-tie .dlab::after{content:"=";font-weight:700;font-size:1rem;line-height:1;color:var(--accent-text)}
.dval{font-weight:700;overflow-wrap:anywhere}
.dcell .bar{flex:1;max-width:10rem;height:8px;display:flex}
.dcell[data-side="a"] .bar{justify-content:flex-end}
.dcell .bar i{transition:width var(--t-panel)}
.drow-head{position:sticky;inset-block-start:4rem;z-index:3;background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.drow-head .dcell{padding-block:1rem}
.drow-head .logo{width:44px;height:44px;border-radius:12px;font-size:1rem}
.dhead{display:grid;gap:.1rem;min-width:0}
.dname{font-size:1.05rem;line-height:1.3}
.dmeta{font-size:.78rem;color:var(--sec)}
.dvs{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:var(--on-accent);background:var(--accent);box-shadow:var(--shadow-accent)}
.drow-score .dcell{padding-block:1.2rem}
.dscore{font-size:2.6rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.ddiff{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border-radius:999px;border:1px solid var(--rule);background:var(--card);font-size:.75rem;white-space:nowrap}
.ddiff b{color:var(--text)}
.drow-crit .dcell{padding-block:.95rem}
.dmore{border-block-end:1px solid var(--rule)}
.dmore>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;cursor:pointer;font-weight:700;font-size:.9rem;background:var(--panel);border-block-end:1px solid var(--rule)}
.dmore>summary::-webkit-details-marker{display:none}
.dmore>summary .i{transition:transform var(--t)}
.dmore[open]>summary .i{transform:rotate(180deg)}
.dmore:not([open])>summary{border-block-end:0}
.dmore .drow{font-size:.92rem}
.dmore .drow:last-child{border-block-end:0}
.drow-text .dcell{align-items:flex-start}
.drow-text .pline{font-size:.85rem;color:var(--sec);line-height:1.7}
.dweak{font-weight:400;color:var(--text);font-size:.9rem}
.duel>.disc-line{margin:0;padding:.9rem 1.4rem 0;text-align:center}
.drow-act{border-block-end:0}
.drow-act .dlab{background:none;border:0}
.drow-act .dcell{flex-wrap:wrap;padding-block:.9rem 1.3rem}
.cmp-foot{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;max-width:58rem}
.cmp-foot h2{font-size:1.35rem;margin-block-end:.8rem}
.cmp-foot>div>p{color:var(--sec)}
.cmp-read{display:grid;gap:.6rem}
.cmp-read li{display:grid;gap:.15rem;padding:.8rem 1rem;border-inline-start:3px solid var(--accent);border-start-end-radius:12px;border-end-end-radius:12px;background:var(--panel)}
.cmp-read span{font-size:.9rem;color:var(--sec)}
.cmp-tables{display:grid;gap:.5rem;margin-block-start:.8rem}
.cmp-table-link{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--rule);border-radius:14px;background:var(--card);color:var(--text);transition:border-color var(--t),transform var(--t)}
.cmp-table-link:hover{border-color:var(--accent);transform:translateY(-1px)}
.cmp-table-link>span{display:grid;flex:1;min-width:0}
.cmp-table-link small{color:var(--sec)}
.cmp-table-link>.i:first-child{color:var(--accent-text)}
@media(max-width:900px){.cmp-foot{grid-template-columns:1fr}}
@media(max-width:720px){
.cmp-console{padding:.75rem}
.cmp-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
.cmp-cat span{flex-direction:column;gap:.25rem;padding:.55rem .35rem;font-size:.78rem;line-height:1.35;white-space:normal;text-align:center;height:100%}
.cmp-slots{grid-template-columns:1fr}
.cmp-orb{justify-self:center;margin-block:-.35rem;width:2.9rem;height:2.9rem;transform:rotate(90deg)}
.cmp-orb:hover{transform:rotate(270deg)}
.cmp-tools{justify-content:center}
.cmp-pairs{justify-content:center}
.drow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"lab lab" "a b"}
.dlab{grid-area:lab;display:flex;flex-wrap:wrap;justify-content:center;padding:.55rem .75rem 0;background:none;border:0}
.dcell[data-side="a"]{grid-area:a}.dcell[data-side="b"]{grid-area:b}
.dcell{padding:.35rem .9rem .8rem;gap:.5rem}
.dcell[data-side="a"]{border-inline-end:1px solid var(--rule)}
.drow-head{inset-block-start:4rem}
.drow-head .dlab{display:none}
.drow-head .dcell,.drow-head .dcell[data-side="a"]{flex-direction:column;align-items:center;text-align:center;padding-block:.8rem}
.drow-head .logo{width:36px;height:36px;font-size:.9rem}
.dname{font-size:.95rem}
.dscore{font-size:2.1rem}
.dcell .bar{max-width:none}
.dcell[data-side="a"]{padding-inline-end:1.5rem}.dcell[data-side="b"]{padding-inline-start:1.5rem}
.drow-head .dcell[data-side="a"],.drow-head .dcell[data-side="b"]{padding-inline:.9rem}
.dcell.is-lead::before{inset-block-start:calc(50% - .2rem)}
.dcell[data-side="a"].is-lead::before{inset-inline-end:.5rem}.dcell[data-side="b"].is-lead::before{inset-inline-start:.5rem}
.drow-act .dcell,.drow-act .dcell[data-side="a"]{flex-direction:column;align-items:stretch}
.drow-act .btn{width:100%}
.duel>.disc-line{padding-inline:.9rem}
}
.drow-act .btn{text-align:center}
.jumps a.is-active,.jumps a[aria-current="true"]{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.jumps a.is-active:hover{background:var(--accent-soft);color:var(--accent-text)}

/* 15 ─ design pass: homepage (2026-09-15). Minimal, futuristic: gradient accents from the brand blue, glass surfaces, faint grids. */
.btn-primary{background-color:var(--accent);background-image:var(--grad-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -14px rgba(29,78,216,.8)}
.btn-primary:hover{background-color:var(--accent-hover);background-image:var(--grad-accent);filter:brightness(1.07)}
.bar i{background-color:var(--accent);background-image:var(--grad-accent)}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* section links read as pills, not bare text */
.section-head>.link{padding:.55rem 1.05rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);box-shadow:var(--shadow-1);font-size:.9rem;transition:border-color var(--t),background var(--t),gap var(--t),box-shadow var(--t)}
.section-head>.link:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 45%,var(--rule));background:var(--accent-soft);box-shadow:0 0 0 4px var(--accent-ring)}
/* hero: faint grid under a brand glow, glass kicker, gradient-edged scorecard */
.hero .kicker{padding:.35rem .9rem;border:1px solid var(--rule);border-radius:999px;background:color-mix(in srgb,var(--card) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.82rem;box-shadow:var(--shadow-1)}
.hero .lead{max-width:56ch}
.scorecard{border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(155deg,color-mix(in srgb,var(--accent) 60%,transparent),var(--rule) 38%,var(--rule) 68%,color-mix(in srgb,var(--accent) 40%,transparent)) border-box;box-shadow:0 40px 80px -48px rgba(29,78,216,.55),var(--shadow-2)}
.scorecard:hover{box-shadow:0 48px 90px -46px rgba(29,78,216,.6),var(--shadow-3);border-color:transparent}
.bigscore .n{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:.05em}
.ribbon{background-color:var(--accent);background-image:var(--grad-accent);box-shadow:var(--shadow-accent)}
/* category strip: glass bar, centred tabs, gradient tile on the active tab */
.strip ul{background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.strip a{justify-content:center}
.strip a[aria-selected="true"]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.strip a[aria-selected="true"] .ic,.js main .strip a[aria-selected="true"] .ic{background-color:var(--accent);background-image:var(--grad-accent);color:var(--on-accent);box-shadow:var(--shadow-accent)}
/* trust cards and changelog as quiet cards */
.tcard{box-shadow:var(--shadow-1)}
.tcard:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--rule));box-shadow:var(--shadow-2)}
.tcard .ic{background-color:var(--accent);background-image:var(--grad-accent);color:var(--on-accent);box-shadow:var(--shadow-accent)}
.changelog{box-shadow:var(--shadow-1);padding:1.4rem 1.5rem 1.5rem}
.changelog ul{gap:.75rem}
.changelog li{padding:.85rem 1rem;border:1px solid var(--rule);border-inline-start-width:3px;border-radius:14px;background:var(--panel)}
.changelog li:has(.down){border-color:var(--rule);border-inline-start-color:var(--bad)}
.changelog li:has(.up){border-color:var(--rule);border-inline-start-color:var(--good)}
/* guides: side items as cards with an icon tile */
.gside{gap:.6rem}
.gside a{align-items:center;border:1px solid var(--rule);background:var(--card);box-shadow:var(--shadow-1);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.gside a:hover{background:var(--card);border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:var(--shadow-2);transform:translateY(-2px)}
.gside .thumb{width:52px;height:52px;border:0;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
.gside a:hover .thumb{background-color:var(--accent);background-image:var(--grad-accent);color:var(--on-accent)}
.gside .thumb .i{width:1.35rem;height:1.35rem}
.gfeat{background-image:radial-gradient(90% 70% at 100% 0%,rgba(37,99,235,.28),transparent 60%)}
/* call to action: faint grid and a gradient edge */
.cta{background-image:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07));background-size:66% 3px,48% 3px,33% 3px;background-repeat:no-repeat;background-position:left bottom 14px,left bottom 48px,left bottom 82px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),var(--shadow-3)}
.cta .btn-primary{padding:.95rem 1.6rem;font-size:1rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 34px -12px rgba(37,99,235,.9)}
/* footer: brand in ink, a thin light line along its top */
.footer{position:relative}
.footer::before{content:"";position:absolute;inset-inline:0;inset-block-start:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
.footer .brand{color:var(--text)}
@media(max-width:720px){
.strip ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding:.4rem;gap:.3rem}
.strip li{min-width:0}
.strip a{flex-direction:column;gap:.35rem;padding:.6rem .25rem;white-space:normal;text-align:center;height:100%}
.strip b{font-size:.78rem;line-height:1.35}
.strip::after{display:none}
.gside .thumb{width:44px;height:44px}
.hero .kicker{border-radius:14px;font-size:.78rem;line-height:1.5;padding:.35rem .75rem}
}

/* 16 ─ homepage: "Why trust the score?" ring and steps, "Head to head" cards (2026-09-15) */
.method-v2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.5rem;align-items:stretch}
.ring-card,.steps-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow-2);padding:1.6rem}
.ring-head h3{font-size:1.2rem}
.ring-head p{color:var(--sec);font-size:.9rem;margin-block-start:.2rem}
.ring-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem;align-items:center;margin-block-start:1.25rem}
.ring{position:relative;width:15rem;aspect-ratio:1;max-width:100%}
.ring-svg{width:100%;height:100%;overflow:visible}
.seg circle{fill:none;stroke-width:20;transition:stroke-width var(--t),opacity var(--t)}
.seg-track{opacity:.16}
.seg-1 circle,.ring-dot.seg-1{stroke:var(--seg-1);background:var(--seg-1)}
.seg-2 circle,.ring-dot.seg-2{stroke:var(--seg-2);background:var(--seg-2)}
.seg-3 circle,.ring-dot.seg-3{stroke:var(--seg-3);background:var(--seg-3)}
.seg-4 circle,.ring-dot.seg-4{stroke:var(--seg-4);background:var(--seg-4)}
.seg-5 circle,.ring-dot.seg-5{stroke:var(--seg-5);background:var(--seg-5)}
.ring[data-active] .seg{opacity:var(--seg-dim);transition:opacity var(--t)}
.ring[data-active] .seg.is-on{opacity:1}
.seg.is-on circle{stroke-width:26}
.ring-c{position:absolute;inset:18%;background:var(--card);display:grid;place-content:center;justify-items:center;text-align:center;gap:.1rem;border-radius:50%}
.ring-c[hidden]{display:none}
.ring-big{font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.03em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline:.05em}
.ring-c span{font-size:.85rem;font-weight:700;max-width:9rem;line-height:1.35}
.ring-c small{font-size:.75rem;color:var(--sec);max-width:9rem}
.ring-hint{display:none;font-size:.8rem;color:var(--sec);margin-block-end:.5rem}
.js .ring-hint.js-only{display:block}
.ring-legend{display:grid;gap:.3rem}
.ring-row{width:100%;line-height:1.45;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"dot name w" "dot p p";align-items:center;gap:.15rem .65rem;padding:.5rem .7rem;border-radius:12px;text-align:start;border:1px solid transparent;transition:background var(--t),border-color var(--t)}
.ring-row:hover,.ring-row[aria-pressed="true"],.ring-row.is-on{background:var(--panel);border-color:var(--rule)}
.ring-dot{grid-area:dot;width:.7rem;height:.7rem;border-radius:4px;align-self:start;margin-block-start:.45rem}
.ring-name{grid-area:name;display:grid;min-width:0}
.ring-name b{font-size:.92rem}
.ring-name small{display:none;color:var(--sec);font-size:.8rem;line-height:1.5}
.ring-row.is-on .ring-name small,.ring-row[aria-pressed="true"] .ring-name small{display:block}
.ring-w{grid-area:w;font-weight:700;font-size:.9rem}
.ring-p{grid-area:p;display:flex;gap:.5rem;align-items:baseline;font-size:.8rem;color:var(--sec)}
.ring-p b{color:var(--text);font-size:.85rem}
.ring-sum{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-block-start:.6rem;padding:.65rem .7rem 0;border-block-start:1px solid var(--rule);font-size:.9rem;font-weight:700}
.ring-sum b{font-size:1rem}
.ring-note{margin-block-start:1rem;font-size:.82rem;color:var(--sec);line-height:1.7}
.steps-card h3{font-size:1.2rem;margin-block-end:1.1rem}
.tsteps{position:relative;display:grid;gap:1.2rem}
.tsteps::before{content:"";position:absolute;inset-block:.5rem;inset-inline-start:1.2rem;width:2px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 10%,transparent));border-radius:2px}
.tsteps li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
.step-ic{width:2.4rem;height:2.4rem;border-radius:12px;display:grid;place-items:center;background-color:var(--accent);background-image:var(--grad-accent);color:var(--on-accent);box-shadow:0 0 0 5px var(--card),var(--shadow-accent);position:relative}
.step-ic .i{width:1.1rem;height:1.1rem}
.tsteps h4{font-size:.98rem;line-height:1.4}
.tsteps p{color:var(--sec);font-size:.88rem;margin-block-start:.2rem;line-height:1.7}
.h2h-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.h2h-card{position:relative;display:grid;gap:1rem;align-content:start;padding:1.25rem;border:1px solid var(--rule);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow-1);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.h2h-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:var(--shadow-3);transform:translateY(-3px)}
.h2h-card:empty{display:none}
.h2h-cat{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;padding:.25rem .7rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:.78rem;font-weight:700}
.h2h-cat .i{width:.95rem;height:.95rem}
.h2h-duel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.5rem;text-align:center}
.h2h-side{display:grid;justify-items:center;gap:.3rem;min-width:0}
.h2h-side .logo{width:44px;height:44px;border-radius:12px;font-size:1rem}
.h2h-name{font-size:.92rem;line-height:1.3}
.h2h-score{font-size:1.9rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.h2h-score.is-lead{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2h-vs{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-size:.65rem;font-weight:700;color:var(--on-accent);background-color:var(--accent);background-image:var(--grad-accent);box-shadow:var(--shadow-accent)}
.h2h-rows{display:grid;gap:.45rem;padding-block-start:.9rem;border-block-start:1px solid var(--rule)}
.h2h-rows li{display:grid;grid-template-columns:minmax(0,1fr) 4.2rem minmax(0,1fr);align-items:center;gap:.5rem}
.h2h-a,.h2h-b{display:flex;align-items:center;gap:.4rem;min-width:0}
.h2h-a{flex-direction:row-reverse}
.h2h-a .bar,.h2h-b .bar{flex:1;height:5px}
.h2h-a .bar{display:flex;justify-content:flex-end}
.h2h-l{text-align:center;font-size:.75rem;color:var(--sec)}
.h2h-v{font-size:.8rem;font-weight:700;min-width:1.9rem}
.h2h-a .h2h-v{text-align:end}
.h2h-v.is-lead{color:var(--accent-text)}
.h2h-go{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--rule);font-weight:700;font-size:.9rem;color:var(--accent-text);transition:background var(--t),border-color var(--t),color var(--t)}
.h2h-go::after{content:"";position:absolute;inset:0;border-radius:inherit}
.h2h-card:hover .h2h-go{background-color:var(--accent);background-image:var(--grad-accent);border-color:transparent;color:var(--on-accent)}
.h2h-go:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
@media(max-width:1000px){.method-v2{grid-template-columns:1fr}.h2h-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
.ring-card,.steps-card{padding:1.2rem}
.ring-body{grid-template-columns:1fr;justify-items:center}
.ring{width:13.5rem}
.ring-side{width:100%}
.h2h-grid{grid-template-columns:1fr}
}
/* 17 ─ design pass: hub pages (2026-09-15) */
.page-head{padding-block:1.9rem 1.7rem}
/* The header scale. What stood here was a 44px square grid -- graph paper, the default texture of
   every product landing page on the web, and the thing that made these headers look machine-made.
   In its place the header stands on a scale: ten major divisions across the width, each subdivided
   into five. It is the same nought-to-ten every score on this site is measured on, so the texture
   behind a title is the instrument the page is using rather than decoration. Percentages in the
   repeating gradient resolve against the element, so the ten divisions hold at every width. */
/* The header mark. Two things stood here before and both were wrong. A 44px square grid -- graph
   paper, the default texture of every product page on the web. Then a graduated scale pinned to the
   very top edge, which read as a stray artifact rather than a design.
   What is here now is the site's own signature component, ghosted: the score bar. Six of them,
   descending like a ranking, filling from the start edge as every real bar on this site does, fading
   out before they reach the title. A reader who scrolls two screens meets the same shape carrying
   real numbers. The header is the ranking, out of focus. */
.page-head h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,2.9rem);margin-block-start:.5rem}
/* the four answers */
.answer{padding-block:1.6rem .6rem}
.answer h2{font-size:1.2rem;color:var(--text)}
.picks{gap:1rem}
.picks a{gap:.6rem;padding:1.15rem 1.2rem;box-shadow:var(--shadow-1)}
.picks a:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:var(--shadow-3);transform:translateY(-3px)}
.picks li:first-child a{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(155deg,color-mix(in srgb,var(--accent) 65%,transparent),var(--rule) 45%,color-mix(in srgb,var(--accent) 40%,transparent)) border-box;box-shadow:0 26px 50px -34px rgba(29,78,216,.6),var(--shadow-1)}
.a-lab{justify-self:start;padding:.2rem .65rem;border-radius:10px;background:var(--accent-soft);line-height:1.5}
.a-score{background:none;padding:0;font-size:1.5rem;line-height:1;background-image:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.a-name .logo{width:34px;height:34px;border-radius:10px}
.a-price{padding-block-start:.55rem;border-block-start:1px solid var(--rule)}
/* ranked cards: the details toggle is a pill */
.row-more>summary{list-style:none;display:flex;width:max-content;margin-inline:auto;padding:.45rem 1.1rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);box-shadow:var(--shadow-1);transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.row-more>summary::-webkit-details-marker{display:none}
.row-more>summary:hover,.row-more[open]>summary{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,var(--rule))}
/* how we ranked: criteria cards and worked examples as one calculation card each */
.crit-notes>li{box-shadow:var(--shadow-1)}
.calc{gap:0;padding-block:.3rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-1)}
.calc .example{border:0;border-radius:0;background:none;padding:.6rem 1.1rem;border-block-end:1px dashed var(--rule)}
.calc .example:last-child{border-block-end:0;background:var(--accent-soft);font-weight:700;color:var(--text)}
.calc .example bdi{color:var(--accent-text);font-weight:700}
.cta-line{margin-block:1rem 0}
.cta-line .link,.fc-more .link{display:inline-flex;white-space:normal;padding:.5rem 1rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);box-shadow:var(--shadow-1);font-size:.9rem;transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.cta-line .link:hover,.fc-more .link:hover{text-decoration:none;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:0 0 0 4px var(--accent-ring)}
/* fit cases, small print, FAQ, guides */
.fit-cases>li{box-shadow:var(--shadow-1);transition:box-shadow var(--t),border-color var(--t)}
.fit-cases>li:hover{box-shadow:var(--shadow-2)}
.sp-found{display:inline;padding:.1rem .45rem;border-radius:6px;background:var(--accent-soft);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.faq{gap:.75rem 1.5rem;align-items:start}
.faq details{border:1px solid var(--rule);border-radius:14px;background:var(--card);padding:.9rem 1.1rem;box-shadow:var(--shadow-1);transition:border-color var(--t),box-shadow var(--t)}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 35%,var(--rule));box-shadow:var(--shadow-2)}
.faq summary{cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{flex:none;width:1.6rem;height:1.6rem;padding:.35rem;border-radius:50%;background:var(--panel);color:var(--accent-text)}
.faq details[open] summary .i{background-color:var(--accent);background-image:var(--grad-accent);color:var(--on-accent)}
.grow{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.g{box-shadow:var(--shadow-1)}
.g:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:var(--shadow-2)}
@media(max-width:720px){
.page-head::after{width:18rem;inset-inline-end:-8rem}
.picks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;margin-inline:-1.25rem;padding-inline:1.25rem;padding-block:.3rem 1rem;scroll-padding-inline:1.25rem;scrollbar-width:none}
.picks::-webkit-scrollbar{display:none}
.picks li{flex:0 0 82%;scroll-snap-align:start}
.calc:not(.at-end){-webkit-mask-image:linear-gradient(to left,transparent,#000 3.5rem);mask-image:linear-gradient(to left,transparent,#000 3.5rem)} /* the formulas stay on one line: fade the end edge while more is to the side */
.a-score{font-size:1.3rem}
}
/* 18 ─ design pass: review pages (2026-09-15) */
.review-head{position:relative;isolation:isolate;overflow:hidden;padding-block:1.9rem 1.75rem;background:var(--head);border-block-end:1px solid var(--rule)}
@media(min-width:721px){.rh-grid{grid-template-rows:auto 1fr}}
.rh-intro h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,2.7rem)}
.rh-intro .rv-dek{font-size:1.1rem;line-height:1.75}
/* verdict box: gradient edge, gradient score, pill links */
.verdict-box{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(155deg,color-mix(in srgb,var(--accent) 60%,transparent),var(--rule) 38%,var(--rule) 68%,color-mix(in srgb,var(--accent) 40%,transparent)) border-box;box-shadow:0 36px 70px -46px rgba(29,78,216,.55),var(--shadow-2)}
.verdict-box{grid-template-columns:minmax(0,1fr)} /* pill links sized to their text must not widen the box */
.vb-score .n{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline-end:.05em}
.vb-rank,.vb-extras,.vb-how,.fd-more .link,.calc-links .link,.alt-links .link,.back-link .link,.about-more .link{display:inline-flex;align-items:center;gap:.35rem;justify-self:start;width:max-content;max-width:100%;white-space:normal;padding:.4rem .9rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);box-shadow:var(--shadow-1);font-size:.85rem;font-weight:700;color:var(--accent-text);line-height:1.4;transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.vb-rank:hover,.vb-extras:hover,.vb-how:hover,.fd-more .link:hover,.calc-links .link:hover,.alt-links .link:hover,.back-link .link:hover,.about-more .link:hover{text-decoration:none;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:0 0 0 4px var(--accent-ring)}
/* likes and dislikes as two tinted cards */
.pc>div{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-1);padding:1.1rem 1.25rem 1.25rem;overflow:hidden}
.pc>div>.how-h3{display:flex;align-items:center;gap:.5rem;margin:-1.1rem -1.25rem 1rem;padding:.75rem 1.25rem;font-size:1rem;border-block-end:1px solid var(--rule)}
.pc>div:first-child>.how-h3{background:var(--good-soft);color:var(--good)}
.pc>div:last-child>.how-h3{background:var(--bad-soft);color:var(--bad)}
.pc .pros,.pc .cons{margin-block-end:0}
/* findings: gradient scores, hover */
.findings li{box-shadow:var(--shadow-1);transition:border-color var(--t),box-shadow var(--t)}
.findings li:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--rule));box-shadow:var(--shadow-2)}
.fd-name{text-decoration:none}
.fd-name:hover{color:var(--accent-text)}
.fd-sub:not(.na){font-size:1.6rem;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* chapters: the sub-score as a chip, formulas toggle as a pill */
.ch-sub:not(.na){display:inline-grid;place-items:center;min-width:3.6rem;padding:.35rem .7rem;border-radius:16px;font-size:1.6rem;background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.cb-formulas>summary{list-style:none;width:max-content;max-width:100%;padding:.4rem .9rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);cursor:pointer;transition:background var(--t),border-color var(--t)}
.cb-formulas>summary::-webkit-details-marker{display:none}
.cb-formulas>summary:hover,.cb-formulas[open]>summary{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,var(--rule))}
/* the full calculation: gradient edge instead of a heavy ring */
.calc-card{border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(155deg,color-mix(in srgb,var(--accent) 60%,transparent),var(--rule) 40%,var(--rule) 70%,color-mix(in srgb,var(--accent) 40%,transparent)) border-box;box-shadow:0 40px 80px -52px rgba(29,78,216,.5),var(--shadow-2)}
.calc-score b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:0} /* the dot between the two links is dropped: they are pills */
/* fit: headings as tinted pills */
.fit-cols>div>.how-h3{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .85rem;border-radius:999px;font-size:.9rem}
.fit-cols>div:first-child>.how-h3{background:var(--good-soft);color:var(--good)}
.fit-cols>div:last-child>.how-h3{background:var(--bad-soft);color:var(--bad)}
.fit-list li{box-shadow:var(--shadow-1)}
/* alternatives, about */
.alt-links{gap:.5rem}
#about{padding-block-start:2.5rem}
#about>.container{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--panel);padding:1.4rem 1.5rem}
.people li{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .5rem}
@media(max-width:720px){
.review-head::after{width:20rem;inset-inline-start:10%}
.pc>div{padding:1rem 1rem 1.1rem}
.pc>div>.how-h3{margin:-1rem -1rem .9rem;padding:.7rem 1rem}
#about>.container{width:calc(100% - 2.5rem);padding:1.1rem 1rem}
.ch-sub:not(.na){font-size:1.35rem;min-width:3rem}
}
/* 19 ─ design pass: reviews index (2026-09-15) */
#list>.container>h2{margin-block-end:1.75rem}
.az-list{gap:.6rem}
.az-list li{position:relative;padding:.6rem .8rem;box-shadow:var(--shadow-1);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.az-list li:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:var(--shadow-2);transform:translateY(-2px)}
.az-list a{display:flex;align-items:center;gap:.6rem;min-width:0}
.az-list a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.az-list a:hover{text-decoration:none;color:var(--text)}
.az-list .logo{width:34px;height:34px;border-radius:10px;font-size:.85rem}
.az-score{font-size:1.1rem;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.chip-row{gap:.6rem}
.chip-row .chip{padding:.55rem 1.1rem;font-weight:700;box-shadow:var(--shadow-1);transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t)}
.chip-row .chip:hover{background-color:var(--accent);background-image:var(--grad-accent);border-color:transparent;color:var(--on-accent);box-shadow:var(--shadow-accent)}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2rem;align-items:start}
.how-side h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.how-side>p{color:var(--sec);margin-block-start:.6rem;line-height:1.8;max-width:52ch}
.how-side .link-row{flex-direction:column;align-items:flex-start;gap:.6rem}
.link-row .link{padding:.5rem 1rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);box-shadow:var(--shadow-1);font-size:.9rem;transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.link-row .link:hover{text-decoration:none;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:0 0 0 4px var(--accent-ring)}
.tsteps .step-ic.num{font-weight:700;font-size:.95rem}
.how-grid .tsteps p{color:var(--text);font-size:.95rem;margin:0;padding-block-start:.35rem}
@media(max-width:900px){.how-grid{grid-template-columns:1fr}}
/* 20 ─ design pass: comparison, guides and trust pages (2026-09-15) */
/* category comparison: column definitions as a card grid, next steps as a card */
.col-defs{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem;margin-block:.25rem 2rem}
.col-defs>div{box-shadow:var(--shadow-1);padding:1.1rem 1.2rem}
.col-defs dt{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:1.05rem}
.col-w{padding:.15rem .6rem;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--on-accent);background-color:var(--accent);background-image:var(--grad-accent)}
.next-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:1.4rem 1.5rem;border:1px solid var(--rule);border-radius:var(--r-xl);background:var(--panel)}
.next-card h2{font-size:1.3rem}
.next-card p{color:var(--sec);margin-block-start:.3rem;max-width:60ch}
.next-card .link-row{margin:0}
/* page meta lines as a chip; tags as pills */
.trust-dates{display:inline-block;padding:.35rem .85rem;border:1px solid var(--rule);border-radius:14px;background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.8rem;line-height:1.6}
.guide-tags .tag,.guide-row .tag{display:inline-flex;align-self:flex-start;justify-self:start;width:max-content;padding:.2rem .65rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:.75rem;font-weight:700}
/* guides index: cards with an icon tile */
.guide-list{gap:1rem}
.guide-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.5rem 1rem;padding:1.1rem 1.2rem;box-shadow:var(--shadow-1);transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.guide-row:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:var(--shadow-2);transform:translateY(-2px)}
.guide-row>a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;row-gap:.3rem;align-items:start}
.guide-row>a>*:not(.guide-ic){grid-column:2}
.guide-row>a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.guide-ic{grid-row:1 / span 4;width:2.6rem;height:2.6rem;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
.guide-row:hover .guide-ic{background-color:var(--accent);background-image:var(--grad-accent);color:var(--on-accent)}
.guide-ic .i{width:1.2rem;height:1.2rem}
.guide-row .pill,.guide-row .pill-na{position:relative;z-index:1;border-radius:999px;font-size:.75rem;padding:.2rem .65rem}
.guide-row .pill{background:var(--good-soft);color:var(--good)}
.guide-row .pill-na{border-style:solid}
.guide-featured .guide-row{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(155deg,color-mix(in srgb,var(--accent) 60%,transparent),var(--rule) 45%,color-mix(in srgb,var(--accent) 40%,transparent)) border-box;box-shadow:0 26px 50px -34px rgba(29,78,216,.55),var(--shadow-1)}
/* guide article: measured box, link lists as cards and pills */
.guide-answer{box-shadow:var(--shadow-1)}
.guide-measured{border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(155deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--rule) 45%,color-mix(in srgb,var(--accent) 35%,transparent)) border-box;box-shadow:var(--shadow-2)}
.link-cards{list-style:none;padding-inline-start:0;display:grid;gap:.6rem;margin-block-start:.6rem}
.link-cards li>.link{position:relative;display:block;white-space:normal;padding-block:.8rem;padding-inline:1rem 2.5rem;border:1px solid var(--rule);border-radius:14px;background:var(--card);box-shadow:var(--shadow-1);color:var(--text);transition:border-color var(--t),box-shadow var(--t),color var(--t)} /* block, not flex: isolated runs inside must stay in the sentence */
.link-cards li>.link::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:1.1rem;width:.5rem;height:.5rem;border-top:2px solid var(--accent-text);border-right:2px solid var(--accent-text);transform:translateY(-50%) rotate(45deg)} /* physical borders: the chevron points forward and flips below */
[dir="rtl"] .link-cards li>.link::after{border-right:0;border-left:2px solid var(--accent-text);transform:translateY(-50%) rotate(-45deg)}
.link-cards li>.link:hover{text-decoration:none;color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:var(--shadow-2)}
.link-pills{display:block;font-size:0;margin-block-start:.75rem} /* block with inline pills: the separators between the links stay out of view without splitting text */
.link-pills .link{display:inline-flex;margin-inline-end:.5rem;margin-block-end:.4rem;font-size:.85rem;padding:.4rem .9rem;border:1px solid var(--rule);border-radius:999px;background:var(--card);box-shadow:var(--shadow-1);white-space:normal}
.link-pills .link:hover{text-decoration:none;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--rule))}
/* trust pages: accent bullets, sub-labels as pills, criteria as cards, contact routes with pill addresses */
.rules li::marker,.hub-prose ul li::marker{color:var(--accent)}
.trust-sub{display:inline-flex;padding:.2rem .7rem;border-radius:999px;background:var(--panel);border:1px solid var(--rule);font-size:.8rem;font-weight:700;color:var(--sec)}
.trust-crit{padding:1.2rem 1.25rem;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-1)}
.trust-crit h3 .num{padding:.1rem .55rem;border-radius:999px;font-size:.85rem;color:var(--on-accent);background-color:var(--accent);background-image:var(--grad-accent);vertical-align:middle}
.route{box-shadow:var(--shadow-1)}
.route .link{display:inline-flex;margin-block-start:.4rem;padding:.4rem .85rem;border:1px solid var(--rule);border-radius:999px;background:var(--panel);font-size:.85rem}
.route .link:hover{text-decoration:none;background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--rule))}
@media(max-width:720px){.next-card{padding:1.1rem}.trust-crit{padding:1rem}.guide-row{grid-template-columns:minmax(0,1fr)}.guide-row .pill,.guide-row .pill-na{justify-self:start;grid-row:1}}

/* 21 ─ claim provenance (2026-09-16). A figure carries how we know it: a quiet underline in prose, a word in the sources table.
   Decoration only — the tier itself is data-tier, read by check_scores.py, and spelled out in the sources block. */
.cf{font-variant-numeric:tabular-nums;unicode-bidi:isolate;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:3.5px;text-decoration-color:var(--rule-strong)}
.cf[data-tier="reported"]{text-decoration-color:var(--warn)}
.cf[data-tier="absent"]{text-decoration-style:dashed;color:var(--sec)}
.claim-sources h2{font-size:1.25rem}
.claim-sources>.container>p{color:var(--sec);max-width:68ch;margin-block:.35rem 1rem}
.claim-table th[scope="row"]{font-weight:400;line-height:1.7;min-width:14rem}
/* max-width is ignored on a table cell in auto layout, so the sentence is capped on an inner block */
.claim-say{display:block;max-width:34rem;white-space:normal}
/* a two-column points table has no need of the wide-table min-width, and inside the prose column it only clips */
.chapter .table,#calc .table{min-width:0}
/* the claim sentence is long; without a cap it eats the table and pushes tier, source and date out of view */
.claim-table td{vertical-align:top;max-width:15rem;overflow-wrap:anywhere}
.claim-table td:not(.date){white-space:normal}
/* same trap as the sentence: a table cell ignores max-width in auto layout, so cap the inner element */
.claim-table td>a,.claim-table td>.claim-venues{display:inline-block;max-width:15rem;white-space:normal;overflow-wrap:anywhere}
.claim-table td.date{white-space:nowrap;color:var(--sec);font-variant-numeric:tabular-nums}
/* Narrow: four columns cannot survive 390px, and a source nobody can reach is not a source. Each row becomes a card
   and every cell names its own field from data-label, so there is still only one markup path. */
@media(max-width:620px){
  .claim-sources .tscroll,.claim-sources .tablewrap{overflow:visible}
  .claim-sources .tablewrap{border:0;box-shadow:none;background:none}
  .claim-table,.claim-table tbody,.claim-table tr,.claim-table th,.claim-table td{display:block;width:auto}
  .claim-table{min-width:0}   /* .table sets min-width:960px for the wide layout; a stack of cards must not inherit it */
  .claim-table thead{display:none}
  .claim-table tr{border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--card);
    padding:14px;margin-block-end:12px;box-shadow:var(--shadow-1)}
  .claim-table th[scope="row"]{min-width:0;padding:0 0 10px;border:0}
  .claim-say{max-width:none}
  .claim-table td{max-width:none;padding:5px 0;border:0;white-space:normal}
  .claim-table td>a,.claim-table td>.claim-venues{max-width:none;display:inline}
  .claim-table td::before{content:attr(data-label) " · ";color:var(--sec);font-size:.82rem}
  .claim-table td.date{white-space:normal}
}

.claim-tier{display:inline-block;padding:.12rem .5rem;border-radius:999px;font-size:.82rem;font-weight:700;line-height:1.5;background:var(--rule);color:var(--sec)}
.claim-tier[data-tier="measured"],.claim-tier[data-tier="captured"]{background:var(--accent-soft);color:var(--accent-text)}
.claim-tier[data-tier="reported"]{background:var(--warn-soft);color:var(--warn)}
.claim-tier[data-tier="absent"]{background:var(--bad-soft);color:var(--bad)}
.claim-venues{color:var(--sec)}

/* 22 ─ placeholder-data band (2026-09-16). Generated from the page's provenance marker, so it cannot claim the data is
   real; it disappears on its own when the marker says real. Quiet but unmissable: the reader must not learn this from a trust page. */
.datastate{background:var(--warn-soft);border-block-end:1px solid var(--rule);color:var(--text)}
.datastate>.container{display:block;padding-block:.6rem;font-size:.9rem;line-height:1.6}
.datastate b{color:var(--warn);font-weight:700}
.datastate b::after{content:"·";margin-inline:.45rem;color:var(--sec);font-weight:400}
.datastate span{color:var(--sec)}
.datastate a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* 23 ─ a card placed by editorial decision says so beside its rank (2026-09-16) */
.placed{display:inline-block;margin-inline-start:.4rem;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--warn-soft);color:var(--warn);vertical-align:middle}

/* 24 ─ hub score article (2026-09-16): what the field's pages say, then each criterion across every provider */
.field-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem;margin-block:1.25rem;padding:0;list-style:none}
.field-stat li{display:grid;gap:.15rem;padding:1rem 1.1rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.fs-n{font-size:2rem;font-weight:700;line-height:1.1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.fs-h{font-weight:700;font-size:.95rem}
.fs-s{color:var(--sec);font-size:.85rem;line-height:1.5}
.sc-chapter{padding-block:1.25rem;border-block-start:1px solid var(--rule)}
.sc-chapter .cn-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.sc-chapter .cn-head h3{font-size:1.15rem;margin:0}
.sc-chapter .cn-head .bar{flex:1;min-width:6rem}
.spread-list{display:grid;gap:.35rem;margin-block:.9rem;padding:0;list-style:none;counter-reset:sp}
.spread-list li{display:grid;grid-template-columns:minmax(6rem,9rem) minmax(0,1fr) 2.6rem;align-items:center;gap:.6rem}
.spread-list .sp-name{font-size:.9rem;color:var(--sec);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spread-list li[data-top] .sp-name{color:var(--text);font-weight:700}
.spread-list b.num{text-align:end;font-size:.9rem}
.sc-gap{color:var(--sec);font-size:.92rem}
@media(max-width:560px){.spread-list li{grid-template-columns:minmax(5rem,7rem) minmax(0,1fr) 2.4rem}}

/* ---------- 25. Wide logo lockups ----------
   Most hosting companies publish a horizontal wordmark, not a square symbol: Bluehost is 5.7:1, hosting.com 5.9:1.
   Squeezed into the square tile the words render about five pixels tall and the mark is unreadable — and SiteGround's
   published terms forbid changing "the design, scale, or colour" of theirs. So the slot widens to fit the mark as it
   was drawn, instead of the mark being reshaped to fit the slot. Marks that are square keep the square tile. */
.logo-wide{width:110px;border-radius:12px}
.logo-wide img{padding:8% 10%}
.row .logo-wide{width:132px;border-radius:14px}
@media(max-width:560px){.logo-wide,.row .logo-wide{width:92px}}

/* ---------- 26. The companies, one by one ----------
   One block per company below the ranking. It carries what we can stand behind: their own words quoted with the
   address they came from, the whole cost, the small print, and what the service looks like from here. No product
   screenshots and no "my experience with", because we have not bought a plan. */
.bd-list{display:grid;gap:28px}
.bd{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--card);padding:22px;position:relative}
.bd-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:14px}
.bd-head .rank{position:static;background:none;padding:0;font-size:.95rem;font-weight:700;color:var(--sec)}  /* the corner pill's dark ground came with .rank and was never reset: grey ink on it read 3.7:1 in light and 2.0:1 in dark */
.bd-id{min-width:0}
.bd-id h3{margin:0;font-size:1.35rem;line-height:1.25}
.bd-kicker{margin:.25rem 0 0;color:var(--sec);font-size:.92rem}
.bd-score{text-align:center;line-height:1.1}
.bd-score b{font-size:1.9rem;display:block}
.bd-score span{font-size:.8rem;color:var(--sec)}
.bd-dek{margin:0 0 14px;font-size:1.05rem;line-height:1.65}
.bd-subs{margin-bottom:16px}
.receipt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;margin:0 0 16px}
.receipt>div{background:var(--card);padding:10px 12px;min-width:0}
.receipt dt{font-size:.78rem;color:var(--sec);margin:0 0 4px}
.receipt dd{margin:0;font-weight:700;font-size:1rem}
/* A figure the company never published is not a figure: it sits beside real numbers and must not
   compete with them for the eye. */
.receipt dd.na{font-weight:400;font-size:.9rem;color:var(--sec)}
.bd .ev{margin:0 0 6px}
.ev-fine{margin:0 0 16px;color:var(--sec);font-size:.93rem;line-height:1.6}
.bd-prose p{margin:0 0 12px}
.bd-pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:16px 0}
.bd-pc h4{margin:0 0 8px;font-size:.92rem;color:var(--sec);font-weight:700}
.fitlist{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.fitlist li{font-size:.95rem;line-height:1.6}
.fit-yes b{color:var(--good)}.fit-no b{color:var(--sec)}
.bd-nm{margin:0 0 14px}
.bd-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.evbase{display:block;margin:10px 0 0;font-size:.9rem;line-height:1.7;color:var(--sec);max-width:62ch}
.evbase-dek{font-size:1.02rem;color:var(--text)}
.ch-basis{display:block;margin:0 0 14px;font-size:.86rem;line-height:1.65;color:var(--sec)}
.faq-item{border-block-end:1px solid var(--rule);padding:14px 0}
.faq-item summary{cursor:pointer;font-weight:700}
.faq-item .faq-a{padding-block-start:8px;color:var(--sec)}
.vatline{margin:10px 0 0;font-size:.86rem;line-height:1.65;color:var(--sec)}
.vatline .num{color:var(--text);font-weight:700}
.bd .checked{display:block;margin:12px 0 0;font-size:.82rem;color:var(--sec)}
@media(max-width:860px){.receipt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .bd{padding:16px}
  .bd-head{grid-template-columns:auto auto minmax(0,1fr);row-gap:10px}
  .bd-score{grid-column:1/-1;text-align:start;display:flex;align-items:baseline;gap:8px}
  .bd-score b{font-size:1.5rem;display:inline}
  .bd-pc{grid-template-columns:minmax(0,1fr);gap:12px}
  .bd-act .btn{flex:1 1 100%;justify-content:center}
}

/* 20. A placed position. The rank badge says so, and the card carries the score the reader would
   otherwise have seen. Muted, never celebratory: it is a caveat, not a ribbon. */
.rank-placed{font-weight:400;font-size:.72rem;opacity:.85;margin-inline-start:.35rem}
.note-placed{display:flex;gap:.5rem;align-items:flex-start;margin:0 0 .6rem;color:var(--warn);font-size:.9rem}
.note-placed svg{flex:none;margin-block-start:.15rem}

/* 16. Alternatives on a review page: two computed picks, side by side. */
.alt-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.alt-list>li{border:1px solid var(--rule);border-radius:var(--r);padding:1.1rem 1.2rem;background:var(--card);display:flex;flex-direction:column;gap:.5rem}
.alt-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.alt-top h3{margin:0;font-size:1.05rem}
.alt-score{font-weight:700;font-size:1.35rem;color:var(--accent-text)}
.alt-list p{margin:0;color:var(--sec)}
.alt-line{font-size:.9rem}
.alt-list .link{margin-top:auto;align-self:start}

/* 17. The reading strip under a page title: what was read, and when.
   It replaces a row of rounded chips with icons in bubbles -- a shape that says nothing about this
   site and would sit on any page anywhere. What a measurement site puts under its title is the head
   of a record: a label, the reading beneath it, hairlines holding the columns apart.
   The divider between columns is the brand mark itself, two stacked bars -- an equals sign -- drawn
   here in CSS rather than fetched as an icon, because the promise under every number on this site is
   that the two sides of it balance.
   The grid is fixed at three columns rather than wrapped, so a divider can never land at the start
   of a row: with flex-wrap the mark appeared at the left edge of the second line. */
.reading{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin:1.15rem 0 0;padding:.9rem 0 0;border-block-start:1px solid var(--rule)}
.reading>li{display:flex;flex-direction:column;gap:.12rem;position:relative;padding-block:.55rem;padding-inline-end:1.15rem}
.reading>li:nth-child(3n+1){padding-inline-start:0}
.reading>li:not(:nth-child(3n+1)){padding-inline-start:1.15rem}
.reading>li:nth-child(n+4){border-block-start:1px solid var(--rule)}
.reading>li:not(:nth-child(3n+1))::before{content:"";position:absolute;inset-inline-start:0;top:50%;
  margin-block-start:-3px;width:10px;height:6px;
  background:linear-gradient(currentColor 0 1.5px,transparent 1.5px 4.5px,currentColor 4.5px 6px);
  color:color-mix(in srgb,var(--sec) 60%,transparent)}
.reading .r-k{font-size:.7rem;line-height:1.35;color:var(--sec)}
.reading .r-v{font-size:.86rem;line-height:1.5;color:var(--text);font-weight:600}
.reading .r-v time,.reading .r-v .by{color:inherit;font-weight:inherit}
@media (max-width:720px){
  .reading{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reading>li{padding-block:.5rem;padding-inline-end:.9rem}
  .reading>li:nth-child(3n+1){padding-inline-start:1.15rem}
  .reading>li:not(:nth-child(3n+1))::before{display:none}
  .reading>li:nth-child(n+4){border-block-start:0}
  .reading>li:nth-child(odd){padding-inline-start:0}
  .reading>li:nth-child(even){padding-inline-start:.9rem}
  .reading>li:nth-child(even)::before{content:"";display:block;position:absolute;inset-inline-start:0;top:50%;
    margin-block-start:-3px;width:10px;height:6px;
    background:linear-gradient(currentColor 0 1.5px,transparent 1.5px 4.5px,currentColor 4.5px 6px);
    color:color-mix(in srgb,var(--sec) 60%,transparent)}
  .reading>li:nth-child(n+3){border-block-start:1px solid var(--rule)}
  .reading .r-v{font-size:.82rem}
}
@media (max-width:430px){
  .reading{grid-template-columns:1fr}
  /* the two- and three-column indents both still match at this width, so reset them by name */
  .reading>li,.reading>li:nth-child(odd),.reading>li:nth-child(even),.reading>li:nth-child(3n+1){padding-inline:0}
  .reading>li:nth-child(even)::before,.reading>li:not(:nth-child(3n+1))::before{display:none}
  .reading>li+li{border-block-start:1px solid var(--rule)}
}

[dir="rtl"] .cta{background-position:right bottom 14px,right bottom 48px,right bottom 82px}


/* The header band. What stood here was a radial gradient with a corner glow and a 44px square grid
   over it -- the default composition of every product page on the web, and four attempts to replace
   the grid with something of our own all failed the same way: a scale with nothing marked on it, an
   arc with no values, bars at invented lengths. On a site whose promise is that every quantity
   recomputes from a published figure, an ornamental quantity is the one decoration that contradicts
   the product. A header may carry structure. It may not carry quantity.
   So the band carries none. It is a flat ground a few percent off the page, opened by one rule at
   the mark's weight and closed by a hairline, with the breadcrumb, the title and the reading strip
   living in the gap between them. The logo is two bars with a gap; this is that mark at the scale of
   a page, and the two rules are deliberately unequal because the promise and the delivery are the
   two things this site exists to compare.
   Both rules run full bleed, so there is no start or end axis and nothing to mirror. */
.page-head::before,.review-head::before{content:"";position:absolute;z-index:-1;inset-inline:0;
  inset-block-start:0;block-size:3px;background:var(--rail)}


/* The homepage hero. It has been a dot field, a square grid, a ghosted ranking and a two-tone split,
   and every one of them was something added on top of a band that did not need it. The hero already
   holds the argument and the real scorecard side by side; that is the composition.
   So it is the same device the inner headers use and nothing else: one flat ground, opened by a rule
   at the mark's weight. No texture, no glow, no second colour, and no start or end axis to mirror. */
.hero--sky{background:var(--head)}
.hero--sky::before{content:"";position:absolute;z-index:-1;inset-inline:0;inset-block-start:0;
  block-size:3px;background:var(--rail)}

/* The focus ring is drawn in accent ink and offset outwards, which lands it INSIDE the dark band
   at 2.66:1. On that surface the ring has to be the band's own text colour. */
.cta :focus-visible{outline-color:var(--band-text)}
/* Removing the scrollbar when the drawer opens reflowed the whole page by 15px. */
html{scrollbar-gutter:stable}