/* AI Price Watch, Oct 17 redesign: a calm data tool. One sans family, light + dark, tables first, labels quiet.
   Tokens only below the token block: spacing 4/8/12/16/24/32/48/64, type 13/14/16/18/20/24/32, two weights (400/600, 700 for H1). */
:root{
 color-scheme:light;
 --bg:#fff;--surface:#f5f7f6;--surface2:#e9eeeb;--raise:#fff;--line:#e1e6e3;--line2:#c6cfca;
 --text:#15201a;--muted:#55615a;--faint:#68746d;
 --accent:#14532d;--accent-h:#0d3d20;--accent-soft:#e8f2eb;--btn:#14532d;--btn-h:#0d3d20;--btn-fg:#fff;--focus:#1d4ed8;
 --ok:#166534;--ok-dot:#16a34a;--part:#8a4b00;--part-dot:#d97706;--partb:#fdf3dc;--rev:#b42318;--rev-dot:#dc2626;--revb:#fdecea;--okb:#e8f2eb;
 --amb-bg:#fef3c7;--amb-fg:#78350f;--amb-line:#e7a521;--team-bg:#f1e8fb;--team-fg:#5b21b6;--save-bg:#e6f4ea;--save-fg:#14532d;
 --zebra:#f8faf9;--hover:#f0f5f2;--alert-part:#4d2c00;--alert-rev:#5e0f0f;
 --sh1:0 1px 2px rgb(16 24 20/.06),0 1px 1px rgb(16 24 20/.04);--sh2:0 12px 32px rgb(16 24 20/.14),0 2px 6px rgb(16 24 20/.08);
 --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --fs-xs:13px;--fs-s:14px;--fs-b:16px;--fs-l:18px;--fs-3:20px;--fs-2:24px;--fs-1:32px;
 --r:8px;--r-s:6px;--m:24px}
/* dark: soft charcoal surfaces (no pure black), the green lifted for contrast */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
 color-scheme:dark;
 --bg:#121417;--surface:#1a1d21;--surface2:#24282d;--raise:#1d2125;--line:#2b3036;--line2:#434a52;
 --text:#e7eaec;--muted:#a5aeb5;--faint:#959ea6;
 --accent:#6fd39a;--accent-h:#9be3b9;--accent-soft:#1b3125;--btn:#23794a;--btn-h:#2b8a56;--btn-fg:#fff;--focus:#82aaff;
 --ok:#6fd39a;--ok-dot:#3cc37a;--part:#f0b35a;--part-dot:#e0a03c;--partb:#30260f;--rev:#ff9b91;--rev-dot:#f06b5f;--revb:#381d1b;--okb:#1b3125;
 --amb-bg:#3a2c0c;--amb-fg:#fcd58a;--amb-line:#9a6a16;--team-bg:#2c2340;--team-fg:#cdb8f7;--save-bg:#1b3527;--save-fg:#94e2b5;
 --zebra:#16191c;--hover:#1f2428;--alert-part:#f6dcae;--alert-rev:#ffd0cb;
 --sh1:0 1px 2px rgb(0 0 0/.35);--sh2:0 12px 32px rgb(0 0 0/.5),0 2px 6px rgb(0 0 0/.4)}}
:root[data-theme=dark]{
 color-scheme:dark;
 --bg:#121417;--surface:#1a1d21;--surface2:#24282d;--raise:#1d2125;--line:#2b3036;--line2:#434a52;
 --text:#e7eaec;--muted:#a5aeb5;--faint:#959ea6;
 --accent:#6fd39a;--accent-h:#9be3b9;--accent-soft:#1b3125;--btn:#23794a;--btn-h:#2b8a56;--btn-fg:#fff;--focus:#82aaff;
 --ok:#6fd39a;--ok-dot:#3cc37a;--part:#f0b35a;--part-dot:#e0a03c;--partb:#30260f;--rev:#ff9b91;--rev-dot:#f06b5f;--revb:#381d1b;--okb:#1b3125;
 --amb-bg:#3a2c0c;--amb-fg:#fcd58a;--amb-line:#9a6a16;--team-bg:#2c2340;--team-fg:#cdb8f7;--save-bg:#1b3527;--save-fg:#94e2b5;
 --zebra:#16191c;--hover:#1f2428;--alert-part:#f6dcae;--alert-rev:#ffd0cb;
 --sh1:0 1px 2px rgb(0 0 0/.35);--sh2:0 12px 32px rgb(0 0 0/.5),0 2px 6px rgb(0 0 0/.4)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font:var(--fs-b)/1.5 var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-soft);color:var(--text)}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
