/* Vectflow ADI — components. Decisions 0105 (the site) and 0107 (brand 5.0).
   Loaded after a page's base CSS (inline on / and /voice-agents, adi-base.css on
   the system pages). Every demo here runs inside ONE sample business, Northpoint,
   and every demo frame says so: "Demonstration · sample data".
   The flow gradient stays ONE dominant moment per section; success green only
   for a finished state. */

/* ───────────────────────── Tokens: brand 5.0, both color systems ─────────────────────────
   THIS FILE OWNS THE TOKENS. It loads after every page's base CSS, so these values
   win over the copies in the inline base and in adi-base.css, and every component
   names a role here, never a hex.
   LIGHT IS OPT-IN PER PAGE, and that is deliberate. A page whose own inline CSS
   still hard-codes dark values would turn to light under it and break, so the light
   system applies only where <html> carries class "v5", which a page gets once all of
   its CSS names roles. A reader's choice (data-theme) beats the device, as in the
   guidelines.
   --cyan is the AZURE TEXT TINT, not the fill: across these pages it colors labels
   far more often than it fills anything, and 5.0 gives small text a tint per system.
   Fills name the flow stops (--f1 --f2 --f3). --success is the text-safe green for
   each system, which is what a "finished" label needs. */
:root{
  color-scheme:dark;
  --bg:#06080F;--bg-2:#080B16;--surface-1:#0E1320;--surface-2:#141B2B;--surface-3:#1C2540;
  --text:#F4F7FF;--muted:rgba(244,247,255,0.64);--muted-low:rgba(244,247,255,0.48);--faint:rgba(244,247,255,0.30);
  --line:rgba(255,255,255,0.08);--line-soft:rgba(255,255,255,0.05);--line-strong:rgba(255,255,255,0.16);
  --f1:#0A93E0;--f2:#3A6BFF;--f3:#7C4DFF;
  --cyan:#3BB2F0;--blue:#3A6BFF;--purple:#7C4DFF;--blue-t:#8FA8FF;--violet-t:#B39BFF;
  --success:#00E5A0;--held:#FFB547;--held-t:#FFCF86;--neg-t:#FF8A8A;
  --grad:linear-gradient(120deg,#0A93E0 0%,#3A6BFF 50%,#7C4DFF 100%);
  --grad-soft:linear-gradient(120deg,rgba(10,147,224,0.16),rgba(124,77,255,0.16));
  --card:rgba(14,19,32,0.55);--card-strong:rgba(14,19,32,0.74);--well:rgba(6,8,15,0.5);
  --tint:rgba(255,255,255,0.03);--tint-2:rgba(255,255,255,0.06);--hover:rgba(255,255,255,0.04);
  --sel:rgba(58,107,255,0.12);--sel-line:rgba(58,107,255,0.7);--hov-line:rgba(124,77,255,0.45);
  --glass:rgba(6,8,15,0.72);--glass-solid:rgba(6,8,15,0.96);--foot-bg:rgba(8,11,22,0.5);
  --shadow:0 50px 100px -34px rgba(0,0,0,0.75),0 0 0 1px rgba(124,77,255,0.06),0 0 120px rgba(58,107,255,0.06);
  --btn-shadow:0 10px 30px -8px rgba(58,107,255,0.6);
  --glow-a:rgba(10,147,224,0.10);--glow-b:rgba(124,77,255,0.12);--glow-c:rgba(58,107,255,0.08);
  --run-glow:drop-shadow(0 0 50px rgba(58,107,255,0.4));
  --scrim:linear-gradient(90deg,rgba(6,8,15,0.88) 0%,rgba(6,8,15,0.5) 45%,rgba(6,8,15,0) 72%);
  --scrim-up:linear-gradient(0deg,rgba(6,8,15,0.9) 0%,rgba(6,8,15,0.55) 38%,rgba(6,8,15,0) 70%);
  --nav-fade:linear-gradient(180deg,rgba(6,8,15,0.96) 0%,rgba(6,8,15,0.9) 52%,rgba(6,8,15,0) 100%);
  --orb-a:rgba(10,147,224,0.30);--orb-b:rgba(58,107,255,0.26);--orb-c:rgba(124,77,255,0.30);--fl-op:.55;
  --grain-op:0.22;
  --device-ring:#05070e;--device-shadow:rgba(0,0,0,0.6);--device-veil:rgba(6,8,15,0.16);
  --d-dark:block;--d-light:none;
  /* Channels for a translucent color that must flip with the system: ink is the
     text's color, base the page's, panel a card's. rgba(var(--ink),.08) is a hairline
     in both systems. The pages that came before 5.0 name their whites and darks this way. */
  --ink:244,247,255;--base:6,8,15;--panel:14,19,32;
}
@media (prefers-color-scheme:light){
  :root.v5:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#F5F7FC;--bg-2:#EDF0F7;--surface-1:#FFFFFF;--surface-2:#F1F4FA;--surface-3:#E5EAF4;
    --text:#0A0F1E;--muted:rgba(10,15,30,0.68);--muted-low:rgba(10,15,30,0.60);--faint:rgba(10,15,30,0.36);
    --line:rgba(10,15,30,0.09);--line-soft:rgba(10,15,30,0.06);--line-strong:rgba(10,15,30,0.18);
    --cyan:#0070B0;--blue-t:#2F58E0;--violet-t:#6A3BF0;
    --success:#007A55;--held-t:#9A5B00;--neg-t:#C2362F;
    --grad-soft:linear-gradient(120deg,rgba(10,147,224,0.12),rgba(124,77,255,0.12));
    --card:rgba(255,255,255,0.55);--card-strong:rgba(255,255,255,0.58);--well:rgba(237,240,247,0.55);
    --tint:rgba(10,15,30,0.025);--tint-2:rgba(10,15,30,0.06);--hover:rgba(10,15,30,0.035);
    --sel:rgba(58,107,255,0.10);--sel-line:rgba(58,107,255,0.6);--hov-line:rgba(124,77,255,0.4);
    --glass:rgba(245,247,252,0.8);--glass-solid:rgba(245,247,252,0.97);--foot-bg:rgba(237,240,247,0.7);
    --shadow:0 30px 70px -36px rgba(20,32,70,0.28),0 0 0 1px rgba(58,107,255,0.06);
    --btn-shadow:0 10px 26px -10px rgba(58,107,255,0.5);
    --glow-a:rgba(10,147,224,0.08);--glow-b:rgba(124,77,255,0.07);--glow-c:rgba(58,107,255,0.05);
    --run-glow:none;
  --scrim:linear-gradient(90deg,rgba(245,247,252,0.94) 0%,rgba(245,247,252,0.6) 45%,rgba(245,247,252,0) 75%);
  --scrim-up:linear-gradient(0deg,rgba(245,247,252,0.95) 0%,rgba(245,247,252,0.6) 38%,rgba(245,247,252,0) 70%);
  --nav-fade:linear-gradient(180deg,rgba(245,247,252,0.97) 0%,rgba(245,247,252,0.92) 52%,rgba(245,247,252,0) 100%);
  --orb-a:rgba(10,147,224,0.30);--orb-b:rgba(58,107,255,0.22);--orb-c:rgba(124,77,255,0.26);--fl-op:.7;
    --grain-op:0.10;
  --ls-line:rgba(10,15,30,0.16);--ls-bg:rgba(10,15,30,0.03);--ls-text:rgba(10,15,30,0.68);--ls-text-hi:#0A0F1E;--ls-line-hi:rgba(10,15,30,0.30);--ls-bg-hi:rgba(10,15,30,0.06);
    --device-ring:#D9DFEB;--device-shadow:rgba(20,32,70,0.22);--device-veil:rgba(10,15,30,0.03);
  --d-dark:none;--d-light:block;
  --ink:10,15,30;--base:245,247,252;--panel:255,255,255;
  }
}
:root.v5[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F7FC;--bg-2:#EDF0F7;--surface-1:#FFFFFF;--surface-2:#F1F4FA;--surface-3:#E5EAF4;
  --text:#0A0F1E;--muted:rgba(10,15,30,0.68);--muted-low:rgba(10,15,30,0.60);--faint:rgba(10,15,30,0.36);
  --line:rgba(10,15,30,0.09);--line-soft:rgba(10,15,30,0.06);--line-strong:rgba(10,15,30,0.18);
  --cyan:#0070B0;--blue-t:#2F58E0;--violet-t:#6A3BF0;
  --success:#007A55;--held-t:#9A5B00;--neg-t:#C2362F;
  --grad-soft:linear-gradient(120deg,rgba(10,147,224,0.12),rgba(124,77,255,0.12));
  --card:rgba(255,255,255,0.55);--card-strong:rgba(255,255,255,0.58);--well:rgba(237,240,247,0.55);
  --tint:rgba(10,15,30,0.025);--tint-2:rgba(10,15,30,0.06);--hover:rgba(10,15,30,0.035);
  --sel:rgba(58,107,255,0.10);--sel-line:rgba(58,107,255,0.6);--hov-line:rgba(124,77,255,0.4);
  --glass:rgba(245,247,252,0.8);--glass-solid:rgba(245,247,252,0.97);--foot-bg:rgba(237,240,247,0.7);
  --shadow:0 30px 70px -36px rgba(20,32,70,0.28),0 0 0 1px rgba(58,107,255,0.06);
  --btn-shadow:0 10px 26px -10px rgba(58,107,255,0.5);
  --glow-a:rgba(10,147,224,0.08);--glow-b:rgba(124,77,255,0.07);--glow-c:rgba(58,107,255,0.05);
  --run-glow:none;
  --scrim:linear-gradient(90deg,rgba(245,247,252,0.94) 0%,rgba(245,247,252,0.6) 45%,rgba(245,247,252,0) 75%);
  --scrim-up:linear-gradient(0deg,rgba(245,247,252,0.95) 0%,rgba(245,247,252,0.6) 38%,rgba(245,247,252,0) 70%);
  --nav-fade:linear-gradient(180deg,rgba(245,247,252,0.97) 0%,rgba(245,247,252,0.92) 52%,rgba(245,247,252,0) 100%);
  --orb-a:rgba(10,147,224,0.30);--orb-b:rgba(58,107,255,0.22);--orb-c:rgba(124,77,255,0.26);--fl-op:.7;
  --grain-op:0.10;
  --ls-line:rgba(10,15,30,0.16);--ls-bg:rgba(10,15,30,0.03);--ls-text:rgba(10,15,30,0.68);--ls-text-hi:#0A0F1E;--ls-line-hi:rgba(10,15,30,0.30);--ls-bg-hi:rgba(10,15,30,0.06);
  --device-ring:#D9DFEB;--device-shadow:rgba(20,32,70,0.22);--device-veil:rgba(10,15,30,0.03);
  --d-dark:none;--d-light:block;
  --ink:10,15,30;--base:245,247,252;--panel:255,255,255;
}
/* One element per system where an image cannot follow a token (the logos). */
.on-dark{display:var(--d-dark)!important;}
.on-light{display:var(--d-light)!important;}

/* ───────────────────────── Shared bits ───────────────────────── */
/* An author `display` beats the UA's [hidden] rule, so a pane styled as a grid
   renders even while hidden. Every scenario switch here relies on [hidden]. */
[hidden]{display:none!important;}
.mono{font-family:'SF Mono','Fira Code',Consolas,monospace;}
.k{font-family:'SF Mono','Fira Code',Consolas,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-low);}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head.center .sec-lead{margin-left:auto;margin-right:auto;}
.ok{color:var(--success);}
.grad-line{height:1px;background:var(--grad);opacity:.5;}

