@font-face{font-family:'Outfit';font-weight:100 900;font-style:normal;font-display:swap;src:url('fonts/Outfit-variable.woff2') format('woff2')}

/* ---------- tokens (kit tokens.css / MASTER §1, light only) ---------- */
:root{
  color-scheme:light;
  --canvas:#E9EBF1;--card:#FFFFFF;--well:rgba(22,24,29,.04);--well-2:rgba(22,24,29,.065);
  --text:#16181D;--text-2:#5F6674;--muted:#9AA0AC;--faint:#C4C9D4;--icon:#2E323B;
  --ink:#16181D;--paper:#F7F7F5;--ik:22,24,29;--sk:255,255,255;--surface:#FFFFFF;--vis:#EDEFF3;
  --good:#3FBF77;--warn:#E8B04B;--bad:#E56A5A;--info:#4A7DE0;
  --hairline:rgba(22,24,29,.08);
  --sh-card:0 2px 4px rgba(25,35,70,.03),0 12px 32px rgba(25,35,70,.07);
  --sh-hover:0 4px 8px rgba(25,35,70,.05),0 18px 44px rgba(25,35,70,.11);
  --sh-raise:0 2px 10px rgba(25,35,70,.10);
  --r-card:24px;--r-inner:16px;--r-row:18px;
  --ease:cubic-bezier(.2,.8,.3,1);
  /* glass (MASTER §19) — Clear is this page's default level */
  --g-tint:.17;--g-blur:18px;--g-rim:.5;--g-raise:rgba(255,255,255,.30);--g-raise-blur:11px;
  --g-sh-card:0 1px 2px rgba(25,35,70,.04),0 8px 18px rgba(25,35,70,.07);
  --g-sh-hover:0 3px 6px rgba(25,35,70,.05),0 12px 24px rgba(25,35,70,.10);
  --g-sh-raise:0 1px 2px rgba(25,35,70,.05),0 5px 14px rgba(25,35,70,.08);
  /* aura: Mono */
  --b1:#d9dbe2;--b2:#eef0f4;--b3:#c9ccd6;--b4:#f7f7f5;--b5:#e4e6ec;
}
html[data-glass="frosted"]{--g-tint:.34;--g-blur:26px;--g-rim:.55;--g-raise:rgba(var(--sk),.50);--g-raise-blur:14px}
html[data-glass="clearer"]{--g-tint:.07;--g-blur:11px;--g-rim:.45;--g-raise:rgba(var(--sk),.15);--g-raise-blur:8px}
html[data-aura="slate"]{--b1:#aab5d8;--b2:#cad2ea;--b3:#9ba7cf;--b4:#e0e5f2;--b5:#b9c3e2}
html[data-aura="aurora"]{--b1:#b9d1ff;--b2:#dbe8ff;--b3:#a5c4f7;--b4:#ecf3ff;--b5:#c5d9ff}
html[data-aura="lilac"]{--b1:#b8c6ff;--b2:#e9d5ff;--b3:#f7c6e0;--b4:#cfe3ff;--b5:#d7d0ff}

*{box-sizing:border-box}
html{background:var(--canvas);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text);font:400 16px/1.5 'Outfit',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}

/* ---------- the backdrop: aura + grid (MASTER §11, §19) ---------- */
#stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#aura{position:absolute;inset:-20%;filter:blur(72px) saturate(1.05);opacity:.95;transform:translateZ(0)}
#aura i{position:absolute;border-radius:50%;animation:aurad 12s ease-in-out infinite;will-change:transform}
#aura i:nth-child(1){width:55vw;height:55vw;left:5%;top:0;background:var(--b1);animation-duration:12s}
#aura i:nth-child(2){width:50vw;height:50vw;right:0;top:10%;background:var(--b2);animation-duration:16s;animation-delay:-5s}
#aura i:nth-child(3){width:45vw;height:45vw;left:30%;bottom:-5%;background:var(--b3);animation-duration:14s;animation-delay:-8s}
#aura i:nth-child(4){width:40vw;height:40vw;right:20%;bottom:10%;background:var(--b4);animation-duration:11s;animation-delay:-3s}
#aura i:nth-child(5){width:35vw;height:35vw;left:45%;top:30%;background:var(--b5);animation-duration:18s;animation-delay:-10s}
@keyframes aurad{0%{transform:translate(0,0) scale(1);border-radius:50%}25%{transform:translate(12vw,-9vw) scale(1.18);border-radius:46% 54% 52% 48%/52% 48% 54% 46%}50%{transform:translate(4vw,11vw) scale(.88);border-radius:54% 46% 48% 52%/46% 54% 50% 50%}75%{transform:translate(-12vw,-4vw) scale(1.12);border-radius:48% 52% 46% 54%/54% 46% 52% 48%}100%{transform:translate(0,0) scale(1);border-radius:50%}}
html[data-aura="off"] #aura{display:none}
#bgGrid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.62) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.62) 1px,transparent 1px),
    linear-gradient(45deg,transparent calc(50% - .5px),rgba(255,255,255,.34) calc(50% - .5px),rgba(255,255,255,.34) calc(50% + .5px),transparent calc(50% + .5px));
  background-size:84px 84px,84px 84px,168px 168px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 42%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 85% 75% at 50% 42%,#000 25%,transparent 80%)}
html[data-grid="off"] #bgGrid{display:none}
html[data-grid="soft"] #bgGrid{opacity:.32}
html[data-grid="std"] #bgGrid{opacity:.62}
html[data-grid="strong"] #bgGrid{opacity:1}
html[data-aura="off"] #bgGrid{background-image:linear-gradient(rgba(var(--ik),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ik),.05) 1px,transparent 1px);background-size:84px 84px}

/* ---------- glass (MASTER §19): never adds colour, no outline — a rim light ---------- */
.glass{position:relative;border-radius:var(--r-card);background:rgba(255,255,255,var(--g-tint));box-shadow:var(--g-sh-card);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(.94) brightness(1.035);backdrop-filter:blur(var(--g-blur)) saturate(.94) brightness(1.035)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(138deg,rgba(255,255,255,var(--g-rim)) 0%,rgba(255,255,255,.16) 26%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 74%,rgba(255,255,255,.24) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.raise{background:var(--g-raise);box-shadow:var(--g-sh-raise),inset 0 1px 0 rgba(255,255,255,var(--g-rim));
  -webkit-backdrop-filter:blur(var(--g-raise-blur)) saturate(.96) brightness(1.04);backdrop-filter:blur(var(--g-raise-blur)) saturate(.96) brightness(1.04)}
html[data-surface="solid"] .glass{background:var(--card);box-shadow:var(--sh-card);-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-surface="solid"] .glass::after{display:none}
html[data-surface="solid"] .raise{background:var(--surface);box-shadow:var(--sh-raise);-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- type ---------- */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
h1{font-weight:500;font-size:clamp(42px,6vw,80px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
h2{font-weight:500;font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
h3{font-weight:600;font-size:18px;line-height:1.25;letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.5;color:var(--text-2);max-width:56ch;text-wrap:pretty}
.small{text-wrap:pretty}
.small{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.wm{font-weight:600;font-size:14.5px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}

/* ---------- layout ---------- */
.wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
@media (min-width:760px){.wrap{width:min(1180px,calc(100% - 64px))}}
header,main,footer{position:relative;z-index:1}
section{padding-top:clamp(96px,13vw,168px)}
.sechead{display:grid;gap:18px;max-width:760px}
.sechead .lead{margin-top:4px}

/* ---------- buttons (MASTER §3) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;border-radius:999px;padding:14px 24px;font:500 14px/1 'Outfit',system-ui,sans-serif;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.btn.ink{background:var(--ink);color:var(--paper);box-shadow:0 1px 2px rgba(16,17,20,.2)}
.btn.ink:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(16,17,20,.22),inset 0 1px 0 rgba(var(--sk),.14)}
.btn.soft{color:var(--text)}
.btn.soft:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.sm{padding:10px 17px;font-size:13px}
.btn .arr{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(2px)}

/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:14px;z-index:50;display:flex;justify-content:center;pointer-events:none}
.navin{pointer-events:auto;width:min(1180px,calc(100% - 32px));display:flex;align-items:center;gap:6px;padding:7px 7px 7px 22px;border-radius:999px;
  background:rgba(255,255,255,calc(var(--g-tint) + .38));box-shadow:var(--g-sh-raise),inset 0 1px 0 rgba(255,255,255,var(--g-rim));
  -webkit-backdrop-filter:blur(20px) saturate(.96) brightness(1.04);backdrop-filter:blur(20px) saturate(.96) brightness(1.04)}
@media (min-width:760px){.navin{width:min(1180px,calc(100% - 64px))}}
html[data-surface="solid"] .navin{background:rgba(var(--sk),.92)}
.navin .wm{margin-right:auto}
.navin .links{display:flex;gap:2px}
.navin .links a{padding:10px 15px;border-radius:999px;font-size:13px;font-weight:500;color:var(--text-2);transition:background .18s,color .18s}
.navin .links a:hover{color:var(--text);background:rgba(var(--ik),.045)}
.circ{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;color:var(--icon);background:transparent;transition:background .18s}
.circ:hover,.circ[aria-expanded="true"]{background:rgba(var(--ik),.06)}
.circ svg{width:18px;height:18px}
@media (max-width:860px){.navin .links{display:none}}

/* ---------- Appearance popover (MASTER §11, trimmed for the site) ---------- */
.appear{position:fixed;z-index:60;top:74px;right:max(16px,calc((100vw - 1180px)/2));width:min(320px,calc(100vw - 32px));padding:16px;border-radius:22px;
  background:rgba(var(--sk),.93);box-shadow:var(--sh-hover);-webkit-backdrop-filter:blur(30px) saturate(.94);backdrop-filter:blur(30px) saturate(.94);
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.appear.open{opacity:1;transform:none;pointer-events:auto}
.appear .ah{display:flex;align-items:baseline;margin-bottom:6px}
.appear .ah b{font-size:14px;font-weight:600}
.appear .ah span{margin-left:auto;font-size:11px;color:var(--muted)}
.appear .lab{display:block;margin:13px 0 7px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.seg{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(var(--ik),.05)}
.seg button{flex:1;border:none;cursor:pointer;background:transparent;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:500;color:var(--text-2);transition:background .2s,color .2s}
.seg button.on{background:var(--ink);color:var(--paper)}
.seg button:disabled{opacity:.4;cursor:default}
@media (max-width:760px){.appear{top:70px}}

/* ---------- rise (MASTER §4): for ENTERING, never for data ---------- */
.js [data-rise]{opacity:0;transform:translateY(14px)}
.js [data-rise].on{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.js .hero [data-h]{opacity:0;transform:translateY(16px)}
.js .hero.in [data-h]{opacity:1;transform:none;transition:opacity .7s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(132px,17vh,190px)}
.hero-copy{display:grid;justify-items:center;text-align:center;gap:26px}
.hero-copy h1{max-width:11.6em}
.hero-copy .lead{max-width:50ch}
.ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* the desk — a Vetta OS surface, drawn in the kit's primitives */
.desk{margin:clamp(56px,8vw,88px) auto 0;max-width:1100px;border-radius:30px;padding:16px;overflow:hidden;font-size:13px}
.d-top{display:flex;align-items:center;gap:14px;padding:6px 8px 16px}
.d-brand{display:flex;flex-direction:column;gap:4px;line-height:1}
.d-brand b{font-weight:600;font-size:13.5px;letter-spacing:.22em}
.d-brand small{font-size:8.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.d-nav{display:flex;gap:2px;margin-left:18px}
.d-nav span{padding:9px 15px;border-radius:999px;font-weight:500;font-size:12.5px;color:var(--text-2)}
.d-nav span.on{background:var(--surface);color:var(--text);box-shadow:var(--sh-raise)}
.d-kpis{margin-left:auto;display:flex}
.kpi{padding:0 18px;display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.kpi+.kpi{box-shadow:inset 1px 0 0 var(--hairline)}
.kpi i{width:6px;height:6px;border-radius:50%;background:var(--ink);grid-row:span 2}
.kpi small{font-size:10px;color:var(--muted)}
.kpi b{font-size:18px;font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.15}
.d-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.d-side{display:grid;gap:14px;grid-template-rows:auto 1fr}
.d-card{background:rgba(var(--sk),.78);border-radius:22px;box-shadow:var(--sh-card);padding:16px 16px 12px}
.d-head{display:flex;align-items:center;margin:0 2px 12px}
.d-head h4{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.d-head .dseg{margin-left:auto;display:flex;padding:3px;border-radius:999px;background:var(--well)}
.d-head .dseg span{padding:5px 11px;border-radius:999px;font-size:11px;font-weight:500;color:var(--text-2)}
.d-head .dseg span.on{background:var(--ink);color:var(--paper)}
.row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-row);background:var(--well);margin-bottom:8px}
.row .dot{width:7px;height:7px;border-radius:50%;flex:none;transition:background .4s}
.dot.good{background:var(--good)}.dot.warn{background:var(--warn)}.dot.info{background:var(--info)}.dot.mut{background:var(--faint)}
.row .tx{min-width:0;flex:1;display:grid;gap:2px}
.row .tx b{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx small{font-size:11.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .st{flex:none;font-size:11.5px;font-weight:500;padding:5px 11px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-raise);font-variant-numeric:tabular-nums}
.row .st.settle{animation:settle .35s var(--ease)}
@keyframes settle{from{opacity:0;transform:translateY(6px)}}
.d-cash .lab{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.d-cash .big{display:block;margin-top:8px;font-size:30px;font-weight:500;letter-spacing:-.025em;font-variant-numeric:tabular-nums;line-height:1}
.d-cash .sub{display:block;margin-top:6px;font-size:11.5px;color:var(--text-2)}
.bars{display:flex;align-items:flex-end;gap:5px;height:52px;margin-top:14px}
.bars i{flex:1;border-radius:4px 4px 2px 2px;background:rgba(var(--ik),.12);transform-origin:bottom;transform:scaleY(.04);transition:transform 1s var(--ease)}
.bars i:last-child{background:var(--ink)}
.hero.in .bars i{transform:scaleY(1)}
.d-ai{display:flex;flex-direction:column}
.thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:190px;padding:0 2px 10px}
.ai-q{align-self:flex-end;max-width:85%;padding:9px 14px;border-radius:16px 16px 4px 16px;background:var(--ink);color:var(--paper);font-size:12.5px;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ai-shim{align-self:flex-start;font-size:12px;font-weight:500;opacity:0;background:linear-gradient(90deg,rgba(var(--ik),.3) 0%,rgba(var(--ik),.9) 50%,rgba(var(--ik),.3) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 1.6s linear infinite;transition:opacity .25s}
@keyframes shim{from{background-position:120% 0}to{background-position:-120% 0}}
.ai-a{display:grid;gap:10px;opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ai-a p{font-size:12.5px;line-height:1.5;color:var(--text)}
.draft{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 13px;border-radius:16px;background:var(--well)}
.draft div{flex:1;display:grid;gap:1px;min-width:0}
.draft small{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.draft b{font-size:12px;font-weight:500}
.draft .btn{padding:8px 13px;font-size:11.5px}
.show{opacity:1!important;transform:none!important}
.composer{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 15px;border-radius:999px;background:var(--well);min-height:40px;font-size:12.5px}
.composer .ph{color:var(--muted)}
.composer .cur{display:inline-block;width:1px;height:15px;background:var(--text);animation:blink 1s steps(2) infinite;margin-left:-6px}
@keyframes blink{to{opacity:0}}
.composer .send{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;flex:none}
.composer .send svg{width:12px;height:12px}

/* ---------- the ink toast (MASTER §3 — the pill with a timer) ---------- */
.toast{position:fixed;left:50%;bottom:26px;z-index:90;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:13px 22px;border-radius:999px;background:var(--ink);color:var(--paper);
  font:500 13px/1.25 'Outfit',system-ui,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 12px 30px rgba(16,17,20,.24);
  opacity:0;transform:translate(-50%,-16px);pointer-events:none;overflow:hidden;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.desk-toast{position:absolute;bottom:20px;font-size:12px;padding:11px 18px;white-space:nowrap}
.toast em{font-style:normal;opacity:.6}
.toast svg{width:15px;height:15px;flex:none}
.toast svg path{stroke-dasharray:24;stroke-dashoffset:24}
.toast.show svg path{animation:draw .45s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.toast .drain{position:absolute;left:22px;right:22px;bottom:0;height:1.5px;background:rgba(247,247,245,.5);transform-origin:left;transform:scaleX(1)}
.toast.show .drain{animation:drain var(--dur,5s) linear forwards}
.toast.paused .drain{animation-play-state:paused}
@keyframes drain{to{transform:scaleX(0)}}

/* ---------- 01 · why ---------- */
.statement{max-width:24ch}
.verbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(40px,5vw,64px)}
.verb{padding:22px 22px 24px;display:grid;gap:10px;align-content:start;min-height:190px}
.verb .n{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.verb h3{margin-top:auto;padding-top:28px;font-size:20px}

/* ---------- 02 · the three layers ---------- */
.layers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;margin-top:clamp(40px,5vw,64px)}
.stack{position:relative;height:520px}
.layer{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:40px;padding:34px;
  transform:translate3d(0,calc(var(--y0) + var(--lift,0px)),0) rotateX(58deg) rotateZ(-42deg);opacity:0;
  transition:transform 1.3s var(--ease),opacity .8s var(--ease),background .3s,box-shadow .3s}
.layer.l1{--y0:24px;--y:124px}
.layer.l2{--y0:0px;--y:0px}
.layer.l3{--y0:-24px;--y:-124px}
.stack.on .layer{opacity:1;transform:translate3d(0,calc(var(--y) + var(--lift,0px)),0) rotateX(58deg) rotateZ(-42deg)}
.stack.on .l1{transition-delay:0s}.stack.on .l2{transition-delay:.12s}.stack.on .l3{transition-delay:.24s}
.stack[data-hi="1"] .l1,.stack[data-hi="2"] .l2,.stack[data-hi="3"] .l3{--lift:-16px;background:rgba(255,255,255,calc(var(--g-tint) + .3))}
.layer .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:100%}
.layer .tiles i{border-radius:14px;background:rgba(var(--ik),.07)}
.layer .tiles i:nth-child(5){background:rgba(var(--ik),.16)}
.layer .lines{display:grid;align-content:center;gap:16px;height:100%}
.layer .lines i{height:10px;border-radius:6px;background:rgba(var(--ik),.1)}
.layer .lines i:nth-child(2){width:72%}.layer .lines i:nth-child(3){width:86%}.layer .lines i:nth-child(4){width:58%}.layer .lines i:nth-child(5){width:78%}
.layer .brain{display:grid;place-items:center;height:100%}
.layer .brain span{width:100%;height:56px;border-radius:999px;background:rgba(var(--sk),.7);box-shadow:var(--sh-raise);display:flex;align-items:center;justify-content:flex-end;padding:0 10px}
.layer .brain span i{width:38px;height:38px;border-radius:50%;background:var(--ink)}
.items{display:grid;gap:12px}
.item{padding:22px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:6px;cursor:default;transition:box-shadow .25s,transform .25s var(--ease)}
.item:hover,.item.hi{box-shadow:var(--g-sh-hover);transform:translateY(-2px)}
.item .n{grid-row:span 2;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums}

/* ---------- 03 · engineering bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:clamp(40px,5vw,64px)}
.tile{padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile .demo{margin-bottom:14px}
.s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 4}.s12{grid-column:span 12}
.reg{position:relative;height:230px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%)}
.regtrack{display:grid;gap:10px;animation:up 40s linear infinite}
.reg:hover .regtrack{animation-play-state:paused}
@keyframes up{to{transform:translateY(calc(-50% - 5px))}}
.tool{border-radius:16px;background:var(--well);padding:13px 15px;font-size:12px;line-height:1.5}
.tool code{display:block;font:500 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:6px}
.tool .f{display:grid;grid-template-columns:62px 1fr;gap:2px 10px}
.tool .f b{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.tool .f span{color:var(--text-2)}
.plat{display:grid;gap:10px}
.plat .top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plat .top span{padding:12px 8px;border-radius:14px;background:var(--well);font-size:11.5px;font-weight:500;text-align:center;color:var(--text-2);display:grid;gap:7px;justify-items:center}
.plat .top span i{width:6px;height:6px;border-radius:50%}
.plat .base{padding:13px;border-radius:14px;background:var(--ink);color:var(--paper);text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.plat .mods{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.plat .mods span{font-size:10.5px;padding:5px 10px;border-radius:999px;background:var(--well);color:var(--text-2)}
.checks{display:grid;gap:7px}
.checks div{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:14px;background:var(--well);font-size:12.5px;font-weight:500}
.checks svg{width:14px;height:14px;margin-left:auto;color:var(--good)}
.iso{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.iso div{border-radius:16px;background:var(--well);padding:10px;display:grid;gap:6px}
.iso small{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:2px}
.iso i{display:block;height:9px;border-radius:5px;background:rgba(var(--ik),.09)}
.iso i:nth-child(3){width:70%}
.conn{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.conn span{padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--text-2)}
.wide{flex-direction:row;align-items:center;gap:32px}
.wide>div:first-child{flex:1;display:grid;gap:10px}

/* ---------- 04 · principles ---------- */
.prin{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(40px,5vw,64px)}
.pt{padding:14px 14px 24px;display:flex;flex-direction:column;gap:8px}
.pt .stagebox{height:170px;border-radius:18px;background:var(--well);margin-bottom:14px;display:grid;place-items:center;position:relative;overflow:hidden}
.pt h3,.pt p{padding:0 10px}
.bl{display:flex;gap:14px}
.bl i{width:86px;height:92px;border-radius:18px;background:var(--surface);box-shadow:var(--sh-card)}
.bl i:first-child{width:118px}
.oneink{display:grid;gap:10px;width:78%}
.oneink i{height:9px;border-radius:5px;background:rgba(var(--ik),.1)}
.oneink i:nth-child(2){width:80%}.oneink i:nth-child(3){width:64%}
.oneink span{justify-self:start;margin-top:6px;padding:8px 15px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:11.5px;font-weight:500}
.edit{width:82%;padding:13px 16px;border-radius:14px;background:var(--surface);box-shadow:var(--sh-raise);font-size:13.5px;display:flex;align-items:center;min-height:46px}
.edit .c{display:inline-block;width:1.5px;height:17px;background:var(--text);margin-left:1px;animation:blink 1s steps(2) infinite}
.edit .ok{margin-left:auto;font-size:11px;color:var(--muted);opacity:0;transition:opacity .3s}
.edit .ok.on{opacity:1}
.sendbtn{min-width:150px}
.sendbtn .spin{width:12px;height:12px;border-radius:50%;border:1.8px solid var(--paper);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pt .hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.arrive{display:grid;gap:8px;width:80%}
.arrive i{display:block;height:34px;border-radius:13px;background:var(--surface);box-shadow:var(--sh-raise)}
.arrive.play i{animation:rise .5s var(--ease) both}
.arrive.play i:nth-child(2){animation-delay:.06s}.arrive.play i:nth-child(3){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.door{display:grid;gap:14px;justify-items:center;--acc:var(--ink);--acc-ink:var(--paper)}
.door .mini{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-raise)}
.door .mini b{font-size:11.5px;font-weight:600;letter-spacing:.22em}
.door .mini span{padding:7px 13px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-size:11px;font-weight:500;transition:background .35s,color .35s}
.door .mini em{width:30px;height:18px;border-radius:999px;background:var(--acc);position:relative;transition:background .35s}
.door .mini em:after{content:"";position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--acc-ink)}
.sw{display:flex;gap:8px}
.sw button{width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;padding:0;background:var(--c);box-shadow:0 1px 3px rgba(0,0,0,.14);transition:transform .2s var(--ease),box-shadow .2s}
.sw button:hover{transform:scale(1.12)}
.sw button.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--c)}

/* ---------- 05 · start ---------- */
.start{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);padding:clamp(24px,4vw,48px);border-radius:32px}
.fit{display:grid;gap:10px;align-content:start}
.fit .eyebrow{margin:6px 0 4px}
.fit>div{padding:13px 15px;border-radius:16px;background:var(--well);font-size:14.5px;line-height:1.45}
.go{display:grid;align-content:start}

/* ---------- footer ---------- */
footer{padding:clamp(80px,10vw,140px) 0 40px}
.foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2)}
.foot .wm{color:var(--text);margin-right:auto}

/* ---------- systems we've built (tabs: the kit's sliding thumb, MASTER §3) ---------- */
.sys{margin-top:clamp(40px,5vw,64px);padding:14px;border-radius:32px}
.ptabs{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(var(--ik),.05);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin:2px auto 14px}
.ptabs::-webkit-scrollbar{display:none}
.ptab{position:relative;z-index:1;border:none;background:transparent;cursor:pointer;padding:10px 18px;border-radius:999px;font:500 13px 'Outfit',system-ui,sans-serif;color:var(--text-2);white-space:nowrap;transition:color .25s}
.ptab.on{color:var(--paper)}
.pthumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:var(--ink);transition:left .35s var(--ease),width .35s var(--ease)}
.pthumb.snap{transition:none}
.sys-panel{display:none;grid-template-columns:5fr 7fr;gap:14px;align-items:stretch}
.sys-panel.on{display:grid;animation:settle .35s var(--ease)}
.sys-copy{padding:20px 14px 14px 20px;display:flex;flex-direction:column;gap:12px}
.sys-copy .k{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sys-copy h3{font-size:clamp(21px,2vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.sys-copy .facts{margin-top:auto;display:grid;gap:7px;padding-top:12px}
.sys-copy .facts div{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:14px;background:var(--well);font-size:13px;font-weight:500}
.sys-copy .facts i{width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}
.sys-vis{position:relative;border-radius:22px;overflow:hidden;background:var(--vis);min-height:420px}
.sys-vis svg.map{position:absolute;inset:0;width:100%;height:100%;display:block}
.map text{font-family:'Outfit',system-ui,sans-serif}
.route{fill:none;stroke:#16181D;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.play .route{animation:route 2.4s var(--ease) .2s forwards}
@keyframes route{to{stroke-dashoffset:0}}
.stop{opacity:0;transform-box:fill-box;transform-origin:center}
.play .stop{animation:pop .45s var(--ease) both;animation-delay:calc(var(--k) * .16s + .35s)}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.veh{opacity:0;transition:opacity .4s}
.play .veh{opacity:1;transition-delay:2.3s}
.mcard{position:absolute;left:14px;top:14px;z-index:2;display:grid;gap:3px;padding:12px 15px;border-radius:16px;background:rgba(var(--sk),.88);box-shadow:var(--sh-raise);font-size:12px;color:var(--text-2);max-width:250px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.mcard b{font-size:13px;font-weight:600;color:var(--text)}
.mcard.r{left:auto;right:14px}
.play .mcard{opacity:1;transform:none;transition-delay:.6s}
.qrow{display:flex;justify-content:space-between;gap:18px;font-variant-numeric:tabular-nums}
.qrow.t{margin-top:4px;padding-top:6px;box-shadow:inset 0 1px 0 var(--hairline);color:var(--text);font-weight:600;font-size:13px}
.fence{fill:none;stroke:#16181D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.play .fence{animation:route 2.6s var(--ease) .3s forwards}
.flab{opacity:0}
.play .flab{animation:pop .4s var(--ease) both;animation-delay:calc(var(--k) * .12s + 2.4s)}

/* booking widget */
.bkcard{position:relative;z-index:1;background:var(--surface);border-radius:20px;box-shadow:var(--sh-card);padding:16px;display:grid;gap:12px;width:min(470px,calc(100% - 32px));margin:24px auto;font-size:12.5px}
.bk-top{display:flex;align-items:center;gap:12px}
.bk-img{width:62px;height:50px;border-radius:12px;background:var(--well);display:grid;place-items:center;flex:none;color:var(--icon)}
.bk-img svg{width:44px;height:30px}
.bk-top .nm{display:grid;gap:2px;min-width:0}
.bk-top b{font-size:14px;font-weight:600}
.bk-top small{font-size:11.5px;color:var(--text-2)}
.bk-top .pr{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-mo{display:flex;justify-content:space-between;font-weight:600;font-size:12.5px;padding:0 2px}
.bk-mo span{color:var(--muted);font-weight:500}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-variant-numeric:tabular-nums}
.cal .h{font-size:10px;color:var(--muted);padding-bottom:2px}
.cal span{padding:7px 0;border-radius:9px;transition:background .25s,color .25s}
.cal span.off{color:var(--faint)}
.cal span.in{background:rgba(var(--ik),.08)}
.cal span.end{background:var(--ink);color:var(--paper)}
.bk-seg{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--well)}
.bk-seg span{flex:1;text-align:center;padding:7px 0;border-radius:999px;font-weight:500;font-size:12px;color:var(--text-2);transition:background .25s,color .25s}
.bk-seg span.on{background:var(--ink);color:var(--paper)}
.bk-line{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--well);font-variant-numeric:tabular-nums}
.bk-line span{color:var(--text-2)}
.bk-line b{font-weight:600}
.bk-go{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;font-size:13px}
.bk-go .spin{width:12px;height:12px;border-radius:50%;border:1.8px solid var(--paper);border-right-color:transparent;animation:spin .7s linear infinite}
.bk-go svg{width:14px;height:14px}

/* back office */
.bo{position:relative;z-index:1;display:grid;gap:12px;padding:18px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.flow div{position:relative;background:var(--surface);border-radius:16px;box-shadow:var(--sh-raise);padding:12px 13px;display:grid;gap:3px;opacity:.4;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.flow div.lit{opacity:1;transform:translateY(-2px)}
.flow div+div::before{content:"";position:absolute;left:-8px;top:50%;width:6px;height:6px;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:translateY(-50%) rotate(45deg)}
.flow small,.bo-card h4{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.flow b{font-size:19px;font-weight:500;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.flow em{font-style:normal;font-size:11px;color:var(--text-2)}
.bo-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
.bo-card{background:var(--surface);border-radius:18px;box-shadow:var(--sh-card);padding:14px;display:grid;gap:7px;align-content:start}
.rc{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--well);font-size:12px;opacity:0}
.play .rc{animation:rin .45s var(--ease) both;animation-delay:calc(var(--k) * .35s + 1.6s)}
@keyframes rin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rc .tx{flex:1;min-width:0;display:grid;gap:1px}
.rc .tx b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .tx small{color:var(--text-2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .st{font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-raise)}
.q-big{font-size:26px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.q-sub{font-size:11.5px;color:var(--text-2)}
.bo .bars{height:46px;margin-top:6px}
.play .bo .bars i{transform:scaleY(1)}

.toast{z-index:120}

@media (max-width:860px){
  .sys-panel{grid-template-columns:1fr}
  .sys-vis{min-height:340px;order:-1}
  .sys-copy{padding:14px 8px 8px}
  .flow{grid-template-columns:1fr 1fr}
  .flow div+div::before{display:none}
  .bo-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .sys{padding:10px;border-radius:26px}
  .ptabs{margin:2px 0 12px}
  .ptab{padding:9px 14px;font-size:12.5px}
  .sys-vis{min-height:300px}
  .mcard{font-size:11px;padding:9px 11px;max-width:200px;left:10px;top:10px}
  .mcard.r{right:10px}
  .mcard b{font-size:12px}
  .bo-card.qc{display:none}
}
@media (prefers-reduced-motion:reduce){
  .route,.fence{stroke-dashoffset:0!important;animation:none!important}
  .stop,.flab,.rc,.mcard,.veh{opacity:1!important;animation:none!important;transform:none!important}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .d-kpis{display:none}
  .verbs{grid-template-columns:1fr 1fr}
  .prin{grid-template-columns:1fr 1fr}
  .s7,.s5,.s4{grid-column:span 12}
  .bento .s4{grid-column:span 6}
  .bento .s4:last-of-type{grid-column:span 12}
}
@media (max-width:860px){
  .layers{grid-template-columns:1fr}
  .stack{height:420px}
  .layer{width:230px;height:230px;margin:-115px 0 0 -115px;padding:26px;border-radius:32px}
  .layer.l1{--y0:18px;--y:96px}.layer.l3{--y0:-18px;--y:-96px}
  .start{grid-template-columns:1fr}
  .wide{flex-direction:column;align-items:stretch;gap:18px}
}
@media (max-width:760px){
  .d-nav{display:none}
  .d-grid{grid-template-columns:1fr}
  .d-cash{display:none}
  .row.ph-hide{display:none}
  .desk{padding:10px;border-radius:24px}
  .thread{min-height:170px}
  .toast.desk-toast em{display:none}
  .toast.desk-toast{bottom:74px}
}
@media (max-width:600px){
  .verbs,.prin{grid-template-columns:1fr}
  .verb{min-height:0}
  .verb h3{padding-top:14px}
  .bento .s4{grid-column:span 12}
  .foot span:not(.wm){width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #aura i,.regtrack,.ai-shim,.composer .cur,.edit .c{animation:none!important}
  .js [data-rise],.js .hero [data-h],.layer{opacity:1!important;transform:none;transition:none!important}
  .stack .layer{transform:translate3d(0,var(--y),0) rotateX(58deg) rotateZ(-42deg)!important}
}

/* ---------- the Start form (MASTER §3 inputs: well fields, no borders; invalid submissions shake) ---------- */
.fit h2{margin-bottom:6px}
.fit .lead{margin-bottom:18px}
.sform{display:grid;gap:18px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld{display:grid;gap:6px;font-size:12.5px;font-weight:500;color:var(--text-2)}
.fld em,.chips legend em{font-style:normal;font-weight:400;color:var(--muted)}
.fld input,.fld textarea{width:100%;border:none;outline:none;border-radius:12px;padding:13px 15px;background:var(--well);color:var(--text);font:400 14.5px/1.4 'Outfit',system-ui,sans-serif;transition:box-shadow .18s,background .18s}
.fld textarea{resize:vertical;min-height:84px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted)}
.fld input:focus,.fld textarea:focus{box-shadow:0 0 0 1.5px rgba(var(--ik),.3);background:var(--well-2)}
.fld.bad input{box-shadow:0 0 0 1.5px var(--bad)}
.chips{border:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.chips legend{padding:0;margin-bottom:8px;font-size:12.5px;font-weight:500;color:var(--text-2)}
.chips.bad legend{color:var(--bad)}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip span{display:inline-block;padding:9px 14px;border-radius:999px;background:var(--well);font-size:13px;font-weight:500;color:var(--text-2);transition:background .18s,color .18s,transform .18s var(--ease)}
.chip:hover span{background:var(--well-2);color:var(--text)}
.chip input:checked+span{background:var(--ink);color:var(--paper)}
.chip input:focus-visible+span{box-shadow:0 0 0 1.5px rgba(var(--ik),.35)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fgo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fgo .btn{min-width:130px}
.fgo .btn .spin{width:12px;height:12px;border-radius:50%;border:1.8px solid var(--paper);border-right-color:transparent;animation:spin .7s linear infinite}
.fnote{font-size:12.5px;color:var(--muted)}
.fnote.bad{color:var(--bad)}
.shake{animation:svshake .45s var(--ease)}
@keyframes svshake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.sent{display:grid;gap:10px;justify-items:start;align-content:center;min-height:100%;animation:settle .45s var(--ease)}
.sent[hidden]{display:none}
.sent .ok{width:52px;height:52px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center;animation:pop .5s var(--ease)}
.sent .ok svg{width:26px;height:26px}
.sent .ok path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s var(--ease) .25s forwards}
.sent h3{font-size:28px;font-weight:500;letter-spacing:-.02em}
.toast.fail svg{display:none}
.toast.fail:before{content:"";width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1.6px currentColor;flex:none}
.toast.fail .drain{display:none}
.toast a{color:inherit;text-decoration:underline;text-underline-offset:3px;margin-left:6px}
@media (max-width:600px){.fgrid{grid-template-columns:1fr}}

/* ---------- dark (MASTER §20 shadows; the launch's dark canvas #0E0F12 / ink #F0F1F4) ---------- */
html[data-theme="dark"]{color-scheme:dark;
  --canvas:#0E0F12;--card:#17181C;--surface:#1E1F24;--vis:#141518;--well:rgba(255,255,255,.05);--well-2:rgba(255,255,255,.09);
  --text:#F0F1F4;--text-2:#A6ACB8;--muted:#737987;--faint:#3B3F48;--icon:#D6D9DF;--ink:#F0F1F4;--paper:#0E0F12;--ik:240,241,244;--sk:30,31,36;
  --hairline:rgba(255,255,255,.07);
  --sh-card:0 1px 2px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.24);--sh-hover:0 2px 4px rgba(0,0,0,.30),0 10px 20px rgba(0,0,0,.28);--sh-raise:0 1px 6px rgba(0,0,0,.30);
  --g-tint:.32;--g-raise:rgba(14,14,18,.32);
  --g-sh-card:0 1px 2px rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.18);--g-sh-hover:0 2px 4px rgba(0,0,0,.26),0 10px 20px rgba(0,0,0,.24);--g-sh-raise:0 1px 6px rgba(0,0,0,.26)}
html[data-theme="dark"][data-glass="frosted"]{--g-tint:.50;--g-raise:rgba(14,14,18,.48)}
html[data-theme="dark"][data-glass="clearer"]{--g-tint:.18;--g-raise:rgba(14,14,18,.18)}
html[data-theme="dark"] .glass{background:rgba(22,22,26,var(--g-tint));-webkit-backdrop-filter:blur(var(--g-blur)) saturate(.9) brightness(.92);backdrop-filter:blur(var(--g-blur)) saturate(.9) brightness(.92)}
html[data-theme="dark"] .glass::after{display:none}
html[data-theme="dark"] .raise{box-shadow:var(--g-sh-raise)}
html[data-theme="dark"][data-surface="solid"] .glass{background:var(--card)}
html[data-theme="dark"][data-surface="solid"] .raise{background:var(--surface)}
html[data-theme="dark"] #aura{opacity:.22;filter:blur(80px) saturate(.8)}
html[data-theme="dark"][data-surface="glass"] #aura{opacity:.30;filter:blur(84px) saturate(.95)}
html[data-theme="dark"][data-grid="soft"] #bgGrid{opacity:.06}
html[data-theme="dark"][data-grid="std"] #bgGrid{opacity:.12}
html[data-theme="dark"][data-grid="strong"] #bgGrid{opacity:.2}
html[data-theme="dark"] .navin{background:rgba(22,22,26,calc(var(--g-tint) + .38));box-shadow:var(--g-sh-raise)}
html[data-theme="dark"][data-surface="solid"] .navin{background:rgba(23,24,28,.94)}
html[data-theme="dark"] .appear{background:rgba(30,30,34,.94)}
html[data-theme="dark"] .d-card{background:rgba(30,31,36,.86)}
html[data-theme="dark"] .sys-vis svg.map{filter:invert(.9) hue-rotate(180deg)}
html[data-theme="dark"] .toast .drain{background:rgba(14,15,18,.4)}
html[data-theme="dark"] .toast{box-shadow:0 12px 30px rgba(0,0,0,.4)}
.circ .sun{display:none}
html[data-theme="dark"] .circ .moon{display:none}
html[data-theme="dark"] .circ .sun{display:block}

/* ---------- Vetta AI — VERBATIM from the Vetta OS renderer (MASTER §12), Bloom + Spotlight only. Never restyle it
   here: change the OS and copy the block again. The shims below map the OS tokens onto this page's. ---------- */
:root{--ease-out:cubic-bezier(.2,.8,.3,1);--zi:1;--accent:var(--ink);--accent-ink:var(--paper);--raise:var(--surface);--r-pill:999px}
@keyframes nsettle{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes nfade{from{opacity:0}to{opacity:1}}
  /* ---------- Vetta AI — the surface concepts (dock · bloom · sheet · spotlight · pill · page) ---------- */
  .ai-scrim{position:fixed;inset:0;z-index:90;background:rgba(18,19,24,.16);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out),backdrop-filter .3s;backdrop-filter:blur(0)}
  html.ai-open .ai-scrim{opacity:1;pointer-events:auto}
  html.ai-open.ai-spot .ai-scrim,html.ai-open.ai-pill .ai-scrim{backdrop-filter:blur(10px) saturate(.9);background:rgba(18,19,24,.12)}
  html.ai-open.ai-page .ai-scrim{opacity:0;pointer-events:none}
  .ai{position:fixed;z-index:95;display:none;flex-direction:column;overflow:hidden;--b1:#d9dbe2;--b2:#eef0f4;--b3:#c9ccd6;--b4:#f7f7f5;--b5:#e4e6ec}
  html[data-aura]:not([data-aura="off"]) .ai{--b1:inherit}
  html.ai-open .ai{display:flex}
  .ai-bg{position:absolute;inset:-35%;z-index:0;pointer-events:none;filter:blur(70px) saturate(1.05);opacity:.95}
  .ai-bg i{position:absolute;border-radius:50%;animation:aurad 26s cubic-bezier(.2,.8,.3,1) infinite alternate}
  .ai-bg i:nth-child(1){width:70%;height:70%;left:0;top:0;background:var(--b1);animation-duration:26s}
  .ai-bg i:nth-child(2){width:60%;height:60%;right:0;top:15%;background:var(--b2);animation-duration:31s;animation-delay:-8s}
  .ai-bg i:nth-child(3){width:55%;height:55%;left:25%;bottom:0;background:var(--b3);animation-duration:28s;animation-delay:-14s}
  .ai-bg i:nth-child(4){width:50%;height:50%;right:15%;bottom:10%;background:var(--b4);animation-duration:24s;animation-delay:-4s}
  .ai-bg i:nth-child(5){width:45%;height:45%;left:40%;top:35%;background:var(--b5);animation-duration:34s;animation-delay:-20s}
  html[data-theme="dark"] .ai-bg{opacity:.28;filter:blur(80px) saturate(.8)}
  .ai-body{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;width:100%;min-height:0}
  .ai-head{display:flex;align-items:center;gap:10px;padding:16px 18px 6px;flex:none}
  .ai-head .t{font-weight:600;font-size:14px;color:var(--text)}
  .ai-head .s{font-size:11.5px;color:var(--text-2)}
  .ai-head .x{margin-left:auto;border:none;background:rgba(255,255,255,.55);backdrop-filter:blur(8px);width:30px;height:30px;border-radius:50%;cursor:pointer;color:var(--text-2);font-size:16px;line-height:1;transition:background .18s,color .18s}
  .ai-head .x:hover{background:var(--card);color:var(--text)}
  html[data-theme="dark"] .ai-head .x{background:rgba(255,255,255,.08)}
  .ai-thread{flex:1;min-height:0;overflow:auto;padding:8px 18px 8px;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
  .ai-thread::-webkit-scrollbar{display:none}
  .ai-empty{margin:auto;text-align:center;color:var(--text-2);font-size:13px;max-width:300px;line-height:1.55}
  .ai-empty b{display:block;font-weight:600;color:var(--text);font-size:15px;margin-bottom:4px}
  .ai-sug{display:flex;flex-direction:column;gap:6px;margin-top:14px}
  .ai-sug button{border:none;cursor:pointer;text-align:left;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);border-radius:12px;padding:9px 12px;font:400 12.5px 'Outfit',sans-serif;color:var(--text-2);transition:background .18s,color .18s}
  .ai-sug button:hover{background:var(--card);color:var(--text)}
  html[data-theme="dark"] .ai-sug button{background:rgba(255,255,255,.07)}
  .ai-msg{max-width:88%;font-size:14px;line-height:1.6;animation:rise .45s var(--ease-out) both}
  .ai-xclose{display:none} /* compact-only close for the full-screen AI takeover */
  .aiw{opacity:0;animation:aiwfade .34s ease-out both} /* answer motion C — words surface in reading order (Cole 08-31) */
  @keyframes aiwfade{from{opacity:0}to{opacity:1}}
  .ai-msg.me{align-self:flex-end;background:rgba(255,255,255,.62);backdrop-filter:blur(10px);border-radius:18px 18px 6px 18px;padding:10px 14px;color:var(--text)}
  html[data-theme="dark"] .ai-msg.me{background:rgba(255,255,255,.1)}
  .ai-note{font-size:11px;color:var(--muted);margin-top:8px}
  .ai-msg.bot{align-self:flex-start;background:var(--card);border-radius:18px;padding:14px 17px;box-shadow:0 12px 34px rgba(13,13,13,.08);max-width:94%}
  .ai-msg.bot p{margin:0 0 9px}.ai-msg.bot p:last-child{margin:0}.ai-msg.bot b{font-weight:600}
  .ai-msg.bot ul{margin:2px 0 9px;padding-left:18px}.ai-msg.bot li{margin:2px 0}
  /* Copy a message (MASTER §12, Cole 2026-09-04): the copy icon under the bubble, faint at rest, full ink on hover. */
  .ai-msgwrap{display:flex;flex-direction:column;gap:2px;max-width:94%;align-self:flex-start}
  .ai-msgwrap.me{align-self:flex-end;align-items:flex-end;max-width:88%}
  .ai-msgwrap .ai-msg{max-width:100%}
  .ai-copy{align-self:flex-start;display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:50%;background:none;padding:0;margin-left:10px;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .18s,color .18s,background .18s,transform .18s}
  .ai-copy svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ai-msgwrap.me .ai-copy{align-self:flex-end;margin:0 10px 0 0}
  .ai-msgwrap:hover .ai-copy,.ai-copy:focus-visible,.ai-copy.on{opacity:1}
  .ai-copy:hover{color:var(--text);background:var(--well,rgba(0,0,0,.05));transform:translateY(-1px)}
  .ai-copy.on{color:var(--text)}
  @media (hover:none){.ai-copy{opacity:.55}}
  .ai-prop{margin-top:10px;background:var(--well);border-radius:16px;padding:12px 14px 11px;animation:rise .45s var(--ease-out) both;animation-delay:.2s}
  .ai-prop .lab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:5px}
  .ai-prop .what{font-size:13.5px;font-weight:500;color:var(--text)}
  .ai-prop .where{font-size:11.5px;color:var(--text-2);margin-top:2px}
  .ai-prop .acts{display:flex;gap:8px;margin-top:9px;align-items:center}
  .ai-prop .ok{font-size:12px;color:var(--good);font-weight:500;display:none;align-items:center;gap:6px}
  .ai-prop.done .acts .btn,.ai-prop.done .acts .ghost{display:none}.ai-prop.done .ok{display:inline-flex}
  .ai-pillwrap{padding:8px 14px 14px;perspective:320px;flex:none;position:relative}
  .ai-pill{background:var(--card);border-radius:24px;box-shadow:0 18px 50px rgba(13,13,13,.10);padding:9px 9px 9px 12px;display:flex;align-items:flex-end;gap:6px;transform-origin:50% 80%;transition:box-shadow .25s var(--ease-out),transform .25s var(--ease-out)}
  .ai-pill:focus-within{box-shadow:0 26px 60px rgba(13,13,13,.14);transform:translateY(-1px)}
  .ai-pill.away{animation:aiaway .46s var(--ease-out) both}
  .ai-pill.back{animation:aiback .55s var(--ease-out) both}
  @keyframes aiaway{to{transform:translateY(26px) rotateX(34deg) scale(.92,.62);opacity:0}}
  @keyframes aiback{from{transform:translateY(18px) rotateX(18deg) scale(.96,.86);opacity:0}}
  .ai-rb{width:40px;height:40px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);flex:none;transition:background .18s}
  .ai-rb:hover{background:var(--well)}
  .ai-rb svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .ai-ta{flex:1;min-width:0;border:none;outline:none;background:transparent;resize:none;font:400 16px/1.5 'Outfit',sans-serif;color:var(--text);padding:8px 2px;max-height:160px;overflow:auto;scrollbar-width:none;will-change:height}
  .ai-ta::placeholder{color:var(--muted)}
  .ai-act{width:40px;height:40px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink,#fff);display:grid;place-items:center;cursor:pointer;flex:none;position:relative;overflow:hidden;transition:transform .18s var(--ease-out),box-shadow .18s}
  .ai-act:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 8px 20px rgba(13,13,13,.22)}
  .ai-act svg{grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .22s var(--ease-out),transform .32s var(--ease-out)}
  .ai-act .wave{opacity:1}.ai-act .send{opacity:0;transform:translateY(8px) scale(.8)}
  .ai-act.has .wave{opacity:0;transform:scale(.6)}.ai-act.has .send{opacity:1;transform:none}
  .ai-think{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:15px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
  .ai-think.show{opacity:1}
  .ai-shim{background:linear-gradient(90deg,var(--muted) 0%,var(--muted) 35%,var(--text) 50%,var(--muted) 65%,var(--muted) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:aishim 1.6s linear infinite}
  @keyframes aishim{0%{background-position:120% 0}100%{background-position:-120% 0}}
  /* variants */
  .ai.v-bloom{top:12px;right:12px;bottom:12px;width:min(440px,92vw);border-radius:24px;background:var(--card);box-shadow:var(--sh-hover);transform-origin:calc(100% - 28px) 36px;animation:aibloom .5s cubic-bezier(.2,.9,.2,1) both}
  @keyframes aibloom{0%{opacity:0;transform:scale(.08);border-radius:50%}40%{opacity:1}100%{transform:scale(1);border-radius:24px}}
  .ai.v-bloom .ai-body{animation:nfade .35s var(--ease-out) both;animation-delay:.2s}
  .ai.v-spot{left:50%;top:calc(12vh / var(--zi));transform:translateX(-50%);width:min(720px,92vw);max-height:calc(76vh / var(--zi));background:transparent;box-shadow:none;overflow:visible;animation:aispot .26s var(--ease-out) both}
  @keyframes aispot{from{opacity:0;transform:translateX(-50%) scale(.97) translateY(-8px)}}
  .ai.v-spot .ai-bgclip{display:none}
  .ai.v-spot .ai-body{flex-direction:column-reverse}
  .ai-chip{display:none}
  .ai.v-spot .ai-chip{display:block;position:fixed;top:22px;left:calc(50% - var(--spotw)/2);z-index:3}
  .ai-chipbtn{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 13px;border:0;border-radius:999px;background:rgba(255,255,255,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(13,13,13,.07);font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;max-width:min(380px,40vw);transition:background .18s,box-shadow .18s,transform .18s var(--ease-out)}
  .ai-chipbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--text-2);flex:none}
  .ai-chipbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ai-chipbtn:hover,.ai-chipbtn.on{background:rgba(255,255,255,.96);box-shadow:0 12px 30px rgba(13,13,13,.10)}
  html[data-theme="dark"] .ai-chipbtn{background:rgba(22,22,26,.82)}
  .ai.v-spot .ai-head{display:none}
  .ai.v-spot .ai-head .s,.ai.v-spot .ai-head .x{display:none}
  .ai.v-spot .ai-head .tt{min-width:0}
  .ai.v-spot .ai-head .t{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-theme="dark"] .ai.v-spot .ai-head{background:rgba(22,22,26,.82)}
  .ai.v-spot .ai-pillwrap{padding:0 0 10px}
  .ai.v-spot .ai-pill{box-shadow:0 30px 80px rgba(13,13,13,.22)}
  .ai.v-spot .ai-thread{padding:4px 0 0;max-height:calc(52vh / var(--zi))}
  .ai.v-spot .ai-empty{margin:0 auto 6px;padding:8px}
  @media (prefers-reduced-motion:reduce){.ai,.ai-pill.away,.ai-pill.back,.ai-msg,.ai-prop,.ai-shim,.ai-bg i{animation:none!important}}
  /* the AI button is the one ink circle in the bar — the contrast says "this one talks" */
  .circ#aiBtn{background:var(--ink);color:var(--paper);box-shadow:var(--sh-raise)}
  .circ#aiBtn:hover{background:var(--ink);transform:translateY(-1px);box-shadow:var(--sh-hover)}
  /* prompt cards replace the suggestion pills */
  .ai-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;width:100%;max-width:340px}
  .ai-card{border:none;cursor:pointer;text-align:left;background:rgba(255,255,255,.66);backdrop-filter:blur(12px);border-radius:16px;padding:12px 12px 11px;display:flex;flex-direction:column;gap:8px;transition:transform .2s var(--ease-out),background .2s,box-shadow .2s;animation:rise .5s var(--ease-out) both}
  .ai-card:nth-child(2){animation-delay:.05s}.ai-card:nth-child(3){animation-delay:.1s}.ai-card:nth-child(4){animation-delay:.15s}
  .ai-card:hover{transform:translateY(-2px);background:var(--card);box-shadow:0 14px 34px rgba(13,13,13,.10)}
  /* dark mode: resting cards are dark glass, matching their selected state — never white slabs */
  html[data-theme="dark"] .ai-card{background:rgba(255,255,255,.07)}
  html[data-theme="dark"] .ai-card:hover{background:rgba(255,255,255,.13)}
  html[data-theme="dark"] .ai.v-spot .ai-card{background:rgba(255,255,255,.08)}
  .ai-card .g{width:28px;height:28px;border-radius:50%;background:var(--well);display:grid;place-items:center;color:var(--text-2);transition:background .2s,color .2s}
  .ai-card:hover .g{background:var(--accent);color:var(--accent-ink,#fff)}
  .ai-card .g svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .ai-card .t{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.25}
  .ai-card .s{font-size:11px;color:var(--text-2);line-height:1.35;margin-top:-4px}
  html[data-theme="dark"] .ai-card{background:rgba(255,255,255,.07)}
  html[data-theme="dark"] .ai-card:hover{background:rgba(255,255,255,.11)}
  /* ---------- Vetta AI: conversations rail + corner clipping ---------- */
  .ai.v-bloom{isolation:isolate;transform:translateZ(0)}
  .ai-bgclip{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
  .ai.v-bloom{transition:width .32s var(--ease-out)}
  .ai-new{border:none;cursor:pointer;border-radius:999px;background:var(--accent);color:var(--accent-ink,#fff);font:500 12.5px 'Outfit',sans-serif;padding:10px 14px;display:flex;align-items:center;gap:8px;transition:transform .18s var(--ease-out),box-shadow .18s;margin:0 4px}
  .ai-new:hover{transform:translateY(-1px);box-shadow:var(--sh-raise)}
  .ai-new svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .ai-search{margin:10px 4px 4px;background:rgba(255,255,255,.7);border:none;border-radius:999px;padding:8px 13px;font:400 12px 'Outfit',sans-serif;color:var(--text);outline:none}
  .ai-search::placeholder{color:var(--muted)}
  .ai-search:focus{box-shadow:0 0 0 1.5px var(--accent)}
  html[data-theme="dark"] .ai-search{background:rgba(255,255,255,.08)}
  .ai-rsec{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--muted);padding:12px 10px 5px}
  .ai-chat{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;cursor:pointer;transition:background .18s;position:relative}
  .ai-chat:hover{background:rgba(255,255,255,.55)}
  .ai-chat.on{background:var(--card)}
  html[data-theme="dark"] .ai-chat:hover{background:rgba(255,255,255,.07)}html[data-theme="dark"] .ai-chat.on{background:rgba(255,255,255,.1)}
  .ai-chat .t{flex:1;min-width:0;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ai-chat .pin{width:11px;height:11px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .ai-chat .acts{display:none;gap:1px;flex:none}
  .ai-chat:hover .acts,.ai-chat.on .acts{display:inline-flex}
  .ai-chat:hover .t,.ai-chat.on .t{max-width:calc(100% - 70px)}
  .ai-chat .acts button{border:none;background:transparent;width:22px;height:20px;border-radius:7px;cursor:pointer;color:var(--muted);font-size:12px;line-height:1;padding:0}
  .ai-chat .acts button:hover{background:var(--well-2);color:var(--text)}
  .ai-chat .acts button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .ai-rnone{font-size:11.5px;color:var(--muted);padding:10px 12px;line-height:1.5}
  .ai-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
  .ai-head .railbtn{border:none;background:transparent;width:32px;height:32px;border-radius:10px;cursor:pointer;color:var(--text-2);display:grid;place-items:center;margin-right:2px;transition:background .18s,color .18s}
  .ai-head .railbtn:hover{background:rgba(255,255,255,.6);color:var(--text)}
  html[data-theme="dark"] .ai-head .railbtn:hover{background:rgba(255,255,255,.1)}
  .ai-head .railbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .ai-head .t input{border:none;background:transparent;font:600 14px 'Outfit',sans-serif;color:var(--text);outline:none;padding:0;width:100%;min-width:60px}
  .ai-head .t input:focus{background:rgba(255,255,255,.6);border-radius:6px;padding:0 6px;margin:0 -6px;width:calc(100% + 12px)}
  /* ---------- Vetta AI — history concepts (rail · drawer · menu · strip · stack) + the quieter header ---------- */
  .ai-main{position:relative}
  .ai-head .tt{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
  /* rail, refined */
  .ai-newq{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;cursor:pointer;font:500 12.5px 'Outfit',sans-serif;color:var(--text);background:rgba(255,255,255,.62);margin:0 2px;transition:background .18s,transform .18s var(--ease-out)}
  .ai-newq:hover{background:var(--card);transform:translateY(-1px)}
  .ai-newq svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  html[data-theme="dark"] .ai-newq{background:rgba(255,255,255,.08)}
  .ai-search{margin:8px 2px 2px}
  .ai-chat{flex-direction:column;align-items:stretch;gap:1px;padding:8px 10px 7px}
  .ai-chat .r1{display:flex;align-items:center;gap:8px;min-width:0}
  .ai-chat .t{font-weight:500}
  .ai-chat .tm{font-size:10.5px;color:var(--faint);margin-left:auto;flex:none}
  .ai-chat .sn{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ai-chat:hover .tm,.ai-chat.on .tm{display:none}
  /* drawer */
  .ai-csec{font-size:9.5px;letter-spacing:.2px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--muted);padding:10px 4px 2px}
  /* menu */
  /* strip */
  /* stack */
  .ai-thread,.ai-pillwrap{transition:transform .4s var(--ease-out),opacity .4s var(--ease-out),filter .4s var(--ease-out)}
  /* Spotlight at the bottom: the pill anchors to the floor, the thread rises above it */
  .ai.v-spot{--spotw:min(860px,92vw);top:auto;bottom:44px;left:calc(50% - var(--spotw)/2);transform:none;width:var(--spotw);max-height:calc(80vh / var(--zi));animation:aispotfade .3s var(--ease-out) both}
  @keyframes aispotfade{from{opacity:0}}
  @keyframes aispotrise{from{transform:translateY(14px) scale(.985)}}
  .ai.v-spot .ai-body{animation:aispotrise .3s var(--ease-out) both}
  @keyframes aispotb{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.985)}}
  .ai.v-spot .ai-body{flex-direction:column;justify-content:flex-end}
  .ai.v-spot .ai-thread{padding:0 0 10px;max-height:calc(58vh / var(--zi));flex:0 1 auto}
  .ai.v-spot .ai-empty{margin:0 auto 14px;padding:0 4px;max-width:none;width:100%;font-size:13.5px}
  .ai.v-spot .ai-empty b,.ai.v-spot .ai-empty>span{display:none}
  .ai.v-spot .ai-cards{grid-template-columns:repeat(4,1fr);max-width:none;margin-top:16px;gap:10px}
  .ai.v-spot .ai-card{background:rgba(255,255,255,.78);padding:14px 14px 13px;gap:10px}
  .ai.v-spot .ai-pillwrap{padding:0;position:relative}
  /* spotlight: deterministic sizing — the thread is as tall as its content, capped, and scrolls */
  .ai.v-spot .ai-body{height:auto;min-height:0}
  .ai.v-spot .ai-thread{flex:none;height:auto;max-height:calc(58vh / var(--zi));overflow:auto;padding:56px 0 26px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 64px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 64px,#000 calc(100% - 22px),transparent 100%)}
  .ai.v-spot .ai-pillwrap{flex:none}
  /* bloom drawer: a solid surface; the thread and pill step back while it's open */
/* ═════ RESPONSIVE LAYOUT PROGRAMS — one system, three compositions (wide / medium / compact).
   The design system never changes across programs: same tokens, primitives, type scale, motion,
   accent budget. Only composition, density, navigation form, and target size adapt.

/* the OS buttons inside the surface — its .btn and .ghost, not the page's */
.ai .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;border:none;cursor:pointer;background:var(--ink);color:var(--paper);font:500 13.5px/1 'Outfit',sans-serif;box-shadow:0 10px 22px rgba(16,17,20,.16),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .2s ease,box-shadow .2s ease}
.ai .btn:hover{transform:translateY(-1px)}
.ai .btn.qbtn{padding:10px 17px}
.ai .ghost{border:none;cursor:pointer;background:var(--raise);box-shadow:var(--sh-raise);border-radius:999px;padding:12px 20px;font:500 13px 'Outfit',sans-serif;color:var(--text)}
.ai .ai-ta[readonly]{cursor:default}
/* preview only: a visitor cannot type, so the prompt cards come back under each answer; "Not now" leaves it a draft */
.ai-more .ai-cards{max-width:none;margin-top:4px}
.ai.v-spot .ai-more .ai-cards{grid-template-columns:repeat(4,1fr)}
.ai-prop.left .acts .btn,.ai-prop.left .acts .ghost{display:none}
.ai-prop.left .ok{display:inline-flex;color:var(--muted)}
.ai-prop.left .ok svg{display:none}
/* a website has no compact takeover: on a phone Bloom keeps a margin and Spotlight goes full width */
@media (max-width:600px){
  .ai.v-bloom{top:8px;right:8px;bottom:8px;left:8px;width:auto}
  .ai.v-spot{--spotw:calc(100vw - 16px);bottom:16px}
  .ai.v-spot .ai-cards,.ai.v-spot .ai-more .ai-cards{grid-template-columns:1fr 1fr}
}

/* ---------- Start: the home call-to-action and the /start page ---------- */
.startcta{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(26px,4vw,52px);border-radius:32px}
.startcta>div{display:grid;gap:12px;max-width:640px}
.btn.big{padding:18px 30px;font-size:15px}
.page-start{padding-top:clamp(128px,16vh,180px)}
.start-h{font-size:clamp(38px,5.2vw,68px)}
.startgrid{display:grid;grid-template-columns:7fr 5fr;gap:14px;margin-top:clamp(32px,4vw,52px);align-items:start}
.formcard{padding:clamp(20px,3vw,36px);border-radius:30px}
.next{display:grid;gap:14px}
.nextcard{padding:22px;display:grid;gap:10px;border-radius:26px}
.nextcard .eyebrow{margin-bottom:4px}
.nstep{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:13px 15px;border-radius:16px;background:var(--well)}
.nstep .n{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted);padding-top:3px;font-variant-numeric:tabular-nums}
.nstep b{font-weight:600;font-size:14.5px}
.nstep p{font-size:13px;color:var(--text-2);line-height:1.5;margin-top:2px}
.nextcard .fitrow{padding:12px 15px;border-radius:16px;background:var(--well);font-size:14px;line-height:1.45}
@media (max-width:860px){.startgrid{grid-template-columns:1fr}}
@media (max-width:760px){.startcta{flex-direction:column;align-items:flex-start}}

/* ---------- copy v2 additions: the hero eyebrow, the desk's label, the Customers tab ---------- */
.hero-copy .eyebrow{margin-bottom:-6px}
.hero-copy h1{max-width:13em}
.desk-cap{margin:14px auto 0;text-align:center;font-size:12px;color:var(--muted)}
.tagib{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;background:rgba(var(--ik),.07);font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--text-2);vertical-align:1px}
.rc .av{width:30px;height:30px;border-radius:50%;background:rgba(var(--ik),.08);display:grid;place-items:center;font-size:10.5px;font-weight:600;color:var(--text-2);flex:none}
.rc .mem{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:9.5px;font-weight:600;letter-spacing:.04em;vertical-align:1px}
.rc .amt{font-weight:600;font-variant-numeric:tabular-nums}
.cmh{display:flex;align-items:center;justify-content:space-between}
.cmh .tagib{margin:0}
.cmt{font-size:15px;font-weight:600;margin-top:2px}
.cma{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.btn.xs{padding:9px 15px;font-size:12px}

/* ================================================================
   v2 (2026-09-24): the process, shown. Show what we do, never what we can do for you.
   ================================================================ */
/* ---------- the hero map: a business as one system (home.js builds the SVG per width) ---------- */
.hmap{position:relative;margin:clamp(36px,5vw,64px) auto 0;max-width:1100px}
.hmap svg{display:block;width:100%;height:auto;overflow:visible}
.m-link{fill:none;stroke:rgba(var(--ik),.14);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1}
.hero.in .m-link{animation:route 1.4s var(--ease) .5s forwards}
.m-dots{opacity:0;transition:opacity .8s var(--ease) 1.6s}
.hero.in .m-dots{opacity:1}
.m-dot{fill:var(--ink)}
.m-node{opacity:0}
.hero.in .m-node{animation:mnode .7s var(--ease) both;animation-delay:calc(var(--k) * .06s + .25s)}
@keyframes mnode{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.m-node rect{fill:var(--surface);filter:drop-shadow(0 1px 2px rgba(25,35,70,.06)) drop-shadow(0 6px 16px rgba(25,35,70,.09))}
html[data-theme="dark"] .m-node rect{filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.m-node text{fill:var(--text);font-family:'Outfit',system-ui,sans-serif;font-weight:500}
.m-node circle{fill:var(--ink)}
.m-core rect{fill:var(--ink)}
.m-core text{fill:var(--paper);font-family:'Outfit',system-ui,sans-serif;font-weight:600}
.m-core .sub{font-weight:600;letter-spacing:.2em;opacity:.55}
.m-ring{fill:none;stroke:rgba(var(--ik),.24);stroke-width:1.2;stroke-dasharray:2 7;animation:ringspin 60s linear infinite}
@keyframes ringspin{to{stroke-dashoffset:-900}}
.m-ringlab{fill:var(--muted);font-family:'Outfit',system-ui,sans-serif;font-weight:600;letter-spacing:.24em}
.m-pulse{fill:none;stroke:rgba(var(--ik),.5);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.hero.in .m-pulse{animation:mpulse 4.2s var(--ease) 2s infinite}
@keyframes mpulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}

/* ---------- How it works: six steps ---------- */
.proc>*{min-width:0}
.proc{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(64px,9vw,128px)}
.proc-copy{display:grid;gap:14px;align-content:center}
.proc-copy .pn{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.proc-copy h3{font-size:clamp(28px,2.8vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.proc-copy p{font-size:16.5px;line-height:1.6;color:var(--text-2);max-width:46ch;text-wrap:pretty}
.pchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.pchips span{padding:7px 12px;border-radius:999px;background:var(--well);font-size:12px;font-weight:500;color:var(--text-2)}
.fig{margin:0;border-radius:28px;padding:12px;position:relative}
.figbox{position:relative;border-radius:20px;background:var(--vis);min-height:380px;overflow:hidden}
.proc-wide{grid-template-columns:1fr;align-items:start}
.proc-wide .proc-copy{grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,64px);align-items:start}
.proc-wide .proc-copy>*{grid-column:1}
.proc-wide .proc-copy .tool{grid-column:2;grid-row:1 / span 4;align-self:center}
.proc-wide .desk{margin-top:8px}
.proc .tool{border-radius:22px;padding:20px 22px;font-size:13px;line-height:1.55;background:rgba(var(--sk),var(--g-tint))}
.proc .tool code{display:block;font:500 13px ui-monospace,SFMono-Regular,Menlo,monospace;margin-bottom:10px;color:var(--text)}
.proc .tool .f{display:grid;grid-template-columns:78px 1fr;gap:6px 12px}
.proc .tool .f b{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.proc .tool .f span{color:var(--text-2)}
.desk .bars i{transform:scaleY(.04)}
.desk.on .bars i{transform:scaleY(1)}

/* 01 + 02 — the flow of a business (home.js builds it; wires are measured) */
.bflow{position:relative;padding:28px 22px 22px;display:grid;gap:22px;min-height:380px}
.frow{position:relative;z-index:1;display:grid;gap:14px;align-items:start}
.f-main{grid-template-columns:repeat(5,1fr)}
.f-res{grid-template-columns:repeat(5,1fr)}
.f-res .fn:nth-of-type(1){grid-column:2}
.frlab{position:absolute;left:0;top:-18px;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.fn{display:grid;gap:8px;justify-items:center}
.fnp{padding:10px 8px;border-radius:14px;background:var(--surface);box-shadow:var(--sh-raise);font-size:13px;font-weight:600;width:100%;text-align:center;opacity:0}
.f-res .fnp{background:rgba(var(--sk),.6);box-shadow:none;font-weight:500;color:var(--text-2)}
.fg{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface);font-size:11px;font-weight:500;color:var(--text-2);white-space:nowrap;opacity:0;transform:scale(.6)}
.fg i{width:7px;height:7px;border-radius:50%;background:var(--warn);position:relative;flex:none}
.fg i:after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1.5px var(--warn);opacity:0}
.play .fg i:after{animation:gping 1.8s var(--ease) infinite;animation-delay:calc(var(--k) * .15s + 1.6s)}
@keyframes gping{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
.bflow[data-mode="install"] .fg{background:var(--ink);color:var(--paper)}
.bflow[data-mode="install"] .fg i{background:var(--good)}
.bflow[data-mode="install"] .fg i:after{display:none}
.play .fnp{animation:mnode .55s var(--ease) both;animation-delay:calc(var(--k) * .07s)}
.play .fg{animation:gpop .5s var(--ease) both;animation-delay:calc(var(--k) * .16s + 1s)}
.bflow[data-mode="install"].play .fnp{animation-duration:.3s}
.bflow[data-mode="install"].play .fg{animation-delay:calc(var(--k) * .14s + .4s)}
@keyframes gpop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:none}}
.fbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border-radius:14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:0}
.bflow[data-mode="map"] .fbar{background:rgba(var(--ik),.05);color:var(--text-2)}
.bflow[data-mode="map"] .fbar i{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.bflow[data-mode="install"] .fbar{background:var(--ink);color:var(--paper)}
.play .fbar{animation:rin .5s var(--ease) both;animation-delay:2.2s}
.bflow[data-mode="install"].play .fbar{animation-delay:1.3s}
.fwires{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.fw{fill:none;stroke:rgba(var(--ik),.2);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1}
.play .fw{animation:route 1s var(--ease) forwards;animation-delay:calc(var(--k) * .08s + .3s)}
.fw.down{stroke:rgba(var(--ik),.28)}
.bflow[data-mode="install"].play .fw.down{animation-delay:calc(var(--k) * .12s + 1.1s)}
.fdots{opacity:0;transition:opacity .6s}
.play .fdots{opacity:1;transition-delay:1.9s}
.fdot{fill:var(--ink)}
/* the receipt, read and filed */
.rrow{display:flex;align-items:center;gap:18px;margin-top:12px;padding:2px 6px 2px 10px}
.rrow p{flex:1;font-size:13px;line-height:1.5;color:var(--text-2)}
.rcpt{position:relative;z-index:2;width:250px;flex:none;padding:12px 14px;border-radius:16px;background:var(--surface);box-shadow:var(--sh-hover);font-size:12px;display:grid;gap:6px;opacity:0;transform:translateY(8px)}
.rcpt.play{animation:rin .5s var(--ease) 2.4s both}
.rph{display:grid;gap:5px;padding:10px;border-radius:10px;background:rgba(var(--ik),.05);margin-bottom:4px}
.rph i{height:6px;border-radius:3px;background:rgba(var(--ik),.14)}
.rph i:nth-child(2){width:70%}.rph i:nth-child(3){width:84%}.rph i:nth-child(4){width:50%}
.rli{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;opacity:0}
.rli span{color:var(--text-2)}
.rcpt.play .rli{animation:rin .4s var(--ease) both}
.rcpt.play .rli:nth-of-type(2){animation-delay:2.9s}.rcpt.play .rli:nth-of-type(3){animation-delay:3.1s}.rcpt.play .rli:nth-of-type(4){animation-delay:3.3s}
.rto{justify-self:start;margin-top:4px;padding:5px 10px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:500;opacity:0}
.rcpt.play .rto{animation:gpop .45s var(--ease) 3.7s both}

/* 03 — one record */
.rec{display:grid;place-items:center;padding:26px}
.jcard{width:min(440px,100%);background:var(--surface);border-radius:22px;box-shadow:var(--sh-card);padding:16px;display:grid;gap:7px}
.jhd{display:flex;align-items:baseline;gap:10px;margin:0 2px 6px;flex-wrap:wrap}
.jhd b{font-size:15px;font-weight:600}
.jhd span{font-size:12px;color:var(--text-2)}
.jr{display:grid;grid-template-columns:78px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--well);font-size:12.5px;opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr))}
.jr .jt{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.jr span:nth-child(2){color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr b{font-weight:600;font-variant-numeric:tabular-nums}
.play .jr{animation:jin .8s var(--ease) both;animation-delay:calc(var(--k) * .16s + .2s)}
@keyframes jin{to{opacity:1;transform:none}}
.jsum{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;opacity:0}
.jsum div{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--ink);color:var(--paper)}
.jsum span{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.jsum b{font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.play .jsum{animation:rin .55s var(--ease) 1.6s both}

/* 04 — the numbers */
.nums{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto auto;gap:10px;padding:12px}
.nc{background:var(--surface);border-radius:18px;padding:14px;display:grid;gap:10px;align-content:start;box-shadow:var(--sh-raise)}
.nc h4{margin:0;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ncA{grid-row:span 2}
.nfoot{font-size:11px;color:var(--text-2)}
.sortbars{position:relative;height:calc(12 * 24px)}
.sb{position:absolute;left:0;right:0;height:18px;display:flex;align-items:center;gap:8px;transition:top .9s var(--ease)}
.sb i{height:100%;border-radius:5px;background:rgba(var(--ik),.13);width:0;transition:width .8s var(--ease),background .4s}
.sb span{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}
.sb.lo i{background:var(--ink)}
.sb.lo span{color:var(--text);font-weight:600}
.mach{display:grid;gap:8px;position:relative}
.mr{display:grid;grid-template-columns:86px 1fr 40px;gap:8px;align-items:center;font-size:11px}
.mr .t{position:relative;height:14px;border-radius:4px;background:rgba(var(--ik),.05)}
.mr .t i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:rgba(var(--ik),.16);transition:width .9s var(--ease)}
.mr .t:after{content:"";position:absolute;left:25%;top:-3px;bottom:-3px;width:1.5px;background:rgba(var(--ik),.35)}
.mr.lo .t i{background:var(--ink)}
.mr b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.mr span{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl{display:grid;gap:4px}
.pl div{display:flex;justify-content:space-between;padding:6px 8px;border-radius:9px;font-size:11.5px;font-variant-numeric:tabular-nums;opacity:0}
.pl div span{color:var(--text-2)}
.pl div b{font-weight:600}
.pl .net{background:var(--well)}
.play .pl div{animation:rin .4s var(--ease) both;animation-delay:calc(var(--k) * .22s + 1.2s)}

/* 06 — after hours */
.night{background:linear-gradient(180deg,rgba(var(--ik),.09),rgba(var(--ik),.02));min-height:400px}
.nt-track{position:absolute;left:28px;right:28px;bottom:56px;height:2px;border-radius:2px;background:rgba(var(--ik),.14)}
.nt-track span{position:absolute;top:12px;transform:translateX(-4px);font-size:10.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.nt-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--ink)}
.nt-now{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px rgba(var(--ik),.12)}
.play .nt-fill{animation:ntfill 5s linear .3s both}
.play .nt-now{animation:ntnow 5s linear .3s both}
@keyframes ntfill{from{width:0}to{width:100%}}
@keyframes ntnow{from{left:0}to{left:100%}}
.nt-ev{position:absolute;left:var(--x);bottom:96px;transform:translate(-50%,10px);width:190px;padding:11px 13px;border-radius:16px;background:var(--surface);box-shadow:var(--sh-card);display:grid;gap:2px;font-size:12px;opacity:0}
.nt-ev.lo{bottom:176px}
.nt-ev:after{content:"";position:absolute;left:50%;bottom:-40px;width:1.5px;height:40px;background:rgba(var(--ik),.2)}
.nt-ev.lo:after{bottom:-120px;height:120px}
.nt-ev small{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.nt-ev b{font-size:13px;font-weight:600}
.nt-ev span{color:var(--text-2)}
.play .nt-ev{animation:ntev .5s var(--ease) both}
.play .nt-ev:nth-of-type(1){animation-delay:1.85s}.play .nt-ev:nth-of-type(2){animation-delay:3.15s}.play .nt-ev:nth-of-type(3){animation-delay:4.3s}
@keyframes ntev{to{opacity:1;transform:translate(-50%,0)}}
.nt-desk{position:absolute;left:24px;top:22px;display:grid;gap:3px;max-width:300px;padding:12px 15px;border-radius:16px;background:var(--ink);color:var(--paper);font-size:12px;opacity:0}
.nt-desk span{opacity:.72}
.play .nt-desk{animation:rin .5s var(--ease) 5.5s both}
.facts3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.fct{padding:20px 22px;display:grid;gap:8px;align-content:start}
.fct b{font-size:30px;font-weight:500;letter-spacing:-.02em}
.fct p{font-size:14px;line-height:1.5;color:var(--text)}
.fct small{font-size:11px;line-height:1.45;color:var(--muted)}

/* the bulk yard — a design study */
.yard{position:relative;z-index:1;display:grid;grid-template-columns:1fr 210px;grid-template-rows:1fr auto;gap:10px;padding:14px;height:100%;min-height:420px}
.bays{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-content:start}
.bay{position:relative;border-radius:14px;background:var(--surface);box-shadow:var(--sh-raise);padding:10px 10px 8px;display:grid;gap:6px;overflow:hidden}
.bay .nm{font-size:11px;font-weight:600;line-height:1.2;min-height:26px}
.bay .pile{position:relative;height:70px;border-radius:9px;background:rgba(var(--ik),.05);overflow:hidden}
.bay .pile i{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(var(--ik),.2);border-radius:9px 9px 0 0;transition:height .8s var(--ease)}
.bay .pile:after{content:"";position:absolute;left:0;right:0;bottom:var(--min);border-top:1.5px dashed rgba(var(--ik),.3)}
.bay .v{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
.bay.low .pile i{background:var(--warn)}
.bay.low .v{color:var(--bad)}
.bay.act{box-shadow:0 0 0 1.5px var(--ink),var(--sh-raise)}
.ylane{grid-column:1;position:relative;height:40px;border-radius:12px;background:rgba(var(--ik),.05)}
.ldr{position:absolute;top:50%;left:6%;width:40px;height:26px;margin:-13px 0 0 -20px;color:var(--ink);transition:left 1.1s var(--ease)}
.ldr svg{width:40px;height:26px}
.scale{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.yside{grid-column:2;grid-row:1 / span 2;display:grid;gap:10px;align-content:start}
.yq,.yalert{background:var(--surface);border-radius:16px;box-shadow:var(--sh-raise);padding:12px;display:grid;gap:7px}
.yq h4,.yalert h4{margin:0;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.yqr{display:grid;gap:5px}
.yqr div{padding:7px 9px;border-radius:10px;background:var(--well);font-size:11.5px;display:grid;gap:1px;transition:opacity .4s,transform .4s}
.yqr div small{color:var(--text-2);font-size:10.5px}
.yqr div.now{background:var(--ink);color:var(--paper)}
.yqr div.now small{color:var(--paper);opacity:.7}
.yqr div.done{opacity:.5}
.yqr div.done small:after{content:" · loaded"}
.yalert{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.yalert.on{opacity:1;transform:none}
.yalert b{font-size:13px}
.yalert .btn{cursor:pointer}

@media (max-width:1000px){.facts3{grid-template-columns:1fr}}
@media (max-width:860px){
  .proc{grid-template-columns:1fr}
  .proc-wide .proc-copy{grid-template-columns:1fr}
  .proc-wide .proc-copy .tool{grid-column:1;grid-row:auto}
  .yard{grid-template-columns:1fr}
  .yside{grid-column:1;grid-row:auto;grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .f-main{grid-template-columns:1fr;gap:10px}
  .f-main .fn{grid-template-columns:1fr 128px;align-items:center;justify-items:stretch;gap:10px}
  .f-main .fg{justify-self:start}
  .f-res{grid-template-columns:repeat(3,1fr);margin-top:10px}
  .f-res .fn:nth-of-type(1){grid-column:auto}
  .f-res .fg{white-space:normal;text-align:center;font-size:10px;padding:5px 8px}
  .bflow{padding:28px 14px 16px}
  .nums{grid-template-columns:1fr}
  .ncA{grid-row:auto}
  .rrow{flex-direction:column;align-items:stretch}
  .rcpt{width:auto}
  .nt-ev{width:150px;font-size:11px}
  .nt-ev:nth-of-type(1){left:26%}.nt-ev:nth-of-type(3){left:74%}
  .bays{grid-template-columns:repeat(3,1fr)}
  .yside{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .m-link,.fw{stroke-dashoffset:0!important;animation:none!important}
  .m-node,.fnp,.fg,.fbar,.rcpt,.rli,.rto,.jr,.jsum,.pl div,.nt-ev,.nt-desk{opacity:1!important;animation:none!important;transform:none!important}
  .m-dots,.fdots{opacity:0!important}
  .nt-fill{width:100%!important;animation:none!important}.nt-now{left:100%!important;animation:none!important}
}

/* ================================================================
   v3 (2026-09-24): the three layers as the hero, charts, the dial, the isometric yard
   ================================================================ */
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,40px);align-items:center}
.hc-left{justify-items:start;text-align:left}
.hc-left h1{max-width:10.5em;font-size:clamp(40px,5.2vw,74px)}
.hc-left .lead{max-width:34em}
.hc-left .ctas{justify-content:flex-start}
.hstack{position:relative;height:clamp(520px,44vw,640px)}
.hs-plane{position:absolute;transform-origin:center;will-change:transform}
.hs-plane[data-p="1"]{background:rgba(var(--sk),calc(var(--g-tint) * .8))}
.hs-ai{background:rgba(var(--ik),.05)}
html[data-theme="dark"] .hs-ai{background:rgba(255,255,255,.05)}
.hs-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hs-tiles{position:absolute;inset:0}
.hs-tile{position:absolute;display:grid;align-content:center;justify-items:center;gap:.25em;background:rgba(var(--sk),.62);box-shadow:0 1px 2px rgba(25,35,70,.06),0 4px 12px rgba(25,35,70,.06);color:var(--text);transition:transform .28s var(--ease),background .28s,box-shadow .28s;text-align:center;line-height:1.1}
html[data-theme="dark"] .hs-tile{background:rgba(255,255,255,.06);box-shadow:none}
.hs-tile b{font-weight:600;font-size:1em}
.hs-tile em{font-style:normal;font-size:.9em;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums}
.hs-tile small{font-size:.62em;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.hs-tile.core{background:var(--ink);color:var(--paper)}
.hs-tile.core small{color:var(--paper)}
.hs-tile.hit{transform:scale(1.08);background:var(--surface);box-shadow:0 6px 18px rgba(25,35,70,.14)}
.hs-tile.core.hit{background:var(--ink);box-shadow:0 0 0 4px rgba(var(--ik),.14)}
.hs-pill{position:absolute;left:50%;top:50%;width:62%;height:15%;transform:translate(-50%,-50%);border-radius:999px;background:rgba(var(--sk),.82);box-shadow:var(--sh-raise);display:flex;align-items:center;justify-content:flex-end;padding:0 3%}
.hs-pill i{height:70%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.hs-lab{position:absolute;transform:translateY(-50%);display:grid;gap:3px;width:190px;padding-left:28px;font-size:12px;line-height:1.4;opacity:0;transition:opacity .6s var(--ease)}
.hs-lab:before{content:"";position:absolute;left:0;top:50%;width:20px;height:1.5px;background:rgba(var(--ik),.3)}
.hs-lab b{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.hs-lab span{color:var(--text-2)}
.hero.in .hs-lab{opacity:1;transition-delay:1.2s}
.hs-card{position:absolute;width:240px;padding:13px 15px;border-radius:18px;display:grid;gap:3px;opacity:0;transition:opacity .6s var(--ease)}
.hero.in .hs-card{opacity:1;transition-delay:1.6s}
.hs-card small{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hs-card b{font-size:13.5px;font-weight:600;line-height:1.35}
.hs-card span{font-size:12px;color:var(--text-2)}
.hs-card.swap b,.hs-card.swap span{animation:nsettle .4s var(--ease) both}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.hc-left{justify-items:center;text-align:center}.hc-left .ctas{justify-content:center}.hstack{height:560px}}
@media (max-width:560px){.hs-lab{display:none}.hstack{height:430px}.hs-card{width:min(260px,90%)}}

/* 01 — the scanner */
.scan{position:absolute;top:0;bottom:0;left:0;width:90px;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--ik),.07),transparent);opacity:0}
.play .scan{animation:scan 3.4s linear .5s 2 both}
@keyframes scan{0%{opacity:1;transform:translateX(-90px)}90%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--sw,640px)))}}
#figMap .play .fg,.play #figMap .fg{animation-delay:var(--gd,1s)}
#figMap .fg{--gd:1s}
.bflow[data-mode="map"].play .fg{animation-delay:var(--gd,1s)}
/* 02 — the tools count */
.fg em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;opacity:.7;margin-left:2px}
.fg.tick em{animation:tick .5s var(--ease)}
@keyframes tick{0%{opacity:1;transform:translateY(-3px)}100%{opacity:.7;transform:none}}
/* 03 — where the price goes */
.jbar{display:flex;gap:3px;height:12px;margin-top:8px;border-radius:6px;overflow:hidden}
.jbar i{display:block;height:100%;width:0;background:rgba(var(--ik),calc(.14 + var(--k) * .09));transition:width .9s var(--ease)}
.jbar i.mg{background:var(--good)}
.play .jbar i{width:var(--w);transition-delay:calc(var(--k) * .12s + 2s)}
.jleg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;color:var(--text-2);opacity:0}
.jleg i{display:inline-block;width:8px;height:8px;border-radius:2px;background:rgba(var(--ik),.25);margin-right:5px;vertical-align:-1px}
.jleg i.mg{background:var(--good)}
.play .jleg{animation:rin .5s var(--ease) 2.6s both}

/* 04 — the charts */
.nums2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.nums2 .ncS{grid-column:span 2}
.scat{width:100%;height:auto;display:block}
.sc-grid{stroke:rgba(var(--ik),.07);stroke-width:1}
.sc-lab{font:500 9.5px 'Outfit',sans-serif;fill:var(--muted)}
.sc-avg{stroke:rgba(var(--ik),.28);stroke-width:1.2;stroke-dasharray:4 4}
.sc-avg-l{font:500 9.5px 'Outfit',sans-serif;fill:var(--muted)}
.sc-cut{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1}
.sc-cut-l{font:600 10px 'Outfit',sans-serif;fill:var(--text);opacity:0}
.play .sc-cut{animation:route 1.2s var(--ease) 1.1s forwards}
.play .sc-cut-l{animation:nfade .5s 2s both}
.sc-pt{fill:rgba(var(--ik),.22);opacity:0;transform-box:fill-box;transform-origin:center;transition:fill .5s}
.play .sc-pt{animation:pop .45s var(--ease) both;animation-delay:calc(var(--k) * .035s + .2s)}
.play .sc-pt.low{fill:var(--ink);transition-delay:2.3s}
.sc-pt.low{stroke:rgba(var(--ik),0);stroke-width:6}
.play .sc-pt.low{animation:pop .45s var(--ease) both,lowring 2s ease-out 2.4s infinite;animation-delay:calc(var(--k) * .035s + .2s),2.4s}
@keyframes lowring{0%{stroke:rgba(var(--ik),.25);stroke-width:2}100%{stroke:rgba(var(--ik),0);stroke-width:16}}
.sc-tag{font:600 10px 'Outfit',sans-serif;fill:var(--text);opacity:0}
.play .sc-tag{animation:nfade .5s both;animation-delay:calc(var(--k) * .2s + 2.6s)}
.gauges{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.gg{display:grid;justify-items:center;gap:0;text-align:center}
.gg svg{width:100%;max-width:130px;height:auto;display:block}
.gg-bg{fill:none;stroke:rgba(var(--ik),.09);stroke-width:9;stroke-linecap:round}
.gg-val{fill:none;stroke:rgba(var(--ik),.3);stroke-width:9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.gg.low .gg-val{stroke:var(--warn)}
.play .gg-val{animation:route 1.2s var(--ease) .5s forwards}
.gg-one{stroke:var(--ink);stroke-width:2}
.gg-nd{transform-box:view-box;transform-origin:60px 64px;transform:rotate(0deg)}
.play .gg-nd{animation:needle 1.2s var(--ease) .5s forwards}
@keyframes needle{to{transform:rotate(var(--a))}}
.gg-needle{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.gg-hub{fill:var(--ink)}
.gg b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:-4px}
.gg.low b{color:var(--warn)}
.gg span{font-size:10.5px;color:var(--text-2)}
.wfall{width:100%;height:auto;display:block}
.wf-base{stroke:rgba(var(--ik),.15)}
.wf-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.wf-bar.up{fill:rgba(var(--ik),.22)}
.wf-bar.down{fill:rgba(var(--ik),.1);transform-origin:top}
.wf-bar.net{fill:var(--ink)}
.play .wf-bar{animation:grow .7s var(--ease) forwards;animation-delay:calc(var(--k) * .45s + .4s)}
@keyframes grow{to{transform:none}}
.wf-link{stroke:rgba(var(--ik),.25);stroke-dasharray:3 3;opacity:0}
.play .wf-link{animation:nfade .3s both;animation-delay:calc(var(--k) * .45s + .9s)}
.wf-v{font:600 10.5px 'Outfit',sans-serif;fill:var(--text);opacity:0}
.play .wf-v{animation:nfade .4s both;animation-delay:calc(var(--k) * .45s + .9s)}
.wf-l{font:500 9.5px 'Outfit',sans-serif;fill:var(--muted)}

/* 06 — the dial */
.dialbox{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:8px;padding:14px 18px 14px 6px}
.dial{width:100%;height:auto;display:block}
.dl-ring{fill:rgba(var(--sk),.5);stroke:rgba(var(--ik),.1);stroke-width:1}
.dl-night{fill:none;stroke:rgba(var(--ik),.12);stroke-width:22}
.dl-tick{stroke:rgba(var(--ik),.22);stroke-width:1}
.dl-tick.big{stroke:rgba(var(--ik),.45);stroke-width:1.6}
.dl-hl{font:600 10px 'Outfit',sans-serif;fill:var(--muted);letter-spacing:.06em}
.dl-cl{font:600 9.5px 'Outfit',sans-serif;fill:var(--text-2);letter-spacing:.12em;text-transform:uppercase}
.dl-sweep{fill:rgba(var(--ik),.06)}
.dl-hand{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.dl-hub{fill:var(--ink)}
.dl-ev .dl-dot{fill:rgba(var(--ik),.25);transition:fill .3s}
.dl-ev .dl-halo{fill:rgba(var(--ik),.0);transform-box:fill-box;transform-origin:center}
.dl-ev.on .dl-dot{fill:var(--ink)}
.dl-ev.on .dl-halo{animation:halo 1.6s ease-out infinite}
@keyframes halo{0%{fill:rgba(var(--ik),.22);transform:scale(.5)}100%{fill:rgba(var(--ik),0);transform:scale(1.6)}}
.dl-count{font:500 44px 'Outfit',sans-serif;fill:var(--text);letter-spacing:-.02em}
.dl-sub{font:500 11px 'Outfit',sans-serif;fill:var(--text-2)}
.dl-list{display:grid;gap:8px}
.dl-item{padding:11px 13px;border-radius:14px;background:var(--surface);box-shadow:var(--sh-raise);display:grid;gap:2px;font-size:12px;opacity:.28;transform:translateX(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.dl-item.on{opacity:1;transform:none}
.dl-item small{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.dl-item b{font-size:13px}
.dl-item span{color:var(--text-2)}
.dl-item.dl-desk{background:var(--ink);color:var(--paper)}
.dl-item.dl-desk small,.dl-item.dl-desk span{color:var(--paper);opacity:.7}

/* the yard, isometric */
.yard2{position:relative;display:grid;grid-template-columns:1fr;gap:10px;padding:12px}
.ycv{width:100%;aspect-ratio:2.35/1;display:block}
.yhud{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;align-items:start}
.ystock,.yevent{background:var(--surface);border-radius:16px;box-shadow:var(--sh-raise);padding:12px;display:grid;gap:7px}
.ystock h4,.yevent h4{margin:0;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ys{display:grid;grid-template-columns:1fr 54px 22px;gap:6px;align-items:center;font-size:10.5px}
.ys span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.ys i{position:relative;height:6px;border-radius:3px;background:rgba(var(--ik),.08)}
.ys i b{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:rgba(var(--ik),.35);transition:width .5s var(--ease)}
.ys i em{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:rgba(var(--ik),.45)}
.ys strong{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.ys.low span,.ys.low strong{color:var(--warn)}
.ys.low i b{background:var(--warn)}
.yevent{opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.yevent.on{opacity:1;transform:none}
.yevent b{font-size:13px}
@media (max-width:860px){.nums2{grid-template-columns:1fr}.nums2 .ncS{grid-column:auto}.dialbox{grid-template-columns:1fr;padding:12px}}
@media (max-width:560px){.yhud{grid-template-columns:1fr}.ycv{aspect-ratio:1.6/1}}
@media (prefers-reduced-motion:reduce){.sc-cut,.gg-val{stroke-dashoffset:0!important;animation:none!important}.sc-pt,.sc-tag,.sc-cut-l,.wf-v,.wf-link,.jleg{opacity:1!important;animation:none!important}.wf-bar{transform:none!important;animation:none!important}.gg-nd{transform:rotate(var(--a))!important;animation:none!important}.jbar i{width:var(--w)!important}}

/* ---------- Vetta AI: the close (2026-10-23 — Cole: "it kind of just disappears"). The site's own until Cole picks a
   letter; the pick then goes back to the OS renderer and MASTER §12 so both surfaces close the same way. Leaving moves
   ease IN (they speed up as they go); arriving moves ease out. ---------- */
html.ai-open.ai-closing .ai-scrim{opacity:0;pointer-events:none;backdrop-filter:blur(0) saturate(1);background:rgba(18,19,24,0);transition:opacity .36s var(--ease-out) .08s,backdrop-filter .36s var(--ease-out),background .36s}
html.ai-closing .ai{pointer-events:none}
/* A · fold home: the words go first, then the card closes down to a circle the size of the ink button, exactly over it
   (site.js measures both), and the button catches it */
html.ai-closing .ai.v-bloom[data-x="a"]{animation:aifold .5s cubic-bezier(.5,0,.25,1) both}
@keyframes aifold{0%{clip-path:inset(-40px round 64px);opacity:1}86%{opacity:1}100%{clip-path:inset(var(--ft) var(--fr) var(--fb) var(--fl) round 50%);opacity:0}}
html.ai-closing .ai.v-bloom[data-x="a"] .ai-body{animation:aibodyout .17s ease-in both}
@keyframes aibodyout{to{opacity:0;transform:scale(.97)}}
html.ai-closing .ai.v-spot[data-x="a"] .ai-pill{animation:aiaway .42s cubic-bezier(.5,0,.75,0) both}
html.ai-closing .ai.v-spot[data-x="a"] .ai-thread{animation:aisink .34s cubic-bezier(.5,0,.75,0) both}
@keyframes aisink{to{opacity:0;transform:translateY(18px) scale(.98)}}
html.ai-closing .ai.v-spot[data-x="a"] .ai-chip,html.ai-closing .ai.v-spot[data-x="b"] .ai-chip{animation:aichipout .26s ease-in both}
@keyframes aichipout{to{opacity:0;transform:translateY(-10px)}}
#aiBtn.catch{animation:aicatch .55s cubic-bezier(.2,.9,.2,1)}
@keyframes aicatch{0%{transform:scale(.9);box-shadow:var(--sh-raise),0 0 0 0 rgba(var(--ik),.3)}38%{transform:scale(1.14)}68%{transform:scale(.97)}100%{transform:scale(1);box-shadow:var(--sh-raise),0 0 0 16px rgba(var(--ik),0)}}
/* B · slip away: one quiet move off to the side it lives on (Spotlight drops back down) */
html.ai-closing .ai.v-bloom[data-x="b"]{animation:aislip .32s cubic-bezier(.5,0,.75,0) both}
@keyframes aislip{from{opacity:1;transform:none}to{opacity:0;transform:translateX(40px) scale(.97)}}
html.ai-closing .ai.v-spot[data-x="b"]{animation:aidrop .3s cubic-bezier(.5,0,.75,0) both}
@keyframes aidrop{from{opacity:1;transform:none}to{opacity:0;transform:translateY(16px) scale(.97)}}
/* C · leave in order: the pieces go bottom-up, 40ms apart, then the glass itself */
html.ai-closing .ai[data-x="c"] .ai-head,html.ai-closing .ai[data-x="c"] .ai-thread>*,html.ai-closing .ai[data-x="c"] .ai-pillwrap,html.ai-closing .ai[data-x="c"] .ai-chip{animation:aileave .26s cubic-bezier(.5,0,.75,0) both;animation-delay:calc(var(--o,0) * 40ms)}
@keyframes aileave{to{opacity:0;transform:translateY(12px)}}
html.ai-closing .ai.v-bloom[data-x="c"]{animation:aiglass .3s ease-in .26s both}
@keyframes aiglass{from{opacity:1;transform:none}to{opacity:0;transform:scale(.985)}}
html.ai-closing .ai.v-spot[data-x="c"]{animation:aiglassspot .24s ease-in .3s both}
@keyframes aiglassspot{from{opacity:1}to{opacity:0}}

/* ---------- the motion pass (2026-10-23): headings write in word by word, figures count, the bar tightens,
   the hero leans toward the pointer. All of it is off for reduced motion (site.js never splits or counts). ---------- */
.split .hw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split .hw>span{display:inline-block}
.js .split .hw>span{transform:translateY(108%);transition:transform .95s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0s) + var(--wi,0) * 42ms)}
.js [data-rise].split,.js .hero [data-h].split{opacity:1;transform:none}
.js .split.on .hw>span,.js .hero.in .split .hw>span{transform:none}
[data-count]{font-variant-numeric:tabular-nums}
.nav{transition:top .5s var(--ease)}
.navin{transition:width .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease)}
.nav.tight{top:8px}
.nav.tight .navin{padding-top:5px;padding-bottom:5px;box-shadow:var(--g-sh-raise),0 14px 40px rgba(16,17,20,.08),inset 0 1px 0 rgba(255,255,255,var(--g-rim))}
@media (min-width:1000px){.nav.tight .navin{width:min(1040px,calc(100% - 64px))}}
.hs-tilt{position:absolute;inset:0;will-change:transform}
/* the review dock — local preview only (site.js), never on vetta.build */
.rvdock{position:fixed;left:16px;bottom:16px;z-index:99;display:flex;align-items:center;gap:3px;padding:5px 6px 5px 14px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:11.5px;box-shadow:0 12px 30px rgba(16,17,20,.22)}
.rvdock span{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:9.5px;opacity:.6;margin-right:4px}
.rvdock i{width:1px;height:16px;background:currentColor;opacity:.2;margin:0 8px}
.rvdock button{border:none;cursor:pointer;background:transparent;color:inherit;font:500 12px 'Outfit',system-ui,sans-serif;padding:6px 10px;border-radius:999px;opacity:.7}
.rvdock button.on{background:var(--paper);color:var(--ink);opacity:1}
@media (max-width:600px){.rvdock{left:8px;right:8px;bottom:8px;justify-content:center;padding-left:10px}}
@media (prefers-reduced-motion:reduce){.nav,.navin{transition:none}#aiBtn.catch{animation:none}}