a:hover{color:var(--accent-h);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
small{font-size:var(--fs-s)}
h1,h2,h3{line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:var(--fs-1);font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--fs-2);font-weight:600;letter-spacing:-.01em;margin:48px 0 16px}
h3,.h3{font-size:var(--fs-3);font-weight:600}
p{margin:0 0 16px}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--m)}
.mob{display:none}
.sr{position:absolute!important;width:1px!important;height:1px!important;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
[id]{scroll-margin-top:16px}
button,select,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--r-s)}.skip:focus{left:16px}
html[data-cur=usd] .cad,html[data-cur=cad] .usd{display:none}
.muted,.sub{color:var(--muted)}
.sub{display:block;font-size:var(--fs-s);font-weight:400}
.na{color:var(--muted)}
.free{color:var(--ok);font-weight:600}
.num,.cv,.stats b,time{font-variant-numeric:tabular-nums}

/* ---------- header: brand, nav (Tools menu + 3 links), currency + theme */
.top{position:relative;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:24px;min-height:60px}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);text-decoration:none;font-weight:700;font-size:var(--fs-l);white-space:nowrap}
.brand:hover{color:var(--text)}
.nav{display:flex;align-items:center;gap:4px;flex:1}
.nav>a,.menu>summary{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:var(--r-s);font-weight:500;white-space:nowrap}
.nav>a:hover,.menu>summary:hover{color:var(--text);background:var(--surface)}
.nav>a[aria-current],.menu>summary.cur{color:var(--text);font-weight:600}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{background:var(--surface);color:var(--text)}
.menu[open]>summary svg{transform:rotate(180deg)}
.menu-p{position:absolute;top:calc(100% - 6px);margin-left:-8px;min-width:260px;padding:8px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);display:grid;z-index:30}
.menu-p a{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:var(--r-s);color:var(--text);text-decoration:none}
.menu-p a:hover{background:var(--surface)}
.menu-p a[aria-current]{font-weight:600;color:var(--accent)}
.menu-p .n{color:var(--muted);font-size:var(--fs-s)}
.menu-p hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.tgl{display:flex;align-items:center;gap:8px}
.thm{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line2);border-radius:var(--r-s);background:var(--bg);color:var(--text);cursor:pointer}
.thm:hover{background:var(--surface)}
.thm .i-sun{display:none}
.thm[aria-pressed=true] .i-sun{display:block}.thm[aria-pressed=true] .i-moon{display:none}

/* toggle groups: pressed look from html[data-*] so it's right before scripts run, and from aria-pressed for in-page filters */
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-s);overflow:hidden;background:var(--bg)}
.seg button{font:500 var(--fs-s)/1 var(--font);min-height:40px;padding:0 12px;border:0;border-left:1px solid var(--line2);background:none;color:var(--text);cursor:pointer;white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--surface)}
.seg button:focus-visible{outline-offset:-3px}
.seg [data-b][aria-pressed=true],
html[data-cur=usd] [data-set=cur][data-v=usd],html[data-cur=cad] [data-set=cur][data-v=cad],
html[data-bill=m] [data-set=bill][data-v=m],html[data-bill=y] [data-set=bill][data-v=y]{background:var(--btn);color:var(--btn-fg)}
.curx{font-size:var(--fs-s);font-weight:600;color:var(--muted);white-space:nowrap}

/* buttons: one solid primary, an outline secondary, link-style tertiary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:var(--r-s);border:1px solid var(--btn);background:var(--btn);color:var(--btn-fg);font:600 var(--fs-b) var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:var(--sh1)}
.btn:hover{background:var(--btn-h);border-color:var(--btn-h);color:var(--btn-fg)}
.btn-2{background:var(--bg);color:var(--accent);border-color:var(--line2);box-shadow:none}
.btn-2:hover{background:var(--accent-soft);color:var(--accent-h);border-color:var(--accent)}
.btn:disabled{background:var(--surface2);border-color:var(--line2);color:var(--muted);cursor:not-allowed;box-shadow:none}
.lnk{font:inherit;color:var(--accent);background:none;border:0;min-height:44px;padding:0 4px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lnk:hover{color:var(--accent-h)}
.lbl{font-size:var(--fs-s);color:var(--part)}

/* status: long form (about page, compare picker) and the quiet table dot */
.b{display:inline;font-size:var(--fs-s);line-height:1.35;color:var(--ok)}
.b:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--ok-dot);vertical-align:1px}
.b-part{color:var(--part)}.b-part:before{background:var(--part-dot)}
.b-rev{color:var(--rev)}.b-rev:before{background:var(--rev-dot)}
.st{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap;vertical-align:1px;cursor:help}
.st:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-dot);flex:none}
.st-dot{margin-left:6px}
.st-part{color:var(--part)}.st-part:before{background:var(--part-dot)}
.st-rev{color:var(--rev)}.st-rev:before{background:var(--rev-dot)}
.chk{font-size:var(--fs-s);color:var(--muted);margin:12px 0 0;max-width:90ch}
.legend{display:inline}
.chk .legend:before{content:" "}

