/* =========================================================================
   Shelf — marketing site
   Design tokens lifted verbatim from web/src/styles.css in the Shelf app.
   ========================================================================= */

/* ---------- Self-hosted type (no third-party requests) ---------- */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#121620;--sidebar:#0d1119;--list:#10151f;--surface:#1b2230;--hover:#232c3e;
  --line:#293246;--line-subtle:#202839;--text:#edf2ff;--body:#b5c0d4;--muted:#8997b1;
  --faint:#64748f;--accent:#8ba9ff;--accent-dim:#1c2c4b;--accent-line:#385893;
  --paper:#161d2b;--shadow:0 20px 80px #0005;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --type-md:#5475bc;--type-json:#9b6ccd;--type-csv:#229a90;--type-code:#6977c9;--type-svg:#c475aa;
  --glass:#1b223099;--ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(20px,5.5vw,84px);--max:1180px;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg)
}
:root[data-theme=light]{
  color-scheme:light;
  --bg:#ffffff;--sidebar:#f1f4fa;--list:#f8faff;--surface:#eef2f9;--hover:#e5ebf7;
  --line:#dce3ef;--line-subtle:#edf0f6;--text:#17213b;--body:#4b5873;--muted:#71809b;
  --faint:#8a97af;--accent:#345ef0;--accent-dim:#eaf0ff;--accent-line:#b5c7ff;
  --paper:#ffffff;--shadow:0 20px 80px #1e3e791a;
  --type-md:#677a55;--type-json:#927f44;--type-csv:#437b64;--type-code:#797095;--type-svg:#946d59;
  --glass:#ffffffcc
}

/* ---------- Reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;
  -webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,border-color .15s}
h1,h2,h3,h4{color:var(--text);margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
ul,ol{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent);color:var(--sidebar)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--accent-line)}

.skip-link{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--accent);
  color:var(--sidebar);padding:11px 18px;border-radius:8px;font-weight:600;font-size:14px}
.skip-link:focus{left:16px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Brand mark (identical geometry to the app) ---------- */
.brand-mark{display:flex;align-items:flex-end;gap:4px;width:25px;height:27px;
  border-bottom:3px solid var(--accent);padding:0 2px 4px;flex-shrink:0}
.brand-mark i{display:block;width:4px;background:var(--accent);height:17px;border-radius:1px;
  transform-origin:bottom;transition:height .5s var(--ease),transform .5s var(--ease)}
.brand-mark i:nth-child(2){height:20px;transform:rotate(-11deg)}
.brand-mark i:nth-child(3){height:14px}
.wordmark{display:flex;align-items:center;gap:11px;font-size:27px;letter-spacing:-1.6px;
  font-weight:600;color:var(--text)}
.wordmark .dot{color:var(--accent)}
a.wordmark:hover .brand-mark i:nth-child(1){height:20px}
a.wordmark:hover .brand-mark i:nth-child(2){transform:rotate(-4deg)}
a.wordmark:hover .brand-mark i:nth-child(3){height:18px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:transparent;
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s}
.site-header.is-stuck{background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:18px;height:74px}
.site-nav{display:flex;align-items:center;gap:30px;margin-left:auto;font-size:14px;color:var(--muted)}
.site-nav a{transition:color .15s;position:relative}
.site-nav a:after{content:'';position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--accent);transition:right .3s var(--ease)}
.site-nav a:hover{color:var(--text)}
.site-nav a:hover:after{right:0}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.site-nav+.header-actions{margin-left:0}

.icon-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line);border-radius:8px;color:var(--muted);background:var(--surface)}
.icon-button:hover{color:var(--text);border-color:var(--accent-line);background:var(--hover)}
.theme-toggle .sun{display:none}
:root[data-theme=light] .theme-toggle .sun{display:block}
:root[data-theme=light] .theme-toggle .moon{display:none}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:9px;font-weight:550;
  font-size:14px;padding:11px 19px;white-space:nowrap;transition:all .2s var(--ease);border:1px solid transparent}
.btn svg{transition:transform .25s var(--ease)}
.btn-primary{background:var(--accent);color:var(--sidebar);font-weight:600}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px var(--accent)}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{border-color:var(--line);color:var(--body);background:var(--surface)}
.btn-ghost:hover{color:var(--text);border-color:var(--accent-line);background:var(--hover)}
.btn-lg{padding:15px 26px;font-size:15px;border-radius:11px}