/* "Client login" must never wrap under its own nav row (it did in Spanish). */
.nav-return{white-space:nowrap;}

/* ───────────────────────── Window frame (every demo) ───────────────────────── */
.win{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--card-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:var(--shadow);text-align:left;}
.win-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--tint);}
/* THE PRODUCT BAR (founder, 16 Oct 2026). No window dots: they were Apple's, and
   on the chat they looked like buttons and did nothing. The bar leads with the
   system's own mark instead, the homepage tile's animation drawn at tile size and
   scaled down, so it IS that mark rather than a second drawing of it. Vector's
   chat has its own head (the Signal, 0125). */
.win-mark{position:relative;display:block;width:46px;height:26px;flex-shrink:0;border-radius:8px;overflow:hidden;}
.win-mark .mini{position:absolute;left:0;top:0;width:184px;height:104px;transform:scale(.25);transform-origin:0 0;border-radius:32px;border-width:4px;}
.win-title{font-family:'SF Mono',Consolas,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.win-tag{margin-left:auto;font-family:'SF Mono',Consolas,monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-low);white-space:nowrap;}
.win-body{padding:20px;}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 10px rgba(0,229,160,.7);margin-right:8px;animation:livepulse 2s ease-in-out infinite;vertical-align:1px;}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Phones: a title never ends in "...". Tighter tracking fits "Northpoint · Panel visual
   del dueño" on one line at 390px; narrower than that it wraps, balanced. */
@media(max-width:560px){.win-tag{display:none;}.win-body{padding:16px;}
  .win-title{letter-spacing:.14em;white-space:normal;line-height:1.6;text-wrap:balance;}}

/* demo controls */
.dctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.chip{font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-size:13.5px;font-weight:600;color:var(--muted);
  background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);}
.chip:hover{color:var(--text);border-color:var(--hov-line);}
.chip[aria-pressed="true"],.chip.on{color:var(--text);border-color:var(--sel-line);background:var(--sel);}
.chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.replay{margin-left:auto;font-family:'SF Mono',Consolas,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:none;border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;}
.replay:hover{color:var(--text);border-color:var(--hov-line);}
@media (pointer:coarse){.chip,.replay{min-height:44px;}}

/* ───────────────────────── Home hero ───────────────────────── */
.hero-eyebrow{margin-top:8px;}
.hero-sub.adi{max-width:680px;}
.hero-sub.adi b{display:block;}
.nfeed{max-width:760px;margin:56px auto 0;}
.nfeed .win-body{padding:8px 8px 10px;}
.nrow{display:grid;grid-template-columns:54px 128px 1fr 18px;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:var(--muted);font-size:14px;opacity:.28;transform:translateY(4px);transition:opacity .6s var(--ease),transform .6s var(--ease),background .4s var(--ease);}
.nrow.on{opacity:1;transform:none;}
.nrow.hot{background:var(--sel);}
.nrow:hover{background:var(--hover);}
.nrow .t{font-family:'SF Mono',Consolas,monospace;font-size:11px;color:var(--muted-low);}
.nrow .s{font-family:'SF Mono',Consolas,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);white-space:nowrap;}
.nrow .x{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nrow .x b{color:var(--text);font-weight:600;}
.nrow .go{color:var(--muted-low);transition:transform .25s var(--ease),color .25s var(--ease);}
.nrow:hover .go{transform:translateX(3px);color:var(--text);}
.nfeed-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 14px 2px;border-top:1px solid var(--line-soft);margin-top:6px;}
@media(max-width:640px){
  .nrow{grid-template-columns:1fr 18px;grid-template-areas:"s go" "x go";gap:2px 10px;padding:10px;}
  .nrow .t{display:none;}
  .nrow .s{grid-area:s;}
  .nrow .x{grid-area:x;white-space:normal;}
  .nrow .go{grid-area:go;}
  .nfeed-foot .k:last-child{display:none;}
}

/* ───────────────────────── Systems grid ───────────────────────── */
.sys-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.sys-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;padding:22px;
  background:var(--card);transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);min-width:0;}
.sys-card:hover{border-color:var(--hov-line);transform:translateY(-3px);background:var(--card-strong);}
/* A system mark: the box clips and positions its live preview wherever it sits
   (a card, the homepage row, the systems panel, the phone menu). */
.mini{border-radius:14px;background:var(--well);border:1px solid var(--line-soft);position:relative;overflow:hidden;}
.sys-card .mini{height:120px;margin-bottom:20px;}
.sys-card h3{font-size:21px;}
.sys-card p{color:var(--muted);font-size:15px;margin-top:8px;flex:1;}
.sys-card .more{margin-top:16px;font-size:14px;font-weight:600;color:var(--text);display:inline-flex;gap:8px;}
.sys-card .more .arr{display:inline-block;}
.sys-card:hover .more .arr{transform:translateX(4px);}
.sys-card .badge{position:absolute;top:34px;right:34px;font-family:'SF Mono',Consolas,monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--success);border:1px solid rgba(0,229,160,.35);background:rgba(0,229,160,.08);border-radius:999px;padding:4px 9px;z-index:2;}
@media(max-width:1000px){.sys-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.sys-grid{grid-template-columns:1fr;}}

/* mini previews — pure CSS, one per system */
.mini-wave{display:flex;align-items:center;justify-content:center;gap:5px;height:100%;}
.mini-wave i{width:5px;border-radius:3px;background:var(--grad);height:20%;animation:wave 1.4s ease-in-out infinite;}
.mini-wave i:nth-child(2){animation-delay:.1s}.mini-wave i:nth-child(3){animation-delay:.2s}.mini-wave i:nth-child(4){animation-delay:.3s}
.mini-wave i:nth-child(5){animation-delay:.4s}.mini-wave i:nth-child(6){animation-delay:.5s}.mini-wave i:nth-child(7){animation-delay:.6s}
.mini-wave i:nth-child(8){animation-delay:.7s}.mini-wave i:nth-child(9){animation-delay:.8s}
@keyframes wave{0%,100%{height:16%}50%{height:62%}}
.mini-flow{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;padding:0 18px;}
.mini-flow::before{content:"";position:absolute;left:30px;right:30px;top:50%;height:1px;background:var(--line-strong);}
.mini-flow i{position:relative;width:14px;height:14px;border-radius:5px;border:1px solid var(--line-strong);background:var(--bg);animation:flowstep 3.2s infinite;}
.mini-flow i:nth-child(2){animation-delay:.5s}.mini-flow i:nth-child(3){animation-delay:1s}.mini-flow i:nth-child(4){animation-delay:1.5s}
@keyframes flowstep{0%,8%{background:var(--bg);box-shadow:none}14%,60%{background:var(--f2);box-shadow:0 0 14px rgba(58,107,255,.8)}70%,100%{background:var(--success);box-shadow:none}}
.mini-flow b{position:absolute;top:calc(50% - 3px);left:30px;width:6px;height:6px;border-radius:50%;background:var(--f1);box-shadow:0 0 10px var(--f1);animation:flowdot 3.2s linear infinite;}
@keyframes flowdot{from{left:30px;opacity:1}90%{opacity:1}to{left:calc(100% - 36px);opacity:0}}
.mini-bars{position:absolute;inset:18px 22px;display:flex;align-items:flex-end;gap:7px;border-bottom:1px solid var(--line-strong);}
.mini-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--f2),rgba(58,107,255,.25));transform-origin:bottom;animation:bar 3.6s var(--ease) infinite;}
.mini-bars i:nth-child(1){height:38%}.mini-bars i:nth-child(2){height:55%;animation-delay:.1s}.mini-bars i:nth-child(3){height:46%;animation-delay:.2s}
.mini-bars i:nth-child(4){height:70%;animation-delay:.3s}.mini-bars i:nth-child(5){height:62%;animation-delay:.4s}.mini-bars i:nth-child(6){height:88%;animation-delay:.5s;background:linear-gradient(180deg,var(--f3),rgba(124,77,255,.3))}
@keyframes bar{0%{transform:scaleY(.15)}30%,100%{transform:scaleY(1)}}
.mini-form{position:absolute;inset:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:center;}
.mini-form i{height:16px;border-radius:5px;background:var(--tint-2);border:1px solid var(--line);}
.mini-form i:nth-child(5){grid-column:1/-1;height:22px;background:linear-gradient(90deg,rgba(10,147,224,.5),rgba(124,77,255,.5));background-size:200% 100%;animation:shimmer 2.4s linear infinite;}
@keyframes shimmer{from{background-position:0 0}to{background-position:-200% 0}}
.mini-merge{position:absolute;inset:0;}
.mini-merge i{position:absolute;left:16px;width:42%;height:8px;border-radius:4px;background:var(--line-strong);animation:merge 3.4s var(--ease) infinite;}
.mini-merge i:nth-child(1){top:20%}.mini-merge i:nth-child(2){top:38%;animation-delay:.15s}.mini-merge i:nth-child(3){top:56%;animation-delay:.3s}.mini-merge i:nth-child(4){top:74%;animation-delay:.45s}
.mini-merge b{position:absolute;right:16px;top:25%;bottom:25%;width:34%;border-radius:8px;border:1px solid rgba(58,107,255,.5);background:var(--sel);}
@keyframes merge{0%{transform:none;opacity:1}55%{transform:translateX(calc(100% + 26px));opacity:.2}56%,100%{transform:none;opacity:1}}
.mini-steps{position:absolute;inset:16px 22px;display:flex;flex-direction:column;justify-content:center;gap:9px;}
.mini-steps i{display:flex;align-items:center;gap:8px;height:10px;}
.mini-steps i::before{content:"";width:10px;height:10px;border-radius:50%;border:1px solid var(--line-strong);flex-shrink:0;animation:tick 4s infinite;}
.mini-steps i::after{content:"";height:6px;border-radius:3px;background:var(--tint-2);flex:1;}
.mini-steps i:nth-child(2)::before{animation-delay:.6s}.mini-steps i:nth-child(3)::before{animation-delay:1.2s}.mini-steps i:nth-child(4)::before{animation-delay:1.8s}
/* The marks at their smaller sizes (the homepage row, the systems panel and the
   phone menu). The data-pipeline mark is proportional above, so it needs nothing;
   the form and the checklist are drawn in pixels and are tightened here. */
.mark .mini-form,.smk .mini-form,.mm-sys .mini-form{inset:10px 14px;gap:5px;}
.mark .mini-form i,.smk .mini-form i,.mm-sys .mini-form i{height:11px;}
.mark .mini-form i:nth-child(5),.smk .mini-form i:nth-child(5),.mm-sys .mini-form i:nth-child(5){height:14px;}
.mark .mini-steps,.smk .mini-steps,.mm-sys .mini-steps{inset:8px 16px;gap:6px;}
.mark .mini-bars,.smk .mini-bars,.mm-sys .mini-bars{inset:14px 16px;gap:5px;}
.mm-sys .mini-form{inset:8px 12px;}
.mm-sys .mini-form i{height:9px;}
.mm-sys .mini-form i:nth-child(5){height:11px;}
.mm-sys .mini-steps{gap:4px;}
.mm-sys .mini-steps i,.mm-sys .mini-steps i::before{height:8px;}
.mm-sys .mini-steps i::before{width:8px;}
.mm-sys .mini-merge i{height:6px;}
@keyframes tick{0%,10%{background:transparent;border-color:var(--line-strong)}20%,85%{background:var(--success);border-color:var(--success)}100%{background:transparent}}

