/* Site v2: the content styles of the pages kept from the earlier design (FAQ, comparisons,
   catalogs, legal pages, changelog, blog, 404, success), loaded where css/styles.css used to be:
   before css/v2.css, with css/v2-legacy.css after it to adapt them to the v2 look. Pruned from
   that stylesheet on 2026-10-15 to the rules these pages still use; its header,
   nav and footer rules went with the earlier design. Colours come from v2's tokens through the
   variables v2-legacy.css points (--accent, --card, --card-border...). */
:root{
  --bg:#f8fafc;
  --surface:#ffffff;
  --muted:#5b6472;
  --accent:#6d28d9;
  --accent-2:#0891b2;
  --card:#ffffff;
  --card-border:#e2e8f0;
  --text:#0f172a;
  /* Per-product identity. Pages set a body class (product-chat/product-cli/product-gateway/
     product-code) that re-points --accent/--accent-2, so buttons, links, badges, and the active
     pill tab re-tint per product without duplicating rules. Chat keeps the root defaults (violet). */
  --chat:#6d28d9;
  --cli:#047857;
  --gateway:#0e7490;
  --code:#b45309;
}
*{box-sizing:border-box}
/* Always reserve the vertical scrollbar's width instead of only adding it once content
   height is known. Without this, the browser's first layout pass assumes no scrollbar,
   then re-flows every centered element (.container{margin:0 auto}) a few pixels sideways
   once it discovers the page is taller than the viewport -- visible as text/content
   "jumping" right after a refresh, before it settles into its final position. */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{margin:0;font-family:Inter,Segoe UI,system-ui,Arial, sans-serif;background:var(--bg);color:var(--text);line-height:1.4}