.nav-toggle{display:none}

/* ---------- Shared section furniture ---------- */
.section-label{display:inline-flex;align-items:center;gap:9px;font:400 9px/1 var(--mono);
  letter-spacing:2px;color:var(--accent);text-transform:uppercase}
.section-label:before{content:'';width:22px;height:1px;background:var(--accent-line)}
.section{padding:clamp(60px,7.5vw,104px) 0;position:relative}
.section-head{max-width:640px;margin-bottom:56px}
.section-head h2{font-size:clamp(31px,4.4vw,50px);letter-spacing:-.035em;font-weight:500;margin:20px 0 18px}
.section-head p{font-size:16.5px;color:var(--muted);line-height:1.8}
h1 em,h2 em,h3 em,h4 em{font-style:normal;color:var(--accent)}
.rule{height:1px;background:var(--line-subtle);border:0;margin:0}

/* ---------- Hero ---------- */
.hero{position:relative;padding:clamp(28px,4vw,52px) 0 clamp(56px,7vw,88px);overflow:hidden}
.hero:before{content:'';position:absolute;width:760px;height:760px;right:-430px;top:-330px;
  border:1px solid var(--accent-line);border-radius:50%;
  box-shadow:0 0 0 60px var(--accent-dim),0 0 0 120px #345ef003;pointer-events:none;
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-36px,42px) scale(1.05)}}
/* `.hero-inner` shares an element with `.wrap`, so constrain the children rather
   than the container — setting max-width here would shrink the page gutter. */
.hero-inner{position:relative;z-index:1}
.hero-inner>*{max-width:780px}
.hero h1{font-size:clamp(52px,7.6vw,96px);font-weight:500;line-height:1.02;
  letter-spacing:-.062em;margin:18px 0 0}
.hero-sub{font-size:clamp(16px,1.7vw,19px);color:var(--muted);line-height:1.75;
  max-width:610px;margin-top:20px}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.hero-note{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--faint);margin-top:18px}
.hero-note svg{color:var(--accent)}

.rail{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,54px);margin-top:24px;padding-top:18px;
  border-top:1px solid var(--line);font:400 9px/1 var(--mono);letter-spacing:1.4px;color:var(--muted)}
.rail span{position:relative;padding-left:0}
.rail b{color:var(--accent);font-weight:400;margin-right:7px}

.hero-stage{margin-top:clamp(28px,4vw,48px);position:relative;z-index:1}
/* In-page targets that are not whole sections clear the sticky header when linked to. */
.hero-stage,.install{scroll-margin-top:96px}

/* =========================================================================
   Product mockups — the app UI rebuilt in HTML/CSS with the same tokens
   ========================================================================= */
.mock{background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);position:relative}
.mock-chrome{display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  background:var(--sidebar);border-bottom:1px solid var(--line)}
.mock-dots{display:flex;gap:6px}
.mock-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.mock-url{margin:0 auto;font:400 10px var(--mono);color:var(--faint);letter-spacing:.4px;
  background:var(--bg);border:1px solid var(--line-subtle);border-radius:5px;padding:3px 13px}

.mock-app{display:grid;grid-template-columns:186px 232px 1fr;height:456px;font-size:12px}

/* sidebar */
.mock-side{background:var(--sidebar);border-right:1px solid var(--line);padding:14px 12px;
  display:flex;flex-direction:column;gap:3px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent);
  mask-image:linear-gradient(to bottom,#000 86%,transparent)}
.mock-brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:600;
  letter-spacing:-1.1px;color:var(--text);padding:3px 5px 14px}
.mock-brand .brand-mark{width:18px;height:19px;border-bottom-width:2px;gap:3px;padding:0 1px 3px}
.mock-brand .brand-mark i{width:3px;height:12px}
.mock-brand .brand-mark i:nth-child(2){height:14px}
.mock-brand .brand-mark i:nth-child(3){height:10px}
.mock-workspace{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:7px;padding:8px 9px;margin-bottom:14px;color:var(--muted);font-size:11px}
.mock-avatar{width:21px;height:21px;border-radius:6px;background:var(--accent-dim);
  color:var(--accent);display:grid;place-items:center;font-size:9.5px;font-weight:650}
