/* Approved design (mock v2, 2026-11-11). Colours and fonts are fixed: see PLAN.md section 5. */
:root{--bg:#f5f4ef;--surface:#fff;--ink:#14171c;--ink2:#3d424a;--muted:#72777f;--line:#e3e0d8;--line2:#efede7;--accent:#0b6b50;--accent-d:#084f3b;--accent-soft:#e3f0ea;--amber:#9a5b00;--amber-soft:#fbefd4;--star:#e3a008;--r:12px;--mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;--sans:"Manrope","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 30px}
header{background:var(--surface);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;height:62px;gap:24px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;white-space:nowrap}
.logo svg{width:28px;height:28px;flex:none}
.logo small{font-weight:500;color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:20px;padding:1px 7px}
nav{display:flex;gap:2px;font-size:13.5px}
nav a{padding:7px 9px;border-radius:8px;color:var(--ink2);white-space:nowrap}
nav a.on{background:var(--accent-soft);color:var(--accent-d);font-weight:700}
.right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;white-space:nowrap}
.support{color:var(--accent-d);background:var(--accent-soft);border-radius:8px;padding:6px 12px;font-weight:700}
.lang{color:var(--muted)}
.lang b{color:var(--ink)}
h1{font-size:28px;line-height:1.25;margin:0 0 8px;font-weight:800;letter-spacing:-.01em}
h2{font-size:16.5px;margin:0;font-weight:800}
h2 small,h3 small{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:8px}
.sub{color:var(--ink2);margin:0;font-size:14.5px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 10px}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.more{font-size:13px;color:var(--accent-d);font-weight:700;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-weight:500;color:var(--muted);font-size:12.5px;text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line2);vertical-align:middle}
tr:last-child td{border-bottom:0}
th:last-child,td:last-child{padding-right:0}
.n{text-align:right;font-family:var(--mono);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.who{display:flex;align-items:center;gap:10px;min-width:0;overflow-wrap:anywhere}
.who b{font-weight:700}
.by{color:var(--muted);font-size:12.5px;font-weight:500}
.src{color:var(--muted);font-size:12px;white-space:nowrap;text-align:right}
.src u{text-decoration-color:#c9c6bf;text-underline-offset:3px}
.ic{width:26px;height:26px;border-radius:7px;background:#fff;border:1px solid var(--line);display:inline-grid;place-items:center;flex:none;color:var(--ink);overflow:hidden}
.ic .g{width:16px;height:16px;display:block}
.ic.mono{background:hsl(var(--h) 42% 93%);color:hsl(var(--h) 45% 28%);border-color:hsl(var(--h) 34% 84%);font:800 12px/1 "Manrope",sans-serif}
.ic.sm{width:22px;height:22px;border-radius:6px}
.ic.sm .g{width:13px;height:13px}
.ic.sm.mono{font-size:10.5px}
.ic img{width:100%;height:100%;display:block}
.tag{display:inline-block;font-size:12px;line-height:1;padding:5px 8px;border-radius:6px;border:1px solid #cfccc5;white-space:nowrap;background:#fff;font-weight:600}
.tag.free{border-color:#bfdccf;color:var(--accent-d);background:var(--accent-soft)}
.tag.open{border-color:var(--ink);background:var(--ink);color:#fff}
.tag.kind{border-color:var(--line);color:var(--ink2);background:#faf9f6;font-weight:500}
.btn{display:inline-block;background:var(--accent);color:#fff;border-radius:9px;padding:10px 18px;font-size:14px;font-weight:700;white-space:nowrap}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid #cfccc5;font-weight:600}
.btn.small{padding:6px 12px;font-size:13px}
footer{background:#14171c;color:#b3b7bd;font-size:12.5px;margin-top:36px}
.foot{display:flex;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:8px}
.foot b{color:#fff;font-weight:700}
.foot2{padding-bottom:20px;color:#80858d}
.hero{background-color:var(--accent-soft);background-image:radial-gradient(rgba(11,107,80,.14) 1px,transparent 1.3px);background-size:20px 20px;border-bottom:1px solid #d3e4db}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:52px;padding-top:30px;padding-bottom:32px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--accent-d);font-weight:700;background:#fff;border:1px solid #cfe0d7;border-radius:20px;padding:4px 12px;margin-bottom:14px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hero h1{font-size:31px;text-wrap:balance}
.hero .sub{margin-bottom:20px}
.search{display:flex;align-items:center;height:54px;background:#fff;border:1.5px solid var(--ink);border-radius:13px;padding:0 6px 0 16px;color:var(--muted);box-shadow:0 8px 24px rgba(11,107,80,.12);font-size:14.5px}
.topcard{padding:16px 18px 12px;box-shadow:0 8px 28px rgba(20,23,28,.07)}
.toprow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:14px}
.toprow:last-of-type{border-bottom:0}
.toprow .rk{width:20px;height:20px;border-radius:6px;background:var(--line2);color:var(--ink2);font:800 11.5px/20px "Manrope",sans-serif;text-align:center;flex:none}
.toprow:first-of-type .rk{background:var(--accent);color:#fff}
.toprow .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toprow .sc{margin-left:auto;font-family:var(--mono);font-size:13px}
.capt{color:var(--muted);font-size:12px;padding-top:8px}
.grid{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(0,1fr);gap:20px;padding-top:22px;align-items:start}
.col{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
ul.items{list-style:none;margin:0;padding:0}
ul.items li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);min-width:0}
ul.items li:last-child{border-bottom:0}
ul.items li .tx{min-width:0;flex:1}
ul.items li .t{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.items li .d{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.items li .m{color:var(--muted);font-size:12.5px;white-space:nowrap;font-family:var(--mono)}
.titlebar{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:30px 0 16px}
.notice{border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--ink2);font-size:13.5px;background:#fff}
.filters{display:flex;align-items:center;gap:22px;padding:18px 0 12px;font-size:13.5px;color:var(--muted)}
.filters .r{margin-left:auto;display:flex;align-items:center;gap:12px}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;margin-left:8px;vertical-align:middle;font-weight:600}
.seg span{padding:4px 11px;border-radius:6px;color:var(--ink2)}
.seg .on{background:var(--ink);color:#fff}
.list{padding:6px 20px 6px}
.list td{padding-top:12px;padding-bottom:12px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px}
.dot.off{background:#c4c1ba}
.offt{color:var(--muted)}
.how{color:var(--muted);font-size:12.5px;padding:10px 2px 0}
.crumb{color:var(--muted);font-size:13px;padding:22px 0 0}
.crumb b{color:var(--ink);font-weight:600}
.dhead{padding:10px 0 18px;display:flex;align-items:center;gap:14px}
.dhead .ic{width:44px;height:44px;border-radius:11px}
.dhead .ic .g{width:26px;height:26px}
.dhead h1{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:25px}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
dl{margin:0}
dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--line2);font-size:14px;align-items:baseline}
dl div:last-child{border-bottom:0}
dt{color:var(--muted);font-size:13px}
dd{margin:0}
code{font-family:var(--mono);font-size:12.5px;background:#f3f2ee;border-radius:6px;padding:3px 7px}
h3{font-size:15px;margin:0 0 10px;font-weight:800}
.stack{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}

/* ---- added for the live site (the rules above are the approved mock, unchanged) ---- */
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-latin-wght.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-latin-wght.woff2) format("woff2");font-weight:100 800;font-display:swap}
a.logo{color:inherit}
/* The owner's logo (brand/, made by scripts/logo.py) replaced the mock's placeholder mark. */
.logo img{height:46px;width:auto;display:block;flex:none}
nav a:hover{background:var(--line2)}
nav a.on:hover{background:var(--accent-soft)}
.lang a{color:var(--muted)}
.lang a:hover,.more:hover,.crumb a:hover,.foot a:hover,.prose a{color:var(--accent-d);text-decoration:underline;text-underline-offset:3px}
.foot a{color:inherit}
.src a{text-decoration:underline;text-decoration-color:#c9c6bf;text-underline-offset:3px}
.src a:hover{color:var(--accent-d)}
td a.who:hover b,ul.items a:hover .t,.toprow a:hover{color:var(--accent-d)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--ink);text-overflow:ellipsis}
.search input::placeholder{color:var(--muted)}
.search:focus-within{border-color:var(--accent);box-shadow:0 8px 24px rgba(11,107,80,.2)}
.search button{margin-left:auto;font:inherit;font-weight:700;font-size:14px;color:#fff;background:var(--accent);border:0;border-radius:9px;padding:10px 22px;cursor:pointer}
.search button:hover,.btn:hover{background:var(--accent-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:13px;color:var(--ink2);align-items:center}
.chip{background:#fff;border:1px solid #cfe0d7;border-radius:20px;padding:4px 12px;white-space:nowrap}
a.chip:hover{border-color:var(--accent);color:var(--accent-d)}
.toprow a{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.toprow .sc{color:var(--ink2);white-space:nowrap}
ul.items a{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.lead{font-size:15.5px;color:var(--ink2);margin:0 0 18px;max-width:800px}
.dhead .tags{display:flex;gap:6px;flex-wrap:wrap}
.dhead p{margin:0;color:var(--muted);font-size:13.5px}
.id{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:400;text-wrap:balance}
.offers .id{max-width:230px}
.offers td.opt{white-space:nowrap}
th.n{font-family:inherit;font-size:12.5px}
.specs dl div{grid-template-columns:124px minmax(0,1fr)}
.card .how{padding:8px 0 4px;margin:0;font-size:12.5px;color:var(--muted)}
.who .nm{display:flex;flex-direction:column;min-width:0}
/* A provider's name and its notes. The notes show here on phones only: wider screens have a notes column. */
.pv{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px}
.pv .notes{display:none}
.pv .tag+.tag{margin-left:0}
.pv a:hover b{color:var(--accent-d)}
.only-s{display:none} /* shown on phones only */
.how a{text-decoration:underline;text-decoration-color:#c9c6bf;text-underline-offset:3px}
.tablewrap{overflow-x:auto}
td .tag+.tag{margin-left:4px}
.filters{flex-wrap:wrap;row-gap:10px}
.filters input[type=search]{height:36px;width:240px;border:1px solid #cfccc5;border-radius:9px;padding:0 12px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
.filters input[type=search]:focus{outline:2px solid var(--accent);outline-offset:1px}
.seg button{border:0;background:transparent;font:inherit;font-weight:600;font-size:13px;padding:4px 11px;border-radius:6px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.seg{margin-left:0;flex-wrap:wrap}
.toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink2);white-space:nowrap}
.toggle input{accent-color:var(--accent);width:15px;height:15px;margin:0}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--ink)}
th[aria-sort=ascending]::after{content:" ↑"}
th[aria-sort=descending]::after{content:" ↓"}
tr[hidden]{display:none}
tr.dep b{color:var(--ink2)}
.empty{padding:26px 0;color:var(--muted);text-align:center}
details.rest summary{cursor:pointer;color:var(--accent-d);font-weight:700;font-size:13px;padding:12px 0 6px;list-style-position:inside}
.card.pad{padding-bottom:16px}
.card p{margin:0 0 10px;font-size:14px;color:var(--ink2)}
.card p:last-child{margin-bottom:6px}
.chg{font-family:var(--mono);font-size:13px;white-space:nowrap}
.prose{max-width:780px;padding:30px 0 0}
.prose h2{margin:26px 0 8px}
.prose p,.prose li{color:var(--ink2);font-size:15px}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:20px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Tables never scroll sideways: the name cell wraps, and columns drop out as the screen narrows.
   Check with sweep() in scripts/shoot.py after any change here. */
@media (max-width:1100px){
.hero .wrap,.grid,.dgrid{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:900px){
.wrap{padding-left:16px;padding-right:16px}
.bar{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:8px 14px}
nav{order:3;width:100%;overflow-x:auto}
.hero h1{font-size:25px}
.titlebar{flex-direction:column;align-items:flex-start;gap:10px}
.foot{flex-direction:column;gap:8px}
.filters .r{margin-left:0}
dl div{grid-template-columns:86px minmax(0,1fr)}
.opt2,table .by{display:none}
}
/* Phones: keep the model and its two prices on screen, drop the optional columns. */
@media (max-width:640px){
.opt{display:none}
.only-s{display:block}
.logo img{height:40px}
.id{font-size:10.5px}
.card{padding:16px 14px 8px}
.list{padding:4px 14px}
h1{font-size:24px}
.dhead h1{font-size:21px;flex-wrap:wrap}
.lead{font-size:14.5px}
.search{height:48px;padding-left:12px}
.search button{padding:8px 14px}
.filters input[type=search]{width:100%}
.filters .r{flex-wrap:wrap;gap:8px 14px}
.toprow .nm{white-space:normal}
.head h2 small{display:block;margin:3px 0 0}
.src{white-space:normal}
[data-models] .who{flex-wrap:wrap;row-gap:4px}
[data-models] .who>b{flex:1 1 calc(100% - 36px)}
[data-models] .who>.tag{margin-left:36px;font-size:11px;padding:4px 6px}
/* Provider table: provider, input price, output price under a header row, like the model list.
   The name links to the provider's docs and its notes sit beside it, so those two columns are
   hidden (.opt). The id is small type under the name. */
.offers td{vertical-align:top;padding:10px 8px 10px 0;line-height:20px}
.offers th{padding-right:8px}
.offers th:nth-child(3),.offers td:nth-child(3){padding-right:0}
.offers .who{align-items:flex-start;gap:6px}
.offers .ic{margin-top:-1px}
.offers .pv a{text-decoration:underline;text-decoration-color:#c9c6bf;text-underline-offset:3px}
.offers .pv .notes{display:contents}
.offers .pv .tag{font-size:10.5px;padding:3px 5px}
.offers .id{max-width:none;line-height:1.4;margin-top:2px}
.changes,.changes tbody{display:block}
.changes thead{display:none}
.changes tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:9px 0;border-bottom:1px solid var(--line2)}
.changes td{display:block;padding:0;border:0}
.changes td:last-child{flex-basis:100%}
}
@media (max-width:340px){
.wrap{padding-left:10px;padding-right:10px}
.card{padding-left:10px;padding-right:10px}
.list{padding-left:10px;padding-right:10px}
[data-models] .who>.tag{margin-left:0}
/* The smallest phones: the provider icons go, so a one-word name such as "DigitalOcean" still fits beside two long prices. */
.offers .ic{display:none}
}