:root{
  /* ChatRail identity — near-monochrome, one accent used sparingly */
  --ink:#141419;
  --ink-2:#3c3d44;
  --body:#5a5b63;
  --faint:#66676f;   /* 5.44:1 on paper, 5.07 on the sunk band */
  --line:#e6e3de;
  --line-2:#f0eeea;
  --bg:#fcfbf9;
  --surface:#fff;
  --sunk:#f5f3ef;
  /* bright magenta. three stops because one hex cannot clear 4.5:1 on both
     the paper ground and the indigo/ink surfaces. */
  --accent:#d61f8f;      /* fills, icons, large type, buttons  — 4.56 on paper */
  --accent-dark:#a81574; /* small text on light                — 6.71 on paper */
  --accent-lift:#f06ab4; /* small text on indigo/ink           — 5.95 on indigo */
  --accent-tint:#fce7f2;
  --ok:#1a6f46;
  --ok-tint:#e8f1ec;
  --warn:#835d09;
  --warn-tint:#faefd9;
  --code-bg:#161c33;
  /* Shared outer frame keeps FAQ, divider and footer edges aligned. */
  /* --frame-gutter removed: the footer and FAQ now use .wrap's own centred
     1120px geometry, so there is no second, viewport-relative gutter system. */

  /* nested radius scale */
  --r-lg:18px;
  --r-md:10px;
  --r-sm:6px;

  /* two-layer, almost-invisible elevation */
  --sh-soft:0 2px 4px rgba(20,20,25,.02),0 6px 6px rgba(20,20,25,.02);
  --sh-card:0 1px 2px rgba(20,20,25,.04),0 1px 3px rgba(20,20,25,.05);

  /* WhatsApp's own colours — only inside the phone mockup */
  --wa-deep:#008069;
  --bubble-out:#d9fdd3;
  --chat-bg:#efeae2;
  --tick:#53bdeb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
  margin:0;color:var(--ink);
  background-color:var(--bg);
  font:400 15px/1.55 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;letter-spacing:inherit}