.mock-heading{font:400 8px var(--mono);letter-spacing:1.4px;color:var(--faint);
  padding:14px 6px 7px;text-transform:uppercase}
.mock-row{display:flex;align-items:center;gap:8px;padding:6.5px 8px;border-radius:6px;
  color:var(--muted);font-size:11.5px;transition:background .2s,color .2s}
.mock-row svg{width:13px;height:13px;flex-shrink:0;opacity:.85}
.mock-row.is-active{background:var(--accent-dim);color:var(--accent)}
.mock-row .count{margin-left:auto;font:400 9px var(--mono);opacity:.6}
.mock-row .swatch{width:7px;height:7px;border-radius:2px;flex-shrink:0}

/* file list */
.mock-list{background:var(--list);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.mock-list-head{display:flex;align-items:center;gap:8px;padding:13px 14px;
  border-bottom:1px solid var(--line-subtle);color:var(--text);font-weight:550;font-size:12.5px}
.mock-list-head .chip{margin-left:auto;font:400 8px var(--mono);letter-spacing:.8px;
  border:1px solid var(--line);border-radius:4px;padding:3px 6px;color:var(--faint)}
.mock-file{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-subtle);
  transition:background .2s}
.mock-file.is-active{background:var(--hover)}
.mock-file .fi{width:14px;height:14px;margin-top:2px;flex-shrink:0}
.fi.md{color:var(--type-md)}.fi.json{color:var(--type-json)}.fi.csv{color:var(--type-csv)}
.fi.code{color:var(--type-code)}.fi.svg{color:var(--type-svg)}
.mock-file-body{min-width:0;flex:1}
.mock-file-name{color:var(--text);font-size:11.5px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.mock-file-name .star{color:var(--accent);width:10px;height:10px}
.mock-file-meta{font:400 8.5px var(--mono);color:var(--faint);letter-spacing:.3px;margin-top:3px;
  display:flex;gap:8px}
.mock-tag{display:inline-block;font:400 8px var(--mono);letter-spacing:.6px;border-radius:3px;
  padding:2px 5px;margin-top:5px;background:var(--accent-dim);color:var(--accent)}

/* viewer */
.mock-view{background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.mock-view-head{display:flex;align-items:center;gap:9px;padding:12px 18px;
  border-bottom:1px solid var(--line-subtle)}
.mock-view-head .title{color:var(--text);font-weight:550;font-size:12.5px}
.mock-view-head .tabs{margin-left:auto;display:flex;gap:2px;background:var(--surface);
  border-radius:6px;padding:2px}
.mock-view-head .tabs span{font:400 9px var(--mono);letter-spacing:.6px;padding:4px 9px;
  border-radius:4px;color:var(--faint)}
.mock-view-head .tabs span.on{background:var(--bg);color:var(--text)}
.mock-paper{flex:1;padding:24px 30px;overflow:hidden;background:var(--paper)}
.mock-paper h4{font-size:17px;letter-spacing:-.5px;margin-bottom:9px;font-weight:550}
.mock-paper .lede{font-size:11px;color:var(--muted);line-height:1.85}
.mock-paper .hr{height:1px;background:var(--line-subtle);margin:16px 0}
.mock-paper h5{font-size:11.5px;color:var(--text);font-weight:600;margin:0 0 8px}
.skl{height:7px;border-radius:4px;background:var(--line-subtle);margin-bottom:8px}
.mock-check{display:flex;align-items:center;gap:9px;font-size:10.5px;color:var(--body);margin-bottom:8px}
.mock-check i{width:12px;height:12px;border:1.5px solid var(--line);border-radius:3px;
  display:grid;place-items:center;flex-shrink:0}
.mock-check.done i{background:var(--accent);border-color:var(--accent)}
.mock-check.done i:after{content:'';width:5px;height:2.5px;border-left:1.5px solid var(--sidebar);
  border-bottom:1.5px solid var(--sidebar);transform:rotate(-45deg) translate(.5px,-1px)}
.mock-check.done span{color:var(--faint);text-decoration:line-through}

/* caret used in the hero typing effect */
.caret{display:inline-block;width:1.5px;height:1em;background:var(--accent);
  vertical-align:-2px;margin-left:2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Renderer showcase ---------- */
.render-grid{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
.render-tabs{display:flex;flex-direction:column;gap:5px}
.render-tab{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:9px;
  border:1px solid transparent;color:var(--muted);font-size:13.5px;text-align:left;width:100%;
  position:relative;overflow:hidden}
.render-tab svg{width:15px;height:15px}
.render-tab:hover{background:var(--surface);color:var(--text)}
.render-tab[aria-selected=true]{background:var(--surface);border-color:var(--line);color:var(--text);font-weight:550}
.render-tab .ext{margin-left:auto;font:400 8.5px var(--mono);letter-spacing:.8px;color:var(--faint)}
.render-tab .progress{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent)}
.render-tab[aria-selected=true] .progress{animation:fill 6s linear forwards}
@keyframes fill{to{width:100%}}

.render-panel{border:1px solid var(--line);border-radius:13px;background:var(--paper);
  min-height:352px;overflow:hidden;box-shadow:var(--shadow)}
.render-panel[hidden]{display:none}
.render-panel-head{display:flex;align-items:center;gap:9px;padding:11px 16px;background:var(--surface);
  border-bottom:1px solid var(--line);font:400 10px var(--mono);letter-spacing:.5px;color:var(--muted)}
.render-panel-body{padding:22px 26px;animation:panelIn .45s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}}

.code-block{font:400 11.5px/1.95 var(--mono);white-space:pre;overflow:auto;color:var(--body)}
.code-block .ln{color:var(--faint);user-select:none;display:inline-block;width:22px;opacity:.55}
.k{color:var(--type-json)}.s{color:var(--type-csv)}.n{color:var(--type-svg)}.c{color:var(--faint);font-style:italic}.t{color:var(--accent)}

.mock-table{width:100%;border-collapse:collapse;font-size:11px}
.mock-table th{font:400 8.5px var(--mono);letter-spacing:1px;color:var(--faint);text-transform:uppercase;
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.mock-table td{padding:9px 12px;border-bottom:1px solid var(--line-subtle);color:var(--body)}
.mock-table td:first-child{color:var(--text);font-weight:500}
.mock-table .num{font:400 10.5px var(--mono);color:var(--accent);text-align:right}
.mock-table th.num{text-align:right}

.chart{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,14px);height:190px;padding:14px 4px 0}
.chart i{flex:1;background:linear-gradient(to top,var(--accent),var(--accent-line));border-radius:4px 4px 0 0;
  display:block;transform-origin:bottom;transform:scaleY(0)}
.is-visible .chart i{animation:grow .85s var(--ease) forwards}
@keyframes grow{to{transform:scaleY(1)}}
.chart-axis{display:flex;gap:clamp(6px,1.4vw,14px);padding-top:9px;border-top:1px solid var(--line);
  font:400 8.5px var(--mono);color:var(--faint)}
.chart-axis span{flex:1;text-align:center}

/* ---------- Feature split rows ---------- */
.split{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(34px,5vw,74px);align-items:center}
.split.flip .split-text{order:2}
.split-text h3{font-size:clamp(25px,3.1vw,35px);letter-spacing:-.035em;margin:18px 0 16px;font-weight:500}
.split-text p{color:var(--muted);font-size:15.5px;line-height:1.8}
.feature-list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:13px}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--body)}
.feature-list svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:3px}