/* ───────────────────────── Automation catalogue ───────────────────────── */
.cat-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.cat-card{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--card);display:flex;flex-direction:column;gap:8px;min-width:0;
  transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);}
.cat-card:hover{border-color:var(--hov-line);}
.cat-card[hidden]{display:none;}
.cat-dept{font-family:'SF Mono',Consolas,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);}
.cat-card h3{font-size:17px;line-height:1.25;letter-spacing:-0.01em;}
.cat-card p{font-size:14px;color:var(--muted);flex:1;}
.cat-sys{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.cat-sys a{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;transition:color .2s,border-color .2s;}
.cat-sys a:hover{color:var(--text);border-color:var(--hov-line);}
.cat-foot{margin-top:24px;color:var(--muted);font-size:15px;}
.cat-foot a{color:var(--text);border-bottom:1px solid rgba(58,107,255,.6);}
@media(max-width:1000px){.cat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr;}}

/* ───────────────────────── How we work (4 steps) ───────────────────────── */
.how4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;}
.how4::before{content:"";position:absolute;left:4%;right:4%;top:27px;height:1px;background:var(--grad);opacity:.35;}
.hstep{position:relative;padding-top:64px;}
.hstep .hn{position:absolute;top:8px;left:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-family:'SF Mono',Consolas,monospace;font-size:13px;color:var(--text);background:var(--bg-2);border:1px solid rgba(58,107,255,.5);box-shadow:0 0 24px rgba(58,107,255,.2);}
.hstep h3{font-size:22px;}
.hstep p{color:var(--muted);font-size:15px;margin-top:10px;}
@media(max-width:900px){.how4{grid-template-columns:1fr 1fr;gap:28px 20px;}.how4::before{display:none;}}
@media(max-width:560px){.how4{grid-template-columns:1fr;}}

/* ───────────────────────── Proof: Vectflow runs on it ───────────────────────── */
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.pcard{border:1px solid var(--line);border-radius:20px;padding:26px;background:var(--card);display:flex;flex-direction:column;}
.pcard .k{margin-bottom:14px;display:flex;align-items:center;}
.pcard h3{font-size:22px;}
.pcard p{color:var(--muted);font-size:15px;margin-top:10px;flex:1;}
.pcard .btn{margin-top:22px;align-self:flex-start;}
.pcard .tel{font-family:'SF Mono',Consolas,monospace;font-size:clamp(18px,2vw,22px);color:var(--text);margin-top:14px;letter-spacing:.02em;}
@media(max-width:900px){.proofs{grid-template-columns:1fr;}}

/* ───────────────────────── System page hero ───────────────────────── */
.sp-hero{padding:150px 0 40px;text-align:center;}
/* EVERY SYSTEM PAGE OPENS ON THE SIGNATURE (0114): BUILT TO RUN. in the homepage's
   hero type, then what the system does, one size down. The system's name no longer
   sits above it as a label (founder: "looks lame"); the headline says what it is. */
.sp-sig{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:clamp(44px,7.4vw,108px);letter-spacing:-0.045em;line-height:.96;margin:0;color:var(--text);}
.sp-sig .u,.sp-sig .run{display:inline-block;white-space:nowrap;}
/* background-clip:text paints only inside the box, and at -0.045em tracking the box
   ends before the full stop's right edge, cutting the dot of "RUN." flat. The same
   fix as the homepage's .hero-title .run: pad the box out, give the space back. */
.sp-sig .run{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:var(--run-glow);padding-bottom:.14em;margin-bottom:-.14em;padding-right:.12em;margin-right:-.12em;}
.sp-hero h1{font-size:clamp(28px,3.7vw,50px);letter-spacing:-0.03em;margin-top:clamp(18px,2.6vh,28px);text-wrap:balance;}
.sp-hero .sec-lead{margin:24px auto 0;max-width:640px;text-wrap:balance;}
.sp-runs{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--tint);font-size:14px;color:var(--muted);}
.sp-runs b{color:var(--text);font-weight:600;}
.sp-hero .hero-ctas{margin-top:34px;}
.sp-demo{padding-top:30px;}
.sp-demo .win{max-width:1060px;margin:0 auto;}
.demo-cap{max-width:1060px;margin:14px auto 0;font-size:13.5px;color:var(--muted-low);text-align:center;}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cap{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--card);}
.cap svg{width:28px;height:28px;margin-bottom:18px;}
.cap h3{font-size:18px;letter-spacing:-0.01em;}
.cap p{color:var(--muted);font-size:14.5px;margin-top:8px;}
@media(max-width:1000px){.caps{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.caps{grid-template-columns:1fr;}}

/* examples */
.exs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ex{border-left:2px solid rgba(58,107,255,.55);padding:6px 0 6px 20px;}
.ex .k{display:block;margin-bottom:10px;color:var(--cyan);}
.ex h3{font-size:19px;letter-spacing:-0.01em;}
.ex p{color:var(--muted);font-size:15px;margin-top:8px;}
@media(max-width:900px){.exs{grid-template-columns:1fr;gap:26px;}}

/* what we need */
.needs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;}
.needs ol{list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:16px;}
.needs li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:14px;color:var(--muted);font-size:15.5px;}
.needs li::before{content:counter(n,decimal-leading-zero);font-family:'SF Mono',Consolas,monospace;font-size:12px;color:var(--cyan);padding-top:3px;}
.needs li b{color:var(--text);font-weight:600;display:block;}
@media(max-width:820px){.needs{grid-template-columns:1fr;}}

/* faq */
.faqs{max-width:820px;}
.faqs details{border-bottom:1px solid var(--line);}
.faqs summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.01em;}
.faqs summary::-webkit-details-marker{display:none;}
.faqs summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:24px;color:var(--muted);transition:transform .3s var(--ease);}
.faqs details[open] summary::after{transform:rotate(45deg);}
.faqs details p{color:var(--muted);padding:0 0 22px;max-width:700px;}

/* related systems strip */
.rel{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.rel a{border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14.5px;font-weight:600;color:var(--text);background:var(--card);
  display:flex;justify-content:space-between;align-items:center;gap:8px;transition:border-color .25s var(--ease);}
.rel a:hover{border-color:var(--hov-line);}
.rel a span{color:var(--muted-low);}
@media(max-width:1000px){.rel{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.rel{grid-template-columns:1fr;}}

/* ═══════════════════════ DEMO 1 — WORKFLOWS (run trace) ═══════════════════════ */
.wf{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px;min-height:420px;}
.wf-steps{list-style:none;position:relative;padding-left:4px;}
.wf-steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:var(--line-strong);}
.wf-step{position:relative;display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:start;padding:10px 0;opacity:.32;transition:opacity .4s var(--ease);}
.wf-step.run,.wf-step.done{opacity:1;}
.wf-step .nd{width:28px;height:28px;border-radius:9px;border:1px solid var(--line-strong);background:var(--bg-2);display:grid;place-items:center;position:relative;z-index:1;
  transition:border-color .3s,box-shadow .3s,background .3s;}
.wf-step .nd::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background .3s;}
.wf-step.run .nd{border-color:var(--f1);box-shadow:0 0 16px rgba(10,147,224,.5);}
.wf-step.run .nd::after{background:var(--f1);animation:livepulse .8s infinite;}
.wf-step.done .nd{border-color:rgba(0,229,160,.6);}
.wf-step.done .nd::after{background:var(--success);}
.wf-step .nm{font-size:15px;font-weight:600;color:var(--text);line-height:1.35;}
.wf-step .ds{font-size:13px;color:var(--muted);margin-top:2px;}
.wf-step .ms{font-family:'SF Mono',Consolas,monospace;font-size:10.5px;color:var(--muted-low);padding-top:4px;white-space:nowrap;}
.wf-step.done .ms{color:var(--success);}
.wf-out{position:relative;display:flex;flex-direction:column;gap:10px;}
.wf-card{border:1px solid var(--line);border-radius:14px;background:var(--well);padding:14px 16px;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);}
.wf-card.show{opacity:1;transform:none;}
.wf-card .k{display:block;margin-bottom:8px;}
.wf-card p{font-size:14px;color:var(--muted);line-height:1.55;}
.wf-card p b{color:var(--text);font-weight:600;}
.wf-sum{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:14px;border-top:1px solid var(--line-soft);opacity:0;transition:opacity .5s var(--ease);}
.wf-sum.show{opacity:1;}
.wf-sum span{font-family:'SF Mono',Consolas,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.wf-sum span b{color:var(--text);font-size:15px;letter-spacing:0;margin-right:4px;text-transform:none;}
.wf-sum .ok b{color:var(--success);}
.wf-src{display:none;}
@media(max-width:820px){.wf{grid-template-columns:1fr;min-height:0;}.wf-out{min-height:300px;}}

/* ═══════════════════════ DEMO 2 — DASHBOARDS ═══════════════════════ */
.db-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--tint);}
.seg button{font-family:'SF Mono',Consolas,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:0;border-radius:9px;padding:8px 12px;cursor:pointer;}
.seg button[aria-pressed="true"]{background:var(--sel);color:var(--text);}
.seg button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px;}
@media (pointer:coarse){.seg button{min-height:40px;}}
.db-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;}
.kpi{border:1px solid var(--line-soft);border-radius:14px;padding:14px;background:var(--well);min-width:0;}
.kpi .v{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.02em;margin-top:6px;font-variant-numeric:tabular-nums;}
.kpi .d{font-size:12px;margin-top:4px;color:var(--muted);font-variant-numeric:tabular-nums;}
.kpi .d.up{color:var(--success);}
.db-main{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin-top:12px;}
.db-panel{border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px;background:var(--well);min-width:0;}
.db-panel .ph{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:10px;}
.db-chart{width:100%;height:190px;display:block;overflow:visible;}
.db-chart .gl{stroke:var(--line);stroke-width:1;}
.db-chart .ax{fill:var(--muted-low);font-family:'SF Mono',Consolas,monospace;font-size:10px;}
.db-chart .ln{fill:none;stroke:url(#dbg);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;}
.db-chart .ar{fill:url(#dba);}
.db-chart .pt{fill:var(--bg);stroke:var(--f2);stroke-width:2;}
.db-chart .tipdot{fill:var(--text);}
.db-tip{font-size:12.5px;color:var(--muted);min-height:18px;}
.db-tip b{color:var(--text);}
.stat-rows{display:flex;flex-direction:column;gap:12px;}
.srow2 .lb{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);}
.srow2 .lb b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.srow2 .tr{height:6px;border-radius:4px;background:var(--tint-2);margin-top:6px;overflow:hidden;}
.srow2 .tr i{display:block;height:100%;border-radius:4px;background:var(--f2);width:0;transition:width .9s var(--ease);}
.srow2.c2 .tr i{background:var(--f3);}
.srow2.c3 .tr i{background:var(--f1);}
.srow2.c4 .tr i{background:var(--faint);}
.db-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;}
.db-table th{font-family:'SF Mono',Consolas,monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-low);font-weight:400;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft);}
.db-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);color:var(--muted);font-variant-numeric:tabular-nums;}
.db-table td:first-child{color:var(--text);}
.db-table .num{text-align:right;}
.db-table tr.new td{animation:rowin 1.6s var(--ease);}
@keyframes rowin{0%{background:rgba(0,229,160,.18)}100%{background:transparent}}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;}
.pill.g{color:var(--success);border-color:rgba(0,229,160,.35);}
.pill.b{color:var(--blue-t);border-color:rgba(58,107,255,.4);}
@media(max-width:820px){.db-kpis{grid-template-columns:1fr 1fr;}.db-main{grid-template-columns:1fr;}}
@media(max-width:560px){.db-table .hide-s{display:none;}}