/* change tags + the one amber "changed" pill */
.tag{display:inline-block;font-size:var(--fs-xs);font-weight:600;line-height:1.4;padding:1px 8px;border-radius:4px;background:var(--surface2);color:var(--text);white-space:nowrap}
.tag-w{background:var(--revb);color:var(--rev)}.tag-g{background:var(--okb);color:var(--ok)}
.chg{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;font-size:var(--fs-xs);font-weight:600;line-height:1.4;padding:1px 8px;border-radius:999px;background:var(--amb-bg);color:var(--amb-fg);border:1px solid var(--amb-line);text-decoration:none;white-space:nowrap}
.chg::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amb-line)}
.chg:hover{color:var(--amb-fg);filter:brightness(.97)}
th .chg{display:flex;width:max-content}

/* ---------- home */
.intro{padding:40px 0 24px;max-width:820px}
.intro h1{margin-bottom:12px}
.lead{font-size:var(--fs-l);color:var(--muted);max-width:64ch;margin:0 0 24px}
.hsrch{display:flex;gap:8px;align-items:stretch;max-width:680px}
.hsrch .srch{flex:1}
.srch{position:relative}
.srch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
input,select{font:var(--fs-b) var(--font);color:var(--text);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-s);min-height:44px;padding:8px 12px}
input::placeholder{color:var(--faint)}
input:hover,select:hover{border-color:var(--muted)}
input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
input:disabled{background:var(--surface);color:var(--muted);cursor:not-allowed}
.srch input{width:100%;padding-left:42px;min-height:48px;font-size:var(--fs-l);box-shadow:var(--sh1)}
.stats{list-style:none;display:flex;flex-wrap:wrap;margin:0 0 24px;padding:0;font-size:var(--fs-s);color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats li{padding:12px 24px 12px 0;margin-right:24px;border-right:1px solid var(--line)}
.stats li:last-child{border-right:0;margin-right:0}
.stats b{color:var(--text);font-weight:600;font-size:var(--fs-b)}
.stats a{color:inherit;text-decoration:none}.stats a:hover{color:var(--accent)}.stats a:hover b{text-decoration:underline}
.stats [data-stat=cheap] b a{color:var(--text)}
.finder{display:grid;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 var(--fs-s)/1 var(--font);min-height:40px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:var(--bg);color:var(--text);cursor:pointer}
.chip .n{color:var(--muted);margin-left:4px;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--accent);background:var(--accent-soft)}
.chip[aria-pressed=true]{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}.chip[aria-pressed=true] .n{color:inherit}
.rbar{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:24px 0 12px}
.rctl{display:flex;align-items:center;gap:8px 20px;margin-left:auto;flex-wrap:wrap}
.fgrp{display:flex;align-items:center;gap:8px}
.flab{font-size:var(--fs-s);font-weight:600;color:var(--muted)}
#count{margin:0;font-weight:600}
#count:focus{outline:none}#count:focus-visible{outline:2px solid var(--focus)}
.fbtn{display:none}
.msort{display:none;align-items:center;gap:8px}
.fchk{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:var(--fs-s);white-space:nowrap;cursor:pointer}
.fchk input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--btn)}
.morerow{margin:16px 0 0;text-align:center}
.empty{padding:32px 20px;background:var(--surface);border-radius:var(--r);text-align:center}
.tnote{font-size:var(--fs-s);color:var(--muted);margin:12px 0 0;max-width:90ch}
.alerts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:16px 48px;align-items:center;margin:64px 0 0;padding:32px;background:var(--surface);border-radius:12px}
.alerts h2{margin:0 0 8px;font-size:var(--fs-3)}
.alerts p{margin:0;color:var(--muted);max-width:60ch}
.alf{display:flex;gap:8px}
.alf input{flex:1;min-width:0}
.recent{margin:64px 0 0;max-width:820px}