/* ---------- Card grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:28px 26px;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;position:relative;overflow:hidden}
.card:after{content:'';position:absolute;inset:0;border-radius:13px;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0),var(--accent-dim),transparent 65%);
  opacity:0;transition:opacity .35s}
.card:hover{transform:translateY(-4px);border-color:var(--accent-line);box-shadow:0 18px 44px -20px #0009}
.card:hover:after{opacity:.55}
.card-icon{width:38px;height:38px;border-radius:10px;background:var(--accent-dim);color:var(--accent);
  display:grid;place-items:center;margin-bottom:18px}
.card-icon svg{width:18px;height:18px}
.card h3{font-size:16.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.card p{font-size:13.5px;color:var(--muted);line-height:1.75}
.card>*{position:relative;z-index:1}

/* ---------- Terminal ---------- */
.term{background:var(--sidebar);border:1px solid var(--line);border-radius:13px;overflow:hidden;
  box-shadow:var(--shadow)}
.term-head{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line)}
.term-head .mock-dots i{background:var(--line)}
.term-head .name{font:400 9.5px var(--mono);color:var(--faint);letter-spacing:1px;margin-left:6px}
.term-body{padding:20px 22px;font:400 11.5px/1.95 var(--mono);min-height:186px}
.term-body .p{color:var(--accent)}
.term-body .o{color:var(--muted)}
.term-body .ok{color:var(--type-csv)}
.term-body .q{color:var(--text)}
.term-body .agent{color:var(--type-svg)}
.term-body .dot{color:var(--accent);margin-right:2px}
.term-body .step{color:var(--accent);display:inline-block;min-width:88px}
.term-body .file{color:var(--type-md)}
.term-body .muted2{color:var(--faint)}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-subtle);padding:4px 0}
.faq summary{display:flex;align-items:center;gap:16px;padding:20px 2px;cursor:pointer;
  list-style:none;color:var(--text);font-size:16px;font-weight:500;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .plus{margin-left:auto;position:relative;width:13px;height:13px;flex-shrink:0}
.faq summary .plus:before,.faq summary .plus:after{content:'';position:absolute;background:var(--accent);
  border-radius:1px;transition:transform .3s var(--ease)}
.faq summary .plus:before{left:0;top:6px;width:13px;height:1.5px}
.faq summary .plus:after{top:0;left:5.75px;width:1.5px;height:13px}
.faq details[open] summary .plus:after{transform:rotate(90deg)}
.faq details[open] summary{color:var(--accent)}
.faq .answer{padding:0 2px 22px;font-size:14.5px;color:var(--muted);line-height:1.85;max-width:660px}
.faq details[open] .answer{animation:panelIn .35s var(--ease)}

/* ---------- CTA ---------- */
.cta-band{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);padding:clamp(44px,6vw,76px) clamp(26px,5vw,66px);text-align:center}
.cta-band:before{content:'';position:absolute;width:620px;height:620px;left:50%;top:-556px;
  margin-left:-310px;border:1px solid var(--accent-line);border-radius:50%;
  box-shadow:0 0 0 54px var(--accent-dim);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(29px,4.4vw,48px);letter-spacing:-.045em;font-weight:500;
  line-height:1.08;margin-bottom:18px}
