/* Site v2: adapts the pages kept from the earlier design (FAQ, comparisons, catalogs, legal,
   changelog, blog, docs) to the v2 look. js/build-v2-chrome.js loads it after the page's own
   stylesheet (css/v2-content.css, or docs/docs.css) and css/v2.css, and marks those pages
   body.legacy; v2-generated pages never load it. */

/* ------------------------------------------------------------------ the earlier design's variables, on v2 tokens */
:root[data-theme]{
  --bg:var(--plain); --surface:#fff; --card:#fff; --card-border:var(--plain-line);
  --docs-bg:var(--plain); --docs-sidebar-bg:var(--plain); --docs-border:var(--plain-line); --docs-text:var(--text);
  --docs-muted:var(--muted); --docs-accent:var(--label-plain); --docs-accent-soft:color-mix(in srgb,var(--label-plain) 8%,transparent);
  --docs-code-bg:var(--code); --docs-code-text:var(--code-text);
}
body.legacy{--accent:var(--label-plain);--accent-2:var(--label-plain);font-family:var(--sans)}
/* the earlier stylesheet reserved the scrollbar's width on every page; v2 pages don't */
html:has(body.legacy){overflow-y:auto;scrollbar-gutter:auto}
.legacy [id]{scroll-margin-top:90px}

/* ------------------------------------------------------------------ type and links */
.legacy main h2{font-size:clamp(1.55rem,2.5vw,2.05rem);line-height:1.15;margin:0 0 .55em}
.legacy main h3{font-size:1.12rem;line-height:1.3;font-weight:700}
.legacy main h4{font-family:var(--head);font-weight:700;font-size:1rem;margin:0 0 .4em}
.legacy .container{max-width:var(--wrap);padding:2.75rem 24px}
.legacy .section-lead{color:var(--muted);font-size:1.04rem;line-height:1.6;max-width:760px}
.legacy .muted{color:var(--muted)}
.legacy main :is(p,li,td,dd,.a,.lead,.section-lead,figcaption,.updated) a:not(.btn){color:var(--label-plain);text-underline-offset:2px}
.legacy main code{font-size:.88em}
.legacy main p{line-height:1.62}

/* ------------------------------------------------------------------ the hero: dark, like every v2 page's */
.legacy .hero{background:var(--deep);color:var(--deep-text);text-align:left;padding:76px 0 70px}
.legacy .hero .container{position:relative;z-index:1;padding-top:0;padding-bottom:0}
.legacy .hero .eyebrow{color:var(--label-deep);margin:0}
.legacy .hero h1{color:var(--deep-strong);font-size:clamp(2.3rem,4.4vw,3.5rem);margin:16px 0 0;max-width:900px}
.legacy .hero .lead{color:var(--deep-muted);font-size:1.12rem;line-height:1.6;max-width:780px;margin:18px 0 0}
.legacy main .hero :is(p,.lead,li,span) a:not(.btn){color:var(--label-deep)}
.legacy .hero .hero-ctas{justify-content:flex-start}
.legacy .hero .hero-stats{justify-content:flex-start;gap:40px;margin-top:34px}
.legacy .hero .stat{align-items:flex-start}
.legacy .hero .stat strong{background:var(--hl);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--head);font-size:1.9rem}
.legacy .hero .stat span{color:var(--deep-muted)}
.legacy .hero .chip,.legacy .hero .filter-chips .chip{color:var(--deep-text)}
.legacy .hero .updated{color:var(--deep-muted)}

/* ------------------------------------------------------------------ buttons, badges, chips */
.legacy main .btn{border-radius:calc(var(--radius) - 3px);font:600 .95rem var(--sans);padding:11px 18px;border:1px solid var(--plain-line);color:var(--text);background:transparent}
.legacy main .btn:hover{border-color:var(--label-plain)}
.legacy main .btn.primary{background:var(--cta);color:var(--cta-text);border-color:transparent;box-shadow:var(--cta-shadow)}
.legacy main .btn.primary:hover{background:var(--cta-hover,var(--cta))}
.legacy main .hero .btn:not(.primary){color:var(--deep-text);border-color:var(--deep-line-2);background:var(--deep-chip)}
.legacy .badge{background:transparent}
.legacy .chip{border-radius:999px}