/* data tables: no grid lines, zebra + hover, right-aligned tabular numbers */
.tw{border-radius:var(--r);max-width:100%;overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
.dt th,.dt td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.dt tbody tr:last-child>*{border-bottom:0}
.dt thead th{position:sticky;top:0;z-index:2;background:var(--surface);font-size:var(--fs-s);font-weight:600;color:var(--muted);white-space:nowrap;vertical-align:bottom;border-bottom:0}
.dt thead th:first-child{border-top-left-radius:var(--r)}.dt thead th:last-child{border-top-right-radius:var(--r)}
.dt tbody th{font-weight:600}
.dt thead small{font-weight:400}
@media (min-width:768px){.rt tbody tr.z>*{background:var(--zebra)}}
.dt tbody tr:hover>*{background:var(--hover)}
.num{text-align:right!important;white-space:nowrap}
th[data-k] button{font:inherit;color:inherit;background:none;border:0;padding:4px 6px;margin:-4px -6px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-align:inherit}
th[data-k] button:hover{color:var(--text);background:var(--surface2)}
th[data-k] button:after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;opacity:.35;margin-top:4px}
th[aria-sort] button{color:var(--text)}
th[aria-sort=ascending] button:after{border-top-color:transparent;border-bottom-color:currentColor;margin:0 0 4px;opacity:1}
th[aria-sort=descending] button:after{opacity:1}
.rt thead .num small{display:block}
.rt tbody th a{font-size:var(--fs-b)}
.tn{display:inline-flex;align-items:center;flex-wrap:wrap}
/* one price column at a time: the billing toggle picks monthly or yearly */
html[data-bill=m] .rt .col-y,html[data-bill=y] .rt .col-m{display:none}
.rt td.num{font-weight:600}
.rt td.num .yt{font-weight:400}
.rt .fr{width:7em}
.cht td:nth-child(n+3):not(.src-c){min-width:14ch}
.cht td[data-l=Date]{white-space:nowrap}

/* change feed */
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.sh h2{margin:0}
.sh a{font-size:var(--fs-s)}
main>.sh{margin:48px 0 16px;flex-wrap:wrap}
.chl{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.chl li{padding:16px 0;border-bottom:1px solid var(--line)}
.chl-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin:0 0 4px}
.chl-h time{font-size:var(--fs-s);color:var(--muted)}
.chl-d{margin:0;display:flex;flex-wrap:wrap;gap:4px 8px}.chl-d .was{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line2)}
.chl-n{margin:4px 0 0;font-size:var(--fs-s);color:var(--muted)}
.chl-s{margin:4px 0 0;font-size:var(--fs-s)}
.chl-base{font-size:var(--fs-s);margin:12px 0 0}
.srcl{white-space:nowrap}
.links{list-style:none;margin:0;padding:0;columns:2 240px;column-gap:24px}
.links li{break-inside:avoid;padding:6px 0}
.lrow{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none}