.cta-band p{color:var(--muted);max-width:430px;margin:0 auto 32px;font-size:15.5px}
.cta-actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:56px 0 34px;margin-top:clamp(56px,8vw,110px)}
.footer-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px;margin-bottom:46px}
.footer-blurb{font-size:13.5px;color:var(--muted);max-width:280px;margin-top:17px;line-height:1.8}
.footer-col h4{font:400 9px var(--mono);letter-spacing:1.6px;color:var(--faint);
  text-transform:uppercase;margin-bottom:17px;font-weight:400}
.footer-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
.footer-col a{font-size:13.5px;color:var(--muted);transition:color .15s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  border-top:1px solid var(--line-subtle);padding-top:26px;font-size:12.5px;color:var(--faint)}
.footer-bottom .right{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
.footer-bottom a:hover{color:var(--accent)}

/* ---------- Legal / prose pages ---------- */
.page-header{padding:clamp(52px,7vw,92px) 0 0;position:relative;overflow:hidden}
.page-header:before{content:'';position:absolute;width:620px;height:620px;right:-400px;top:-370px;
  border:1px solid var(--accent-line);border-radius:50%;box-shadow:0 0 0 52px var(--accent-dim);
  pointer-events:none}
.page-header .wrap{position:relative;z-index:1}
.breadcrumbs{display:flex;gap:9px;align-items:center;font:400 9.5px var(--mono);
  letter-spacing:1.2px;color:var(--faint);text-transform:uppercase;margin-bottom:22px}
.breadcrumbs a:hover{color:var(--accent)}
.page-header h1{font-size:clamp(35px,5.6vw,62px);letter-spacing:-.05em;font-weight:500;margin-bottom:18px}
.page-meta{display:flex;flex-wrap:wrap;gap:10px 22px;font:400 10px var(--mono);letter-spacing:.8px;
  color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:30px}
.page-meta b{color:var(--accent);font-weight:400}

.legal-layout{display:grid;grid-template-columns:230px 1fr;gap:clamp(30px,5vw,68px);
  align-items:start;padding:clamp(40px,5vw,66px) 0 0}
.toc{position:sticky;top:98px}
.toc h2{font:400 9px var(--mono);letter-spacing:1.6px;color:var(--faint);text-transform:uppercase;
  margin-bottom:15px;font-weight:400}
.toc ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;font-size:13px;color:var(--muted);padding:6px 12px;border-left:1px solid var(--line);
  transition:all .2s}