/* ═══════════════════════ DEMO 3 — INTERNAL TOOLS (quote builder) ═══════════════════════ */
.qt{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.qt-form{display:flex;flex-direction:column;gap:16px;}
.qf label,.qf .lbl{display:block;font-family:'SF Mono',Consolas,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-low);margin-bottom:8px;}
.qf select,.qf input[type=range]{width:100%;}
.qf select{font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-size:16px;color:var(--text);background:var(--tint);border:1px solid var(--line);border-radius:11px;padding:11px 12px;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;}
.qf select option{background:var(--surface-1);color:var(--text);}
.qf input[type=range]{accent-color:var(--f2);height:28px;}
.qf .rv{float:right;font-family:'SF Mono',Consolas,monospace;font-size:12px;color:var(--text);letter-spacing:0;text-transform:none;}
.qf .opts{display:flex;flex-direction:column;gap:8px;}
.qf .opt{display:flex;align-items:center;gap:10px;font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-size:15px;letter-spacing:0;text-transform:none;margin-bottom:0;color:var(--muted);cursor:pointer;}
.qf .opt input{width:18px;height:18px;accent-color:var(--f2);}
.qf .opt span.p{margin-left:auto;font-family:'SF Mono',Consolas,monospace;font-size:12px;color:var(--muted-low);}
.qt-doc{border:1px solid var(--line);border-radius:16px;background:var(--well);padding:20px;display:flex;flex-direction:column;}
.qt-doc .hd{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line-soft);}
.qt-doc .hd b{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:17px;}
.qt-lines{list-style:none;margin:10px 0;display:flex;flex-direction:column;}
.qt-lines li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--line-soft);animation:fadein .35s var(--ease);}
.qt-lines li b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.qt-tot{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:6px;}
.qt-tot div{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;}
.qt-tot .big{font-size:15px;color:var(--text);padding-top:8px;border-top:1px solid var(--line-soft);}
.qt-tot .big b{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-size:clamp(24px,3vw,32px);letter-spacing:-0.02em;}
.qt-int{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(124,77,255,.08);border:1px solid rgba(124,77,255,.25);font-size:12.5px;color:var(--muted);}
.qt-int b{color:var(--text);font-variant-numeric:tabular-nums;}
.qt-send{margin-top:14px;width:100%;}
.qt-sent{margin-top:10px;font-size:13px;color:var(--success);min-height:18px;}
@media(max-width:820px){.qt{grid-template-columns:1fr;}}

/* ═══════════════════════ DEMO 4 — DATA PIPELINES ═══════════════════════ */
.pl-src{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;}
.src{border:1px solid var(--line-soft);border-radius:14px;background:var(--well);padding:12px;min-width:0;}
.src .k{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;}
.src ul{list-style:none;display:flex;flex-direction:column;gap:5px;}
.src li{font-family:'SF Mono',Consolas,monospace;font-size:11.5px;color:var(--muted);padding:5px 8px;border-radius:7px;background:var(--tint);
  overflow-wrap:anywhere;transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s;}
/* (A row wraps rather than truncating: at 360px "J. Ramos · water heater replacement
   · done" lost its last word to an ellipsis, and the row's words ARE the demo.) */
.src li.flag{background:rgba(255,181,71,.10);color:var(--held-t);}
.src li.gone{opacity:.15;transform:translateX(10px);}
.src li.bad{display:none;}
.pl.withbad .src li.bad{display:block;}
.pl-stages{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:16px 0;}
.pst{position:relative;text-align:center;padding:10px 6px;border-radius:10px;border:1px solid var(--line-soft);font-family:'SF Mono',Consolas,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-low);
  transition:color .3s,border-color .3s,background .3s,box-shadow .3s;}
.pst.run{color:var(--text);border-color:var(--f1);background:rgba(10,147,224,.08);box-shadow:0 0 18px rgba(10,147,224,.2);}
.pst.done{color:var(--success);border-color:rgba(0,229,160,.4);}
.pst small{display:block;font-size:10px;letter-spacing:0;text-transform:none;color:var(--muted-low);margin-top:3px;font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;}
.pl-out{display:grid;grid-template-columns:1fr 240px;gap:12px;}
.pl-table{border:1px solid var(--line-soft);border-radius:14px;background:var(--well);padding:6px 10px;min-width:0;}
.pl-table table{width:100%;border-collapse:collapse;font-size:13px;}
.pl-table th{font-family:'SF Mono',Consolas,monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-low);font-weight:400;text-align:left;padding:8px;}
.pl-table td{padding:8px;border-top:1px solid var(--line-soft);color:var(--muted);font-variant-numeric:tabular-nums;}
.pl-table td:first-child{color:var(--text);}
.pl-table .num{text-align:right;}
.pl-table tbody tr{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);}
.pl-table tbody tr.show{opacity:1;transform:none;}
.pl-table .merged{color:var(--cyan);font-size:11px;margin-left:6px;}
.pl-side{display:flex;flex-direction:column;gap:12px;}
.pl-held{border:1px dashed rgba(255,181,71,.4);border-radius:14px;padding:12px;font-size:13px;color:var(--muted);opacity:.35;transition:opacity .4s;}
.pl-held.show{opacity:1;}
.pl-held .row{font-family:'SF Mono',Consolas,monospace;font-size:11.5px;color:var(--held-t);margin-top:6px;display:none;}
.pl-held.has .row{display:block;}
.pl-held .none{display:block;margin-top:6px;}
.pl-held.has .none{display:none;}
.pl-count{border:1px solid var(--line-soft);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);}
.pl-count b{color:var(--text);font-variant-numeric:tabular-nums;}
.pl-count .ok b{color:var(--success);}
.pl-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);cursor:pointer;}
.pl-toggle input{width:18px;height:18px;accent-color:var(--held);}
@media(max-width:860px){.pl-src{grid-template-columns:1fr;}.pl-out{grid-template-columns:1fr;}.pl-stages{grid-template-columns:repeat(5,minmax(0,1fr));}.pst{font-size:8.5px;letter-spacing:.06em;padding:8px 2px;}.pst small{display:none;}}
@media(max-width:560px){.pl-table .hide-s{display:none;}}

/* ═══════════════════════ DEMO 5 — AGENTS ═══════════════════════ */
.ag{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:4px;}
.ag-tasks{display:flex;flex-direction:column;gap:8px;}
.ag-task{text-align:left;font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-size:14.5px;color:var(--muted);background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;line-height:1.4;
  transition:color .2s,border-color .2s,background .2s;}
.ag-task .k{display:block;margin-bottom:6px;}
.ag-task:hover{color:var(--text);border-color:var(--hov-line);}
.ag-task[aria-pressed="true"]{color:var(--text);border-color:var(--sel-line);background:var(--sel);}
.ag-task:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.ag-rules{margin-top:6px;padding:12px 14px;border-radius:14px;border:1px solid rgba(124,77,255,.25);background:rgba(124,77,255,.06);font-size:13px;color:var(--muted);}
.ag-rules ul{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:4px;}
.ag-rules li::before{content:"— ";color:var(--muted-low);}
.ag-run{min-height:440px;display:flex;flex-direction:column;}
.ag-goal{font-size:15px;color:var(--text);padding:12px 14px;border-radius:12px;background:var(--tint);border:1px solid var(--line-soft);}
.ag-goal .k{display:block;margin-bottom:4px;}
.ag-trace{list-style:none;margin:12px 0;display:flex;flex-direction:column;gap:2px;}
.ag-trace li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:7px 4px;font-size:14px;color:var(--muted);opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.ag-trace li.show{opacity:1;transform:none;}
.ag-trace li i{width:18px;height:18px;border-radius:6px;margin-top:2px;border:1px solid var(--line-strong);display:grid;place-items:center;font-style:normal;font-size:10px;color:var(--muted);}
.ag-trace li.tool i{border-color:rgba(10,147,224,.5);color:var(--cyan);}
.ag-trace li.think i{border-color:var(--hov-line);color:var(--violet-t);}
.ag-trace li.rule i{border-color:rgba(255,181,71,.5);color:var(--held-t);}
.ag-trace li b{color:var(--text);font-weight:600;}
.ag-trace .tx{font-family:'SF Mono',Consolas,monospace;font-size:12px;color:var(--muted-low);}
.ag-result{margin-top:auto;border:1px solid rgba(0,229,160,.3);border-radius:14px;padding:14px 16px;background:rgba(0,229,160,.05);opacity:0;transition:opacity .5s var(--ease);}
.ag-result.show{opacity:1;}
.ag-result p{font-size:14.5px;color:var(--muted);}
.ag-result p b{color:var(--text);}
.ag-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px;}
.ag-act .btn{padding:10px 16px;font-size:14px;}
.ag-act .done{font-size:13.5px;color:var(--success);}
.ag-pane[hidden]{display:none;}
@media(max-width:860px){.ag{grid-template-columns:1fr;}.ag-run{min-height:0;}.ag-goal{display:none;}.ag-task{padding:11px 13px;font-size:14px;}}

/* ═══════════════════════ RECEPTIONIST — add-ons + price ═══════════════════════ */
.addons{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.addon{border:1px solid var(--line);border-radius:22px;background:var(--card);padding:24px;display:flex;flex-direction:column;min-width:0;}
.addon h3{font-size:23px;}
.addon > p{color:var(--muted);font-size:15px;margin-top:10px;}
.addon .stage{margin-top:20px;border-radius:16px;border:1px solid var(--line-soft);background:var(--well);padding:16px;min-height:340px;display:flex;flex-direction:column;}
.sms-hd{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);margin-bottom:12px;}
.sms-hd .av{width:30px;height:30px;border-radius:50%;background:var(--grad-soft);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:700;}
.sms-hd b{font-size:14px;}
.sms-hd small{display:block;font-size:11.5px;color:var(--muted-low);}
.sms{display:flex;flex-direction:column;gap:8px;}
.bub{max-width:82%;font-size:14px;line-height:1.45;padding:9px 13px;border-radius:16px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);}
.bub.show{opacity:1;transform:none;}
.bub.in{align-self:flex-start;background:var(--tint-2);color:var(--text);border-bottom-left-radius:5px;}
.bub.out{align-self:flex-end;background:linear-gradient(120deg,rgba(10,147,224,.24),rgba(58,107,255,.30));color:var(--text);border-bottom-right-radius:5px;}
.bub.sys{align-self:center;max-width:100%;font-family:'SF Mono',Consolas,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--success);background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.3);border-radius:999px;padding:6px 12px;}
.typing{align-self:flex-start;display:none;gap:4px;padding:10px 12px;border-radius:14px;background:var(--tint-2);}
.typing.show{display:inline-flex;}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:typing 1s infinite;}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,100%{opacity:.3}50%{opacity:1}}
.fu-lane{margin-bottom:16px;}
.fu-lane:last-child{margin-bottom:0;}
.fu-lane .k{display:block;margin-bottom:10px;}
.fu-track{list-style:none;position:relative;display:flex;flex-direction:column;gap:2px;padding-left:22px;}
.fu-track::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line-strong);}
.fu-track li{position:relative;font-size:14px;color:var(--muted);padding:6px 0;opacity:.3;transition:opacity .4s var(--ease);}
.fu-track li::before{content:"";position:absolute;left:-20px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);transition:background .3s,border-color .3s;}
.fu-track li.on{opacity:1;}
.fu-track li.on::before{background:var(--f2);border-color:var(--f2);box-shadow:0 0 10px rgba(58,107,255,.7);}
.fu-track li.end.on::before{background:var(--success);border-color:var(--success);box-shadow:none;}
.fu-track li b{color:var(--text);font-weight:600;}
.fu-track li .w{font-family:'SF Mono',Consolas,monospace;font-size:11px;color:var(--muted-low);margin-right:8px;}
.addon-note{margin-top:22px;font-size:14px;color:var(--muted-low);max-width:820px;}
@media(max-width:900px){.addons{grid-template-columns:1fr;}}

