/* the product OS, the team layer on top of site.css (Design System v3).
   Same light, product-first look as the public site. Path colours are points only. */

:root{
  --path-learn:var(--accent); --path-sell:#D1247A; --path-demo:#896BED; --path-deliver:#10A284; --path-build:var(--brand-primary);
}

/* ---------- chrome ---------- */
.lockup .word .os{ display:inline-block; margin-left:6px; padding:3px 7px 2px; border-radius:6px; font:500 12px/1 var(--f-mono); letter-spacing:.04em; vertical-align:4px; background:var(--ink-900); color:#fff; }
.team-close .lockup .word .os, .nav.on-night:not(.scrolled) .lockup .word .os{ background:#fff; color:var(--ink-900); }
.team-nav ul a{ display:flex; align-items:center; gap:8px; }
.pd{ width:7px; height:7px; border-radius:50%; background:var(--c); flex:none; }
.cmd-trigger{ display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 8px 0 14px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:rgba(255,255,255,.75); color:var(--slate-500); cursor:pointer; font-size:14px; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.cmd-trigger:hover{ border-color:var(--ink-900); background:#fff; color:var(--ink-900); }
.cmd-trigger svg{ width:15px; height:15px; }
kbd, .kb{ font:500 11.5px/1 var(--f-mono); padding:5px 7px; border-radius:6px; background:var(--surface-3); color:var(--slate-500); border:1px solid var(--line); }
.btn .kb{ background:rgba(0,31,74,.06); border-color:transparent; }
.team-nav .links{ margin-left:auto; }
.team-nav .cmd-trigger{ margin-left:8px; }
@media (max-width:980px){ .team-nav .cmd-trigger{ display:none; } }

/* ---------- status chips ---------- */
.st{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:var(--r-pill); font:500 11px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; background:var(--surface-3); color:var(--slate-500); }
.st::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st.live{ background:#e7f7f1; color:#0a7d5f; }
.st.new{ background:#e8f6fd; color:#0b74a8; }
.st.moving{ background:#f3efff; color:#6a4fd6; }
.st.planned{ background:var(--surface-3); color:var(--slate-500); }
.st.gated{ background:#fff4e0; color:#8a5a00; }

/* ---------- hero ---------- */
.os-hero{ padding-bottom:clamp(40px, 6vw, 72px); }
.os-hero .hero-copy{ max-width:1040px; }
.path-hero .eyebrow i{ width:8px; height:8px; border-radius:50%; background:var(--pc); }

/* ---------- command bar ---------- */
.cmd{ position:relative; max-width:760px; margin-top:12px; }
.cmd-box{ position:relative; display:flex; align-items:center; gap:14px; height:68px; padding:0 12px 0 24px; border-radius:var(--r-pill); background:#fff; box-shadow:var(--shadow-frame); transition:box-shadow var(--t-mid) var(--ease); }
.cmd-box:focus-within{ box-shadow:0 0 0 2px var(--blue-600), var(--shadow-frame); }
.cmd-box svg.mag{ width:20px; height:20px; color:var(--slate-500); flex:none; }
.cmd-box input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font:400 19px/1 var(--f-sans); color:var(--ink-900); }
.cmd-box input::placeholder{ color:transparent; }
.cmd-ph{ position:absolute; left:58px; right:120px; top:50%; transform:translateY(-50%); pointer-events:none; font-size:19px; color:var(--slate-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-ph .caret{ display:inline-block; width:1.5px; height:1.05em; vertical-align:-3px; margin-left:2px; background:var(--blue-600); animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.cmd-box.typing .cmd-ph{ display:none; }
.cmd-box .go{ flex:none; }
.cmd-res{ list-style:none; margin:10px 0 0; padding:8px; border-radius:var(--r-5); background:#fff; box-shadow:var(--shadow-frame); max-height:min(420px, 56vh); overflow:auto; }
.cmd-res[hidden]{ display:none; }
.cmd-res .grp{ padding:12px 12px 6px; font:400 11.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); }
.cmd-res a{ display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px; border-radius:var(--r-4); text-decoration:none; transition:background var(--t-fast) var(--ease); }
.cmd-res a .pd{ width:8px; height:8px; }
.cmd-res a b{ display:block; font-weight:500; color:var(--ink-900); }
.cmd-res a span.d{ display:block; font-size:14px; color:var(--slate-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmd-res a[aria-selected="true"], .cmd-res a:hover{ background:var(--blue-50); }
.cmd-res .empty{ padding:18px 12px; color:var(--slate-500); font-size:15px; }
.cmd-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.cmd-chips .chip{ background:rgba(255,255,255,.6); }

/* palette overlay */
.palette{ position:fixed; inset:0; z-index:90; display:grid; justify-items:center; align-items:start; padding:12vh 16px 16px; background:rgba(0,20,50,.32); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity var(--t-mid) var(--ease); }
.palette.open{ opacity:1; pointer-events:auto; }
.palette .cmd{ width:100%; max-width:680px; margin:0; transform:translateY(-10px) scale(.98); transition:transform var(--t-mid) var(--ease); }
.palette.open .cmd{ transform:none; }
.palette .cmd-box{ height:60px; border-radius:18px; }
.palette .cmd-res{ border-radius:18px; }

/* ---------- path strip under the hero ---------- */
.pathstrip{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; margin-top:clamp(48px, 6vw, 72px); }
.pathstrip a{ position:relative; display:grid; gap:10px; align-content:start; padding:20px 20px 22px; border-radius:var(--r-5); background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 0 0 1px rgba(0,31,74,.06); text-decoration:none; transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background var(--t-mid) var(--ease); }
.pathstrip a:hover{ transform:translateY(-3px); background:#fff; box-shadow:var(--shadow-pop); }
.pathstrip .n{ font:400 12px/1 var(--f-mono); color:var(--slate-400); display:flex; justify-content:space-between; align-items:center; }
.pathstrip .n i{ width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.pathstrip b{ font:500 22px/1.1 var(--f-sans); letter-spacing:-.02em; color:var(--ink-900); }
.pathstrip span.l{ font-size:14.5px; line-height:1.45; color:var(--slate-500); }
.pathstrip .cnt{ font:400 12px/1 var(--f-mono); color:var(--slate-500); }
@media (max-width:1060px){ .pathstrip{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:640px){ .pathstrip{ grid-template-columns:1fr 1fr; } .pathstrip a:last-child{ grid-column:1 / -1; } }

/* ---------- dark stage ---------- */
.stage{ background:var(--night); color:var(--on-night-2); position:relative; overflow:hidden; isolation:isolate; }
.stage h2, .stage h3{ color:var(--on-night); }
.stage .eyebrow{ color:var(--on-night-3); }
.stage .lede{ color:var(--on-night-2); }
.stage .glow{ position:absolute; inset:auto -10% -40% -10%; height:80%; background:radial-gradient(60% 60% at 50% 50%, rgba(29,184,242,.18), transparent 70%); z-index:-1; pointer-events:none; }

/* orbit: five paths around the client */
.orbit-wrap{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
@media (max-width:900px){ .orbit-wrap{ grid-template-columns:1fr; } }
.orbit{ position:relative; width:100%; max-width:560px; aspect-ratio:1; justify-self:center; }
.orbit svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.orbit .ring{ fill:none; stroke:rgba(238,242,255,.14); stroke-width:1; }
.orbit .ring2{ fill:none; stroke:rgba(238,242,255,.06); stroke-width:1; stroke-dasharray:2 6; }
.orbit .arc{ fill:none; stroke:url(#orbitGrad); stroke-width:2; stroke-linecap:round; stroke-dasharray:var(--len) var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 900ms var(--ease); }
.orbit.in .arc{ stroke-dashoffset:0; }
.orbit .comet{ fill:#bff1ff; filter:drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 14px rgba(29,184,242,.7)); }
.orbit .core{ position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; display:grid; place-items:center; text-align:center; background:radial-gradient(circle at 50% 35%, #1b2a62, #0e1534 70%); box-shadow:0 0 0 1px rgba(238,242,255,.14), 0 0 60px rgba(29,184,242,.25); }
.orbit .core b{ display:block; color:#fff; font:500 clamp(18px, 2vw, 24px)/1.1 var(--f-sans); letter-spacing:-.02em; }
.orbit .core span{ display:block; margin-top:6px; font:400 11.5px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--on-night-3); }
.orbit .core::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(29,184,242,.35); animation:breathe 4.8s var(--ease-io) infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.07); opacity:.15; } }
.onode{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:grid; justify-items:center; gap:8px; padding:0; border:0; background:none; cursor:pointer; color:var(--on-night); }
.onode .dot{ position:relative; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#121a3f; box-shadow:0 0 0 1px rgba(238,242,255,.18); transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background var(--t-mid) var(--ease); }
.onode .dot i{ width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 14px var(--c); }
.onode .dot em{ position:absolute; inset:-1px; border-radius:50%; }
.onode .lab{ font:500 15px/1 var(--f-sans); letter-spacing:-.01em; padding:6px 10px; border-radius:var(--r-pill); transition:background var(--t-mid) var(--ease), color var(--t-mid) var(--ease); }
.onode[aria-pressed="true"] .dot{ transform:scale(1.14); background:color-mix(in srgb, var(--c) 30%, #121a3f); box-shadow:0 0 0 1px var(--c), 0 0 32px color-mix(in srgb, var(--c) 60%, transparent); }
.onode[aria-pressed="true"] .lab{ background:#fff; color:var(--ink-900); }
.onode:focus-visible{ outline:none; }
.onode:focus-visible .dot{ box-shadow:0 0 0 2px #fff; }

.opanel{ display:grid; gap:20px; min-height:460px; align-content:center; }
.opanel .ph{ display:flex; align-items:center; gap:12px; }
.opanel .ph i{ width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 12px var(--c); }
.opanel h3{ font-size:clamp(28px, 3vw, 40px); letter-spacing:-.03em; line-height:1.05; }
.opanel p.l{ color:var(--on-night-2); font-size:18px; max-width:30em; }
.opanel ol{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:2px; }
.opanel li a{ display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-radius:var(--r-4); text-decoration:none; color:var(--on-night); background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); opacity:0; transform:translateY(8px); transition:opacity 420ms var(--ease), transform 420ms var(--ease), background var(--t-fast) var(--ease); transition-delay:calc(var(--i) * 45ms); }
.opanel.show li a{ opacity:1; transform:none; }
.opanel li a:hover{ background:rgba(255,255,255,.08); }
.opanel li .k{ font:400 12px/1 var(--f-mono); color:var(--on-night-3); }
.opanel li .arr{ width:15px; height:15px; color:var(--on-night-3); }
.stage .opanel .btn{ justify-self:start; }

/* ---------- section board ---------- */
.board{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; align-items:start; }
@media (max-width:1180px){ .board{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:760px){ .board{ grid-template-columns:1fr; } }
.board .col{ display:grid; gap:8px; }
.board .ch{ display:flex; align-items:center; gap:10px; padding:4px 4px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.board .ch i{ width:9px; height:9px; border-radius:50%; background:var(--c); }
.board .ch a{ font:500 19px/1 var(--f-sans); color:var(--ink-900); text-decoration:none; letter-spacing:-.015em; }
.board .ch a:hover{ text-decoration:underline; text-underline-offset:4px; }
.board .ch span{ margin-left:auto; font:400 12px/1 var(--f-mono); color:var(--slate-400); }
.jcard{ display:grid; gap:8px; padding:16px 16px 18px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06); text-decoration:none; transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.jcard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.jcard b{ font-weight:500; color:var(--ink-900); font-size:16.5px; line-height:1.3; letter-spacing:-.01em; }
.jcard p{ font-size:14px; line-height:1.45; color:var(--slate-500); }
.jcard .st{ justify-self:start; }

/* ---------- feed ---------- */
.feed{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.feed li{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:24px; align-items:baseline; padding:22px 4px; border-bottom:1px solid var(--line); }
.feed time{ font:400 13px/1.4 var(--f-mono); color:var(--slate-400); letter-spacing:.02em; }
.feed b{ display:block; font-weight:500; color:var(--ink-900); font-size:18px; letter-spacing:-.01em; margin-bottom:4px; }
.feed p{ font-size:15.5px; color:var(--slate-500); }
@media (max-width:700px){ .feed li{ grid-template-columns:1fr; gap:8px; } }

/* ---------- path pages: hero and section rail ---------- */
.path-hero .display{ font-size:clamp(42px, 6.2vw, 88px); }
.secrail{ position:sticky; top:var(--nav-h); z-index:30; background:rgba(247,247,251,.86); -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px); border-bottom:1px solid var(--line); }
.secrail .wrap{ display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:10px; }
.secrail .wrap::-webkit-scrollbar{ display:none; }
.secrail .lbl{ flex:none; font:400 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); margin-right:8px; display:flex; align-items:center; gap:8px; }
.secrail .lbl i{ width:8px; height:8px; border-radius:50%; background:var(--pc); }
.secrail a{ flex:none; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 13px; border-radius:var(--r-pill); text-decoration:none; color:var(--ink-700); font-size:14px; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.secrail a .n{ font:400 11.5px/1 var(--f-mono); color:var(--slate-400); }
.secrail a:hover{ background:rgba(0,31,74,.05); }
.secrail a[aria-current="true"]{ background:var(--ink-900); color:#fff; }
.secrail a[aria-current="true"] .n{ color:rgba(255,255,255,.6); }

.psec{ scroll-margin-top:calc(var(--nav-h) + 72px); }
.sec.tight{ padding-block:clamp(64px, 8vw, 112px); }
.sec + .sec.tight{ border-top:1px solid var(--line-soft); }

/* generic panels */
.panel{ position:relative; border-radius:var(--r-5); background:#fff; box-shadow:var(--shadow-frame); overflow:hidden; }
.panel.pad{ padding:clamp(20px, 3vw, 32px); }
.grid2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.grid4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
@media (max-width:1000px){ .grid4{ grid-template-columns:repeat(2, minmax(0,1fr)); } .grid3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .grid2, .grid3, .grid4{ grid-template-columns:1fr; } }
.card{ display:grid; gap:10px; align-content:start; padding:22px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); text-decoration:none; }
a.card{ transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
a.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.card h3{ font-size:19px; line-height:1.25; letter-spacing:-.012em; font-weight:500; }
.card p{ font-size:15px; line-height:1.5; color:var(--slate-500); }
.card .meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; }
.card .top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.card .ico{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-900); }
.card .ico svg{ width:20px; height:20px; }
.mini{ font:400 12px/1.3 var(--f-mono); color:var(--slate-400); letter-spacing:.04em; text-transform:uppercase; }
.note{ display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:var(--r-4); background:var(--blue-50); color:var(--ink-700); font-size:15px; line-height:1.5; }
.note.warn{ background:#fff7e8; }
.note b{ color:var(--ink-900); font-weight:500; }
.note svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--blue-600); }
.note.warn svg{ color:#a86b00; }

/* ---------- learn: story stepper ---------- */
.story{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:0; min-height:520px; }
@media (max-width:900px){ .story{ grid-template-columns:1fr; } }
.story-nav{ list-style:none; margin:0; padding:20px; display:grid; gap:4px; align-content:start; background:var(--surface-2); border-right:1px solid var(--line-soft); }
@media (max-width:900px){ .story-nav{ grid-auto-flow:column; grid-auto-columns:minmax(150px,1fr); overflow-x:auto; border-right:0; border-bottom:1px solid var(--line-soft); } }
.story-nav button{ position:relative; width:100%; display:grid; gap:4px; text-align:left; padding:14px 16px 16px; border:0; border-radius:var(--r-4); background:transparent; cursor:pointer; overflow:hidden; transition:background var(--t-fast) var(--ease); }
.story-nav button .n{ font:400 11.5px/1 var(--f-mono); color:var(--slate-400); letter-spacing:.06em; }
.story-nav button b{ font-weight:500; color:var(--ink-700); font-size:15.5px; line-height:1.3; }
.story-nav button[aria-selected="true"]{ background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06); }
.story-nav button[aria-selected="true"] b{ color:var(--ink-900); }
.story-nav button .bar{ position:absolute; left:16px; right:16px; bottom:8px; height:2px; border-radius:2px; background:var(--line); overflow:hidden; opacity:0; }
.story-nav button[aria-selected="true"] .bar{ opacity:1; }
.story-nav button .bar i{ position:absolute; inset:0; background:var(--blue-600); transform-origin:left; transform:scaleX(0); }
.story-stage{ position:relative; padding:clamp(24px, 4vw, 48px); display:grid; }
.chap{ grid-area:1/1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px, 4vw, 48px); align-items:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity 420ms var(--ease), transform 420ms var(--ease), visibility 0s 420ms; }
.chap.on{ opacity:1; visibility:visible; transform:none; transition:opacity 520ms var(--ease) 80ms, transform 520ms var(--ease) 80ms; }
@media (max-width:1100px){ .chap{ grid-template-columns:1fr; } }
.chap h3{ font-size:clamp(26px, 2.8vw, 38px); line-height:1.08; letter-spacing:-.03em; }
.chap p{ margin-top:14px; font-size:17px; }
.chap .say{ margin-top:22px; padding:16px 18px; border-radius:var(--r-4); background:var(--surface-2); font-size:15px; }
.chap .say .mini{ display:block; margin-bottom:6px; }
.chap .vis{ position:relative; min-height:300px; display:grid; place-items:center; }

/* chapter visuals */
.v-tools{ position:relative; width:100%; max-width:380px; aspect-ratio:1.2; }
.v-tools span{ position:absolute; left:50%; top:50%; padding:7px 12px; border-radius:var(--r-3); background:#fff; box-shadow:var(--shadow-pop); font-size:13px; color:var(--slate-600); transform:translate(-50%,-50%) translate(var(--x), var(--y)) rotate(var(--r)); transition:transform 1.1s var(--ease), opacity .6s var(--ease); }
.chap.on .v-tools.gather span{ transform:translate(-50%,-50%) translate(calc(var(--x) * .18), calc(var(--y) * .18)) rotate(0deg); opacity:.0; transition-delay:calc(1.4s + var(--i) * 40ms); }
.v-tools .hx{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6); opacity:0; padding:14px 22px; border-radius:16px; background:var(--blue-600); color:#fff; font:500 22px/1 var(--f-sans); letter-spacing:-.02em; box-shadow:0 18px 40px -10px rgba(5,94,251,.55); transition:transform .8s var(--ease) 2s, opacity .6s var(--ease) 2s; }
.chap.on .v-tools .hx{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.v-layers{ display:grid; gap:12px; width:100%; max-width:400px; perspective:900px; }
.v-layers div{ padding:18px 20px; border-radius:var(--r-4); background:#fff; box-shadow:var(--shadow-pop); display:grid; gap:4px; transform:rotateX(18deg) translateY(30px); opacity:0; transition:transform .7s var(--ease), opacity .7s var(--ease); transition-delay:calc(var(--i) * 140ms + 200ms); }
.chap.on .v-layers div{ transform:rotateX(0) translateY(0); opacity:1; }
.v-layers b{ color:var(--ink-900); font-weight:500; }
.v-layers span{ font-size:14px; color:var(--slate-500); }
.v-layers div:nth-child(1){ border-top:2px solid var(--accent); }
.v-layers div:nth-child(2){ border-top:2px solid var(--accent-2); }
.v-layers div:nth-child(3){ border-top:2px solid var(--blue-600); }
.v-pillars{ position:relative; width:min(100%, 340px); aspect-ratio:1; }
.v-pillars .q{ position:absolute; width:46%; aspect-ratio:1; border-radius:18px; display:grid; place-items:center; text-align:center; padding:12px; color:#fff; font:500 13px/1.25 var(--f-sans); background:var(--c); transform:scale(.6) rotate(-8deg); opacity:0; transition:transform .7s var(--ease), opacity .6s var(--ease); transition-delay:calc(var(--i) * 120ms + 150ms); }
.v-pillars .q small{ display:block; margin-top:6px; font:400 11px/1 var(--f-mono); opacity:.8; }
.chap.on .v-pillars .q{ transform:none; opacity:1; }
.v-pillars .q:nth-child(1){ left:0; top:0; } .v-pillars .q:nth-child(2){ right:0; top:0; } .v-pillars .q:nth-child(3){ left:0; bottom:0; } .v-pillars .q:nth-child(4){ right:0; bottom:0; }
.v-pillars .you{ position:absolute; left:50%; top:50%; width:26%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); display:grid; place-items:center; background:#fff; color:var(--ink-900); font:500 16px/1 var(--f-sans); box-shadow:0 0 0 6px rgba(255,255,255,.6), var(--shadow-pop); z-index:2; }
.v-ways{ display:grid; gap:12px; width:100%; max-width:420px; }
.v-ways div{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:center; padding:16px; border-radius:var(--r-4); background:#fff; box-shadow:var(--shadow-pop); opacity:0; transform:translateX(16px); transition:transform .6s var(--ease), opacity .6s var(--ease); transition-delay:calc(var(--i) * 140ms + 150ms); }
.chap.on .v-ways div{ opacity:1; transform:none; }
.v-ways i{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--surface-3); font:500 15px/1 var(--f-mono); color:var(--ink-900); font-style:normal; }
.v-ways b{ display:block; color:var(--ink-900); font-weight:500; }
.v-ways span{ font-size:14px; color:var(--slate-500); }
.v-ladder{ display:flex; align-items:flex-end; gap:12px; width:100%; max-width:420px; height:280px; }
.v-ladder div{ flex:1; display:grid; align-content:end; gap:6px; padding:14px; border-radius:var(--r-4) var(--r-4) 6px 6px; background:linear-gradient(180deg, #eaf1ff, #fff); box-shadow:0 0 0 1px rgba(0,31,74,.06); height:var(--h); transform:scaleY(.2); transform-origin:bottom; opacity:0; transition:transform .8s var(--ease), opacity .5s var(--ease); transition-delay:calc(var(--i) * 160ms + 150ms); }
.chap.on .v-ladder div{ transform:none; opacity:1; }
.v-ladder b{ color:var(--ink-900); font-weight:500; font-size:16px; }
.v-ladder span{ font-size:13px; color:var(--slate-500); line-height:1.35; }

/* ---------- learn: atlas ---------- */
.atlas{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:0; }
@media (max-width:980px){ .atlas{ grid-template-columns:1fr; } }
.atlas-map{ padding:clamp(20px, 3vw, 32px); display:grid; grid-template-columns:1fr 1fr; gap:14px; background:var(--surface-2); border-right:1px solid var(--line-soft); }
@media (max-width:560px){ .atlas-map{ grid-template-columns:1fr; } }
.pq{ display:grid; gap:8px; align-content:start; padding:16px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06); }
.pq h3{ display:flex; align-items:center; gap:8px; font:500 13px/1.2 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-700); margin-bottom:4px; }
.pq h3 i{ width:9px; height:9px; border-radius:3px; transform:rotate(45deg); background:var(--c); }
.svcbtn{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border-radius:var(--r-3); border:0; background:var(--surface-2); cursor:pointer; font-size:14.5px; color:var(--ink-900); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.svcbtn:hover{ background:var(--blue-50); }
.svcbtn[aria-pressed="true"]{ background:var(--ink-900); color:#fff; }
.svcbtn .pdot{ --c:inherit; }
.svcbtn.soon{ background:transparent; color:var(--slate-400); box-shadow:inset 0 0 0 1px dashed var(--line); font-size:13.5px; padding:7px 12px; border:1px dashed var(--line-strong); }
.svcbtn.soon[aria-pressed="true"]{ background:var(--surface-3); color:var(--ink-900); }
.atlas-detail{ padding:clamp(22px, 3vw, 36px); display:grid; gap:16px; align-content:start; min-height:520px; }
.atlas-detail .ttl{ display:flex; justify-content:space-between; gap:12px; align-items:start; }
.atlas-detail h3{ font-size:clamp(24px, 2.4vw, 32px); letter-spacing:-.025em; line-height:1.1; }
.atlas-detail .sum{ font-size:17px; color:var(--slate-600); }
.atlas-detail dl{ margin:0; display:grid; gap:14px; }
.atlas-detail dt{ font:400 11.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); margin-bottom:6px; }
.atlas-detail dd{ margin:0; font-size:15px; line-height:1.5; }
.atlas-detail ul{ margin:0; padding-left:18px; display:grid; gap:4px; font-size:15px; }
.atlas-detail .fade{ animation:fadeUp 360ms var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.indsel{ display:flex; flex-wrap:wrap; gap:6px; }
.indsel .chip{ height:32px; font-size:13px; }

/* ---------- FAQ ---------- */
.faq-tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:24px; }
.search{ position:relative; flex:1 1 320px; max-width:520px; }
.search input{ width:100%; height:48px; padding:0 18px 0 46px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:#fff; font:400 16px/1 var(--f-sans); color:var(--ink-900); outline:0; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.search input:focus{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(5,94,251,.12); }
.search svg{ position:absolute; left:17px; top:50%; width:17px; height:17px; transform:translateY(-50%); color:var(--slate-400); }
.faq{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.faq li{ border-bottom:1px solid var(--line); }
.faq button{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:20px; align-items:center; text-align:left; padding:20px 4px; border:0; background:none; cursor:pointer; font:500 18px/1.35 var(--f-sans); color:var(--ink-900); letter-spacing:-.01em; }
.faq button .pm{ position:relative; width:14px; height:14px; justify-self:end; }
.faq button .pm::before, .faq button .pm::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:var(--ink-900); transition:transform var(--t-mid) var(--ease); }
.faq button .pm::after{ transform:rotate(90deg); }
.faq button[aria-expanded="true"] .pm::after{ transform:rotate(0); }
.faq .a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-mid) var(--ease); }
.faq .a > div{ overflow:hidden; }
.faq .a p{ padding:0 4px 22px; max-width:46em; font-size:16px; }
.faq button[aria-expanded="true"] + .a{ grid-template-rows:1fr; }
.faq .cat{ font:400 11.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); display:block; margin-bottom:6px; }

/* ---------- sell: composer ---------- */
.composer{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
@media (max-width:1000px){ .composer{ grid-template-columns:1fr; } }
.comp-in{ padding:clamp(22px, 3vw, 36px); display:grid; gap:26px; align-content:start; background:var(--surface-2); border-right:1px solid var(--line-soft); }
.comp-in fieldset{ border:0; margin:0; padding:0; display:grid; gap:12px; }
.comp-in legend{ padding:0; margin-bottom:12px; font:500 15px/1.3 var(--f-sans); color:var(--ink-900); display:flex; gap:10px; align-items:baseline; }
.comp-in legend .n{ font:400 12px/1 var(--f-mono); color:var(--slate-400); }
.comp-in .opts{ display:flex; flex-wrap:wrap; gap:8px; }
.comp-in .chip{ background:#fff; }
.comp-in .chip[aria-pressed="true"]{ background:var(--ink-900); }
.painlist{ display:grid; gap:6px; }
.pain{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-3); background:#fff; border:1px solid transparent; cursor:pointer; font-size:14.5px; line-height:1.35; color:var(--ink-700); text-align:left; transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.pain .bx{ width:18px; height:18px; flex:none; border-radius:5px; border:1.5px solid var(--line-strong); display:grid; place-items:center; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.pain .bx svg{ width:12px; height:12px; color:#fff; opacity:0; transform:scale(.6); transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.pain[aria-pressed="true"]{ border-color:var(--ink-900); }
.pain[aria-pressed="true"] .bx{ background:var(--ink-900); border-color:var(--ink-900); }
.pain[aria-pressed="true"] .bx svg{ opacity:1; transform:none; }
.pain:hover{ border-color:var(--line-strong); }
.comp-out{ padding:clamp(22px, 3vw, 36px); display:grid; gap:22px; align-content:start; min-height:640px; }
.comp-empty{ display:grid; place-items:center; text-align:center; gap:16px; min-height:520px; color:var(--slate-500); }
.comp-empty .pulse{ position:relative; width:84px; height:84px; border-radius:50%; background:var(--blue-50); display:grid; place-items:center; }
.comp-empty .pulse::before, .comp-empty .pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(5,94,251,.35); animation:ripple 2.6s var(--ease) infinite; }
.comp-empty .pulse::after{ animation-delay:1.3s; }
@keyframes ripple{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(1.9); opacity:0; } }
.comp-empty .pulse svg{ width:30px; height:30px; color:var(--blue-600); }
.thinking{ display:flex; align-items:center; gap:10px; font:400 13px/1 var(--f-mono); color:var(--slate-500); }
.thinking i{ width:6px; height:6px; border-radius:50%; background:var(--blue-600); animation:dots 1s var(--ease-io) infinite; }
.thinking i:nth-child(2){ animation-delay:.15s; } .thinking i:nth-child(3){ animation-delay:.3s; }
@keyframes dots{ 0%,100%{ opacity:.25; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
.rblock{ display:grid; gap:12px; opacity:0; transform:translateY(10px); animation:fadeUp 480ms var(--ease) forwards; animation-delay:var(--d, 0ms); }
.rblock > .mini{ display:flex; align-items:center; gap:8px; }
.rsvc{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; padding:16px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); }
.rsvc .rk{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:500 13px/1 var(--f-mono); color:#fff; background:var(--c); }
.rsvc b{ color:var(--ink-900); font-weight:500; display:block; }
.rsvc p{ font-size:14.5px; color:var(--slate-500); margin-top:4px; line-height:1.45; }
.rsvc .why{ display:block; margin-top:8px; font-size:13.5px; color:var(--ink-700); }
.rsvc a{ font-size:13.5px; }
.dfacts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:640px){ .dfacts{ grid-template-columns:1fr; } }
.dfact{ padding:14px 16px; border-radius:var(--r-4); background:var(--surface-2); display:grid; gap:6px; align-content:start; }
.dfact b{ color:var(--ink-900); font-weight:500; font-size:17px; letter-spacing:-.01em; }
.dfact span{ font-size:13.5px; color:var(--slate-500); line-height:1.4; }
.qs{ margin:0; padding-left:20px; display:grid; gap:8px; font-size:15.5px; color:var(--ink-700); }
.nextsteps{ display:flex; flex-wrap:wrap; gap:10px; }

/* buyers */
.archc{ display:grid; gap:14px; padding:24px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); position:relative; overflow:hidden; }
.archc::before{ content:""; position:absolute; left:24px; top:0; width:40px; height:3px; border-radius:0 0 3px 3px; background:var(--c); }
.archc h3{ font-size:22px; letter-spacing:-.02em; font-weight:500; }
.archc .tag{ justify-self:start; }
.archc p{ font-size:15px; }
.motions{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border-radius:var(--r-5); overflow:hidden; background:#fff; box-shadow:var(--shadow-frame); }
@media (max-width:900px){ .motions{ grid-template-columns:1fr; } }
.motion{ padding:26px; display:grid; gap:14px; align-content:start; border-right:1px solid var(--line-soft); }
.motion:last-child{ border-right:0; }
.motion .scope{ display:flex; gap:4px; }
.motion .scope i{ width:22px; height:8px; border-radius:4px; background:var(--line); }
.motion .scope i.on{ background:var(--blue-600); }
.motion h3{ font-size:20px; font-weight:500; letter-spacing:-.015em; }
.motion dl{ margin:0; display:grid; gap:10px; }
.motion dt{ font:400 11.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); margin-bottom:4px; }
.motion dd{ margin:0; font-size:14.5px; line-height:1.45; }

/* pricing */
.ptabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.pmodel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:960px){ .pmodel{ grid-template-columns:1fr; } }
.pmodel .l{ padding:clamp(22px, 3vw, 36px); display:grid; gap:18px; align-content:start; }
.pmodel .r{ padding:clamp(22px, 3vw, 36px); background:var(--surface-2); border-left:1px solid var(--line-soft); display:grid; gap:18px; align-content:start; }
.pmodel h3{ font-size:clamp(24px, 2.4vw, 32px); letter-spacing:-.025em; }
.pmodel .one{ font-size:17px; color:var(--ink-700); }
.pmodel ul{ margin:0; padding-left:18px; display:grid; gap:6px; font-size:15px; }
.steps-price{ display:grid; gap:10px; }
.sp{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; align-items:center; }
.sp .bar{ position:relative; height:38px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06); overflow:hidden; }
.sp .bar i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--w)); background:linear-gradient(90deg, rgba(5,94,251,.16), rgba(0,213,208,.24)); transition:transform 900ms var(--ease); }
.sp .bar span{ position:relative; display:flex; align-items:center; height:100%; padding:0 12px; font:500 14.5px/1 var(--f-sans); color:var(--ink-900); }
.sp b{ font-weight:500; color:var(--ink-900); font-size:14.5px; }
.sp small{ display:block; font-size:12.5px; color:var(--slate-500); }
.pprinc{ counter-reset:p; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:900px){ .pprinc{ grid-template-columns:1fr; } }
.pprinc li{ counter-increment:p; padding:16px 16px 16px 52px; position:relative; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06); font-size:15px; line-height:1.45; color:var(--ink-700); }
.pprinc li::before{ content:counter(p); position:absolute; left:16px; top:15px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:500 12px/1 var(--f-mono); background:var(--surface-3); color:var(--ink-900); }

/* proposals */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; align-items:center; }
.filters .sep{ width:1px; height:24px; background:var(--line); margin:0 6px; }
.prop{ display:grid; grid-template-rows:auto 1fr auto; gap:0; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); overflow:hidden; text-decoration:none; transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease); }
.prop:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.prop .cov{ position:relative; height:118px; padding:16px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, #fff), #f3f6ff 70%); }
.prop .cov .fmt{ align-self:flex-start; font:500 11px/1 var(--f-mono); letter-spacing:.06em; padding:5px 8px; border-radius:6px; background:rgba(255,255,255,.85); color:var(--ink-900); }
.prop .cov b{ font:500 22px/1.05 var(--f-sans); letter-spacing:-.02em; color:var(--ink-900); }
.prop .body{ padding:16px; display:grid; gap:8px; align-content:start; }
.prop .body p{ font-size:14.5px; color:var(--slate-500); line-height:1.45; }
.prop .foot2{ padding:12px 16px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:6px; }
.prop .foot2 .tag{ font-size:12.5px; padding:4px 9px; }
.prop[hidden]{ display:none; }

/* files */
.files{ list-style:none; margin:0; padding:0; border-radius:var(--r-5); background:#fff; box-shadow:var(--shadow-frame); overflow:hidden; }
.files li{ display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; gap:16px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line-soft); }
.files li:last-child{ border-bottom:0; }
.files .ft{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font:500 11px/1 var(--f-mono); letter-spacing:.04em; color:#fff; background:var(--c); }
.files b{ font-weight:500; color:var(--ink-900); display:block; }
.files span.d{ font-size:13.5px; color:var(--slate-500); }
.files time{ font:400 12.5px/1 var(--f-mono); color:var(--slate-400); }
@media (max-width:700px){ .files li{ grid-template-columns:44px minmax(0,1fr); } .files li time, .files li .st{ display:none; } }

/* studio preview */
.studio{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px, 4vw, 56px); align-items:center; }
@media (max-width:960px){ .studio{ grid-template-columns:1fr; } }
.browser{ border-radius:14px; background:#fff; box-shadow:var(--shadow-frame); overflow:hidden; }
.browser .chrome{ display:flex; align-items:center; gap:6px; height:36px; padding:0 14px; background:var(--surface-3); border-bottom:1px solid var(--line-soft); }
.browser .chrome i{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.browser .chrome span{ margin-left:12px; flex:1; height:22px; border-radius:6px; background:#fff; font:400 11.5px/22px var(--f-mono); color:var(--slate-400); padding:0 10px; white-space:nowrap; overflow:hidden; }
.mock{ position:relative; padding:28px; min-height:340px; display:grid; gap:16px; align-content:start; background:radial-gradient(70% 90% at 90% 0%, #ffe3ec 0%, transparent 60%), radial-gradient(60% 80% at 0% 0%, #dfe8ff 0%, transparent 60%), #fbfbfe; }
.mock .mk-e{ font:400 11px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.mock h4{ font-size:clamp(22px, 2.4vw, 32px); line-height:1.05; letter-spacing:-.03em; font-weight:500; max-width:16ch; }
.mock h4 em{ font-style:normal; color:var(--blue-600); }
.mock .mk-svcs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.mock .mk-svcs div{ padding:12px; border-radius:10px; background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06); font-size:12.5px; color:var(--ink-900); display:grid; gap:6px; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.mock .mk-svcs i{ width:8px; height:8px; border-radius:2px; transform:rotate(45deg); background:var(--c); }
.swap{ animation:fadeUp 420ms var(--ease); }

/* ---------- demo ---------- */
.films{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width:960px){ .films{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .films{ grid-template-columns:1fr; } }
.film{ display:grid; gap:12px; border:0; padding:0; background:none; text-align:left; cursor:pointer; }
.film .th{ position:relative; aspect-ratio:16/9; border-radius:var(--r-4); overflow:hidden; background:var(--night); box-shadow:var(--shadow-pop); }
.film .th img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.film:hover .th img{ transform:scale(1.04); }
.film .th .pl{ position:absolute; left:14px; bottom:14px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--ink-900); transition:transform var(--t-mid) var(--ease); }
.film:hover .th .pl{ transform:scale(1.08); }
.film .th .pl svg{ width:14px; height:14px; margin-left:2px; }
.film .th .dur{ position:absolute; right:12px; bottom:12px; font:500 11.5px/1 var(--f-mono); padding:5px 7px; border-radius:6px; background:rgba(11,16,40,.72); color:#fff; }
.film b{ font-weight:500; color:var(--ink-900); font-size:17px; }
.film span.when{ font-size:14.5px; color:var(--slate-500); line-height:1.45; }
.lightbox{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:24px; background:rgba(5,9,26,.82); opacity:0; pointer-events:none; transition:opacity var(--t-mid) var(--ease); }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox video{ width:min(1100px, 100%); max-height:80vh; border-radius:var(--r-4); background:#000; }
.lightbox button{ position:absolute; top:18px; right:18px; }

.seed{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:980px){ .seed{ grid-template-columns:1fr; } }
.seed-form{ padding:clamp(22px, 3vw, 36px); display:grid; gap:16px; align-content:start; background:var(--surface-2); border-right:1px solid var(--line-soft); }
.fld{ display:grid; gap:7px; }
.fld label, .fld .lb{ font-size:14px; font-weight:500; color:var(--ink-900); display:flex; justify-content:space-between; gap:8px; }
.fld label small{ font:400 11px/1.4 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-400); }
.fld input, .fld select, .fld textarea{ width:100%; height:46px; padding:0 14px; border-radius:var(--r-3); border:1px solid var(--line-strong); background:#fff; font:400 15px/1.3 var(--f-sans); color:var(--ink-900); outline:0; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.fld textarea{ height:auto; min-height:84px; padding:12px 14px; resize:vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(5,94,251,.12); }
.fld .hint{ font-size:13px; color:var(--slate-500); }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-strong); }
.seg button{ height:38px; border:0; border-radius:var(--r-pill); background:transparent; cursor:pointer; font-size:14px; color:var(--ink-700); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.seg button[aria-pressed="true"]{ background:var(--ink-900); color:#fff; }
.seed-run{ padding:clamp(22px, 3vw, 36px); display:grid; gap:18px; align-content:start; min-height:560px; }
.seedlist{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.seedlist li{ display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 12px; border-radius:var(--r-3); font-size:15px; color:var(--slate-400); transition:color var(--t-mid) var(--ease), background var(--t-mid) var(--ease); }
.seedlist .ic{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; transition:border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease); }
.seedlist .ic svg{ width:12px; height:12px; color:#fff; opacity:0; }
.seedlist li.run{ color:var(--ink-900); background:var(--blue-50); }
.seedlist li.run .ic{ border-color:var(--blue-600); border-top-color:transparent; animation:spin .8s linear infinite; }
.seedlist li.done{ color:var(--ink-700); }
.seedlist li.done .ic{ background:#10A284; border-color:#10A284; }
.seedlist li.done .ic svg{ opacity:1; }
.seedlist .ct{ font:400 12.5px/1 var(--f-mono); color:var(--slate-500); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.seedbar{ height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.seedbar i{ display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(var(--p, 0)); background:linear-gradient(90deg, var(--blue-600), var(--accent-2)); transition:transform 400ms var(--ease); }
.yield{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
@media (max-width:760px){ .yield{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.yield div{ padding:16px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); display:grid; gap:4px; }
.yield b{ font:300 30px/1 var(--f-sans); letter-spacing:-.03em; color:var(--ink-900); }
.yield span{ font-size:13.5px; color:var(--slate-500); line-height:1.35; }
.tsteps{ counter-reset:t; list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.tsteps li{ counter-increment:t; display:grid; grid-template-columns:36px minmax(0,1fr); gap:14px; padding:16px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.06); }
.tsteps li::before{ content:counter(t); width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--ink-900); color:#fff; font:500 13px/1 var(--f-mono); }
.tsteps b{ display:block; color:var(--ink-900); font-weight:500; margin-bottom:2px; }
.tsteps p{ font-size:14.5px; color:var(--slate-500); line-height:1.5; }
code{ font:400 .92em/1 var(--f-mono); padding:2px 6px; border-radius:5px; background:var(--surface-3); color:var(--ink-900); }

.walk{ display:grid; grid-template-columns:260px minmax(0,1fr); }
@media (max-width:900px){ .walk{ grid-template-columns:1fr; } }
.walk-list{ padding:16px; display:grid; gap:4px; align-content:start; background:var(--surface-2); border-right:1px solid var(--line-soft); }
@media (max-width:900px){ .walk-list{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; border-right:0; } }
.walk-body{ padding:clamp(22px, 3vw, 36px); display:grid; gap:20px; align-content:start; min-height:420px; }
.clicks{ list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative; }
.clicks li{ position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; padding-bottom:18px; }
.clicks li::before{ content:""; position:absolute; left:15px; top:30px; bottom:0; width:1.5px; background:var(--line); }
.clicks li:last-child::before{ display:none; }
.clicks .cn{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 0 0 1.5px var(--c); font:500 12.5px/1 var(--f-mono); color:var(--ink-900); }
.clicks b{ display:block; color:var(--ink-900); font-weight:500; }
.clicks p{ font-size:14.5px; color:var(--slate-500); margin-top:2px; }
.clicks .say2{ display:block; margin-top:6px; font-size:14.5px; color:var(--ink-700); font-style:italic; }

/* ---------- deliver ---------- */
.unlock{ position:relative; padding:clamp(20px, 3vw, 32px); }
.unlock-track{ position:relative; display:grid; grid-template-columns:repeat(11, minmax(0,1fr)); gap:8px; }
@media (max-width:1100px){ .unlock-track{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:560px){ .unlock-track{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.ustep{ position:relative; display:grid; gap:8px; align-content:start; padding:12px 10px 14px; border-radius:var(--r-4); border:0; text-align:left; background:var(--surface-2); cursor:pointer; min-height:132px; transition:background var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.ustep .n{ font:500 12px/1 var(--f-mono); color:var(--slate-400); display:flex; justify-content:space-between; align-items:center; }
.ustep .n i{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); transition:background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.ustep b{ font-weight:500; font-size:13.5px; line-height:1.3; color:var(--ink-700); }
.ustep.lit{ background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.08); }
.ustep.lit .n i{ background:var(--path-deliver); box-shadow:0 0 0 4px rgba(16,162,132,.15); }
.ustep.mvp::after{ content:"GEO PoV"; position:absolute; top:-9px; right:8px; font:500 9.5px/1 var(--f-mono); letter-spacing:.06em; padding:4px 6px; border-radius:5px; background:var(--path-deliver); color:#fff; opacity:0; transform:translateY(4px); transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.unlock.show-mvp .ustep.mvp::after{ opacity:1; transform:none; }
.ustep[aria-pressed="true"]{ background:var(--ink-900); box-shadow:none; transform:translateY(-3px); }
.ustep[aria-pressed="true"] b{ color:#fff; }
.ustep[aria-pressed="true"] .n{ color:rgba(255,255,255,.6); }
.ucable{ height:4px; border-radius:4px; margin:16px 0 22px; background:var(--line); overflow:hidden; }
.ucable i{ display:block; height:100%; transform-origin:left; transform:scaleX(var(--p, 0)); background:linear-gradient(90deg, var(--path-deliver), var(--accent-2)); transition:transform 600ms var(--ease); }
.udetail{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; padding:20px; border-radius:var(--r-4); background:var(--surface-2); }
@media (max-width:760px){ .udetail{ grid-template-columns:1fr; } }
.udetail h3{ font-size:22px; letter-spacing:-.02em; font-weight:500; }
.udetail p{ font-size:15.5px; margin-top:8px; }
.udetail .un{ padding:16px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(16,162,132,.25); }
.udetail .un .mini{ color:#0a7d5f; }
.udetail .un p{ color:var(--ink-700); }

.shelf{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width:960px){ .shelf{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .shelf{ grid-template-columns:1fr; } }
.acc{ display:grid; gap:12px; align-content:start; padding:22px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); }
.acc .top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.acc .glyph{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--surface-3); }
.acc .glyph svg{ width:22px; height:22px; color:var(--ink-900); }
.acc h3{ font-size:19px; font-weight:500; letter-spacing:-.012em; }
.acc p{ font-size:14.5px; color:var(--slate-500); line-height:1.5; }
.acc .saves{ font-size:13.5px; color:var(--ink-700); padding-top:10px; border-top:1px solid var(--line-soft); }

/* workflow lanes */
.wf{ display:grid; gap:12px; }
.wf-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.lanes{ position:relative; display:grid; grid-template-columns:110px minmax(0,1fr); gap:0; padding:20px; }
.lanes .lh{ font:400 11.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); display:flex; align-items:center; min-height:84px; }
.lane{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px; align-items:center; min-height:84px; padding:8px 0; border-bottom:1px dashed var(--line); }
.lane:last-of-type{ border-bottom:0; }
.wnode{ position:relative; display:grid; gap:4px; padding:12px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); opacity:.35; transform:scale(.97); transition:opacity 420ms var(--ease), transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.wnode b{ font-weight:500; font-size:13.5px; color:var(--ink-900); line-height:1.25; }
.wnode span{ font-size:12px; color:var(--slate-500); line-height:1.3; }
.wnode.agent{ box-shadow:0 0 0 1px rgba(0,213,208,.45); }
.wnode.agent::before{ content:"Agent"; position:absolute; top:-8px; left:10px; font:500 9.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 6px; border-radius:5px; background:#e0faf9; color:#007a77; }
.wnode.human::before{ content:"You"; position:absolute; top:-8px; left:10px; font:500 9.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 6px; border-radius:5px; background:var(--ink-900); color:#fff; }
.wnode.on{ opacity:1; transform:none; box-shadow:0 0 0 1.5px var(--blue-600), 0 10px 24px -8px rgba(5,94,251,.35); }
.wnode.done{ opacity:1; transform:none; }
.wnode.ghost{ visibility:hidden; }
.wf-cap{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding:0 20px 20px; font-size:14.5px; color:var(--slate-500); }

/* video generator */
.vgen{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
@media (max-width:1000px){ .vgen{ grid-template-columns:1fr; } }
.vgen-in{ padding:clamp(22px, 3vw, 36px); display:grid; gap:18px; align-content:start; background:var(--surface-2); border-right:1px solid var(--line-soft); }
.vgen-out{ padding:clamp(22px, 3vw, 36px); display:grid; gap:16px; align-content:start; }
.vscreen{ position:relative; aspect-ratio:16/9; border-radius:var(--r-4); overflow:hidden; background:#0B1028; box-shadow:var(--shadow-frame); color:#fff; isolation:isolate; }
.vscreen canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.vscene{ position:absolute; inset:0; display:grid; align-content:center; padding:7%; gap:2.4%; opacity:0; transition:opacity 500ms var(--ease); }
.vscene.on{ opacity:1; }
.vscene .vse{ font:400 clamp(9px, 1.2vw, 12px)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.vscene h5{ margin:0; font:500 clamp(18px, 3.4vw, 44px)/1.02 var(--f-sans); letter-spacing:-.035em; color:#fff; max-width:16ch; }
.vscene h5 em{ font-style:normal; background:linear-gradient(90deg, #4DA3E8 0%, var(--accent) 45%, var(--accent-2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vscene .w{ display:inline-block; opacity:0; transform:translateY(.4em); filter:blur(4px); }
.vscene.on .w{ animation:wIn 700ms var(--ease) forwards; animation-delay:calc(var(--i) * 70ms + 150ms); }
@keyframes wIn{ to{ opacity:1; transform:none; filter:none; } }
.vscene .cards3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:3%; margin-top:3%; }
.vscene .cards3 div{ padding:7% 8%; border-radius:10px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); font:500 clamp(9px, 1.2vw, 14px)/1.25 var(--f-sans); display:grid; gap:8px; opacity:0; transform:translateY(14px); }
.vscene .cards3 div i{ width:10px; height:10px; border-radius:2px; transform:rotate(45deg); background:var(--c); box-shadow:0 0 10px var(--c); }
.vscene.on .cards3 div{ animation:wIn 600ms var(--ease) forwards; animation-delay:calc(var(--i) * 160ms + 450ms); }
.vscene .endcard{ display:grid; justify-items:center; text-align:center; gap:10px; }
.vscene .endcard .vlk{ font:700 clamp(22px, 4vw, 48px)/1 var(--f-sans); letter-spacing:-.03em; }
.vscreen .tl{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.12); }
.vscreen .tl i{ display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(var(--p, 0)); background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.vscreen .tc{ position:absolute; right:12px; top:12px; font:500 11px/1 var(--f-mono); padding:5px 7px; border-radius:6px; background:rgba(0,0,0,.35); }
.storyboard{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.storyboard button{ display:grid; gap:4px; padding:10px; border-radius:var(--r-3); border:0; background:var(--surface-2); cursor:pointer; text-align:left; transition:background var(--t-fast) var(--ease); }
.storyboard button .mini{ font-size:10.5px; }
.storyboard button b{ font-weight:500; font-size:13px; color:var(--ink-900); line-height:1.25; }
.storyboard button[aria-current="true"]{ background:var(--ink-900); }
.storyboard button[aria-current="true"] b{ color:#fff; }
.storyboard button[aria-current="true"] .mini{ color:rgba(255,255,255,.6); }
@media (max-width:600px){ .storyboard{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.svcpick{ display:flex; flex-wrap:wrap; gap:6px; }
.svcpick .chip{ height:32px; font-size:13px; background:#fff; }
.svcpick .chip[aria-pressed="true"]{ background:var(--ink-900); }

/* pod */
.pod{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
@media (max-width:900px){ .pod{ grid-template-columns:1fr; } }
.podvis{ position:relative; min-height:360px; display:grid; place-items:center; padding:24px; }
.pring{ position:relative; width:min(100%, 340px); aspect-ratio:1; }
.pring .o{ position:absolute; inset:0; border-radius:50%; border:1px dashed var(--line-strong); animation:rot 60s linear infinite; }
.pring .o2{ inset:18%; border-style:solid; border-color:var(--line); animation-duration:90s; animation-direction:reverse; }
@keyframes rot{ to{ transform:rotate(360deg); } }
.pring .m{ position:absolute; transform:translate(-50%,-50%); left:var(--x); top:var(--y); display:grid; justify-items:center; gap:6px; text-align:center; }
.pring .m i{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:var(--shadow-pop); font:500 13px/1 var(--f-mono); color:var(--ink-900); font-style:normal; }
.pring .m.ag i{ background:#e0faf9; box-shadow:0 0 0 1px rgba(0,213,208,.5); width:38px; height:38px; font-size:11px; color:#007a77; }
.pring .m span{ font-size:12.5px; color:var(--ink-700); line-height:1.25; max-width:110px; }
.pring .ctr{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:28%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center; background:var(--ink-900); color:#fff; font:500 14px/1.2 var(--f-sans); padding:8px; }
.rhythm{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.rhythm li{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:14px 16px; border-radius:var(--r-4); background:var(--surface-2); }
.rhythm time{ font:500 13px/1.4 var(--f-mono); color:var(--ink-900); }
.rhythm b{ display:block; color:var(--ink-900); font-weight:500; }
.rhythm p{ font-size:14.5px; color:var(--slate-500); }

/* ---------- build ---------- */
.releases{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width:900px){ .releases{ grid-template-columns:1fr; } }
.relc{ position:relative; display:grid; gap:12px; align-content:start; padding:24px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); }
.relc .when{ font:400 12.5px/1 var(--f-mono); color:var(--slate-400); letter-spacing:.04em; }
.relc h3{ font-size:22px; letter-spacing:-.02em; font-weight:500; }
.relc .prog{ height:6px; border-radius:6px; background:var(--line); overflow:hidden; }
.relc .prog i{ display:block; height:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--blue-600), var(--accent-2)); transition:transform 1.2s var(--ease); }
.releases.in .relc .prog i{ transform:scaleX(var(--p)); }
.relc ul{ margin:0; padding-left:18px; display:grid; gap:5px; font-size:14.5px; }
.relc.now{ box-shadow:0 0 0 1.5px var(--blue-600), var(--shadow-pop); }
.statusb{ border-radius:var(--r-5); background:#fff; box-shadow:var(--shadow-frame); overflow:hidden; }
.statusb table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.statusb th{ text-align:left; padding:14px 18px; font:400 11.5px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); background:var(--surface-2); border-bottom:1px solid var(--line-soft); }
.statusb td{ padding:14px 18px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.statusb tr:last-child td{ border-bottom:0; }
.statusb td:first-child{ color:var(--ink-900); font-weight:500; white-space:nowrap; }
.statusb td:first-child i{ display:inline-block; width:8px; height:8px; border-radius:2px; transform:rotate(45deg); background:var(--c); margin-right:10px; }
.statusb td.ev{ color:var(--slate-500); }
@media (max-width:760px){ .statusb th:nth-child(3), .statusb td:nth-child(3){ display:none; } .statusb td:first-child{ white-space:normal; } }
.pipe{ position:relative; padding:clamp(22px, 3vw, 36px); }
.pipe-row{ position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; align-items:center; }
@media (max-width:900px){ .pipe-row{ grid-template-columns:1fr; } }
.pnode{ position:relative; display:grid; gap:6px; padding:16px; border-radius:var(--r-4); background:var(--surface-2); min-height:132px; align-content:start; transition:background 420ms var(--ease), box-shadow 420ms var(--ease); }
.pnode .mini{ display:flex; justify-content:space-between; }
.pnode b{ font-weight:500; color:var(--ink-900); }
.pnode p{ font-size:13.5px; color:var(--slate-500); line-height:1.4; }
.pnode.on{ background:#fff; box-shadow:0 0 0 1.5px var(--blue-600), 0 12px 28px -10px rgba(5,94,251,.35); }
.pnode .chk{ position:absolute; right:12px; bottom:12px; display:flex; align-items:center; gap:6px; font:500 10.5px/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--slate-400); }
.pnode .chk i{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line-strong); }
.pnode.ok .chk{ color:#0a7d5f; }
.pnode.ok .chk i{ background:#10A284; border-color:#10A284; }
.pnode.par{ background:repeating-linear-gradient(135deg, var(--surface-2) 0 10px, #eef1f8 10px 20px); }
.pnode.par.on{ background:#fff; }
.stackg{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .stackg{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px){ .stackg{ grid-template-columns:1fr; } }
.fbk{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; }
@media (max-width:900px){ .fbk{ grid-template-columns:1fr; } }
.fbk .l{ padding:clamp(22px, 3vw, 36px); display:grid; gap:16px; align-content:start; }
.fbk .r{ padding:clamp(22px, 3vw, 36px); background:var(--surface-2); border-left:1px solid var(--line-soft); display:grid; gap:12px; align-content:start; }
.kind{ display:flex; flex-wrap:wrap; gap:8px; }

.ticket{ padding:18px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,213,208,.5); display:grid; gap:10px; font-size:14.5px; }
.ticket .mini{ color:#007a77; }
.ticket pre{ margin:0; white-space:pre-wrap; font:400 13.5px/1.55 var(--f-mono); color:var(--ink-700); }

@media (prefers-reduced-motion:reduce){
  .orbit .arc{ stroke-dashoffset:0!important; transition:none!important; }
  .orbit .core::before, .pring .o, .comp-empty .pulse::before, .comp-empty .pulse::after{ animation:none!important; }
  .chap, .chap *, .opanel li a, .rblock, .vscene .w, .vscene .cards3 div{ transition:none!important; animation:none!important; opacity:1!important; transform:none!important; filter:none!important; }
  .chap:not(.on){ opacity:0!important; visibility:hidden!important; }
}
a.chip{ text-decoration:none; }
.comp-out .dfacts{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
[data-st-ind] .chip{ height:32px; font-size:13px; }
[data-st-ind] .chip:not([aria-pressed="true"]){ background:#fff; }
.vscreen{ width:100%; }
.pring{ width:min(100%, 400px); }
.relc .prog.building{ background:linear-gradient(90deg, var(--line) 0 40%, #dfe8ff 50%, var(--line) 60% 100%); background-size:250% 100%; animation:shimmer 2.4s linear infinite; }
.relc .prog.building i{ display:none; }
@keyframes shimmer{ from{ background-position:100% 0; } to{ background-position:-150% 0; } }
details > summary::-webkit-details-marker{ display:none; }
@media (max-width:640px){ [data-epics] .qs{ grid-template-columns:1fr!important; } }
@media (prefers-reduced-motion:reduce){ .relc .prog.building{ animation:none; } }
.card .arr{ width:16px; height:16px; color:var(--slate-400); transition:transform var(--t-mid) var(--ease); }
a.card:hover .arr{ transform:translateX(3px); color:var(--ink-900); }
.kind .chip:not([aria-pressed="true"]){ background:#fff; }
.kind .chip[aria-pressed="true"]{ background:var(--ink-900); }
.pnode{ padding-bottom:40px; }
.hero-copy{ grid-template-columns:minmax(0,1fr); }
@media (max-width:560px){ .cmd-box{ height:58px; padding-left:18px; } .cmd-box input, .cmd-ph{ font-size:16px; } .cmd-ph{ left:50px; right:16px; } .cmd-box .go{ display:none; } }
.secrail .lbl{ position:sticky; left:0; z-index:1; align-self:stretch; padding-right:18px; background:linear-gradient(90deg, rgb(247,247,251) 82%, rgba(247,247,251,0)); }

/* ---------- home v2: ask bar, answer, path index ---------- */
.home-ask{ padding-bottom:clamp(56px, 7vw, 96px); }
.home-ask .hero-copy{ max-width:860px; }
.askbar{ display:grid; gap:16px; max-width:760px; margin-top:12px; }
.askbar .cmd-box{ padding-right:10px; }
.askbar .cmd-box svg.mag{ color:var(--blue-600); }
.ask-go{ flex:none; width:46px; height:46px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:var(--ink-900); color:#fff; transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.ask-go:hover{ background:var(--blue-600); }
.ask-go:active{ transform:scale(.94); }
.ask-go svg{ width:16px; height:16px; }
.askbar .cmd-ph{ right:76px; }
.ask-try{ display:flex; flex-wrap:wrap; gap:8px; transition:opacity var(--t-mid) var(--ease); }
.ask-try .chip{ background:rgba(255,255,255,.55); color:var(--slate-600); font-size:13.5px; height:34px; }
.ask-try .chip:hover{ background:#fff; color:var(--ink-900); }

.answer{ max-width:760px; display:grid; gap:20px; padding:28px; border-radius:22px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:var(--shadow-frame); animation:fadeUp 420ms var(--ease); }
.a-q{ display:grid; gap:6px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); }
.a-q b{ font-weight:500; color:var(--ink-900); font-size:17px; letter-spacing:-.01em; }
.a-body{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; align-items:start; }
.a-mark{ width:28px; height:28px; border-radius:50%; background:conic-gradient(from 200deg, var(--accent), var(--accent-2), #896BED, #D1247A, var(--accent)); position:relative; margin-top:1px; }
.a-mark::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:#fff; }
.answer .thinking .a-mark{ display:none; }
.a-body .thinking{ min-height:28px; }
.a-text{ display:grid; gap:10px; }
.a-text p{ font-size:17px; line-height:1.6; color:var(--ink-700); max-width:60ch; }
/* Rendered answer (md-lite.js): small section labels, badge-numbered steps, dot bullets. */
.a-md{ display:grid; gap:14px; max-width:64ch; font-size:16.5px; line-height:1.6; color:var(--ink-700); }
.a-md > *{ margin:0; animation:fadeUp 360ms var(--ease) both; animation-delay:calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce){ .a-md > *{ animation:none; } }
.a-md p{ font-size:inherit; max-width:none; }
.a-md .md-h{ margin-top:6px; font:500 12.5px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.a-md .md-h:first-child{ margin-top:0; }
.a-md .md-h strong{ font-weight:inherit; }
.a-md strong{ font-weight:500; color:var(--ink-900); }
.a-md ol, .a-md ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.a-md ol{ counter-reset:step; }
.a-md ol > li{ counter-increment:step; position:relative; padding-left:38px; min-height:26px; }
.a-md ol > li::before{ content:counter(step); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:500 13px/1 var(--f-sans); color:#fff; background:var(--ink-900); }
.a-md ul{ gap:6px; }
.a-md ul > li{ position:relative; padding-left:20px; }
.a-md ul > li::before{ content:""; position:absolute; left:4px; top:.68em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.a-md li > ul{ margin-top:8px; font-size:15.5px; color:var(--slate-600); }
.a-md li > ul > li::before{ width:5px; height:5px; background:var(--slate-400); top:.72em; }
.a-md code{ padding:1px 6px; border-radius:6px; background:rgba(0,31,74,.06); font:400 .92em var(--f-mono); color:var(--ink-900); }
.a-md a{ color:var(--blue-600); text-underline-offset:2px; }
.a-md .md-cite{ display:inline; margin-left:2px; padding:1px 5px; border-radius:9px; vertical-align:2px; font:500 10.5px/1 var(--f-mono); text-decoration:none; color:var(--blue-600); background:rgba(5,94,251,.09); }
.a-md .md-cite:hover{ background:var(--blue-600); color:#fff; }
.a-src{ font:400 12px/1.4 var(--f-mono); letter-spacing:.03em; color:var(--slate-400); }
.a-go{ display:grid; gap:10px; padding-top:4px; animation:fadeUp 380ms var(--ease); }
.a-pages{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:760px){ .a-pages{ grid-template-columns:1fr; } }
.a-page{ position:relative; display:grid; gap:6px; align-content:start; padding:14px 40px 16px 16px; border-radius:var(--r-4); background:#fff; box-shadow:0 0 0 1px rgba(0,31,74,.07); text-decoration:none; opacity:0; animation:fadeUp 420ms var(--ease) forwards; animation-delay:calc(var(--i) * 70ms); transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.a-page:hover{ box-shadow:0 0 0 1px var(--ink-900); transform:translateY(-2px); }
.a-page .a-p{ display:flex; align-items:center; gap:7px; font:400 11px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); }
.a-page .a-p i{ width:7px; height:7px; border-radius:50%; background:var(--c); }
.a-page b{ font-weight:500; color:var(--ink-900); font-size:15.5px; line-height:1.3; }
.a-page .a-d{ font-size:13.5px; line-height:1.45; color:var(--slate-500); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.a-page .arr{ position:absolute; right:14px; top:16px; width:15px; height:15px; color:var(--slate-400); transition:transform var(--t-mid) var(--ease), color var(--t-mid) var(--ease); }
.a-page:hover .arr{ transform:translateX(3px); color:var(--ink-900); }

.paths-index{ padding-block:clamp(40px, 5vw, 64px) clamp(72px, 9vw, 120px); }
.pidx{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px); border-top:1px solid var(--line); padding-top:clamp(28px, 3vw, 40px); }
@media (max-width:1060px){ .pidx{ grid-template-columns:repeat(3, minmax(0,1fr)); row-gap:40px; } }
@media (max-width:640px){ .pidx{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .pidx{ grid-template-columns:1fr; } }
.pcol{ display:grid; gap:10px; align-content:start; }
.pcol .ph{ display:grid; gap:12px; text-decoration:none; }
.pcol .n{ font:400 12px/1 var(--f-mono); color:var(--slate-400); }
.pcol .pnm{ display:flex; align-items:center; gap:10px; font:500 22px/1 var(--f-sans); letter-spacing:-.02em; color:var(--ink-900); }
.pcol .pnm i{ width:8px; height:8px; border-radius:50%; background:var(--c); transition:transform var(--t-mid) var(--ease); }
.pcol .ph:hover .nm i{ transform:scale(1.5); }
.pcol p{ font-size:14.5px; line-height:1.45; color:var(--slate-500); min-height:2.9em; }
.pcol ul{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:2px; }
.pcol li a{ display:block; padding:7px 0; font-size:15px; color:var(--ink-700); text-decoration:none; border-bottom:1px solid transparent; transition:color var(--t-fast) var(--ease), transform var(--t-mid) var(--ease); }
.pcol li a:hover{ color:var(--blue-600); transform:translateX(3px); }

.team-foot{ border-top:1px solid var(--line); padding-block:24px; font-size:13.5px; color:var(--slate-500); }
.team-foot .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }
.team-foot .wrap > span{ margin-left:auto; }
.team-foot a:not(.lockup){ color:var(--slate-500); text-decoration:none; }
.team-foot a:not(.lockup):hover{ color:var(--ink-900); }
.team-foot .lockup .word{ font-size:19px; }
.answer[hidden]{ display:none; }
.askbar.asked .ask-try{ display:none; }

/* ---------- the product OS icons ---------- */
.hxi{ --s:40px; --a:29,184,242; --b:0,194,199; position:relative; flex:none; width:var(--s); height:var(--s); border-radius:calc(var(--s) * .3); display:inline-grid; place-items:center;
  background:linear-gradient(145deg, rgba(var(--a),.16), rgba(var(--b),.07) 70%), #fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -8px rgba(var(--a),.45); }
.hxi svg{ width:56%; height:56%; overflow:visible; }
.hxi-sell{ --a:209,36,122; --b:143,91,232; }
.hxi-demo{ --a:137,107,237; --b:61,155,242; }
.hxi-deliver{ --a:16,162,132; --b:29,184,242; }
.hxi-build{ --a:0,88,171; --b:29,184,242; }
svg.hxi-g{ display:block; }

/* ---------- v2 clean-up: icons instead of dots, soft surfaces instead of outlined boxes ---------- */
.st::before{ display:none; }
.st{ padding:0 10px; }
.eyebrow .dot{ display:none; }
.path-hero .eyebrow{ gap:12px; }
.team-nav ul a .hxi-g{ width:18px; height:18px; }
.team-nav ul a{ gap:9px; }
.secrail .lbl .hxi-g{ width:18px; height:18px; }
.secrail a .hxi-g{ width:17px; height:17px; flex:none; }
.secrail a[aria-current="true"] .hxi-g path{ stroke:#fff; fill:rgba(255,255,255,.14); }
.has-ic > .hxi{ margin-bottom:20px; }
.cmd-res a{ grid-template-columns:30px minmax(0,1fr) auto; }
.a-page{ padding-top:16px; }
.a-page .hxi{ margin-bottom:6px; }
.pcol .ph{ display:flex; align-items:center; gap:14px; }
.pcol .pnm{ font:500 22px/1 var(--f-sans); letter-spacing:-.02em; color:var(--ink-900); }
.pcol .ph:hover .hxi{ transform:translateY(-2px); }
.pcol .hxi{ transition:transform var(--t-mid) var(--ease); }
.pcol ul{ gap:4px; }
.pcol li a{ display:flex; align-items:center; gap:12px; padding:5px 0; }
.pcol li a:hover{ transform:translateX(3px); }
.pcol li a .hxi{ box-shadow:none; }
.card, .acc, .prop, .archc, .relc, .rsvc, .a-page, .jcard, .tsteps li, .principles li, .pprinc li, .yield div, .pq, .t-go a{ box-shadow:0 1px 2px rgba(0,31,74,.05), 0 14px 32px -22px rgba(0,31,74,.28); }
.archc::before{ display:none; }
.relc.now{ box-shadow:0 0 0 1.5px var(--blue-600), 0 14px 32px -22px rgba(0,31,74,.28); }

/* ---------- v3: path pages as a quiet index, real assets only ---------- */
.ppage-hero{ padding-bottom:clamp(40px, 5vw, 64px); }
.ppage-hero .display{ font-size:clamp(40px, 5.6vw, 76px); }
.ppage-hero .hero-copy{ max-width:900px; }
.ppage-hero .eyebrow{ gap:12px; }
.psecs{ padding-bottom:clamp(48px, 6vw, 96px); }
.psec{ padding-block:clamp(48px, 6vw, 80px); border-top:1px solid var(--line-soft); }
.psec:first-child{ border-top:0; }
.psec-in{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.6fr); gap:clamp(24px, 5vw, 72px); align-items:start; }
@media (max-width:900px){ .psec-in{ grid-template-columns:1fr; } }
.psec-h{ display:grid; gap:14px; justify-items:start; position:sticky; top:calc(var(--nav-h) + 76px); }
@media (max-width:900px){ .psec-h{ position:static; } }
.psec-h h2{ font-size:clamp(26px, 2.6vw, 34px); line-height:1.08; letter-spacing:-.025em; }
.psec-h p{ font-size:16px; color:var(--slate-500); max-width:30em; }
.psec-b{ display:grid; gap:24px; min-width:0; }

.filmrow{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.filmrow .pfilm:first-child{ grid-column:1 / -1; }
.filmrow.one{ grid-template-columns:1fr; }
@media (max-width:640px){ .filmrow{ grid-template-columns:1fr 1fr; } }
.pfilm{ display:grid; gap:8px; padding:0; border:0; background:none; text-align:left; cursor:pointer; }
.pfilm .th{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:var(--night); box-shadow:0 1px 2px rgba(0,31,74,.06), 0 18px 36px -22px rgba(0,31,74,.4); }
.pfilm .th img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.pfilm:hover .th img{ transform:scale(1.03); }
.pfilm .pl{ position:absolute; left:14px; bottom:14px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--ink-900); transition:transform var(--t-mid) var(--ease); }
.pfilm:first-child .pl{ width:56px; height:56px; left:20px; bottom:20px; }
.pfilm:hover .pl{ transform:scale(1.08); }
.pfilm .pl svg{ width:14px; height:14px; margin-left:2px; }
.pfilm .dur{ position:absolute; right:12px; bottom:12px; font:500 11.5px/1 var(--f-mono); padding:5px 7px; border-radius:6px; background:rgba(11,16,40,.72); color:#fff; }
.pfilm b{ font-weight:500; color:var(--ink-900); font-size:15.5px; }
.pfilm .d{ font-size:13.5px; color:var(--slate-500); margin-top:-4px; }

.arows{ list-style:none; margin:0; padding:0; display:grid; }
.arows li a{ display:grid; grid-template-columns:52px minmax(0,1fr) auto 16px; gap:16px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--line-soft); text-decoration:none; transition:background var(--t-fast) var(--ease), padding var(--t-mid) var(--ease); }
.arows li:first-child a, .arows .agrp + li a{ border-top:1px solid var(--line-soft); }
.arows li a:hover{ background:rgba(255,255,255,.7); padding-inline:12px 8px; }
.arows .ft{ font:500 11px/1 var(--f-mono); letter-spacing:.06em; color:var(--slate-400); }
.arows .tt b{ display:block; font-weight:500; color:var(--ink-900); font-size:16px; }
.arows .tt .d{ display:block; font-size:14px; color:var(--slate-500); margin-top:2px; }
.arows .m{ font:400 12.5px/1 var(--f-mono); color:var(--slate-400); white-space:nowrap; }
.arows li a > svg{ width:16px; height:16px; color:var(--slate-400); }
.arows li a:hover > svg{ color:var(--ink-900); }
.arows .agrp{ padding:22px 4px 10px; font:400 12px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-400); }
.arows .agrp:first-child{ padding-top:0; }
@media (max-width:560px){ .arows li a{ grid-template-columns:44px minmax(0,1fr) 16px; } .arows .m{ display:none; } }
.arows .atool a{ grid-template-columns:auto minmax(0,1fr) auto; padding:16px 18px; margin-bottom:12px; border:0; border-radius:18px; background:#fff; box-shadow:0 1px 2px rgba(0,31,74,.05), 0 18px 40px -26px rgba(0,31,74,.35); }
.arows .atool a:hover{ padding-inline:18px; transform:translateY(-1px); }
.arows .atool b{ display:block; font-weight:500; color:var(--ink-900); font-size:17px; }
.arows .atool .d{ display:block; font-size:14px; color:var(--slate-500); margin-top:2px; }
.arows .atool .go{ display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--blue-600); font-size:15px; }
.arows .atool .go .arr{ width:15px; height:15px; }
.arows .atool + li:not(.atool):not(.agrp) a{ border-top:1px solid var(--line-soft); }

.psteps{ list-style:none; margin:0; padding:0; counter-reset:ps; display:grid; }
.psteps li{ counter-increment:ps; display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:16px; padding:14px 4px; border-bottom:1px solid var(--line-soft); }
.psteps li:first-child{ border-top:1px solid var(--line-soft); }
.psteps li::before{ content:counter(ps); grid-row:span 2; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:500 13px/1 var(--f-mono); color:#fff; background:linear-gradient(135deg, #896BED, #3D9BF2); }
.psteps b{ font-weight:500; color:var(--ink-900); font-size:16px; }
.psteps span{ font-size:14.5px; color:var(--slate-500); }
.pnotes{ margin:0; padding-left:18px; display:grid; gap:6px; font-size:14.5px; color:var(--slate-600); }
.pentries{ list-style:none; margin:0; padding:0; display:grid; }
.pentries li{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; padding:14px 4px; border-bottom:1px solid var(--line-soft); }
.pentries li:first-child{ border-top:1px solid var(--line-soft); }
.pentries time{ font:400 12.5px/1.6 var(--f-mono); color:var(--slate-400); }
.pentries span{ color:var(--ink-900); font-weight:500; font-size:15.5px; }
@media (max-width:560px){ .pentries li{ grid-template-columns:1fr; gap:4px; } }
.pform{ display:grid; gap:14px; }
.pform textarea{ width:100%; min-height:120px; padding:14px 16px; border-radius:16px; border:0; background:#fff; box-shadow:0 1px 2px rgba(0,31,74,.06), 0 14px 30px -22px rgba(0,31,74,.3); font:400 16px/1.5 var(--f-sans); color:var(--ink-900); resize:vertical; outline:0; }
.pform textarea:focus{ box-shadow:0 0 0 2px var(--blue-600); }
.pform-go{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.pform .kind .chip{ background:#fff; border-color:transparent; box-shadow:0 1px 2px rgba(0,31,74,.06); }
.pform .kind .chip[aria-pressed="true"]{ background:var(--ink-900); color:#fff; }

/* ---------- v4: feature blocks for tools ---------- */
.ptool-k{ font:500 11.5px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500); }
.ptool{ position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); align-items:stretch; min-height:300px; border-radius:var(--r-5); overflow:hidden; text-decoration:none; color:var(--ink-900);
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pc) 16%, #fff) 0%, #fff 62%), #fff; box-shadow:0 1px 2px rgba(0,31,74,.05), 0 18px 48px -18px color-mix(in srgb, var(--pc) 45%, transparent);
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.ptool:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(0,31,74,.05), 0 26px 60px -20px color-mix(in srgb, var(--pc) 55%, transparent); }
.ptool-tx{ display:grid; align-content:start; justify-items:start; gap:12px; padding:clamp(24px, 3vw, 36px); }
.ptool-tx > b{ font-size:clamp(26px, 2.4vw, 34px); line-height:1.06; letter-spacing:-.03em; font-weight:500; }
.ptool-d{ font-size:16px; line-height:1.5; color:var(--slate-600); max-width:30em; }
.ptool-go{ margin-top:10px; }
.ptool:hover .ptool-go .arr{ transform:translateX(3px); }
.ptool-shot{ position:relative; align-self:end; margin:36px -2px -2px 0; border-radius:14px 0 0 0; background:#fff; overflow:hidden; box-shadow:-1px -1px 0 rgba(0,31,74,.06), -18px -10px 40px -16px rgba(0,31,74,.22); transition:transform var(--t-slow) var(--ease); }
.ptool:hover .ptool-shot{ transform:translate(-4px, -4px); }
.ptool-shot .bar{ display:flex; gap:6px; padding:10px 12px; background:#f4f5f9; border-bottom:1px solid rgba(0,31,74,.06); }
.ptool-shot .bar i{ width:8px; height:8px; border-radius:50%; background:rgba(0,31,74,.14); }
.ptool-shot img{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover; object-position:left top; }
.ptool.noshot{ grid-template-columns:1fr; min-height:0; }
@media (max-width:760px){ .ptool{ grid-template-columns:1fr; } .ptool-shot{ margin:0 0 -2px 24px; } }

/* ---------- v4: whitepaper reader card ---------- */
.preader{ display:grid; grid-template-columns:minmax(0, .62fr) minmax(0, 1fr); gap:clamp(20px, 3vw, 36px); align-items:center; padding:clamp(20px, 2.6vw, 30px); border-radius:var(--r-5); background:linear-gradient(135deg, #fbf1fb 0%, #f1f3ff 55%, #fff 100%); box-shadow:0 1px 2px rgba(0,31,74,.05), 0 18px 44px -24px rgba(104,83,255,.35); }
.preader-cv{ display:block; padding:0; border:0; background:none; cursor:zoom-in; border-radius:6px; box-shadow:0 2px 4px rgba(0,31,74,.08), 0 20px 40px -14px rgba(0,31,74,.35); transform:rotate(-1.5deg); transition:transform var(--t-mid) var(--ease); }
.preader-cv:hover{ transform:rotate(0) translateY(-4px); }
.preader-cv img{ display:block; width:100%; height:auto; border-radius:6px; }
.preader-tx{ display:grid; gap:12px; justify-items:start; }
.preader-tx > b{ color:var(--ink-900); font-size:clamp(24px, 2.2vw, 30px); line-height:1.08; letter-spacing:-.025em; font-weight:500; }
.preader-tx p{ color:var(--slate-600); font-size:16px; line-height:1.5; }
.preader-tx .meta{ font:400 12px/1 var(--f-mono); color:var(--slate-400); letter-spacing:.04em; }
.preader-go{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.preader-go .btn svg{ width:16px; height:16px; }
@media (max-width:620px){ .preader{ grid-template-columns:1fr; } .preader-cv{ max-width:220px; } }

/* ---------- v4: article and assessment ---------- */
.particle{ display:grid; gap:10px; justify-items:start; padding:clamp(22px, 2.6vw, 30px); border-radius:var(--r-5); background:#fff; text-decoration:none; color:var(--ink-900); box-shadow:0 1px 2px rgba(0,31,74,.05), 0 14px 36px -24px rgba(0,31,74,.3); transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); }
.particle:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(0,31,74,.05), 0 20px 44px -22px rgba(0,31,74,.35); }
.particle > b{ font-size:clamp(22px, 2vw, 28px); line-height:1.1; letter-spacing:-.025em; font-weight:500; }
.particle p{ color:var(--slate-600); font-size:16px; line-height:1.5; max-width:40em; }
.particle .by{ font-size:14px; color:var(--slate-500); }
.particle .go{ display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-weight:500; color:var(--blue-600); }
.particle .go .arr{ width:15px; height:15px; transition:transform var(--t-mid) var(--ease); }
.particle:hover .go .arr{ transform:translate(2px, -2px); }
.pexplain{ display:grid; gap:14px; justify-items:start; padding:clamp(22px, 2.6vw, 30px); border-radius:var(--r-5); background:#fff; box-shadow:0 1px 2px rgba(0,31,74,.05), 0 14px 36px -24px rgba(0,31,74,.3); }
.pexplain > b{ color:var(--ink-900); font-size:clamp(22px, 2vw, 28px); line-height:1.1; letter-spacing:-.025em; font-weight:500; }
.pexplain > p{ color:var(--slate-600); font-size:16px; line-height:1.5; max-width:42em; }
.pscale{ list-style:none; margin:8px 0 0; padding:0; width:100%; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.pscale li{ display:grid; align-content:start; gap:6px; padding:14px 12px 16px; border-radius:var(--r-4); background:color-mix(in srgb, var(--accent) calc(6% + var(--i) * 6%), #fff); font-size:13px; line-height:1.4; color:var(--slate-600); }
.pscale .n{ font:500 12px/1 var(--f-mono); color:var(--slate-400); }
.pscale b{ font-size:15px; font-weight:500; color:var(--ink-900); }
.ptags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 6px; }
.ptags .lb{ font:500 11.5px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500); margin-right:6px; }
.ptags span:not(.lb){ padding:6px 10px; border-radius:var(--r-pill); background:var(--surface-2); font-size:13px; color:var(--ink-700); }
@media (max-width:760px){ .pscale{ grid-template-columns:1fr; } .pscale li{ grid-template-columns:24px 120px 1fr; align-items:baseline; } }

/* ---------- v4: swipe deck ---------- */
.pswipe{ display:grid; gap:16px; min-width:0; }
.pswipe-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:6px 2px 26px; margin:-6px -2px -26px; outline:none; }
.pswipe-track::-webkit-scrollbar{ display:none; }
.pswipe-track:focus-visible .scard.on{ box-shadow:0 0 0 2px var(--blue-600), 0 18px 44px -22px rgba(0,31,74,.35); }
.scard{ flex:0 0 calc(100% - 56px); scroll-snap-align:start; display:grid; align-content:start; gap:14px; min-height:440px; padding:clamp(24px, 3vw, 38px); border-radius:var(--r-5); background:radial-gradient(110% 120% at 100% 0%, color-mix(in srgb, var(--pc) 9%, #fff) 0%, #fff 55%); box-shadow:0 1px 2px rgba(0,31,74,.05), 0 18px 44px -26px rgba(0,31,74,.32); cursor:pointer; }
.scard.on{ opacity:1; cursor:auto; }
.scard-k{ display:inline-flex; align-items:center; gap:10px; font:500 12px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--pc); }
.scard-k .n{ color:var(--slate-400); }
.scard h3{ font-size:clamp(26px, 2.6vw, 36px); line-height:1.06; letter-spacing:-.03em; font-weight:500; max-width:18ch; }
.scard-p{ font-size:16.5px; line-height:1.5; color:var(--slate-600); max-width:40em; }
.scard-q{ margin:10px 0 0; padding:18px 20px; border-radius:var(--r-4); background:color-mix(in srgb, var(--pc) 7%, #fff); font-size:17px; line-height:1.45; color:var(--ink-900); }
.scols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:8px; }
.scols > div{ display:grid; align-content:start; gap:8px; padding:16px; border-radius:var(--r-4); background:var(--surface-2); font-size:14px; line-height:1.45; color:var(--slate-600); }
.scols > div.tint{ background:color-mix(in srgb, var(--ac) 9%, #fff); box-shadow:inset 0 3px 0 var(--ac); }
.scols b{ font-size:17px; font-weight:500; color:var(--ink-900); letter-spacing:-.01em; }
.scols em{ font-style:normal; font-size:13px; color:var(--slate-500); }
.sladder{ list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; align-items:end; }
.sladder li{ display:grid; align-content:end; gap:8px; padding:16px; border-radius:var(--r-4); font-size:14px; line-height:1.45; color:var(--slate-600); min-height:calc(120px + var(--k) * 44px); background:linear-gradient(180deg, color-mix(in srgb, var(--pc) calc(6% + var(--k) * 5%), #fff), #fff); box-shadow:0 0 0 1px rgba(0,31,74,.06); }
.sladder b{ font-size:17px; font-weight:500; color:var(--ink-900); }
.slist{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:2px; }
.slist li{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 2fr); gap:16px; padding:14px 0; border-top:1px solid var(--line-soft); font-size:15px; line-height:1.5; color:var(--slate-600); }
.slist b{ font-weight:500; color:var(--ink-900); }
.scard-note{ font-size:14px; color:var(--slate-500); }
.slinks{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.pswipe-ctl{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:14px; }
.sbtn{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-strong); background:#fff; color:var(--ink-900); cursor:pointer; transition:background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.sbtn svg{ width:16px; height:16px; }
.sbtn:hover{ background:var(--surface-2); }
.sbtn:disabled{ opacity:.35; cursor:default; }
.pswipe-ctl .sbtn:first-child{ order:0; }
.sprog{ order:1; height:3px; border-radius:3px; background:rgba(0,31,74,.08); overflow:hidden; }
.sprog i{ display:block; height:100%; background:var(--pc); transform-origin:left; transform:scaleX(.1); transition:transform var(--t-mid) var(--ease); }
.scount{ order:2; font:500 12.5px/1 var(--f-mono); color:var(--slate-500); letter-spacing:.04em; }
.pswipe-ctl [data-next]{ order:3; }
@media (max-width:760px){ .scard{ flex-basis:calc(100% - 28px); min-height:0; } .scols, .sladder{ grid-template-columns:1fr; } .sladder li{ min-height:0; } .slist li{ grid-template-columns:1fr; gap:4px; } }

/* ---------- v4: reader overlay ---------- */
.reader{ position:fixed; inset:0; z-index:200; display:grid; grid-template-columns:72px minmax(0,1fr) 72px; grid-template-rows:auto minmax(0,1fr) auto; background:rgba(8,12,30,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity var(--t-mid) var(--ease); }
.reader.open{ opacity:1; pointer-events:auto; }
.rd-top{ grid-column:1 / -1; display:flex; align-items:center; gap:14px; padding:14px 18px; color:#fff; }
.rd-t{ font-weight:500; font-size:15px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rd-pg{ font:400 13px/1 var(--f-mono); color:rgba(255,255,255,.7); }
.reader .rd-dl{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.3); }
.reader .rd-dl:hover{ --bg:rgba(255,255,255,.1); --bd:#fff; }
.rd-dl svg{ width:15px; height:15px; }
.rd-stage{ grid-column:2; display:grid; place-items:center; min-height:0; padding:4px 0 8px; touch-action:pan-y; user-select:none; }
.rd-spread{ display:flex; align-items:center; justify-content:center; gap:0 !important; }
.rd-spread img{ display:block; flex:none; width:auto; aspect-ratio:992 / 1404; height:min(calc(100vh - 140px), calc((100vw - 160px) * 1.414)); background:#fff; box-shadow:0 20px 60px -20px rgba(0,0,0,.6); }
.rd-spread.two img{ height:min(calc(100vh - 140px), calc((100vw - 180px) / 2 * 1.414)); }
@media (max-width:760px){ .rd-spread img{ height:auto; width:calc(100vw - 104px); max-height:calc(100vh - 140px); } }
.rd-nav{ align-self:center; justify-self:center; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.rd-nav svg{ width:18px; height:18px; }
.rd-nav:disabled{ opacity:.25; cursor:default; }
.rd-prev{ grid-column:1; grid-row:2; } .rd-next{ grid-column:3; grid-row:2; }
.rd-scrub{ grid-column:2; width:min(520px, 100%); justify-self:center; margin:0 0 18px; accent-color:#fff; }
@media (max-width:760px){ .reader{ grid-template-columns:44px minmax(0,1fr) 44px; } .rd-nav{ width:38px; height:38px; } .rd-dl{ display:none; } }

/* ---------- v5: demo guide ---------- */
.pintro{ font-size:18px; line-height:1.55; color:var(--ink-700); max-width:42em; }
.pfacts{ display:grid; gap:14px; }
.pfacts-g{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.pfacts-g > div{ display:grid; align-content:start; gap:6px; padding:18px; border-radius:var(--r-4); background:#fff; box-shadow:0 1px 2px rgba(0,31,74,.05), 0 10px 30px -22px rgba(0,31,74,.3); font-size:14px; line-height:1.45; color:var(--slate-600); }
.pfacts-g b{ font-size:26px; line-height:1; letter-spacing:-.02em; font-weight:500; color:var(--blue-600); background:linear-gradient(90deg, #896BED, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pfacts-g strong{ font-size:15.5px; font-weight:500; color:var(--ink-900); }
.pcallout{ display:grid; gap:6px; padding:18px 20px; border-radius:var(--r-4); background:linear-gradient(135deg, #fff6e8, #fff); box-shadow:inset 3px 0 0 #f0a020; font-size:15px; line-height:1.55; color:var(--ink-700); }
.pcallout b{ color:var(--ink-900); font-weight:500; }
.rsteps{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.rsteps > li{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:16px; padding:20px 0; border-top:1px solid var(--line-soft); }
.rsteps .n{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font:500 14px/1 var(--f-mono); color:#fff; background:linear-gradient(135deg, #896BED, #6a4fe0); }
.rsteps b{ font-size:18px; font-weight:500; color:var(--ink-900); }
.rsteps p{ margin-top:6px; color:var(--slate-600); font-size:15.5px; line-height:1.55; }
.rsteps dl{ margin:14px 0 0; display:grid; gap:8px; }
.rsteps dl > div{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:14px; padding:12px 14px; border-radius:var(--r-3); background:var(--surface-2); font-size:14px; line-height:1.5; }
.rsteps dt{ font-weight:500; color:var(--ink-900); }
.rsteps dd{ margin:0; color:var(--slate-600); }
@media (max-width:760px){ .pfacts-g{ grid-template-columns:1fr 1fr; } .rsteps dl > div{ grid-template-columns:1fr; gap:2px; } }

/* ---------- v5: roadmap ---------- */
.rmap{ display:grid; gap:16px; min-width:0; }
.rmap-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--slate-600); }
.rmap-legend span{ display:inline-flex; align-items:center; gap:7px; }
.rmap-legend i, .rg li i{ width:9px; height:9px; border-radius:3px; background:var(--dc); flex:none; }
.rtrack{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); gap:12px; overflow-x:auto; scroll-snap-type:x proximity; padding:22px 2px 18px; margin:0 -2px; scrollbar-width:thin; }
.rline{ position:absolute; left:14px; right:14px; top:30px; height:2px; background:linear-gradient(90deg, #10A284 0%, #10A284 40%, #896BED 62%, rgba(0,31,74,.12) 80%); border-radius:2px; }
.rphase{ position:relative; scroll-snap-align:start; display:grid; align-content:start; gap:8px; padding:34px 18px 20px; border-radius:var(--r-4); background:#fff; box-shadow:0 1px 2px rgba(0,31,74,.05), 0 14px 34px -24px rgba(0,31,74,.35); }
.rphase::before{ content:''; position:absolute; top:3px; left:18px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--mk, rgba(0,31,74,.2)); }
.rphase.s-live{ --mk:#10A284; } .rphase.s-shipped{ --mk:#10A284; } .rphase.s-now{ --mk:#896BED; } .rphase.s-horizon{ --mk:rgba(0,31,74,.18); background:linear-gradient(180deg, #f6f7fb, #fff); }
.rphase.s-live::before, .rphase.s-shipped::before{ background:var(--mk); }
.rphase.s-now::before{ background:#896BED; animation:rpulse 2.4s var(--ease) infinite; }
@keyframes rpulse{ 0%{ box-shadow:0 0 0 3px rgba(137,107,237,.9), 0 0 0 3px rgba(137,107,237,.35); } 70%{ box-shadow:0 0 0 3px rgba(137,107,237,.9), 0 0 0 12px rgba(137,107,237,0); } 100%{ box-shadow:0 0 0 3px rgba(137,107,237,.9), 0 0 0 12px rgba(137,107,237,0); } }
@media (prefers-reduced-motion:reduce){ .rphase.s-now::before{ animation:none; } }
.rphase-h{ display:flex; justify-content:space-between; gap:8px; align-items:center; }
.rst{ font:500 11px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--mk) 14%, #fff); color:var(--ink-900); }
.rwhen{ font-size:12px; color:var(--slate-500); text-align:right; }
.rn{ font:500 12px/1 var(--f-mono); color:var(--slate-400); margin-top:6px; }
.rt{ font-size:20px; font-weight:500; letter-spacing:-.02em; color:var(--ink-900); line-height:1.15; }
.rg{ display:grid; gap:6px; margin-top:8px; }
.rgl{ font:500 10.5px/1.3 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--slate-500); }
.rg ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.rg li{ display:flex; gap:9px; align-items:baseline; font-size:14px; line-height:1.35; color:var(--ink-900); }
.rg li i{ transform:translateY(1px); }
.rg li em{ display:block; font-style:normal; font-size:12.5px; color:var(--slate-500); margin-top:2px; }
.rnote{ font-size:13.5px; color:var(--slate-500); }

/* ---------- v5: idea form ---------- */
.pidea{ display:grid; gap:14px; padding:clamp(20px, 2.6vw, 28px); border-radius:var(--r-5); background:linear-gradient(135deg, #f1f5ff, #fff 60%); box-shadow:0 1px 2px rgba(0,31,74,.05), 0 16px 40px -26px rgba(5,94,251,.4); }
.pidea-h{ display:grid; gap:4px; }
.pidea-h b{ font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--ink-900); }
.pidea-h span{ font-size:14.5px; color:var(--slate-500); }
.pidea .kind{ display:flex; flex-wrap:wrap; gap:8px; }
.pidea textarea, .pidea input{ width:100%; border:1px solid var(--line-strong); border-radius:var(--r-3); background:#fff; padding:12px 14px; font:400 15.5px/1.5 var(--f-sans); color:var(--ink-900); }
.pidea textarea:focus, .pidea input:focus{ outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(5,94,251,.15); }
.pidea-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.pidea-row label{ display:grid; gap:6px; font-size:13.5px; color:var(--slate-600); }
.pidea-row small{ color:var(--slate-400); font-size:12px; }
.pidea .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.pidea .pform-go{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
@media (max-width:760px){ .pidea-row{ grid-template-columns:1fr; } }

/* ---------- v5: release notes and docs ---------- */
.prel{ list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative; }
.prel li{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; position:relative; }
.prel li::before{ content:''; position:absolute; left:120px; top:0; bottom:0; width:1px; background:var(--line-soft); }
.prel time{ padding-top:20px; font:500 12px/1.4 var(--f-mono); color:var(--slate-500); }
.prel a{ display:grid; gap:6px; padding:18px 0 18px 22px; text-decoration:none; color:var(--ink-900); position:relative; border-top:1px solid var(--line-soft); }
.prel a::before{ content:''; position:absolute; left:-21px; top:24px; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--brand-primary); }
.prel li.new a::before{ background:var(--brand-primary); }
.prel b{ font-size:17px; font-weight:500; line-height:1.3; }
.prel span{ font-size:14.5px; line-height:1.5; color:var(--slate-600); }
.prel em{ font-style:normal; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--blue-600); }
.prel em .arr{ width:14px; height:14px; transition:transform var(--t-mid) var(--ease); }
.prel a:hover em .arr{ transform:translateX(3px); }
@media (max-width:620px){ .prel li{ grid-template-columns:1fr; gap:0; } .prel li::before{ display:none; } .prel time{ padding-top:14px; } .prel a{ padding-left:0; border-top:0; } .prel a::before{ display:none; } }
.pjourney{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.pj{ display:grid; align-content:start; gap:10px; padding:16px; border-radius:var(--r-4); background:linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) calc(4% + var(--i) * 3%), #fff), #fff 40%); box-shadow:0 1px 2px rgba(0,31,74,.05), 0 12px 30px -24px rgba(0,31,74,.35); }
.pj-h{ display:grid; gap:2px; padding:4px 4px 8px; border-bottom:1px solid var(--line-soft); }
.pj-h b{ font-size:17px; font-weight:500; color:var(--ink-900); }
.pj-h span{ font-size:13px; color:var(--slate-500); }
.pj ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.pj a{ display:grid; grid-template-columns:26px minmax(0,1fr) 16px; gap:8px; align-items:start; padding:10px 6px; border-radius:var(--r-3); text-decoration:none; color:var(--ink-900); transition:background var(--t-fast) var(--ease); }
.pj a:hover{ background:rgba(0,31,74,.04); }
.pj .no{ font:500 11.5px/1.6 var(--f-mono); color:var(--slate-400); }
.pj .tx{ display:grid; gap:3px; }
.pj .tx b{ font-size:14.5px; font-weight:500; }
.pj .tx > span{ font-size:13px; line-height:1.45; color:var(--slate-600); }
.pj .tag{ display:inline-block; margin-left:4px; padding:2px 6px; border-radius:var(--r-pill); background:#fff3dc; color:#8a5a00; font:500 10.5px/1.4 var(--f-mono); vertical-align:1px; }
.pj .arr{ width:14px; height:14px; margin-top:3px; color:var(--slate-400); }
.pneeds{ display:grid; gap:12px; }
.pneeds dl{ margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.pneeds dl > div{ padding:14px 16px; border-radius:var(--r-3); background:var(--surface-2); font-size:14px; line-height:1.45; color:var(--slate-600); }
.pneeds dt{ font-weight:500; color:var(--ink-900); margin-bottom:4px; }
.pneeds dd{ margin:0; }
@media (max-width:900px){ .pjourney{ grid-template-columns:1fr; } }
@media (max-width:620px){ .pneeds dl{ grid-template-columns:1fr; } }
.sladder{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
@media (max-width:760px){ .sladder{ grid-auto-flow:row; } }
.psec.wide .psec-in{ grid-template-columns:1fr; gap:28px; }
.psec.wide .psec-h{ position:static; grid-template-columns:auto minmax(0,1fr); column-gap:18px; align-items:center; }
.psec.wide .psec-h .hxi{ grid-row:span 2; }
.psec.wide .psec-h p{ grid-column:2; }
.psec.wide .rtrack{ grid-auto-columns:minmax(240px, 1fr); }
.psec.wide .pidea{ max-width:880px; }

/* Sell hero note and section placeholders */
.hero-note{ margin-top:18px; display:flex; align-items:center; gap:10px; font-size:14px; color:var(--slate-500); }
.hero-note::before{ content:''; width:18px; height:2px; background:#E8A317; }
.pholder{ padding:32px 32px 30px; border:1px dashed var(--line); border-radius:14px; background:var(--surface-2, transparent); }
.pholder b{ display:block; font-size:17px; font-weight:500; color:var(--ink-900); }
.pholder p{ margin-top:8px; max-width:46em; font-size:15px; line-height:1.55; color:var(--slate-600); }

/* Roadmap cards without phase markers */
.rphase::before{ display:none !important; }
.rline{ display:none !important; }
.rphase{ padding-top:20px; }
.rtrack{ padding-top:4px; }