.toc a:hover{color:var(--text);border-left-color:var(--accent-line);background:var(--surface)}
.toc a.is-current{color:var(--accent);border-left-color:var(--accent);background:var(--accent-dim)}

.prose{max-width:720px;font-size:15px;line-height:1.85;color:var(--body)}
.prose h2{font-size:clamp(20px,2.6vw,25px);letter-spacing:-.03em;font-weight:550;
  margin:52px 0 16px;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16.5px;font-weight:600;margin:32px 0 11px;scroll-margin-top:100px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 19px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--accent-line)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong{color:var(--text);font-weight:600}
.prose code{font:400 .875em var(--mono);background:var(--surface);border:1px solid var(--line-subtle);
  border-radius:4px;padding:2px 6px;color:var(--accent)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:13.5px}
.prose th{text-align:left;font:400 8.5px var(--mono);letter-spacing:1.1px;text-transform:uppercase;
  color:var(--faint);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.prose td{padding:12px 14px;border-bottom:1px solid var(--line-subtle);vertical-align:top}
.prose td:first-child{color:var(--text);font-weight:500;white-space:nowrap}
.prose .table-scroll{overflow-x:auto;margin-bottom:22px}
.prose .table-scroll table{margin-bottom:0}

.callout{display:flex;gap:15px;background:var(--accent-dim);border:1px solid var(--accent-line);
  border-radius:11px;padding:19px 21px;margin:0 0 30px;font-size:13.5px;line-height:1.75;color:var(--body)}
.callout svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:3px}
.callout strong{color:var(--text)}
.callout.warn{background:var(--surface);border-color:var(--line)}

.legal-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:13px;
  margin-top:66px;padding-top:36px;border-top:1px solid var(--line)}
.legal-nav a{border:1px solid var(--line);border-radius:11px;padding:19px 21px;
  transition:all .25s var(--ease);background:var(--surface)}
.legal-nav a:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.legal-nav .kicker{font:400 8.5px var(--mono);letter-spacing:1.4px;color:var(--accent);
  text-transform:uppercase;display:block;margin-bottom:8px}
.legal-nav .name{color:var(--text);font-weight:550;font-size:14.5px;display:block;margin-bottom:5px}
.legal-nav .desc{font-size:12.5px;color:var(--muted);line-height:1.6}

/* ---------- 404 ---------- */
.notfound{min-height:68vh;display:grid;place-items:center;text-align:center;padding:80px 0}
.notfound .code{font:500 clamp(84px,17vw,190px)/1 var(--mono);color:var(--accent);
  letter-spacing:-6px;margin-bottom:8px}
.notfound h1{font-size:clamp(26px,4vw,40px);letter-spacing:-.04em;margin-bottom:16px}
.notfound p{color:var(--muted);max-width:420px;margin:0 auto 32px}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
.reveal[data-delay="5"]{transition-delay:.45s}