.price{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:stretch;}
.price-card{position:relative;border:1px solid rgba(58,107,255,.35);border-radius:24px;padding:30px;
  background:linear-gradient(160deg,rgba(58,107,255,.10),var(--card-strong) 45%);box-shadow:0 40px 90px -40px rgba(58,107,255,.45);}
.price-row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end;}
.price-row .amt{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:clamp(40px,5.4vw,60px);letter-spacing:-0.03em;line-height:1;}
.price-row .amt small{font-size:16px;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:4px;}
.price-row .lbl{display:block;font-family:'SF Mono',Consolas,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-low);margin-bottom:10px;}
.price-plus{font-size:28px;color:var(--muted-low);padding-bottom:6px;}
.price-card ul{list-style:none;margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
.price-card li{font-size:14.5px;color:var(--muted);display:flex;gap:10px;}
.price-card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);margin-top:9px;flex-shrink:0;}
.price-card .hero-ctas{justify-content:flex-start;margin-top:28px;}
.founding{border:1px solid var(--line);border-radius:24px;padding:30px;background:var(--card);display:flex;flex-direction:column;}
.founding .k{color:var(--success);}
.founding h3{font-size:clamp(24px,2.6vw,30px);margin-top:14px;}
.founding p{color:var(--muted);margin-top:12px;font-size:15px;}
.founding .seats{display:flex;gap:8px;margin-top:auto;padding-top:22px;}
.founding .seats i{flex:1;height:8px;border-radius:4px;background:rgba(0,229,160,.5);}
.price-foot{margin-top:18px;font-size:14px;color:var(--muted-low);}
.founding-note{margin-top:auto;padding-top:22px;font-size:13.5px;color:var(--muted-low);}
@media(max-width:900px){.price{grid-template-columns:1fr;}.price-card ul{grid-template-columns:1fr;}}

/* ───────────────────────── The header: one header on every page (decision 0113) ─────────────────────────
   Logo · Home · Systems ▾ · Start Growing → · ES, identical on the homepage and the
   six system pages, so it is styled once, here, and driven once, by adi.js.
   NO BAR AND NO HAIRLINE. Scrolled, the header sits on a fade from the page color
   (--nav-fade), not on a glass box with a rule under it: a line across the top
   of the network was a seam the page drew itself, and the same box over a plain
   page read as a second layer. The fade is near opaque behind the controls (>= .9)
   and gone by 136px, so content runs out under it instead of meeting an edge. */
header.nav{position:fixed;top:0;left:0;right:0;z-index:500;
  transition:opacity .7s var(--ease) .2s,transform .7s var(--ease) .2s,visibility 0s;}
header.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:136px;background:var(--nav-fade);opacity:0;pointer-events:none;transition:opacity .45s var(--ease);}
header.nav.scrolled::before{opacity:1;}
.nav-in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:74px;width:100%;padding:0 var(--pad);}
.nav-logo,.nav-links,.nav-cta{min-width:0;}
.nav-logo{grid-column:1;justify-self:start;}
.nav-logo img{height:58px;width:auto;display:block;}
.nav-links{grid-column:2;justify-self:center;display:flex;align-items:center;gap:34px;}
.nav-link{font-size:14.5px;color:var(--muted);transition:color .25s var(--ease);position:relative;}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--text);}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--grad);transition:right .3s var(--ease);}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{right:0;}
.nav-link:focus-visible{outline:2px solid var(--f3);outline-offset:4px;border-radius:4px;}
.nav-sys{background:none;border:0;padding:0;font:inherit;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.nav-sys[aria-expanded="true"]{color:var(--text);}
.nav-sys .chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease);}
.nav-sys[aria-expanded="true"] .chev{transform:translateY(1px) rotate(-135deg);}
.nav-cta{grid-column:3;justify-self:end;display:flex;align-items:center;gap:20px;}
/* LIGHT OR DARK (0114): the device decides until the reader does. One contrast
   icon for both directions, so nothing a script writes needs translating. */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:100px;border:1px solid var(--ls-line,var(--line-strong));background:var(--ls-bg,var(--tint));color:var(--ls-text,var(--muted));cursor:pointer;padding:0;transition:color .18s ease,border-color .18s ease,background .18s ease;}
.theme-btn:hover{color:var(--ls-text-hi,var(--text));border-color:var(--ls-line-hi,var(--line-strong));}
.theme-btn:focus-visible{outline:2px solid var(--f3);outline-offset:2px;}
.theme-btn svg{width:15px;height:15px;transition:transform .45s var(--ease);}
:root[data-theme="light"] .theme-btn svg{transform:rotate(180deg);}
@media(pointer:coarse){.theme-btn{width:42px;height:42px;}}
/* A page not yet on roles cannot go light, so it offers no switch (the voice page, for now). */
:root:not(.v5) .theme-btn{display:none;}
.burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:10px;background:var(--tint);align-items:center;justify-content:center;cursor:pointer;}
.burger span{width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s var(--ease),opacity .2s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* THE SYSTEMS PANEL: the six, one click each. Opens on click (never hover, never
   mousedown), closes on Escape, an outside click or a choice. The page you are on
   is marked, so the panel also says where you are. */
.sysmenu{position:absolute;top:100%;left:50%;width:min(1040px,calc(100% - 2 * var(--pad)));margin-top:6px;
  border:1px solid var(--line);border-radius:22px;background:var(--glass-solid);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:var(--shadow);padding:14px;transform:translate(-50%,-8px);opacity:0;transition:opacity .28s var(--ease),transform .28s var(--ease);}
.sysmenu.show{opacity:1;transform:translate(-50%,0);}
.sysmenu-in{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.smk{display:grid;grid-template-columns:112px 1fr;grid-template-rows:auto 1fr;column-gap:16px;align-items:start;padding:10px;border-radius:16px;border:1px solid transparent;transition:background .2s var(--ease),border-color .2s var(--ease);}
.smk:hover,.smk:focus-visible{background:var(--hover);border-color:var(--line);outline:none;}
.smk[aria-current="page"]{background:var(--sel);border-color:var(--sel-line);}
.smk .mini{grid-row:1/3;height:76px;}
.smk b{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:15.5px;color:var(--text);padding-top:6px;}
.smk span{font-size:13px;line-height:1.45;color:var(--muted);margin-top:4px;}
.sysmenu-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px;padding:12px 10px 4px;}
/* THE SIX ARE NOT THE LIMIT (0114): one open line, beside the six wherever they are listed. */
.sys-more{font-size:14px;font-weight:600;color:var(--text);}
/* Two phrase units: a line may break between the sentences, never inside one. */
.sys-more .u,.mm-more .u,.marks-more .u{display:inline-block;white-space:nowrap;}
.sys-more:hover{color:var(--cyan);}
.sys-more:hover .arr{transform:translateX(3px);}
@media(max-width:1100px){.sysmenu-in{grid-template-columns:repeat(2,1fr);}}
@media(max-width:820px){.sysmenu{display:none!important;}}

/* THE PHONE MENU: Home and Clients, then the six as tiles, the open line, then
   Start Growing (0115). Closed state is enforced by VISIBILITY, not only the
   transform: on iOS a fixed element is sized against the small viewport, so
   translateY(-100%) did not clear the screen and the panel's button sat across
   the header (a landscape iPhone, reported). */
.mobile-menu{position:fixed;inset:0;z-index:480;background:var(--glass-solid);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:92px var(--pad) calc(28px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;transform:translateY(-100%);visibility:hidden;pointer-events:none;transition:transform .45s var(--ease),visibility 0s linear .45s;}
.mobile-menu.open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .45s var(--ease),visibility 0s;}
@media(min-width:821px){.mobile-menu{display:none;}}
.mm-top{display:flex;gap:28px;align-items:baseline;}
.mm-home{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:22px;color:var(--text);padding:6px 0 14px;}
.mm-home[aria-current="page"]{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mm-k{margin-top:4px;}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mm-sys{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--card);}
.mm-sys[aria-current="page"]{border-color:var(--sel-line);background:var(--sel);}
.mm-sys .mini{height:64px;}
.mm-sys span{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:14.5px;color:var(--text);padding:0 4px 2px;}
.mm-more{font-size:15px;font-weight:600;color:var(--text);padding:8px 2px 0;}
.mobile-menu .mm-cta{margin-top:14px;width:100%;}

@media(max-width:1040px){.nav-links{gap:24px;}.nav-cta{gap:14px;}.nav-logo img{height:48px;}}
@media(max-width:820px){.nav-links{display:none;}.burger{display:flex;}}
@media(max-width:720px){.nav-cta .btn-primary{display:none;}.nav-logo img{height:42px;}}

/* ───────────────────────── The flow: the system pages' background (0116) ─────────────────────────
   The network belongs to the homepage. A system page gets the FLOW: an aurora made
   of the brand's own three stops, three long soft bands and two glows. Each band
   turns and breathes on its own slow cycle (CSS: rotate and scale), so it moves
   even when the page is still, and the scroll carries every shape along its own
   path (adi.js writes `translate`, a separate property, so the two never fight).
   Light has its own alphas: at the dark system's 9-11% a glow vanishes on a
   near-white page (founder, 16 Oct: "in light it looks like nothing"), so the
   tokens carry ~3x that there. Radial gradients only, no filter. */
/* LIGHT SURFACES ARE GLASS TOO (0118). The light system's cards and windows were
   solid white, while the dark ones are translucent over the flow; now both let the
   flow through (founder, 16 Oct: "not full transparency, but not solid white"):
   --card .55, --card-strong .58 (the windows, which also blur what is behind),
   --well a tinted .55 for the insets inside them. */
.orbs{position:fixed;inset:0;width:100%;height:100%;height:100lvh;z-index:0;pointer-events:none;overflow:hidden;}
.orbs i{position:absolute;left:0;top:0;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  background:radial-gradient(closest-side,var(--c) 0%,var(--c) 22%,transparent 100%);
  will-change:transform,translate;animation:flow var(--t) ease-in-out infinite alternate;}
@keyframes flow{from{rotate:var(--r0);scale:.92}to{rotate:var(--r1);scale:1.12}}
.orbs i:nth-child(1){--w:150vmax;--h:34vmax;--c:var(--orb-a);--t:26s;--r0:-14deg;--r1:10deg;translate:20vw 30vh;}
.orbs i:nth-child(2){--w:140vmax;--h:30vmax;--c:var(--orb-c);--t:32s;--r0:16deg;--r1:-8deg;translate:75vw 62vh;}
.orbs i:nth-child(3){--w:120vmax;--h:26vmax;--c:var(--orb-b);--t:22s;--r0:-30deg;--r1:-6deg;translate:60vw 20vh;}
.orbs i:nth-child(4){--w:48vmax;--h:48vmax;--c:var(--orb-a);--t:18s;--r0:0deg;--r1:40deg;translate:8vw 90vh;}
.orbs i:nth-child(5){--w:56vmax;--h:56vmax;--c:var(--orb-c);--t:20s;--r0:0deg;--r1:-40deg;translate:92vw 30vh;}
/* THE FLOW LINES (0117): four thin waves in the brand gradient over the aurora,
   drifting sideways in a seamless loop (each wave has a whole number of periods
   per 1440 units, so translating the group by -1440 lands on the same shape), and
   swaying with the scroll (adi.js writes the svg's `translate`). Strokes do not
   scale with the stretched viewBox (vector-effect). Gradient strokes only; no filter. */
.orbs .flowlines{position:absolute;left:0;top:0;width:100%;height:100%;opacity:var(--fl-op,.5);overflow:visible;}
.orbs .flowlines g{animation:flowx 70s linear infinite;}
.orbs .flowlines path{fill:none;stroke:url(#flg);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linecap:round;}
.orbs .flowlines .fl2{stroke-width:1;opacity:.7;}
.orbs .flowlines .fl3{stroke-width:2;opacity:.55;}
.orbs .flowlines .fl4{stroke-width:1;opacity:.45;}
@keyframes flowx{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
@media(prefers-reduced-motion:reduce){.orbs i,.orbs .flowlines g{animation:none;}}

/* ───────────────────────── The footer's layout (0114) ─────────────────────────
   The brand on the left; Systems, Clients and Company TOGETHER on the right, as one
   group, with the open space between the two (founder, 15 Oct). Equal-width
   columns had put Systems in the middle of the page, reading as a fourth block
   rather than one of three. Set once here, over the three base copies. */
.foot-grid{grid-template-columns:minmax(0,1fr) repeat(3,auto);column-gap:clamp(44px,5.5vw,88px);}
.foot-col{text-align:left;}
@media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr 1fr;column-gap:24px;}.foot-brand{grid-column:1/-1;}}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr 1fr;}}