/* ---------- inner pages */
.crumb{margin:24px 0 8px;font-size:var(--fs-s)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;color:var(--muted)}
.crumb li+li:before{content:"/";margin-right:4px;color:var(--line2)}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--text);text-decoration:underline}.crumb [aria-current]{color:var(--text)}
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin:0 0 24px}
.phead h1{margin:0}
.h1s{font-size:.6em;font-weight:400;color:var(--muted);letter-spacing:0}
.by{margin:8px 0 0;color:var(--muted)}
.phead .lead{margin:8px 0 0}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.facts{display:flex;flex-wrap:wrap;gap:16px 40px;margin:0 0 24px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts dt{font-size:var(--fs-s);color:var(--muted);margin-bottom:2px}
.facts dd{margin:0;font-weight:600}
.facts dd small,.facts dd .sub{font-weight:400}
.note{max-width:75ch}
.src{max-width:80ch;color:var(--muted)}
.alert{padding:12px 16px;margin:0 0 16px;border-radius:var(--r-s);border:1px solid;max-width:90ch}
.alert-rev{background:var(--revb);border-color:color-mix(in srgb,var(--rev-dot) 45%,transparent);color:var(--alert-rev)}
.alert-part{background:var(--partb);border-color:color-mix(in srgb,var(--part-dot) 45%,transparent);color:var(--alert-part)}
.alert a{color:inherit}
main>h1:first-child{margin:32px 0 8px}
.nf{padding:24px var(--m) 0}
.tw+p,.tw+.muted{margin-top:12px}
.prose{max-width:70ch}.prose ul{padding-left:20px}.prose li{margin:8px 0}
.pick{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:16px;margin-bottom:8px;background:var(--surface);border-radius:var(--r)}
.pick h2{margin:0}.pick p{margin:4px 0 0;color:var(--muted)}

/* tool page: verdict first, one fact line, plans table, everything else folded */
.verdict{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;margin:0 0 24px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.verdict>div{background:var(--raise);padding:16px}
.verdict b{display:flex;align-items:center;gap:8px;font-size:var(--fs-s);margin:0 0 4px}
.verdict b:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok-dot)}
.verdict .v-skip b:before{background:var(--rev-dot)}.verdict .v-free b:before{background:var(--muted)}
.verdict p{margin:0}
.verdict .v-worth{background:var(--accent-soft)}
.plans-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:40px 0 12px}
.plans-h h2{margin:0}
.pt td.lim{font-size:var(--fs-s);color:var(--muted);min-width:16em;max-width:36ch}
.pt tbody th{min-width:9em}
details.more{margin:48px 0 0;border-top:1px solid var(--line)}
details.more>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-size:var(--fs-3);font-weight:600}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary .sub{display:inline;font-size:var(--fs-s);font-weight:400;margin-left:8px}
details.more>summary:after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:-6px 6px 0 0}
details.more[open]>summary:after{transform:rotate(-135deg);margin-top:4px}
details.more>summary:hover{color:var(--accent)}
details.more>div>h2:first-child{margin-top:8px}
.xu{color:var(--muted)}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pcard{background:var(--surface);border-radius:var(--r);padding:16px}
.pcard h3{font-size:var(--fs-l);margin:0 0 8px}
.pcard dl{margin:0;display:grid;gap:8px}
.pcard dt{font-size:var(--fs-s);color:var(--muted)}
.pcard dd{margin:0}
.pcard ul{margin:0;padding-left:18px}.pcard li{margin:2px 0}
.npl{font-size:var(--fs-s)}
.tp{max-width:90ch}
.fa{table-layout:fixed}.fa thead th:nth-child(1){width:26%}.fa thead th:nth-child(2){width:17%}.fa thead th:nth-child(3){width:23%}
.toc{line-height:2}
.ctas{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.vs{font-size:var(--fs-s);min-width:12em}
.provw{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-s);color:var(--muted)}
.provw select{font-size:var(--fs-s);min-height:40px;padding:4px 8px;max-width:100%}
.h3.sub-h,h3.sub-h{margin:32px 0 12px}

