:root {
  color-scheme: dark;
  --bg: #07131f; --bg-soft: #0b1c2b; --panel: #0e2233; --panel-raised: #122b40;
  --line: #234158; --line-strong: #315a76; --text: #f3f7fb; --muted: #a4b8c9;
  --dim: #71899b; --accent: #63e6be; --accent-ink: #06271f; --accent2: #9db7ff;
  --warn: #f6c86b; --danger: #ff9aa5; --code: #06101a; --sidebar: 260px;
  --toc: 230px; --radius: 14px; --content: 900px;
  /* Spacing tokens (skala 4px) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg) radial-gradient(1100px 520px at 75% -180px, rgba(99,230,190,.09), transparent 60%), radial-gradient(900px 480px at -10% 10%, rgba(157,183,255,.06), transparent 55%); background-attachment: fixed; color: var(--text); font: 16px/1.65 "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body::selection { background: #287d6b; color: #fff; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #9af4d5; text-decoration: underline; }
button, input, select { font: inherit; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 9px 15px; z-index: 99; font-weight: 700; }
.skip-link:focus { left: 10px; top: 10px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 5px; box-shadow: 0 0 0 6px rgba(99,230,190,.22); }
.mobile-only { display: none; }

.topbar { height: 72px; border-bottom: 1px solid rgba(49,90,118,.65); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; background: rgba(7,19,31,.86); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 1px 0 rgba(99,230,190,.08), 0 8px 32px rgba(0,0,0,.35); z-index: 20; }
.topbar-left { display: flex; align-items: center; gap: 17px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 750; color: var(--text); white-space: nowrap; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 31px; height: 31px; border: 1px solid #4c7e91; border-radius: 9px; display: grid; place-items: center; color: var(--accent); font-size: 16px; background: #0b2638; box-shadow: inset 0 0 0 1px rgba(99,230,190,.08); }
.searchbox input { width: 270px; max-width: 30vw; background: #091a29; border: 1px solid var(--line); color: var(--text); padding: 9px 13px; border-radius: 9px; outline: none; }
.searchbox input::placeholder { color: #7890a2; }
.searchbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,230,190,.12); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar-nav { display: flex; align-items: center; gap: 2px; }
.top-link { color: #b5c7d5; padding: 8px 11px; border-radius: 8px; font-weight: 600; white-space: nowrap; font-size: 13.5px; }
.top-link:hover { background: #102a3d; color: var(--text); text-decoration: none; }
.top-link.active { background: #123a4b; color: #e5fff7; }
.top-link.cta-primary { background: var(--accent); color: var(--accent-ink, #0b0d10); font-weight: 700; border-radius: 8px; padding: 8px 14px; }
.top-link.cta-primary:hover { filter: brightness(1.1); text-decoration: none; }

/* Product dropdown menu */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { background: transparent; border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 8px 11px; border-radius: 8px; font-weight: 600; color: #b5c7d5; font-size: 13.5px; }
.nav-dropdown-trigger:hover, .nav-dropdown.open .nav-dropdown-trigger { background: #102a3d; color: var(--text); }
.nav-caret { font-size: 10px; opacity: .75; transition: transform .15s ease; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 520px; background: #091a29; border: 1px solid rgba(49,90,118,.65); border-radius: 12px; padding: 18px; box-shadow: 0 16px 48px rgba(0,0,0,.5); z-index: 50; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nav-dropdown.open .nav-dropdown-menu { display: grid; }
.nav-menu-col { display: flex; flex-direction: column; gap: 4px; }
.nav-menu-heading { font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: #7fa0b6; margin-bottom: 6px; padding: 0 8px; }
.nav-menu-link { display: block; padding: 7px 8px; border-radius: 6px; color: #c0d0db; font-size: 13px; font-weight: 500; text-decoration: none; }
.nav-menu-link:hover { background: #102a3d; color: var(--text); text-decoration: none; }
.nav-menu-link.active { background: #123a4b; color: #e5fff7; font-weight: 600; }

/* Mobile nav drawer */
.mobile-nav { position: fixed; left: 0; top: 0; bottom: 0; width: 320px; max-width: 85vw; background: #091a29; border-right: 1px solid rgba(49,90,118,.65); z-index: 50; transform: translateX(-105%); transition: transform .2s ease; overflow: hidden; display: flex; flex-direction: column; box-shadow: 20px 0 60px rgba(0,0,0,.5); }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(49,90,118,.45); flex-shrink: 0; }
.mobile-nav-body { padding: 16px 20px; flex: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.mobile-nav-section { display: flex; flex-direction: column; gap: 3px; }
.mobile-nav-heading { font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: #7fa0b6; margin-bottom: 4px; }
.mobile-nav-link { padding: 8px 10px; border-radius: 7px; color: #c0d0db; font-size: 14px; text-decoration: none; }
.mobile-nav-link:hover { background: #102a3d; color: var(--text); text-decoration: none; }
.mobile-nav-link.active { background: #123a4b; color: #e5fff7; font-weight: 600; }
.mobile-nav-actions { display: flex; gap: 10px; flex-direction: column; padding: 16px 20px; border-top: 1px solid rgba(49,90,118,.35); background: #091a29; flex-shrink: 0; }
.mobile-nav-actions .btn { text-align: center; }

/* Page head bar on docs */
.page-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.docs-nav-toggle { display: none !important; font-size: 12.5px; padding: 6px 12px; }

/* Production site footer */
.site-footer { margin-top: 80px; border-top: 1px solid rgba(49,90,118,.55); padding: 56px 48px 36px; background: transparent; }
.footer-container { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 48px; }
.footer-brand-col { display: flex; flex-direction: column; gap: 12px; }
.footer-tagline { color: #70899a; font-size: 13.5px; line-height: 1.5; margin: 0; max-width: 260px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-heading { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: #7fa0b6; margin-bottom: 4px; }
.footer-link { color: #9eb5c6; font-size: 13.5px; text-decoration: none; }
.footer-link:hover { color: var(--text); text-decoration: underline; }
.footer-bottom { max-width: 1180px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(49,90,118,.3); color: #70899a; font-size: 12px; }


/* Language picker: themed dropdown (button + listbox). */
.langsel { position: relative; }
.lang-trigger { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #0b1c2b; color: #c9d7e1; border-radius: 9px; padding: 8px 11px; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px; transition: border-color .15s, background .15s; }
.lang-trigger:hover { border-color: var(--accent); background: #102a3d; color: #fff; }
.lang-trigger .lang-globe { font-size: 14px; line-height: 1; }
.lang-trigger .lang-code { display: none; font: 700 11px/1 ui-monospace, monospace; letter-spacing: .04em; }
.lang-trigger .lang-caret { font-size: 10px; opacity: .75; transition: transform .15s; }
.langsel.open .lang-caret { transform: rotate(180deg); }
.langsel.open .lang-trigger { border-color: var(--accent); color: #fff; }
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; margin: 0; padding: 6px; list-style: none; background: #0a1e2e; border: 1px solid var(--line-strong, #315a76); border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.5); z-index: 70; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.langsel.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .15s ease, transform .15s ease, visibility 0s; }
.lang-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #c9d7e1; text-decoration: none; font-size: 13.5px; }
.lang-option:hover, .lang-option:focus-visible { background: #123049; color: #fff; text-decoration: none; outline: none; }
.lang-option.active { background: #0f3b33; color: #d7fff2; }
.lang-option.unavailable { opacity: .45; cursor: not-allowed; }
.lang-option.unavailable:hover { background: transparent; color: #c9d7e1; }
.lang-flag { display: inline-grid; place-items: center; width: 30px; height: 22px; flex-shrink: 0; border-radius: 5px; background: #12314a; color: #9ec7e6; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .04em; }
.lang-option.active .lang-flag { background: #1c5b4a; color: #b6ffe4; }
.lang-name { flex: 1; }
.lang-check { opacity: 0; color: var(--accent); font-weight: 800; }
.lang-option.active .lang-check { opacity: 1; }

.iconbtn { background: #0d2537; border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.iconbtn:hover { border-color: var(--accent); }

.shell { min-height: calc(100vh - 72px); display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr) var(--toc); }
.shell.home { display: block; }
.main { min-width: 0; }
.sidebar { position: sticky; top: 72px; height: calc(100vh - 72px); border-right: 1px solid rgba(49,90,118,.55); background: #091a29; padding: 17px 12px 32px; overflow-y: auto; }
.nav-section { margin: 21px 0 7px; padding: 0 10px; color: #7fa0b6; font-weight: 750; font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; }
.nav-link { display: block; padding: 7px 10px; border-radius: 8px; color: #9eb5c6; margin: 1px 0; font-size: 13.5px; }
.nav-link:hover { background: #102a3d; color: var(--text); text-decoration: none; }
.nav-link.active { background: #123a4b; color: #e5fff7; box-shadow: inset 2px 0 0 var(--accent); }
.content { max-width: var(--content); margin: 0 auto; padding: 52px 48px 92px; }
.page-head { margin-bottom: 22px; }
.eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: #7fa0b6; text-transform: uppercase; }
.content h1 { font-size: clamp(30px,3.2vw,42px); line-height: 1.1; margin: 10px 0 13px; letter-spacing: -.035em; background: linear-gradient(120deg, #f3f7fb 55%, #9af4d5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.content h2 { font-size: 25px; line-height: 1.2; margin: 54px 0 13px; scroll-margin-top: 94px; letter-spacing: -.025em; }
.content h3 { font-size: 18px; line-height: 1.3; margin: 30px 0 9px; scroll-margin-top: 94px; }
.content h4 { font-size: 15px; margin: 22px 0 8px; }
.content p { color: #c3d1dc; max-width: 78ch; }
.page-badges { margin: 7px 0 10px; }
.lead { font-size: 17px; color: #aec1cf; max-width: 72ch; }
.muted { color: var(--muted); }
.footer { margin: 10px auto 0; border-top: 1px solid rgba(49,90,118,.55); padding: 20px 48px 32px; color: #70899a; font-size: 12px; max-width: var(--content); }

.shell.home .main { max-width: 1180px; margin: 0 auto; padding: 0 34px; }
.shell.home .main > h1 { font-size: clamp(45px,7vw,82px); line-height: .98; letter-spacing: -.065em; max-width: 850px; margin: 0; padding-top: 88px; word-break: normal; hyphens: none; overflow-wrap: normal; }
.shell.home .main > h1::after { content: "."; color: var(--accent); }
.shell.home .main > h2 { font-size: 30px; margin-top: 72px; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 42px; align-items: end; margin: 34px 0 68px; }
.hero-kicker { color: var(--accent) !important; font: 700 11.5px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 16px !important; padding: 6px 12px; display: inline-block; background: rgba(99,230,190,.08); border: 1px solid rgba(99,230,190,.25); border-radius: 999px; }
.hero-copy { color: #c0d0db; font-size: 18px; line-height: 1.6; max-width: 54ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.runtime-panel { border: 1px solid #35647d; background: linear-gradient(145deg,#102d42,#0a1b2a); border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.runtime-panel header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(99,230,190,.2); padding-bottom: 13px; margin-bottom: 14px; font: 12px ui-monospace,SFMono-Regular,Consolas,monospace; color: #a5c0cf; }
.runtime-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; display: inline-block; margin-right: 7px; box-shadow: 0 0 12px var(--accent); }
.runtime-row { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid rgba(49,90,118,.42); font: 12.5px ui-monospace,SFMono-Regular,Consolas,monospace; }
.runtime-row:last-child { border-bottom: 0; }
.runtime-row span:first-child { color: #7fa0b6; }
.runtime-row span:last-child { color: #e2f9f1; text-align: right; }
.home-wrap { max-width: 980px; margin: 0 auto; padding: 48px 44px 70px; }
.quick { display: flex; gap: 11px; margin: 22px 0 6px; flex-wrap: wrap; }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 20px 0; }
.card { border: 1px solid rgba(49,90,118,.7); background: linear-gradient(180deg, #0d2334 0%, #0b1e2e 100%); border-radius: 14px; padding: 22px 22px 24px; color: var(--text); display: block; min-height: 140px; transition: border-color .18s,transform .18s,background .18s,box-shadow .18s; box-shadow: 0 2px 10px rgba(0,0,0,.18); position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(99,230,190,.45), transparent); opacity: 0; transition: opacity .18s; }
.card:hover { border-color: #4b88a2; background: linear-gradient(180deg, #11293c 0%, #0e2435 100%); text-decoration: none; transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.card:hover::before { opacity: 1; }

/* Download CTA disabled while artifact is in preparation */
.btn.hero-cta-disabled { position: relative; opacity: .55; cursor: not-allowed; filter: grayscale(.4); box-shadow: none; pointer-events: auto; }
.btn.hero-cta-disabled:hover { background: linear-gradient(135deg, #63e6be 0%, #45d1a5 100%); transform: none; box-shadow: none; }
.btn.hero-cta-disabled:disabled { cursor: not-allowed; }
.btn.hero-cta-disabled::after { content: 'Soon'; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #07131f; color: var(--accent); border: 1px solid rgba(99,230,190,.4); border-radius: 4px; padding: 1px 5px; position: absolute; top: -8px; right: -6px; }
.card-icon { width: 33px; height: 33px; border: 1px solid #39647a; border-radius: 9px; display: grid; place-items: center; margin-bottom: 12px; color: var(--accent); font-size: 13px; }
.card h3 { font-size: 15px; margin: 0 0 6px; color: var(--text); }
.card p { margin: 0; color: var(--muted); font-size: 13px; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 10px; margin: 20px 0; }
.kv { border: 1px solid var(--line); background: #0c2030; border-radius: 11px; padding: 13px 15px; }
.kv .k { color: #7fa0b6; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; }
.kv .v { font-size: 14px; margin-top: 4px; color: var(--text); }

.btn { display: inline-block; border: 1px solid var(--line-strong); padding: 12px 20px; border-radius: 10px; background: #112b3e; color: var(--text); cursor: pointer; font-weight: 700; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.btn:hover { border-color: var(--accent); background: #15384b; text-decoration: none; transform: translateY(-1px); }
.btn.primary { background: linear-gradient(135deg, #63e6be 0%, #45d1a5 100%); color: #052a21; border-color: transparent; box-shadow: 0 10px 28px rgba(99,230,190,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.btn.primary:hover { background: linear-gradient(135deg, #8af2d2 0%, #58debb 100%); color: #03231c; box-shadow: 0 14px 36px rgba(99,230,190,.38), inset 0 1px 0 rgba(255,255,255,.4); transform: translateY(-1px); }
.badge { display: inline-block; border: 1px solid #2a475e; border-radius: 999px; padding: 2.5px 8.5px; margin: 2px 3px 2px 0; color: #b5c7d5; font-size: 11px; font-weight: 650; white-space: nowrap; transition: all .15s; }
.badge.good,.badge.stable { color: var(--accent); border-color: rgba(99,230,190,.3); background: rgba(99,230,190,.08); }
.badge.beta { color: var(--warn); border-color: rgba(246,200,107,.3); background: rgba(246,200,107,.08); }
.badge.exp,.badge.experimental { color: #b7c8ff; border-color: rgba(157,183,255,.3); background: rgba(157,183,255,.08); }
.badge.plan,.badge.planned { color: #9badbb; border-style: dashed; border-color: #41637d; }
.badge.available { color: var(--accent); border-color: rgba(99,230,190,.3); background: rgba(99,230,190,.08); }
.badge.gated { color: #fcd34d; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); font-weight: 700; }
.badge.quant { color: #7dd3fc; border-color: rgba(56,189,248,.3); background: rgba(56,189,248,.08); font-family: ui-monospace, monospace; }
.badge.params { color: #94a3b8; border-color: rgba(148,163,184,.25); background: rgba(148,163,184,.07); font-weight: 700; }
.badge.neutral { color: #9badbb; border-color: #2a475e; background: rgba(255,255,255,.03); }
a.badge:hover { text-decoration: none; border-color: var(--accent); color: #fff; }
.badge.cap-chat { color: #67e8f9; border-color: rgba(6,182,212,.3); background: rgba(6,182,212,.08); }
.badge.cap-tools { color: #93c5fd; border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.08); }
.badge.cap-vision { color: #fcd34d; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08); }
.badge.cap-coding { color: #86efac; border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.badge.cap-reasoning { color: #f472b6; border-color: rgba(236,72,153,.3); background: rgba(236,72,153,.08); }
.badge.cap-embeddings { color: #a5b4fc; border-color: rgba(99,102,241,.3); background: rgba(99,102,241,.08); }
.badge.cap-audio { color: #c084fc; border-color: rgba(168,85,247,.3); background: rgba(168,85,247,.08); }
.badge.lang-id { color: #fca5a5; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); font-weight: 700; }

.codewrap { position: relative; margin: 19px 0; }
.codehead { display: flex; justify-content: space-between; align-items: center; background: #0b1c2b; border: 1px solid var(--line); border-bottom: 0; border-radius: 11px 11px 0 0; padding: 7px 13px; color: #87a2b5; font-size: 11.5px; }
.copy { background: none; border: 0; color: #b5c7d5; cursor: pointer; font-size: 11.5px; padding: 3px 7px; border-radius: 5px; }
.copy:hover { color: var(--text); background: #17354a; }
.copy.ok { color: var(--accent); }
pre { margin: 0; background: var(--code); border: 1px solid var(--line); border-radius: 0 0 11px 11px; padding: 16px 17px; overflow: auto; color: #dbeaf4; line-height: 1.58; }
code { font-family: "Cascadia Code","SFMono-Regular",Consolas,monospace; font-size: 12.5px; }
p code,td code,li code,h2 code,h3 code { background: #0b1c2b; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
li code { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.tok-kw { color: #ff7b72; font-weight: 600; }
.tok-fn { color: #d2a8ff; font-weight: 600; }
.tok-str { color: #a5d6ff; }
.tok-com { color: #8b949e; font-style: italic; }
.tok-num { color: #79c0ff; }
.tok-flag { color: #7ee787; }
.tok-var { color: #ffa657; }
.callout { border-left: 3px solid var(--accent2); background: #0d2233; padding: 13px 15px; margin: 20px 0; border-radius: 0 10px 10px 0; color: #bdcfdb; }
.callout-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px; color: var(--accent2); font-weight: 750; }
.callout.warning { border-color: var(--warn); }
.callout.warning .callout-title { color: var(--warn); }
.callout.tip { border-color: var(--accent); }
.callout.tip .callout-title { color: var(--accent); }
.callout.note { border-color: #557286; }
.callout.note .callout-title { color: #a5bac8; }
.callout.important { border-color: var(--accent2); }
blockquote { border-left: 3px solid #557286; margin: 16px 0; padding: 5px 15px; color: var(--muted); }
.tablewrap { overflow-x: auto; margin: 16px 0 26px; }
table { border-collapse: collapse; width: 100%; }
th,td { border-bottom: 1px solid var(--line); text-align: left; padding: 10px; vertical-align: top; font-size: 13.5px; }
th { font-size: 11.5px; color: #9eb5c6; font-weight: 750; letter-spacing: .02em; }
tbody tr:hover { background: #0d2638; }
.status-table { min-width: 700px; }
.status-table small { color: #adc0cf; font-weight: 400; }
ul,ol { color: #c3d1dc; padding-left: 25px; }
li { margin: 5px 0; }

.toc { position: sticky; top: 72px; height: calc(100vh - 72px); border-left: 1px solid rgba(49,90,118,.55); padding: 38px 18px 28px; overflow-y: auto; background: #091a29; }
.toc-title { font-size: 10.5px; color: #7fa0b6; margin-bottom: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 750; }
.toc-link { display: block; color: #87a3b5; padding: 5px 0 5px 12px; border-left: 1px solid #29465b; font-size: 12.5px; }
.toc-link:hover { color: #d5e3ec; text-decoration: none; }
.toc-link.active { color: var(--accent); border-color: var(--accent); }
.toc-link.lvl3,.toc-link.lvl4 { padding-left: 17px; font-size: 12px; }
.tabs { margin: 19px 0; }
.tabbar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; color: #8ea6b7; padding: 8px 14px; cursor: pointer; font-size: 13px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tabpanel.hidden { display: none; }
.tabpanel { padding-top: 8px; }
.tabpanel .codewrap:first-child { margin-top: 4px; }

/* ================= Modern Model Catalog & Discovery UI ================= */

/* Wide Catalog Page Layout (replaces standard docs width & hides right TOC) */
.shell.wide-catalog {
  grid-template-columns: var(--sidebar) minmax(0, 1fr) !important;
}
.shell.wide-catalog .toc {
  display: none !important;
}
.content.catalog-content {
  max-width: 1280px !important;
  width: 100%;
  padding: 32px 36px 80px;
}
@media (max-width: 900px) {
  .shell.wide-catalog {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .content.catalog-content {
    padding: 24px 18px 60px;
  }
}

/* Compact Product Hero */
.catalog-hero {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(49,90,118,.35);
}
.catalog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #7fa0b6;
  margin-bottom: 10px;
}
.catalog-breadcrumb a {
  color: #7fa0b6;
  text-decoration: none;
}
.catalog-breadcrumb a:hover {
  color: var(--accent);
}
.cb-sep {
  opacity: 0.5;
  font-size: 13px;
}
.cb-cur {
  color: #c0d0db;
  font-weight: 600;
}
.catalog-hero-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.ch-info {
  flex: 1;
  min-width: 280px;
}
.catalog-title {
  font-size: 28px;
  font-weight: 800;
  color: #f0f6fc;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.catalog-desc {
  font-size: 14px;
  color: #9bb3c4;
  line-height: 1.5;
  margin: 0;
  max-width: 680px;
}
.catalog-meta-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.cm-tag {
  background: #0b2031;
  border: 1px solid #1f425f;
  color: #a4c0d4;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.cm-tag.live {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.35);
  color: #6ee7b7;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  margin-right: 7px;
  display: inline-block;
  box-shadow: 0 0 8px #10b981;
  animation: live-pulse 2s infinite ease-in-out;
}
@keyframes live-pulse {
  0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 5px rgba(16,185,129,0); }
  100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Primary Search Section & Box */
.catalog-search-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.primary-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: #071726;
  border: 1.5px solid #234c6b;
  border-radius: 12px;
  padding: 4px 6px 4px 16px;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.primary-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,230,190,.2), 0 8px 26px rgba(0,0,0,.35);
  background: #091e32;
}
.psb-icon {
  font-size: 16px;
  color: #728f9f;
  pointer-events: none;
  user-select: none;
}
.primary-search-box input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0f6fc;
  font-size: 14.5px;
  padding: 8px 0;
}
.primary-search-box input::placeholder {
  color: #627e90;
}
.psb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.psb-kbd {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  background: #112c42;
  border: 1px solid #2b5577;
  color: #90b1c7;
  border-radius: 5px;
  padding: 2px 7px;
  pointer-events: none;
  user-select: none;
}
.psb-clear {
  background: transparent;
  border: 0;
  color: #7a9cb0;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.psb-clear:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.psb-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(99,230,190,.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.psb-btn {
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
}

/* Category Tabs Track */
.category-tabs-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-tabs-track::-webkit-scrollbar {
  display: none;
}
.cat-pill, .usecase-chip {
  background: #091e30;
  border: 1px solid #1c3e59;
  color: #a6c0d2;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .16s ease;
  user-select: none;
}
.cat-pill:hover, .usecase-chip:hover {
  background: #0f2c42;
  border-color: #3b82f6;
  color: #fff;
  transform: translateY(-1px);
}
.cat-pill.active, .usecase-chip.active {
  background: linear-gradient(135deg, #10392f 0%, #0c2b23 100%);
  border-color: var(--accent);
  color: #a7f3d0;
  box-shadow: 0 0 12px rgba(99,230,190,.22);
}
.cat-pill[data-uc="chat"].active, .usecase-chip[data-uc="chat"].active {
  background: linear-gradient(135deg, #083344 0%, #04202c 100%);
  border-color: #06b6d4;
  color: #a5f3fc;
  box-shadow: 0 0 12px rgba(6,182,212,.25);
}
.cat-pill[data-uc="coding"].active, .usecase-chip[data-uc="coding"].active {
  background: linear-gradient(135deg, #052e16 0%, #031c0d 100%);
  border-color: #22c55e;
  color: #bbf7d0;
  box-shadow: 0 0 12px rgba(34,197,94,.25);
}
.cat-pill[data-uc="reasoning"].active, .usecase-chip[data-uc="reasoning"].active {
  background: linear-gradient(135deg, #3b0764 0%, #200438 100%);
  border-color: #ec4899;
  color: #fbcfe8;
  box-shadow: 0 0 12px rgba(236,72,153,.25);
}
.cat-pill[data-uc="vision"].active, .usecase-chip[data-uc="vision"].active {
  background: linear-gradient(135deg, #451a03 0%, #290f02 100%);
  border-color: #f59e0b;
  color: #fde68a;
  box-shadow: 0 0 12px rgba(245,158,11,.25);
}
.cat-pill[data-uc="indonesian"].active, .usecase-chip[data-uc="indonesian"].active {
  background: linear-gradient(135deg, #10392f 0%, #0c2b23 100%);
  border-color: #10b981;
  color: #a7f3d0;
  box-shadow: 0 0 12px rgba(16,185,129,.25);
}
.cat-pill[data-uc="ram8"].active, .usecase-chip[data-uc="ram8"].active {
  background: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
  border-color: #10b981;
  color: #6ee7b7;
  box-shadow: 0 0 12px rgba(16,185,129,.25);
}

/* Run-target filter pills (Plan-B Task 3): All / Cloud / Browser / Device */
.target-tabs-track {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 2px 6px;
}
.target-pill {
  background: #0a1a2b;
  border: 1px solid #1c3e59;
  color: #a6c0d2;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .16s ease;
  user-select: none;
}
.target-pill:hover {
  background: #0f2c42;
  border-color: #3b82f6;
  color: #fff;
}
.target-pill.active {
  background: linear-gradient(135deg, #0c2d4d 0%, #08213a 100%);
  border-color: #3b82f6;
  color: #bfdbfe;
  box-shadow: 0 0 12px rgba(59,130,246,.22);
}

/* Model card run-target status row: three honest slots (Cloud/Browser/Device).
   Without a Product Model Registry every slot renders Unknown in muted style. */
.mc-target-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.mc-target-slot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 650;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
}
.mc-target-name {
  color: #8da4b5;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 9.5px;
}
.mc-target-value { color: #9bb3c4; }
.mc-target-unknown .mc-target-value {
  color: #7d96a7;
  font-style: italic;
  opacity: .85;
}
.mc-target-ready {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}
.mc-target-ready .mc-target-value {
  color: #4ade80;
}
.mc-target-unverified {
  border-color: rgba(234, 179, 8, 0.35);
  background: rgba(234, 179, 8, 0.08);
}
.mc-target-unverified .mc-target-value {
  color: #facc15;
}
.mc-target-needs-gguf,
.mc-target-unsupported {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.mc-target-needs-gguf .mc-target-value,
.mc-target-unsupported .mc-target-value {
  color: #8da4b5;
}

.variant-select {
  background: #091a2b;
  border: 1px solid #1a3c57;
  color: #e6edf3;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  max-width: 340px;
  margin-top: 8px;
  display: block;
  cursor: pointer;
}
.variant-select:focus {
  border-color: #38bdf8;
  outline: none;
}

.mc-use-model {
  font-size: 12.5px;
  font-weight: 700;
  color: #f0f6fc;
  background: linear-gradient(135deg, #0c2d4d 0%, #08213a 100%);
  border: 1px solid #2a5a8a;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all .15s;
}
.mc-use-model:hover {
  border-color: #3b82f6;
  background: #0a2034;
  color: #fff;
}
[hidden],
.mc-use-model[hidden],
.mc-target-slot[hidden],
.mc-target-browser[hidden] {
  display: none !important;
}


/* Catalog Filter Card */
.catalog-filter-card {
  background: #091a2b;
  border: 1px solid #1a3c57;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.cf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.cf-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cf-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #8da4b5;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Segmented Hardware Control */
.segmented-hw {
  display: inline-flex;
  background: #05121e;
  border: 1px solid #1c3e59;
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
  flex-wrap: wrap;
}
.hw-btn, .cqb-chip {
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #9cb2c2;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .14s ease;
  white-space: nowrap;
}
.hw-btn:hover, .cqb-chip:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}
.hw-btn.active, .cqb-chip.active {
  background: #112d42;
  color: #f0f6fc;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.hw-btn[data-hw="8"].active, .cqb-chip[data-hw="8"].active {
  background: rgba(16,185,129,.18);
  color: #6ee7b7;
}
.hw-btn[data-hw="16"].active, .cqb-chip[data-hw="16"].active {
  background: rgba(245,158,11,.18);
  color: #fcd34d;
}
.hw-btn[data-hw="32"].active, .cqb-chip[data-hw="32"].active {
  background: rgba(168,85,247,.18);
  color: #d8b4fe;
}
.hw-btn[data-hw="gpu"].active, .cqb-chip[data-hw="gpu"].active {
  background: rgba(239,68,68,.18);
  color: #fca5a5;
}

.dot-green { color: #10b981; font-size: 9px; }
.dot-yellow { color: #f59e0b; font-size: 9px; }
.dot-purple { color: #a855f7; font-size: 9px; }
.dot-red { color: #ef4444; font-size: 9px; }

.ram-guide-link {
  background: transparent;
  border: 0;
  color: #62a3c7;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.ram-guide-link:hover, .ram-guide-link.active {
  color: #9ee5ff;
  background: rgba(98,163,199,.12);
}

.toggle-switch-btn, .toggle-chip {
  background: #061320;
  border: 1px solid #1c3e59;
  color: #9cb2c2;
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: all .14s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.toggle-switch-btn:hover, .toggle-chip:hover {
  border-color: #3b82f6;
  color: #fff;
}
.toggle-switch-btn.active, .toggle-chip.active {
  background: #093328;
  border-color: #10b981;
  color: #6ee7b7;
  box-shadow: 0 0 12px rgba(16,185,129,.22);
}

/* Expandable RAM Guide Panel */
.ram-guide-panel {
  background: #061422;
  border: 1px solid #1f4565;
  border-radius: 12px;
  padding: 16px;
  margin-top: 4px;
}
.ram-guide-panel.hidden {
  display: none;
}
.rg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 860px) {
  .rg-grid {
    grid-template-columns: 1fr;
  }
}
.rg-tier {
  background: #091b2c;
  border: 1px solid #1c3d59;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rg-tier.featured {
  border-color: #f59e0b;
  box-shadow: 0 0 18px rgba(245,158,11,.12);
  background: linear-gradient(180deg, #0d273e 0%, #081a2b 100%);
}
.rg-tier strong {
  font-size: 14px;
  color: #f0f6fc;
}
.rg-tier p {
  margin: 0;
  font-size: 12.5px;
  color: #9cb5c7;
  line-height: 1.45;
}
.rg-models {
  font-size: 11.5px;
  color: #7b99ad;
  background: rgba(0,0,0,.25);
  padding: 6px 10px;
  border-radius: 6px;
}
.rg-models em {
  color: #d2e4f0;
  font-style: normal;
}
.btn-rg-action {
  margin-top: auto;
  background: #0f2c42;
  border: 1px solid #234d70;
  color: #b0d2e8;
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.btn-rg-action:hover {
  background: #153b58;
  color: #fff;
  border-color: #3b82f6;
}

/* Popular Shortcuts */
.popular-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}
.popular-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pop-chip, .qs-chip {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #9bb6ca;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12px;
  cursor: pointer;
  transition: all .14s ease;
}
.pop-chip:hover, .qs-chip:hover {
  background: rgba(99,230,190,.12);
  border-color: var(--accent);
  color: #fff;
}

/* Advanced Filters Trigger */
.filter-actions {
  display: flex;
  align-items: center;
}
.btn-filter-trigger {
  background: #0e273d;
  border: 1px solid #234c6b;
  color: #c0d7e6;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .15s;
}
.btn-filter-trigger:hover, .btn-filter-trigger.active {
  border-color: #3b82f6;
  background: #143552;
  color: #fff;
}
.ft-icon { font-size: 13px; }
.ft-badge {
  background: var(--accent);
  color: #032117;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
}

/* Family Scroll Row */
.family-scroll-row {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.family-track-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.family-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.family-track::-webkit-scrollbar {
  display: none;
}
.fam-chip, .family-chip {
  background: #061422;
  border: 1px solid #1a3a54;
  color: #9ab4c7;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all .14s;
}
.fam-chip:hover, .family-chip:hover {
  border-color: #32607e;
  color: #fff;
  background: #0b2235;
}
.fam-chip.active, .family-chip.active {
  background: #10392f;
  color: var(--accent);
  border-color: #347a67;
  box-shadow: 0 0 10px rgba(99,230,190,.18);
}
.fam-icon { font-size: 12px; }

/* Advanced Filter Panel Drawer */
.advanced-filter-panel {
  background: #061320;
  border: 1px solid #234c6b;
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 6px;
}
.advanced-filter-panel.hidden {
  display: none;
}
.afp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.afp-header h4 {
  margin: 0;
  font-size: 14.5px;
  color: #f0f6fc;
}
.afp-close {
  background: transparent;
  border: 0;
  color: #7997aa;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.afp-close:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.afp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .afp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 580px) {
  .afp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.afp-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  box-sizing: border-box;
}
.afp-col-wide {
  grid-column: 1 / -1;
}
.afp-col-wide .family-track {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: visible;
}
.afp-col label {
  font-size: 11px;
  font-weight: 700;
  color: #8da4b5;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.afp-col select {
  background: #091c2e;
  border: 1px solid #1f425f;
  border-radius: 8px;
  color: #f0f6fc;
  padding: 8px 10px;
  font-size: 12.5px;
  outline: none;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.afp-col select:focus {
  border-color: var(--accent);
}
.afp-helper {
  font-size: 11px;
  color: #8da4b5;
  line-height: 1.35;
  margin-top: 2px;
}
.afp-checks {
  grid-column: 1 / -1;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 6px;
}
.check-box-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #cbdbe6;
  cursor: pointer;
}
.check-box-label input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
.afp-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.btn-subtle {
  background: transparent;
  border: 1px solid #244866;
  color: #9cb4c7;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.btn-subtle:hover {
  color: #f87171;
  border-color: #f87171;
  background: rgba(248,113,113,.08);
}

/* Active Filters Bar */
.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
  align-items: center;
}
.active-filter {
  background: #0b2b22;
  border: 1px solid #1a5e4b;
  color: #86efac;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .14s;
}
.active-filter:hover {
  background: #3b1616;
  border-color: #ef4444;
  color: #fca5a5;
}
.active-filter-clear-all {
  background: transparent;
  border: 1px dashed #2d5573;
  color: #8da4b5;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .14s;
}
.active-filter-clear-all:hover {
  border-color: #f87171;
  color: #f87171;
}

/* Results Toolbar */
.catalog-results-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.catalog-count {
  font-size: 13.5px;
  color: #8da4b5;
}
.catalog-count strong {
  color: #f0f6fc;
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #071726;
  border: 1px solid #1a3c57;
  border-radius: 8px;
  padding: 4px 10px;
}
.sort-control label {
  font-size: 12px;
  font-weight: 650;
  color: #8da4b5;
  white-space: nowrap;
}
.sort-control select {
  background: transparent;
  border: 0;
  color: #f0f6fc;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
}
.sort-control select option {
  background: #071726;
  color: #f0f6fc;
}
.segmented-view {
  display: flex;
  background: #071726;
  border: 1px solid #1a3c57;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.seg-view-btn, .view-btn {
  background: transparent;
  border: 0;
  color: #8da4b5;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: all .14s;
}
.seg-view-btn:hover, .view-btn:hover {
  color: #fff;
}
.seg-view-btn.active, .view-btn.active {
  background: #112d42;
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Backward compatibility aliases */
.catalog-header { margin: 16px 0; }
.catalog-search-bar { display: flex; gap: 10px; }
.usecase-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.usecase-label { color: #8da4b5; font-size: 11.5px; font-weight: 700; text-transform: uppercase; }
.usecase-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-suggest-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qs-label { color: #7b94a6; font-weight: 700; }
.qs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.catalog-quick-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cqb-section { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cqb-title { color: #8da4b5; font-size: 11.5px; font-weight: 700; text-transform: uppercase; }
.cqb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.family-row { display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.family-row .filter-label { color: #8da4b5; font-size: 11.5px; font-weight: 700; }
.model-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; align-items: center; }
.model-toolbar input { flex: 1; min-width: 220px; background: #0b1c2b; border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 10px 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 11px 0; }
.chip { background: #0c2030; border: 1px solid var(--line); color: #a7bccb; border-radius: 999px; padding: 6px 13px; cursor: pointer; font-size: 12.5px; }
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip.active { background: #10392f; color: var(--accent); border-color: #347a67; }
.filter-panel { border: 1px solid var(--line); border-radius: 9px; background: #081827; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 11px; padding: 10px 14px 14px; }
.filter-grid label { color: #8da4b5; font-size: 11px; font-weight: 600; display: grid; gap: 4px; }
.filter-grid select { width: 100%; background: #061320; border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 7px 8px; font-size: 12px; }
.filter-checks { grid-column: span 4; display: flex; gap: 16px; padding-top: 6px; }
.filter-checks .check-label { display: flex; align-items: center; gap: 6px; color: #c4d7e6; font-size: 12px; cursor: pointer; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; margin: 10px 0; }

/* ================= Model Grid & Card Layout ================= */
.model-list { margin: 18px 0; }
.model-list.model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6, 1.5rem);
}
@media (max-width: 1140px) {
  .model-list.model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .model-list.model-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.model-list.model-list-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.model-card {
  background: #091d2e;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--space-6, 1.5rem) var(--space-5, 1.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  transition: all .2s ease;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  min-width: 0;
}
.model-card:hover {
  border-color: #3b82f6;
  background: #0d263c;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.mc-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  text-transform: uppercase;
}

.mc-title-box {
  flex: 1;
  min-width: 0;
}
.mc-publisher {
  font-size: 11px;
  font-weight: 700;
  color: #8da4b5;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: block;
}
.mc-name {
  margin: 2px 0 0;
  font-size: 15.5px;
  font-weight: 750;
  line-height: 1.35;
  word-break: break-word;
}
.mc-name a {
  color: #f0f6fc;
  text-decoration: none;
}
.mc-name a:hover {
  color: var(--accent);
}

.mc-top-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.mc-gguf {
  background: rgba(16,185,129,.16);
  color: #34d399;
  border: 1px solid rgba(16,185,129,.35);
  font-weight: 750;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(16,185,129,.15);
}
.mc-sibling-badge {
  background: rgba(59,130,246,.15);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,.35);
  font-weight: 700;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 6px;
}
.mc-sibling-tip {
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 8px;
  font-size: 12px;
  color: #bfdbfe;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-word;
}
.mc-sibling-tip a {
  color: #60a5fa;
  font-weight: 600;
  text-decoration: underline;
}
.mc-sibling-tip a:hover {
  color: #93c5fd;
}
.mr-sibling {
  font-size: 12px;
  color: #93c5fd;
  margin-top: 4px;
}
.mr-sibling a {
  color: #60a5fa;
  text-decoration: underline;
}

.hw-fit {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.hw-8 { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.hw-16 { background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.hw-32 { background: rgba(168,85,247,.12); color: #d8b4fe; border: 1px solid rgba(168,85,247,.3); }
.hw-gpu { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.3); }

.mc-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.mc-desc {
  color: #9bb3c4;
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mc-footer {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.mc-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #7d96a7;
}
.mc-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.mc-copy-cmd {
  background: #061320;
  border: 1px solid #20415a;
  border-radius: 8px;
  padding: 6px 10px;
  color: #9ac2dc;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 65%;
  min-width: 0;
  transition: all .15s;
}
.mc-copy-cmd:hover { border-color: #3b82f6; color: #fff; background: #0a2034; }
.mc-copy-cmd.copied { border-color: #22c55e; color: #86efac; background: #062b1e; }
.mc-copy-cmd code { font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.mc-copy-pill {
  background: #173852;
  color: #9fcbf0;
  font-size: 10px;
  font-weight: 750;
  padding: 2px 6px;
  border-radius: 5px;
  margin-left: auto;
  text-transform: uppercase;
}
.mc-copy-cmd:hover .mc-copy-pill {
  background: #2563eb;
  color: #fff;
}
.mc-copy-cmd.copied .mc-copy-pill {
  background: #16a34a;
  color: #fff;
}

.mc-friendly-desc {
  color: #a2b8c9;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Model Quick Run Card (Detail Page) */
.model-quickrun-card {
  background: linear-gradient(135deg, #0e2940 0%, #081b2c 100%);
  border: 1px solid #32607e;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 20px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.mq-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mq-icon { font-size: 26px; line-height: 1; }
.mq-header h4 { margin: 0 0 3px; font-size: 16px; color: #fff; }
.mq-header p { margin: 0; font-size: 13px; color: #9bb7ca; }
.mq-header p.mq-subtitle { margin: 0; font-size: 13px; color: #9bb7ca; }
.mq-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}
.mq-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mq-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bc-accent);
  color: #0b0d10;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.mq-step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mq-step-content strong {
  font-size: 13.5px;
  color: #fff;
}
.mq-step-content p {
  margin: 0;
  font-size: 12.5px;
  color: #9bb7ca;
  line-height: 1.45;
}
.mq-prereq-note {
  font-size: 11.5px !important;
  color: #e2b340 !important;
  font-weight: 600;
}
.mq-codewrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #040e17;
  border: 1px solid #204561;
  border-radius: 9px;
  padding: 8px 14px;
}
.mq-codewrap code {
  color: #a7f3d0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  overflow-x: auto;
}
.mq-notes {
  font-size: 12px;
  color: #7b99ad;
}
.badge-recommended {
  background: rgba(245,158,11,.2);
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,.45);
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mc-detail-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all .15s;
}
.mc-detail-link:hover {
  background: rgba(99,230,190,.1);
  color: #fff;
  transform: translateX(2px);
}

/* Compact list view modifier: True clean tabular row layout */
.model-list-compact .model-card {
  padding: 12px 18px;
  display: grid;
  grid-template-columns: minmax(240px, 1.8fr) minmax(180px, 1.2fr) auto;
  align-items: center;
  gap: 16px;
  border-radius: 10px;
}
.model-list-compact .mc-header {
  margin: 0;
  align-items: center;
}
.model-list-compact .mc-avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
  border-radius: 8px;
}
.model-list-compact .mc-name {
  font-size: 14px;
}
.model-list-compact .mc-top-badges {
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.model-list-compact .mc-body {
  margin: 0;
  gap: 4px;
}
.model-list-compact .mc-friendly-desc {
  display: none; /* keep list view strictly tabular */
}
.model-list-compact .mc-target-status {
  display: none; /* tabular list view keeps the top badges only */
}
.model-list-compact .mc-footer {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding-top: 0;
  border-top: 0;
  margin: 0;
  justify-content: flex-end;
}
.model-list-compact .mc-stats {
  font-size: 11px;
}
@media (max-width: 1000px) {
  .model-list-compact .model-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .model-list-compact .mc-footer {
    border-top: 1px solid rgba(255,255,255,.05);
    padding-top: 8px;
    justify-content: space-between;
  }
}

/* Legacy model-row fallback */
.model-row { border: 1px solid var(--line); border-radius: 12px; background: #0c2030; padding: 15px 17px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: start; }
.model-row:hover { border-color: #4b88a2; background: #102a3d; text-decoration: none; }
.model-row h3 { margin: 0 0 5px; font-size: 15px; color: var(--text); word-break: break-word; }
.mr-badges { margin: 2px 0 6px; }
.mr-meta { color: var(--muted); font-size: 12px; }
.mr-side { text-align: right; }
.model-backlink { margin-top: 0; }
.model-detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: -6px; }
.model-detail-head h2 { margin: 0; }
.model-detail-head .mr-badges { margin: 0; }
.hf-status { margin: 10px 0; }

/* Skeletons & Empty State */
.skeleton-card {
  height: 200px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(90deg, #091d2e 0%, #0e2940 50%, #091d2e 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}
.skeleton { height: 74px; border: 1px solid var(--line); border-radius: 11px; background: #0d2233; animation: load 1.3s ease-in-out infinite alternate; }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes load { to { opacity: .55; } }

.empty-catalog {
  text-align: center;
  padding: 42px 20px;
  background: #081827;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 20px 0;
}
.empty-icon { font-size: 38px; margin-bottom: 12px; }
.empty-catalog h3 { font-size: 18px; margin: 0 0 8px; color: var(--text); }
.empty-catalog p { color: #9bb3c4; font-size: 13.5px; margin: 0 0 18px; max-width: 480px; margin-inline: auto; }

.load-more-wrap {
  text-align: center;
  margin: 24px 0 16px;
}
.load-more-wrap .btn {
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
}

.search-modal { position: fixed; inset: 0; background: rgba(2,9,15,.78); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 100px 16px 0; }
.search-modal.hidden { display: none; }
.search-panel { width: min(680px,100%); background: #0b1c2b; border: 1px solid #3a6580; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.55); overflow: hidden; }
.search-panel input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--text); padding: 15px 17px; font-size: 15px; outline: none; }
.search-results { max-height: 410px; overflow-y: auto; padding: 8px; }
.search-hit { display: block; padding: 10px 12px; border-radius: 9px; color: #c0d0db; }
.search-hit:hover,.search-hit.selected { background: #123047; text-decoration: none; }
.search-hit .sh-title { color: var(--text); font-size: 14px; font-weight: 650; }
.search-hit .sh-snip { color: var(--muted); font-size: 12px; margin-top: 2px; }
.search-hint { padding: 9px 14px; border-top: 1px solid var(--line); color: #70899a; font-size: 11.5px; }
.search-empty { padding: 18px 16px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--sidebar) minmax(0,1fr); }
  .toc { display: none; }
  /* Topbar search is only a shortcut trigger (focus opens the modal; Ctrl/Cmd+K
     also works). Hide it below 1180px so the 7-item primary nav never collides. */
  .searchbox { display: none; }
  .topbar-right { gap: 2px; }
  .top-link { padding: 8px 7px; }
}
@media (max-width: 900px) {
  .mobile-only { display: inline-block; }
  .docs-nav-toggle { display: inline-flex !important; align-items: center; gap: 4px; }
  .shell { grid-template-columns: minmax(0,1fr); }
  .sidebar { position: fixed; left: 0; top: 72px; bottom: 0; width: 280px; transform: translateX(-105%); transition: transform .2s ease; z-index: 40; height: auto; box-shadow: 22px 0 60px rgba(0,0,0,.45); }
  .sidebar.open { transform: translateX(0); }
  .nav-backdrop { position: fixed; inset: 72px 0 0 0; z-index: 35; background: rgba(3,10,17,.6); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
  .nav-close { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; color: #9eb5c6; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
  .nav-close:hover { color: #fff; background: rgba(255,255,255,.08); }
  .searchbox input { width: 190px; max-width: 30vw; }
  .top-link { display: none; }
  .topbar-nav { display: none; }
  .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-grid { grid-template-columns: 1fr 330px; gap: 26px; }
  .arch-grid { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 700px) {
  .topbar { padding: 0 10px; height: 56px; }
  .topbar-left { gap: 6px; min-width: 0; }
  .brand { font-size: 13px; white-space: nowrap; }
  .brand-mark { width: 25px; height: 25px; font-size: 13px; flex-shrink: 0; }
  .topbar-right { gap: 4px; flex-shrink: 0; }
  .lang-trigger { font-size: 12px; padding: 6px 9px; gap: 6px; }
  .lang-trigger .lang-current { display: none; }
  .lang-trigger .lang-code { display: inline; }
  .lang-menu { min-width: 190px; }
  .searchbox { display: none; }
  .content,.home-wrap { padding-left: 14px; padding-right: 14px; }
  .content { padding-top: 24px; }
  .footer { padding-left: 20px; padding-right: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .proof-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; margin: 20px 0 36px; border-radius: 10px; }
  .proof-item { font-size: 11.5px; line-height: 1.3; padding: 4px 8px; background: var(--bc-raised); border: 1px solid var(--bc-border); border-radius: 6px; }
  .shell.home .main { padding: 0 20px; }
  .shell.home .main > h1 { font-size: clamp(30px,8.2vw,46px); line-height: 1.08; letter-spacing: -.04em; padding-top: 48px; word-break: normal; hyphens: none; overflow-wrap: normal; }
  .hero-grid { grid-template-columns: 1fr; margin-bottom: 52px; }
  .runtime-panel { max-width: 480px; }
  .cards { grid-template-columns: 1fr; }
  .model-row { grid-template-columns: 1fr; }
  .mr-side { text-align: left; }
  .filter-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .content h1 { font-size: 32px; }
  .content h2 { font-size: 23px; margin-top: 42px; }
  .status-table { min-width: 0; table-layout: fixed; }
  .status-table th,.status-table td { font-size: 11px; padding: 8px 6px; overflow-wrap: anywhere; }
  .status-table th:nth-child(1),.status-table td:nth-child(1) { width: 31%; }
  .status-table th:nth-child(2),.status-table td:nth-child(2) { width: 25%; }
  .status-table th:nth-child(3),.status-table td:nth-child(3) { width: 22%; }
  .status-table th:nth-child(4),.status-table td:nth-child(4) { width: 22%; }
  .status-table th:last-child,.status-table td:last-child { display: none; }
  pre { font-size: 12px; }
}
@media (max-width: 430px) {
  .model-toolbar select { flex: 1; min-width: 150px; }
  .filter-grid { grid-template-columns: 1fr; }
  .filter-grid .check-label { padding-top: 3px; }
}
@media (min-width: 701px) and (max-width: 900px) { .searchbox { display: block; } }

/* Ambient background glow */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 550px;
  background: radial-gradient(ellipse at 50% 0%, rgba(99,230,190,.07), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Breadcrumbs */
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #7fa0b6; margin-bottom: 12px; flex-wrap: wrap; }
.breadcrumb a { color: #7fa0b6; }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.bc-sep { opacity: 0.5; font-size: 13px; }
.bc-section { color: #9bb7ca; }
.bc-current { color: #c0d0db; font-weight: 600; }

/* Doc Pager (Prev / Next) */
.doc-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(49,90,118,.5); }
.pager-card { display: block; border: 1px solid var(--line); background: #0c2030; border-radius: 12px; padding: 14px 17px; min-width: 0; transition: border-color .15s, background .15s, transform .15s; }
.pager-card:hover { border-color: #4b88a2; background: #102a3d; transform: translateY(-2px); text-decoration: none; }
.pager-card.next { text-align: right; }
.pager-hint { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pager-title { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pager-placeholder { min-height: 1px; }

/* Desktop App Window Showcase */
.app-showcase { margin: 32px 0 60px; border: 1px solid #33617b; border-radius: 16px; background: linear-gradient(180deg, #10293d, #091724); box-shadow: 0 24px 80px rgba(0,0,0,.5); overflow: hidden; }
.app-window-bar { display: flex; justify-content: space-between; align-items: center; background: #0b2031; padding: 11px 18px; border-bottom: 1px solid var(--line); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
.app-win-buttons { display: flex; gap: 7px; }
.win-btn { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.win-btn:nth-child(1) { background: #ff5f56; }
.win-btn:nth-child(2) { background: #ffbd2e; }
.win-btn:nth-child(3) { background: #27c93f; }
.app-win-title { color: #a4b8c9; font-weight: 600; display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.app-win-status { color: var(--accent); font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
.status-indicator.live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); display: inline-block; }
.app-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 380px; }
.app-sidebar { background: #081724; border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; justify-content: space-between; }
.app-nav-group { display: grid; gap: 4px; }
.app-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: #8fa6b8; font-size: 13px; font-weight: 600; cursor: default; }
.app-nav-item.active { background: #113647; color: #e5fff7; box-shadow: inset 2px 0 0 var(--accent); }
.app-counter { margin-left: auto; background: #14354c; color: #a5c3d7; border-radius: 999px; padding: 1px 7px; font-size: 11px; }
.app-sidebar-footer { border-top: 1px solid rgba(49,90,118,.4); padding-top: 12px; margin-top: 20px; }
.app-model-pill { display: flex; align-items: center; gap: 7px; background: #0b2235; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.app-model-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 8px var(--accent); }
.app-model-name { font-size: 11px; font-weight: 700; color: #e1edf5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.app-model-quant { font-size: 9.5px; background: #164035; color: var(--accent); border-radius: 4px; padding: 1px 5px; }
.app-main { background: #071521; display: flex; flex-direction: column; min-width: 0; }
.app-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #0a1c2b; font-size: 12px; }
.app-chat-info { color: #d0e0ec; font-size: 12.5px; }
.app-chat-stats { display: flex; gap: 8px; }
.stat-badge { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 2px 7px; font-family: ui-monospace, monospace; }
.stat-badge.cuda { background: rgba(157,183,255,.12); color: #9db7ff; border: 1px solid rgba(157,183,255,.25); }
.stat-badge.speed { background: rgba(99,230,190,.12); color: var(--accent); border: 1px solid rgba(99,230,190,.25); }
.app-chat-messages { padding: 18px; display: grid; gap: 14px; overflow-y: auto; max-height: 420px; min-width: 0; }
.app-msg { display: flex; gap: 11px; font-size: 13px; line-height: 1.5; min-width: 0; }
.msg-avatar { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; flex-shrink: 0; }
.app-msg.user .msg-avatar { background: #1a3c54; color: #8ec3e6; }
.app-msg.assistant .msg-avatar { background: #10392f; color: var(--accent); border: 1px solid #347a67; font-size: 14px; }
.msg-bubble { max-width: 90%; color: #d8e5ef; min-width: 0; word-break: break-word; }
.app-msg.user .msg-bubble { background: #0d283d; border: 1px solid var(--line); padding: 9px 13px; border-radius: 10px; }
.app-msg.assistant .msg-bubble { background: transparent; padding: 2px 0; }
.app-msg.assistant .msg-bubble p { margin: 0 0 8px; color: #c4d4e0; }
.app-msg.assistant pre { background: #050e17; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; font-size: 11.5px; margin: 6px 0; overflow-x: auto; max-width: 100%; box-sizing: border-box; }
.app-msg-footer { font-size: 11px; color: #728d9f; margin-top: 7px; display: flex; gap: 8px; font-family: ui-monospace, monospace; }

/* Hardware Fit Advisor */
.hardware-advisor { margin: 38px 0; border: 1px solid #33617b; border-radius: 14px; padding: 24px; background: linear-gradient(145deg, #0d2538, #081622); }
.ha-header h3 { font-size: 20px; margin: 0 0 6px; color: var(--text); }
.ha-header p { color: #b4c7d6; margin: 0 0 16px; font-size: 13.5px; }
.ha-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.ha-btn { border: 1px solid var(--line); background: #0b1f2f; color: #a4bccb; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 650; transition: all .15s; }
.ha-btn:hover { border-color: var(--line-strong); color: var(--text); background: #0f2c42; }
.ha-btn.active { background: #10392f; border-color: #347a67; color: var(--accent); box-shadow: 0 0 0 2px rgba(99,230,190,.15); }
.ha-result-head h4 { font-size: 16px; margin: 0 0 4px; color: var(--text); }
.ha-result-head p { font-size: 13px; color: #9bb3c4; margin: 0 0 14px; }
.ha-model-list { display: grid; gap: 9px; margin: 14px 0; }
.ha-model-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 15px; background: #081827; border: 1px solid var(--line); border-radius: 10px; gap: 12px; }
.ha-model-main strong { font-size: 13.5px; color: var(--text); margin-right: 8px; }
.ha-model-use { font-size: 12px; color: var(--muted); margin-top: 3px; }
.ha-model-stat { text-align: right; flex-shrink: 0; }

@media (max-width: 760px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar { display: none; }
  .app-chat-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .app-chat-stats { flex-wrap: wrap; }
  .app-chat-messages pre, .app-msg pre { overflow-x: auto; max-width: 100%; }
  .doc-pager { grid-template-columns: minmax(0, 1fr); }
  .ha-model-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ha-model-stat { text-align: left; }
}

/* ================= Plan-B Task 2 Step 5: dark-first neutral design tokens =================
   Canonical design spec section 29: the homepage is the dark-first product surface,
   ~90% neutral surfaces, one restrained accent reserved for primary actions / focus /
   active state, no gradient-heavy styling. Tokens are defined once and applied ONLY
   under .shell.home (plus body:has(.shell.home) for the shared topbar on the homepage),
   so docs/catalog pages keep their current look exactly. No new animations are added;
   the global prefers-reduced-motion rule continues to cover every transition here. */
:root {
  --bc-canvas: #0f1113;
  --bc-surface: #15181b;
  --bc-raised: #1b1f23;
  --bc-border: #2a3036;
  --bc-text: #f2f4f5;
  --bc-muted: #9aa3ab;
  --bc-accent: #7b86ff;
  --bc-success: #77b58a;
  --bc-warning: #d0a15c;
  --bc-danger: #d06d6d;
}

/* Neutral canvas replaces the teal/blue ambient gradient on the homepage only. */
.shell.home { background: var(--bc-canvas); }
.shell.home .main > h1 { color: var(--bc-text); }
.shell.home .main > h1::after { color: var(--bc-accent); }
.shell.home .main > h2 { color: var(--bc-text); }
.shell.home .hero-copy { color: #ccd1d6; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.45; max-width: 760px; margin: 26px 0 0; }
.shell.home .hero-support { color: var(--bc-muted); font: 600 12.5px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; margin: 18px 0 0; }
.shell.home .main > p { color: var(--bc-muted); }
.shell.home a { color: var(--bc-accent); }
.shell.home a:hover { color: #a3abff; }
.shell.home .footer { border-top-color: var(--bc-border); color: var(--bc-muted); }
.shell.home p code { background: var(--bc-raised); border-color: var(--bc-border); color: var(--bc-text); }

/* Focus stays visible; hue follows the homepage accent. */
.shell.home :focus-visible { outline-color: var(--bc-accent); box-shadow: 0 0 0 6px rgba(123,134,255,.22); }

/* Hero actions: one flat accent primary, neutral secondary. No gradients. */
.shell.home .btn { background: var(--bc-raised); border-color: var(--bc-border); }
.shell.home .btn:hover { background: var(--bc-raised); border-color: #3d444c; }
.shell.home .btn.primary { background: var(--bc-accent); border-color: transparent; color: #0b0d10; box-shadow: none; }
.shell.home .btn.primary:hover { background: #8f99ff; color: #0b0d10; }

/* Cards: neutral surfaces, accent hairline on hover only. */
.shell.home .card { border-color: var(--bc-border); background: var(--bc-surface); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.shell.home .card::before { background: linear-gradient(90deg, transparent, rgba(123,134,255,.45), transparent); }
.shell.home .card:hover { border-color: #3d444c; background: var(--bc-raised); }
.shell.home .card h3 { color: var(--bc-text); }
.shell.home .card p { color: var(--bc-muted); }

/* App showcase: neutral raised surfaces, muted chrome, status = success token. */
.shell.home .app-showcase { border-color: var(--bc-border); background: var(--bc-surface); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.shell.home .app-window-bar { background: var(--bc-raised); border-bottom-color: var(--bc-border); }
.shell.home .app-win-title { color: var(--bc-muted); }
.shell.home .app-win-title .brand-mark { color: var(--bc-accent); border-color: var(--bc-border); background: var(--bc-raised); box-shadow: none; }
.shell.home .app-win-status { color: var(--bc-success); }
.shell.home .status-indicator.live { background: var(--bc-success); box-shadow: 0 0 8px rgba(119,181,138,.55); }
.shell.home .app-sidebar { background: var(--bc-canvas); border-right-color: var(--bc-border); }
.shell.home .app-nav-item { color: var(--bc-muted); }
.shell.home .app-nav-item.active { background: var(--bc-raised); color: var(--bc-text); box-shadow: inset 2px 0 0 var(--bc-accent); }
.shell.home .app-sidebar-footer { border-top-color: var(--bc-border); }
.shell.home .app-model-pill { background: var(--bc-raised); border-color: var(--bc-border); }
.shell.home .app-model-dot { background: var(--bc-success); box-shadow: 0 0 8px rgba(119,181,138,.55); }
.shell.home .app-model-name { color: var(--bc-text); }
.shell.home .app-model-quant { background: var(--bc-border); color: var(--bc-muted); }
.shell.home .app-main { background: var(--bc-canvas); }
.shell.home .app-chat-header { background: var(--bc-surface); border-bottom-color: var(--bc-border); }
.shell.home .app-chat-info { color: var(--bc-muted); }
.shell.home .stat-badge.cuda { background: var(--bc-raised); color: var(--bc-muted); border-color: var(--bc-border); }
.shell.home .stat-badge.speed { background: rgba(119,181,138,.12); color: var(--bc-success); border-color: rgba(119,181,138,.35); }
.shell.home .app-msg.user .msg-avatar { background: var(--bc-raised); color: var(--bc-muted); }
.shell.home .app-msg.assistant .msg-avatar { background: var(--bc-raised); color: var(--bc-accent); border-color: var(--bc-border); }
.shell.home .msg-bubble { color: #c9ced3; }
.shell.home .app-msg.user .msg-bubble { background: var(--bc-raised); border-color: var(--bc-border); }
.shell.home .app-msg.assistant .msg-bubble p { color: #c9ced3; }
.shell.home .app-msg.assistant pre { background: #0b0d0f; border-color: var(--bc-border); }
.shell.home .app-msg-footer { color: var(--bc-muted); }

/* Shared topbar on the homepage only (body:has is supported by all evergreen
   browsers; without it the topbar simply keeps its current look, as on docs). */
body:has(.shell.home) .topbar { background: rgba(15,17,19,.88); border-bottom-color: var(--bc-border); box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 32px rgba(0,0,0,.35); }
body:has(.shell.home) .top-link { color: #c3c9cf; }
body:has(.shell.home) .top-link:hover { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.home) .top-link.active { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.home) .brand-mark { border-color: var(--bc-border); background: var(--bc-raised); color: var(--bc-accent); box-shadow: none; }
body:has(.shell.home) .top-link.cta-primary { background: var(--bc-accent); border: 1px solid transparent; color: #0b0d10; border-radius: 8px; font-weight: 700; }
body:has(.shell.home) .top-link.cta-primary:hover { background: #8f99ff; color: #0b0d10; }
body:has(.shell.home) :focus-visible { outline-color: var(--bc-accent); box-shadow: 0 0 0 6px rgba(123,134,255,.22); }

/* Proof strip */
.proof-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 28px; padding: 16px 24px; background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: 12px; margin: 36px 0 64px; }
.proof-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #ccd1d6; }
.proof-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bc-accent); }

/* Cloud + Local Arch Grid */
.arch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 28px 0; }
.arch-card { background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; min-width: 0; }
.arch-card:hover { border-color: #3d444c; background: var(--bc-raised); }
.arch-badge { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: var(--bc-accent); margin-bottom: 12px; }
.arch-card h3 { margin: 0 0 10px; font-size: 20px; color: var(--bc-text); }
.arch-copy { color: #ccd1d6; font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; flex: 1; }
.arch-points { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.arch-point { font-size: 13.5px; color: var(--bc-muted); display: flex; align-items: baseline; gap: 6px; }
.card-link { color: var(--bc-accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.card-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .arch-grid { grid-template-columns: minmax(0, 1fr); }
  .arch-card { padding: 20px 16px; }
}

/* Model preview grid */
.model-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 24px 0 28px; }
.model-preview-card { background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.model-preview-card:hover { border-color: #3d444c; background: var(--bc-raised); }
.mp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mp-title { font-size: 14px; font-weight: 700; color: var(--bc-text); word-break: break-all; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.mp-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .06em; }
.mp-badge.coding { background: rgba(123,134,255,.14); color: var(--bc-accent); }
.mp-badge.reasoning { background: rgba(208,161,92,.14); color: var(--bc-warning); }
.mp-badge.chat { background: rgba(119,181,138,.14); color: var(--bc-success); }
.mp-desc { color: var(--bc-muted); font-size: 13px; line-height: 1.5; margin: 0; flex: 1; }
.mp-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.mp-tag { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--bc-raised); border: 1px solid var(--bc-border); color: #c9ced3; }
.mp-tag.target-local { border-color: rgba(119,181,138,.35); color: var(--bc-success); }
.mp-tag.target-cloud { border-color: rgba(123,134,255,.35); color: var(--bc-accent); }
.mp-tag.quant { font-family: ui-monospace, monospace; }

/* Advisor preview */
.advisor-preview { margin: 24px 0 28px; }
.advisor-box { background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: 14px; padding: 24px; max-width: 780px; }
.advisor-label { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; color: var(--bc-muted); margin-bottom: 16px; }
.advisor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 16px; }
.adv-item { background: var(--bc-raised); border: 1px solid var(--bc-border); border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.adv-k { font-size: 11px; color: var(--bc-muted); text-transform: uppercase; letter-spacing: .06em; }
.adv-v { font-size: 13.5px; font-weight: 600; color: var(--bc-text); }
.adv-good { color: var(--bc-success); }
.adv-note { color: var(--bc-muted); font-size: 13px; line-height: 1.5; margin: 0; }

/* Developer links */
.dev-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dev-link-pill { display: inline-flex; align-items: center; padding: 8px 14px; background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #ccd1d6; text-decoration: none; }
.dev-link-pill:hover { border-color: #3d444c; background: var(--bc-raised); color: var(--bc-text); text-decoration: none; }

/* CTA banner */
.cta-banner { background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: 16px; padding: 36px 32px; margin: 32px 0 20px; }
.cta-banner-copy { font-size: 18px; color: #ccd1d6; max-width: 60ch; line-height: 1.5; }
.cta-sub { color: var(--bc-muted); font-size: 13.5px; margin-top: 18px; margin-bottom: 0; }

/* App showcase tweaks for product surface */
.stat-badge.target-pill { font-size: 11.5px; color: var(--bc-muted); background: transparent; border: 0; }
.stat-badge.cloud-toggle { background: var(--bc-raised); color: var(--bc-muted); border: 1px solid var(--bc-border); font-size: 11px; padding: 2px 8px; border-radius: 5px; }
.stat-badge.local-toggle { background: var(--bc-raised); color: var(--bc-muted); border: 1px solid var(--bc-border); font-size: 11px; padding: 2px 8px; border-radius: 5px; }
.stat-badge.local-toggle.active { background: rgba(119,181,138,.12); color: var(--bc-success); border-color: rgba(119,181,138,.35); font-weight: 600; }

/* Homepage dropdown & mobile nav tokens */
body:has(.shell.home) .nav-dropdown-trigger { color: #c3c9cf; }
body:has(.shell.home) .nav-dropdown-trigger:hover, body:has(.shell.home) .nav-dropdown.open .nav-dropdown-trigger { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.home) .nav-dropdown-menu { background: var(--bc-surface); border-color: var(--bc-border); }
body:has(.shell.home) .nav-menu-heading { color: var(--bc-muted); }
body:has(.shell.home) .nav-menu-link { color: #ccd1d6; }
body:has(.shell.home) .nav-menu-link:hover { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.home) .nav-menu-link.active { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.home) .mobile-nav { background: var(--bc-surface); border-color: var(--bc-border); }
body:has(.shell.home) .mobile-nav-header { border-color: var(--bc-border); }
body:has(.shell.home) .mobile-nav-heading { color: var(--bc-muted); }
body:has(.shell.home) .mobile-nav-link { color: #ccd1d6; }
body:has(.shell.home) .mobile-nav-link:hover { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.home) .mobile-nav-link.active { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.home) .mobile-nav-actions { background: var(--bc-surface); border-top-color: var(--bc-border); }

/* Cloud + Local architecture visual */
.arch-visual { margin: 28px 0 36px; background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: 14px; padding: 32px 24px; display: flex; justify-content: center; }
.arch-flow { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 560px; }
.arch-node { background: var(--bc-raised); border: 1px solid var(--bc-border); border-radius: 10px; padding: 10px 20px; display: inline-flex; align-items: center; gap: 8px; text-align: center; color: var(--bc-text); font-weight: 600; font-size: 14px; }
.arch-node-root { background: var(--bc-canvas); color: var(--bc-muted); font-size: 13px; letter-spacing: .02em; padding: 8px 18px; }
.arch-node-hub { border-color: rgba(123, 134, 255, .4); background: rgba(123, 134, 255, .08); font-size: 15px; font-weight: 700; padding: 11px 24px; }
.arch-connector-down { color: var(--bc-muted); font-size: 18px; line-height: 1; padding: 6px 0; user-select: none; }
.arch-connector-fork { display: flex; justify-content: space-around; width: 100%; max-width: 320px; color: var(--bc-muted); font-size: 18px; line-height: 1; padding: 6px 0; user-select: none; }
.arch-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 480px; }
.arch-node-target { flex-direction: column; align-items: center; padding: 12px 16px; gap: 3px; }
.arch-node-target .arch-node-title { font-size: 14px; font-weight: 650; color: var(--bc-text); }
.arch-node-target .arch-node-desc { font-size: 12px; font-weight: 500; color: #cbd5e1; }
.arch-node-target .arch-node-sub { font-size: 11px; font-weight: 500; color: var(--bc-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Catalog intro and action buttons */
.catalog-examples-intro { margin: 16px 0 24px; }
.catalog-examples-intro .advisor-label { margin-bottom: 8px; }
.catalog-examples-intro .arch-copy { margin: 0; font-size: 13.5px; color: var(--bc-muted); line-height: 1.5; max-width: 760px; }
.section-actions { margin: 24px 0 32px; }

@media (max-width: 480px) {
  .arch-visual { padding: 20px 14px; }
  .arch-branches { gap: 10px; }
  .arch-node-target { padding: 10px 8px; gap: 2px; }
  .arch-node-target .arch-node-title { font-size: 13px; }
  .arch-node-target .arch-node-desc { font-size: 10.5px; }
  .arch-node-target .arch-node-sub { font-size: 9.5px; }
}

/* ================= Standalone Catalog Layout & Tokens ================= */
.shell.standalone-catalog {
  background: var(--bc-canvas);
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: calc(100vh - 64px);
}
.shell.standalone-catalog .sidebar,
.shell.standalone-catalog .toc,
.shell.standalone-catalog .docs-nav-toggle {
  display: none !important;
}
.content.standalone-catalog-content {
  max-width: 1320px !important;
  margin: 0 auto;
  width: 100%;
  padding: 28px 32px 80px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .content.standalone-catalog-content {
    padding: 20px 16px 60px;
  }
}

/* Standalone catalog topbar */
body:has(.shell.standalone-catalog) .topbar { background: rgba(15,17,19,.88); border-bottom-color: var(--bc-border); box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 32px rgba(0,0,0,.35); }
body:has(.shell.standalone-catalog) .top-link { color: #c3c9cf; }
body:has(.shell.standalone-catalog) .top-link:hover { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.standalone-catalog) .top-link.active { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.standalone-catalog) .brand-mark { border-color: var(--bc-border); background: var(--bc-raised); color: var(--bc-accent); box-shadow: none; }
body:has(.shell.standalone-catalog) .top-link.cta-primary { background: var(--bc-accent); border: 1px solid transparent; color: #0b0d10; border-radius: 8px; font-weight: 700; }
body:has(.shell.standalone-catalog) .top-link.cta-primary:hover { background: #8f99ff; color: #0b0d10; }
body:has(.shell.standalone-catalog) :focus-visible { outline-color: var(--bc-accent); box-shadow: 0 0 0 6px rgba(123,134,255,.22); }
body:has(.shell.standalone-catalog) .footer { border-top-color: var(--bc-border); color: var(--bc-muted); }

/* Standalone catalog hero meta row */
.catalog-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.catalog-meta-row .cm-item {
  color: #8da4b5;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.catalog-meta-row .cm-sep {
  color: #3b5a75;
  font-size: 13px;
  user-select: none;
}

/* Controls bar & primary targets */
.catalog-controls-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.primary-targets {
  display: inline-flex;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
}
.primary-targets .target-pill {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #9cb2c2;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.primary-targets .target-pill:hover {
  color: #fff;
  background: var(--bc-raised);
}
.primary-targets .target-pill.active {
  background: var(--bc-raised);
  border-color: #3d444c;
  color: var(--bc-text);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.primary-targets .target-pill[data-target-filter="cloud"].active {
  border-color: rgba(123,134,255,.45);
  color: #c7cdff;
  background: rgba(123,134,255,.14);
}
.primary-targets .target-pill[data-target-filter="device"].active {
  border-color: rgba(119,181,138,.45);
  color: #b3e6c2;
  background: rgba(119,181,138,.14);
}

/* Filter bar & hardware fit row */
.catalog-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.cf-group.hw-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.afp-secondary-targets {
  display: inline-flex;
  gap: 6px;
}
.afp-secondary-targets .target-pill {
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  color: #9cb2c2;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.afp-secondary-targets .target-pill:hover {
  border-color: #3d444c;
  color: #fff;
}
.afp-secondary-targets .target-pill.active {
  background: rgba(123,134,255,.15);
  border-color: var(--bc-accent);
  color: #bfdbfe;
}

/* Model card actions: View Model primary, Choose files secondary */
.mc-actions .mc-view-btn {
  background: var(--bc-accent);
  color: #0b0d10;
  font-weight: 700;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 12.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
}
.mc-actions .mc-view-btn:hover {
  background: #8f99ff;
  color: #0b0d10;
}
.mc-actions .mc-detail-link {
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  color: #c0d7e6;
  font-weight: 600;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s;
}
.mc-actions .mc-detail-link:hover {
  border-color: #3d444c;
  color: #fff;
  background: var(--bc-surface);
}

/* Model Detail Hero & Grid */
.model-detail-hero {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 16px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mdh-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mdh-publisher {
  font-size: 13px;
  color: var(--bc-muted);
}
.mdh-publisher strong {
  color: var(--bc-text);
}
.mdh-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
}
.mdh-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Detail Run Targets Grid */
.detail-targets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 14px 0 24px;
}
@media (max-width: 680px) {
  .detail-targets-grid {
    grid-template-columns: 1fr;
  }
}
.detail-target-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dtc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dtc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--bc-text);
}
.dtc-desc {
  margin: 0;
  font-size: 13px;
  color: var(--bc-muted);
  line-height: 1.5;
}

/* Mobile 390px ordering & layout (Section L) */
@media (max-width: 680px) {
  .catalog-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .primary-targets {
    width: 100%;
    justify-content: stretch;
  }
  .primary-targets .target-pill {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
  .category-tabs-track {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: visible;
    padding: 0;
  }
  .cat-pill, .usecase-chip {
    padding: 7px 13px;
    font-size: 12px;
    min-height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  .catalog-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .cf-group.hw-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .segmented-hw {
    width: 100%;
    justify-content: stretch;
  }
  .segmented-hw .hw-btn {
    flex: 1;
    text-align: center;
    justify-content: center;
    font-size: 11px;
    padding: 6px 4px;
  }
  .filter-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .catalog-results-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .mc-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .mc-actions .mc-view-btn,
  .mc-actions .mc-detail-link {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
  .mc-copy-cmd {
    max-width: 100%;
    width: 100%;
  }
}

/* ================= Local AI Product Page Layout & Tokens ================= */
.shell.local-ai-shell {
  background: var(--bc-canvas);
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: calc(100vh - 64px);
}
.shell.local-ai-shell .sidebar,
.shell.local-ai-shell .toc,
.shell.local-ai-shell .docs-nav-toggle {
  display: none !important;
}
.content.local-ai-content {
  max-width: 1200px !important;
  margin: 0 auto;
  width: 100%;
  padding: 40px 24px 80px;
  box-sizing: border-box;
}

/* Local AI topbar parity with homepage & models */
body:has(.shell.local-ai-shell) .topbar {
  background: rgba(15,17,19,.88);
  border-bottom-color: var(--bc-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 32px rgba(0,0,0,.35);
}
body:has(.shell.local-ai-shell) .top-link { color: #c3c9cf; }
body:has(.shell.local-ai-shell) .top-link:hover { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.local-ai-shell) .top-link.active { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.local-ai-shell) .brand-mark { border-color: var(--bc-border); background: var(--bc-raised); color: var(--bc-accent); box-shadow: none; }
body:has(.shell.local-ai-shell) .top-link.cta-primary { background: var(--bc-accent); border: 1px solid transparent; color: #0b0d10; border-radius: 8px; font-weight: 700; }
body:has(.shell.local-ai-shell) .top-link.cta-primary:hover { background: #8f99ff; color: #0b0d10; }
body:has(.shell.local-ai-shell) :focus-visible { outline-color: var(--bc-accent); box-shadow: 0 0 0 6px rgba(123,134,255,.22); }
body:has(.shell.local-ai-shell) .footer { border-top-color: var(--bc-border); color: var(--bc-muted); }

/* Hero */
.lai-hero {
  text-align: center;
  max-width: 860px;
  margin: 20px auto 64px;
}
.lai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-accent);
  background: rgba(123,134,255,0.08);
  border: 1px solid rgba(123,134,255,0.25);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.lai-title {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--bc-text);
  margin: 0 0 20px;
}
.lai-lead {
  font-size: clamp(16px, 1.8vw, 18.5px);
  line-height: 1.55;
  color: #b0c0ce;
  max-width: 740px;
  margin: 0 auto 32px;
}
.lai-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.lai-hero-actions .btn {
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 9px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lai-hero-actions .btn.primary {
  background: var(--bc-accent);
  color: #0b0d10;
  border-color: transparent;
}
.lai-hero-actions .btn.primary:hover {
  background: #8f99ff;
}
.lai-proof-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 14px 22px;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  margin-top: 16px;
}
.lai-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #c0d0dc;
}
.lai-proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bc-accent);
}

/* Sections */
.lai-section {
  margin: 76px 0;
}
.lai-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.lai-tag {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bc-accent);
  margin-bottom: 8px;
  display: block;
}
.lai-section-header h2 {
  font-size: clamp(23px, 3vw, 32px);
  font-weight: 750;
  color: var(--bc-text);
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.lai-sub {
  font-size: 15.5px;
  color: var(--bc-muted);
  margin: 0;
  line-height: 1.5;
}

/* Flow Visual */
.lai-flow {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  margin: 28px 0;
}
.lai-flow-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lai-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  color: var(--bc-accent);
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
}
.lai-flow-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 18px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.lai-card-icon {
  font-size: 24px;
  margin-bottom: 8px;
}
.lai-flow-card h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 8px;
}
.lai-card-desc {
  font-size: 12.5px;
  color: var(--bc-muted);
  line-height: 1.45;
  margin: 0 0 12px;
  flex: 1;
}
.lai-code-pill {
  font-family: monospace;
  font-size: 11px;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  padding: 4px 8px;
  border-radius: 6px;
  color: #a5b8cc;
  display: inline-block;
  word-break: break-all;
}
.lai-card-meta {
  font-size: 11px;
  color: var(--bc-accent);
  font-weight: 600;
}
.lai-flow-connector {
  display: flex;
  align-items: center;
  color: #3b4e60;
  font-size: 20px;
  user-select: none;
}

/* Hardware Fit Advisor */
.lai-truth-distinction {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.lai-dist-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 20px;
}
.lai-dist-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.lai-dist-badge.evidence {
  background: rgba(119,181,138,0.15);
  color: var(--bc-success);
  border: 1px solid rgba(119,181,138,0.3);
}
.lai-dist-badge.estimate {
  background: rgba(123,134,255,0.15);
  color: var(--bc-accent);
  border: 1px solid rgba(123,134,255,0.3);
}
.lai-dist-badge.verified {
  background: rgba(226,179,64,0.15);
  color: var(--bc-warning);
  border: 1px solid rgba(226,179,64,0.3);
}
.lai-dist-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 8px;
}
.lai-dist-card p {
  font-size: 13px;
  color: var(--bc-muted);
  margin: 0;
  line-height: 1.45;
}

.lai-tiers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.lai-tier-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.lai-tier-card.featured {
  border-color: rgba(123,134,255,0.4);
  background: linear-gradient(180deg, rgba(123,134,255,0.05) 0%, var(--bc-surface) 100%);
}
.lai-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.lai-tier-ram {
  font-size: 17px;
  font-weight: 800;
  color: var(--bc-text);
}
.lai-tier-models {
  margin-bottom: 14px;
}
.lai-tier-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--bc-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.lai-tier-scale {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bc-accent);
}
.lai-tier-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #b6c8d7;
}
.lai-tier-specs li strong {
  color: var(--bc-text);
}
.lai-tier-summary {
  font-size: 12px;
  color: var(--bc-muted);
  line-height: 1.4;
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bc-border);
}
.lai-illustrative-note {
  font-size: 12px;
  color: #7a8f9f;
  font-style: italic;
  margin-top: 16px;
  text-align: center;
}

/* Model & Configuration Matching */
.lai-matching-anatomy {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 24px;
}
.lai-matching-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.lai-matching-step {
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  padding: 16px;
}
.lai-step-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bc-accent);
  display: block;
  margin-bottom: 6px;
}
.lai-matching-step h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 6px;
}
.lai-matching-step p {
  font-size: 12px;
  color: var(--bc-muted);
  margin: 0;
  line-height: 1.4;
}
.lai-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 20px;
}
.lai-action-bar p {
  margin: 0;
  font-size: 14px;
  color: var(--bc-text);
  font-weight: 500;
}

/* Setup Workflow */
.lai-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lai-setup-card {
  display: flex;
  gap: 18px;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 20px;
}
.lai-setup-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  color: var(--bc-accent);
  font-size: 14px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.lai-setup-content {
  flex: 1;
  min-width: 0;
}
.lai-setup-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 8px;
}
.lai-setup-content p {
  font-size: 13.5px;
  color: var(--bc-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.lai-setup-content ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  color: #b6c8d7;
  line-height: 1.6;
}
.lai-code-block {
  background: #0b0d0f;
  border: 1px solid var(--bc-border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-family: monospace;
  font-size: 13px;
  color: #79c0ff;
}
.lai-note {
  font-size: 12px;
  color: var(--bc-muted);
  margin-top: 6px;
}

/* Runtime States */
.lai-states-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lai-state-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 20px;
}
.lai-state-top {
  margin-bottom: 12px;
}
.lai-state-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 8px;
}
.lai-state-card p {
  font-size: 13px;
  color: var(--bc-muted);
  margin: 0;
  line-height: 1.45;
}
.lai-state-card.state-ready {
  border-left: 3px solid var(--bc-success);
}
.lai-state-card.state-unverified {
  border-left: 3px solid var(--bc-warning);
}

/* Integrations */
.lai-integrations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lai-int-card {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.lai-int-icon {
  font-size: 24px;
  margin-bottom: 10px;
}
.lai-int-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 8px;
}
.lai-int-card p {
  font-size: 13px;
  color: var(--bc-muted);
  margin: 0 0 14px;
  line-height: 1.45;
  flex: 1;
}
.lai-int-target {
  font-size: 11px;
  font-family: monospace;
  color: var(--bc-accent);
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  align-self: flex-start;
}

/* Privacy & Network Boundaries */
.lai-privacy-box {
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 32px 28px;
}
.lai-privacy-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--bc-success);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lai-privacy-quote {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--bc-text);
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--bc-raised);
  border-left: 4px solid var(--bc-success);
  border-radius: 0 10px 10px 0;
}
.lai-privacy-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.lai-priv-col h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0 0 10px;
}
.lai-priv-col ul {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  color: #b6c8d7;
  line-height: 1.6;
}
.lai-priv-col ul li strong {
  color: var(--bc-text);
}
.lai-privacy-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--bc-border);
}
.lai-priv-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bc-accent);
  text-decoration: none;
}
.lai-priv-link:hover {
  text-decoration: underline;
}

/* Final CTA */
.lai-final-section {
  text-align: center;
  margin-top: 80px;
}
.lai-final-card {
  background: linear-gradient(180deg, var(--bc-surface) 0%, var(--bc-raised) 100%);
  border: 1px solid var(--bc-border);
  border-radius: 16px;
  padding: 48px 24px;
  max-width: 820px;
  margin: 0 auto;
}
.lai-final-card h2 {
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 800;
  color: var(--bc-text);
  margin: 0 0 12px;
}
.lai-final-card p {
  font-size: 16px;
  color: var(--bc-muted);
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.5;
}
.lai-final-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Responsive queries */
@media (max-width: 1024px) {
  .lai-tiers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lai-matching-card {
    grid-template-columns: repeat(3, 1fr);
  }
  .lai-states-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lai-integrations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .content.local-ai-content {
    padding: 24px 16px 60px;
  }
  .lai-hero {
    margin: 12px auto 44px;
  }
  .lai-section {
    margin: 52px 0;
  }
  .lai-flow {
    flex-direction: column;
    gap: 8px;
  }
  .lai-flow-connector {
    transform: rotate(90deg);
    margin: 4px auto;
  }
  .lai-truth-distinction {
    grid-template-columns: 1fr;
  }
  .lai-tiers-grid {
    grid-template-columns: 1fr;
  }
  .lai-matching-card {
    grid-template-columns: 1fr;
  }
  .lai-setup-card {
    flex-direction: column;
    gap: 12px;
  }
  .lai-states-grid {
    grid-template-columns: 1fr;
  }
  .lai-integrations-grid {
    grid-template-columns: 1fr;
  }
  .lai-privacy-details {
    grid-template-columns: 1fr;
  }
  .lai-hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .lai-hero-actions .btn {
    width: 100%;
    box-sizing: border-box;
  }
  .lai-final-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .lai-final-actions .btn {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ================= Developers Product Page Layout & Tokens ================= */
.shell.developers-shell {
  background: var(--bc-canvas);
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: calc(100vh - 64px);
}
.shell.developers-shell .sidebar,
.shell.developers-shell .toc,
.shell.developers-shell .docs-nav-toggle {
  display: none !important;
}
.content.developers-content {
  max-width: 1200px !important;
  margin: 0 auto;
  width: 100%;
  padding: 40px 24px 80px;
  box-sizing: border-box;
}

/* Developers topbar parity with homepage, models, & local-ai */
body:has(.shell.developers-shell) .topbar {
  background: rgba(15,17,19,.88);
  border-bottom-color: var(--bc-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 32px rgba(0,0,0,.35);
}
body:has(.shell.developers-shell) .top-link { color: #c3c9cf; }
body:has(.shell.developers-shell) .top-link:hover { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.developers-shell) .top-link.active { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.developers-shell) .brand-mark { border-color: var(--bc-border); background: var(--bc-raised); color: var(--bc-accent); box-shadow: none; }
body:has(.shell.developers-shell) .top-link.cta-primary { background: var(--bc-accent); border: 1px solid transparent; color: #0b0d10; border-radius: 8px; font-weight: 700; }
body:has(.shell.developers-shell) .top-link.cta-primary:hover { background: #8f99ff; color: #0b0d10; }
body:has(.shell.developers-shell) :focus-visible { outline-color: var(--bc-accent); box-shadow: 0 0 0 6px rgba(123,134,255,.22); }
body:has(.shell.developers-shell) .footer { border-top-color: var(--bc-border); color: var(--bc-muted); }

/* Developers Hero */
.dev-hero {
  text-align: center;
  max-width: 880px;
  margin: 20px auto 64px;
}
.dev-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  color: var(--bc-text-dim);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 20px;
}
.dev-title {
  font-size: 44px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--bc-text);
}
.dev-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--bc-muted);
  max-width: 740px;
  margin: 0 auto 28px;
}
.dev-lead code {
  font-family: var(--font-mono, monospace);
  color: var(--bc-accent);
  background: var(--bc-raised);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--bc-border);
  font-size: 0.9em;
}
.dev-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.dev-proof-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 14px 24px;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
}
.dev-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--bc-text-dim);
  font-weight: 500;
}
.dev-proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bc-accent);
  box-shadow: 0 0 8px rgba(123,134,255,.5);
}

/* Sections */
.dev-section {
  margin-bottom: 72px;
}
.dev-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.dev-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bc-accent);
  margin-bottom: 8px;
}
.dev-section-header h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bc-text);
  margin: 0 0 10px;
}
.dev-sub {
  font-size: 15px;
  color: var(--bc-muted);
  line-height: 1.5;
  margin: 0;
}

/* Code Panel */
.dev-code-panel {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}
.dev-code-panel .tabs {
  margin: 0;
}
.dev-code-panel .tabbar {
  display: flex;
  background: var(--bc-raised);
  border-bottom: 1px solid var(--bc-border);
  padding: 6px 10px;
  gap: 6px;
  overflow-x: auto;
}
.dev-code-panel .tab {
  background: transparent;
  border: 0;
  color: var(--bc-muted);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.dev-code-panel .tab:hover {
  color: var(--bc-text);
  background: rgba(255,255,255,.05);
}
.dev-code-panel .tab.active {
  color: var(--bc-accent);
  background: var(--bc-canvas);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.dev-code-panel .tabpanel {
  padding: 0;
}
.dev-code-panel .tabpanel.hidden {
  display: none !important;
}
.dev-code-panel .codewrap {
  margin: 0;
  border: 0;
  border-radius: 0;
}
.dev-code-panel .codehead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: rgba(15,17,19,.6);
  border-bottom: 1px solid var(--bc-border);
  font-size: 12px;
  color: var(--bc-muted);
}
.dev-code-panel pre {
  margin: 0;
  padding: 20px;
  font-family: var(--font-mono, monospace);
  font-size: 13.5px;
  line-height: 1.6;
  overflow-x: auto;
  background: #090a0d;
}

/* Note box */
.dev-note-box {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--bc-muted);
  line-height: 1.55;
}
.dev-note-box code {
  font-family: var(--font-mono, monospace);
  color: var(--bc-text);
  background: var(--bc-canvas);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--bc-border);
  font-size: 0.9em;
}
.dev-note-icon {
  font-size: 18px;
  color: var(--bc-accent);
  flex-shrink: 0;
  line-height: 1.4;
}

/* Grids */
.dev-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.dev-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.dev-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Cards */
.dev-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none;
  color: inherit;
}
.dev-card:hover {
  border-color: rgba(123,134,255,.35);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.dev-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.dev-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--bc-text);
  margin: 0;
}
.dev-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bc-muted);
  margin: 0 0 16px;
  flex-grow: 1;
}
.dev-card-desc code {
  font-family: var(--font-mono, monospace);
  font-size: 0.9em;
  color: var(--bc-text);
}
.dev-card-meta {
  font-size: 11.5px;
  color: var(--bc-text-dim);
  font-family: var(--font-mono, monospace);
  background: var(--bc-canvas);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--bc-border);
  margin-bottom: 14px;
  overflow-wrap: break-word;
}
.dev-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
.dev-card-links a {
  color: var(--bc-accent);
  text-decoration: none;
}
.dev-card-links a:hover {
  text-decoration: underline;
}

/* Status Chips */
.dev-status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.dev-status-chip.beta {
  background: rgba(123,134,255,.12);
  color: var(--bc-accent);
  border: 1px solid rgba(123,134,255,.3);
}
.dev-status-chip.good {
  background: rgba(46,196,182,.12);
  color: #2ec4b6;
  border: 1px solid rgba(46,196,182,.3);
}
.dev-status-chip.exp {
  background: rgba(255,159,28,.12);
  color: #ff9f1c;
  border: 1px solid rgba(255,159,28,.3);
}
.dev-status-chip.plan {
  background: rgba(140,150,165,.12);
  color: #8c96a5;
  border: 1px solid rgba(140,150,165,.3);
}
.dev-status-chip.boundary {
  background: rgba(140,150,165,.12);
  color: #8c96a5;
  border: 1px solid rgba(140,150,165,.3);
}

/* Cloud Status */
.dev-cloud-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.dev-cloud-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.dev-cloud-card.active-state {
  border-top: 3px solid var(--bc-accent);
}
.dev-cloud-card.planned-state,
.dev-cloud-card.boundary-state {
  border-top: 3px solid #6b7280;
}
.dev-cloud-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dev-cloud-item {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bc-muted);
}
.dev-cloud-item strong {
  color: var(--bc-text);
}
.dev-cloud-item a {
  color: var(--bc-accent);
  text-decoration: none;
}
.dev-cloud-item a:hover {
  text-decoration: underline;
}
.dev-cloud-item-icon {
  flex-shrink: 0;
  font-weight: bold;
  font-size: 14px;
  margin-top: 2px;
}
.dev-cloud-card.active-state .dev-cloud-item-icon {
  color: #2ec4b6;
}
.dev-cloud-card.planned-state .dev-cloud-item-icon,
.dev-cloud-card.boundary-state .dev-cloud-item-icon {
  color: #8c96a5;
}

/* Integrations */
.dev-integrations-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
}
.dev-integrations-banner-text {
  font-size: 13.5px;
  color: var(--bc-muted);
}
.dev-integrations-banner-code {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  color: var(--bc-accent);
  background: var(--bc-canvas);
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--bc-border);
}
.dev-integrations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.dev-integration-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: all .15s;
}
.dev-integration-card:hover {
  border-color: var(--bc-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.dev-integration-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--bc-text);
  margin-bottom: 12px;
}
.dev-integration-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--bc-text);
  margin-bottom: 4px;
}
.dev-integration-meta {
  font-size: 12px;
  color: var(--bc-muted);
  line-height: 1.4;
}
.dev-integrations-more {
  text-align: center;
  font-size: 14px;
  color: var(--bc-muted);
  margin: 20px 0 0;
}
.dev-integrations-more a {
  color: var(--bc-accent);
  text-decoration: none;
  font-weight: 600;
}
.dev-integrations-more a:hover {
  text-decoration: underline;
}

/* Build Flow */
.dev-flow {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
}
.dev-flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dev-flow-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 22px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dev-flow-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bc-raised);
  border: 1px solid var(--bc-accent);
  color: var(--bc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
}
.dev-flow-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--bc-text);
  margin-bottom: 8px;
}
.dev-flow-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--bc-muted);
  margin: 0 0 14px;
  flex-grow: 1;
}
.dev-flow-code {
  font-size: 11.5px;
  font-family: var(--font-mono, monospace);
  color: var(--bc-text-dim);
  background: var(--bc-canvas);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--bc-border);
  word-break: break-all;
}
.dev-flow-arrow {
  display: flex;
  align-items: center;
  color: var(--bc-muted);
  font-size: 20px;
  user-select: none;
}

/* Final CTA */
.dev-cta {
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(123,134,255,.14) 0%, var(--bc-card) 70%), var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 16px;
  padding: 54px 24px;
  margin-top: 48px;
}
.dev-cta-title {
  font-size: 30px;
  font-weight: 750;
  color: var(--bc-text);
  margin: 0 0 12px;
}
.dev-cta-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bc-muted);
  max-width: 620px;
  margin: 0 auto 28px;
}
.dev-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Developers Responsive Queries */
@media (max-width: 1024px) {
  .dev-integrations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .dev-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dev-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dev-flow {
    flex-direction: column;
    gap: 16px;
  }
  .dev-flow-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .content.developers-content {
    padding: 24px 16px 60px;
  }
  .dev-hero {
    margin: 12px auto 44px;
  }
  .dev-title {
    font-size: 32px;
  }
  .dev-section {
    margin-bottom: 52px;
  }
  .dev-grid-3,
  .dev-grid-2,
  .dev-grid-4,
  .dev-cloud-grid {
    grid-template-columns: 1fr;
  }
  .dev-integrations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dev-hero-actions,
  .dev-cta-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .dev-hero-actions .btn,
  .dev-cta-actions .btn {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .dev-title {
    font-size: 26px;
  }
  .dev-hero-actions .dev-hero-tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--bc-accent);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
  }
  .dev-hero-actions .dev-hero-tertiary:hover {
    color: var(--bc-text);
    background: transparent;
  }
  .dev-integrations-grid {
    grid-template-columns: 1fr;
  }
  .dev-proof-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ================= Pricing Product Page Layout & Tokens ================= */
.shell.pricing-shell {
  background: var(--bc-canvas);
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: calc(100vh - 64px);
}
.shell.pricing-shell .sidebar,
.shell.pricing-shell .toc,
.shell.pricing-shell .docs-nav-toggle {
  display: none !important;
}
.content.pricing-content {
  max-width: 1200px !important;
  margin: 0 auto;
  width: 100%;
  padding: 40px 24px 80px;
  box-sizing: border-box;
}

/* Pricing topbar parity with homepage, models, local-ai, & developers */
body:has(.shell.pricing-shell) .topbar {
  background: rgba(15,17,19,.88);
  border-bottom-color: var(--bc-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 32px rgba(0,0,0,.35);
}
body:has(.shell.pricing-shell) .top-link { color: #c3c9cf; }
body:has(.shell.pricing-shell) .top-link:hover { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.pricing-shell) .top-link.active { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.pricing-shell) .brand-mark { border-color: var(--bc-border); background: var(--bc-raised); color: var(--bc-accent); box-shadow: none; }
body:has(.shell.pricing-shell) .top-link.cta-primary { background: var(--bc-accent); border: 1px solid transparent; color: #0b0d10; border-radius: 8px; font-weight: 700; }
body:has(.shell.pricing-shell) .top-link.cta-primary:hover { background: #8f99ff; color: #0b0d10; }
body:has(.shell.pricing-shell) :focus-visible { outline-color: var(--bc-accent); box-shadow: 0 0 0 6px rgba(123,134,255,.22); }
body:has(.shell.pricing-shell) .footer { border-top-color: var(--bc-border); color: var(--bc-muted); }

/* Pricing Hero */
.pricing-hero {
  text-align: center;
  max-width: 880px;
  margin: 24px auto 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bc-accent);
  background: rgba(123,134,255,.1);
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(123,134,255,.25);
  margin-bottom: 20px;
}
.pricing-title {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--bc-text);
  margin: 0 0 20px;
}
.pricing-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--bc-muted);
  max-width: 740px;
  margin: 0 0 32px;
}
.pricing-hero-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.pricing-proof-strip {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 9999px;
  font-size: 13px;
  color: var(--bc-muted);
}
.pricing-proof-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bc-accent);
}

/* Sections */
.pricing-section {
  margin-bottom: 72px;
}
.pricing-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.pricing-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bc-accent);
  margin-bottom: 8px;
}
.pricing-section-header h2 {
  font-size: 30px;
  font-weight: 750;
  color: var(--bc-text);
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.pricing-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--bc-muted);
  margin: 0;
}

/* Execution Modes Grid */
.pricing-modes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.pricing-mode-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  transition: transform .15s, border-color .15s;
}
.pricing-mode-card:hover {
  border-color: rgba(123,134,255,.4);
  transform: translateY(-2px);
}
.pricing-mode-card.local-mode {
  border-top: 4px solid #2ec4b6;
}
.pricing-mode-card.cloud-mode {
  border-top: 4px solid var(--bc-accent);
}
.pricing-mode-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.pricing-mode-title {
  display: block;
  font-size: 22px;
  font-weight: 750;
  color: var(--bc-text);
}
.pricing-mode-sub {
  display: block;
  font-size: 13px;
  color: var(--bc-muted);
  margin-top: 2px;
}
.pricing-status-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: normal;
}
.pricing-status-chip.good {
  background: rgba(46,196,182,.12);
  color: #2ec4b6;
  border: 1px solid rgba(46,196,182,.3);
}
.pricing-status-chip.beta {
  background: rgba(123,134,255,.12);
  color: var(--bc-accent);
  border: 1px solid rgba(123,134,255,.3);
}
.pricing-status-chip.boundary {
  background: rgba(140,150,165,.12);
  color: #8c96a5;
  border: 1px solid rgba(140,150,165,.3);
}
.pricing-mode-price-box {
  background: var(--bc-canvas);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.pricing-mode-price {
  font-size: 24px;
  font-weight: 800;
  color: var(--bc-text);
  letter-spacing: -.02em;
}
.pricing-mode-price-sub {
  font-size: 12.5px;
  color: var(--bc-muted);
  margin-top: 4px;
}
.pricing-mode-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bc-text-dim);
  margin: 0 0 24px;
}
.pricing-mode-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}
.pricing-mode-list li {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bc-muted);
}
.pricing-mode-list li strong {
  color: var(--bc-text);
}
.pricing-check {
  flex-shrink: 0;
  font-weight: bold;
  font-size: 14px;
  color: #2ec4b6;
  margin-top: 1px;
}
.pricing-mode-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--bc-border);
}
.pricing-card-link {
  font-size: 13px;
  color: var(--bc-accent);
  text-decoration: none;
  font-weight: 600;
}
.pricing-card-link:hover {
  text-decoration: underline;
}

/* Commercial & Billing Status */
.pricing-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.pricing-status-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.pricing-status-card.active-state {
  border-top: 3px solid #2ec4b6;
}
.pricing-status-card.planned-state {
  border-top: 3px solid #6b7280;
}
.pricing-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.pricing-status-title {
  font-size: 17px;
  font-weight: 750;
  color: var(--bc-text);
}
.pricing-status-desc {
  font-size: 13px;
  color: var(--bc-muted);
  margin: 0 0 16px;
}
.pricing-status-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.pricing-status-list li {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bc-muted);
}
.pricing-status-list li strong {
  color: var(--bc-text);
}
.pricing-list-icon {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--bc-accent);
  margin-top: 2px;
}
.pricing-note-box {
  display: flex;
  gap: 14px;
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 24px;
}
.pricing-note-icon {
  font-size: 18px;
  color: var(--bc-accent);
  flex-shrink: 0;
}
.pricing-note-content {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bc-muted);
}
.pricing-note-content strong {
  color: var(--bc-text);
}
.pricing-note-content a {
  color: var(--bc-accent);
  text-decoration: none;
}
.pricing-note-content a:hover {
  text-decoration: underline;
}

/* Comparison Table */
.pricing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
}
.pricing-comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}
.pricing-comparison-table th,
.pricing-comparison-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--bc-border);
}
.pricing-comparison-table th {
  background: var(--bc-surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--bc-text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pricing-comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.pricing-comparison-table tbody tr:hover {
  background: rgba(255,255,255,.015);
}
.pricing-comparison-table td strong {
  color: var(--bc-text);
}
.pricing-comparison-table td:first-child {
  width: 25%;
}
.pricing-comparison-table td:nth-child(2),
.pricing-comparison-table td:nth-child(3) {
  width: 37.5%;
  color: var(--bc-muted);
}

/* Cost Drivers Grid */
.pricing-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pricing-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
}
.pricing-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.pricing-card-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 750;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: .04em;
}
.pricing-card-badge.local {
  background: rgba(46,196,182,.12);
  color: #2ec4b6;
  border: 1px solid rgba(46,196,182,.3);
}
.pricing-card-badge.cloud {
  background: rgba(123,134,255,.12);
  color: var(--bc-accent);
  border: 1px solid rgba(123,134,255,.3);
}
.pricing-card-title {
  font-size: 16px;
  font-weight: 750;
  color: var(--bc-text);
}
.pricing-card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--bc-muted);
  margin: 0;
  flex-grow: 1;
}

/* Local Economics Box */
.pricing-local-box {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 32px 28px;
}
.pricing-local-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pricing-local-col {
  display: flex;
  flex-direction: column;
}
.pricing-local-icon {
  font-size: 24px;
  color: var(--bc-accent);
  margin-bottom: 12px;
}
.pricing-local-title {
  font-size: 16px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 8px;
}
.pricing-local-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bc-muted);
  margin: 0;
}

/* FAQ */
.pricing-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.pricing-faq-item {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 22px 26px;
}
.pricing-faq-q {
  font-size: 16px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 8px;
}
.pricing-faq-a {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bc-muted);
}
.pricing-faq-a a {
  color: var(--bc-accent);
  text-decoration: none;
}
.pricing-faq-a a:hover {
  text-decoration: underline;
}

/* Final CTA */
.pricing-cta {
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(123,134,255,.14) 0%, var(--bc-card) 70%), var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 16px;
  padding: 54px 24px;
  margin-top: 48px;
}
.pricing-cta-title {
  font-size: 30px;
  font-weight: 750;
  color: var(--bc-text);
  margin: 0 0 12px;
}
.pricing-cta-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bc-muted);
  max-width: 620px;
  margin: 0 auto 28px;
}
.pricing-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pricing Responsive Queries */
@media (max-width: 1024px) {
  .pricing-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .content.pricing-content {
    padding: 24px 16px 60px;
  }
  .pricing-hero {
    margin: 12px auto 44px;
  }
  .pricing-title {
    font-size: 32px;
  }
  .pricing-section {
    margin-bottom: 52px;
  }
  .pricing-modes-grid,
  .pricing-status-grid,
  .pricing-local-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pricing-hero-actions,
  .pricing-cta-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .pricing-hero-actions .btn,
  .pricing-cta-actions .btn {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  .pricing-mode-card {
    padding: 24px 18px;
  }
  .pricing-table-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow-x: visible;
  }
  .pricing-comparison-table,
  .pricing-comparison-table thead,
  .pricing-comparison-table tbody,
  .pricing-comparison-table tr,
  .pricing-comparison-table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .pricing-comparison-table thead {
    display: none;
  }
  .pricing-comparison-table tbody {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .pricing-comparison-table tr {
    background: var(--bc-card);
    border: 1px solid var(--bc-border);
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pricing-comparison-table td {
    padding: 0;
    border: none;
    font-size: 13.5px;
    line-height: 1.5;
  }
  .pricing-comparison-table td:first-child {
    font-size: 15px;
    font-weight: 750;
    color: var(--bc-text);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bc-border);
  }
  .pricing-comparison-table td:nth-child(2)::before {
    content: "Local AI (On-Device): ";
    display: block;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    color: #2ec4b6;
    letter-spacing: .04em;
    margin-bottom: 3px;
  }
  .pricing-comparison-table td:nth-child(3)::before {
    content: "BotConnector Cloud: ";
    display: block;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    color: var(--bc-accent);
    letter-spacing: .04em;
    margin-bottom: 3px;
  }
  html[lang="id"] .pricing-comparison-table td:nth-child(2)::before {
    content: "AI Lokal (Di Perangkat): ";
  }
  html[lang="id"] .pricing-comparison-table td:nth-child(3)::before {
    content: "BotConnector Cloud: ";
  }
}

@media (max-width: 480px) {
  .pricing-title {
    font-size: 26px;
  }
  .pricing-hero-actions .pricing-hero-tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--bc-accent);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
  }
  .pricing-hero-actions .pricing-hero-tertiary:hover {
    color: var(--bc-text);
    background: transparent;
  }
  .pricing-proof-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-radius: 14px;
  }
  .pricing-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Batch 2E: Docs Production Experience
   ============================================================ */

.docs-landing-content {
  max-width: 960px !important;
  width: 100%;
}

.docs-landing-head {
  margin-bottom: 20px;
}

.docs-landing-head .bc-mobile {
  display: none;
}

@media (max-width: 900px) {
  .docs-landing-head .bc-desktop {
    display: none;
  }
  .docs-landing-head .bc-mobile {
    display: inline;
  }
}

.docs-hero {
  background: linear-gradient(135deg, rgba(14, 34, 51, 0.95) 0%, rgba(9, 26, 41, 0.98) 100%);
  border: 1px solid rgba(49, 90, 118, 0.65);
  border-radius: 16px;
  padding: 38px 36px 30px;
  margin-bottom: 48px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.docs-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(99, 230, 190, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.docs-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.docs-hero-title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  background: linear-gradient(120deg, #f3f7fb 40%, #9af4d5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.docs-hero-lead {
  font-size: 16px;
  line-height: 1.6;
  color: #b5c7d5;
  margin: 0 0 24px;
  max-width: 740px;
}

.docs-hero-search-wrap {
  margin-bottom: 24px;
}

.docs-hero-search-btn {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #07131f;
  border: 1px solid rgba(49, 90, 118, 0.75);
  border-radius: 11px;
  padding: 13px 18px;
  color: #7fa0b6;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  transition: all 0.18s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.docs-hero-search-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 230, 190, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--text);
  background: #091a29;
}

.docs-hero-search-icon {
  font-size: 15px;
  color: var(--accent);
  opacity: 0.9;
}

.docs-hero-search-placeholder {
  flex: 1;
  color: #8ba2b4;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-hero-search-kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #0e2233;
  border: 1px solid rgba(49, 90, 118, 0.8);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11.5px;
  color: #a4b8c9;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.docs-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.docs-hero-actions .btn {
  padding: 10px 18px;
  font-size: 14px;
  border-radius: 8px;
  font-weight: 650;
}

.docs-hero-tertiary {
  background: rgba(14, 34, 51, 0.65);
  border: 1px solid rgba(49, 90, 118, 0.55);
  color: #c0d0db;
}

.docs-hero-tertiary:hover {
  background: #123a4b;
  color: #e5fff7;
  border-color: var(--accent);
  text-decoration: none;
}

.docs-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(49, 90, 118, 0.35);
  font-size: 12.5px;
  color: #8ba2b4;
}

.docs-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.docs-proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(99, 230, 190, 0.6);
  flex-shrink: 0;
}

/* Sections & Headers */
.docs-section {
  margin-bottom: 56px;
}

.docs-section-header {
  margin-bottom: 24px;
}

.docs-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(99, 230, 190, 0.08);
  border: 1px solid rgba(99, 230, 190, 0.2);
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.docs-section-header h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: #f3f7fb;
  letter-spacing: -0.02em;
}

.docs-section-sub {
  font-size: 14.5px;
  color: #8ba2b4;
  margin: 0;
  line-height: 1.55;
  max-width: 680px;
}

/* Step 01-05 Quickstart Grid */
.docs-quickstart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.docs-quickstart-card {
  background: #091a29;
  border: 1px solid rgba(49, 90, 118, 0.55);
  border-radius: 12px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
  position: relative;
}

.docs-quickstart-card:hover {
  border-color: var(--accent);
  background: #0e273c;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.docs-qs-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.docs-qs-title {
  font-size: 15.5px;
  font-weight: 750;
  color: #f3f7fb;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.docs-qs-title span {
  color: var(--accent);
  transition: transform 0.15s ease;
}

.docs-quickstart-card:hover .docs-qs-title span {
  transform: translateX(3px);
}

.docs-qs-desc {
  font-size: 13px;
  color: #9eb5c6;
  line-height: 1.5;
  margin: 0;
}

/* Tasks / Execution Modes Grid */
.docs-tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 18px 0;
}

.docs-task-card {
  background: #091a29;
  border: 1px solid rgba(49, 90, 118, 0.55);
  border-radius: 13px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: all 0.16s ease;
}

.docs-task-card:hover {
  border-color: var(--accent);
  background: #0e273c;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
  text-decoration: none;
}

.docs-task-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 12px;
  width: fit-content;
}

.docs-task-badge.cloud {
  background: rgba(157, 183, 255, 0.14);
  color: #9db7ff;
  border: 1px solid rgba(157, 183, 255, 0.3);
}

.docs-task-badge.browser {
  background: rgba(246, 200, 107, 0.14);
  color: #f6c86b;
  border: 1px solid rgba(246, 200, 107, 0.3);
}

.docs-task-badge.local {
  background: rgba(99, 230, 190, 0.14);
  color: #63e6be;
  border: 1px solid rgba(99, 230, 190, 0.3);
}

.docs-task-title {
  font-size: 17px;
  font-weight: 750;
  color: #f3f7fb;
  margin: 0 0 8px;
}

.docs-task-desc {
  font-size: 13.5px;
  color: #9eb5c6;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

.docs-task-link {
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 7 Categories Grid */
.docs-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.docs-cat-card {
  background: #091a29;
  border: 1px solid rgba(49, 90, 118, 0.55);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}

.docs-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(49, 90, 118, 0.35);
}

.docs-cat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0e273c;
  border: 1px solid rgba(99, 230, 190, 0.25);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.docs-cat-title {
  font-size: 16px;
  font-weight: 750;
  color: #f3f7fb;
}

.docs-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.docs-cat-item a {
  color: #9eb5c6;
  font-size: 13px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  transition: color 0.12s ease;
  line-height: 1.4;
}

.docs-cat-item a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Status Callout Box */
.docs-status-callout {
  background: linear-gradient(135deg, rgba(14, 37, 56, 0.9) 0%, rgba(9, 26, 41, 0.95) 100%);
  border: 1px solid rgba(99, 230, 190, 0.35);
  border-radius: 14px;
  padding: 30px 32px;
  margin: 36px 0 56px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.docs-status-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.docs-status-badge {
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(99, 230, 190, 0.15);
  color: var(--accent);
  border: 1px solid rgba(99, 230, 190, 0.35);
  border-radius: 6px;
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-status-title {
  font-size: 20px;
  font-weight: 800;
  color: #f3f7fb;
  margin: 0;
  letter-spacing: -0.02em;
}

.docs-status-body {
  font-size: 14.5px;
  color: #b5c7d5;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 760px;
}

.docs-status-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.docs-status-actions .btn {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 650;
  border-radius: 8px;
}

/* Info Cards (Offline & Troubleshooting) */
.docs-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 18px 0;
}

.docs-info-card {
  background: #091a29;
  border: 1px solid rgba(49, 90, 118, 0.55);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}

.docs-info-title {
  font-size: 16px;
  font-weight: 750;
  color: #f3f7fb;
  margin: 0 0 10px;
}

.docs-info-desc {
  font-size: 13.5px;
  color: #9eb5c6;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

.docs-info-desc code {
  font-size: 12px;
  color: #63e6be;
}

.docs-info-link {
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.docs-info-link:hover {
  text-decoration: underline;
}

/* Responsive adjustments for Docs */
@media (max-width: 900px) {
  .docs-hero {
    padding: 26px 20px;
    margin-bottom: 36px;
  }
  .docs-hero-title {
    font-size: 26px;
  }
  .docs-hero-lead {
    font-size: 14.5px;
  }
  .docs-proof-strip {
    gap: 10px 18px;
  }
  .docs-quickstart-grid,
  .docs-tasks-grid,
  .docs-categories-grid,
  .docs-info-grid {
    grid-template-columns: 1fr;
  }
  .docs-status-callout {
    padding: 22px 20px;
  }
}

@media (max-width: 480px) {
  .docs-hero {
    padding: 20px 16px;
    border-radius: 12px;
  }
  .docs-hero-title {
    font-size: 23px;
  }
  .docs-hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .docs-hero-actions .btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .docs-hero-actions .docs-hero-tertiary {
    background: transparent !important;
    border: none !important;
    color: var(--accent) !important;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none !important;
    margin-top: 2px;
  }
  .docs-hero-actions .docs-hero-tertiary:hover {
    color: #e5fff7 !important;
    background: transparent !important;
    text-decoration: underline;
  }
  .docs-hero-search-btn {
    padding: 12px 14px;
    min-height: 44px;
  }
  .docs-hero-search-placeholder {
    font-size: 12.5px;
  }
  .docs-proof-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .docs-status-actions {
    flex-direction: column;
    width: 100%;
  }
  .docs-status-actions .btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ================= Download Product Page Layout & Tokens ================= */
.shell.download-shell {
  background: var(--bc-canvas);
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: calc(100vh - 64px);
}
.shell.download-shell .sidebar,
.shell.download-shell .toc,
.shell.download-shell .docs-nav-toggle {
  display: none !important;
}
.content.download-content {
  max-width: 1200px !important;
  margin: 0 auto;
  width: 100%;
  padding: 40px 24px 80px;
  box-sizing: border-box;
}

/* Download topbar parity */
body:has(.shell.download-shell) .topbar {
  background: rgba(15,17,19,.88);
  border-bottom-color: var(--bc-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 32px rgba(0,0,0,.35);
}
body:has(.shell.download-shell) .top-link { color: #c3c9cf; }
body:has(.shell.download-shell) .top-link:hover { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.download-shell) .top-link.active { background: var(--bc-raised); color: var(--bc-text); }
body:has(.shell.download-shell) .brand-mark { border-color: var(--bc-border); background: var(--bc-raised); color: var(--bc-accent); box-shadow: none; }
body:has(.shell.download-shell) .top-link.cta-primary { background: var(--bc-accent); border: 1px solid transparent; color: #0b0d10; border-radius: 8px; font-weight: 700; }
body:has(.shell.download-shell) .top-link.cta-primary:hover { background: #8f99ff; color: #0b0d10; }
body:has(.shell.download-shell) :focus-visible { outline-color: var(--bc-accent); box-shadow: 0 0 0 6px rgba(123,134,255,.22); }
body:has(.shell.download-shell) .footer { border-top-color: var(--bc-border); color: var(--bc-muted); }

/* Download Hero */
.download-hero {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 64px;
  padding: 24px 0 0;
}
.download-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bc-muted);
  background: var(--bc-raised);
  border: 1px solid var(--bc-border);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 22px;
}
.download-eyebrow .brand-mark {
  color: var(--bc-accent);
}
.download-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--bc-text);
  margin: 0 0 18px;
}
.download-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--bc-muted);
  max-width: 720px;
  margin: 0 auto 28px;
}
.download-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.download-hero-actions .btn {
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 9px;
}
.download-hero-actions .download-hero-tertiary {
  background: transparent;
  border-color: var(--bc-border);
  color: var(--bc-muted);
}
.download-hero-actions .download-hero-tertiary:hover {
  background: var(--bc-raised);
  color: var(--bc-text);
  border-color: rgba(255,255,255,.2);
}
.download-proof-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--bc-muted);
}
.download-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.download-proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bc-accent);
}

/* Remove synthetic Soon badge from download buttons */
.download-content .btn.hero-cta-disabled::after {
  display: none !important;
}
.download-content .btn.hero-cta-disabled {
  background: rgba(30, 41, 59, 0.7) !important;
  color: var(--bc-text-muted) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  opacity: .75;
  cursor: not-allowed;
  filter: none;
  pointer-events: none;
}
.download-content .btn.hero-cta-disabled:hover {
  background: rgba(30, 41, 59, 0.7) !important;
  color: var(--bc-text-muted) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Download Sections */
.download-section {
  margin-bottom: 72px;
}
.download-section-header {
  margin-bottom: 28px;
}
.download-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bc-accent);
  margin-bottom: 8px;
}
.download-section-header h2 {
  font-size: 26px;
  font-weight: 750;
  color: var(--bc-text);
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.download-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--bc-muted);
  margin: 0;
  max-width: 760px;
}

/* Platform Cards */
.download-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.download-platform-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  min-width: 0;
  transition: border-color .2s;
}
.download-platform-card.active-platform {
  border-color: rgba(123,134,255,.3);
}
.download-platform-card.active-platform:hover {
  border-color: rgba(123,134,255,.5);
}
.download-platform-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bc-border-subtle);
}
.download-platform-title {
  font-size: 20px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 4px;
}
.download-platform-os {
  font-size: 12.5px;
  color: var(--bc-muted);
  line-height: 1.4;
}
.download-status-chip {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: normal;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.download-status-chip.beta {
  background: rgba(123,134,255,.14);
  color: var(--bc-accent);
  border: 1px solid rgba(123,134,255,.3);
}
.download-status-chip.plan {
  background: rgba(255,255,255,.05);
  color: var(--bc-muted);
  border: 1px solid var(--bc-border);
}
.download-spec-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 24px;
  flex-grow: 1;
}
.download-spec-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.45;
}
.download-spec-label {
  font-weight: 600;
  color: #c3c9cf;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.download-spec-value {
  color: var(--bc-muted);
  word-break: break-word;
}
.download-spec-value code {
  font-size: 12px;
  color: var(--bc-accent);
  background: rgba(123,134,255,.08);
  padding: 1px 5px;
  border-radius: 4px;
}
.download-platform-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.download-platform-actions .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
}
.download-card-link {
  font-size: 13px;
  color: var(--bc-accent);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}
.download-card-link:hover {
  text-decoration: underline;
}

/* Component Architecture Grid */
.download-components-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.download-component-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.download-component-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--bc-accent);
  background: rgba(123,134,255,.1);
  padding: 3px 8px;
  border-radius: 6px;
  align-self: flex-start;
  margin-bottom: 12px;
  border: 1px solid rgba(123,134,255,.2);
}
.download-component-title {
  font-size: 18px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 8px;
}
.download-component-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bc-muted);
  margin: 0 0 16px;
  flex-grow: 1;
}
.download-component-desc code {
  font-size: 12.5px;
  color: #c3c9cf;
  background: var(--bc-surface);
  padding: 1px 5px;
  border-radius: 4px;
}
.download-component-meta {
  font-size: 12.5px;
  color: var(--bc-muted);
  padding-top: 14px;
  border-top: 1px solid var(--bc-border-subtle);
  display: flex;
  flex-direction: column;
  gap: 3px;
  word-break: break-word;
}
.download-component-meta-label {
  font-weight: 600;
  color: #a0aec0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.download-component-meta code {
  color: #c3c9cf;
  font-size: 12px;
}
.download-component-meta a {
  color: var(--bc-accent);
  text-decoration: none;
}
.download-component-meta a:hover {
  text-decoration: underline;
}

/* Installation Methods */
.download-install-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.download-install-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.download-install-card.boundary-card {
  background: rgba(22,26,34,.65);
}
.download-install-title {
  font-size: 18px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 8px;
}
.download-install-desc {
  font-size: 14px;
  color: var(--bc-muted);
  margin: 0 0 18px;
}
.download-install-steps {
  margin: 0 0 24px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--bc-muted);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.download-install-steps strong {
  color: var(--bc-text);
}
.download-install-steps code {
  font-size: 12px;
  color: #c3c9cf;
  background: var(--bc-surface);
  padding: 1px 5px;
  border-radius: 4px;
}
.download-install-boundaries {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bc-muted);
}
.download-install-boundaries li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.download-bullet {
  color: #f87171;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}
.download-install-boundaries strong {
  color: var(--bc-text);
}
.download-install-boundaries code {
  font-size: 12px;
  color: #c3c9cf;
  background: var(--bc-surface);
  padding: 1px 5px;
  border-radius: 4px;
}
.download-install-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

/* First-Run Steps */
.download-steps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.download-step-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 12px;
}
.download-step-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.download-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(123,134,255,.15);
  color: var(--bc-accent);
  border: 1px solid rgba(123,134,255,.3);
  font-size: 13px;
  font-weight: 750;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.download-step-title {
  font-size: 16px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 4px;
}
.download-step-desc {
  font-size: 13.5px;
  color: var(--bc-muted);
  line-height: 1.5;
}
.download-step-desc code {
  font-size: 12px;
  color: #c3c9cf;
  background: var(--bc-surface);
  padding: 1px 5px;
  border-radius: 4px;
}
.download-code {
  background: #07090c;
  border: 1px solid var(--bc-border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  color: #e2e8f0;
}
.download-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Local API Section */
.download-api-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.download-api-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
}
.download-api-title {
  font-size: 15px;
  font-weight: 750;
  color: var(--bc-text);
}
.download-api-desc {
  font-size: 13px;
  color: var(--bc-muted);
  margin: 0;
}
.download-api-callout {
  background: var(--bc-card);
  border: 1px solid rgba(123,134,255,.25);
  border-radius: 12px;
  padding: 22px 24px;
}
.download-callout-title {
  font-size: 15px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 12px;
}
.download-callout-list {
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bc-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.download-callout-list strong {
  color: var(--bc-text);
}
.download-callout-list code {
  font-size: 12px;
  color: var(--bc-accent);
}
.download-callout-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* System Requirements */
.download-reqs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.download-req-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.download-req-title {
  font-size: 17px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 14px;
}
.download-req-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bc-muted);
  margin: 0 0 16px;
}
.download-req-desc code {
  font-size: 12px;
  color: #c3c9cf;
  background: var(--bc-surface);
  padding: 2px 6px;
  border-radius: 4px;
}
.download-reqs-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Security Section */
.download-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 16px;
}
.download-security-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.download-security-title {
  font-size: 17px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 12px;
}
.download-security-desc {
  font-size: 13.5px;
  color: var(--bc-muted);
  line-height: 1.55;
  margin: 0 0 12px;
}
.checksum-code {
  font-size: 11px !important;
  color: #38bdf8 !important;
  word-break: break-all;
}
.download-smartscreen-box {
  background: rgba(234,179,8,.08);
  border: 1px solid rgba(234,179,8,.25);
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
}
.download-smartscreen-title {
  font-size: 13px;
  font-weight: 750;
  color: #fde047;
  margin-bottom: 6px;
}
.download-smartscreen-desc {
  font-size: 12.5px;
  color: #fef08a;
  line-height: 1.5;
  margin: 0;
}
.download-security-footer {
  padding: 12px 16px;
  background: var(--bc-surface);
  border: 1px solid var(--bc-border);
  border-radius: 8px;
}
.download-security-notice {
  font-size: 13px;
  color: var(--bc-muted);
  margin: 0;
  line-height: 1.5;
}
.download-security-notice a {
  color: var(--bc-accent);
  text-decoration: none;
}
.download-security-notice a:hover {
  text-decoration: underline;
}

/* Web App Alternative */
.download-webapp-card {
  background: linear-gradient(135deg, rgba(123,134,255,.08) 0%, rgba(22,26,34,.9) 100%);
  border: 1px solid rgba(123,134,255,.25);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.download-webapp-body {
  max-width: 760px;
}
.download-webapp-title {
  font-size: 18px;
  font-weight: 750;
  color: var(--bc-text);
  margin-bottom: 8px;
}
.download-webapp-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bc-muted);
  margin: 0;
}
.download-webapp-desc a {
  color: var(--bc-accent);
  text-decoration: none;
}
.download-webapp-desc a:hover {
  text-decoration: underline;
}
.download-webapp-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.download-webapp-actions .btn {
  text-align: center;
  justify-content: center;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Support Resources Grid */
.download-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.download-support-card {
  background: var(--bc-card);
  border: 1px solid var(--bc-border);
  border-radius: 12px;
  padding: 18px 20px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .2s, transform .15s;
}
.download-support-card:hover {
  border-color: rgba(123,134,255,.4);
  transform: translateY(-2px);
  text-decoration: none;
}
.download-support-name {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--bc-text);
}
.download-support-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bc-muted);
  margin: 0;
}

/* ================= Responsive Rules for Download Page ================= */
@media (max-width: 1024px) {
  .download-platform-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .download-components-grid,
  .download-install-grid,
  .download-api-grid,
  .download-reqs-grid,
  .download-security-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .download-webapp-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .download-webapp-actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .download-webapp-actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  .content.download-content {
    padding: 24px 16px 64px;
  }
  .download-hero {
    margin-bottom: 48px;
    padding-top: 12px;
  }
  .download-title {
    font-size: 32px;
  }
  .download-lead {
    font-size: 15px;
  }
  .download-section {
    margin-bottom: 52px;
  }
  .download-section-header h2 {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .download-title {
    font-size: 26px;
  }
  .download-hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .download-hero-actions .btn,
  .download-hero-actions button {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .download-proof-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .download-platform-card,
  .download-component-card,
  .download-install-card,
  .download-step-card,
  .download-api-card,
  .download-api-callout,
  .download-req-card,
  .download-security-card,
  .download-webapp-card {
    padding: 18px 16px;
    min-width: 0;
  }
  .download-platform-actions .btn,
  .download-install-actions .btn,
  .download-callout-actions .btn,
  .download-reqs-footer .btn,
  .download-webapp-actions .btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .download-install-actions,
  .download-callout-actions,
  .download-reqs-footer,
  .download-webapp-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .download-code {
    font-size: 12px;
    padding: 10px 12px;
  }
  .download-support-grid {
    grid-template-columns: 1fr;
  }
}

/* Public BotConnector Cloud model catalog */
.public-cloud-catalog{margin:32px 0 54px}
.catalog-section-heading{margin-bottom:18px}
.catalog-section-heading h2{margin:6px 0 8px;font-size:32px;letter-spacing:-.03em;background:linear-gradient(135deg,#f8fafc 0%,#cbd5e1 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.catalog-section-heading p{max-width:820px;color:var(--muted,#9aa3b2);font-size:14.5px;line-height:1.6}
.catalog-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;color:#9497ff}

.public-cloud-toolbar{display:flex;flex-direction:column;gap:10px;margin:22px 0 24px;padding:14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:14px}
.public-cloud-filters,.public-cloud-category-filters{display:flex;flex-wrap:wrap;gap:8px}
.pcf-tab{padding:7px 14px;border-radius:999px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.03);color:#cbd5e1;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease}
.pcf-tab:hover{border-color:rgba(148,163,184,.35);background:rgba(255,255,255,.06);color:#fff}
.pcf-tab.active{border-color:#6366f1;background:rgba(99,102,241,.18);color:#c7d2fe;box-shadow:0 0 14px rgba(99,102,241,.22)}
.pcf-cat-pill{padding:5px 11px;border-radius:8px;border:1px solid transparent;background:transparent;color:#94a3b8;font-size:11.5px;font-weight:500;cursor:pointer;transition:all .15s ease}
.pcf-cat-pill:hover{color:#f1f5f9;background:rgba(255,255,255,.04)}
.pcf-cat-pill.active{background:rgba(255,255,255,.08);color:#f8fafc;font-weight:600;border-color:rgba(255,255,255,.12)}

.public-cloud-group-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:32px 0 14px;padding-bottom:8px;border-bottom:1px solid rgba(148,163,184,.12)}
.public-cloud-group-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:#818cf8;text-transform:uppercase;margin-bottom:4px}
.public-cloud-group-head h3{margin:0;font-size:20px;font-weight:700;color:#f1f5f9;letter-spacing:-.02em}
.public-cloud-group-count{font-size:12px;font-weight:600;color:#94a3b8;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:3px 9px;border-radius:999px}

.public-cloud-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.public-cloud-model-card{display:flex;flex-direction:column;min-width:0;padding:18px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:linear-gradient(150deg,rgba(30,41,59,.4) 0%,rgba(15,23,42,.3) 100%);backdrop-filter:blur(12px);box-shadow:0 4px 20px -2px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s;position:relative}
.public-cloud-model-card:hover{transform:translateY(-3px);border-color:rgba(148,163,184,.32);box-shadow:0 12px 30px -4px rgba(0,0,0,.38),0 0 18px rgba(99,102,241,.12)}
.public-cloud-model-card[hidden]{display:none!important}

.public-cloud-model-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.public-cloud-brand-block{display:flex;align-items:flex-start;gap:11px;min-width:0}
.public-cloud-logo-badge{width:40px;height:40px;font-size:24px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:transform .15s ease}
.public-cloud-logo-badge svg{width:24px!important;height:24px!important;max-width:24px;max-height:24px;display:block;flex-shrink:0}

/* Official AI Brand color accents */
.public-cloud-logo-badge.openai{background:rgba(16,163,127,.12);border-color:rgba(16,163,127,.28);color:#10a37f}
.public-cloud-logo-badge.claude{background:rgba(217,119,87,.12);border-color:rgba(217,119,87,.28);color:#d97757}
.public-cloud-logo-badge.gemini,.public-cloud-logo-badge.veo,.public-cloud-logo-badge.lyria{background:rgba(78,130,238,.12);border-color:rgba(78,130,238,.28);color:#4e82ee}
.public-cloud-logo-badge.deepseek{background:rgba(77,107,254,.12);border-color:rgba(77,107,254,.28);color:#4d6bfe}
.public-cloud-logo-badge.qwen{background:rgba(99,54,231,.12);border-color:rgba(99,54,231,.28);color:#6f69f7}
.public-cloud-logo-badge.mistral{background:rgba(255,112,0,.12);border-color:rgba(255,112,0,.28);color:#ff8205}
.public-cloud-logo-badge.nvidia{background:rgba(116,183,27,.12);border-color:rgba(116,183,27,.28);color:#74b71b}
.public-cloud-logo-badge.zai{background:rgba(56,89,255,.12);border-color:rgba(56,89,255,.28);color:#3859ff}
.public-cloud-logo-badge.kimi{background:rgba(23,131,255,.12);border-color:rgba(23,131,255,.28);color:#1783ff}
.public-cloud-logo-badge.minimax{background:rgba(226,22,126,.12);border-color:rgba(226,22,126,.28);color:#fe603c}
.public-cloud-logo-badge.xiaomi{background:rgba(255,105,0,.12);border-color:rgba(255,105,0,.28);color:#ff6900}
.public-cloud-logo-badge.tencent{background:rgba(0,85,233,.12);border-color:rgba(0,85,233,.28);color:#00bcff}
.public-cloud-logo-badge.kling{background:rgba(255,46,99,.12);border-color:rgba(255,46,99,.28);color:#ff2e63}
.public-cloud-logo-badge.agnes{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.28);color:#10b981}
.public-cloud-logo-badge.space-bunny{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.28);color:#f43f5e}
.public-cloud-logo-badge.inclusion{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.28);color:#818cf8}
.public-cloud-logo-badge.alibabacloud,.public-cloud-logo-badge.alibaba-cloud{background:rgba(255,106,0,.12);border-color:rgba(255,106,0,.28);color:#ff6a00}
.public-cloud-logo-badge.embedding{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.28);color:#8b5cf6}

.public-cloud-title-group{min-width:0;display:flex;flex-direction:column;gap:2px}
.public-cloud-subhead{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.public-cloud-developer{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.public-cloud-cat-badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.05);color:#cbd5e1}
.public-cloud-title{margin:2px 0 0;font-size:15.5px;font-weight:700;color:#f8fafc;line-height:1.3;letter-spacing:-.01em}

.public-cloud-access{flex-shrink:0;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.public-cloud-access.free{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35);color:#34d399}
.public-cloud-access.payg{background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.35);color:#a5b4fc}
.public-cloud-access.currently-free{background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.35);color:#67e8f9}

.public-cloud-desc{font-size:12.5px;line-height:1.6;color:#cbd5e1;margin:0 0 14px;flex-grow:1;min-height:78px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

.public-cloud-model-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.pcm-stat{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;justify-content:center}
.pcm-stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#64748b;font-weight:600;margin-bottom:2px}
.pcm-stat-val{font-size:11.5px;font-weight:700;color:#e2e8f0;display:flex;align-items:center;gap:6px}
.pcm-stat-val.status-live{color:#34d399}
.pcm-stat-val.status-queued{color:#fbbf24}
.status-pulse-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:currentColor}
.status-live .status-pulse-dot{box-shadow:0 0 8px #34d399;animation:livePulse 2s infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}

.public-cloud-caps{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;min-height:24px}
.pcm-cap-pill{font-size:9.5px;font-weight:500;padding:2.5px 7px;border-radius:5px;background:rgba(255,255,255,.035);border:1px solid rgba(148,163,184,.12);color:#94a3b8}

.public-cloud-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid rgba(148,163,184,.1);margin-top:auto}
.pcm-id-label{font-size:9px;font-weight:800;color:#64748b;letter-spacing:.06em}
.public-cloud-model-id{display:inline-block;font-size:10.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#a5b4fc;background:rgba(99,102,241,.08);padding:3px 7px;border-radius:5px;border:1px solid rgba(99,102,241,.18);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

.public-cloud-footnote{margin-top:24px;font-size:12.5px;line-height:1.6;color:#94a3b8;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)}

@media(max-width:1100px){.public-cloud-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.public-cloud-grid{grid-template-columns:1fr}.public-cloud-desc{min-height:auto;-webkit-line-clamp:none}}

/* Trusted AI ecosystem */
.ecosystem-trust-panel{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:14px;
  margin:14px 0 34px;
}
.ecosystem-trust-main,
.ecosystem-trust-faq{
  min-width:0;
  padding:20px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.ecosystem-trust-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:150px;
}
.ecosystem-trust-faq{
  margin:0;
  background:linear-gradient(180deg,rgba(126,128,255,.07),rgba(255,255,255,.02));
}
.ecosystem-trust-kicker{
  display:block;
  margin-bottom:9px;
  color:#9da0ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
}
.ecosystem-trust-lead{
  margin:0;
  max-width:720px;
  font-size:16px;
  line-height:1.7;
  color:#d7dce5;
}
.ecosystem-trust-faq h3{
  margin:0 0 9px;
  font-size:16px;
  line-height:1.35;
}
.ecosystem-trust-faq p{
  margin:0;
  color:#a7afbd;
  font-size:13px;
  line-height:1.65;
}
@media(max-width:760px){
  .ecosystem-trust-panel{grid-template-columns:1fr}
  .ecosystem-trust-main{min-height:0}
}

/* Production homepage proof + compatibility sections */
.home-proof-section,
.home-compat-section{
  position:relative;
  margin:42px 0;
  padding:34px 28px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.16);
  border-radius:20px;
  background:
    radial-gradient(circle at 16% 0%,rgba(126,128,255,.08),transparent 34%),
    radial-gradient(circle at 88% 100%,rgba(88,180,255,.055),transparent 32%),
    rgba(255,255,255,.018);
}
.home-proof-section::before,
.home-compat-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 0 44%,rgba(255,255,255,.018) 44% 45%,transparent 45% 100%);
}
.home-section-heading{
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 auto 28px;
}
.home-section-heading.centered{text-align:center}
.home-section-kicker{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border:1px solid rgba(126,128,255,.22);
  border-radius:999px;
  background:rgba(126,128,255,.08);
  color:#aeb0ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}
.home-section-heading h2{
  margin:12px 0 8px;
  font-size:clamp(30px,4vw,48px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.home-section-heading p{
  max-width:700px;
  margin:0 auto;
  color:#9fa8b7;
  font-size:14px;
  line-height:1.65;
}
.home-stat-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  max-width:1080px;
  margin:0 auto;
}
.home-stat-card{
  min-width:0;
  padding:18px 22px;
  border-left:1px solid rgba(148,163,184,.15);
}
.home-stat-card:first-child{border-left:0}
.home-stat-card strong,
.home-stat-card span,
.home-stat-card small{display:block}
.home-stat-card strong{
  margin-bottom:8px;
  color:#f2f4f8;
  font-size:clamp(38px,4.8vw,58px);
  font-weight:760;
  line-height:.95;
  letter-spacing:-.055em;
}
.home-stat-card span{
  color:#d5dbe5;
  font-size:13px;
  font-weight:700;
}
.home-stat-card small{
  margin-top:5px;
  color:#818b9c;
  font-size:10px;
  line-height:1.45;
}
.home-compat-section{
  padding-bottom:26px;
}
.compat-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(8,minmax(112px,1fr));
  gap:10px;
}
.compat-card{
  position:relative;
  min-width:0;
  min-height:142px;
  padding:15px 10px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(126,128,255,.07),rgba(255,255,255,.025));
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.compat-card:hover{
  transform:translateY(-2px);
  border-color:rgba(126,128,255,.46);
  background:linear-gradient(180deg,rgba(126,128,255,.13),rgba(255,255,255,.035));
}
.compat-mark{
  width:46px;
  height:46px;
  margin:0 auto 13px;
  display:grid;
  place-items:center;
  border:1px solid rgba(172,177,255,.28);
  border-radius:13px;
  background:rgba(12,15,22,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  color:#d9dbff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:13px;
  font-weight:800;
  letter-spacing:-.04em;
}
.compat-mark svg{
  width:24px!important;
  height:24px!important;
  display:block;
  margin:auto;
}
.compat-card strong{
  display:block;
  color:#e6eaf0;
  font-size:12px;
  line-height:1.25;
}
.compat-card small{
  display:block;
  margin-top:6px;
  min-height:30px;
  color:#818b9c;
  font-size:9px;
  line-height:1.4;
}
.compat-status{
  display:inline-flex;
  margin-top:auto;
  padding:3px 6px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px;
  color:#9aa4b6;
  font-size:8px;
  line-height:1.2;
}
.compat-foot{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  color:#798394;
  font-size:10px;
}
.compat-foot a{
  flex:0 0 auto;
  color:#b8baff;
  text-decoration:none;
  font-weight:700;
}
.compat-foot a:hover{text-decoration:underline}
@media(max-width:1120px){
  .compat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
  .home-proof-section,.home-compat-section{
    margin:28px 0;
    padding:26px 16px 20px;
    border-radius:16px;
  }
  .home-section-heading{margin-bottom:20px}
  .home-section-heading h2{font-size:30px}
  .home-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-stat-card{padding:15px 12px;border-left:0;border-top:1px solid rgba(148,163,184,.13)}
  .home-stat-card:nth-child(-n+2){border-top:0}
  .home-stat-card:nth-child(even){border-left:1px solid rgba(148,163,184,.13)}
  .home-stat-card strong{font-size:38px}
  .compat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .compat-card{min-height:128px}
  .compat-foot{align-items:flex-start;flex-direction:column}
}

/* ==========================================================================
   BotConnector AI Models Leaderboard & Bar Chart
   ========================================================================== */
.ai-leaderboard-section {
  margin: 36px 0 48px;
  position: relative;
}

.lb-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 28px;
}

.lb-stat-card {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: linear-gradient(150deg, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.35) 100%);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
}

.lb-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.38), 0 0 18px rgba(99, 102, 241, 0.12);
}

.lb-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.lb-stat-card.lb-stat-rank1::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.lb-stat-card.lb-stat-free::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.lb-stat-card.lb-stat-frontier::before {
  background: linear-gradient(90deg, #d97757, #f97316);
}

.lb-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
  width: fit-content;
}

.lb-stat-rank1 .lb-stat-badge {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.lb-stat-free .lb-stat-badge {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.lb-stat-frontier .lb-stat-badge {
  background: rgba(217, 119, 87, 0.12);
  border: 1px solid rgba(217, 119, 87, 0.3);
  color: #fb923c;
}

.lb-stat-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.lb-stat-logo {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lb-stat-logo svg {
  width: 24px !important;
  height: 24px !important;
}

.lb-stat-logo.qwen { background: rgba(99, 54, 231, 0.12); border-color: rgba(99, 54, 231, 0.28); color: #6f69f7; }
.lb-stat-logo.claude { background: rgba(217, 119, 87, 0.12); border-color: rgba(217, 119, 87, 0.28); color: #d97757; }

.lb-stat-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.2;
}

.lb-stat-sub {
  font-size: 12px;
  color: #94a3b8;
}

.lb-stat-metric {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f1f5f9;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 8px;
}

.lb-stat-metric span {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: normal;
}

.lb-stat-sub-metric {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.lb-stat-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
  margin: 0;
}

/* Toolbar & Filter Tabs */
.lb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

.lb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lb-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.15s ease;
}

.lb-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.18);
}

.lb-tab.active {
  background: #4f46e5;
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.35);
}

.lb-meta-note {
  font-size: 12px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lb-pulse-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: lbPulse 2s infinite;
}

@keyframes lbPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Leaderboard Table / Chart Wrapper */
.lb-chart-wrapper {
  background: linear-gradient(150deg, rgba(30, 41, 59, 0.35) 0%, rgba(15, 23, 42, 0.3) 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.3);
}

.lb-table-head {
  display: grid;
  grid-template-columns: 60px 240px 145px 1fr 170px 95px;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

.lb-list {
  display: flex;
  flex-direction: column;
}

.lb-row {
  display: grid;
  grid-template-columns: 60px 240px 145px 1fr 170px 95px;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  transition: background 0.15s ease;
}

.lb-row:last-child {
  border-bottom: none;
}

.lb-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.lb-row[hidden] {
  display: none !important;
}

/* Rank Badges */
.lb-rank {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 800;
  color: #94a3b8;
}

.lb-medal {
  font-size: 18px;
  line-height: 1;
}

.lb-rank.rank-1 .lb-rank-num {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.lb-rank.rank-2 .lb-rank-num {
  color: #e2e8f0;
  text-shadow: 0 0 10px rgba(226, 232, 240, 0.4);
}

.lb-rank.rank-3 .lb-rank-num {
  color: #f59e0b;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Model Cell */
.lb-model-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lb-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lb-logo svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px;
  max-height: 22px;
  display: block;
}

.lb-logo.openai { background: rgba(16, 163, 127, 0.12); border-color: rgba(16, 163, 127, 0.28); color: #10a37f; }
.lb-logo.claude { background: rgba(217, 119, 87, 0.12); border-color: rgba(217, 119, 87, 0.28); color: #d97757; }
.lb-logo.gemini, .lb-logo.veo, .lb-logo.lyria { background: rgba(78, 130, 238, 0.12); border-color: rgba(78, 130, 238, 0.28); color: #4e82ee; }
.lb-logo.deepseek { background: rgba(77, 107, 254, 0.12); border-color: rgba(77, 107, 254, 0.28); color: #4d6bfe; }
.lb-logo.qwen { background: rgba(99, 54, 231, 0.12); border-color: rgba(99, 54, 231, 0.28); color: #6f69f7; }
.lb-logo.mistral { background: rgba(255, 112, 0, 0.12); border-color: rgba(255, 112, 0, 0.28); color: #ff8205; }
.lb-logo.nvidia { background: rgba(116, 183, 27, 0.12); border-color: rgba(116, 183, 27, 0.28); color: #74b71b; }
.lb-logo.zai { background: rgba(56, 89, 255, 0.12); border-color: rgba(56, 89, 255, 0.28); color: #3859ff; }
.lb-logo.kimi { background: rgba(23, 131, 255, 0.12); border-color: rgba(23, 131, 255, 0.28); color: #1783ff; }
.lb-logo.minimax { background: rgba(226, 22, 126, 0.12); border-color: rgba(226, 22, 126, 0.28); color: #fe603c; }
.lb-logo.xiaomi { background: rgba(255, 105, 0, 0.12); border-color: rgba(255, 105, 0, 0.28); color: #ff6900; }
.lb-logo.tencent { background: rgba(0, 85, 233, 0.12); border-color: rgba(0, 85, 233, 0.28); color: #00bcff; }
.lb-logo.kling { background: rgba(255, 46, 99, 0.12); border-color: rgba(255, 46, 99, 0.28); color: #ff2e63; }
.lb-logo.agnes { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.28); color: #10b981; }
.lb-logo.space-bunny { background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.28); color: #f43f5e; }
.lb-logo.inclusion { background: rgba(67, 56, 202, 0.12); border-color: rgba(67, 56, 202, 0.28); color: #818cf8; }

.lb-model-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lb-model-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-model-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-cat-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

.lb-model-dev {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-dot {
  margin: 0 3px;
  opacity: 0.5;
}

.lb-highlight {
  color: #a5b4fc;
}

/* Count Cell */
.lb-count-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lb-req-val {
  font-size: 15px;
  font-weight: 800;
  color: #f1f5f9;
}

.lb-req-label {
  font-size: 11px;
  color: #94a3b8;
}

/* Tier Badges */
.lb-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.lb-tier-badge.free {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #10b981;
}

.lb-tier-badge.payg {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.32);
  color: #818cf8;
}

.lb-tier-icon {
  font-size: 11px;
}

/* Bar Cell */
.lb-bar-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lb-bar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lb-share-val {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lb-vol-label {
  font-size: 11px;
  color: #94a3b8;
}

.lb-bar-track {
  width: 100%;
  height: 9px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.lb-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Specs Cell */
.lb-specs-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lb-spec-pill {
  font-size: 11px;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.lb-spec-pill.context {
  color: #e2e8f0;
  font-weight: 600;
}

.lb-spec-pill.speed {
  color: #38bdf8;
}

/* Action Cell */
.lb-action-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lb-btn-try {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  text-decoration: none;
  transition: all 0.15s ease;
}

.lb-btn-try:hover {
  background: #4f46e5;
  border-color: #6366f1;
  color: #fff;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

.lb-btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.lb-btn-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Responsive Breakpoints */
@media (max-width: 1080px) {
  .lb-table-head,
  .lb-row {
    grid-template-columns: 50px 210px 135px 1fr 150px 85px;
    gap: 12px;
    padding: 14px 16px;
  }
}

@media (max-width: 860px) {
  .lb-stat-cards {
    grid-template-columns: 1fr;
  }

  .lb-table-head {
    display: none;
  }

  .lb-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .lb-bar-cell {
    width: 100%;
  }

  .lb-specs-cell {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* Homepage workflow chooser: BCCLI vs BotConnector App */
.workmode-section{
  margin:72px 0 76px;
  padding:0;
}
.workmode-head{
  max-width:780px;
  margin:0 0 28px;
}
.workmode-kicker{
  display:inline-block;
  margin-bottom:10px;
  color:var(--bc-accent, #8d8cff);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.workmode-head h2{
  margin:0 0 12px;
  max-width:760px;
  font-size:clamp(28px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.035em;
}
.workmode-head p{
  margin:0;
  max-width:720px;
  color:var(--bc-muted, #a7a7ad);
  font-size:16px;
  line-height:1.65;
}
.workmode-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.workmode-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:390px;
  padding:24px;
  border:1px solid var(--bc-border, #32343b);
  border-radius:16px;
  background:var(--bc-surface, #1b1c20);
  overflow:hidden;
}
.workmode-card::after{
  content:"";
  position:absolute;
  inset:auto -80px -110px auto;
  width:210px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(130,128,255,.12),transparent 68%);
  pointer-events:none;
}
.workmode-card.featured{
  border-color:rgba(132,130,255,.52);
  background:linear-gradient(180deg,rgba(126,124,255,.10),rgba(126,124,255,.035) 46%,var(--bc-surface,#1b1c20));
  box-shadow:0 18px 55px rgba(0,0,0,.18);
}
.workmode-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:20px;
}
.workmode-label{
  color:var(--bc-text, #f1f1f2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
}
.workmode-badge{
  padding:5px 9px;
  border:1px solid rgba(132,130,255,.38);
  border-radius:999px;
  background:rgba(132,130,255,.11);
  color:#b9b8ff;
  font-size:10px;
  font-weight:750;
}
.workmode-badge.subtle{
  border-color:var(--bc-border,#34363e);
  background:rgba(255,255,255,.025);
  color:var(--bc-muted,#a7a7ad);
}
.workmode-card h3{
  margin:0 0 12px;
  color:var(--bc-text,#f1f1f2);
  font-size:21px;
  line-height:1.25;
  letter-spacing:-.015em;
}
.workmode-card p{
  margin:0 0 20px;
  color:var(--bc-muted,#a7a7ad);
  font-size:14px;
  line-height:1.65;
}
.workmode-points{
  display:grid;
  gap:9px;
  margin:0 0 24px;
}
.workmode-points span{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--bc-text-secondary,#d1d1d5);
  font-size:13px;
}
.workmode-points span::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#8583ff;
  box-shadow:0 0 0 3px rgba(133,131,255,.10);
}
.workmode-action{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  margin-top:auto;
  padding:12px 14px;
  border:1px solid var(--bc-border,#34363e);
  border-radius:10px;
  color:var(--bc-text,#f1f1f2);
  font-size:13px;
  font-weight:750;
  text-decoration:none;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.workmode-action:hover{
  border-color:#7775ef;
  background:rgba(132,130,255,.07);
  transform:translateY(-1px);
}
.workmode-action.primary{
  border-color:#7f7df2;
  background:#8583ff;
  color:#101114;
}
.workmode-action.primary:hover{
  background:#9391ff;
}
.workmode-chooser{
  display:flex;
  flex-wrap:wrap;
  gap:9px 18px;
  align-items:center;
  margin-top:16px;
  padding:15px 17px;
  border:1px solid var(--bc-border,#34363e);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  color:var(--bc-muted,#a7a7ad);
  font-size:13px;
  line-height:1.5;
}
.workmode-chooser strong{color:var(--bc-text,#f1f1f2)}
.workmode-chooser em{color:var(--bc-text-secondary,#d1d1d5);font-style:normal}
@media(max-width:980px){
  .workmode-grid{grid-template-columns:1fr 1fr}
  .workmode-card.featured{grid-column:1/-1;min-height:0}
}
@media(max-width:680px){
  .workmode-section{margin:52px 0 58px}
  .workmode-grid{grid-template-columns:1fr}
  .workmode-card.featured{grid-column:auto}
  .workmode-card{min-height:0;padding:20px}
  .workmode-head h2{font-size:32px}
  .workmode-chooser{align-items:flex-start;flex-direction:column}
}


/* Workmode color hierarchy + CTA legibility */
.workmode-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.workmode-card{min-height:360px;}
.workmode-card.coding-card{
  border-color:rgba(133,131,255,.58);
  background:linear-gradient(180deg,rgba(133,131,255,.12),rgba(133,131,255,.035) 45%,var(--bc-surface,#1b1c20));
}
.workmode-card.chat-card{
  border-color:rgba(84,167,255,.34);
  background:linear-gradient(180deg,rgba(84,167,255,.07),var(--bc-surface,#1b1c20) 48%);
}
.workmode-card.files-card{
  border-color:rgba(85,211,160,.30);
  background:linear-gradient(180deg,rgba(85,211,160,.065),var(--bc-surface,#1b1c20) 48%);
}
.workmode-card.media-card{
  border-color:rgba(238,126,190,.32);
  background:linear-gradient(180deg,rgba(238,126,190,.07),var(--bc-surface,#1b1c20) 48%);
}
.workmode-card.chat-card .workmode-points span::before{background:#56a7ff;box-shadow:0 0 0 3px rgba(86,167,255,.10)}
.workmode-card.files-card .workmode-points span::before{background:#55d3a0;box-shadow:0 0 0 3px rgba(85,211,160,.10)}
.workmode-card.media-card .workmode-points span::before{background:#ee7ebe;box-shadow:0 0 0 3px rgba(238,126,190,.10)}
.workmode-badge.media{
  border-color:rgba(238,126,190,.36);
  background:rgba(238,126,190,.09);
  color:#f1add3;
}
.workmode-action.primary,
.workmode-action.primary span{
  color:#0b0d10 !important;
  -webkit-text-fill-color:#0b0d10 !important;
}
.workmode-action.primary{
  background:#8b89ff !important;
  border-color:#8b89ff !important;
  text-shadow:none !important;
  opacity:1 !important;
}
.workmode-action.primary:hover{
  background:#9b99ff !important;
}
.workmode-action.media-action{
  border-color:rgba(238,126,190,.48);
  color:#f4c5df;
  -webkit-text-fill-color:#f4c5df;
}
.workmode-action.media-action:hover{
  background:rgba(238,126,190,.08);
  border-color:#ee7ebe;
}
@media(max-width:980px){
  .workmode-grid{grid-template-columns:1fr 1fr}
  .workmode-card.featured{grid-column:auto}
}
@media(max-width:680px){
  .workmode-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   REBRANDING SYSTEM EXTENSION (2026-09-27)
   Unified Obsidian Dark-Mode & High-Performance Developer Studio Styles
   ========================================================================== */

/* Typography & Accent utilities */
.gradient-text {
  background: linear-gradient(135deg, #00f5a0 0%, #00d2ff 45%, #7b86ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #00f5a0;
  background: rgba(0, 245, 160, 0.08);
  border: 1px solid rgba(0, 245, 160, 0.25);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 16px;
}

.section-head {
  margin: 54px 0 28px;
  max-width: 800px;
}

.section-head h2 {
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--bc-text, #f2f4f5);
  margin: 0 0 10px;
}

.section-head p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--bc-muted, #9aa3ab);
  margin: 0;
}

.section-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7b86ff;
  margin-bottom: 8px;
  display: block;
}

.cta-banner {
  margin: 64px 0 40px;
  padding: 44px 32px;
  background: linear-gradient(180deg, #15181f 0%, #0c0e14 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cta-banner-copy {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 750;
  color: #f2f4f8;
  margin-bottom: 24px;
  line-height: 1.3;
}

/* Syntax highlighted code block inside Hero Mockup */
.mockup-code-block {
  background: #080a0e;
  border: 1px solid #1f2733;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: #e1e7ed;
  overflow-x: auto;
}
.mockup-code-block .kw { color: #ff7b72; font-weight: 600; }
.mockup-code-block .cls { color: #79c0ff; font-weight: 600; }
.mockup-code-block .typ { color: #ffa657; }

/* --------------------------------------------------------------------------
   Local AI Hub & Hardware Advisor Matrix (/local-ai)
   -------------------------------------------------------------------------- */
.local-hero { padding: 40px 0 28px; }
.local-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #f2f4f8;
  margin: 16px 0 16px;
}
.local-lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: #9aa3ab;
  max-width: 760px;
  margin: 0 0 28px;
}

.hw-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0 48px;
}

.hw-card {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hw-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 245, 160, 0.4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.hw-card.featured {
  border-color: rgba(0, 245, 160, 0.45);
  background: linear-gradient(180deg, rgba(0, 245, 160, 0.05), #12151c 30%);
  box-shadow: 0 12px 36px rgba(0, 245, 160, 0.1);
}

.hw-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.hw-badge-tier {
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aa3ab;
}
.hw-badge-tier.featured { color: #00f5a0; }

.hw-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #f2f4f8;
  margin: 0 0 8px;
}
.hw-specs {
  font-size: 13px;
  color: #7f8a96;
  margin: 0 0 18px;
  line-height: 1.45;
}

.hw-models-box {
  background: #0b0d12;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.hw-model-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
}
.hw-model-item strong { color: #e1e7ed; font-weight: 600; }
.hw-quant {
  font-size: 11px;
  color: #00f5a0;
  background: rgba(0, 245, 160, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

.hw-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  color: #a4b0bc;
  flex-grow: 1;
}
.hw-features li { display: flex; gap: 8px; line-height: 1.4; }

.hw-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  margin-top: auto;
}
.hw-status-indicator {
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hw-status-indicator.optimal { color: #00f5a0; }
.hw-status-indicator.high-perf { color: #7b86ff; }

.privacy-boundary-card {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px 28px;
  margin: 24px 0 48px;
}
.boundary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.boundary-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: #f2f4f8;
  margin: 12px 0 8px;
}
.boundary-item p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #9aa3ab;
  margin: 0;
}
.boundary-icon { font-size: 26px; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0 48px;
}
.step-card {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px 20px;
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 245, 160, 0.15);
  color: #00f5a0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px;
}
.step-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #f2f4f8;
  margin: 0 0 8px;
}
.step-card p {
  font-size: 13px;
  line-height: 1.45;
  color: #9aa3ab;
  margin: 0 0 14px;
}
.step-code {
  background: #090b10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #00f5a0;
  margin: 0;
  font-family: ui-monospace, monospace;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Developer Hub Styles (/developers)
   -------------------------------------------------------------------------- */
.dev-hero { padding: 40px 0 28px; }
.dev-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #f2f4f8;
  margin: 16px 0 16px;
}
.dev-lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: #9aa3ab;
  max-width: 760px;
  margin: 0 0 28px;
}

.api-endpoint-card {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0 48px;
}
.api-base-bar {
  background: #0c0e14;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 14px;
}
.api-base-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7b86ff;
}
.api-base-url {
  font-family: ui-monospace, monospace;
  font-size: 13.5px;
  color: #00f5a0;
  flex-grow: 1;
}

.dev-tablewrap { overflow-x: auto; }
.dev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  text-align: left;
}
.dev-table th {
  background: #0e1118;
  padding: 14px 18px;
  color: #7f8a96;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dev-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #c9d2db;
}

.http-badge {
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 800;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}
.http-badge.post { background: rgba(0, 245, 160, 0.15); color: #00f5a0; }
.http-badge.get { background: rgba(84, 167, 255, 0.15); color: #54a7ff; }

.code-showcase-card {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0 48px;
}
.code-tab-header {
  display: flex;
  background: #0c0e14;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.code-tab {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 650;
  color: #7f8a96;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  cursor: default;
}
.code-tab.active {
  color: #f2f4f8;
  background: #12151c;
  box-shadow: inset 0 -2px 0 #00f5a0;
}
.code-display { padding: 24px; }
.code-display h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: #7f8a96;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.dev-code-block {
  background: #080a0e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #e1e7ed;
  overflow-x: auto;
}

.dev-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 24px 0 48px;
}
.dev-tool-card {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 26px 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.dev-tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(123, 134, 255, 0.4);
  text-decoration: none;
}
.tool-card-icon { font-size: 26px; margin-bottom: 14px; }
.dev-tool-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #f2f4f8;
  margin: 0 0 8px;
}
.dev-tool-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #9aa3ab;
  margin: 0 0 16px;
  flex-grow: 1;
}

/* --------------------------------------------------------------------------
   BCCLI Download & Product Showcase (/download)
   -------------------------------------------------------------------------- */
.download-hero { padding: 40px 0 28px; }
.download-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #f2f4f8;
  margin: 16px 0 16px;
}
.download-lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: #9aa3ab;
  max-width: 760px;
  margin: 0 0 28px;
}

.download-install-card-hero {
  margin: 24px 0 32px;
  max-width: 680px;
}
.install-bar {
  background: #12151c;
  border: 1px solid rgba(0, 245, 160, 0.35);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 245, 160, 0.08);
}
.install-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #00f5a0;
}
.install-cmd {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  color: #f2f4f8;
  flex-grow: 1;
}

.terminal-showcase-window {
  background: #090b10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0 48px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.terminal-body {
  padding: 22px 24px;
  font-family: ui-monospace, monospace;
  font-size: 13.5px;
  line-height: 1.7;
  color: #ccd5df;
}
.term-prompt { color: #00f5a0; font-weight: 700; margin-right: 8px; }
.term-cmd { color: #f2f4f8; font-weight: 600; }
.term-brand { color: #7b86ff; font-weight: 700; margin-right: 6px; }
.term-user-tag { color: #54a7ff; font-weight: 700; margin-right: 8px; }
.term-line.output.info { color: #7f8a96; font-size: 12.5px; }
.term-line.output.diff-add {
  color: #00f5a0;
  background: rgba(0, 245, 160, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin: 2px 0;
}
.term-line.output.test-pass {
  color: #00f5a0;
  font-weight: 700;
  margin-top: 6px;
}

.download-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 24px 0 48px;
}
.feature-card {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px 20px;
}
.feature-icon { font-size: 24px; margin-bottom: 12px; }
.feature-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #f2f4f8;
  margin: 0 0 8px;
}
.feature-card p {
  font-size: 13px;
  line-height: 1.45;
  color: #9aa3ab;
  margin: 0;
}

.quickstart-steps-box {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 24px;
  margin: 24px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.step-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.step-num-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1c222c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #00f5a0;
  font-weight: 800;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.step-detail { flex-grow: 1; }
.step-detail h4 {
  font-size: 16px;
  font-weight: 700;
  color: #f2f4f8;
  margin: 0 0 6px;
}
.step-detail p {
  font-size: 13.5px;
  color: #9aa3ab;
  margin: 0 0 10px;
}

/* --------------------------------------------------------------------------
   3-Column SaaS Pricing Matrix (/pricing)
   -------------------------------------------------------------------------- */
.pricing-hero { padding: 40px 0 28px; }
.pricing-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #f2f4f8;
  margin: 16px 0 16px;
}
.pricing-lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: #9aa3ab;
  max-width: 760px;
  margin: 0 0 28px;
}

.pricing-matrix-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0 48px;
}

.pricing-card {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pricing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
}
.pricing-card.featured {
  border-color: rgba(0, 245, 160, 0.45);
  background: linear-gradient(180deg, rgba(0, 245, 160, 0.06), #12151c 35%);
  box-shadow: 0 14px 44px rgba(0, 245, 160, 0.12);
}

.pricing-card-header { margin-bottom: 20px; }
.pricing-tier-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9aa3ab;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
}
.pricing-tier-tag.featured {
  color: #00f5a0;
  background: rgba(0, 245, 160, 0.12);
}

.tier-title {
  font-size: 20px;
  font-weight: 750;
  color: #f2f4f8;
  margin: 0 0 8px;
}
.tier-desc {
  font-size: 13.5px;
  line-height: 1.45;
  color: #7f8a96;
  margin: 0;
  min-height: 40px;
}

.pricing-cost-display {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 0;
  margin-bottom: 22px;
}
.price-val {
  font-size: 34px;
  font-weight: 800;
  color: #f2f4f8;
  letter-spacing: -0.02em;
}
.price-sub {
  font-size: 12.5px;
  color: #9aa3ab;
  margin-top: 4px;
}

.tier-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13.5px;
  color: #a4b0bc;
  flex-grow: 1;
}
.tier-features-list li {
  display: flex;
  gap: 10px;
  line-height: 1.4;
}
.check-icon {
  color: #00f5a0;
  font-weight: 700;
  flex-shrink: 0;
}

.tier-card-actions { margin-top: auto; }
.btn.full-width {
  width: 100%;
  text-align: center;
  display: block;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 24px 0 48px;
}
.faq-item {
  background: #12151c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 24px 22px;
}
.faq-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: #f2f4f8;
  margin: 0 0 8px;
}
.faq-item p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #9aa3ab;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive Layout Overrides for Modern Subpages
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hw-matrix-grid,
  .pricing-matrix-3col,
  .boundary-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .download-features-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dev-cards-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .download-features-grid {
    grid-template-columns: 1fr;
  }
  .install-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .install-cmd {
    word-break: break-all;
  }
}

/* --------------------------------------------------------------------------
   Homepage Polish & Refinement (Humanized Rebrand 2026-09-27)
   -------------------------------------------------------------------------- */
.arch-intro-copy {
  color: #ccd1d6;
  font-size: 15.5px;
  line-height: 1.6;
  margin: -12px 0 24px;
  max-width: 820px;
}

.shell.home .workmode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 32px 0 48px;
}

@media (max-width: 800px) {
  .shell.home .workmode-grid {
    grid-template-columns: 1fr;
  }
}

.shell.home .workmode-card {
  background: var(--bc-surface, #141618);
  border: 1px solid var(--bc-border, #26292d);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all .2s ease;
}

.shell.home .workmode-card:hover {
  border-color: var(--bc-accent, #7b86ff);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.shell.home .workmode-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #f1f1f2;
  margin: 8px 0 10px;
  line-height: 1.35;
}

.shell.home .workmode-card p {
  color: #9aa3ab;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

.shell.home .workmode-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 20px;
  padding: 12px;
  background: var(--bc-raised, #1b1e22);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
}

.shell.home .workmode-points span {
  font-size: 12.5px;
  color: #ccd1d6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shell.home .workmode-points span::before {
  content: "✓";
  color: #63e6be;
  font-weight: 700;
  font-size: 12px;
}

.shell.home .workmode-action {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--bc-accent, #7b86ff);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.shell.home .workmode-action.primary {
  color: #63e6be;
}

/* ==========================================================================
   BOTCONNECTOR 2026 REBRAND DESIGN SYSTEM
   Modern, high-conversion developer platform aesthetic
   ========================================================================== */

/* Hero Container with Ambient Glow */
.rebrand-hero {
  position: relative;
  padding: 56px 0 40px;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.rebrand-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 650px;
  height: 380px;
  background: radial-gradient(ellipse at center, rgba(123, 134, 255, 0.16) 0%, rgba(99, 230, 190, 0.08) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Pill Badge */
.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(27, 30, 34, 0.85);
  border: 1px solid rgba(123, 134, 255, 0.35);
  border-radius: 999px;
  font-size: 13px;
  color: #ccd1d6;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.badge-dot-live {
  width: 8px;
  height: 8px;
  background: #63e6be;
  border-radius: 50%;
  box-shadow: 0 0 10px #63e6be;
}

.badge-text {
  font-weight: 750;
  color: #f1f1f2;
}

.badge-sep {
  color: rgba(255, 255, 255, 0.25);
}

.badge-sub {
  color: #7b86ff;
  font-weight: 600;
}

/* Hero Headline */
.hero-headline-gradient {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: #f1f1f2;
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}

.hero-headline-gradient span.highlight {
  background: linear-gradient(135deg, #8c97ff 0%, #63e6be 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub-lead {
  font-size: clamp(16.5px, 2vw, 19.5px);
  line-height: 1.6;
  color: #9aa3ab;
  max-width: 740px;
  margin: 0 auto 34px;
  position: relative;
  z-index: 1;
}

/* CTA Group */
.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.btn-glow-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: #63e6be;
  color: #0b0d0f;
  font-size: 15px;
  font-weight: 750;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 0 28px rgba(99, 230, 190, 0.4);
  transition: all 0.2s ease;
}

.btn-glow-primary:hover {
  background: #75ecc9;
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(99, 230, 190, 0.55);
  color: #0b0d0f;
}

.btn-glass-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: rgba(27, 30, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f1f1f2;
  font-size: 15px;
  font-weight: 650;
  border-radius: 10px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.btn-glass-secondary:hover {
  border-color: #7b86ff;
  color: #fff;
  transform: translateY(-2px);
  background: rgba(35, 39, 45, 0.95);
}

.btn-ghost-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  color: #9aa3ab;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: color 0.2s;
}

.btn-ghost-secondary:hover {
  color: #f1f1f2;
}

/* Trust Bar */
.hero-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #7a8898;
  position: relative;
  z-index: 1;
}

.hero-trust-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-trust-bar span::before {
  content: "✓";
  color: #63e6be;
  font-weight: 800;
}

/* Interactive Showcase Tabs */
.showcase-container {
  margin: 44px auto 76px;
  max-width: 1060px;
  background: #111418;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #161a1f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.showcase-dots {
  display: flex;
  gap: 7px;
}

.showcase-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.showcase-dot.red { background: #ff5f56; }
.showcase-dot.yellow { background: #ffbd2e; }
.showcase-dot.green { background: #27c93f; }

.showcase-tabs {
  display: flex;
  background: #0d0f12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.showcase-tab {
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 650;
  color: #72808e;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}

.showcase-tab.active {
  background: #1d2127;
  color: #f1f1f2;
}

.showcase-status-badge {
  font-size: 11.5px;
  font-family: ui-monospace, monospace;
  color: #63e6be;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.showcase-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 380px;
}

@media (max-width: 768px) {
  .showcase-body {
    grid-template-columns: 1fr;
  }
  .showcase-sidebar {
    display: none;
  }
}

.showcase-sidebar {
  background: #0d0f12;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.showcase-meta-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.showcase-meta-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #72808e;
  font-weight: 750;
}

.showcase-meta-val {
  font-size: 12.5px;
  color: #ccd1d6;
  font-family: ui-monospace, monospace;
}

.showcase-meta-val.green {
  color: #63e6be;
}

.showcase-main {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #111418;
}

.chat-bubble-user {
  background: #191d23;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 14px;
  color: #ccd1d6;
  line-height: 1.5;
}

.chat-bubble-assistant {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-assist-intro {
  font-size: 14px;
  color: #9aa3ab;
  line-height: 1.5;
}

.chat-assist-code {
  background: #080a0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 18px 20px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #dbeaf4;
  overflow-x: auto;
}

.chat-assist-metrics {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: #72808e;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.metric-highlight {
  color: #63e6be;
  font-weight: 650;
}

/* ==========================================================================
   BENTO GRID SECTION
   ========================================================================== */
.bento-section {
  margin: 80px auto;
  max-width: 1140px;
}

.section-head-modern {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
}

.section-kicker-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7b86ff;
  background: rgba(123, 134, 255, 0.09);
  border: 1px solid rgba(123, 134, 255, 0.28);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.section-head-modern h2 {
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 850;
  letter-spacing: -0.035em;
  color: #f1f1f2;
  margin: 0 0 14px;
  line-height: 1.2;
}

.section-head-modern p {
  font-size: 16px;
  color: #9aa3ab;
  line-height: 1.6;
  margin: 0;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

.bento-card {
  background: #121519;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.bento-card:hover {
  border-color: rgba(123, 134, 255, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.bento-col-7 { grid-column: span 7; }
.bento-col-5 { grid-column: span 5; }
.bento-col-4 { grid-column: span 4; }
.bento-col-8 { grid-column: span 8; }
.bento-col-6 { grid-column: span 6; }
.bento-col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .bento-col-7, .bento-col-5, .bento-col-4, .bento-col-8, .bento-col-6 {
    grid-column: span 12;
  }
}

.bento-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7b86ff;
  margin-bottom: 12px;
}

.bento-badge.green { color: #63e6be; }

.bento-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #f1f1f2;
  margin: 0 0 10px;
  line-height: 1.3;
}

.bento-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #9aa3ab;
  margin: 0 0 20px;
  flex: 1;
}

.model-availability-note {
  flex: 0 !important;
  margin: 12px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #737d87 !important;
}

/* Bento Memory Tiers Visual */
.ram-tier-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.ram-tier-box {
  background: #171b21;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
}

.ram-tier-box strong {
  display: block;
  font-size: 14.5px;
  color: #f1f1f2;
  margin-bottom: 4px;
}

.ram-tier-box span {
  font-size: 11px;
  color: #72808e;
  line-height: 1.4;
  display: block;
}

.ram-tier-box.highlight {
  border-color: rgba(99, 230, 190, 0.4);
  background: rgba(99, 230, 190, 0.06);
}

.ram-tier-box.highlight strong {
  color: #63e6be;
}

/* Terminal Mockup in Bento */
.mini-terminal {
  background: #080a0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  color: #ccd1d6;
  line-height: 1.6;
  margin-top: auto;
}

.mini-term-line {
  display: flex;
  gap: 8px;
}

.mini-term-prompt { color: #63e6be; font-weight: 700; }
.mini-term-diff-add { color: #63e6be; }
.mini-term-diff-sub { color: #ff7b72; }

/* Bento Code Snippet */
.mini-code {
  background: #080a0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  color: #dbeaf4;
  line-height: 1.5;
  margin-top: auto;
}

/* Bento Link */
.bento-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #7b86ff;
  text-decoration: none;
  margin-top: 16px;
}

.bento-link:hover {
  color: #a3abff;
}

/* ==========================================================================
   ARCH COMPARISON SIDE BY SIDE
   ========================================================================== */
.arch-compare-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0;
}

@media (max-width: 768px) {
  .arch-compare-wrap {
    grid-template-columns: 1fr;
  }
}

.arch-col-card {
  border-radius: 18px;
  padding: 34px;
  background: #121519;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
}

.arch-col-card.cloud-flavor {
  border-color: rgba(99, 230, 190, 0.25);
  background: linear-gradient(180deg, rgba(99, 230, 190, 0.04) 0%, #121519 45%);
}

.arch-col-card.local-flavor {
  border-color: rgba(123, 134, 255, 0.25);
  background: linear-gradient(180deg, rgba(123, 134, 255, 0.04) 0%, #121519 45%);
}

.arch-col-header {
  margin-bottom: 22px;
}

.arch-col-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 11px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 12px;
}

.cloud-flavor .arch-col-badge {
  background: rgba(99, 230, 190, 0.14);
  color: #63e6be;
}

.local-flavor .arch-col-badge {
  background: rgba(123, 134, 255, 0.14);
  color: #7b86ff;
}

.arch-col-header h3 {
  font-size: 24px;
  font-weight: 800;
  color: #f1f1f2;
  margin: 0 0 8px;
}

.arch-col-header p {
  font-size: 14.5px;
  color: #9aa3ab;
  line-height: 1.55;
  margin: 0;
}

.arch-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arch-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #ccd1d6;
}

.arch-check {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.cloud-flavor .arch-check { color: #63e6be; }
.local-flavor .arch-check { color: #7b86ff; }

.arch-col-action {
  margin-top: auto;
}

/* ==========================================================================
   MODERN CTA FOOTER BANNER
   ========================================================================== */
.rebrand-cta-banner {
  margin: 80px auto 40px;
  max-width: 1060px;
  background: linear-gradient(135deg, #141822 0%, #0d1017 100%);
  border: 1px solid rgba(123, 134, 255, 0.28);
  border-radius: 22px;
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.rebrand-cta-banner::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 550px;
  height: 260px;
  background: radial-gradient(ellipse at center, rgba(99, 230, 190, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.rebrand-cta-banner h2 {
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 850;
  letter-spacing: -0.035em;
  color: #f1f1f2;
  margin: 0 0 14px;
  position: relative;
  z-index: 1;
}

.rebrand-cta-banner p {
  font-size: 16.5px;
  color: #9aa3ab;
  max-width: 660px;
  margin: 0 auto 32px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   DAILY PRODUCTIVITY CHIPS (BENTO GRID DAILY CAPABILITIES)
   ========================================================================== */
.daily-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0;
}

@media (max-width: 640px) {
  .daily-chips-grid {
    grid-template-columns: 1fr;
  }
}

.daily-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.daily-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(99, 230, 190, 0.3);
}

.daily-chip-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.daily-chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.daily-chip-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #f1f1f2;
}

.daily-chip-text span {
  font-size: 12px;
  color: #9aa3ab;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .bento-card.bento-col-7 [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PRODUCTION ARCHITECTURE & ECOSYSTEM STRIP
   [Vendors / Providers] → [BotConnector Hub] → [Access Surfaces]
   ========================================================================== */
.arch-ecosystem-section {
  margin: 80px auto;
  max-width: 1060px;
}

.arch-strip-container {
  display: flex;
  align-items: stretch;
  background: #0f131a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 24px 22px;
  margin-top: 36px;
  gap: 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  position: relative;
}

.arch-strip-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.arch-ecosystem-block {
  flex: 1.15;
}

.arch-hub-block {
  flex: 1.1;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.arch-surfaces-block {
  flex: 1;
}

.arch-block-header {
  margin-bottom: 12px;
}

.arch-block-kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #7b86ff;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.arch-block-title {
  font-size: 14.5px;
  font-weight: 750;
  color: #f0f6fc;
  margin: 0;
  letter-spacing: -0.01em;
}

/* Vendor Logo Rail / Cluster */
.vendor-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.vendor-logo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.vendor-logo-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.vendor-logo-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.vendor-name {
  font-size: 11.5px;
  font-weight: 550;
  color: #c9d1d9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Connector Line & Arrow */
.arch-strip-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 38px;
  flex-shrink: 0;
  padding: 0 4px;
}

.flow-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(99, 230, 190, 0.4), rgba(255, 255, 255, 0.06));
  position: relative;
}

.flow-arrow {
  color: #63e6be;
  font-size: 13px;
  line-height: 1;
  margin-top: 4px;
  opacity: 0.85;
}

/* Center Hub (BotConnector) */
.hub-brand-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hub-brand-badge img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.hub-brand-text {
  display: flex;
  flex-direction: column;
}

.hub-brand-name {
  font-size: 15.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hub-brand-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: #63e6be;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hub-spec-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 10px;
}

.hub-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.hub-spec-label {
  color: #8b949e;
}

.hub-spec-val {
  color: #e6edf3;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
}

.hub-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 650;
  color: #9da0ff;
  background: rgba(123, 134, 255, 0.08);
  border: 1px solid rgba(123, 134, 255, 0.2);
  border-radius: 100px;
  padding: 3px 9px;
  align-self: flex-start;
}

.hub-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #63e6be;
  box-shadow: 0 0 5px #63e6be;
}

/* Right Side: Access Surfaces */
.surfaces-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.surface-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.surface-node-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7b86ff;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(123, 134, 255, 0.6);
}

.surface-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.surface-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #f0f6fc;
  flex-shrink: 0;
}

.surface-desc {
  font-size: 11px;
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Plain Proof Points (3 columns, thin separators, NO cards) */
.arch-proof-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 36px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.arch-proof-col {
  padding: 0 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.arch-proof-col:first-child {
  border-left: none;
  padding-left: 0;
}

.arch-proof-col:last-child {
  padding-right: 0;
}

.arch-proof-col h4 {
  font-size: 15px;
  font-weight: 750;
  color: #f0f6fc;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.arch-proof-col p {
  font-size: 13.5px;
  color: #9aa3ab;
  line-height: 1.55;
  margin: 0;
}

/* Responsive: Mobile & Tablet */
@media (max-width: 900px) {
  .arch-strip-container {
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px;
  }

  .arch-strip-flow {
    width: 100%;
    height: 24px;
    flex-direction: row;
  }

  .flow-line {
    display: none;
  }

  .flow-arrow {
    transform: rotate(90deg);
    margin-top: 0;
    font-size: 16px;
  }

  .arch-proof-columns {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 20px;
  }

  .arch-proof-col {
    border-left: none;
    padding: 0 0 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .arch-proof-col:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

@media (max-width: 480px) {
  .vendor-logo-grid {
    grid-template-columns: 1fr;
  }
  .surface-info {
    flex-direction: column;
    gap: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-pulse,
  .flow-arrow {
    animation: none !important;
  }
}

/* Mobile production polish for architecture ecosystem strip */
@media (max-width: 900px) {
  .arch-ecosystem-section {
    margin: 56px auto;
  }
  .arch-strip-container {
    margin-top: 26px;
    gap: 10px;
    padding: 18px 14px;
  }
  .arch-strip-flow {
    height: 18px;
  }
  .arch-hub-block {
    padding: 14px;
    gap: 10px;
  }
  .arch-proof-columns {
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .arch-ecosystem-section {
    margin: 48px auto;
  }
  .arch-strip-container {
    border-radius: 14px;
    padding: 16px 12px;
  }
  .vendor-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .vendor-logo-item {
    min-width: 0;
    padding: 7px 7px;
    gap: 7px;
  }
  .vendor-logo-item img {
    width: 17px;
    height: 17px;
  }
  .vendor-name {
    font-size: 11px;
  }
  .arch-block-header {
    margin-bottom: 10px;
  }
  .arch-hub-block {
    border-radius: 12px;
    padding: 13px;
  }
  .hub-brand-name {
    font-size: 15px;
  }
  .hub-brand-sub {
    font-size: 9.5px;
  }
  .hub-spec-list {
    padding: 8px 9px;
  }
  .hub-spec-row {
    gap: 10px;
  }
  .hub-spec-val {
    font-size: 9.7px;
    text-align: right;
  }
  .surface-item {
    padding: 8px 9px;
  }
}

/* Primary BotConnector BC mark */
.brand-mark{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}
.brand-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
body:has(.shell.home) .brand-mark{
  border:0;
  background:transparent;
  box-shadow:none;
}

/* Production UI icons: SVG line icons replace decorative emoji */
.feature-icon svg,
.boundary-icon svg,
.tool-card-icon svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-icon {
  color: var(--accent, #8b93ff);
}