/* reduced motion: every demo shows its finished state */
@media(prefers-reduced-motion:reduce){
  .nrow,.wf-step,.wf-card,.wf-sum,.pl-table tbody tr,.ag-trace li,.ag-result,.bub,.fu-track li,.pl-held{opacity:1!important;transform:none!important;}
}

/* ───────────────────────── The system reports (decision 0120) ─────────────────────────
   One form per system page, the missed-money report's layout on the shared tokens.
   Every choice is a real checkbox or radio inside a label, so the chips work by
   keyboard and screen reader; the input is hidden visually, never removed. */
.sr{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,60px);align-items:start;border:1px solid var(--line);border-radius:28px;padding:clamp(26px,5vw,54px);background:var(--card);}
.sr-copy .sec-title{margin-top:14px;}
.sr-pts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.sr-pts li{position:relative;padding-left:24px;color:var(--muted);font-size:14.5px;}
.sr-pts li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--grad);}
.sr-form{display:flex;flex-direction:column;gap:16px;position:relative;min-width:0;}
.sr-field{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0;min-width:0;}
.sr-field label,.sr-field legend{font-size:13px;color:var(--muted);font-weight:600;padding:0;}
.sr-field legend{margin-bottom:8px;}
.sr-field label span{color:var(--muted-low);font-weight:400;}
.sr-field input[type="number"],.sr-field input[type="email"],.sr-field input[type="text"]{background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:13px 15px;color:var(--text);font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-size:15px;width:100%;}
.sr-field input:focus{outline:none;border-color:var(--sel-line);background:var(--sel);}
.sr-field .sr-other{margin-top:4px;}
.sr-field .sr-other[hidden]{display:none;}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;}
.sr-chip{position:relative;cursor:pointer;}
.sr-chip input{position:absolute;opacity:0;width:1px;height:1px;}
.sr-chip span{display:inline-block;padding:9px 14px;border-radius:100px;border:1px solid var(--line-strong);background:var(--tint);font-size:13.5px;color:var(--text);transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);}
.sr-chip:hover span{border-color:var(--hov-line);}
.sr-chip input:checked + span{background:var(--grad);border-color:transparent;color:#fff;}
.sr-chip input:focus-visible + span{outline:2px solid var(--f3,#7C4DFF);outline-offset:2px;}
.sr-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.sr-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.5;cursor:pointer;}
.sr-check input{margin-top:2px;flex-shrink:0;}
.sr-form .btn{align-self:flex-start;}
.sr-result{border-radius:12px;padding:16px 18px;background:var(--grad-soft);border:1px solid var(--hov-line);font-size:15px;color:var(--text);}
.sr-note{font-size:12px;color:var(--muted-low);margin:0;}
.sr-note a{color:var(--muted);text-decoration:underline;}
@media(max-width:900px){.sr{grid-template-columns:1fr;}}
/* iOS zooms into any input under 16px and never zooms back. */
@media(pointer:coarse){.sr-field input[type="number"],.sr-field input[type="email"],.sr-field input[type="text"]{font-size:16px;}.sr-chip span{padding:11px 15px;}}
/* The title sits in half a card, so it takes a column's scale, and its lines are
   balanced so no phrase breaks ("repeats by / hand." was the case). */
.sr .sec-title{font-size:clamp(30px,3.3vw,46px);text-wrap:balance;}

/* ───────────────────────── Make it yours + Workflows: one job, end to end (0121) ───────────────────────── */
.mk{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:22px;}
.mk-f{display:flex;flex-direction:column;gap:6px;flex:1 1 180px;min-width:0;}
.mk-f label{font-family:'SF Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted-low);}
.mk-f input,.mk-f select{background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--text);font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-size:15px;width:100%;}
.mk-f select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px;}
.mk-f select option{color:#0A0F1E;}
.mk-f input:focus,.mk-f select:focus{outline:none;border-color:var(--sel-line);background-color:var(--sel);}
.mk .mk-run{padding:12px 20px;}
@media(pointer:coarse){.mk-f input,.mk-f select{font-size:16px;}}

.wj-lane{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative;}
/* Connectors sit in the gaps only: a line behind the glass cards showed through them. */
.wj-app:not(:last-child)::after{content:"";position:absolute;right:-12px;top:30px;width:12px;height:2px;background:var(--line-strong);}
.wj-app.done:not(:last-child)::after{background:var(--grad);}
.wj-app{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card-strong);min-height:150px;opacity:.55;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);}
.wj-app .wj-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--tint-2);color:var(--muted);transition:background .35s var(--ease),color .35s var(--ease);}
.wj-app .wj-ic svg{width:17px;height:17px;}
.wj-app .k{font-family:'SF Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted-low);}
.wj-app .wj-h{font-size:14px;font-weight:700;color:var(--text);line-height:1.3;}
.wj-app .wj-s{font-size:12.5px;color:var(--muted);line-height:1.45;}
.wj-app .wj-ok{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#fff;background:var(--grad);opacity:0;transform:scale(.6);transition:opacity .3s var(--ease),transform .3s var(--ease);}
.wj-app.run{opacity:1;transform:none;border-color:var(--sel-line);box-shadow:0 0 0 4px var(--sel);}
.wj-app.run .wj-ic{background:var(--grad);color:#fff;}
.wj-app.done{opacity:1;transform:none;}
.wj-app.done .wj-ic{background:var(--grad-soft);color:var(--text);}
.wj-app.done .wj-ok{opacity:1;transform:none;}
.wj-meter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;}
.wj-meter>div{border:1px solid var(--line-soft);border-radius:14px;padding:12px 14px;background:var(--tint);}
.wj-meter .k{display:block;font-size:12px;color:var(--muted);}
.wj-meter b{display:block;margin-top:4px;font-family:'SF Mono',monospace;font-size:22px;color:var(--text);}
.wj-meter>div:first-child b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.wj-sum{margin:16px 0 0;font-size:15px;color:var(--text);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);min-height:1.5em;}
.wj-sum.show{opacity:1;transform:none;}
@media(max-width:900px){
  .wj-lane{grid-template-columns:1fr;}
  .wj-app:not(:last-child)::after{right:auto;left:27px;top:auto;bottom:-12px;width:2px;height:12px;}
  .wj-app{min-height:0;display:grid;grid-template-columns:32px 1fr;column-gap:12px;row-gap:3px;padding:12px 44px 12px 12px;}
  .wj-app .wj-ic{grid-row:1/span 3;}
  .wj-meter{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){.wj-app,.wj-sum{transition:none;transform:none;}}

/* ───────────────────────── Vector: where Start Growing lands (decision 0122) ─────────────────────────
   Two columns on a desktop: who Vector is and how a conversation ends, beside the
   conversation itself, which fills the screen's height and scrolls inside its own
   window. On a phone the conversation comes first; the identity follows. */
.vx-stage{padding:clamp(96px,12vh,128px) 0 clamp(32px,5vh,56px);}
/* The conversation takes the larger share (0.8 / 1.2): with the plan beside it
   the panel needs ~580px before the rail fits (founder, 16 Oct 2026). */
.vx-grid{display:grid;grid-template-columns:minmax(0,0.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:start;}
/* The right column is the two ways to talk to Vector, typed and spoken; the left is
   what Vector does. With the line under the identity the left ran ~560px past the
   chat and the right stood empty (founder, 19 Oct 2026). The identity spans both
   rows and stays stuck, so the two columns end together at the bottom. */
.vx-grid{grid-template-areas:"id chat" "id line";row-gap:24px;}
.vx-id{position:sticky;top:110px;grid-area:id;}
.vx-chat{grid-area:chat;}
.vx-line{grid-area:line;}
.vx-h1{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-0.035em;margin:14px 0 18px;text-wrap:balance;}
.vx-steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.vx-steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;}
.vx-steps .n{font-family:'SF Mono',monospace;font-size:11px;letter-spacing:0.1em;color:var(--muted-low);padding-top:3px;}
.vx-steps b{display:block;font-size:15.5px;color:var(--text);}
.vx-steps li span:not(.n){display:block;font-size:14px;line-height:1.55;color:var(--muted);margin-top:3px;}
.vx-six{margin-top:28px;}
.vx-six .k{display:block;font-family:'SF Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted-low);margin-bottom:10px;}
.vx-chips{display:flex;flex-wrap:wrap;gap:7px;}
.vx-chips span{padding:7px 12px;border-radius:100px;border:1px solid var(--line);background:var(--tint);font-size:12.5px;color:var(--muted);}
.vx-chips span.more{border-style:dashed;}
.vx-chips span.big{color:var(--text);border-color:var(--hov-line);background:var(--grad-soft);}
/* VECTOR'S LINE (founder, 16 Oct 2026): the number is the hero, Vector's wave is
   the presence, one sentence says what happens on the call. Glass surface with a
   hairline that takes the flow at its top edge, the card's one gradient moment. */
.vx-line{position:relative;padding:22px 22px 18px;border:1px solid var(--line-strong);border-radius:22px;
  background:var(--glass-solid);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden;}
.vx-line::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#0A93E0 20%,#3A6BFF 50%,#7C4DFF 80%,transparent);opacity:.9;}
.vx-line-k{display:flex;align-items:center;gap:10px;font-family:'SF Mono',ui-monospace,Consolas,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-low);}
.vx-line-wave{width:40px;height:16px;flex-shrink:0;overflow:hidden;}
.vx-line-wave path{fill:none;stroke:url(#vxg);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.vx-line-wave g{transform-box:view-box;transform-origin:0 50%;}
.vx-line-wave .w1{transform:scaleY(.6);}.vx-line-wave .w2{transform:scaleY(.4);}
.vx-line-wave .w1 path{animation:vxflow 4s linear infinite;}
.vx-line-wave .w2 path{animation:vxflow 6s linear infinite reverse;opacity:.5;}
.vx-line-num{display:inline-block;margin-top:12px;font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;
  font-size:clamp(30px,3.4vw,40px);line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text);
  text-decoration:none;white-space:nowrap;}
.vx-line-num:hover{color:var(--text);}
.vx-line-s{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:46ch;}
.vx-line-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.vx-line-note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted-low);}
@media(max-width:520px){.vx-line-acts .btn{flex:1 1 100%;justify-content:center;}}
@media(prefers-reduced-motion:reduce){.vx-line-wave path{animation:none;}}

.vx-chat{padding:0;display:flex;flex-direction:column;height:calc(100svh - 150px);min-height:560px;max-height:860px;overflow:hidden;}
/* ── SIGNAL: Vector as a presence, not a face (founder, 16 Oct 2026) ──
   The wave idles, runs while Vector thinks and moves as it writes; the word on the
   right says which. data-state on .vx-chat is set by the page's script. */
.vx-chat{container-type:inline-size;}
.vx-head{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:14px 18px;position:relative;}
.vx-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-soft);}
.vx-head::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:34%;background:var(--grad);opacity:0;transform:translateX(-100%);}
.vx-chat[data-state="thinking"] .vx-head::before{opacity:1;animation:vxsweep 1.3s var(--ease) infinite;}
@keyframes vxsweep{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
.vx-wave{width:64px;height:24px;flex-shrink:0;overflow:hidden;}
.vx-wave path{fill:none;stroke:url(#vxg);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.vx-wave g{transform-box:view-box;transform-origin:0 50%;transition:transform .5s var(--ease);}
.vx-wave .w1 path{animation:vxflow 5s linear infinite;}
.vx-wave .w2 path{animation:vxflow 7s linear infinite reverse;opacity:.55;}
.vx-wave .w3 path{animation:vxflow 3.4s linear infinite;opacity:.35;}
@keyframes vxflow{from{transform:translateX(0)}to{transform:translateX(-32px)}}
.vx-wave .w1{transform:scaleY(.45);}.vx-wave .w2{transform:scaleY(.3);}.vx-wave .w3{transform:scaleY(.2);}
.vx-chat[data-state="thinking"] .vx-wave .w1{transform:scaleY(1.1);}
.vx-chat[data-state="thinking"] .vx-wave .w2{transform:scaleY(.9);}
.vx-chat[data-state="thinking"] .vx-wave .w3{transform:scaleY(1.2);}
.vx-chat[data-state="thinking"] .vx-wave path{animation-duration:1.1s;}
.vx-chat[data-state="writing"] .vx-wave .w1{transform:scaleY(.8);}
.vx-chat[data-state="writing"] .vx-wave .w3{transform:scaleY(.7);}
.vx-chat[data-state="writing"] .vx-wave path{animation-duration:2s;}
.vx-who{display:flex;align-items:baseline;gap:8px;min-width:0;}
.vx-who b{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--text);}
.vx-who span{font-family:'SF Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted-low);}
.vx-state{margin-left:auto;font-family:'SF Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--cyan);white-space:nowrap;}
.vx-state span{display:none;}
.vx-chat[data-state="idle"] .vx-state [data-s="idle"],.vx-chat[data-state="thinking"] .vx-state [data-s="thinking"],
.vx-chat[data-state="writing"] .vx-state [data-s="writing"]{display:inline;}
.vx-chat[data-state="thinking"] .vx-state{animation:vxblink 1.1s ease-in-out infinite;}
@keyframes vxblink{50%{opacity:.45}}

/* ── PLAN: beside the conversation when the panel is wide, a strip above the input
   when it is not. One grid; only the areas move. ── */
.vx-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto;
  grid-template-areas:"thread" "plan" "composer" "note";}
.vx-main .vx-thread{grid-area:thread;min-height:0;}
.vx-main .vx-composer{grid-area:composer;}
.vx-main .vx-note{grid-area:note;}
.vx-plan{grid-area:plan;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 14px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--tint);}
.vx-plan-k{font-family:'SF Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted-low);}
.vx-rail{list-style:none;margin:0;padding:0;display:flex;gap:6px;}
.vx-rail li{display:none;font-size:12.5px;font-weight:600;color:var(--text);}
.vx-plan[data-stage="0"] .vx-rail li[data-at="1"],.vx-plan[data-stage="1"] .vx-rail li[data-at="1"],
.vx-plan[data-stage="2"] .vx-rail li[data-at="2"],.vx-plan[data-stage="3"] .vx-rail li[data-at="3"]{display:inline;}
.vx-plan[data-stage="0"] .vx-rail li{color:var(--muted-low);font-weight:500;}
.vx-sys{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:5px;}
.vx-sys li{opacity:.32;transition:opacity .5s var(--ease),filter .5s var(--ease);filter:saturate(.2);}
.vx-sys li.on{opacity:1;filter:none;}
.vx-sys .win-mark{width:30px;height:18px;border-radius:6px;}
.vx-sys .win-mark .mini{width:150px;height:90px;transform:scale(.2);border-radius:30px;border-width:5px;}
.vx-sys li.on .win-mark{box-shadow:0 0 0 1px var(--sel-line),0 0 14px -2px rgba(58,107,255,.6);}
.vx-sys-n,.vx-plan-hint{display:none;}
/* A phone's strip is one line: the stage word and the six marks; the eyebrow goes. */
@container (max-width:440px){.vx-plan-k{display:none;}.vx-plan{flex-wrap:nowrap;}.vx-sys{gap:4px;}}
@container (min-width:580px){
  .vx-main{grid-template-columns:minmax(0,1fr) 184px;grid-template-rows:minmax(0,1fr) auto auto;
    grid-template-areas:"thread plan" "composer plan" "note plan";}
  .vx-plan{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:16px;margin:0;padding:22px 16px;border:0;border-left:1px solid var(--line-soft);border-radius:0;background:var(--tint);overflow-y:auto;}
  .vx-rail{flex-direction:column;gap:10px;position:relative;padding-left:16px;}
  .vx-rail::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line-strong);}
  .vx-rail li,.vx-plan[data-stage] .vx-rail li{display:block;position:relative;font-size:13px;font-weight:500;color:var(--muted-low);}
  .vx-rail li::before{content:"";position:absolute;left:-16px;top:5px;width:9px;height:9px;border-radius:50%;border:1px solid var(--line-strong);background:var(--bg);transition:background .4s var(--ease),border-color .4s var(--ease);}
  .vx-plan[data-stage="1"] .vx-rail li[data-at="1"],.vx-plan[data-stage="2"] .vx-rail li[data-at="2"],.vx-plan[data-stage="3"] .vx-rail li[data-at="3"]{color:var(--text);font-weight:600;}
  .vx-plan[data-stage="1"] .vx-rail li[data-at="1"]::before,.vx-plan[data-stage="2"] .vx-rail li[data-at="1"]::before,.vx-plan[data-stage="2"] .vx-rail li[data-at="2"]::before,
  .vx-plan[data-stage="3"] .vx-rail li::before{background:var(--grad);border-color:transparent;}
  .vx-sys{flex-direction:column;gap:8px;margin:0;}
  .vx-sys li{display:flex;align-items:center;gap:10px;}
  .vx-sys .win-mark{width:40px;height:24px;}
  .vx-sys .win-mark .mini{transform:scale(.2667);}
  .vx-sys-n{display:inline;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;}
  .vx-plan-hint{display:block;margin:auto 0 0;font-size:12px;line-height:1.5;color:var(--muted-low);}
  .vx-plan:has(.vx-sys li.on) .vx-plan-hint{display:none;}
}
@media(prefers-reduced-motion:reduce){.vx-wave path,.vx-head::before,.vx-state{animation:none!important;}}
.vx-thread{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 20px 12px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;}
.vx-thread .msg{max-width:84%;padding:12px 15px;border-radius:18px;font-size:15px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;}
.vx-thread .msg .who{display:block;font-family:'SF Mono',monospace;font-size:9px;letter-spacing:0.16em;text-transform:uppercase;opacity:.62;margin-bottom:5px;}
.vx-thread .msg.bot{align-self:flex-start;max-width:92%;padding:2px 0 2px 14px;border-radius:0;background:none;border:0;border-left:2px solid transparent;
  border-image:var(--grad) 1;color:var(--text);font-size:15.5px;}
.vx-thread .msg.bot .who{display:none;}
.vx-thread .msg .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.vx-thread .msg.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:6px;box-shadow:0 8px 22px -10px rgba(58,107,255,0.6);}
.vx-starts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.vx-start{font:inherit;font-size:13.5px;color:var(--text);padding:9px 14px;border-radius:100px;border:1px solid var(--line-strong);background:var(--tint);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);}
.vx-start:hover{border-color:var(--hov-line);background:var(--sel);}
.vx-thread .typing{align-self:flex-start;display:inline-flex;gap:5px;padding:13px 15px;border-radius:18px;background:var(--card-strong);border:1px solid var(--line);}
.vx-thread .typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:vxdot 1.2s ease-in-out infinite;}
.vx-thread .typing span:nth-child(2){animation-delay:.18s;}.vx-thread .typing span:nth-child(3){animation-delay:.36s;}
@keyframes vxdot{0%,80%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}
.vx-thread .err{align-self:center;font-size:13px;color:var(--neg-t,#C2362F);padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--tint);}
.vx-thread .cta-card{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 18px;border-radius:16px;border:1px solid var(--hov-line);background:var(--grad-soft);}
.vx-thread .cta-card .t{font-weight:700;color:var(--text);}
.vx-thread .cta-card .s{font-size:13.5px;color:var(--muted);margin-top:2px;}
.vx-composer{flex-shrink:0;display:flex;align-items:flex-end;gap:10px;margin:0 14px;padding:10px 10px 10px 16px;border:1px solid var(--line-strong);border-radius:18px;background:var(--tint);transition:border-color .2s var(--ease),background .2s var(--ease);}
.vx-composer:focus-within{border-color:var(--sel-line);background:var(--sel);}
.vx-composer textarea{flex:1;border:0;background:transparent;resize:none;color:var(--text);font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-size:15.5px;line-height:1.5;padding:6px 0;max-height:160px;outline:none;}
.vx-composer textarea::placeholder{color:var(--muted-low);}
.vx-composer .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.vx-send{flex-shrink:0;width:42px;height:42px;border-radius:12px;border:0;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--btn-shadow);transition:transform .2s var(--ease),opacity .2s var(--ease);}
.vx-send svg{width:19px;height:19px;}
.vx-send:hover{transform:translateY(-1px);}
.vx-send:disabled{opacity:.5;cursor:default;transform:none;}
.vx-note{flex-shrink:0;margin:0;padding:10px 18px 14px;font-size:11.5px;line-height:1.55;color:var(--muted-low);}
.vx-note a{color:var(--muted);text-decoration:underline;}
@media(max-width:900px){
  .vx-grid{grid-template-columns:1fr;grid-template-areas:none;row-gap:0;}
  .vx-chat{order:-1;height:calc(100svh - 120px);min-height:480px;}
  /* A phone keeps its order: chat, identity, the line, then the chips. The identity
     dissolves so the line (a sibling now) can sit between the steps and the chips;
     the gap after the chat is a margin because the dissolved children would each
     take a row gap. */
  .vx-chat{margin-bottom:clamp(28px,5vw,64px);}
  .vx-id{display:contents;}
  .vx-id,.vx-chat,.vx-line{grid-area:auto;}
  .vx-line{margin-top:26px;}
  .vx-six{order:1;}
  /* As grid items the margins no longer collapse: the headline's 18px under it and
     the lead's 20px above it would add up, so the lead's alone stands. */
  .vx-id .vx-h1{margin-bottom:0;}
  /* The eyebrow sat in a line box (inline-block), ~5px below its top; as an item it
     loses that, so it takes it as margin and the phone page stays where it was. */
  .vx-id .eyebrow{justify-self:start;margin-top:5px;}
  .vx-stage{padding-top:92px;}
}
@media(pointer:coarse){.vx-composer textarea{font-size:16px;}.vx-start{padding:11px 15px;}}
@media(prefers-reduced-motion:reduce){.vx-thread .typing span{animation:none;}.vx-thread{scroll-behavior:auto;}}

/* "Built to run." never breaks (here, not adi-base: the homepage and the voice
   page carry their own copy of the base styles). */
.foot-bot .nw{white-space:nowrap;}
/* The footer's three lines, one per line, as on the homepage (0122). */
.foot-brand .foot-lines{max-width:none;}
.foot-brand .foot-lines .ln{display:block;}

/* ───────────────────────── Phones, after Vercel's (founder, 16 Oct 2026) ─────────────────────────
   The bar carries the logo and the menu and nothing else; light/dark and the
   language move into the menu (adi.js puts them there, so no page's header markup
   changes). The menu is a column of large items, the six behind one disclosure,
   the switches, then Start Growing across the width. Hero buttons stack full width.
   Long pages get a way back to the top. */
@media(max-width:820px){
  .nav-cta .theme-btn,.nav-cta .ls{display:none;}
  .burger{border:0;background:none;width:44px;height:44px;gap:7px;border-radius:10px;}
  .burger span{width:22px;height:1.5px;}
  .burger span:nth-child(2){display:none;}
  .burger.open span:nth-child(1){transform:translateY(4.25px) rotate(45deg);}
  .burger.open span:nth-child(3){transform:translateY(-4.25px) rotate(-45deg);}
  .burger:focus-visible{outline:2px solid var(--f3);outline-offset:2px;}
  /* Scrolled, the bar's own height is solid so nothing reads through the logo;
     the fade below it keeps the no-hairline rule (0113). */
  header.nav::before{height:112px;background:linear-gradient(180deg,var(--glass-solid) 0,var(--glass-solid) 72px,transparent 100%);}

  .mobile-menu{gap:0;padding-top:92px;}
  .mm-top{flex-direction:column;gap:0;align-items:stretch;}
  .mm-home,.mm-acc{display:flex;align-items:center;justify-content:space-between;width:100%;
    font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-weight:500;font-size:28px;letter-spacing:-0.02em;line-height:1.2;
    color:var(--muted);padding:12px 0;background:none;border:0;cursor:pointer;text-align:left;}
  .mm-home[aria-current="page"]{color:var(--text);background:none;-webkit-text-fill-color:currentColor;}
  .mm-acc .chev{width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease);margin-right:6px;}
  .mobile-menu.sys-open .mm-acc{color:var(--text);}
  .mobile-menu.sys-open .mm-acc .chev{transform:translateY(2px) rotate(-135deg);}
  .mobile-menu.mm-js .mm-k{display:none;}
  .mobile-menu.mm-js .mm-grid,.mobile-menu.mm-js .mm-more{display:none;}
  .mobile-menu.sys-open .mm-grid{display:grid;}
  .mobile-menu.sys-open .mm-more{display:block;}
  .mm-grid{grid-template-columns:1fr;gap:2px;margin:2px 0 6px;}
  .mm-sys{flex-direction:row;align-items:center;gap:14px;padding:11px 14px;border:0;border-radius:12px;background:none;}
  .mm-sys[aria-current="page"]{background:var(--sel);}
  .mm-sys .mini{display:none;}  /* drawn for tiles; squeezed into a row they read broken */
  .mm-sys span{font-family:'Satoshi','Satoshi Fallback',system-ui,sans-serif;font-weight:500;font-size:17px;padding:0;}
  .mm-more{font-size:15px;padding:10px 10px 4px;}
  .mm-tools{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft);}
  .mm-tools .theme-btn,.mm-tools .ls{display:inline-flex;}
  .mobile-menu .mm-cta{margin-top:18px;border-radius:999px;}
}
@media(max-width:720px){
  .hero-ctas{flex-direction:column;align-items:stretch;gap:12px;width:100%;max-width:440px;margin-left:auto;margin-right:auto;}
  .hero-ctas .btn{width:100%;border-radius:999px;}
  .sp-runs{display:flex;flex-direction:column;gap:3px;padding:12px 18px;border-radius:18px;text-wrap:balance;}
}