/* versus: pick cards, then one aligned plan table */
.pickc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 8px}
.pk{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)}
.pk h2{font-size:var(--fs-3);margin:0}
.pk p{margin:0}
.pk dl{display:flex;flex-wrap:wrap;gap:8px 24px;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line)}
.pk dt{font-size:var(--fs-s);color:var(--muted)}
.pk dd{margin:0;font-weight:600}
.pk .pkl{font-size:var(--fs-s)}
.bt th[scope=row]{width:9em;color:var(--muted);font-size:var(--fs-s)}
.bt td{min-width:12em}
.bt .bp{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.bt .bp+.bp{border-top:1px dashed var(--line)}
.bt .bp b{font-weight:600}
.bt .bpv{text-align:right;white-space:nowrap}
.bt .bpv .yt{white-space:normal}

/* side-by-side comparison (picker + folded detail on versus pages) */
.cwrap{overflow-x:auto;overscroll-behavior-x:contain;background:var(--bg);border-radius:var(--r);-webkit-overflow-scrolling:touch}
.ct{table-layout:fixed;min-width:calc(180px + var(--n,3)*200px)}
.ct>*>tr>th,.ct>*>tr>td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ct>tbody>tr:last-child>*{border-bottom:0}
.ct>thead>tr>*{background:var(--surface)}
.ct>thead th a{font-size:var(--fs-l);font-weight:600}
.ct>*>tr>:first-child{position:sticky;left:0;z-index:1;background:var(--surface);width:180px;font-size:var(--fs-s);font-weight:600;color:var(--muted)}
.ct>tbody>tr>td{width:calc((100% - 180px)/var(--n,3))}
.ct .pr{font-size:var(--fs-l)}
.mini{width:100%;font-size:var(--fs-s)}
.mini th,.mini td{padding:6px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.mini td{padding-left:12px}
.mini thead th{color:var(--muted);font-weight:400;white-space:normal;vertical-align:bottom}
.mini tbody th{font-weight:600;overflow-wrap:anywhere}
.mini .tb{display:table;margin-top:2px}
.mini tbody tr:last-child>*{border-bottom:0}

/* compare picker: type-to-search combobox */
.picker{background:var(--surface);border-radius:var(--r);padding:16px;margin:8px 0 24px}
.picker h2{margin:0 0 12px}
.pkrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.selchips{display:contents;list-style:none}
.selchips li{display:inline-flex;align-items:center;min-height:44px;padding:0 0 0 16px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-weight:600;font-size:var(--fs-s)}
.selchips button{width:44px;height:44px;border-radius:50%;border:0;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.selchips button:hover{background:rgb(255 255 255/.18)}
.selchips button:focus-visible{outline-color:#fff;outline-offset:-2px}
.cbx{position:relative;flex:1 1 260px;max-width:360px}
.cbx input{width:100%}
.cbl{position:absolute;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;list-style:none;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);max-height:320px;overflow:auto;z-index:10}
.cbl li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-s);cursor:pointer}
.cbl li .sub{display:inline}
.cbl li[aria-selected=true],.cbl li:hover{background:var(--accent-soft)}
.cbl li.none{color:var(--muted);cursor:default;background:none}
.pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
.pop .flab{margin-right:4px}
.picker p{margin:12px 0 0}

/* CAD: the label is screen-reader text now; estimates keep the ≈ and one legend per page explains it */
.cl{display:inline-block;font-size:var(--fs-xs);font-weight:600;line-height:1.3;padding:0 6px;border-radius:4px;white-space:nowrap;vertical-align:1px}
.cl-official{background:var(--okb);color:var(--ok)}
.cl-app_store{background:var(--team-bg);color:var(--team-fg)}
.cl-estimate{background:var(--surface2);color:var(--muted);font-weight:500}
[data-cs]{cursor:help}
.tx,.ck{font-size:var(--fs-s);color:var(--muted);font-weight:400}
td .tx{display:block;white-space:normal}
.cadline{display:inline}
.tb{display:inline-block;font-size:var(--fs-xs);font-weight:600;line-height:1.3;padding:0 6px;border-radius:4px;background:var(--team-bg);color:var(--team-fg);vertical-align:2px}

/* quiz: one question per step */
.quiz{max-width:720px}
.qprog{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:var(--fs-s);color:var(--muted)}
.qbar{flex:1;height:4px;border-radius:2px;background:var(--surface2);overflow:hidden}
.qbar i{display:block;height:100%;width:calc(var(--s,1)/3*100%);background:var(--btn);transition:width .2s ease-out}
.qf{border:0;margin:0;padding:0}
.qf legend{font-size:var(--fs-3);font-weight:600;padding:0;margin-bottom:16px;float:left;width:100%}
.qo{clear:both;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.qo label{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg);cursor:pointer}
.qo label:hover{border-color:var(--accent);background:var(--accent-soft)}
.qo input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--btn)}
.qo label:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.qo label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.qnav{display:flex;align-items:center;gap:8px;margin:24px 0 0}
.qnav .qnext,.qnav [type=submit]{margin-left:auto}
.quiz:not(.js) .qf+.qf{margin-top:32px}
.quiz p{margin:0}
#qout{margin-top:32px}
#qout:empty{display:none}
.qres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qr{background:var(--surface);border-radius:var(--r);padding:16px}
.qtop{grid-column:1/-1;background:var(--raise);border:1px solid var(--accent);box-shadow:var(--sh1);padding:24px}
.qtop h3{font-size:var(--fs-2)}
.qk{font-size:var(--fs-s);font-weight:600;color:var(--muted);margin:0 0 4px}
.qtop .qk{color:var(--accent)}
.qr h3{font-size:var(--fs-l);margin:0 0 8px}
.qr h3 .h1s{font-size:var(--fs-b)}
.qr ul{margin:0 0 8px;padding-left:18px}.qr li{margin:4px 0}
.qr p:last-child{margin:0;font-size:var(--fs-s)}
.qhow{margin:32px 0 0;font-size:var(--fs-s);color:var(--muted);max-width:75ch}
.qhow summary{cursor:pointer;color:var(--accent)}
.qhow p{margin:8px 0 0}
/* tax tool */
.taxf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:var(--surface);border-radius:var(--r);padding:16px;margin:0 0 16px;align-items:end}
.tfr{display:grid;gap:4px;min-width:0}.tfr label{font-size:var(--fs-s);font-weight:600;color:var(--muted)}
.tfr select{width:100%;min-width:0}
.tfr .provw{display:grid;gap:4px;color:var(--muted);font-weight:600}.tfr .provw select{font-size:var(--fs-b);min-height:44px}
.tres .tline{font-size:var(--fs-l);font-weight:600;margin:0 0 4px}
.tres .facts{margin-top:12px}
.taxl{columns:3 220px}
/* agents */
.agt td[data-l=Status] .b{white-space:nowrap}
.ag{font-size:var(--fs-xs)}.ag-rolling_out,.ag-limited_testing{color:var(--part)}