h1,h2,h3,h4,p,ul,ol,dl{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%}
svg:not(.bmark){fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bmark{fill:currentColor;stroke:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.qr,.qr rect{stroke:none}
.qr rect{fill:var(--ink)}
.qr rect.w{fill:var(--surface)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;letter-spacing:0}

/* ---------- type ---------- */
h1{font-size:clamp(34px,4.3vw,52px);font-weight:500;line-height:1.05;letter-spacing:-.042em}
h2{font-size:clamp(28px,3.3vw,42px);font-weight:500;line-height:1.08;letter-spacing:-.032em}
h3{font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:1.35}
h4{font-size:15px;font-weight:500;letter-spacing:-.02em}
.lead{font-size:19px;line-height:1.5;letter-spacing:-.022em;color:var(--body)}
.kicker{display:block;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-dark)}
.head{max-width:600px;margin-bottom:44px}
.head h2{margin-top:16px}
.head p{margin-top:16px;font-size:17px;line-height:1.55;letter-spacing:-.02em;color:var(--body)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:9px;border:1px solid transparent;
  font-size:14.5px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#26272e}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--sh-card)}
.btn-ghost:hover{border-color:#d6d1c8}
.btn-sm{padding:8px 14px;font-size:13.5px}

/* ---------- header ---------- */
body>header{position:sticky;top:0;z-index:50;background:#fcfbf9f2;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:30px;height:62px}
.brand{display:flex;align-items:center;gap:2px;font-size:17px;font-weight:500;letter-spacing:-.03em}
.logo{width:25px;height:25px;border-radius:7px;background:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.logo svg{width:14px;height:14px;color:var(--surface);stroke-width:1.7}
.nav-links{display:flex;gap:24px;font-size:14px;color:var(--body);margin-right:auto}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:9px;align-items:center}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:center;padding-top:40px;padding-bottom:54px}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:4px 12px 4px 5px;
  border:1px solid var(--line);border-radius:100px;font-size:13px;color:var(--body);
  background:var(--surface);box-shadow:var(--sh-card);
}
.pill b{background:var(--accent-tint);color:var(--accent-dark);font-weight:500;padding:2px 8px;border-radius:100px;font-size:11.5px;letter-spacing:.02em}
.hero h1{margin:24px 0 20px}
.hero h1 .g{color:var(--accent)}
.hero .lead{max-width:490px}
.hero-actions{display:flex;gap:10px;margin:30px 0 26px;flex-wrap:wrap}
.hero-facts{display:flex;flex-wrap:wrap;gap:9px 24px;font-size:13.5px;color:var(--body)}
.hero-facts span{display:flex;align-items:center;gap:7px}
.hero-facts svg{width:14px;height:14px;color:var(--accent);stroke-width:1.9}
/* ---------- quickstart / scope ---------- */
.getting-started{padding-top:86px;padding-bottom:86px;border-top:1px solid var(--line)}
.pilot-proof{padding-top:88px;padding-bottom:88px;background:var(--code-bg);color:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pilot-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.pilot-copy{max-width:560px}.pilot-copy .kicker{color:var(--accent-lift)}.pilot-copy h2{margin-top:14px;color:#fff}.pilot-copy p{margin-top:18px;font-size:17px;line-height:1.6;color:#c4c5d0}.pilot-note{margin-top:24px!important;color:#9698aa!important;font-size:12px!important}.pilot-showcase{padding:14px;background:#202640;border:1px solid #3a4262;border-radius:18px;box-shadow:0 24px 60px -30px #000}.pilot-window{overflow:hidden;border-radius:11px;background:#f6f4ef;color:var(--ink)}.pilot-window-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--wa-deep);color:#fff}.pilot-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#48a18e;font-size:11px}.pilot-window-head b,.pilot-window-head small{display:block}.pilot-window-head small{margin-top:2px;color:#c7eee6;font-size:11px}.pilot-window-head i{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#a9f1c5}.pilot-alert{margin:12px;padding:13px 14px;background:#fff;border-radius:10px;box-shadow:0 1px 3px #00000012}.pilot-alert em{display:block;color:var(--accent-dark);font-size:10px;font-style:normal;font-weight:700;letter-spacing:.08em}.pilot-alert b{display:block;margin-top:4px;font-size:13px}.pilot-alert span{display:block;margin-top:4px;color:var(--body);font-size:11px}.pilot-alert strong{display:block;margin-top:8px;font-size:12px}.pilot-alert strong small{font-weight:400;color:var(--body)}.pilot-alert time{display:block;margin-top:5px;text-align:right;color:var(--faint);font-size:10px}.pilot-window-foot{display:flex;justify-content:space-between;padding:12px 15px;color:var(--body);font-size:11px;border-top:1px solid var(--line)}.pilot-window-foot i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#2d9a67}
.start-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;align-items:stretch}
.start-steps{display:grid;gap:18px;margin-bottom:28px}.start-steps>div{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:baseline}.start-steps b{color:var(--accent);font:500 12px ui-monospace,monospace}.start-steps span{font-size:17px;font-weight:500}.start-steps small{grid-column:2;color:var(--body);font-size:14px;margin-top:2px}.postman-link{display:inline-block;margin-left:14px;color:var(--accent-dark);font-size:14px;text-decoration:underline;text-underline-offset:3px}.quickstart-code{background:var(--code-bg);border-radius:12px;color:#d9dced;padding:22px 24px;box-shadow:var(--sh-card);font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.quickstart-code>div span{color:#f06ab4}.quickstart-code pre{margin:18px 0;color:#a7d293;white-space:pre-wrap}.quickstart-code small{color:#93b9ed}
@media(max-width:760px){.start-grid{grid-template-columns:1fr}.getting-started{padding-top:60px;padding-bottom:60px}.postman-link{margin:14px 0 0;display:block}}
@media(max-width:760px){.pilot-layout{grid-template-columns:1fr;gap:36px}.pilot-proof{padding-top:60px;padding-bottom:60px}}

/* ---------- phone / demo ---------- */
.demo{display:flex;flex-direction:column;gap:12px}
.scenarios{display:flex;gap:4px;background:var(--sunk);border:1px solid var(--line);padding:3px;border-radius:11px}
.scenarios button{
  flex:1;padding:6px 6px;border:0;background:transparent;border-radius:8px;
  font-size:12px;font-weight:450;color:var(--body);letter-spacing:-.015em;
}
.scenarios button.active{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:var(--sh-card)}
.phone{background:var(--ink);border-radius:30px;padding:8px;box-shadow:0 24px 50px -24px rgba(20,20,25,.3),0 0 0 1px rgba(20,20,25,.08)}
.screen{background:var(--chat-bg);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;height:438px;box-shadow:0 20px 44px -18px rgba(8,12,44,.55),0 1px 0 rgba(255,255,255,.14)}
.wa-bar{background:var(--wa-deep);color:#fff;display:flex;align-items:center;gap:10px;padding:11px 14px}
.wa-bar .av{width:31px;height:31px;border-radius:50%;background:#ffffff2e;display:grid;place-items:center;font-size:12px;font-weight:500}
.wa-bar b{display:block;font-size:14px;font-weight:500;line-height:1.25}
.wa-bar small{font-size:11px;opacity:.8}
.wa-bar .dots{margin-left:auto;opacity:.85;letter-spacing:1px}
.thread{
  flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;
  background-color:var(--chat-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='124' viewBox='0 0 124 124'%3E%3Cg fill='none' stroke='%23e8e3da' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M12 18h10M12 22h6'/%3E%3Ccircle cx='66' cy='16' r='5'/%3E%3Cpath d='M20 58l5 5 9-10'/%3E%3Cpath d='M58 52h14v10h-5l-3 4v-4h-6z'/%3E%3Cpath d='M40 30v8m-4-4h8'/%3E%3C/g%3E%3C/svg%3E");
}
.day{align-self:center;background:#ffffffd9;color:#54656f;font-size:11px;font-weight:500;padding:4px 11px;border-radius:7px;box-shadow:0 1px 1px #0b141a14;margin-bottom:2px}
.msg{max-width:82%;background:var(--surface);border-radius:8px;padding:7px 9px 5px;font-size:13.5px;line-height:1.42;box-shadow:0 1px 1px #0b141a1f;word-wrap:break-word}
.msg.in{align-self:flex-start;border-top-left-radius:0}
.msg.out{align-self:flex-end;background:var(--bubble-out);border-top-right-radius:0}
.msg .meta{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:10.5px;color:#667781;margin-top:2px}
.msg .meta svg{width:14px;height:10px;color:var(--tick);stroke-width:1.7}
.msg .alert-head{font-size:10.5px;font-weight:500;color:var(--accent-dark);letter-spacing:.06em;display:block;margin-bottom:3px}
.msg .card{background:#1414190d;border-left:2px solid var(--accent);border-radius:4px;padding:6px 8px;margin:5px 0;font-size:12.5px;line-height:1.45}
.msg .doc{display:flex;align-items:center;gap:7px;background:#1414190a;border-radius:var(--r-sm);padding:6px 8px;margin-top:5px;font-size:11.5px;color:#54656f}
.msg .doc svg{width:14px;height:14px;color:#54656f;flex:0 0 auto}
.msg .ai{display:flex;width:fit-content;align-items:center;gap:4px;font-size:10.5px;font-weight:500;color:var(--accent-dark);background:var(--accent-tint);padding:2px 7px;border-radius:100px;margin-bottom:4px;max-width:100%;white-space:normal;text-align:left}
.msg .ai b{font-weight:600}
.typing{align-self:flex-start;background:var(--surface);border-radius:8px;border-top-left-radius:0;padding:10px 12px;box-shadow:0 1px 1px #0b141a1f;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.composer{background:#f0f2f5;padding:8px 10px;display:flex;align-items:center;gap:8px;border-top:1px solid #0b141a0f}
.composer button{flex:1;text-align:left;background:var(--surface);border:0;border-radius:18px;padding:9px 13px;font-size:13px;color:#54656f;box-shadow:0 1px 1px #0b141a14;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s}
.composer button.idle{color:#9aa6ad}
.composer .send{flex:0 0 auto;width:33px;height:33px;border-radius:50%;background:var(--wa-deep);display:grid;place-items:center;padding:0}
.composer .send svg{width:15px;height:15px;color:#fff;stroke-width:1.7}

.switch{display:flex;align-items:center;gap:8px;margin-left:auto;border:1px solid var(--line);background:var(--surface);border-radius:100px;padding:5px 7px 5px 12px;font-size:12.5px;color:var(--ink);box-shadow:var(--sh-card)}
.switch i{width:30px;height:17px;border-radius:100px;background:#d3cec5;position:relative;transition:background .18s}
.switch i:after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .18s}
.switch[aria-checked=true] i{background:var(--accent)}
.switch[aria-checked=true] i:after{transform:translateX(13px)}
.demo-note{font-size:12px;line-height:1.45;color:var(--faint);padding:0 2px}

/* ---------- strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:10px 32px;padding-top:15px;padding-bottom:15px;font-size:13.5px;color:var(--body)}
.strip span{display:flex;align-items:center;gap:8px}
.strip svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto}

/* ---------- sections ---------- */
section.block{padding:84px 0}
.block.sunk{background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- bento (deliberately uneven) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.cell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh-soft);display:flex;flex-direction:column;
}
.cell.w7{grid-column:span 7}
.cell.w5{grid-column:span 5}
.cell p{margin-top:7px;font-size:14px;line-height:1.55;color:var(--body)}
.cell .fig{margin-top:20px;flex:1;display:flex;flex-direction:column;justify-content:flex-end}

/* fragments of real UI, in place of decorative icons */
.ev{display:flex;flex-direction:column;gap:6px}
.ev div{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-md);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:0;color:var(--ink-2)}
.ev i{width:5px;height:5px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.ev time{margin-left:auto;color:var(--faint);font-size:11px}
.states div{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2)}
.states div:last-child{border-bottom:0;padding-bottom:0}
.states svg{width:15px;height:11px;color:var(--tick);stroke-width:1.8;flex:0 0 auto}
.states svg.grey{color:var(--faint)}
.states time{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--faint);letter-spacing:0}
.queue div{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2)}
.queue div:last-child{border-bottom:0;padding-bottom:0}
.queue b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:12px;color:var(--ink);letter-spacing:0;flex:0 0 auto}
.queue small{margin-left:auto;color:var(--faint);font-size:12px}
.logrows{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden}
.logrows div{display:grid;grid-template-columns:58px 1fr 84px;gap:12px;align-items:center;padding:9px 12px;font-size:12.5px;color:var(--ink-2);border-bottom:1px solid var(--line-2);background:var(--bg)}
.logrows div:last-child{border-bottom:0}
.logrows div.h{background:var(--sunk);color:var(--faint);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.logrows span:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--faint);letter-spacing:0}
.logrows span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* plain hairline capability list — no cards, no icons */
/* .caps is only ever .visual-caps now. The old descendant rule matched every
   div in the section, so .cap-art / .cap-flow / .cap-route were each picking
   up a stray border-bottom and 20px of padding. */
.caps{margin-top:32px}

/* ---------- steps (asymmetric) ---------- */
.steps-split{display:grid;grid-template-columns:5fr 7fr;gap:16px;align-items:stretch}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-soft)}
.step-lead{display:flex;flex-direction:column}
.step-lead .visual{margin-top:auto;padding-top:24px;display:grid;place-items:center}
.step-rows{display:flex;flex-direction:column;gap:16px}
.step-row{display:grid;grid-template-columns:1fr 236px;gap:24px;align-items:center}
.step .n{display:inline-flex;align-self:flex-start;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-sm);background:var(--accent-tint);color:var(--accent-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:0;margin-bottom:14px}
.step p{margin-top:7px;font-size:14px;line-height:1.55;color:var(--body)}
.qr{width:104px;height:104px;display:block}
.mini-code{font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;color:var(--body);background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-md);padding:12px 14px}
.mini-code b{color:var(--accent-dark);font-weight:400}
.mini-code .k{color:var(--ink)}
.hooks{display:flex;flex-direction:column;gap:6px}
.hooks div{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-md);padding:7px 10px;font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;color:var(--ink-2)}
.hooks i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* ---------- api ---------- */
.api{display:grid;grid-template-columns:4.6fr 7.4fr;gap:56px;align-items:center}
.check-list{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.check-list li{display:flex;gap:11px;font-size:14.5px;line-height:1.55;color:var(--body)}
.check-list li b{color:var(--ink);font-weight:500}
.check-list li svg{width:16px;height:16px;color:var(--accent);stroke-width:1.9;flex:0 0 auto;margin-top:3px}
.code{background:var(--code-bg);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 44px -24px rgba(22,28,51,.5)}
.code-tabs{display:flex;gap:2px;padding:8px 8px 0;background:#111634}
.code-tabs button{background:transparent;border:0;color:#8089ad;font-size:12.5px;padding:8px 13px;border-radius:8px 8px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}
.code-tabs button.active{background:var(--code-bg);color:#eef0f8}
.code pre{margin:0;padding:22px;overflow-x:auto;font:12.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;color:#ccd2e4}
.code .c{color:#7b83a8}
.code .s{color:#a8c79b}
.code .k{color:#8fb0e8}
.code .n{color:#d9a76c}
.code .m{color:var(--accent-lift)}
.code-foot{display:flex;align-items:center;gap:8px;padding:11px 22px;border-top:1px solid #ffffff12;font-size:12.5px;color:#8089ad}
.code-foot i{width:6px;height:6px;border-radius:50%;background:var(--accent-lift)}

/* ---------- context / ai ---------- */
.ai-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.ctx{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--sh-soft)}
.ctx-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:0;color:var(--body)}
.ctx-head svg{width:14px;height:14px;color:var(--body)}
.ctx-head span{margin-left:auto;font-family:Inter,sans-serif;font-size:11px;color:var(--accent-dark);background:var(--accent-tint);padding:3px 9px;border-radius:100px;letter-spacing:.01em}
.ctx pre{margin:0;padding:16px;font:12.5px/1.85 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;color:var(--body);overflow-x:auto}
.ctx pre .k{color:var(--ink)}
.ctx pre .s{color:#8a5a2b}
.ctx-thread{background:var(--chat-bg);padding:14px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line-2)}

/* ---------- dashboard ---------- */
.panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--sh-soft)}
.panel-head{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line-2)}
.panel-head b{font-size:14.5px;font-weight:500}
.panel-head span{margin-left:auto;font-size:12px;color:var(--faint)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:500;padding:10px 20px;border-bottom:1px solid var(--line-2);background:var(--bg)}
.tbl td{padding:14px 20px;border-bottom:1px solid var(--line-2);color:var(--body);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{display:flex;align-items:center;gap:11px}
.tbl .num i{width:29px;height:29px;border-radius:50%;background:var(--sunk);color:var(--ink-2);display:grid;place-items:center;font-size:11px;font-style:normal;flex:0 0 auto}
.tbl .num b{display:block;color:var(--ink);font-weight:500;font-size:14px}
.tbl .num small{display:block;font-size:12px;color:var(--faint)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:4px 10px;border-radius:100px;background:var(--ok-tint);color:var(--ok)}
.tag i{width:5px;height:5px;border-radius:50%;background:var(--ok)}
.tag.warn{background:var(--warn-tint);color:var(--warn)}
.tag.warn i{background:#b0801c}

/* ---------- pricing (two plans, deliberately not mirrored) ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:800px}
.plan{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:28px;box-shadow:var(--sh-soft)}
.plan .top{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.plan h3{font-size:21px;font-weight:500;letter-spacing:-.03em}
.plan>p{font-size:14px;line-height:1.55;color:var(--body);margin-top:7px}
.plan ul{margin:22px 0 26px;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--body)}
.plan li svg{width:15px;height:15px;color:var(--accent);stroke-width:1.9;flex:0 0 auto;margin-top:3px}
.plan .btn{width:100%}
.plan-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.plan-dark .top{color:#ffffff70}
.plan-dark>p,.plan-dark li{color:#ffffffad}
.plan-dark li svg{color:var(--accent)}
.plan-dark .btn{background:var(--surface);color:var(--ink);border-color:transparent;box-shadow:none}
.plan-dark .btn:hover{background:#eeece6}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:290px 1fr;gap:56px;align-items:start}
details[id^="faq-"]{border-bottom:1px solid var(--line)}
details[id^="faq-"]:first-child{border-top:1px solid var(--line)}
details[id^="faq-"] summary{display:flex;align-items:center;gap:16px;padding:18px 0;font-size:15.5px;font-weight:450;letter-spacing:-.02em;cursor:pointer;list-style:none}
details[id^="faq-"] summary::-webkit-details-marker{display:none}
details[id^="faq-"] summary span{margin-left:auto;color:var(--faint);font-size:18px;line-height:1;transition:transform .18s}
details[id^="faq-"][open] summary span{transform:rotate(45deg)}
details[id^="faq-"] p{padding:0 40px 20px 0;font-size:14.5px;line-height:1.65;color:var(--body)}

/* ---------- closing + footer ---------- */
.closing{background:var(--ink);color:#fff;padding:96px 0 88px}
.closing h2{color:#fff;font-size:clamp(32px,4vw,50px)}
.closing p{color:#ffffff9e;margin-top:18px;max-width:46ch;font-size:17px;line-height:1.55}
.closing .btn-row{display:flex;gap:11px;margin-top:32px;flex-wrap:wrap}
.closing .btn-go{background:var(--accent);color:#fff}
.closing .btn-go:hover{background:var(--accent-dark)}
.closing .btn-alt{background:transparent;border-color:#ffffff2e;color:#fff;box-shadow:none;background-image:none}
.closing .btn-alt:hover{border-color:#ffffff5c;background:#ffffff0f}
.closing-note{margin-top:52px;padding-top:26px;border-top:1px solid #ffffff1a;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.closing-note div b{display:block;font-size:13.5px;font-weight:500;color:#fff;margin-bottom:5px}
.closing-note div p{margin:0;font-size:13px;line-height:1.55;color:#ffffff85;max-width:none}
.closing-note a.ul{color:#fff;border-bottom:1px solid #ffffff4d;padding-bottom:1px;white-space:nowrap}
.closing-note a.ul:hover{border-bottom-color:#fff}

/* ---- footer with actual substance ---- */
footer{border-top:1px solid var(--line);background:var(--bg);padding:64px 0 34px}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:44px}
.foot-brand .brand{font-size:24px;color:var(--ink);margin-bottom:14px}
.foot-brand p{font-size:13.5px;line-height:1.6;color:var(--body);max-width:34ch}
.foot-status{margin-top:18px;display:flex;flex-direction:column;gap:7px}
.foot-status span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint)}
.foot-status i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.foot-col h4{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:15px}
.foot-col ul{display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:13.5px;color:var(--body);transition:color .16s}
.foot-col a:hover{color:var(--accent-dark)}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;font-size:12.5px;color:var(--faint)}
.foot-bottom .disc{margin-left:auto;max-width:560px;text-align:right;line-height:1.55}

/* ---------- responsive ---------- */
@media(max-width:1120px){
  .hero{grid-template-columns:1fr;gap:46px;padding-top:54px}
  .demo{max-width:380px;width:100%;margin:0 auto}
  .api,.ai-grid,.faq-grid,.steps-split{grid-template-columns:1fr;gap:32px}
  .step-row{grid-template-columns:1fr 200px;gap:20px}
  .nav-links{display:none}
  .caps{grid-template-columns:repeat(2,1fr);column-gap:32px}
  .closing-note{grid-template-columns:1fr;gap:20px}
  .foot-top{grid-template-columns:1fr 1fr;gap:34px}
  .foot-bottom .disc{text-align:left;margin-left:0}
}
@media(max-width:720px){
  .code-tabs{flex-wrap:nowrap}
  .code-tabs button{padding:8px 9px;font-size:11.5px}
  .code-copy{padding:5px 9px;margin-bottom:8px}
  section.block{padding:58px 0}
  .bento{gap:12px}
  .cell.w7,.cell.w5{grid-column:span 12}
  .caps,.plans{grid-template-columns:1fr}
  .step-row{grid-template-columns:1fr;gap:18px}
  .nav-cta .btn-ghost{display:none}
  .foot-top{grid-template-columns:1fr;gap:30px}
  .tbl .hide-sm{display:none}
  .hero h1 br{display:none}
  .closing h2 br{display:none}
}
.faq-bridge:after{border-top:1px solid #e4dfdb}
@media(max-width:720px){footer .foot-col{border-top:1px solid var(--line);padding:0}footer .foot-col:last-child{border-bottom:1px solid var(--line)}footer .foot-col h4{position:relative;margin:0;padding:20px 34px 20px 0;font-size:14px;color:var(--ink);cursor:pointer;letter-spacing:0;text-transform:none}footer .foot-col h4:after{content:'+';position:absolute;right:2px;top:13px;font-size:26px;font-weight:300;line-height:1}footer .foot-col.open h4:after{content:'−'}footer .foot-col ul{display:none;padding:0 0 18px;gap:13px}footer .foot-col.open ul{display:flex}}
/* mobile stepper content aligns with the section's wrap, not the desktop rail */
@media(max-width:1000px){.step-list{padding-left:0}.step-list .rail,.step-list .node{display:none}}

/* ================= MOTION & SATURATED STAGES =================
   Modelled on chatbase.co's measured behaviour:
   - bright colour used as a large surface, not a small accent
   - accordion panels animate flex-grow over 0.62s, inactive ones desaturate
   - reveals fade at 0.7s ease-out
============================================================== */

:root{
  /* One saturated surface colour, used twice. Orange is an accent only — as a
     field it sat directly opposite WhatsApp's green on the colour wheel, which
     is the harshest pairing available and exactly what the phone showed. */
  /* Two saturated stages, one recipe — identical radial geometry and
     lightness range. Blue carries the customer's side, magenta the
     workspace, which is the pairing the reference uses. The magenta mid-stop
     is chatbase's own panel colour, lab(39.67 65.49 -18.61) = #af127d. */
  --stage-deep:radial-gradient(130% 105% at 14% 0%,#4a5ccf 0%,#2b3aa4 46%,#1b2775 100%);
  --stage-rose:radial-gradient(130% 105% at 14% 0%,#d83ba2 0%,#af127d 46%,#870a5f 100%);
  /* faint lattice so a saturated field reads as a designed surface, not a fill */
  --lattice:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 94px),
            repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 94px);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
}

/* subtle sheen on buttons, as chatbase does */
.btn-primary{background-image:linear-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,.05) 100%)}
.btn-ghost{background-image:linear-gradient(rgba(228,226,222,.22) 0%,rgba(228,226,222,0) 50%)}

/* scroll reveals */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---- hero stage ---- */
.stage{border-radius:26px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:16px}
.stage.deep{background-image:var(--lattice),var(--stage-deep);box-shadow:0 26px 64px -32px rgba(27,39,117,.7)}
.stage.rose{background-image:var(--lattice),var(--stage-rose);box-shadow:0 26px 64px -32px rgba(135,10,95,.62);padding:26px}
.stage .phone{background:none;padding:0;box-shadow:none;border-radius:0;max-width:320px;width:100%;margin:0 auto}

/* controls sitting on a saturated stage */
.stage .scenarios{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.18);max-width:320px;width:100%;margin:0 auto}
.stage .scenarios button{color:rgba(255,255,255,.82)}
.stage .scenarios button.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.stage-foot{display:flex;align-items:center;gap:10px;max-width:320px;width:100%;margin:0 auto}
.stage .live{color:rgba(255,255,255,.72)}
.stage .live i{background:#fff}
.stage .switch{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.stage .switch i{background:rgba(255,255,255,.3)}
.stage .switch i:after{background:rgba(255,255,255,.85)}
.stage .switch[aria-checked="true"] i{background:#fff}
.stage .switch[aria-checked="true"] i:after{background:#2b3aa4}

/* ---- use-case accordion on a cool stage ---- */
.cases{display:flex;gap:14px;height:452px}
.case{
  position:relative;flex:1 1 0%;min-width:0;overflow:hidden;
  background:var(--surface);border-radius:var(--r-lg);cursor:pointer;
  transition:flex-grow .62s var(--ease-io),filter .62s var(--ease-io),box-shadow .62s var(--ease-io);
  filter:saturate(.25) brightness(.97);
}
.case[aria-expanded="true"]{flex-grow:640;filter:none;box-shadow:0 24px 44px -26px rgba(10,14,50,.75);cursor:default}
.case[aria-expanded="false"]{flex-grow:104}
.case[aria-expanded="false"]:hover{filter:saturate(.6) brightness(1)}
.case-tab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 0;transition:opacity .34s var(--ease-io)}
.case-tab b{writing-mode:vertical-rl;font-weight:500;font-size:14px;letter-spacing:-.02em;color:var(--ink)}
.case-tab span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--faint)}
.case[aria-expanded="true"] .case-tab{opacity:0;pointer-events:none}
.case-body{
  color:var(--ink);position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,42%) 1fr;gap:32px;align-items:center;
  padding:34px 36px;opacity:0;transition:opacity .42s var(--ease-io) .12s;pointer-events:none;
}
.case[aria-expanded="true"] .case-body{opacity:1;pointer-events:auto}
.case-copy{min-width:0}
.case-copy .kicker{color:var(--accent-dark)}
.case-copy h3{font-size:25px;font-weight:500;letter-spacing:-.03em;margin:12px 0 12px;color:var(--ink)}
.case-copy p{font-size:14.5px;line-height:1.6;color:var(--body);max-width:44ch}
.case-copy ul{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.case-copy li{display:flex;gap:9px;font-size:13.5px;color:var(--body)}
.case-copy li svg{width:15px;height:15px;color:var(--accent);stroke-width:1.9;flex:0 0 auto;margin-top:3px}
/* each accordion panel is a different product screen */
.case-ui{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0}
.ui-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--sh-card)}
.ui-bar{display:flex;align-items:center;gap:9px;padding:9px 13px;background:var(--bg);border-bottom:1px solid var(--line-2);font-size:11.5px;color:var(--faint)}
.ui-bar b{color:var(--ink);font-weight:500;font-size:12.5px}
.ui-bar .right{margin-left:auto}
.ui-row .tag{font-size:11px;padding:3px 8px;white-space:nowrap}
.chip{font-size:11px;padding:3px 9px;border-radius:100px;background:var(--sunk);color:var(--body)}
.chip.on{background:var(--ink);color:#fff}
.ui-row{display:grid;align-items:center;gap:12px;padding:10px 13px;border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2)}
.ui-row:last-child{border-bottom:0}
.ui-row .t{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--faint);letter-spacing:0}
.ui-row .name{color:var(--ink);font-weight:500}
.ui-row .clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-row .muted{color:var(--faint);font-size:11.5px}
.r-conn{grid-template-columns:minmax(0,1fr) auto}
.r-sched{grid-template-columns:minmax(0,1fr) auto auto}
.r-log{grid-template-columns:42px minmax(0,1fr) auto}
.avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--sunk);color:var(--ink-2);font-size:10px;flex:0 0 auto}
.who{display:flex;align-items:center;gap:9px;min-width:0}
.end{display:flex;align-items:center;gap:11px;justify-self:end}
.who>span{min-width:0}
.who .name,.who .muted{display:block;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sand{display:grid;gap:10px}
.sand .c{color:#7b83a8}
.sand pre{margin:0;padding:12px 13px;font:11.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;overflow-x:auto;background:var(--code-bg);color:#ccd2e4}
.sand .req{border-bottom:1px solid var(--line-2)}
.sand .k{color:#8fb0e8}.sand .s{color:#a8c79b}.sand .m{color:var(--accent-lift)}.sand .n{color:#d9a76c}

/* bento: retry timeline + number validation */
.retry div{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2)}
.retry div:last-child{border-bottom:0;padding-bottom:0}
.retry b{display:grid;place-items:center;width:20px;height:20px;border-radius:var(--r-sm);background:var(--sunk);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:11px;color:var(--body)}
.retry .ok b{background:var(--ok-tint);color:var(--ok)}
.retry time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--faint);letter-spacing:0}
.valid div{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink-2)}
.valid div:last-child{border-bottom:0}
.valid svg{width:15px;height:15px;color:var(--ok);stroke-width:2;flex:0 0 auto}
.valid .no svg{color:#b03636}
.valid .mono{color:var(--ink-2)}
.valid em{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--faint)}
.valid-sum{margin-top:12px!important;font-size:12.5px!important;color:var(--faint)!important}

/* ---- live event stream ---- */
.ev div{transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.ev div.fresh{opacity:0;transform:translateY(6px)}

/* ---- demo autoplay affordance ---- */
.live{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--faint)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.8s var(--ease-io) infinite}
.live[hidden]{display:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

@media(max-width:1000px){
  .cases{flex-direction:column;height:auto}
  .case{flex:0 0 auto;filter:none;transition:none}
  .case[aria-expanded="false"]{flex-grow:0;height:58px}
  .case[aria-expanded="true"]{flex-grow:0;height:auto;min-height:396px}
  .case-tab{flex-direction:row;justify-content:flex-start;padding:0 22px;align-items:center}
  .case-tab b{writing-mode:horizontal-tb}
  .case-body{position:relative;inset:auto;grid-template-columns:1fr;gap:22px}
  .case-copy{min-width:0}
}
@media(max-width:720px){
  .stage{padding:14px;border-radius:20px}
  .stage.rose{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ================= OPERABLE PRODUCT UI =================
   the product screens on this page are real controls: 3 working switches,
   a model dropdown, colour swatches, a 4-step stepper. Ours were pixels.
   ==================================================== */

/* small switch used inside the mock screens */
.sw{position:relative;width:31px;height:18px;border-radius:100px;background:#d5d0c7;border:0;padding:0;flex:0 0 auto;transition:background .22s var(--ease-io)}
.sw:after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,20,25,.25);transition:transform .22s var(--ease-io)}
.sw[aria-checked="true"]{background:var(--ok)}
.sw[aria-checked="true"]:after{transform:translateX(13px)}
.ui-row.off{opacity:.45}
.ui-row.off .tag{background:var(--sunk);color:var(--faint)}
.ui-row.off .tag i{background:var(--faint)}
.ui-row{transition:opacity .25s var(--ease-io)}
.ui-row.hide{display:none}

/* filter chips are buttons now */
button.chip{border:1px solid transparent;cursor:pointer;transition:background .18s,color .18s}
button.chip:hover{background:var(--line-2)}
button.chip.on,button.chip.on:hover{background:var(--ink);color:#fff}

/* sandbox: editable body + send */
.sand-val{outline:none;border-bottom:1px dashed #ffffff40;padding:0 2px;cursor:text}
.sand-val:focus{border-bottom-color:var(--accent);background:#ffffff0f}
.sand-foot{display:flex;align-items:center;gap:10px;padding:10px 13px;border-top:1px solid var(--line-2);background:var(--bg)}
.sand-foot small{color:var(--faint);font-size:11.5px}
.mini-btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font-size:12.5px;color:var(--ink);box-shadow:var(--sh-card);transition:border-color .18s,background .18s}
.mini-btn:hover{border-color:#cfcac1;background:var(--bg)}
.mini-btn[disabled]{opacity:.55;cursor:default}
.mini-btn.ghost{box-shadow:none;background:transparent}
.spin{display:inline-block;width:11px;height:11px;border:1.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

/* retry panel replay */
.retry div{opacity:1;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.retry div.pending{opacity:0;transform:translateY(5px)}
.fig-foot{display:flex;align-items:center;gap:10px;margin-top:14px}

/* copy on code blocks */
.code-copy{margin-left:auto;align-self:center;background:transparent;border:1px solid #ffffff1c;color:#8b8c95;border-radius:7px;padding:5px 11px;font-size:11.5px;margin-bottom:8px;transition:color .18s,border-color .18s}
.code-copy:hover{color:#e6e4de;border-color:#ffffff38}

/* ---- lifecycle stepper (How it works) ---- */
.stepper{display:grid;grid-template-columns:308px 1fr;gap:22px;align-items:stretch}
.step-list{display:flex;flex-direction:column;gap:6px}
.step-btn{position:relative;text-align:left;background:transparent;border:1px solid transparent;border-radius:14px;padding:16px 18px;overflow:hidden;transition:background .25s var(--ease-io),border-color .25s var(--ease-io)}
.step-btn:hover{background:#ffffff9c}
.step-btn[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:var(--sh-card)}
.step-btn .lbl{display:flex;align-items:baseline;gap:11px}
.step-btn .lbl i{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--faint);letter-spacing:0}
.step-btn[aria-selected="true"] .lbl i{color:var(--accent-dark)}
.step-btn h3{color:var(--ink)}
.step-btn p{font-size:13.5px;line-height:1.55;color:var(--body);margin-top:7px;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease-io),opacity .3s var(--ease-io),margin-top .4s var(--ease-io)}
.step-btn[aria-selected="true"] p{max-height:90px;opacity:1}
.step-prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent)}
.step-btn[aria-selected="true"] .step-prog.run{animation:fill 6.5s linear forwards}
@keyframes fill{to{width:100%}}
.step-panel{position:relative;min-height:0}
.step-fig{display:none;margin:0}
.step-fig.on{display:block;height:100%;animation:figIn .5s var(--ease-out)}
@keyframes figIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step-fig .ui-frame{box-shadow:var(--sh-soft);height:100%;display:flex;flex-direction:column}
.step-fig .frame-foot{margin-top:auto}
.frame-foot{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--line-2);background:var(--bg);font-size:12px;color:var(--faint)}
.frame-foot .mono{margin-left:auto;font-size:11.5px}

/* 01 — pairing: QR beside the actual instructions, not floating alone */
.pair{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:24px;align-items:center}
.pair-qr{display:flex;flex-direction:column;align-items:center;gap:12px}
.pair-qr .qr{width:124px;height:124px}
.pair-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint)}
.pair-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.8s var(--ease-io) infinite}
.pair-steps{display:flex;flex-direction:column;gap:13px;counter-reset:p;margin:0;padding:0;list-style:none}
.pair-steps li{display:flex;gap:11px;font-size:13.5px;line-height:1.5;color:var(--body)}
.pair-steps b{display:grid;place-items:center;width:19px;height:19px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--sunk);color:var(--ink-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:10.5px;margin-top:1px}

/* 03 — event list gets padding when it is the panel body */
.ev.pad,.states.pad{padding:16px 18px}
.states.pad div{font-size:13px}
.states.pad time{text-transform:none}

/* 04 — delivery split as bars, so the panel carries a shape not a void */
.bars{display:flex;flex-direction:column;gap:12px;padding:20px 18px 4px}
.bars div{display:grid;grid-template-columns:66px 1fr 34px;align-items:center;gap:12px;font-size:12.5px;color:var(--body)}
.bars .bar{height:7px;border-radius:100px;background:var(--sunk);overflow:hidden}
.bars .bar i{display:block;height:100%;border-radius:100px;background:var(--ok);transition:width .7s var(--ease-out)}
.bars .bar.warn i{background:#b03636}
.bars b{text-align:right;font-weight:500;font-size:12.5px;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* hover lift on the panels that are clickable or alive */
.cell{transition:transform .3s var(--ease-io),box-shadow .3s var(--ease-io)}
.cell:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(20,20,25,.25)}
.case[aria-expanded="false"]{cursor:pointer}

@media(max-width:1000px){
  .stepper{grid-template-columns:1fr;gap:18px}
  .step-btn p{max-height:90px;opacity:1}
  .step-panel{min-height:0}
  .step-list{padding-left:0}
  .step-list .rail,.step-list .node{display:none}
  .pair{grid-template-columns:1fr;gap:20px;justify-items:start;text-align:left}
  .pair-qr{align-items:flex-start}
}
@media(max-width:560px){
  /* the chip and switch crowd the name out of a 300px row — give them their own line */
  .ui-row.r-conn,.ui-row.r-sched{grid-template-columns:1fr;gap:9px}
  .r-conn .end,.r-sched .end{justify-self:stretch;justify-content:space-between;width:100%}
  .ui-row.r-log{grid-template-columns:42px minmax(0,1fr);row-gap:7px}
  .r-log .tag{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
  .step-btn[aria-selected="true"] .step-prog.run{animation:none;width:100%}
  .cell:hover{transform:none}
}

/* ---------- models + integrations ---------- */
.models{display:flex;flex-direction:column;gap:7px}
.models div{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;font-size:13.5px;color:var(--ink)}
.models span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.models em{margin-left:auto;font-style:normal;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-dark);background:var(--accent-tint);padding:2px 7px;border-radius:100px;flex:0 0 auto}
.mk{display:grid;place-items:center;width:27px;height:27px;flex:0 0 auto;border-radius:8px;background:var(--ink);color:#fff;font-style:normal;font-size:12.5px;font-weight:600}
.mk.alt{background:var(--sunk);color:var(--body)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tiles div{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;font-size:13.5px;color:var(--ink);min-width:0}
.tiles div:hover{border-color:var(--line);background:var(--surface)}
.tiles div>i{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-style:normal;font-size:14px;font-weight:600;letter-spacing:-.03em}
.tiles .any{grid-column:span 2;border-style:dashed;color:var(--faint)}
.tiles .any>i{background:var(--accent-tint);border-color:transparent;color:var(--accent-dark)}

@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}.tiles .any{grid-column:span 2}}

/* ---------- third-party brand marks ----------
   Official artwork from simple-icons v16.30.0 (the icon set is CC0-1.0; each
   mark remains the trademark of its owner). White tile, brand-coloured mark —
   the arrangement the reference uses, and the one that keeps a saturated
   stage or a coloured tile from ever touching the artwork.
   Colours are the published brand hex, not eyeballed: Airtable is #18BFFF,
   not the yellow I had guessed, and Shopify is #7AB55C. */
.tiles div>i,.models .mk{background:var(--surface);border:1px solid var(--line)}
.tiles div>i svg,.models .mk svg{width:19px;height:19px}
.models .mk svg{width:15px;height:15px}
.tiles div>i.b-shopify,.models .mk.b-shopify{color:#7AB55C}
.tiles div>i.b-stripe,.models .mk.b-stripe{color:#635BFF}
.tiles div>i.b-hubspot,.models .mk.b-hubspot{color:#FF7A59}
.tiles div>i.b-zendesk,.models .mk.b-zendesk{color:#03363D}
.tiles div>i.b-cal,.models .mk.b-cal{color:#292929}
.tiles div>i.b-airtable,.models .mk.b-airtable{color:#18BFFF}
.tiles div>i.b-sheets,.models .mk.b-sheets{color:#34A853}
.tiles div>i.b-supabase,.models .mk.b-supabase{color:#3FCF8E}
.tiles div>i.b-make,.models .mk.b-make{color:#6D00CC}
.tiles div>i.b-n8n,.models .mk.b-n8n{color:#EA4B71}
.tiles div>i.b-zapier,.models .mk.b-zapier{color:#FF4F00}
.tiles div>i.b-claude,.models .mk.b-claude{color:#D97757}
.models .mk.b-claude{background:var(--surface);border-color:var(--line)}
.models .mk img{display:block;width:16px;height:16px}
.models .mk.b-astra{background:#fff;border-color:#d8d3d6}
.models .mk.b-gemini{background:#f2efff;border-color:#d8d0ff}
.models .mk.b-deepseek{background:#edf1ff;border-color:#ccd6ff}
.models .mk.b-gemini img{filter:invert(48%) sepia(69%) saturate(1801%) hue-rotate(213deg) brightness(91%)}
.models .mk.b-deepseek img{filter:invert(38%) sepia(93%) saturate(3487%) hue-rotate(220deg) brightness(101%)}

/* an integration grid should react to the pointer */
.tiles div{transition:border-color .18s,background .18s,transform .18s var(--ease-io),box-shadow .18s var(--ease-io)}
.tiles div:hover{transform:translateY(-2px);box-shadow:var(--sh-card);border-color:var(--line)}
.tiles div>i{transition:transform .18s var(--ease-io)}
.tiles div:hover>i{transform:scale(1.09)}

/* ---------- MCP panel ---------- */
.cell.w12{grid-column:span 12}
.mcp-head{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:start}
.mcp-head p{margin-top:8px;max-width:70ch}
.mcp-clients{font-size:11.5px;letter-spacing:.04em;color:var(--faint);background:var(--sunk);border:1px solid var(--line-2);padding:6px 12px;border-radius:100px;white-space:nowrap}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.tools div{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;transition:border-color .18s,transform .18s var(--ease-io)}
.tools div:hover{border-color:var(--line);transform:translateY(-2px)}
.tools b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--accent-dark)}
.tools span{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--body)}
.mcp-foot{margin-top:18px!important;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px!important;color:var(--faint)!important}
@media(max-width:1000px){.tools{grid-template-columns:repeat(2,1fr)}.mcp-head{grid-template-columns:1fr}}
/* the client list is long; nowrap made it spill out of the card */
@media(max-width:760px){.mcp-clients{white-space:normal;border-radius:10px;line-height:1.55}}
@media(max-width:560px){.tools{grid-template-columns:1fr}}

/* One shared illustration asset: three responsive, independently linked vignettes. */
.concepts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:44px;padding-bottom:52px}
.concept-card{min-width:0;display:block;padding-bottom:18px;border-bottom:1px solid var(--line);border-radius:16px 16px 0 0}
.concept-art{overflow:hidden;aspect-ratio:1/1;border-radius:16px;background:#faf9f7;margin-bottom:20px}
.concept-art img{display:block;width:300%;max-width:none;height:auto}
.concept-art-middle img{transform:translateX(-33.333333%)}
.concept-art-last img{transform:translateX(-66.666667%)}
.concept-card h3{font-size:21px;letter-spacing:-.035em;margin-bottom:8px}
.concept-card p{font-size:14px;color:var(--body);max-width:32ch}
.concept-card>span{display:block;margin-top:16px;font-size:13px;color:var(--accent-dark)}
.concept-card:focus-visible{outline:2px solid var(--accent-dark);outline-offset:6px}
.concept-card:hover>span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:600px){.concepts{grid-template-columns:1fr;gap:32px}.concept-art{max-width:360px;margin-inline:auto;aspect-ratio:1.15}.concept-card{padding-bottom:24px}}

/* Neutral hero frame: brand accents outside, WhatsApp green inside. */
.demo .stage.deep{background:#f2efeb;background-image:none;border:1px solid #e5dfd8;box-shadow:0 20px 48px -28px rgba(42,32,38,.24)}
.demo .stage .scenarios{background:#fff;border-color:#e5dfd8}
.demo .stage .scenarios button{color:#605a60}
.demo .stage .scenarios button.active{background:#f9eaf3;color:#92236d;box-shadow:0 1px 3px rgba(50,24,40,.08)}
.demo .stage .live{color:#6d646b}
.demo .stage .live i{background:#a72b7c}
.demo .stage .switch{background:#fff;border-color:#ded6dc;color:#51464f}
.demo .stage .switch i{background:#c9c2c7}
.demo .stage .switch i:after{background:#fff}
.demo .stage .switch[aria-checked="true"] i{background:#a72b7c}
.demo .stage .switch[aria-checked="true"] i:after{background:#fff}

/* A distinct chapter between the hero and detailed capabilities. */
.concept-section{margin-top:0;padding-top:74px;background:#f6f3f0;border-top:1px solid #e5dfd8;border-bottom:1px solid #e5dfd8}
.concept-intro{max-width:1120px;text-align:left}
.concept-intro h2{max-width:720px;font-size:clamp(25px,3vw,36px);line-height:1.2;letter-spacing:-.045em;margin-top:10px}
.concept-section .concepts{padding-top:24px;padding-bottom:48px}
.concept-section .concept-card{border-bottom:0;padding-bottom:0}
.concept-section+.strip{border-top:0;background:var(--surface)}
@media(max-width:600px){.concept-section{margin-top:0;padding-top:36px}.concept-section .concepts{padding-bottom:36px}.concept-intro{text-align:left}}

/* Clear navigation hierarchy with keyboard-native dropdowns. */
.nav{height:68px;gap:24px;position:relative}
.nav .brand{font-size:24px;letter-spacing:-.05em;margin-right:auto}
.nav .logo{width:34px;height:34px}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:28px;margin-right:0;font-size:14px;font-weight:500}
.nav-links>a,.nav-group>summary{padding:12px 0;white-space:nowrap}
.nav-group{position:relative}
.nav-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group[open]>summary{color:var(--accent-dark)}
.nav-panel{position:absolute;top:calc(100% + 12px);left:-20px;width:300px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(30,20,28,.12)}
.nav-panel a{display:block;padding:13px 14px;border-radius:9px}
.nav-panel a:hover,.nav-panel a:focus-visible{background:#faf0f6}
.nav-panel strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.nav-panel small{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--body);line-height:1.5}
.nav-cta .btn{padding:12px 19px;background:var(--accent);color:white;border-color:var(--accent);gap:12px;border-radius:12px}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--ink)}
.nav a:focus-visible,.nav summary:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--accent-dark);outline-offset:4px}
html{scroll-padding-top:96px}
@media(max-width:1000px){
 .nav{height:62px;gap:16px}.nav-toggle{display:flex;flex:0 0 40px;width:40px;margin-left:auto;justify-content:center;gap:0;align-items:center;border:0;padding:8px;font-size:0}.nav-toggle span{font-size:25px;line-height:1}
 .nav-cta{display:none}
 .nav-links{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;transform:none;background:#fff;border:1px solid var(--line);border-radius:0 0 16px 16px;padding:16px 22px;max-height:calc(100dvh - 90px);overflow:auto;box-shadow:0 16px 30px #20102012}
 .nav-links.is-open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .nav-panel{position:static;width:auto;box-shadow:none;border:0;background:#faf8f9;margin:0 0 8px}
}
@media(max-width:430px){.nav{gap:10px}.nav .brand{font-size:20px;gap:6px}.nav .logo{width:28px;height:28px}.nav-cta .btn{font-size:12px;padding:10px}.nav-toggle{font-size:0;padding:8px}.nav-toggle span{font-size:24px}.nav-cta .btn span{display:none}}
.nav-toggle:focus-visible{outline:1px solid var(--accent-dark);outline-offset:2px}

/* Navigation does not inherit disclosure styling from the FAQ. */
.nav-group>summary{font-size:14px;font-weight:500;letter-spacing:inherit}
.nav-group>summary span{font-size:16px;line-height:1;transition:transform .18s}
.nav-group[open]>summary span{transform:rotate(180deg)}
.nav-cta .btn{min-height:42px;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.3;background:var(--accent);background-image:none;box-shadow:none;transition:background .15s,box-shadow .15s}
.nav-cta .btn:hover{background:var(--accent-dark);box-shadow:0 3px 10px var(--accent)1a}
.nav .brand{margin-right:0}.nav .nav-cta{margin-left:auto}
@media(max-width:430px){.nav-cta .btn{font-size:12px;padding:9px 13px;min-height:38px}}

/* Small product stories instead of a text-only capability list. */
/* twelve columns in an alternating 7/5 rhythm — six equal cards was the same
   uniform grid the page set out to avoid */
.visual-caps{display:grid;grid-template-columns:repeat(12,1fr);gap:18px!important;column-gap:18px!important;border-top:0!important}
.visual-caps>article.w7{grid-column:span 7}
.visual-caps>article.w5{grid-column:span 5}
.visual-caps>article{min-width:0;display:flex;flex-direction:column;padding:0 0 22px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.visual-caps>article h4{padding:0 22px;margin-top:22px;font-size:17px}
.visual-caps>article>p{padding:0 22px;margin-top:8px;font-size:14px;color:var(--body)}
.cap-art{min-height:150px;flex:1;background:#f5f1f4;display:flex;align-items:center;justify-content:center;padding:22px;border-bottom:1px solid #ece5ea;color:#51434e}
.cap-art small{font-size:10px;color:#756570;letter-spacing:.03em}
.cap-files{display:flex;gap:10px;align-items:center}
.cap-files>span{width:65px;height:86px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;background:white;border:1px solid #e2d6de;border-radius:10px;font-size:23px;color:var(--accent-dark);box-shadow:0 7px 12px #41203909}
.cap-files>span:first-child{transform:rotate(-9deg)}.cap-files>span:last-child{transform:rotate(8deg);font-size:16px}
.cap-files small{font-size:8px}
.cap-flow{text-align:center;width:100%}.cap-flow>b,.cap-route b{display:inline-block;background:#fff;border:1px solid #e2d6de;padding:9px 12px;border-radius:9px;font-size:12px;font-weight:500}
.cap-connector{display:block;color:var(--accent-dark);line-height:25px}.cap-recipients{display:flex;justify-content:center;gap:12px}.cap-recipients span{border:1px solid #ddc8d6;background:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:10px}
.cap-accounts{width:100%;max-width:255px;display:grid;gap:9px}.cap-accounts>span{display:flex;align-items:center;gap:8px;padding:12px 10px;background:#fff;border:1px solid #e2d6de;border-radius:9px;font-size:12px}.cap-accounts small{margin-left:auto;color:#39775e;font-size:9px}.cap-accounts i{height:7px;width:7px;background:#438264;border-radius:50%}
.cap-compose,.cap-key{width:100%;max-width:255px;background:#fff;border:1px solid #e2d6de;border-radius:12px;padding:14px;font-size:12px;box-shadow:0 8px 16px #41203908}.cap-compose>div{display:flex;align-items:center;justify-content:space-between;margin-top:20px;gap:8px}.cap-compose b{background:var(--accent-dark);color:white;padding:6px 10px;border-radius:20px;font-size:10px;white-space:nowrap}.cap-compose small{font-size:9px}
.cap-route{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:17px}.cap-route b{padding:9px 8px;font-size:11px}.cap-route>span{color:var(--accent-dark)}
.cap-key>b{display:flex;justify-content:space-between;font-size:12px;margin-top:7px;font-weight:500}.cap-key>div{margin-top:13px;padding-top:10px;border-top:1px solid #eee;display:flex;justify-content:space-between;gap:10px}.cap-key>div>span{letter-spacing:2px;color:var(--accent-dark)}

/* ================= THE RAIL =================
   The thin magenta line with node joints that runs through the brand
   illustrations, brought into the page chrome. It connects rather than
   divides, which is what the diamond band failed to do.
   ============================================ */

/* --- wordmark --- */
.wordmark{display:inline-flex}   /* a bare text node becomes its own flex item, and .brand's gap split it */
.mark-b{color:var(--accent)}

/* --- the rail down the stepper --- */
.step-list{position:relative;padding-left:36px}
.rail{position:absolute;left:12px;top:26px;bottom:26px;width:2px;border-radius:2px;background:var(--line);overflow:hidden}
.rail i{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent-dark));transition:height .55s var(--ease-io)}
.step-btn .node{
  position:absolute;left:-30px;top:23px;width:11px;height:11px;border-radius:50%;
  background:var(--surface);border:2px solid #d9d4cc;z-index:1;
  transition:background .3s var(--ease-io),border-color .3s var(--ease-io),box-shadow .3s var(--ease-io),transform .3s var(--ease-io);
}
.step-btn.done .node{background:var(--accent);border-color:var(--accent)}
.step-btn[aria-selected="true"] .node{
  background:var(--accent);border-color:var(--accent);transform:scale(1.18);
  box-shadow:0 0 0 5px rgba(214,31,143,.14);
}

/* --- the rail carrying between sections --- */
.rail-link{display:flex;flex-direction:column;align-items:center;gap:0;height:118px;margin:-40px 0}
.rail-link span{width:2px;flex:1;border-radius:2px}
.rail-link span:first-child{background:linear-gradient(180deg,rgba(168,21,116,0),rgba(168,21,116,.34))}
.rail-link span:last-child{background:linear-gradient(180deg,rgba(168,21,116,.34),rgba(168,21,116,0))}
.rail-link i{
  width:9px;height:9px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 4px var(--bg),0 0 0 5px rgba(214,31,143,.18);
}

@media(max-width:1000px){
  .step-list{padding-left:30px}
  .rail{left:9px}
  .step-btn .node{left:-26px}
  .rail-link{height:86px;margin:-28px 0}
}
@media(prefers-reduced-motion:reduce){
  .rail i{transition:none}
}

/* --- the capability art earns some motion --- */
.cap-files>span{transition:transform .35s var(--ease-io),box-shadow .35s var(--ease-io)}
.visual-caps>article:hover .cap-files>span:first-child{transform:rotate(-14deg) translate(-9px,-3px)}
.visual-caps>article:hover .cap-files>span:last-child{transform:rotate(13deg) translate(9px,-3px)}
.visual-caps>article:hover .cap-files>span:nth-child(2){transform:translateY(-5px)}

.cap-recipients>span{opacity:0;transform:translateY(6px) scale(.9)}
.visual-caps.in .cap-recipients>span{animation:popIn .46s var(--ease-out) forwards}
.visual-caps.in .cap-recipients>span:nth-child(1){animation-delay:.20s}
.visual-caps.in .cap-recipients>span:nth-child(2){animation-delay:.32s}
.visual-caps.in .cap-recipients>span:nth-child(3){animation-delay:.44s}
.visual-caps.in .cap-recipients>span:nth-child(4){animation-delay:.56s}
@keyframes popIn{to{opacity:1;transform:none}}
.cap-flow .cap-connector{display:block;color:var(--accent)}
.visual-caps.in .cap-flow>b{animation:sendPulse 3.4s var(--ease-io) infinite}
@keyframes sendPulse{0%,72%,100%{box-shadow:0 0 0 0 rgba(214,31,143,0)}12%{box-shadow:0 0 0 5px rgba(214,31,143,.16)}}

.cap-route b{transition:border-color .3s,color .3s,background .3s}
.visual-caps.in .cap-route b{animation:hop 3.6s var(--ease-io) infinite}
.visual-caps.in .cap-route b:nth-of-type(2){animation-delay:.4s}
.visual-caps.in .cap-route b:nth-of-type(3){animation-delay:.8s}
@keyframes hop{0%,30%,100%{border-color:#e2d6de;color:inherit}10%,20%{border-color:var(--accent);color:var(--accent-dark)}}
.cap-route span{color:var(--accent)}

.visual-caps>article{transition:border-color .25s var(--ease-io),transform .25s var(--ease-io),box-shadow .25s var(--ease-io)}
.visual-caps>article:hover{transform:translateY(-3px);border-color:#d9cdd5;box-shadow:0 14px 30px -20px rgba(65,32,57,.28)}

@media(max-width:850px){
  .visual-caps{grid-template-columns:repeat(2,1fr)}
  .visual-caps>article.w7,.visual-caps>article.w5{grid-column:span 1}
}
@media(max-width:560px){
  .visual-caps{grid-template-columns:1fr}
  .visual-caps>article.w7,.visual-caps>article.w5{grid-column:span 1}
}
@media(prefers-reduced-motion:reduce){
  .cap-recipients>span{opacity:1;transform:none}
  .visual-caps.in .cap-recipients>span,.visual-caps.in .cap-flow>b,.visual-caps.in .cap-route b{animation:none}
  .visual-caps>article:hover{transform:none}
}
/* Restored workspace classes must not constrain the illustrated capability cards. */
.visual-caps{grid-template-columns:repeat(3,minmax(0,1fr))!important;column-gap:22px!important}
.visual-caps>article.w5,.visual-caps>article.w7,.visual-caps>article.w12{grid-column:auto!important;width:auto!important}
.visual-caps>article{min-width:0!important}
@media(max-width:850px){.visual-caps{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.visual-caps{grid-template-columns:1fr!important}}
/* Align the setup cards with the How it works heading; keep the progress rail inset. */
@media(min-width:1001px){.step-list{transform:translateX(-36px);width:calc(100% + 36px)}}
@media(max-width:1000px){.step-list{padding-left:0!important;margin-left:0!important}.step-list .rail,.step-list .node{display:none}}
.quickstart-page{padding-top:76px;padding-bottom:96px}.quickstart-page h1{max-width:700px;margin-top:16px}.quickstart-page>.lead{max-width:620px;margin-top:18px}.qs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}.qs-grid article{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.qs-grid article>b{font-size:16px}.qs-grid article p{margin-top:12px;color:var(--body);font-size:15px}.qs-grid pre{margin:14px 0 0;white-space:pre-wrap;overflow:auto;background:var(--code-bg);color:#d9dced;padding:16px;border-radius:9px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}.qs-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}@media(max-width:680px){.qs-grid{grid-template-columns:1fr}.quickstart-page{padding-top:54px}}
/* Let each setup detail card size to its content instead of inheriting a tall row. */
@media(min-width:1001px){
  .stepper{align-items:start}
  .step-panel,.step-fig.on,.step-fig .ui-frame{height:auto;min-height:0}
  .step-fig .ui-frame{min-height:420px}
}
@media(min-width:1001px){.step-fig .ui-frame{min-height:0!important}.step-fig.on{height:auto!important}.step-panel{height:auto!important}}

.pricing-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.pricing-grid .plan{padding:22px 18px}.pricing-grid .price{font-size:30px;font-weight:600;letter-spacing:-.05em;margin:16px 0 2px}.pricing-grid .price small{font-size:11px;font-weight:400;letter-spacing:0;color:var(--faint)}.pricing-grid .plan-dark .price small{color:#b9b1bb}.pricing-grid .plan p{min-height:67px}.pricing-grid .plan ul{min-height:142px}.pricing-grid .btn{width:100%;font-size:12px;padding:10px 8px}.pricing-note{margin:22px auto 0;text-align:center;color:var(--faint);font-size:12px}.pricing-grid .top{font-size:10px}@media(max-width:1000px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.pricing-grid{grid-template-columns:1fr}.pricing-grid .plan p,.pricing-grid .plan ul{min-height:0}}
/* Four pricing tiers need the full content width, not the legacy two-card constraint. */
.pricing-grid{max-width:none!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px!important}
.pricing-grid .plan{padding:28px 24px!important}
.pricing-grid .plan h3{font-size:23px}
.pricing-grid .plan .price{font-size:34px;margin-top:18px}
.pricing-grid .plan p{min-height:72px;max-width:24ch}
.pricing-grid .plan ul{min-height:150px;margin-top:24px}
.pricing-grid .plan li{font-size:13.5px;gap:8px}
.pricing-grid .plan .btn{font-size:13px;padding:11px 10px}
@media(max-width:1050px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.pricing-grid .plan p{max-width:38ch}}
@media(max-width:560px){.pricing-grid{grid-template-columns:1fr!important}.pricing-grid .plan p,.pricing-grid .plan ul{min-height:0}}

/* Highlight the AI tier with a ribbon rather than a dark card body. */
.pricing-grid .plan-featured{position:relative;background:var(--surface);color:var(--ink);border-color:#c9bdc6;overflow:visible}
.plan-featured .plan-ribbon{position:absolute;bottom:100%;left:-1px;right:-1px;background:#17161a;color:#fff;text-align:center;padding:10px 16px;border-radius:16px 16px 0 0;font-size:13px;font-weight:600}
.pricing-grid .plan-featured{border-top-left-radius:0;border-top-right-radius:0}
.pricing-grid .plan-featured .btn{position:relative;background:#17161a;color:#fff;border-color:#17161a;box-shadow:0 5px 0 #d62c98;margin-bottom:5px}
.pricing-grid .plan-featured .btn:hover{background:#302b31}
.pricing-grid{margin-top:54px}
@media(max-width:1050px){.pricing-grid{row-gap:62px!important}}

/* Shared vector identity and restrained section-joining rails. */
.brand .chatrail-mark{display:block;flex:0 0 auto;width:36px;height:36px}
.chatrail-wordmark{font-weight:600;letter-spacing:-.055em;line-height:1}
.rail-link{position:relative;z-index:1;height:76px;margin:8px 0;pointer-events:none}
.rail-link span{width:2px}
.rail-link span:first-child{background:linear-gradient(180deg,transparent,#bd328f)}
.rail-link span:last-child{background:linear-gradient(180deg,#bd328f,transparent)}
.rail-link i{width:8px;height:8px;background:#bd328f;box-shadow:0 0 0 5px var(--bg),0 0 0 6px #bd328f30}
@media(max-width:600px){.rail-link{height:48px;margin:4px 0}.brand .chatrail-mark{width:30px;height:30px}}

/* MCP is a visible operational loop, not a glossary of tool names. */
.mcp-flow{display:grid;grid-template-columns:minmax(180px,1fr) 72px 150px 72px minmax(220px,1.15fr);align-items:center;gap:12px;margin-top:26px;padding:24px;border:1px solid var(--line-2);border-radius:18px;background:#f7f4f6}
.flow-label{display:block;margin-bottom:9px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.agent-window,.mcp-core,.data-grid>span{background:#fff;border:1px solid #e2d8df;box-shadow:0 8px 18px #3b18300a}
.agent-window{padding:18px;border-radius:13px}.agent-window>i{display:block;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:16px 0 #d8d1d6,32px 0 #d8d1d6;margin-bottom:21px}.agent-window b{display:block;font-size:13px;font-weight:500}.agent-window small{display:block;margin-top:10px;color:var(--faint);font-size:10px}
.flow-line{text-align:center;color:var(--accent-dark);font-size:9px}.flow-line i{position:relative;display:block;height:2px;background:linear-gradient(90deg,#d8c7d2,var(--accent));margin-top:8px}.flow-line i:after{content:'›';position:absolute;right:-2px;top:-11px;font-size:18px}.flow-line.return i{background:linear-gradient(90deg,var(--accent),#d8c7d2)}
.mcp-core{min-height:138px;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-color:#c985b2;box-shadow:0 0 0 8px #eedce8}.mcp-core small{font-size:8px;letter-spacing:.12em}.mcp-core b{font-size:28px;letter-spacing:-.05em;color:var(--accent-dark)}.mcp-core span{font-size:8px;max-width:82px;color:var(--faint);line-height:1.4}
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.data-grid>span{padding:12px;border-radius:10px;min-width:0}.data-grid i{display:block;width:7px;height:7px;border-radius:50%;background:#aaa;margin-bottom:9px}.data-grid .status-live{background:#328361}.data-grid .status-warn{background:#d66543}.data-grid b,.data-grid small{display:block}.data-grid b{font-size:11px}.data-grid small{font-size:9px;color:var(--faint);margin-top:3px}
.mcp-result{display:flex;align-items:center;gap:11px;margin-top:14px;padding:13px 16px;border:1px solid #dcd5d9;border-radius:12px;background:#fff;font-size:12px}.mcp-result p{margin:0!important}.result-check{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e1f2ea;color:#267154;font-weight:700}.result-action{margin-left:auto;color:var(--accent-dark);font-weight:500;white-space:nowrap}
@media(max-width:900px){.mcp-flow{grid-template-columns:1fr;gap:12px}.flow-line{height:34px}.flow-line i{width:2px;height:28px;margin:5px auto;background:linear-gradient(#d8c7d2,var(--accent))}.flow-line i:after{content:'⌄';right:-6px;top:14px}.mcp-core{width:138px;margin:auto}.mcp-result{align-items:flex-start;flex-wrap:wrap}.result-action{width:100%;margin-left:34px}}

/* Honest connection disclosure and a working early-access destination. */
.connection-note{margin:-12px 0 22px;font-size:12px;color:var(--faint)}
.connection-note a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.access-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:30px}
.access-form input[type=email]{width:min(340px,100%);min-height:46px;padding:11px 14px;border:1px solid #ffffff35;border-radius:10px;background:#ffffff0d;color:#fff;font:inherit}
.access-form input[type=email]::placeholder{color:#ffffff78}
.access-form input[type=email]:focus{outline:2px solid var(--accent);outline-offset:2px}
.form-trap{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:560px){.access-form{align-items:stretch}.access-form input[type=email],.access-form .btn{width:100%;justify-content:center}}
.access-form button:disabled{opacity:.65;cursor:wait}
.form-status{width:100%;min-height:20px;margin:4px 0 0!important;font-size:13px!important;color:#fff!important}
.legal-links{display:flex;gap:14px;flex-wrap:wrap}.legal-links a{color:var(--faint);font-size:12px}.legal-links a:hover{color:var(--ink)}
.legal-page{padding:72px 0 110px}.legal-page article{max-width:820px}.legal-page h1{font-size:clamp(36px,4.8vw,58px);letter-spacing:-.05em;max-width:18ch}.legal-page h2{font-size:23px;margin-top:42px}.legal-page p,.legal-page li{color:var(--body);line-height:1.7;max-width:70ch}.legal-page ul{padding-left:0;list-style:none}.legal-page ul li{padding:8px 0;border-bottom:1px solid var(--line-2)}.legal-meta{margin-top:12px;color:var(--faint)!important;font-size:16px;max-width:68ch!important}

/* Long-form guides: readable, crawlable documentation without a separate app shell. */
.guide-page article{max-width:820px}
.guide-page .guide-intro{font-size:18px;line-height:1.7;color:var(--body);max-width:66ch;margin-top:22px}
.guide-page h2{scroll-margin-top:104px}
.guide-page h3{font-size:18px;margin-top:28px}
.guide-page pre{margin:18px 0 24px;padding:20px;border-radius:14px;background:#15192e;color:#e7eafd;overflow:auto;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;box-shadow:0 18px 40px -30px #15192e}
.guide-page code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.guide-page p code,.guide-page li code{padding:2px 5px;border-radius:5px;background:#f2edf0;color:var(--accent-dark);font-size:.9em}
.guide-page .guide-note{margin:24px 0;padding:16px 18px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:#faf1f6;color:var(--body)}
.guide-page .guide-steps{padding-left:0;list-style:none;counter-reset:guide-step}
.guide-page .guide-steps>li{counter-increment:guide-step;position:relative;padding:0 0 24px 48px}
.guide-page .guide-steps>li:before{content:counter(guide-step);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-tint);color:var(--accent-dark);font-weight:600}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.guide-card{display:block;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.guide-card:hover{border-color:#cfa4bf;box-shadow:var(--sh-card)}
.guide-card-img{display:block;width:calc(100% + 44px);height:auto;margin:-22px -22px 20px;border-radius:16px 16px 0 0;border-bottom:1px solid var(--line);background:#f7f3f5}
.guide-card b{display:block;font-size:18px}.guide-card p{margin-top:9px!important}.guide-card span{display:block;margin-top:16px;color:var(--accent-dark);font-size:13px}
.guide-visual{margin:34px 0 38px}.guide-visual img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 22px 48px -38px #3e2636}.guide-visual figcaption{margin-top:10px;color:var(--faint);font-size:12px;line-height:1.5}
.guide-toc{margin:28px 0 38px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:#fbf9fa}.guide-toc b{display:block;margin-bottom:12px;font-size:13px}.guide-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin:0;padding-left:20px}.guide-toc a{color:var(--body);font-size:13px}.guide-toc a:hover{color:var(--accent-dark)}
.guide-table{width:100%;margin:18px 0 28px;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;font-size:13px}.guide-table th,.guide-table td{padding:13px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}.guide-table th{background:#f5f1f3;color:var(--ink);font-weight:600}.guide-table td{color:var(--body)}.guide-table tr:last-child td{border-bottom:0}
.guide-checklist{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;padding-left:0!important;list-style:none}.guide-checklist li{position:relative;padding:13px 14px 13px 38px;border:1px solid var(--line);border-radius:10px}.guide-checklist li:before{content:'✓';position:absolute;left:14px;color:var(--accent);font-weight:700}
@media(max-width:680px){.guide-grid{grid-template-columns:1fr}.guide-page pre{padding:15px;font-size:11.5px}.guide-page .guide-steps>li{padding-left:42px}}
@media(max-width:680px){.legal-page{padding:48px 0 72px}.legal-page h1{font-size:clamp(34px,10vw,48px)}.legal-page h2{margin-top:34px}.legal-page .wrap{padding-left:24px;padding-right:24px}}
@media(max-width:680px){.guide-toc ol,.guide-checklist{grid-template-columns:1fr}.guide-table{display:block;overflow-x:auto;white-space:nowrap}.guide-visual{margin:26px -10px 30px}}










/* The dark CTA is separated from the branded footer by the light FAQ chapter. */
.closing{background:var(--ink)}
.closing .btn-go{background:var(--accent);color:#fff}
.closing .btn-go:hover{background:var(--accent-dark);color:#fff}
.closing .btn-alt{border-color:#ffffff2e}
footer{
  position:relative;
  border-top:0;
  padding:0 0 32px;
  background-color:#8f1f69;
  background-image:
    radial-gradient(circle at 12% 24%,#ffffff0d 0 1px,transparent 1.5px),
    radial-gradient(circle at 82% 68%,#21001518 0 1px,transparent 1.5px);
  background-size:28px 28px,34px 34px;
}
footer:before{
  content:'';display:block;height:34px;max-width:1060px;margin:0 auto;
  border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background-color:var(--bg);
  background-image:linear-gradient(45deg,transparent 46%,#e9e6e1 47% 52%,transparent 53%),linear-gradient(-45deg,transparent 46%,#e9e6e1 47% 52%,transparent 53%);
  background-size:34px 34px;background-position:0 17px;
}
footer>.wrap{
  max-width:1060px;
  margin:0 auto;
  padding:88px 28px 42px;
  border:0;
  border-radius:0;
  background:#fcfbf9;
  box-shadow:0 24px 70px -38px #000;
}
section.block.footer-prelude{padding:0;background:var(--bg)}
.footer-prelude>.wrap{position:relative;max-width:1120px;margin-left:auto;margin-right:auto;padding:82px 27px 54px;border-top:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.footer-prelude .faq-grid{max-width:1060px;margin:0 auto}
.footer-prelude .faq-grid h2{margin-top:24px}
footer .foot-top{grid-template-columns:1.35fr repeat(3,1fr);gap:84px}
footer .foot-col ul{gap:13px}
.foot-socials{display:flex;align-items:center;gap:10px;margin-top:24px}
.foot-socials a{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;color:var(--body);transition:color .16s,border-color .16s,transform .16s}
.foot-socials a:hover{color:var(--accent-dark);border-color:#c995b7;transform:translateY(-2px)}
.foot-socials svg{width:17px;height:17px;fill:currentColor}
footer .foot-ai{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-top:66px;padding-top:34px;border-top:1px solid var(--line)}
.foot-ai b{display:block;font-size:14px;font-weight:600}.foot-ai p{margin-top:8px;font-size:13px;color:var(--faint)}
.foot-ai-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-ai-actions .ai-file{min-height:38px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:500 12px/1 Inter,sans-serif}
.ai-model-links{display:flex;align-items:center;gap:8px}
.ai-model-links button{display:grid;place-items:center;width:38px;height:38px;padding:8px;border:1px solid var(--line);border-radius:9px;background:#fff;cursor:pointer}
.ai-model-links img{display:block;width:20px;height:20px;object-fit:contain}
.foot-ai-status{min-width:88px;font-size:11px;color:var(--accent-dark)}
.foot-ai-actions a:hover,.foot-ai-actions button:hover{border-color:#c995b7;background:#faf1f6;color:var(--accent-dark)}
footer .foot-bottom{margin-top:38px;padding-top:30px}
.footer-signoff{position:relative;max-width:1440px;height:clamp(150px,19vw,285px);margin:-44px auto -32px;overflow:visible}
/* line-height .8 leaves ~0.2em of the font's descender space hanging below the
   wordmark's box. That empty overflow used to extend the document and leave a
   strip of page background under the footer, so clip it vertically. Vertically
   only, because the glyphs themselves bleed ~7px past the box on both sides. */
.footer-wordmark{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;color:#fff;font-size:clamp(104px,18vw,270px);font-weight:600;line-height:.8;letter-spacing:-.075em;overflow-x:visible;overflow-y:clip}
.footer-seal{position:absolute;z-index:1;display:grid;place-items:center;width:74px;height:74px;border:3px solid #18131a;border-radius:50%;background:#f4b645;color:#18131a;box-shadow:0 0 0 5px #fff;font-size:10px;font-weight:700;letter-spacing:.07em;transform:rotate(-7deg)}
.footer-seal:after{content:'';position:absolute;inset:7px;border:1px dashed currentColor;border-radius:50%;opacity:.65}
.seal-api{left:8%;top:28%}.seal-hooks{left:20%;top:46%;background:#f18b67;transform:rotate(6deg)}.seal-mcp{right:10%;top:32%;background:#f6d968;transform:rotate(8deg)}
@media(max-width:1120px){footer .foot-top{grid-template-columns:1fr 1fr;gap:46px}}
@media(max-width:720px){
  footer{padding:0;background:#fcfbf9;background-image:none}
  footer>.wrap{padding:34px 28px 24px;border-radius:0}
  footer:before{display:none}
  .footer-prelude>.wrap{padding:58px 27px 42px}
  .footer-prelude>.wrap{margin-left:auto;margin-right:auto}
  footer .foot-top{grid-template-columns:1fr;gap:28px}
  footer .foot-brand p{max-width:34ch;font-size:13px;line-height:1.55}
  footer .foot-status{margin-top:15px;gap:6px}
  footer .foot-socials{margin-top:20px}
  footer .foot-col h4{margin-bottom:11px}
  footer .foot-ai{align-items:flex-start;flex-direction:column;margin-top:44px;padding-top:24px}
  footer .foot-bottom{margin-top:30px}
  .footer-signoff{display:none}
  section.block.footer-prelude{padding-bottom:0}
  .footer-prelude>.wrap{padding-bottom:0}
  .footer-prelude:after{content:'';display:block;height:24px;border-top:2px solid #d8d2cd;background:#fcfbf9;background-image:linear-gradient(45deg,transparent 44%,#cec7c2 45% 55%,transparent 56%),linear-gradient(-45deg,transparent 44%,#cec7c2 45% 55%,transparent 56%);background-size:24px 24px;background-position:0 12px}
}

/* Live-deployment image showcase */
.pilot-showcase{position:relative;padding:0;overflow:hidden;background:#101628}
.pilot-showcase>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pilot-overlay{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff20;background:#101628}
.pilot-overlay span{padding:14px 12px;color:#aeb2c2;font-size:10px;text-align:center;border-right:1px solid #ffffff16}
.pilot-overlay span:last-child{border-right:0}
.pilot-overlay strong{display:block;color:#fff;font-size:14px;font-weight:600}
@media(max-width:480px){.pilot-overlay{grid-template-columns:1fr}.pilot-overlay span{border-right:0;border-bottom:1px solid #ffffff16}.pilot-overlay span:last-child{border-bottom:0}}

/* Evidence-led live deployment panel — deliberately uses real product data, not stock imagery. */
.pilot-showcase.pilot-evidence{display:grid;grid-template-columns:1.25fr .75fr;padding:0;background:#202640}
.evidence-chat{background:#ece8e1;color:var(--ink)}
.evidence-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--wa-deep);color:#fff}
.evidence-head b,.evidence-head small{display:block}.evidence-head small{font-size:10px;color:#c9eee7}.evidence-head>i{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#a8f0c4}
.evidence-thread{padding:14px;display:grid;gap:10px;background-image:radial-gradient(#857d7214 1px,transparent 1px);background-size:18px 18px}
.evidence-thread article{position:relative;padding:14px 15px 12px;background:#fff;border-radius:10px;box-shadow:0 1px 3px #00000012}
.evidence-thread em{display:block;color:var(--accent-dark);font-size:9px;font-style:normal;font-weight:700;letter-spacing:.08em}.evidence-thread b{display:block;margin:4px 0 9px;font-size:12px}.evidence-thread p{display:flex;justify-content:space-between;gap:16px;margin:3px 0;color:var(--ink-2);font-size:10px}.evidence-thread p span{color:var(--faint)}.evidence-thread time{display:block;margin-top:6px;text-align:right;color:var(--faint);font-size:9px}
.evidence-ops{padding:22px 20px;color:#fff}.evidence-ops .flow-label{color:#9298b0;font-size:9px;letter-spacing:.1em;text-transform:uppercase}.evidence-number{padding:22px 0;border-bottom:1px solid #ffffff18}.evidence-number strong{display:block;font-size:34px;letter-spacing:-.05em}.evidence-number small{color:#aeb2c2}.evidence-row{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #ffffff18;color:#aeb2c2;font-size:10px}.evidence-row b{color:#fff;font-weight:600}.evidence-log{display:grid;grid-template-columns:7px auto 1fr;gap:7px;align-items:center;margin-top:17px;padding:9px;border:1px solid #ffffff18;border-radius:7px;background:#11172a;font-size:9px}.evidence-log i{width:7px;height:7px;border-radius:50%;background:#44cf83}.evidence-log code{color:#92d8af}.evidence-log span{color:#858ba1;text-align:right}
@media(max-width:540px){.pilot-showcase.pilot-evidence{grid-template-columns:1fr}.evidence-ops{padding:20px}.evidence-number{padding:16px 0}.evidence-number strong{font-size:30px}}

/* Documentary case-study image with evidence kept as real HTML. */
.pilot-photo{margin:0;overflow:hidden;border:1px solid #3a4262;border-radius:18px;background:#101628;box-shadow:0 28px 70px -34px #000}
.pilot-photo>img{display:block;width:100%;height:clamp(260px,25vw,360px);object-fit:cover;object-position:64% center}
.pilot-photo figcaption{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #ffffff1b}
.pilot-photo figcaption span{padding:13px 14px;color:#9da2b5;font-size:10px;border-right:1px solid #ffffff14;border-bottom:1px solid #ffffff14}
.pilot-photo figcaption span:nth-child(2n){border-right:0}.pilot-photo figcaption span:nth-last-child(-n+2){border-bottom:0}
.pilot-photo figcaption strong{display:block;margin-bottom:2px;color:#fff;font-size:14px;font-weight:600}
@media(max-width:480px){.pilot-photo figcaption{grid-template-columns:1fr 1fr}.pilot-photo figcaption span{padding:12px 10px}}

/* Featured customer story */
.customer-story{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story-heading{max-width:820px;margin:0 auto 42px;text-align:center}.story-heading h2{margin-top:15px}.story-heading p{max-width:650px;margin:15px auto 0;color:var(--body);font-size:17px}
.story-feature{position:relative;max-width:1050px;min-height:560px;margin:0 auto;overflow:hidden;border:1px solid var(--line);background:#111726;box-shadow:0 24px 60px -38px #000}
.story-feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.story-shade{position:absolute;inset:0;background:linear-gradient(180deg,#07101d05 18%,#080d18c2 68%,#080d18f2 100%)}
.story-feature figcaption{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:42px 46px 32px;color:#fff}
.story-name{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:650;letter-spacing:.02em}.story-name small{padding-left:12px;border-left:1px solid #ffffff55;color:#d6d8df;font-size:12px;font-weight:400;letter-spacing:0}
.story-feature .story-result{max-width:760px;margin:22px 0 25px;font-size:clamp(23px,3vw,38px);font-weight:500;line-height:1.16;letter-spacing:-.035em}
.story-proof{display:flex;flex-wrap:wrap;gap:18px 34px;padding-top:20px;border-top:1px solid #ffffff35}.story-proof span{color:#c8cbd4;font-size:11px}.story-proof strong{display:block;color:#fff;font-size:17px;font-weight:600}.story-feature figcaption>p{margin-top:18px;color:#aeb1bc;font-size:10px}
@media(max-width:700px){.story-heading{text-align:left;margin-bottom:28px}.story-feature{min-height:580px}.story-feature>img{object-position:58% center}.story-feature figcaption{padding:28px 24px 22px}.story-name{align-items:flex-start;flex-direction:column;gap:5px}.story-name small{padding-left:0;border-left:0}.story-feature .story-result{font-size:25px}.story-proof{display:grid;grid-template-columns:1fr 1fr;gap:15px}}

/* Co-branded featured customer image */
.story-feature.collab-feature{min-height:0;background:#0b101b}
.story-feature.collab-feature>img{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.story-feature.collab-feature figcaption{position:static;padding:0 28px 18px;background:#0b101b}
.story-feature.collab-feature .story-outcome{max-width:850px;margin:0;padding:26px 0 23px;color:#fff;font-size:clamp(18px,2.2vw,27px);font-weight:500;line-height:1.3;letter-spacing:-.025em}
.story-feature.collab-feature .story-outcome small{display:block;margin-bottom:8px;color:#ef78bd;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.story-feature.collab-feature .story-proof{margin:0;padding:20px 0 17px}
.story-feature.collab-feature figcaption>p{margin:0;color:#8f93a1}
@media(max-width:700px){.story-feature.collab-feature{min-height:0}.story-feature.collab-feature>img{object-position:center}.story-feature.collab-feature figcaption{padding:0 18px 16px}}
.concept-intro p{max-width:650px;margin:10px 0 0;color:var(--body);font-size:16px}
.how-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* Documentation article system */
.docs-page{padding:0 0 96px;background:#fbfaf8;color:var(--ink)}
.docs-breadcrumb{display:flex;align-items:center;gap:9px;padding-top:22px;color:var(--faint);font-size:12px}.docs-breadcrumb a:hover{color:var(--accent-dark)}.docs-breadcrumb b{color:var(--body);font-weight:500}
.docs-hero{display:grid;grid-template-columns:minmax(0,780px) auto;justify-content:space-between;gap:64px;padding-top:54px;padding-bottom:54px}.docs-hero h1{max-width:760px;margin-top:12px;font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.055em}.docs-hero>div>p{max-width:680px;margin-top:20px;color:var(--body);font-size:18px;line-height:1.65}
.docs-meta{align-self:end;min-width:210px;margin:0;border-top:1px solid var(--line)}.docs-meta div{display:flex;justify-content:space-between;gap:24px;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px}.docs-meta dt{color:var(--faint)}.docs-meta dd{margin:0;color:var(--ink);font-weight:500}
.docs-shell{display:grid;grid-template-columns:170px minmax(0,760px) 180px;justify-content:space-between;gap:48px;align-items:start;padding-top:42px;border-top:1px solid var(--line)}
.docs-nav,.docs-toc{display:flex;flex-direction:column;gap:3px;font-size:12px}.docs-nav b,.docs-toc b{margin:18px 0 7px;color:var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.09em}.docs-nav b:first-child,.docs-toc b:first-child{margin-top:0}.docs-nav a,.docs-toc a{padding:7px 9px;border-radius:7px;color:var(--body);line-height:1.3}.docs-nav a:hover,.docs-toc a:hover{background:#f3eef1;color:var(--accent-dark)}.docs-nav a.active{background:var(--accent-tint);color:var(--accent-dark);font-weight:600}.docs-toc a{padding:5px 0;border-radius:0;border-left:1px solid var(--line);padding-left:12px}
.docs-toc{position:sticky;top:86px}
.docs-article{min-width:0}.docs-article section{position:relative;padding-top:58px;scroll-margin-top:78px}.docs-article h2{font-size:28px;line-height:1.2;letter-spacing:-.035em}.docs-article p,.docs-article li{color:var(--body);font-size:15px;line-height:1.75}.docs-article section>p{margin-top:14px}.docs-step{display:block;margin-bottom:10px;color:var(--accent-dark);font:600 10px/1 ui-monospace,monospace;letter-spacing:.08em}
.docs-visual{margin:0}.docs-visual img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:16px;background:#f7f3f5}.docs-visual figcaption{margin-top:10px;color:var(--faint);font-size:11px;line-height:1.55}
.docs-callout{margin:28px 0 0;padding:17px 19px;border:1px solid #e4d5de;border-left:3px solid var(--accent);border-radius:10px;background:#fff}.docs-callout b{font-size:13px}.docs-callout p{margin-top:5px;font-size:13px}.docs-callout.warning{border-left-color:#dc9049;background:#fffaf5}.docs-callout.note{margin-top:30px}
.docs-code{margin:20px 0 24px;overflow:hidden;border-radius:12px;background:#15192e;box-shadow:0 20px 45px -36px #111}.docs-code header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #ffffff17;color:#9da3ba;font:11px/1 ui-monospace,monospace}.docs-code button{padding:5px 8px;border:1px solid #ffffff24;border-radius:5px;background:transparent;color:#dce0ee;font:10px/1 Inter,sans-serif;cursor:pointer}.docs-code button:hover{border-color:#ef78bd;color:#ef78bd}.docs-code pre{margin:0;padding:20px;overflow:auto;color:#e7eafd;font:12px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}.docs-code code{font:inherit}.docs-response{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:-10px 0 20px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:11px}.docs-response code{color:#317957}
.docs-table{width:100%;margin-top:20px;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:12px}.docs-table th,.docs-table td{padding:12px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}.docs-table th{background:#f3f0ee;color:var(--ink);font-weight:600}.docs-table td{color:var(--body)}.docs-table tr:last-child td{border-bottom:0}
.docs-checks{display:grid;gap:0;margin-top:18px;padding:0!important;list-style:none}.docs-checks li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--line);font-size:14px}.docs-checks li:before{content:'✓';position:absolute;left:2px;color:var(--accent);font-weight:700}.docs-checks.cards{grid-template-columns:1fr 1fr;gap:9px}.docs-checks.cards li{padding:12px 12px 12px 35px;border:1px solid var(--line);border-radius:8px;background:#fff}.docs-checks.cards li:before{left:13px;top:12px}
.docs-test{margin-top:20px;padding:0;list-style:none;counter-reset:test}.docs-test li{counter-increment:test;display:grid;grid-template-columns:28px 1fr;column-gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.docs-test li:before{content:counter(test);grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-tint);color:var(--accent-dark);font:600 10px/1 ui-monospace,monospace}.docs-test b{color:var(--ink);font-size:13px}.docs-test span{grid-column:2;color:var(--body);font-size:13px}
.docs-next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:64px}.docs-next a{padding:18px;border:1px solid var(--line);border-radius:11px;background:#fff}.docs-next a:last-child{text-align:right}.docs-next small,.docs-next b{display:block}.docs-next small{color:var(--faint);font-size:10px}.docs-next b{margin-top:5px;font-size:13px}.docs-next a:hover{border-color:#cc9ab9;color:var(--accent-dark)}
@media(max-width:1080px){.docs-shell{grid-template-columns:minmax(0,760px) 180px;justify-content:center}.docs-nav{display:none}.docs-hero{grid-template-columns:1fr auto}}
@media(max-width:760px){.docs-page{padding-bottom:64px}.docs-breadcrumb{padding-top:16px;overflow:hidden;white-space:nowrap}.docs-hero{display:block;padding-top:36px;padding-bottom:36px}.docs-hero h1{font-size:39px}.docs-hero>div>p{font-size:16px}.docs-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;border:0}.docs-meta div{display:block;padding:0;border:0}.docs-meta dt{font-size:9px}.docs-meta dd{margin-top:3px}.docs-shell{display:block;padding-top:28px}.docs-toc{position:static;display:grid;grid-template-columns:1fr 1fr;margin-bottom:28px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff}.docs-toc b{grid-column:1/-1}.docs-toc a{border:0;padding:4px 0}.docs-article section{padding-top:46px}.docs-article h2{font-size:25px}.docs-visual{margin-inline:-6px}.docs-code{margin-inline:-6px}.docs-code pre{padding:16px;font-size:11px}.docs-table{display:block;overflow-x:auto}.docs-checks.cards{grid-template-columns:1fr}.docs-next{margin-top:48px}}

/* Search-focused product pages */
.seo-page{background:#fbfaf8;color:var(--ink)}
.seo-hero{padding-top:92px;padding-bottom:80px;text-align:center}.seo-hero h1{max-width:930px;margin:16px auto 0;font-size:clamp(48px,6.6vw,88px);line-height:.98;letter-spacing:-.06em}.seo-hero>p{max-width:710px;margin:26px auto 0;color:var(--body);font-size:19px;line-height:1.65}.seo-hero small{display:block;max-width:650px;margin:20px auto 0;color:var(--faint);font-size:12px;line-height:1.5}.seo-actions{display:flex;justify-content:center;gap:10px;margin-top:30px}
.seo-points{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#fff}.seo-points article{min-height:180px;padding:34px}.seo-points article+article{border-left:1px solid var(--line)}.seo-points h2{font-size:19px}.seo-points p{margin-top:12px;color:var(--body);font-size:14px;line-height:1.65}
.seo-layout{display:grid;grid-template-columns:minmax(0,760px) 210px;justify-content:space-between;gap:90px;padding-top:86px;padding-bottom:100px}.seo-copy>section{padding:0 0 64px}.seo-copy h2{font-size:34px;line-height:1.15;letter-spacing:-.04em}.seo-copy p{margin-top:18px;color:var(--body);font-size:16px;line-height:1.8}.seo-layout aside{position:sticky;top:86px;align-self:start;display:flex;flex-direction:column;border-top:1px solid var(--line);font-size:13px}.seo-layout aside b{padding:18px 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.09em}.seo-layout aside a{padding:9px 0;color:var(--body)}.seo-layout aside a:hover{color:var(--accent-dark)}
.seo-code{margin-top:22px;padding:22px;overflow:auto;border-radius:13px;background:#15192e;color:#e7eafd}.seo-code code{white-space:pre;font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}.seo-table{margin-top:22px;overflow-x:auto}.seo-table table{width:100%;border-collapse:collapse;background:#fff}.seo-table th,.seo-table td{padding:14px;border:1px solid var(--line);text-align:left;font-size:13px;line-height:1.5}.seo-table th{background:#f6f2f4}
.seo-faq{margin-top:22px;border-top:1px solid var(--line)}.seo-faq details{border-bottom:1px solid var(--line)}.seo-faq summary{padding:18px 32px 18px 0;cursor:pointer;font-weight:600;list-style:none}.seo-faq summary::-webkit-details-marker{display:none}.seo-faq details p{margin:0;padding:0 0 18px;font-size:14px}.seo-cta{padding:90px 0;background:var(--accent-dark);color:#fff;text-align:center}.seo-cta h2{max-width:700px;margin:14px auto 0;font-size:clamp(38px,5vw,65px);line-height:1;letter-spacing:-.05em}.seo-cta p{margin:20px auto 28px;color:#f2cfe4}.btn-light{background:#fff;color:var(--ink)}
@media(max-width:820px){.seo-hero{padding-top:60px;padding-bottom:54px}.seo-hero h1{font-size:47px}.seo-hero>p{font-size:16px}.seo-points{grid-template-columns:1fr}.seo-points article{min-height:0;padding:25px}.seo-points article+article{border-left:0;border-top:1px solid var(--line)}.seo-layout{display:block;padding-top:58px;padding-bottom:70px}.seo-copy>section{padding-bottom:52px}.seo-copy h2{font-size:28px}.seo-layout aside{position:static;padding-bottom:20px}.seo-actions{flex-direction:column;align-items:stretch}.seo-cta{padding:70px 22px}}

/* Documentation hub */
.docs-hero-actions{display:flex;gap:10px;margin-top:26px}.docs-hub .docs-article section:first-child{padding-top:0}.docs-hub-section>p{max-width:680px}
.docs-link-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}.docs-link-grid>a{display:flex;min-height:145px;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .2s,transform .2s}.docs-link-grid>a:hover{transform:translateY(-2px);border-color:#d9b8cc}.docs-link-grid b{font-size:15px}.docs-link-grid span{margin-top:9px;color:var(--body);font-size:12px;line-height:1.55}.docs-link-grid i{margin-top:auto;padding-top:18px;color:var(--accent-dark);font-size:11px;font-style:normal}.docs-link-grid.compact>a{min-height:105px}.docs-link-grid.compact span{margin-top:7px}
.docs-flow{margin:27px 0 0;padding:0;border-top:1px solid var(--line);list-style:none}.docs-flow li{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:20px 0;border-bottom:1px solid var(--line)}.docs-flow li>span{color:var(--accent-dark);font:600 10px/1.5 ui-monospace,monospace}.docs-flow b{color:var(--ink);font-size:14px}.docs-flow li p{margin-top:4px;font-size:13px;line-height:1.55}
.docs-reference-list{margin-top:25px;border-top:1px solid var(--line)}.docs-reference-list>a{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;border-bottom:1px solid var(--line)}.docs-reference-list span{display:flex;flex-direction:column;gap:5px}.docs-reference-list b{font-size:14px}.docs-reference-list small{color:var(--body);font-size:11px}.docs-reference-list i{color:var(--accent-dark);font-style:normal}
@media(max-width:760px){.docs-hero-actions{flex-direction:column}.docs-link-grid{grid-template-columns:1fr}.docs-link-grid>a{min-height:120px}}
.resource-index{padding:88px 0 96px;border-top:1px solid var(--line);background:#f5f0f3}.resource-index-head{max-width:620px}.resource-index-head h2{margin-top:12px;font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:-.05em}.resource-index-head p{margin-top:14px;color:var(--body);font-size:16px}.resource-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px;margin-top:48px}.resource-index-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:11px}.resource-index-grid h3{margin-bottom:7px;font-size:14px;text-transform:uppercase;letter-spacing:.08em}.resource-index-grid a{color:var(--body);font-size:14px}.resource-index-grid a:hover{color:var(--accent-dark)}
@media(max-width:760px){.resource-index{padding:64px 0}.resource-index-grid{grid-template-columns:1fr;gap:38px;margin-top:34px}}
.faq-bridge{max-width:1280px;margin:0 auto;padding:84px 0 0;border-top:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line);background:#fcfbf9}.faq-bridge-grid{display:grid;grid-template-columns:290px 1fr;gap:70px;align-items:start;padding:0 78px 82px}.faq-bridge h2{margin-top:24px;font-size:clamp(30px,4vw,48px);line-height:1.04;letter-spacing:-.05em}.faq-bridge-grid>div:first-child p{margin-top:14px;color:var(--body);font-size:14px;line-height:1.6}.faq-bridge-list{border-top:1px solid var(--line)}.faq-bridge-list details{border-bottom:1px solid var(--line)}.faq-bridge-list summary{padding:18px 30px 18px 0;cursor:pointer;font-size:15px;font-weight:500;list-style:none}.faq-bridge-list summary::-webkit-details-marker{display:none}.faq-bridge-list details p{padding:0 30px 18px 0;color:var(--body);font-size:13px;line-height:1.65}.faq-bridge-list a{color:var(--accent-dark);text-decoration:underline}.faq-bridge:after{content:'';display:block;height:34px;max-width:none;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background-color:var(--bg);background-image:linear-gradient(45deg,transparent 46%,#d9d4d0 47% 52%,transparent 53%),linear-gradient(-45deg,transparent 46%,#d9d4d0 47% 52%,transparent 53%);background-size:34px 34px;background-position:0 17px}@media(max-width:760px){.faq-bridge{padding:48px 0 0}.faq-bridge-grid{grid-template-columns:1fr;gap:28px;padding:0 24px 52px}.faq-bridge h2{margin-top:8px;line-height:1.02}.faq-bridge:after{position:relative;z-index:2;height:28px;border-top:2px solid #d8d2cd;background-color:#fcfbf9;background-image:linear-gradient(45deg,transparent 44%,#cec7c2 45% 55%,transparent 56%),linear-gradient(-45deg,transparent 44%,#cec7c2 45% 55%,transparent 56%);background-size:28px 28px;background-position:0 14px}}
.faq-bridge + footer:before{display:none}
.seo-page .btn-primary{background:var(--accent);border-color:var(--accent)}.seo-page .btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.faq-bridge>.wrap{max-width:1280px}
.legacy-doc-page{background:#fbfaf8;padding:0 0 80px}.legacy-doc-page>article{max-width:1120px;padding-top:76px}.legacy-doc-page h1{max-width:900px;margin:14px 0 22px;font-size:clamp(44px,6vw,76px);line-height:1.02;letter-spacing:-.06em}.legacy-doc-page .legal-meta{max-width:760px;color:var(--body);font-size:18px;line-height:1.65}.legacy-doc-page h2{margin-top:62px;font-size:30px;line-height:1.2;letter-spacing:-.04em}.legacy-doc-page p,.legacy-doc-page li{max-width:760px;color:var(--body);font-size:15px;line-height:1.75}.legacy-doc-page ul{padding-left:22px}.legacy-doc-page h2:last-of-type+ul{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:0;list-style:none}.legacy-doc-page h2:last-of-type+ul li{padding:15px 0;border-bottom:1px solid var(--line)}.legacy-doc-page h2:last-of-type+ul li a{color:var(--body)}
@media(max-width:760px){.legacy-doc-page>article{padding-top:48px}.legacy-doc-page h1{font-size:44px}.legacy-doc-page h2{margin-top:44px;font-size:26px}.legacy-doc-page h2:last-of-type+ul{grid-template-columns:1fr}}


/* ---------- ecosystem cross-fade ----------
   Two frames of six that alternate, with each item staggered ~70ms behind the
   one before it, so a frame assembles and leaves in sequence rather than the
   whole block flicking at once.

   The frames are stacked with grid-area rather than absolute positioning, so
   the band sizes itself to whichever frame is tallest. That is what lets the
   grid drop to 3 and then 2 columns on small screens without a fixed height
   to fight — the previous version pinned the height and hid every item past
   the second, which left two logos adrift in a 142px black band. */
.ecosystem{
  overflow:hidden;background:#111113;color:#fff;
  border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;
  padding:26px 0;
}
.ecosystem-rotator{display:grid}
.ecosystem-frame{
  grid-area:1/1;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;gap:18px 30px;
}
.ecosystem-frame a{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  color:#b9b9c2;font-size:15px;font-weight:450;letter-spacing:-.015em;white-space:nowrap;
  opacity:0;
  animation-duration:13s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
  animation-iteration-count:infinite;
  animation-fill-mode:both;
  animation-delay:calc(var(--i,0) * 70ms);
  transition:color .18s var(--ease-io);
}
.frame-one a{animation-name:eco-fade-a}
.frame-two a{animation-name:eco-fade-b}
.ecosystem-frame a:hover{color:#fff}
.ecosystem:hover .ecosystem-frame a,
.ecosystem:focus-within .ecosystem-frame a{animation-play-state:paused}
.ecosystem-frame img{
  width:22px;height:22px;object-fit:contain;flex:0 0 auto;
  filter:grayscale(1) brightness(0) invert(1);opacity:.66;
  transition:opacity .18s var(--ease-io);
}
.ecosystem-frame a:hover img{opacity:1}

@keyframes eco-fade-a{
  0%       {opacity:0;transform:translateY(9px)}
  5%,42%   {opacity:1;transform:none}
  49%,100% {opacity:0;transform:translateY(-9px)}
}
@keyframes eco-fade-b{
  0%,49%   {opacity:0;transform:translateY(9px)}
  55%,92%  {opacity:1;transform:none}
  99%,100% {opacity:0;transform:translateY(-9px)}
}

@media(max-width:900px){
  .ecosystem-frame{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 22px}
  .ecosystem-frame a{font-size:14px;gap:9px}
  .ecosystem-frame img{width:20px;height:20px}
}
@media(max-width:560px){
  .ecosystem{padding:22px 0}
  .ecosystem-frame{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .ecosystem-frame a{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
  /* no cross-fade: let both frames flow and show all twelve at once */
  .ecosystem-rotator{display:flex;flex-wrap:wrap;gap:16px 30px}
  .ecosystem-frame{grid-area:auto;display:contents}
  .ecosystem-frame a{opacity:1;animation:none;transform:none}
}

/* API reference — generated from openapi.json by scripts/build-api-reference.py */
.api-reference .docs-nav{max-height:calc(100vh - 120px);overflow-y:auto;padding-right:6px}
.api-nav a{display:flex;align-items:baseline;gap:7px;padding:5px 0;font-size:12px;line-height:1.35}
.api-method{flex:none;min-width:44px;padding:2px 5px;border-radius:4px;background:#f0ecea;color:var(--ink-2);font:700 9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-align:center;text-transform:uppercase}
.api-method.m-get{background:#e7f1ea;color:#2f6b45}
.api-method.m-post{background:var(--accent-tint);color:var(--accent-dark)}
.api-method.m-put,.api-method.m-patch{background:#f4eddc;color:#7a5a16}
.api-method.m-delete{background:#f7e7e7;color:#8c3030}
.api-group{padding-top:56px}
.api-op{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);scroll-margin-top:84px}
.api-op-head{display:flex;align-items:center;gap:10px}
.api-path{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);word-break:break-all}
.api-op h3{margin-top:12px;font-size:19px;letter-spacing:-.02em}
.api-op h4{margin-top:22px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.api-op p{margin-top:10px;color:var(--body);font-size:14px;line-height:1.7}
.api-auth{margin-top:6px!important;color:var(--faint)!important;font-size:12px!important}
.api-op .docs-table{margin-top:10px}
.api-op .docs-code{margin-top:10px}
@media(max-width:760px){.api-op-head{flex-wrap:wrap;gap:7px}.api-path{font-size:12px}}