/* Back to the top: phones only, on a page more than three screens long, once the
   reader is a screen and a half down. It rides above the path bar when that bar
   is up (--lift, the bar's measured height, set by adi.js), with a gap so the two
   never touch, and it is part-transparent so it does not compete with the text it
   floats over; touching or focusing it brings it to full strength. */
.to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom) + var(--lift,0px));z-index:460;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:var(--glass-solid);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);display:grid;place-items:center;
  box-shadow:0 10px 30px -12px rgba(0,0,0,0.45);cursor:pointer;padding:0;
  opacity:0;transform:translateY(12px) scale(.92);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),bottom .3s var(--ease);}
.to-top.show{opacity:.62;transform:none;pointer-events:auto;}
.to-top.show:hover,.to-top.show:active,.to-top.show:focus-visible{opacity:1;}
.to-top svg{width:18px;height:18px;}
.to-top:focus-visible{outline:2px solid var(--f3);outline-offset:3px;}
@media(min-width:821px){.to-top{display:none;}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none;}}

/* ───────────────────────── The footer's two marks (founder, 16 Oct 2026) ─────────────────────────
   The full logo's proportions turned round: the WORDMARK alone at the top, at the
   height the logo's icon had, and the ICON alone at the foot, at about the height
   the logo's wordmark had, just above the rule and the copyright (as Vercel closes
   its footer on the triangle). On every page, at every width. */