/* ------------------------------------------------------------------ cards: one quiet style, blue on hover */
/* the same card surface as v2.css: the link cards (blog, docs home) rise on hover, the rest stay still */
.legacy :is(.feature,.mcp-card,.provider-tile,.blog-card,.docs-home-card,.compare-pair,.card){background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-radius:var(--radius)}
.legacy :is(.feature,.mcp-card,.provider-tile,.compare-pair):hover{transform:none;box-shadow:var(--card-shadow);border-color:var(--card-line)}
.legacy :is(.blog-card,.docs-home-card){transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.legacy :is(.blog-card,.docs-home-card):hover{transform:translateY(-2px);box-shadow:var(--card-shadow-hover);border-color:var(--card-line-hover)}
.legacy .mcp-avatar{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.legacy .feature-icon,.legacy .feature:nth-child(n) .feature-icon{background:color-mix(in srgb,var(--label-plain) 10%,transparent);color:var(--label-plain)}
.legacy .mcp-tag{background:var(--plain);border:1px solid var(--plain-line);color:var(--muted)}
.legacy .mcp-search,.legacy .models-search,.legacy .cl-search{border-color:var(--plain-line);background:var(--plain-2)}

/* ------------------------------------------------------------------ FAQ accordions (.qa): js/v2.js opens one at a time */
.legacy .accordion{border-top:1px solid var(--plain-line);margin-top:8px}
.legacy .qa{border-bottom:1px solid var(--plain-line);background:none;border-radius:0;margin:0;padding:0;box-shadow:none}
.legacy .qa h3{margin:0;font:inherit;letter-spacing:0}
.legacy .qa .q{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;width:100%;padding:18px 0;cursor:pointer;font:600 1.05rem/1.4 var(--sans);color:var(--text)}
.legacy .qa .q::after{content:"+";color:var(--label-plain);font-weight:700;font-size:1.3rem;line-height:1}
.legacy .qa.open .q::after{content:"\2013"}
.legacy .qa .q:focus-visible{outline:2px solid var(--label-plain);outline-offset:4px;border-radius:4px}
.legacy .qa .a{display:none;color:var(--muted);padding:0 0 20px;line-height:1.65;max-width:820px;background:none;border:0;border-radius:0}
.legacy .qa.open .a{display:block}

/* ------------------------------------------------------------------ tables */
.legacy .compare-table-wrap{border-color:var(--plain-line);border-radius:var(--radius);background:var(--plain-2)}
.legacy .compare-table th{font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--plain)}
.legacy .compare-table td,.legacy .compare-table th{border-color:var(--plain-line)}

/* ------------------------------------------------------------------ legal pages and prose */
.legacy .legal{max-width:860px}
.legacy .legal h2{font-size:1.45rem;margin-top:2.2em}
.legacy .legal h3{margin-top:1.6em}
.legacy .legal p,.legacy .legal li{color:var(--text);line-height:1.7}
.legacy .updated{color:var(--muted);font-size:.9rem}

/* ------------------------------------------------------------------ docs: the v2 header, then a toolbar for search and the sidebar */
body.docs.legacy{--docs-topbar-h:119px}
.docs-bar{position:sticky;top:67px;z-index:40;background:color-mix(in srgb,var(--plain) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--plain-line)}
.docs-bar-inner{max-width:1440px;margin:0 auto;height:52px;display:flex;align-items:center;gap:14px;padding:0 1.25rem}
.docs-bar-title{font:600 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--label-plain);text-decoration:none}
.docs-bar .docs-search{margin-left:auto;width:min(380px,55vw)}
.docs-bar .docs-search input{width:100%;font:inherit;font-size:.9rem;padding:8px 12px;border-radius:10px;border:1px solid var(--plain-line);background:var(--plain-2);color:var(--text)}
.docs-bar .docs-search input:focus{outline:2px solid color-mix(in srgb,var(--label-plain) 40%,transparent);border-color:var(--label-plain)}
.legacy .docs-content h1{font-size:clamp(1.9rem,3vw,2.4rem);line-height:1.12}
.legacy .docs-content h2{font-size:1.4rem;line-height:1.25}
.legacy .docs-content h3{font-size:1.08rem}
.legacy .docs-content a{color:var(--label-plain)}
.legacy .docs-nav-link{color:var(--muted)}
.legacy .docs-nav-link:hover{color:var(--text)}
.legacy .docs-nav-label{font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.legacy .docs-pagenav a{border-color:var(--plain-line);border-radius:var(--radius)}
/* a code block outside .docs-code-wrap scrolls inside itself rather than widening the page */
.legacy .docs-content pre{max-width:100%;overflow-x:auto}
.legacy .docs-pagenav a:hover{border-color:var(--label-plain)}
.legacy .docs + .v2-footer,.legacy .docs-layout + .v2-footer{margin-top:0}

/* ------------------------------------------------------------------ blog and changelog */
/* as specific as the content-link rule above, which otherwise wins */
.legacy main .blog-card h2 a:not(.btn){color:var(--text);text-decoration:none}
.legacy main .blog-card h2 a:not(.btn):hover{color:var(--label-plain)}
.legacy .cl-latest-title{font:600 .76rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.legacy main.success > .logo,.legacy main.success > a.logo{display:none}

/* docs home cards read like the other link cards: a dark title, an arrow on hover */
.legacy .docs-content a.docs-home-card{color:var(--muted);text-decoration:none}
.legacy .docs-home-card strong{display:flex;align-items:center;gap:7px;color:var(--text)}
.legacy .docs-home-card strong::after{content:"\2192";color:var(--label-plain);opacity:0;transform:translateX(-5px);transition:opacity .16s ease,transform .16s ease}
.legacy .docs-home-card:hover strong::after{opacity:1;transform:none}
/* blog cards: titles sized for a card (the content-heading rule made them 2rem), the newest post larger */
.legacy .blog-list .blog-card h2{font-size:1.3rem;line-height:1.25;margin:.25em 0 .45em}
.legacy .blog-list .blog-card:first-child h2{font-size:1.7rem;line-height:1.15}
/* the docs sidebar: white like the page, set off by its hairline, with a quiet scrollbar */
.legacy .docs-sidebar{scrollbar-width:thin;scrollbar-color:var(--plain-line) transparent}