/* footer: one line of links */
.foot{margin-top:96px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-s);padding:32px 0 40px}
.fbrand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);font-size:var(--fs-b);margin:0 0 8px}
.fbrand svg{width:20px;height:20px}
.foot p{margin:0 0 12px;max-width:80ch}
.flinks{display:flex;flex-wrap:wrap;gap:4px 20px}
.flinks a{color:var(--muted)}.flinks a:hover{color:var(--text)}
.fine{margin:0!important;font-size:var(--fs-xs)}

/* yearly total under a yearly per-month price */
.yt{overflow-wrap:anywhere}
.yti{display:inline;margin-left:4px}
.yti::before{content:"("}.yti::after{content:")"}
.save{display:inline-block;white-space:nowrap;font-size:max(12px,.8em);font-weight:600;line-height:1.3;padding:0 .35em;border-radius:3px;background:var(--save-bg);color:var(--save-fg)}
/* EUR-only vendors: official euro price, then a small labelled USD/CAD estimate */
.fxe{display:block;font-size:var(--fs-s);font-weight:400;color:var(--muted);white-space:nowrap}
abbr.gl{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.sub.bf{color:var(--ok)}

@media (pointer:coarse){.seg button,.chip{min-height:44px}}
@media (prefers-reduced-motion:no-preference){
 a,button,.chip,.seg button,input,select,summary{transition:color .12s,background-color .12s,border-color .12s}
 .menu-p,.cbl{animation:pop .14s cubic-bezier(.2,.8,.2,1)}
 @keyframes pop{from{opacity:0;transform:translateY(-4px)}}
}

/* tablet */
@media (max-width:1000px){
 .dt th,.dt td{padding:10px 12px}.dt thead th{white-space:normal}
 .cht td:nth-child(n+3):not(.src-c){min-width:0}.cht td,.cht th{overflow-wrap:anywhere}.cht .tag{white-space:normal}
 .curx{display:none}
 .top-in{gap:12px}.nav>a.dsk{display:none}.nav>a,.menu>summary{padding:8px 10px}
 .alerts{grid-template-columns:1fr}
 .taxf{grid-template-columns:1fr 1fr}
}
/* phone: tables become cards; the page never scrolls sideways */
@media (max-width:767px){
 :root{--m:16px;--fs-1:26px;--fs-2:21px;--fs-3:18px}
 .top-in{flex-wrap:wrap;gap:0 8px;min-height:0;padding-top:8px}
 .brand{flex:1}
 .tgl .seg button{min-height:40px;padding:0 10px}
 .thm{width:40px;height:40px}
 .nav{order:3;flex:1 0 100%;margin:4px -8px 0;gap:0;justify-content:space-between}
 .nav>a,.menu>summary{padding:12px 8px;font-size:var(--fs-s)}
 .menu-p{left:var(--m);right:var(--m);margin-left:0;min-width:0;top:100%}
 .dsk{display:none}.mob{display:inline}
 .intro{padding:20px 0 16px}
 .lead{font-size:var(--fs-b);margin-bottom:16px}
 .hsrch{flex-direction:column}
 .hsrch .btn{width:100%}
 .stats{display:grid;grid-template-columns:1fr 1fr;margin-bottom:16px}
 .stats li{padding:8px 0;margin:0;border-right:0}
 .stats [data-stat=cheap]{grid-column:1/-1;border-top:1px solid var(--line)}
 .chips{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1*var(--m));padding:0 var(--m)}
 .chips::-webkit-scrollbar{display:none}
 .chip{flex:none;min-height:44px}.chip .n{display:none}
 .rbar{margin:16px 0 8px;gap:8px}
 #count{flex:1}
 .fbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:var(--r-s);background:var(--bg);color:var(--text);font:600 var(--fs-s) var(--font);cursor:pointer}
 .fbtn[aria-expanded=true]{background:var(--surface)}
 .rctl{display:none;flex:1 0 100%;margin:0;padding:12px;background:var(--surface);border-radius:var(--r);flex-direction:column;align-items:stretch;gap:12px}
 .rctl.open{display:flex}
 .rctl .fgrp{justify-content:space-between}
 .rctl .seg{flex:1;max-width:240px}.rctl .seg button{flex:1;min-height:44px;padding:0 6px}
 .msort{display:flex;justify-content:space-between}.msort select{flex:1;max-width:240px}
 .tw{border-radius:0;overflow:visible}
 .dt,.dt tbody{display:block}
 .dt thead{display:none}
 .dt tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:16px;background:var(--surface);border-radius:var(--r);margin-bottom:8px}
 .dt tbody tr:hover>*{background:none}
 .dt th,.dt td{display:block;padding:0;border:0!important}
 .dt tbody th{grid-column:1/-1}
 .dt td[data-l]:before{content:attr(data-l);display:block;font-size:var(--fs-xs);font-weight:400;color:var(--muted)}
 .dt td.num{text-align:left!important}
 .rt tbody tr{grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px}
 .rt tbody th{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
 .rt tbody th a{font-size:var(--fs-l)}
 .rt tbody th .sub{display:inline}
 .rt td.plan{grid-column:1;grid-row:2;align-self:end;color:var(--muted);font-size:var(--fs-s)}
 .rt td.plan:before,.rt td.fr:before{display:inline;content:attr(data-l) ": "}
 .rt td.plan .sub{display:inline;margin-left:6px}
 .rt td.num{grid-column:2;grid-row:2/4;text-align:right!important;font-size:var(--fs-l);align-self:center}
 .rt td.num:before{display:none}
 .rt td.num .yt{font-size:var(--fs-xs)}
 .rt td.fr{grid-column:1;grid-row:3;font-size:var(--fs-s);color:var(--muted);width:auto}
 .pt td.lim,.lt td,.pt td:last-child,.cht td{grid-column:1/-1}
 .pt td.lim{max-width:none}
 .cht tbody th{order:-1}
 .cht td[data-l=Date],.cht td[data-l=Change]{grid-column:auto;align-self:center}
 .cht td[data-l=Date]:before,.cht td[data-l=Change]:before{display:none}
 .cht td[data-l=Change]{justify-self:end}
 .alt td[data-l=Compare],.cidx td[data-l^=Cheapest],.agt td[data-l=Notes]{grid-column:1/-1}
 .bt tbody tr{grid-template-columns:1fr}
 .bt th[scope=row]{width:auto;font-size:var(--fs-b);color:var(--text)}
 .bt td{min-width:0}
 .phead{align-items:flex-start}
 .acts{width:100%}.acts .btn{flex:1}
 .facts{gap:12px 24px}
 .ct{min-width:calc(104px + var(--n,3)*184px)}
 .ct>*>tr>:first-child{width:104px;padding:10px}
 .ct>tbody>tr>td{width:calc((100% - 104px)/var(--n,3))}
 .ct>*>tr>th,.ct>*>tr>td{padding:10px}
 .cbx{max-width:none}
 .vs{grid-column:1/-1}
 .fa td,.fa th{grid-column:1/-1}
 .plans{grid-template-columns:1fr}
 .qres{grid-template-columns:1fr}
 .qtop{padding:16px}
 .qo{grid-template-columns:1fr}
 .taxf{grid-template-columns:1fr}
 .alerts{padding:20px;margin-top:40px}
 .alf{flex-direction:column}
 .recent{margin-top:40px}
 .provw{flex-wrap:wrap}.provw select{flex:1;min-width:0}
 details.more>summary{font-size:var(--fs-l)}
 .foot{margin-top:64px}
}

.ucs{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.uc{display:grid;gap:2px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--raise);color:var(--text);text-decoration:none;min-height:44px}
.uc:hover,.uc:focus-visible{border-color:var(--accent)}
.uc-t{font-weight:600}.uc-m{display:none}.uc-p{font-size:var(--fs-s);color:var(--muted)}.uc-p b{color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:900px){.ucs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.ucs{gap:6px;margin:12px 0}.uc{padding:6px 8px}.uc-t{font-size:var(--fs-s)}.uc-p{display:none}}