.container{max-width:1100px;margin:0 auto;padding:2rem}
.site-header{border-bottom:1px solid var(--card-border);position:sticky;top:0;background:rgba(255,255,255,0.9);backdrop-filter:blur(6px);z-index:20}
#providers,#mcp-catalog,#pricing,#faq,#general,#byok,#billing,#code{scroll-margin-top:110px}
.logo{font-weight:700;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:0.5rem}
.logo img{display:block}
.nav-toggle{display:none;position:relative;width:40px;height:40px;padding:0;background:var(--surface);border:1px solid var(--card-border);border-radius:8px;cursor:pointer}
.nav-toggle:hover{border-color:var(--accent)}
.hero{padding:4rem 0 3rem;text-align:center}
.eyebrow{display:inline-block;color:var(--accent-2);font-size:0.8rem;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:0.75rem;font-weight:600}
.hero h1{font-size:clamp(1.9rem,3.6vw,2.5rem);margin:0 0 0.5rem;letter-spacing:-0.015em}
.lead{color:var(--muted);max-width:800px;margin:0 auto 1.25rem}
.hero-stats{display:flex;justify-content:center;gap:2.5rem;margin-top:2rem}
.stat{display:flex;flex-direction:column;align-items:center}
.stat strong{font-size:1.6rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:0.85rem}
.btn{display:inline-block;padding:0.6rem 1rem;border-radius:8px;background:transparent;color:var(--text);text-decoration:none;border:1px solid var(--card-border)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:white}
.btn.secondary{border:1px solid var(--card-border);color:var(--text)}
.btn:hover{border-color:var(--accent)}
.btn.primary:hover{opacity:0.92}
.section-lead{color:var(--muted);margin:0 0 1.25rem}
.provider-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.75rem;margin-top:0.75rem}
.provider-tile{background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:0.85rem 0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem;text-align:center;transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease}
.provider-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,0.08);border-color:rgba(109,40,217,0.3)}
.provider-tile img{width:28px;height:28px;object-fit:contain}
.provider-tile span{font-size:0.78rem;color:var(--text);line-height:1.2}
/* Standalone request-a-provider line under the catalog grid (providers.html) */
.providers-request{text-align:center}
.providers-request p{margin:0;color:var(--text);font-size:1.02rem}
.providers-request a{color:var(--accent);font-weight:600}
.providers-request a:hover{text-decoration:underline}
.mcp-search{display:flex;align-items:center;gap:0.5rem;background:var(--surface);border:1px solid var(--card-border);border-radius:10px;padding:0 0.9rem;margin:0 0 1.25rem;max-width:360px;color:var(--muted)}
.mcp-search svg{flex-shrink:0;opacity:0.6}
.mcp-search input{border:none;outline:none;background:transparent;font:inherit;font-size:0.9rem;color:var(--text);width:100%;padding:0.7rem 0}
.mcp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.mcp-card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:0.6rem;box-shadow:0 1px 2px rgba(15,23,42,0.04);transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease}
.mcp-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,0.08);border-color:rgba(109,40,217,0.3)}
.mcp-card[hidden]{display:none}
.mcp-card-top{display:flex;align-items:flex-start;gap:0.65rem}
.mcp-avatar{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.78rem;letter-spacing:0.01em}
.mcp-name-row{min-width:0;display:flex;flex-direction:column;flex:1}
.mcp-name{font-size:0.95rem;font-weight:600;color:var(--text)}
.mcp-pub{font-size:0.76rem;color:var(--muted)}
.mcp-verified{flex-shrink:0;margin-left:auto;white-space:nowrap}
.mcp-desc{font-size:0.85rem;color:var(--muted);line-height:1.5;margin:0;flex:1}
.mcp-tags{display:flex;gap:0.4rem;flex-wrap:wrap}
.mcp-tag{font-size:0.7rem;background:#f1f5f9;color:var(--muted);border-radius:999px;padding:0.15rem 0.55rem}
.mcp-empty{color:var(--muted);font-size:0.9rem}
/* Providers catalog: filter chips + search over a single data-rendered grid (js/providers.js).
   Each tile carries a small group tag so the category is visible without the old per-group
   section headers. */
.filter-chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0 0 0.75rem}
.chip{border:1px solid var(--card-border);background:var(--surface);color:var(--muted);border-radius:999px;padding:0.35rem 0.9rem;font-size:0.83rem;font-weight:600;cursor:pointer;font-family:inherit;transition:border-color 0.15s ease,color 0.15s ease,background 0.15s ease}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.provider-legend{color:var(--muted);font-size:0.83rem;margin:0 0 1.25rem;line-height:1.6}
.provider-legend strong{color:var(--text);font-weight:600}
.provider-group-tag{font-style:normal;font-size:0.66rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;color:var(--muted);background:#f1f5f9;border-radius:999px;padding:0.1rem 0.45rem;margin-top:-0.1rem}
.provider-grid.provider-teaser{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.provider-group-tag.provider-scope{margin-top:0.25rem;background:rgba(8,145,178,0.12);color:#0e7490}
/* Models catalog (models.html): toolbar + table + calculator, data baked by build-models.js. */
.models-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;margin-bottom:0.9rem}
.models-toolbar .models-search{flex:1 1 260px;margin:0;max-width:none}
.models-toolbar select{border:1px solid var(--card-border);background:var(--surface);color:var(--text);border-radius:10px;padding:0.55rem 0.7rem;font:inherit;font-size:0.88rem;cursor:pointer}
.models-toolbar select:hover{border-color:var(--accent)}
.models-toolbar .filter-chips{margin:0}
.models-pagination{display:flex;justify-content:center;align-items:center;gap:0.35rem;margin-top:1.5rem;flex-wrap:wrap}
.models-pagination[hidden]{display:none}
.models-pagination button{border:1px solid var(--card-border);background:var(--surface);color:var(--muted);border-radius:8px;min-width:34px;height:34px;padding:0 0.65rem;font:inherit;font-size:0.85rem;font-weight:600;cursor:pointer}
.models-pagination button:hover:not(:disabled){border-color:var(--accent);color:var(--text)}
.models-pagination button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.models-pagination button:disabled{opacity:.45;cursor:default}
.models-pagination .pg-gap{color:var(--muted);padding:0 0.2rem}
.models-count{margin:0 0 0.75rem}
/* Five-column layout: provider folded into the model cell, in/out pricing merged, so the table fits its container with no horizontal scroll. */
.model-table{table-layout:fixed}
.model-table th,.model-table td{white-space:normal;vertical-align:top}
.model-table th:nth-child(1){width:34%}
.model-table th:nth-child(2){width:9%}
.model-table th:nth-child(3){width:15%}
.model-table th:nth-child(4){width:24%}
.model-table .m-prov-line{display:flex;align-items:center;gap:0.4rem;color:var(--muted);font-size:0.74rem;font-weight:600;letter-spacing:0.01em;margin-bottom:0.15rem}
.model-table .m-prov-line img{width:14px;height:14px;object-fit:contain;flex-shrink:0}
.model-table .m-name strong{display:block;color:var(--text);font-size:0.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-table .m-name code{display:block;font-size:0.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-table .m-ctx{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.model-table th:nth-child(2){text-align:right}
.model-table .m-price{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.model-table .m-price em{font-style:normal;color:var(--card-border);padding:0 0.25rem}
.model-table th:nth-child(3){text-align:right}
.model-table .m-price span:last-of-type{color:var(--muted)}
.model-table .m-price .m-tier{display:block;font-size:0.72rem;color:var(--muted);margin-top:0.1rem;white-space:normal;line-height:1.25}
.model-table .m-caps{min-width:0}
.model-table .m-caps .mcp-tag{display:inline-block;margin:1px;white-space:nowrap}
@media (max-width:760px){
  .model-table th:nth-child(4),.model-table td.m-caps{display:none}
}
@media (max-width:560px){
  .model-table th:nth-child(5),.model-table td.m-use{display:none}
  .model-table th:nth-child(1){width:auto}
}
.use-chip{display:inline-block;font-size:0.68rem;font-weight:600;letter-spacing:0.02em;background:rgba(109,40,217,0.1);color:var(--accent);border-radius:999px;padding:0.12rem 0.5rem;white-space:nowrap}
.use-chip.use-limited{background:rgba(8,145,178,0.1);color:#0e7490}
.calc-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:1rem;margin-top:1.25rem}
.calc-row select{border:1px solid var(--card-border);background:#fff;color:var(--text);border-radius:8px;padding:0.55rem 0.6rem;font:inherit;font-size:0.9rem;max-width:340px}
.calc-field{display:flex;flex-direction:column;gap:0.3rem;font-size:0.8rem;font-weight:600;color:var(--muted);text-align:left}
.calc-field input{border:1px solid var(--card-border);border-radius:8px;padding:0.5rem 0.6rem;font:inherit;font-size:0.9rem;color:var(--text);width:150px}
.calc-result{display:flex;flex-direction:column;gap:0.15rem}
.calc-result span{font-size:1.7rem;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-result em{font-style:normal;font-size:0.78rem;color:var(--muted)}
/* The providers page's coding plans: one link per vendor's plan, baked by build-coding-plans.js. */
.provider-plans .plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0.75rem;margin:1.25rem 0 2rem}
.provider-plans .plan-card{display:flex;gap:0.85rem;align-items:flex-start;padding:1rem 1.1rem;border:1px solid var(--card-border);border-radius:12px;background:var(--card);color:var(--text);text-decoration:none}
.provider-plans .plan-card:hover{border-color:var(--accent)}
.provider-plans .plan-card img{flex:none;margin-top:2px}
.provider-plans .plan-card strong{display:block;font-weight:600;margin-bottom:0.2rem}
.provider-plans .plan-card span span{color:var(--muted);font-size:0.9rem;line-height:1.5}
.provider-plans h3{margin:0 0 0.5rem;font-size:1.15rem}
.provider-plans .plan-links{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.provider-plans .plan-links a{display:inline-block;padding:0.4rem 0.8rem;border:1px solid var(--card-border);border-radius:999px;background:var(--card);color:var(--text);font-size:0.9rem;text-decoration:none}
.provider-plans .plan-links a:hover{border-color:var(--accent);color:var(--accent)}
.providers-more{margin-top:1rem;font-weight:600}
.providers-more a{color:var(--accent);text-decoration:none}
.providers-more a:hover{text-decoration:underline}
/* Slim pricing band that product pages keep near their CTA while the full grids live on
   pricing.html — price stays visible at the decision point without duplicating the tables. */
.pricing-teaser{background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:1.5rem;text-align:center;box-shadow:0 1px 2px rgba(15,23,42,0.04)}
.pricing-teaser .muted.small{margin:0.75rem 0 0}
/* Cross-sell band at the bottom of each product page: nudges visitors who arrived on one
   product toward the other two they already have access to. */
.cross-sell{border-top:1px solid var(--card-border);padding-top:2rem;text-align:center}
.cross-sell .cross-sell-links{display:flex;justify-content:center;flex-wrap:wrap;gap:0.75rem;margin-top:1rem}
.muted{color:var(--muted)}
.muted.small{font-size:0.85rem}
.badge{display:inline-block;font-size:0.7rem;font-weight:600;letter-spacing:0.02em;text-transform:uppercase;color:var(--accent-2);background:rgba(8,145,178,0.1);border-radius:999px;padding:0.15rem 0.55rem;margin-left:0.5rem;vertical-align:middle}
.card-cta{text-align:center;margin-top:auto}
.compare-table-wrap{overflow-x:auto;margin-top:2rem}
.compare-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;overflow:hidden;border:1px solid var(--card-border)}
.compare-table th,.compare-table td{padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--card-border)}
.compare-table th{color:var(--text);background:#f1f5f9}
.compare-table td{color:var(--muted)}
.compare-table tr:last-child td{border-bottom:none}
/* compare.html */
.compare-section{max-width:860px;padding-top:1rem;padding-bottom:1rem}
.compare-section.compare-wide{max-width:1100px}
.compare-section h2{margin:0 0 0.75rem}
.compare-section p,.compare-section li{color:var(--muted);line-height:1.6}
.compare-section strong{color:var(--text)}
.compare-section ul{padding-left:1.2rem;margin:0}
.compare-section li{margin-bottom:0.5rem}
.compare-grid{font-size:0.88rem}
.compare-grid th,.compare-grid td{vertical-align:top}
.compare-grid thead th{white-space:nowrap}
.compare-grid th[scope="row"]{background:var(--card);min-width:10rem}
.compare-grid td:nth-child(2){color:var(--text)}
.compare-note{font-weight:400;color:var(--muted)}
.compare-sources{font-size:0.8rem}
.compare-page .eyebrow a,.compare-grid thead a{color:inherit}
.compare-pair th[scope="row"]{width:24%}
.compare-pair td{width:38%}
.faq .accordion{margin-top:1rem}
.qa{margin-bottom:0.5rem}
.qa h3{margin:0;font:inherit}
.q{width:100%;text-align:left;background:var(--card);border:1px solid var(--card-border);padding:0.75rem;border-radius:6px;color:var(--text);cursor:pointer}
.q:hover{border-color:var(--accent)}
.a{display:none;padding:0.75rem;background:#f8fafc;border:1px solid var(--card-border);border-top:none;border-radius:0 0 6px 6px;margin-top:-1px;color:var(--muted)}
.contact{text-align:center;padding-top:1rem}
.contact .section-lead{margin-left:auto;margin-right:auto}
.contact-form{max-width:520px;margin:1.5rem auto 0;text-align:left;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:1.5rem;box-shadow:0 1px 2px rgba(15,23,42,0.04)}
.form-row{margin-bottom:1rem}
.form-row:last-of-type{margin-bottom:0}
.form-row label{display:block;font-size:0.85rem;font-weight:600;color:var(--text);margin-bottom:0.35rem}
.form-row input,.form-row textarea{width:100%;padding:0.55rem 0.7rem;border:1px solid var(--card-border);border-radius:8px;font-family:inherit;font-size:0.95rem;color:var(--text);background:#fff}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent)}
.form-row textarea{resize:vertical}
.form-status{min-height:1.2em;font-size:0.85rem;margin:0.75rem 0 0}
.form-status.error{color:#b91c1c}
.form-status.success{color:#15803d;margin:0}
.contact .card-cta{margin-top:0.75rem}
.contact-form.is-sent{padding:3rem 1.5rem;transition:padding 0.2s ease}
.form-success{text-align:center}
.form-success .icon{width:52px;height:52px;border-radius:50%;background:rgba(21,128,61,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.form-success .icon svg{width:26px;height:26px;stroke:#15803d;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.form-success h3{margin:0 0 0.4rem;font-size:1.15rem;color:var(--text)}
.form-success p{margin:0;color:var(--muted);font-size:0.92rem}
.success{text-align:center;padding-top:3rem}
.success .logo{justify-content:center;margin-bottom:2rem}
.success h1{font-size:1.8rem}
.success p{color:var(--muted);max-width:600px;margin:0 auto 1rem}
.legal{max-width:760px;margin:0 auto;padding-top:2rem;padding-bottom:3rem}
/* Full-size screenshot viewer: the carousel keeps its normal 1040px width, but the source PNGs
   are ~1920px captures -- clicking one opens it here at up to 96vw/96vh instead, which is
   typically most of the source resolution on a real desktop viewport (unlike the fixed-width
   carousel box, which downscales the same file by ~1.85x regardless of screen size). */
.lightbox{position:fixed;inset:0;background:rgba(15,23,42,0.86);display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;z-index:100;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:96vw;max-height:90vh;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 70px rgba(0,0,0,0.5);cursor:default}
.legal h1{font-size:1.9rem;margin:0 0 0.4rem}
.legal .updated{color:var(--muted);font-size:0.85rem;margin:0 0 1.5rem}
.legal h2{font-size:1.25rem;margin:2rem 0 0.75rem}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--text);line-height:1.65;margin:0 0 1rem}
.legal ul{color:var(--text);line-height:1.65;margin:0 0 1rem;padding-left:1.4rem}
.legal li{margin-bottom:0.4rem}
.legal a{color:var(--accent-2)}
@media (max-width:1080px){
  /* The full header needs about 1010px even in its compact form (see 1200px above), so the
     links fold into the menu below that rather than pushing Sign In off the page. */
  .nav-toggle{display:block}
}
@media (max-width:800px){
  .hero-stats{gap:1.25rem;flex-wrap:wrap}
}
/* Changelog (changelog.html, baked by js/build-changelog.js). A timeline: each release is a card
   beside its date, on a rail that runs down the month. The product's identity colour carries
   through its badge, its dot on the rail and the card's top edge; the IDE extensions share Chat's
   violet because they are one product in three editors. Change kinds are small coloured labels so
   the items, not the scaffolding, read first. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.changelog-page{--cl-line:#dbe2ea}
/* The filter and search hide things with the hidden attribute; the display rules below would
   otherwise override it. */
.changelog-page [hidden]{display:none !important}
.cl-chat-entry{--cl-c:var(--chat);--cl-tint:rgba(109,40,217,0.1)}
.cl-gateway-entry{--cl-c:var(--gateway);--cl-tint:rgba(14,116,144,0.1)}
.cl-cli-entry{--cl-c:var(--cli);--cl-tint:rgba(4,120,87,0.1)}
.cl-portal-entry{--cl-c:#334155;--cl-tint:rgba(51,65,85,0.1)}
.cl-site-entry{--cl-c:#1d4ed8;--cl-tint:rgba(29,78,216,0.1)}
.cl-hero{padding-bottom:1.5rem}
.cl-hero .hero-stats{margin-top:1.5rem}
.cl-hero .btn{vertical-align:middle}
.cl-feed{display:inline-flex;align-items:center;gap:0.45rem}
.cl-feed svg{width:16px;height:16px;fill:none;stroke:#ea580c;stroke-width:2.2;stroke-linecap:round}
.cl-feed svg circle{fill:#ea580c;stroke:none}
.cl-latest{max-width:960px;padding-top:0.5rem;padding-bottom:0.5rem}
.cl-latest-title{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin:0 0 0.7rem;font-weight:600}
.cl-latest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:0.65rem}
.cl-latest-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0.35rem;background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:0.85rem 0.9rem 0.8rem;text-decoration:none;color:var(--text);overflow:hidden;transition:border-color 0.15s ease,transform 0.15s ease,box-shadow 0.15s ease}
.cl-latest-item::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--cl-c)}
.cl-latest-item:hover{border-color:var(--cl-c);transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,0.07)}
.cl-latest-item strong{font-size:1.15rem;letter-spacing:-0.01em}
.cl-latest-item time{font-size:0.8rem;color:var(--muted)}
.cl-timeline{max-width:960px}
.cl-toolbar{position:sticky;top:var(--cl-sticky-top,72px);z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.75rem;margin:0 -0.75rem;padding:0.7rem 0.75rem;background:rgba(248,250,252,0.92);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color 0.15s ease}
.cl-toolbar.is-stuck{border-bottom-color:var(--card-border)}
.cl-chips{margin:0;gap:0.4rem}
.cl-chips .chip{padding:0.32rem 0.75rem}
.cl-chips .chip span{font-weight:500;opacity:0.65;margin-left:0.15rem}
.cl-chips .chip.active span{opacity:0.85}
.cl-search{position:relative;display:flex;align-items:center;flex:1 1 170px;max-width:220px}
.cl-search svg{position:absolute;left:0.7rem;width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.cl-search input{width:100%;font:inherit;font-size:0.88rem;padding:0.45rem 0.8rem 0.45rem 2rem;border:1px solid var(--card-border);border-radius:999px;background:var(--surface);color:var(--text)}
.cl-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(109,40,217,0.12)}
.cl-count{margin:0.6rem 0 0}
.cl-empty{margin:2rem 0;padding:1.5rem;text-align:center;color:var(--muted);background:var(--card);border:1px dashed var(--card-border);border-radius:12px}
.cl-reset{font:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.cl-month h2{font-size:1.35rem;letter-spacing:-0.01em;margin:2.25rem 0 1rem}
.cl-month h2 span{color:var(--muted);font-weight:500}
.cl-entry{position:relative;display:grid;grid-template-columns:88px 1fr;gap:0 1.25rem;scroll-margin-top:150px}
/* The rail: a line down the date column, broken by each release's dot. */
.cl-entry::before{content:"";position:absolute;left:87px;top:0;bottom:0;width:2px;background:var(--cl-line)}
.cl-month .cl-entry:first-of-type::before{top:1.35rem}
.cl-month .cl-entry:last-child::before{bottom:auto;height:1.35rem}
.cl-when{position:relative;text-align:right;padding:1.05rem 1rem 0 0;font-size:0.85rem;font-weight:600;color:var(--muted);white-space:nowrap}
.cl-dot{position:absolute;right:-7px;top:1.1rem;width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--cl-c);box-shadow:0 0 0 4px var(--bg)}
.cl-card{position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:1rem 1.35rem 1.1rem;margin:0 0 1rem;box-shadow:0 1px 2px rgba(15,23,42,0.04);transition:border-color 0.15s ease,box-shadow 0.15s ease}
.cl-card:hover{box-shadow:0 8px 24px rgba(15,23,42,0.06)}
.cl-entry:target .cl-card{border-color:var(--cl-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--cl-c) 16%,transparent)}
.cl-head{display:flex;align-items:center;flex-wrap:wrap;gap:0.35rem 0.6rem}
.cl-head h3{margin:0;font-size:1.12rem;letter-spacing:-0.01em}
.cl-badge{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.74rem;font-weight:700;letter-spacing:0.01em;border-radius:999px;padding:0.2rem 0.6rem 0.2rem 0.5rem;white-space:nowrap;color:var(--cl-c);background:var(--cl-tint)}
.cl-icon{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.cl-latest-tag{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#047857;background:rgba(4,120,87,0.1);border-radius:999px;padding:0.15rem 0.5rem}
.cl-anchor{margin-left:auto;display:inline-flex;padding:0.3rem;border-radius:6px;color:var(--muted);opacity:0;transition:opacity 0.15s ease,background 0.15s ease}
.cl-anchor svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cl-card:hover .cl-anchor,.cl-anchor:focus-visible{opacity:1}
.cl-anchor:hover{background:var(--bg);color:var(--cl-c)}
.cl-body{margin-top:0.2rem}
.cl-note{color:var(--muted);font-style:italic;margin:0.6rem 0 0}
.cl-kind{display:inline-block;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.06em;font-weight:700;border-radius:6px;padding:0.15rem 0.45rem;margin:1rem 0 0.35rem}
.cl-kind-added{color:#047857;background:rgba(4,120,87,0.09)}
.cl-kind-changed{color:#1d4ed8;background:rgba(29,78,216,0.08)}
.cl-kind-fixed{color:#6d28d9;background:rgba(109,40,217,0.08)}
.cl-kind-security{color:#b91c1c;background:rgba(185,28,28,0.08)}
.cl-kind-deprecated{color:#b45309;background:rgba(180,83,9,0.1)}
.cl-kind-removed{color:#475569;background:rgba(71,85,105,0.1)}
.cl-body ul{margin:0;padding:0;list-style:none;line-height:1.6}
.cl-body li{position:relative;padding-left:1.1rem;margin:0.35rem 0}
.cl-body li::before{content:"";position:absolute;left:0.2rem;top:0.68em;width:5px;height:5px;border-radius:50%;background:#cbd5e1}
.cl-body strong{color:var(--text)}
.cl-body code{font-size:0.86em;background:#f1f5f9;border:1px solid #e8edf3;border-radius:5px;padding:0.03rem 0.3rem;overflow-wrap:anywhere}
.cl-body a{color:var(--accent);text-underline-offset:2px}
/* Collapsed long releases: js/changelog.js adds .cl-js to the page, so without script every
   change shows. A search shows every match in place, collapsed or not. */
.cl-js .cl-long:not(.is-open):not(.is-searching) .cl-extra{display:none}
.cl-more{display:none;margin-top:0.75rem;font:inherit;font-size:0.85rem;font-weight:600;color:var(--cl-c);background:var(--cl-tint);border:0;border-radius:8px;padding:0.4rem 0.8rem;cursor:pointer}
.cl-js .cl-more{display:inline-block}
.cl-js .is-searching .cl-more{display:none}
.cl-more:hover{filter:brightness(0.95)}
mark.cl-hit{background:#fef08a;color:inherit;border-radius:2px;padding:0 1px}
@media (max-width:640px){
  .cl-toolbar{position:static;margin:0;padding:0.5rem 0}
  .cl-search{flex:1 1 100%;max-width:none}
  .cl-entry{grid-template-columns:1fr}
  .cl-entry::before,.cl-dot{display:none}
  .cl-when{text-align:left;padding:0 0 0.35rem}
  .cl-card{padding:0.9rem 1rem}
  .cl-anchor{opacity:1}
  .cl-latest-grid{grid-template-columns:repeat(2,1fr)}
}
/* Blog (blog.html, blog/*.html), generated by js/build-blog.js. The index is a column of cards;
   a post is a single reading column as wide as the changelog's. Each post can have a cover image. */
.blog-hero{padding-bottom:1.5rem}
.blog-hero .btn{vertical-align:middle}
.blog-list-wrap{padding-top:0.5rem;padding-bottom:4rem}
/* Newest post full width, the rest two to a row; one column on narrow screens. */
.blog-list{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.blog-card:first-child,.blog-card:nth-child(even):last-child{grid-column:1/-1}
.blog-card:first-child h2{font-size:1.6rem}
.blog-card:first-child article{padding:1.75rem 2rem}
.blog-card article{height:100%;background:var(--card);border:1px solid var(--card-border);border-radius:14px;padding:1.4rem 1.6rem;overflow:hidden;transition:border-color 0.15s ease,box-shadow 0.15s ease}
.blog-card article:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--card-border));box-shadow:0 4px 18px rgba(15,23,42,0.06)}
.blog-card-img{display:block;margin:-1.4rem -1.6rem 1.1rem;border-bottom:1px solid var(--card-border)}
.blog-card-img img{display:block;width:100%;height:auto;aspect-ratio:2/1}
.blog-card:first-child article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 2rem;align-items:center}
.blog-card:first-child .blog-card-img{grid-column:2;grid-row:1;margin:-1.75rem -2rem -1.75rem 0;border-bottom:0;border-left:1px solid var(--card-border);align-self:stretch;display:flex;align-items:center;background:#f5f3ff}
.blog-card:first-child .blog-card-text{grid-column:1;grid-row:1}
.blog-card h2{font-size:1.3rem;line-height:1.3;margin:0.35rem 0 0.5rem}
.blog-card h2 a{color:var(--text);text-decoration:none}
.blog-card h2 a:hover{color:var(--accent)}
.blog-card p{color:var(--muted);line-height:1.6;margin:0 0 0.85rem}
.blog-card .blog-card-meta{font-size:0.85rem;margin:0}
.blog-tags{list-style:none;display:flex;flex-wrap:wrap;gap:0.4rem;padding:0;margin:0}
.blog-tags li{font-size:0.75rem;font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);border-radius:999px;padding:0.15rem 0.6rem}
.blog-post{max-width:960px;padding-top:2.5rem;padding-bottom:1.5rem}
.blog-post-head{padding-bottom:1.5rem;border-bottom:1px solid var(--card-border);margin-bottom:2rem}
.blog-crumbs a{font-size:0.85rem;font-weight:600;color:var(--accent-2);text-decoration:none}
.blog-crumbs a::before{content:"\2190\00a0"}
.blog-crumbs a:hover{text-decoration:underline}
.blog-post h1{font-size:clamp(1.8rem,4.2vw,2.5rem);line-height:1.2;letter-spacing:-0.01em;margin:0.6rem 0 0.75rem}
.blog-byline{color:var(--muted);font-size:0.9rem;margin:0 0 0.9rem}
.blog-cover{margin:0 0 2rem}
.blog-cover img{display:block;width:100%;height:auto;aspect-ratio:2/1;border:1px solid var(--card-border);border-radius:14px}
.blog-toc{background:var(--surface);border:1px solid var(--card-border);border-radius:12px;padding:1rem 1.25rem;margin:0 0 2rem;font-size:0.92rem}
.blog-toc strong{display:block;font-size:0.75rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem}
.blog-toc ol{margin:0;padding-left:1.2rem;line-height:1.7}
.blog-toc a{color:var(--text);text-decoration:none}
.blog-toc a:hover{color:var(--accent)}
.blog-body{font-size:1.06rem;line-height:1.75;color:var(--text)}
.blog-body p,.blog-body ul,.blog-body ol{margin:0 0 1.2rem}
.blog-body ul,.blog-body ol{padding-left:1.4rem}
.blog-body li{margin-bottom:0.5rem}
.blog-body h2{font-size:1.45rem;line-height:1.3;margin:2.4rem 0 0.8rem;scroll-margin-top:110px}
.blog-body h3{font-size:1.15rem;line-height:1.35;margin:1.8rem 0 0.6rem;scroll-margin-top:110px}
.blog-body a{color:var(--accent-2)}
.blog-body code{font-size:0.86em;background:#f1f5f9;border:1px solid #e8edf3;border-radius:5px;padding:0.05rem 0.3rem;overflow-wrap:anywhere}
.blog-body blockquote{margin:0 0 1.2rem;padding:0.2rem 0 0.2rem 1rem;border-left:3px solid var(--accent);color:var(--muted)}
.blog-body blockquote p{margin:0}
.blog-code{position:relative;margin:0 0 1.4rem;background:#0f172a;border-radius:12px;overflow:hidden}
.blog-code pre{margin:0;padding:1.1rem 1.25rem;overflow-x:auto;color:#e2e8f0;font-size:0.86rem;line-height:1.6}
.blog-code code{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;background:none;border:0;padding:0;font-size:inherit;overflow-wrap:normal}
.blog-code-lang+pre{padding-top:1.7rem}
.blog-code-lang{position:absolute;top:0.45rem;right:0.75rem;font-size:0.68rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#94a3b8}
.blog-figure{margin:0 0 1.4rem}
.blog-figure img{display:block;max-width:100%;height:auto;border:1px solid var(--card-border);border-radius:10px}
.blog-post-foot{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--card-border)}
.blog-more{max-width:960px;margin:0 auto;padding:0 2rem 4rem}
.blog-more h2{font-size:1.05rem;margin:0 0 0.5rem}
.blog-more ul{list-style:none;margin:0;padding:0}
.blog-more li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:0.7rem 0;border-top:1px solid var(--card-border)}
.blog-more a{color:var(--text);font-weight:600;text-decoration:none}
.blog-more a:hover{color:var(--accent)}
.blog-more time{color:var(--muted);font-size:0.85rem;white-space:nowrap}
@media (max-width:760px){
  .blog-list{grid-template-columns:minmax(0,1fr)}
  .blog-card:first-child h2{font-size:1.3rem}
  .blog-card:first-child article{padding:1.4rem 1.6rem;display:block}
  .blog-card:first-child .blog-card-img{margin:-1.4rem -1.6rem 1.1rem;border-left:0;border-bottom:1px solid var(--card-border);display:block}
}
@media (max-width:640px){
  .blog-post{padding-top:1.5rem}
  .blog-body{font-size:1rem}
  .blog-card article{padding:1.15rem 1.2rem}
  .blog-card .blog-card-img,.blog-card:first-child .blog-card-img{margin:-1.15rem -1.2rem 1rem}
  .blog-more{padding:0 1rem 3rem}
  .blog-more li{flex-direction:column;gap:0.15rem}
}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}