footer .foot-brand img.foot-wm{height:40px;width:auto;margin-bottom:10px;}
.foot-mark{line-height:0;}
.foot-mark img{height:26px;width:auto;}
footer .foot-end + .foot-bot{margin-top:22px;}
/* The copyright is two lines on a phone, the short one first:
   "© 2026 Vectflow" / "Autonomous digital infrastructure. Built to run."
   (three on the narrowest, breaking between the two sentences, never inside one).
   Wider, they share one line with a dot between. */
.foot-copy .fc-line{white-space:normal;}
@media(max-width:720px){
  footer .foot-bot{flex-direction:column;align-items:flex-start;gap:12px;}
  .foot-copy .fc-sep{display:none;}
  .foot-copy > .nw,.foot-copy .fc-line{display:block;}
  .foot-copy > .nw{margin-bottom:2px;}
  /* Systems and Clients side by side; Company under Clients, on the right, where
     the shorter column leaves room (Systems has six links, Clients three). */
  footer .foot-grid{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:32px;}
  footer .foot-brand{grid-column:1/-1;}
  footer .foot-sys{grid-column:1;grid-row:2 / span 2;}
  footer .foot-cli{grid-column:2;grid-row:2;}
  footer .foot-co{grid-column:2;grid-row:3;}
  footer .foot-col{text-align:left;}
}

/* The path bar on pages whose bar adi.js drives (data-bar): the page reserves the
   bar's measured height (79px + the home-indicator inset), as /voice-agents does. */
@media(max-width:720px){
  body:has(.path-bar[data-bar]){padding-bottom:calc(79px + env(safe-area-inset-bottom));}
}
/* The brand lines never break inside a sentence on any page (the homepage's own
   rule, now everyone's): sized to the column, the longest is 26.1em in Satoshi. */
footer .foot-brand{container-type:inline-size;}
footer .foot-lines .ln{white-space:nowrap;font-size:min(14.5px,3.7cqi);}
/* The column headings read apart from their links (founder, 16 Oct 2026: "they
   read as a single thing"): the azure label tint, which the brand gives labels,
   one size up. The links stay muted. */
footer .foot-col h4{color:var(--cyan);font-size:12px;}

/* ───────────────────────── The footer's last row (founder, 16 Oct 2026, after Vercel's) ─────────────────────────
   The icon on the left; on the right, the status light and the agent view. The
   theme is NOT here: it lives in the header and the phone menu, and a second
   control for one setting was redundancy (founder, 16 Oct). Phones wrap the right
   group under the icon. */
footer .foot-end{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;margin-top:56px;}
.foot-util{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
/* The light says only what it measured (site_status.py): no answer, no light. */
.foot-status{display:none;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:0;}
.foot-status[data-status="ok"],.foot-status[data-status="degraded"]{display:inline-flex;}
.foot-status .fs-t{display:none;}
.foot-status[data-status="ok"] .fs-t[data-s="ok"],.foot-status[data-status="degraded"] .fs-t[data-s="degraded"]{display:inline;}
/* Azure is the brand's "running"; amber its "a person decides", never an error red. */
.fs-dot{width:8px;height:8px;border-radius:50%;background:var(--f1);box-shadow:0 0 0 3px rgba(10,147,224,0.18);flex:none;}
.foot-status[data-status="degraded"] .fs-dot{background:#FFB547;box-shadow:0 0 0 3px rgba(255,181,71,0.2);}
.foot-agent:focus-visible{outline:2px solid var(--f3);outline-offset:2px;}
.foot-agent{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);
  transition:color .2s var(--ease),border-color .2s var(--ease);}
.foot-agent:hover{color:var(--text);border-color:var(--line-strong);}
.foot-agent svg{width:17px;height:17px;}
@media(pointer:coarse){.foot-agent{width:44px;height:44px;}}
/* Phones keep ONE line: the icon on the left, the light and the robot on the right,
   level with it (founder, 16 Oct 2026). The longest label, Spanish "Todos los
   sistemas funcionan", leaves ~40px spare at 360px. */
@media(max-width:720px){footer .foot-end{flex-wrap:nowrap;}.foot-util{flex-wrap:nowrap;gap:12px;}.foot-status{white-space:nowrap;}}

/* The footer's line to Vector (founder, 16 Oct 2026): the label in the column's
   voice, the number beneath it in tabular figures, so it reads as a number and not
   as one more link. */
footer .foot-col a.foot-line{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);}
footer .foot-line .fl-k{font-size:12.5px;color:var(--muted-low);}
footer .foot-line .fl-n{font-family:'Montserrat','Montserrat Fallback',sans-serif;font-weight:600;font-size:15.5px;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
footer .foot-line:hover .fl-n{color:var(--cyan,#0A93E0);}