.mock-file{opacity:0;transform:translateX(-14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.is-visible .mock-file,.mock-file.is-visible{opacity:1;transform:none}
.mock-app .mock-file:nth-child(2){transition-delay:.08s}
.mock-app .mock-file:nth-child(3){transition-delay:.16s}
.mock-app .mock-file:nth-child(4){transition-delay:.24s}
.mock-app .mock-file:nth-child(5){transition-delay:.32s}
.mock-app .mock-file:nth-child(6){transition-delay:.4s}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .render-grid{grid-template-columns:1fr}
  .render-tabs{flex-direction:row;overflow-x:auto;padding-bottom:5px;gap:7px;scrollbar-width:none}
  .render-tabs::-webkit-scrollbar{display:none}
  .render-tab{width:auto;flex-shrink:0;padding:10px 15px}
  .render-tab .ext{display:none}
  .legal-layout{grid-template-columns:1fr}
  .toc{position:static;border:1px solid var(--line);border-radius:11px;padding:20px 18px;
    background:var(--surface)}
  .toc ul{flex-direction:row;flex-wrap:wrap;gap:6px}
  .toc a{border-left:0;border:1px solid var(--line);border-radius:7px;padding:6px 12px;font-size:12px}
  .toc a.is-current{border-color:var(--accent)}
}
@media (max-width:900px){
  .mock-app{grid-template-columns:168px 1fr;height:396px}
  .mock-app .mock-view{display:none}
  .split,.split.flip{grid-template-columns:1fr;gap:36px}
  .split.flip .split-text{order:0}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px}
  .footer-blurb{max-width:none}
}
@media (max-width:760px){
  .site-nav{display:none;position:absolute;top:74px;left:0;right:0;background:var(--sidebar);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:14px var(--gutter);font-size:15px;color:var(--body)}
  .site-nav a:after{display:none}
  .site-nav a:hover{background:var(--hover)}
  .nav-toggle{display:flex}
  /* Must match the specificity of `.site-nav+.header-actions` above, or that rule's
     margin-left:0 wins here and the controls sit mid-header instead of flush right.
     Media queries add no specificity. */
  .site-nav+.header-actions{margin-left:auto}
  .header-actions{gap:8px}
  .header-actions .btn{padding:10px 15px;font-size:13.5px}
  .mock-app{grid-template-columns:1fr;height:342px}
  .mock-app .mock-side{display:none}
  .mock-url{display:none}
  .rail{gap:12px 26px;margin-top:24px}
  .hero-actions .btn{flex:1;justify-content:center}
  /* The decorative ring sits off to the right on desktop; at this width it would
     otherwise run straight through the headline. Push it further out. */
  .hero:before{width:440px;height:440px;right:-290px;top:-200px;
    box-shadow:0 0 0 38px var(--accent-dim)}
}
/* Below this the logo plus the three controls no longer fit the content box,
   so the controls get tighter rather than spilling past the gutter. */
@media (max-width:380px){
  .header-inner{gap:10px}
  .header-actions{gap:6px}
  .icon-button{width:32px;height:32px}
  .header-actions .btn{padding:9px 13px;font-size:13px;gap:6px}
  .wordmark{font-size:24px;gap:9px;letter-spacing:-1.4px}
}
@media (max-width:520px){
  .footer-top{grid-template-columns:1fr}
  .footer-bottom .right{margin-left:0;gap:16px}
  .card{padding:24px 22px}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .mock-file{opacity:1;transform:none}
  .chart i{transform:scaleY(1)}
  .caret{opacity:1}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.site-footer,.toc,.legal-nav,.skip-link{display:none}
  body{background:#fff;color:#000}
  .prose{max-width:none}
}



/* ---------- Share card ---------- */
.share-card{background:var(--surface);border:1px solid var(--line);border-radius:13px;
  overflow:hidden;box-shadow:var(--shadow)}
.share-head{display:flex;align-items:center;gap:9px;padding:14px 18px;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.share-head b{color:var(--text);font-weight:600}
.share-head svg{color:var(--accent)}
.share-row{display:flex;align-items:center;gap:13px;padding:15px 18px;
  border-bottom:1px solid var(--line-subtle)}
.share-avatar{width:31px;height:31px;border-radius:9px;background:var(--accent-dim);
  color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:650;flex-shrink:0}
.share-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.share-email{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-meta{font:400 8.5px var(--mono);letter-spacing:1px;color:var(--faint)}
.share-role{margin-left:auto;font-size:11.5px;color:var(--muted);border:1px solid var(--line);
  border-radius:6px;padding:5px 11px;flex-shrink:0}
.share-role.is-edit{color:var(--accent);border-color:var(--accent-line);background:var(--accent-dim)}
.share-foot{padding:13px 18px;font-size:12px;color:var(--faint);background:var(--bg)}

.aside{font-size:13px;color:var(--faint);margin-top:20px;padding-left:14px;
  border-left:2px solid var(--line);max-width:620px}
/* At section level it needs room above the block it qualifies. */
.section > .wrap > .aside{margin-top:36px;line-height:1.75}

/* ---------- Editorial lede row: heading left, prose right ---------- */
/* Breaks the centred label/heading/paragraph stack that every section
   otherwise repeats. */
.lede-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,68px);align-items:end;margin-bottom:clamp(34px,4vw,54px);
  padding-bottom:26px;border-bottom:1px solid var(--line-subtle)}
.lede-row h2{font-size:clamp(27px,3.6vw,42px);letter-spacing:-.04em;font-weight:500;
  line-height:1.08;margin:0}
.lede-row p{font-size:15.5px;color:var(--muted);line-height:1.75;margin:0}

/* ---------- Spec list: what the six-card grid used to say ---------- */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
  gap:0 clamp(28px,5vw,64px);margin:0}
