/* Layout: Vendr-style tool page. Answer card first (price, free plan, checked date), a sticky list of the
   questions people ask on the left, each answered in order on the right. Same Graphite + sign red system. */
:root{
  --bg:#FFFFFF; --ink:#1C1C1E; --ink2:#3D3D41; --muted:#6A6A70; --line:#E4E4E7; --soft:#F4F4F5; --red:#E2231A; --green:#1E7B3C; --amber:#B25E00;
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme: light;
}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans)}
a{color:inherit}
.in{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
nav.top{border-bottom:1px solid var(--line)}
nav.top .in{display:flex;align-items:center;gap:28px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.logo svg{width:30px;height:30px}
.navsearch{flex:1;max-width:380px;display:flex;border:1px solid var(--line)}
.navsearch input{flex:1;min-width:0;font:inherit;font-size:14px;padding:9px 12px;border:0;background:transparent}
.navsearch input:focus{outline:none}.navsearch:focus-within{border-color:var(--ink)}
.cta{margin-left:auto;font:500 13px/1 var(--mono);text-decoration:none;background:var(--ink);color:var(--bg);padding:10px 13px}
@media (max-width:760px){.navsearch{display:none}}
.crumbs{font:400 13px var(--mono);color:var(--muted);padding-block:22px 0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--red)}
.vhead{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;padding-block:18px 26px;border-bottom:1px solid var(--line)}
.vlogo{width:72px;height:72px;border:1px solid var(--line);display:grid;place-items:center;flex:none;background:#fff}
.vlogo img{width:52px;height:52px;object-fit:contain}
.vtitle{flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px}
h1{margin:0;font-size:clamp(34px,4.6vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1}
.one{margin:0;color:var(--ink2);font-size:17px;max-width:62ch}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:500 12px var(--mono);border:1px solid var(--line);padding:4px 8px;text-decoration:none}
.vact{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.visit{font:600 15px var(--sans);text-decoration:none;border:1.5px solid var(--ink);padding:11px 16px}
.visit:hover{background:var(--ink);color:var(--bg)}
.checked{font:400 12px var(--mono);color:var(--muted);text-align:right}
.layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;padding-block:32px 72px}
@media (max-width:900px){.layout{grid-template-columns:1fr}.toc{display:none}}
.toc{position:sticky;top:20px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:14px}
.toc span{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-bottom:8px}
.toc a{text-decoration:none;color:var(--ink2);padding:6px 0 6px 12px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--ink);border-left-color:var(--red)}
.content{display:flex;flex-direction:column;gap:52px;min-width:0}
.content section{display:flex;flex-direction:column;gap:16px;scroll-margin-top:16px}
h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.025em}
.answer{border:1.5px solid var(--ink);padding:26px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px}
@media (max-width:700px){.answer{grid-template-columns:1fr}}
.big{display:flex;flex-direction:column;gap:6px}
.big .lbl{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.big .num{font:800 64px/1 var(--sans);letter-spacing:-.04em}
.big .num small{font:500 18px var(--mono);letter-spacing:0;color:var(--muted)}
.big .altp{font-size:15px;color:var(--ink2)}
.kv{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:600;text-align:right}
.src{grid-column:1/-1;font:400 12.5px var(--mono);color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.src a{color:var(--ink)}
.yp{border:1.5px solid var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
@media (max-width:760px){.yp{grid-template-columns:1fr}}
.yp-in{padding:22px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line)}
.yp-in label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600}
.yp-in output{font:800 34px var(--sans);letter-spacing:-.03em}
.yp-in input{width:100%;accent-color:var(--red)}
.yp-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){.yp-out{grid-template-columns:1fr}}
.yp-out>div{padding:22px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line)}
.yp-out>div:first-child{border-left:0}
.yp-out .lbl{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.yp-num{font:800 clamp(26px,2.6vw,34px)/1.05 var(--sans);letter-spacing:-.035em;white-space:nowrap}
.yp-out>div:first-child .yp-num{color:var(--red)}
.yp-sub{font:400 13px var(--mono);color:var(--ink2)}
.cmp{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.cmp{grid-template-columns:1fr}}
#curve{width:100%;height:auto;display:block}
#curve text{font:400 11px var(--mono);fill:var(--muted)}
#curve .lab{font:600 12px var(--mono);fill:var(--red)}
.rank{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink);counter-reset:r}
.rank li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:14px;counter-increment:r;cursor:default}
.rank li::before{content:counter(r);font:500 12px var(--mono);color:var(--muted);padding-top:2px}
.rank li b{font:600 14px var(--mono);font-variant-numeric:tabular-nums}
.rank li.me{color:var(--red);font-weight:700}
.rank li.me b{color:var(--red)}
.rank li.off{color:var(--muted)}
.rank li:hover{background:var(--soft)}
.picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line)}
@media (max-width:600px){.picker{grid-template-columns:1fr}}
.picker div{padding:16px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.picker div:first-child{border-left:0}
.picker div.on{background:var(--ink);color:#fff}
.picker div.on .sm{color:#C9C9CE}
.picker b{font-size:17px}
.picker .sm{font:400 12px var(--mono);color:var(--muted)}
.watch{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1.5px solid var(--ink)}
.watch li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line);position:relative;color:var(--ink2);font-size:15.5px}
.watch li::before{content:"!";position:absolute;left:0;top:14px;width:18px;height:18px;display:grid;place-items:center;background:var(--red);color:#fff;font:700 12px var(--mono)}
.watch b{color:var(--ink)}
.motion{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:16px;color:var(--ink2)}
.mtag{font:600 13px var(--mono);background:var(--ink);color:#fff;padding:7px 10px}
.co{margin-top:4px}
.claim{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:1px 5px;margin-left:4px;white-space:nowrap}
.mini dd.ns{color:var(--muted)}
.sec td.ok{font-weight:700}
.sec td.gate{font-weight:700;color:var(--red)}
.sec td.ns{color:var(--muted)}
.sec td .sm{display:block;margin-top:4px}
.revlinks{display:flex;gap:10px;flex-wrap:wrap}
.revlinks a{border:1px solid var(--line);padding:10px 14px;text-decoration:none;font-weight:600}
.revlinks a:hover{border-color:var(--ink)}
.revlinks span{color:var(--muted);font-weight:400}
.fact .sm{font:400 12px var(--mono);color:var(--muted)}
.fact .claim{align-self:flex-start;margin-left:0}
.what{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:start}
@media (max-width:800px){.what{grid-template-columns:1fr}}
.ov{display:flex;flex-direction:column;gap:16px;min-width:0}
.ov p{margin:0;font-size:17px;color:var(--ink2);max-width:52ch}
.mini{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mini div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.mini dt{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:3px}
.mini dd{margin:0}
.caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1.5px solid var(--ink)}
@media (max-width:520px){.caps{grid-template-columns:1fr}}
.caps li{display:flex;flex-direction:column;gap:3px;padding:12px 12px 12px 30px;border-bottom:1px solid var(--line);position:relative;min-width:0}
.caps li::before{position:absolute;left:4px;top:11px;width:16px;height:16px;display:grid;place-items:center;font:700 11px var(--mono)}
.caps li.y::before{content:"\2713";background:var(--ink);color:#fff}
.caps li.n::before{content:"";border:1.5px solid var(--line)}
.caps b{font-size:15px}
.caps li.n b{color:var(--muted);font-weight:600}
.caps q{font:400 12px/1.4 var(--mono);color:var(--muted);quotes:"\201C" "\201D"}
.caps span{font:400 12px var(--mono);color:var(--muted)}
.tablewrap{overflow-x:auto;border-top:1.5px solid var(--ink)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:680px}
th{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px}
td.p{font:700 19px var(--sans);letter-spacing:-.01em;white-space:nowrap}
td .sm{display:block;font:400 12px var(--mono);color:var(--muted);letter-spacing:0;font-weight:400}
.quote{font:400 12px var(--mono);color:var(--ink2);background:var(--soft);padding:3px 6px;display:inline-block;max-width:34ch}
.calc{border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:16px}
.calc label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:600}
.calc output{font:700 26px var(--sans);letter-spacing:-.02em}
.calc input[type=range]{width:100%;accent-color:var(--ink)}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;gap:12px;align-items:center;font-size:15px}
.row .track{height:12px;background:var(--soft);position:relative}
.row .fill{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.row.best .fill{background:var(--red)} .row.best b{color:var(--red)}
.row .v{font:600 14px var(--mono);text-align:right}
.row.na .v{color:var(--muted);font-weight:400}
.note{font:400 13px var(--mono);color:var(--muted);margin:0}
.flag{border-left:3px solid var(--amber);background:color-mix(in srgb,var(--amber) 8%,var(--bg));padding:14px 16px;font-size:15px}
.flag b{display:block;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--amber);margin-bottom:4px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}
.fact{border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:6px}
.fact dt{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fact dd{margin:0;font-weight:600}
.fact .quote{margin-top:4px}
.fact.ns dd{color:var(--muted);font-weight:400}
.alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.alt{border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none}
.alt:hover{border-color:var(--ink)}
.alt .top{display:flex;gap:10px;align-items:center}
.alt img,.alt .mono{width:34px;height:34px;object-fit:contain;flex:none}
.alt .mono{display:grid;place-items:center;background:var(--ink);color:#fff;font:700 12px var(--mono)}
.alt b{font-size:16px;line-height:1.2}
.alt .pr{font:700 20px var(--sans);letter-spacing:-.02em}
.alt .pr small{font:400 13px var(--mono);color:var(--muted)}
.alt .sm{font:400 12px var(--mono);color:var(--muted)}
.timeline{display:flex;flex-direction:column;border-left:2px solid var(--line);margin-left:6px}
.ev{position:relative;padding:0 0 18px 20px;display:flex;flex-direction:column;gap:2px}
.ev::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;background:var(--ink)}
.ev b{font:600 13px var(--mono)} .ev span{color:var(--ink2);font-size:15px}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 20px var(--mono);color:var(--muted)}
details[open] summary::after{content:"\2212"}
details p{margin:10px 0 0;color:var(--ink2);max-width:70ch}
footer .in{padding-block:36px 56px;border-top:1px solid var(--line);display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;font:400 13px var(--mono);color:var(--muted)}
footer a{text-decoration:none}footer a:hover{color:var(--red)}

/* home */

/* Layout: a price publication. White page, graphite ink, one sign red used only for prices that matter.
   One moving object (a mobile of price tags drawn in squares), then plain sections, each answering one question.
   Single light look by choice, plus one dark band. */
:root{
  --bg:#FFFFFF; --ink:#1C1C1E; --ink2:#3D3D41; --muted:#6A6A70; --line:#E4E4E7; --soft:#F4F4F5;
  --red:#E2231A; --night:#121214; --night-ink:#EDEDEF; --night-muted:#8E8E95; --night-line:#2A2A2E;
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme: light;
}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans)}
a{color:inherit}
.in{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
nav.top{border-bottom:1px solid var(--line)}
nav.top .in{display:flex;align-items:center;gap:28px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.logo svg{width:30px;height:30px}
.links{display:flex;gap:22px;font-size:15px;color:var(--muted)}
.links a{text-decoration:none} .links a:hover{color:var(--ink)}
.cta{margin-left:auto;font:500 13px/1 var(--mono);text-decoration:none;background:var(--ink);color:var(--bg);padding:10px 13px}
.cta:hover{background:var(--red)}
@media (max-width:820px){.links{display:none}}
.hero .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:center;padding-block:44px 28px}
@media (max-width:900px){.hero .in{grid-template-columns:1fr}}
.copy{display:flex;flex-direction:column;gap:20px;min-width:0}
h1{font-weight:800;font-size:clamp(44px,6.4vw,86px);line-height:.96;letter-spacing:-.04em;margin:0;text-wrap:balance}
h1 em{font-style:normal;color:var(--red)}
.sub{margin:0;font-size:19px;color:var(--muted);max-width:40ch}
.search{display:flex;align-items:center;border:1.5px solid var(--ink);max-width:520px;background:var(--bg)}
.search input{flex:1;min-width:0;font:inherit;font-size:16px;padding:15px 16px;border:0;background:transparent;color:var(--ink)}
.search input:focus{outline:none}
.search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 25%,transparent)}
.search kbd{font:500 12px var(--mono);color:var(--muted);padding:0 14px}
.hfacts{display:flex;gap:22px;flex-wrap:wrap;font:400 13px/1.3 var(--mono);color:var(--muted)}
.hfacts b{color:var(--ink);font-weight:600}
#mobile{width:100%;aspect-ratio:1/0.92;display:block}
section.block .in{padding-block:56px;display:flex;flex-direction:column;gap:22px;border-top:1px solid var(--line)}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.025em}
.more{font:500 13px var(--mono);color:var(--muted);text-decoration:none}
.more:hover{color:var(--red)}
.recent{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.card{border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--bg)}
.card:hover{border-color:var(--ink)}
.vl{width:34px;height:34px;object-fit:contain}
.mono{width:34px;height:34px;display:grid;place-items:center;font:700 12px var(--mono);color:#fff;background:var(--ink)}
.card .n{font-weight:700;font-size:16px;line-height:1.2}
.card .p{font:700 22px/1 var(--sans);letter-spacing:-.02em}
.card .p small{font:400 13px var(--mono);color:var(--muted);letter-spacing:0}
.card .d{font:400 12px var(--mono);color:var(--muted)}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:12px}
.cat{border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:10px;text-decoration:none;min-height:150px}
.cat:hover{border-color:var(--ink)}
.cat h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.cat .m{font:400 13px/1.4 var(--mono);color:var(--muted)}
.dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:auto}
.dots i{width:9px;height:9px;background:var(--ink)}
.cat.soon{background:var(--soft);border-color:transparent}
.cat.soon h3{color:var(--ink2)}
.pill{align-self:flex-start;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:5px 7px;background:var(--bg)}
.tablewrap{overflow-x:auto;border-top:1.5px solid var(--ink)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:640px}
th{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
td{padding:14px 10px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top}
td.price{font:700 18px var(--sans);letter-spacing:-.01em}
td .sm{display:block;font:400 12px var(--mono);color:var(--muted);letter-spacing:0}
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) 84px;gap:14px;align-items:center;font-size:15px}
.bar .track{height:14px;background:var(--soft);position:relative}
.bar .fill{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.bar.low .fill{background:var(--red)}
.bar .v{font:600 14px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:600px){.bar{grid-template-columns:1fr 70px}.bar .track{grid-column:1/-1;grid-row:2}}
.free{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.free div{border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:8px}
.free b{font-size:17px}
.free span{font:400 13px/1.45 var(--mono);color:var(--ink2)}
.night{background:var(--night);color:var(--night-ink)}
.night .in{border-top:0 !important}
.night h2{color:var(--night-ink)} .night .more{color:var(--night-muted)}
#field{width:100%;height:auto;display:block}
#field text{fill:var(--night-muted);font:400 11px var(--mono)}
#field .lane{fill:var(--night-ink);font:500 11.5px var(--mono);letter-spacing:.06em}
.readout{font:500 13px var(--mono);color:var(--night-ink);border-top:1px solid var(--night-line);padding-top:12px;min-height:22px}
.readout em{font-style:normal;color:#FF4A40}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.step{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:3px solid var(--ink)}
.step b{font-size:19px;letter-spacing:-.01em}
.step span{color:var(--muted);font-size:15px}
.step code{font:500 12px var(--mono);background:var(--soft);padding:2px 5px}
.depts{columns:3 260px;column-gap:28px}
.dept{break-inside:avoid;padding-bottom:22px}
.dept h3{margin:0 0 8px;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between}
.dept a{display:block;text-decoration:none;padding:5px 0;border-bottom:1px solid var(--line);font-size:15px}
.dept a:hover{color:var(--red)}
.dept a.live::after{content:"prices live";float:right;font:500 11px var(--mono);color:var(--red);padding-top:3px}
footer .in{padding-block:44px 64px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:800px){footer .in{grid-template-columns:1fr 1fr}}
footer p{margin:10px 0 0;color:var(--muted);font-size:14px;max-width:38ch}
footer h4{margin:0 0 10px;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
footer nav a{display:block;text-decoration:none;padding:3px 0;font-size:15px}
footer nav a:hover{color:var(--red)}
.proto{grid-column:1/-1;font:400 12px var(--mono);color:var(--muted)}

/* category metrics + price history */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.stats>div{padding:18px 18px 18px 0;display:flex;flex-direction:column;gap:4px}
.stats>div+div{padding-left:18px;border-left:1px solid var(--line)}
.stats .lbl,.units .lbl{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.stats b{font:800 34px/1.05 var(--sans);letter-spacing:-.03em}
.stats b small{font:500 14px var(--mono);color:var(--muted);letter-spacing:0}
.stats .sm{font:400 12.5px var(--mono);color:var(--ink2)}
.up{color:var(--red)} .down{color:var(--ink)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats>div:nth-child(3){padding-left:0;border-left:0}.stats>div:nth-child(n+3){border-top:1px solid var(--line)}}
.units{display:flex;flex-direction:column;gap:8px}
.ubar{display:grid;grid-template-columns:120px minmax(0,1fr) 48px 70px;gap:12px;align-items:center;font-size:14px}
.ubar i{display:block;height:10px;background:var(--soft);position:relative}
.ubar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--ink)}
.ubar b{font:600 13px var(--mono);text-align:right}
.ubar .sm{font:400 12px var(--mono);color:var(--muted)}
@media (max-width:520px){.ubar{grid-template-columns:90px minmax(0,1fr) 40px}.ubar .sm{display:none}}
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:860px){.charts{grid-template-columns:1fr}}
.charts figure{margin:0;display:flex;flex-direction:column;gap:8px;position:relative}
.charts figcaption{font:600 12px var(--mono);color:var(--ink2)}
.hchart{width:100%;height:auto;overflow:visible}
.hchart text{font:400 11px var(--mono);fill:var(--muted)}
.hchart .g{stroke:var(--line);stroke-width:1}
.hchart .b{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.hchart polyline{fill:none;stroke:var(--red);stroke-width:2;stroke-linejoin:round}
.hchart .pt rect{fill:transparent}
.hchart .pt circle{fill:var(--red);stroke:var(--bg);stroke-width:2;opacity:0}
.hchart .pt:hover circle{opacity:1}
.htip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);font:500 12px var(--mono);padding:5px 8px;white-space:nowrap;transform:translate(-50%,-130%)}
.shift{min-width:0}
.plainlist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.plainlist li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink2)}
.plainlist .sm{font:400 12px var(--mono);color:var(--muted);margin-left:6px}
section h3{margin:8px 0 0;font-size:17px}
.watch.good li::before{content:"\2713";background:var(--green)}