.spec>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;
  padding:19px 0;border-bottom:1px solid var(--line-subtle);align-items:baseline}
.spec dt{font:400 10px var(--mono);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--accent);padding-top:3px}
.spec dd{margin:0;font-size:14.5px;line-height:1.7;color:var(--body)}

/* ---------- Facts row ---------- */
.facts{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:clamp(20px,3vw,38px)}
.facts li{font-size:13.5px;line-height:1.7;color:var(--muted);
  border-top:2px solid var(--accent-line);padding-top:15px}
.facts b{display:block;color:var(--text);font-weight:600;font-size:14.5px;
  letter-spacing:-.01em;margin-bottom:6px}

/* ---------- Tinted band, to vary the section rhythm ---------- */
.section.tint{background:var(--sidebar);border-block:1px solid var(--line-subtle)}

.faq-head{margin-bottom:34px}
.faq-head h2{font-size:clamp(25px,3.2vw,36px);letter-spacing:-.035em}

@media (max-width:820px){
  .lede-row{grid-template-columns:1fr;gap:16px;align-items:start}
  .spec>div{grid-template-columns:82px minmax(0,1fr);gap:14px}
}
@media (max-width:430px){
  .spec>div{grid-template-columns:1fr;gap:6px;padding:15px 0}
  .spec dt{padding-top:0}
  .facts{gap:22px}
}


/* ---------- Install commands (the CLI section) ---------- */
/* One row per command, with a copy button that falls back to selecting the
   text when the clipboard is unavailable. */
.install{margin-top:28px}
.install ol{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.install .step{display:block;font:400 9px var(--mono);letter-spacing:1.5px;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.cmd{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--sidebar);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.cmd code{font:400 12.5px var(--mono);color:var(--text);overflow-wrap:anywhere}
.cmd .copy{display:flex;padding:4px;border-radius:6px;color:var(--faint)}
.cmd .copy:hover{color:var(--accent);background:var(--hover)}
.cmd .copy svg{width:15px;height:15px}
.cmd .i-done,.cmd.is-copied .i-copy{display:none}
.cmd.is-copied .i-done{display:block;color:var(--type-csv)}
.install-note{font-size:13px;color:var(--muted);line-height:1.8;margin-top:18px}
.install-note code{font:400 .88em var(--mono);color:var(--body)}


/* ---------- Cookie consent ---------- */
/* Visible is the resting state, and the slide is only decoration. If the
   transition never runs (throttled tab, odd engine) the banner still shows,
   which is the failure mode you want for a consent notice. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-top:1px solid var(--line);padding:16px 0;
  transform:none;transition:transform .45s var(--ease)}
.consent.is-leaving{transform:translateY(110%)}
.consent-inner{display:flex;align-items:center;gap:clamp(14px,3vw,34px);flex-wrap:wrap}
.consent p{font-size:13px;color:var(--muted);line-height:1.65;flex:1;min-width:240px;margin:0}
.consent p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:9px;flex-shrink:0}
.consent .btn{padding:10px 18px;font-size:13.5px}
@media (max-width:560px){
  .consent-inner{gap:13px}
  .consent-actions{width:100%}
  .consent-actions .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .consent{transition:none} }