/* BxAgents homepage. Generated from the approved mockup, then maintained by hand. Every class is prefixed bxa- so nothing collides with the bootstrap theme. */

/* Tokens: bare = light. The bx-sites theme sets data-theme="dark" on <html> for dark mode. */
.bxa-home{
  --bg:#f5f8fb; --bg2:#ebf1f6; --surface:#ffffff; --surface2:#edf3f8; --text:#0a1a26; --muted:#4d6475;
  --line:rgba(10,26,38,.10); --line2:rgba(10,26,38,.20); --dot:rgba(10,26,38,.09);
  --g1:#00ff75; --g2:#00dbff; --on-grad:#031a10; --accent-text:#00774a;
  --grad:linear-gradient(120deg,var(--g1),var(--g2));
  --code-bg:#05090d; --code-text:#d7e8f0; --code-dim:#7d96a6; --code-key:#00dbff; --code-str:#7dffb1; --code-ann:#ffd479;
  /* text colours for the light page (the bright brand greens fail contrast on white) */
  --grad-text:linear-gradient(120deg,#00944a,#0086a8); --code-inline:#b0215c; --ann-text:#8a5a00;
  --glow1:rgba(0,255,117,.22); --glow2:rgba(0,219,255,.20); --shadow:rgba(10,40,60,.16);
  --font:"Poppins",ui-sans-serif,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-theme="dark"] .bxa-home{
  --bg:#070b10; --bg2:#0b1119; --surface:#0f1822; --surface2:#15212e; --text:#e9f1f7; --muted:#93a8b8;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.17); --dot:rgba(255,255,255,.075); --accent-text:#19f08a;
  --grad-text:var(--grad); --code-inline:#ff8cc6; --ann-text:#ffd479;
  --glow1:rgba(0,255,117,.20); --glow2:rgba(0,219,255,.18); --shadow:rgba(0,0,0,.45);
}

/* Layout: dark-first on cool graphite, brand glow only behind the hero stage. Sections: hero stage, pillars, four commands, how it works, build pipeline, gateway inspector, HTTP recording, starter explorer, verbs, CTA. */
.bxa-home,.bxa-home *{box-sizing:border-box}
html{scroll-behavior:smooth}
.bxa-home{position:relative;margin:0;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;font-size:16px;overflow-x:clip;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.3px);background-size:26px 26px;background-position:0 0}
.bxa-home::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 120% 40% at 50% 0%,transparent 35%,var(--bg) 100%)}
.bxa-home>*{position:relative;z-index:1}
.bxa-home a{color:inherit;text-decoration:none}
.bxa-home :focus-visible{outline:2px solid var(--g2);outline-offset:3px;border-radius:6px}
.bxa-home h1,.bxa-home h2,.bxa-home h3,.bxa-home h4,.bxa-home p{margin:0}
.bxa-home code,.bxa-home pre,.bxa-home kbd{font-family:var(--mono)}
.bxa-home code{color:var(--code-inline)}
.bxa-home img,.bxa-home video{max-width:100%}
.ph-duotone{vertical-align:-.14em;flex:none}
svg.ph-duotone{width:1em;height:1em;display:inline-block}
.bxa-wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bxa-grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.bxa-eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}

/* gradient-edge glow that follows the pointer, used on every interactive card */
.bxa-gc{position:relative;--mx:50%;--my:0%}
.bxa-gc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .25s;pointer-events:none}
.bxa-gc::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx) var(--my),var(--glow2),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
.bxa-gc:hover::before,.bxa-gc:hover::after,.bxa-gc:focus-visible::before,.bxa-gc.bxa-on::before{opacity:1}

/* scroll-driven reveal; resting state is already readable */
@supports (animation-timeline: view()){
  .bxa-rv{animation:rv both ease-out;animation-timeline:view();animation-range:entry 0% entry 45%}
  @keyframes rv{from{opacity:.25;transform:translateY(26px)}to{opacity:1;transform:none}}
}

/* top bar */
header.bxa-top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bxa-top .bxa-wrap{display:flex;align-items:center;gap:24px;height:66px}
.bxa-brand img{height:30px;display:block}
nav.bxa-main{display:flex;gap:22px;font-size:.9rem;color:var(--muted)}
nav.bxa-main a{position:relative}
nav.bxa-main a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--grad);transition:right .25s}
nav.bxa-main a:hover{color:var(--text)}
nav.bxa-main a:hover::after{right:0}
.bxa-spacer{flex:1}
.bxa-gh{display:inline-flex;gap:8px;align-items:center;font-size:.88rem;color:var(--muted);border:1px solid var(--line2);border-radius:10px;padding:7px 12px;transition:.2s}
.bxa-gh:hover{color:var(--text);background:var(--surface2)}
.bxa-icon-btn{border:1px solid var(--line2);background:transparent;color:var(--text);border-radius:10px;width:38px;height:38px;cursor:pointer;display:grid;place-items:center;transition:.2s}
.bxa-icon-btn:hover{background:var(--surface2);transform:rotate(25deg)}

/* buttons */
.bxa-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:12px;font-weight:600;font-size:.95rem;border:1px solid var(--line2);cursor:pointer;transition:transform .15s,box-shadow .2s,background .15s;font-family:inherit;color:var(--text);background:transparent}
.bxa-btn .ph-duotone{transition:transform .2s}
.bxa-btn:hover .ph-duotone{transform:translateX(4px)}
/* .bxa-home a{color:inherit} outranks a lone class, so spell out the colour at the same weight */
.bxa-home .bxa-btn-primary,.bxa-btn-primary{background:var(--grad);color:var(--on-grad);border:0;box-shadow:0 10px 32px rgba(0,219,255,.25)}
.bxa-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,255,117,.32)}
.bxa-btn-ghost:hover{background:var(--surface2)}

/* hero */
.bxa-hero{position:relative;padding:74px 0 70px;overflow:hidden}
.bxa-hero .bxa-bgring{position:absolute;right:-8%;top:-20%;width:62vw;max-width:880px;aspect-ratio:1;border:1.5px dashed var(--line2);border-radius:50%;opacity:.6;animation:spin 120s linear infinite;pointer-events:none}
.bxa-hero .bxa-bgring::before,.bxa-hero .bxa-bgring::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--grad)}
.bxa-hero .bxa-bgring::before{top:-8px;left:50%}
.bxa-hero .bxa-bgring::after{bottom:14%;left:5%;width:11px;height:11px}
.bxa-hero .bxa-bgring i{position:absolute;right:6%;bottom:22%;width:20px;height:20px;border-radius:50%;background:var(--grad);opacity:.9}
.bxa-hero .bxa-glow{position:absolute;right:-6%;top:6%;width:720px;height:560px;background:radial-gradient(closest-side,var(--glow1),transparent 70%),radial-gradient(closest-side at 70% 60%,var(--glow2),transparent 70%);filter:blur(30px);pointer-events:none;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08) translate(-2%,2%);opacity:.8}}
@keyframes spin{to{transform:rotate(360deg)}}
.bxa-hero .bxa-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center}
.bxa-hero h1{font-size:clamp(2.5rem,5.4vw,4.3rem);line-height:1.04;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
.bxa-hero .bxa-lede{margin-top:22px;font-size:1.12rem;color:var(--muted);max-width:30em}
.bxa-hero .bxa-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.bxa-install{margin-top:26px;display:flex;align-items:center;gap:12px;background:var(--code-bg);border:1px solid var(--line2);border-radius:12px;padding:10px 12px 10px 16px;max-width:30em;min-width:0}
.bxa-install code{color:var(--code-text);font-size:.86rem;white-space:nowrap;overflow-x:auto;flex:1;min-width:0}
.bxa-install code i{color:var(--code-dim);font-style:normal}
.bxa-copy{border:1px solid rgba(255,255,255,.2);background:transparent;color:#d7e8f0;font:500 .75rem var(--mono);padding:6px 10px;border-radius:8px;cursor:pointer;transition:.15s}
.bxa-copy:hover{background:rgba(255,255,255,.1)}
.bxa-copy.bxa-ok{color:var(--g1);border-color:var(--g1)}
.bxa-tagline{margin-top:30px;display:flex;gap:18px;flex-wrap:wrap;font-weight:600;font-size:.95rem}
.bxa-tagline span{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.bxa-tagline span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);animation:pop 3.6s ease-in-out infinite}
.bxa-tagline span:nth-child(2)::before{animation-delay:.5s}.bxa-tagline span:nth-child(3)::before{animation-delay:1s}
@keyframes pop{50%{transform:scale(1.7)}}

/* the stage */
.bxa-stagewrap{perspective:1200px}
.bxa-stage{position:relative;background:var(--surface);border:1px solid var(--line2);border-radius:20px;overflow:hidden;box-shadow:0 30px 80px var(--shadow);transition:transform .2s ease-out,box-shadow .3s;transform-style:preserve-3d}
.bxa-stage:hover{box-shadow:0 40px 100px var(--shadow),0 0 60px var(--glow2)}
.bxa-stage-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font:500 .76rem var(--mono);color:var(--muted)}
.bxa-stage-bar i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.bxa-stage-bar span{margin-left:8px}
.bxa-stage-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.bxa-tree{padding:14px 10px;border-right:1px solid var(--line);font:400 .84rem var(--mono)}
.bxa-tree button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--muted);transition:background .15s,color .15s,transform .15s}
.bxa-tree button:hover{background:var(--surface2);color:var(--text);transform:translateX(3px)}
.bxa-tree button[aria-selected="true"]{background:var(--surface2);color:var(--text);box-shadow:inset 2px 0 0 var(--g1)}
.bxa-tree button:focus-visible{outline:2px solid var(--g2)}
.bxa-tree .bxa-root{color:var(--text);padding:6px 10px 10px;font-weight:500}
.bxa-tree .bxa-tag{margin-left:auto;font-size:.66rem;border:1px solid var(--line2);border-radius:6px;padding:0 6px;color:var(--accent-text);border-color:var(--accent-text)}
.bxa-tree .ph-duotone{font-size:1rem;color:var(--accent-text)}
.bxa-out{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.bxa-out .bxa-k{font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bxa-out h3{font-size:1.25rem;letter-spacing:-.01em}
.bxa-out p{color:var(--muted);font-size:.92rem}
.bxa-out.bxa-swap>*{animation:swapin .35s ease both}
.bxa-out.bxa-swap>*:nth-child(2){animation-delay:.04s}.bxa-out.bxa-swap>*:nth-child(3){animation-delay:.08s}.bxa-out.bxa-swap>*:nth-child(4){animation-delay:.12s}
@keyframes swapin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bxa-gen{overflow-wrap:anywhere;font:400 .82rem var(--mono);background:var(--code-bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--code-text);display:flex;flex-direction:column;gap:4px}
.bxa-gen b{font-weight:500;color:var(--g1)}
.bxa-gen em{font-style:normal;color:var(--code-dim)}
.bxa-running{display:flex;align-items:center;gap:10px;font:500 .78rem var(--mono);color:var(--accent-text)}
.bxa-dot{width:8px;height:8px;border-radius:50%;background:var(--g1);box-shadow:0 0 0 0 rgba(0,255,117,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(0,255,117,0)}100%{box-shadow:0 0 0 0 rgba(0,255,117,0)}}
.bxa-orbit{position:absolute;right:-70px;bottom:-70px;width:220px;height:220px;opacity:.14;pointer-events:none;animation:spin 40s linear infinite}

/* sections */
.bxa-home section{padding:88px 0}
.bxa-head{max-width:44rem;margin-bottom:42px;display:flex;flex-direction:column;gap:12px}
.bxa-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-.025em;font-weight:700;text-wrap:balance}
.bxa-head p{color:var(--muted);font-size:1.05rem}
.bxa-band{background:var(--bg2);border-block:1px solid var(--line)}

/* pillars */
.bxa-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bxa-pillar{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;transition:transform .25s,border-color .25s}
.bxa-pillar:hover{transform:translateY(-4px)}
.bxa-pillar .bxa-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--grad);color:var(--on-grad);font-size:1.6rem;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bxa-pillar:hover .bxa-ico{transform:rotate(-8deg) scale(1.12)}
.bxa-pillar h3{font-size:1.02rem}
.bxa-pillar p{color:var(--muted);font-size:.9rem}

/* four commands */
.bxa-cmds{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bxa-cmds::before{content:"";position:absolute;left:5%;right:5%;top:30px;height:2px;background:var(--line2);z-index:0}
.bxa-cmds::after{content:"";position:absolute;left:5%;top:30px;height:2px;width:0;background:var(--grad);z-index:0;animation:run 5s ease-in-out infinite}
@keyframes run{0%{width:0}70%,100%{width:90%}}
.bxa-cmd{position:relative;z-index:1;background:var(--code-bg);border:1px solid var(--line2);border-radius:16px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:transform .25s}
.bxa-cmd:hover{transform:translateY(-4px)}
.bxa-cmd .bxa-n{display:flex;align-items:center;gap:10px;font:600 .8rem var(--mono);color:var(--code-dim);letter-spacing:.08em;text-transform:uppercase}
.bxa-cmd .bxa-n b{width:26px;height:26px;border-radius:50%;background:var(--grad);color:var(--on-grad);display:grid;place-items:center;font-size:.8rem;letter-spacing:0}
.bxa-cmd code{color:var(--code-text);font-size:.8rem;overflow-x:auto;white-space:pre;display:block;line-height:1.8}
.bxa-cmd code i{color:var(--g1);font-style:normal}
.bxa-cmd .bxa-copy{align-self:flex-start}
.bxa-result{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:500 .86rem var(--mono);color:var(--muted)}
.bxa-result b{color:var(--accent-text);font-weight:500}

/* code showcase */
.bxa-show{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:start}
.bxa-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.bxa-tabs button{font:500 .8rem var(--mono);color:var(--muted);background:transparent;border:1px solid transparent;border-radius:9px;padding:7px 12px;cursor:pointer;transition:.15s}
.bxa-tabs button:hover{color:var(--text)}
.bxa-tabs button[aria-selected="true"]{color:var(--text);background:var(--surface2);border-color:var(--line2)}
pre.bxa-code{tab-size:2;margin:0;background:var(--code-bg);color:var(--code-text);border:1px solid var(--line2);border-radius:16px;padding:20px 22px;font-size:.84rem;line-height:1.7;overflow-x:auto;min-height:15.5rem}
.bxa-c-k{color:var(--code-key)} .bxa-c-s{color:var(--code-str)} .bxa-c-a{color:var(--code-ann)} .bxa-c-d{color:var(--code-dim)}
.bxa-term{background:var(--code-bg);border:1px solid var(--line2);border-radius:16px;overflow:hidden}
.bxa-term .bxa-stage-bar{color:#7f98a8}
.bxa-term pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:18px 20px;font-size:.8rem;line-height:1.75;color:var(--code-text)}
.bxa-t-p{color:var(--g1)} .bxa-t-ok{color:var(--g1)} .bxa-t-d{color:var(--code-dim)} .bxa-t-h{color:var(--g2)}
.bxa-cur{display:inline-block;width:.55em;height:1.05em;background:var(--g1);vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* pipeline */
.bxa-pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.bxa-pipe::before{content:"";position:absolute;left:0;right:10%;top:11px;height:2px;background:var(--line2)}
.bxa-pipe::after{content:"";position:absolute;left:0;top:11px;height:2px;width:0;background:var(--grad);animation:run 6s ease-in-out infinite}
.bxa-pipe .bxa-step{position:relative;padding:22px 20px 0 0;display:flex;flex-direction:column;gap:8px}
.bxa-pipe .bxa-step i{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;background:var(--grad);display:block;box-shadow:0 0 0 6px var(--bg2)}
.bxa-pipe h3{font-size:1rem;margin-top:-2px}
.bxa-pipe p{color:var(--muted);font-size:.88rem}
.bxa-pipe code{font-size:.76rem;color:var(--accent-text)}
.bxa-versus{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bxa-vs{border:1px solid var(--line2);border-radius:16px;padding:20px 22px;background:var(--surface)}
.bxa-vs h3{font-size:.95rem;margin-bottom:6px}
.bxa-vs p{color:var(--muted);font-size:.9rem}
.bxa-vs.bxa-win{border-color:var(--accent-text)}

/* gateways */
.bxa-gwgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bxa-gw{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;font:500 .84rem var(--font);color:var(--text);transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s;text-align:center;position:relative}
.bxa-gw .ph-duotone{font-size:2.1rem;color:var(--muted);transition:transform .35s cubic-bezier(.2,.7,.2,1),color .2s}
.bxa-gw small{font:400 .7rem var(--mono);color:var(--muted)}
.bxa-gw:hover,.bxa-gw:focus-visible,.bxa-gw.bxa-on{transform:translateY(-5px)}
.bxa-gw:hover .ph-duotone,.bxa-gw:focus-visible .ph-duotone,.bxa-gw.bxa-on .ph-duotone{transform:scale(1.18) rotate(-6deg);color:var(--accent-text)}
.bxa-gw.bxa-alt .ph-duotone{font-size:1.8rem}
.bxa-gwnote{margin-top:16px;color:var(--muted);font-size:.86rem}
.bxa-tip{position:fixed;z-index:60;width:min(300px,calc(100vw - 24px));pointer-events:none;background:var(--surface2);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;box-shadow:0 20px 50px var(--shadow),0 0 40px var(--glow2);opacity:0;transform:translateY(6px) scale(.98);transition:opacity .16s,transform .16s;font-size:.84rem}
.bxa-tip.bxa-vis{opacity:1;transform:none}
.bxa-tip h4{margin:0 0 2px;font-size:.98rem;display:flex;align-items:center;gap:8px}
.bxa-tip h4 .ph-duotone{font-size:1.2rem;color:var(--accent-text)}
.bxa-tip .bxa-ty{font:500 .74rem var(--mono);color:var(--muted)}
.bxa-tip .bxa-ty b{color:var(--g2);font-weight:500}
.bxa-tip ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.bxa-tip li{font:400 .74rem var(--mono);color:var(--code-text);background:var(--code-bg);border-radius:6px;padding:3px 8px;overflow-wrap:anywhere}
.bxa-tip .bxa-how{margin-top:10px;color:var(--muted);font-size:.8rem;line-height:1.45}
.bxa-expos{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bxa-ex{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:6px;transition:transform .25s}
.bxa-ex:hover{transform:translateY(-3px)}
.bxa-ex .ph-duotone{font-size:1.5rem;color:var(--accent-text)}
.bxa-ex code{font-size:.74rem;color:var(--accent-text)}
.bxa-ex p{font-size:.84rem;color:var(--muted)}
.bxa-gwtop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:44px;align-items:start}
.bxa-shot{border:1px solid var(--line2);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px var(--shadow);background:var(--surface);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px)}}
.bxa-shot img{display:block;width:100%;height:auto}
.bxa-shot .bxa-d{display:none}
html[data-theme="dark"] .bxa-shot .bxa-d{display:block}
html[data-theme="dark"] .bxa-facts{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.bxa-facts li{display:flex;gap:12px;color:var(--muted);font-size:.95rem}
.bxa-facts li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--grad)}

/* http recording */
.bxa-rec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
.bxa-vid{position:relative;border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:var(--code-bg);display:flex;flex-direction:column;min-width:0}
.bxa-vid .bxa-stage-bar{background:var(--surface)}
.bxa-vid .bxa-frame{position:relative;flex:1;min-height:300px;display:grid;place-items:center;background:var(--code-bg)}
.bxa-vid video,.bxa-vid .bxa-frame img{width:100%;height:100%;object-fit:cover;display:block}
.bxa-vid .bxa-slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);font-size:.9rem;background:repeating-linear-gradient(45deg,transparent 0 14px,var(--line) 14px 15px)}
.bxa-vid .bxa-slot b{display:block;color:var(--text);font-size:1rem;margin-bottom:6px}
.bxa-replay pre{min-height:300px;margin:0;border:0;border-radius:0;white-space:pre-wrap;overflow-wrap:anywhere}
.bxa-routes{display:grid;gap:8px;padding:16px 18px 18px;border-top:1px solid var(--line)}
.bxa-route{display:flex;align-items:center;gap:10px;font:400 .8rem var(--mono);color:var(--code-text);min-width:0}
.bxa-route b{flex:none;font-weight:600;font-size:.68rem;border-radius:6px;padding:2px 8px;background:var(--surface2);color:var(--g2);min-width:3.6em;text-align:center}
.bxa-route b.bxa-get{color:var(--g1)}
.bxa-route span{color:var(--code-dim);font:400 .74rem var(--font);margin-left:auto;text-align:right}
.bxa-caption{margin-top:12px;color:var(--muted);font-size:.84rem}

/* starter explorer */
.bxa-explorer{border:1px solid var(--line2);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:0 30px 80px var(--shadow)}
.bxa-ex-cmd{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--code-bg);font:400 .84rem var(--mono);color:var(--code-text);min-width:0}
.bxa-ex-cmd code{overflow-x:auto;white-space:nowrap;flex:1;min-width:0}
.bxa-ex-cmd .bxa-p{color:var(--g1)} .bxa-ex-cmd b{color:var(--g2);font-weight:500}
.bxa-ex-body{display:grid;grid-template-columns:230px minmax(0,.8fr) minmax(0,1.3fr);min-height:440px}
.bxa-ex-list{border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:2px}
.bxa-ex-list button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--muted);transition:background .15s,color .15s,transform .15s}
.bxa-ex-list button:hover{background:var(--surface2);color:var(--text);transform:translateX(3px)}
.bxa-ex-list button[aria-selected="true"]{background:var(--surface2);color:var(--text);box-shadow:inset 2px 0 0 var(--g1)}
.bxa-ex-list button:focus-visible{outline:2px solid var(--g2)}
.bxa-ex-list .ph-duotone{font-size:1.25rem;color:var(--accent-text)}
.bxa-ex-list b{display:block;font:500 .84rem var(--mono)}
.bxa-ex-list small{display:block;font-size:.7rem;line-height:1.3;color:var(--muted)}
.bxa-ex-tree{border-right:1px solid var(--line);padding:12px 8px;font:400 .8rem var(--mono);overflow:auto}
.bxa-ex-tree .bxa-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:7px;width:100%;padding:5px 8px;border-radius:7px;color:var(--muted);cursor:default;white-space:nowrap}
.bxa-ex-tree button.bxa-row{cursor:pointer;transition:background .15s,color .15s}
.bxa-ex-tree button.bxa-row:hover{background:var(--surface2);color:var(--text)}
.bxa-ex-tree button.bxa-row[aria-selected="true"]{background:var(--surface2);color:var(--text);box-shadow:inset 2px 0 0 var(--g1)}
.bxa-ex-tree .bxa-row:focus-visible{outline:2px solid var(--g2)}
.bxa-ex-tree .bxa-dir{color:var(--text)}
.bxa-ex-tree .bxa-empty{opacity:.7}
.bxa-ex-tree .bxa-empty em{font:400 .66rem var(--font);font-style:normal;margin-left:auto;opacity:.8}
.bxa-ex-tree .ph-duotone{font-size:1rem;color:var(--muted)}
.bxa-ex-tree .bxa-dir .ph-duotone{color:var(--accent-text)}
.bxa-badge{margin-left:auto;font:600 .62rem var(--font);border-radius:999px;padding:1px 8px;letter-spacing:.04em}
.bxa-badge.bxa-new{background:var(--grad);color:var(--on-grad)}
.bxa-badge.bxa-chg{border:1px solid var(--ann-text);color:var(--ann-text)}
.bxa-ex-file{display:flex;flex-direction:column;min-width:0}
.bxa-ex-file-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font:500 .76rem var(--mono);color:var(--muted)}
.bxa-ex-file pre{margin:0;padding:16px 18px;background:var(--code-bg);color:var(--code-text);font-size:.78rem;line-height:1.65;overflow:auto;flex:1;tab-size:2;white-space:pre}
.bxa-ex-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:.82rem;color:var(--muted);align-items:center}
.bxa-ex-legend .bxa-badge{margin:0 6px 0 0}

/* verbs */
.bxa-vgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.bxa-verb{border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px;background:var(--surface);display:flex;flex-direction:column;gap:6px;transition:transform .25s;overflow-wrap:anywhere}
.bxa-verb:hover{transform:translateY(-4px)}
.bxa-verb .ph-duotone{font-size:1.4rem;color:var(--accent-text);transition:transform .3s}
.bxa-verb:hover .ph-duotone{transform:scale(1.2) rotate(-6deg)}
.bxa-verb b{font:500 .84rem var(--mono)}
.bxa-verb small{font-size:.72rem;color:var(--muted)}


/* course path */
.bxa-course{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:48px;align-items:start}
.bxa-course .bxa-lead h2{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:12px 0 14px;text-wrap:balance}
.bxa-course .bxa-lead p{color:var(--muted);font-size:1.05rem}
.bxa-course .bxa-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.bxa-outcome{margin-top:28px;border:1px solid var(--line2);border-radius:16px;padding:18px 20px;background:var(--surface);display:flex;gap:14px}
.bxa-outcome .ph-duotone{font-size:1.6rem;color:var(--accent-text);margin-top:2px}
.bxa-outcome b{display:block;font-size:.95rem;margin-bottom:4px}
.bxa-outcome span{color:var(--muted);font-size:.88rem}
.bxa-progress{margin-top:18px;font:500 .78rem var(--mono);color:var(--muted);display:flex;align-items:center;gap:12px}
.bxa-progress i{flex:1;height:6px;border-radius:99px;background:var(--line2);position:relative;overflow:hidden}
.bxa-progress i::after{content:"";position:absolute;inset:0;width:0;background:var(--grad)}
.bxa-path{display:grid;gap:14px}
.bxa-stagerow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px 18px}
.bxa-stagerow h3{font:600 .8rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bxa-stagerow h3 b{display:block;font:600 .95rem var(--font);letter-spacing:0;text-transform:none;color:var(--text);margin-top:2px}
.bxa-les-row{display:flex;gap:10px;flex-wrap:wrap}
.bxa-les{all:unset;box-sizing:border-box;cursor:pointer;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:600 .86rem var(--mono);color:var(--text);background:var(--surface2);border:1.5px solid var(--line2);position:relative;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s,color .2s,border-color .2s}
.bxa-les:hover,.bxa-les:focus-visible,.bxa-les.bxa-on{background:var(--grad);color:var(--on-grad);border-color:transparent;transform:translateY(-4px) scale(1.12)}
.bxa-les:focus-visible{outline:2px solid var(--g2);outline-offset:3px}

/* consulting */
.bxa-support{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border:1px solid var(--line2);border-radius:24px;overflow:hidden;background:var(--surface);box-shadow:0 24px 60px var(--shadow)}
.bxa-support .bxa-l{padding:44px;background:radial-gradient(520px 320px at 0% 0%,var(--glow2),transparent 70%),radial-gradient(420px 300px at 100% 100%,var(--glow1),transparent 70%)}
.bxa-support .bxa-l h2{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:12px 0 14px;text-wrap:balance}
.bxa-support .bxa-l p{color:var(--muted);font-size:1rem;max-width:34em}
.bxa-support .bxa-l p a{color:var(--text);text-decoration:underline;text-decoration-color:var(--g2);text-underline-offset:3px}
.bxa-support .bxa-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.bxa-support .bxa-r{padding:36px 36px 36px 34px;display:grid;gap:18px;align-content:center;background:var(--bg2);border-left:1px solid var(--line)}
.bxa-perk{display:flex;gap:14px;align-items:flex-start}
.bxa-perk .bxa-pi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grad);color:var(--on-grad);font-size:1.4rem;flex:none;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.bxa-perk:hover .bxa-pi{transform:rotate(-8deg) scale(1.1)}
.bxa-perk b{display:block;font-size:.98rem}
.bxa-perk span{color:var(--muted);font-size:.88rem}

/* final cta */
.bxa-final{border:1px solid var(--line2);border-radius:28px;padding:64px 40px;text-align:center;background:var(--surface);position:relative;overflow:hidden}
.bxa-final::before{content:"";position:absolute;inset:-60% -10% auto;height:120%;background:radial-gradient(closest-side,var(--glow2),transparent);pointer-events:none;animation:breathe 9s ease-in-out infinite}
.bxa-final h2{position:relative;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.025em;line-height:1.1;font-weight:800;text-wrap:balance}
.bxa-final .bxa-cta{position:relative;margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
footer{padding:40px 0 56px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
footer .bxa-wrap{display:flex;gap:28px;flex-wrap:wrap;align-items:center}
footer a:hover{color:var(--text)}
footer .bxa-grow{flex:1}

@media (max-width:1020px){
  .bxa-hero .bxa-wrap,.bxa-show,.bxa-gwtop,.bxa-rec,.bxa-course,.bxa-support{grid-template-columns:minmax(0,1fr)}
  .bxa-support .bxa-r{border-left:0;border-top:1px solid var(--line)}
  .bxa-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bxa-cmds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bxa-cmds::before,.bxa-cmds::after{display:none}
  .bxa-pipe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .bxa-pipe::before,.bxa-pipe::after{display:none}
  .bxa-vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bxa-ex-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bxa-ex-file{grid-column:1 / -1;border-top:1px solid var(--line)}
  .bxa-ex-tree{border-right:0}
  nav.bxa-main{display:none}
}
@media (max-width:620px){
  .bxa-hero{padding-top:40px}
  .bxa-stage-body{grid-template-columns:minmax(0,1fr)}
  .bxa-tree{border-right:0;border-bottom:1px solid var(--line)}
  .bxa-pillars,.bxa-cmds,.bxa-pipe,.bxa-versus,.bxa-expos{grid-template-columns:minmax(0,1fr)}
  .bxa-gwgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bxa-vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bxa-ex-body{grid-template-columns:minmax(0,1fr)}
  .bxa-ex-list{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;overflow-x:auto}
  .bxa-ex-list small{display:none}
  .bxa-ex-list button{flex:none}
  .bxa-ex-tree{border-bottom:1px solid var(--line)}
  .bxa-gh span{display:none}
  .bxa-final{padding:44px 22px}
  .bxa-stagerow{grid-template-columns:minmax(0,1fr);gap:10px}
  .bxa-support .bxa-l,.bxa-support .bxa-r{padding:28px 22px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- pieces that differ from the standalone mockup ---- */
.bxa-brand .bxa-light{display:none}
html:not([data-theme="dark"]) .bxa-brand .bxa-light{display:block}
html:not([data-theme="dark"]) .bxa-brand .bxa-dark{display:none}
.bxa-sig{width:1em;height:1em;display:inline-block}
.bxa-home a.bxa-gw,.bxa-home a.bxa-les,.bxa-home a.bxa-verb{text-decoration:none}
.bxa-gw{color:var(--text)}
a.bxa-verb{color:var(--text)}
a.bxa-les{text-decoration:none;color:var(--text)}
.bxa-searchwrap{display:flex;align-items:center;min-width:0}
.bxa-searchwrap input{background:transparent;color:var(--text);border:1px solid var(--line2);border-radius:10px;padding:7px 12px;font-size:.85rem;min-width:180px}
.bxa-icon-btn{font-size:1.1rem}
.bxa-icon-btn [x-cloak]{display:none}
[x-cloak]{display:none!important}

/* footer */
.bxa-footer{border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;padding:56px 0 34px}
.bxa-foot-top{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px}
.bxa-foot-brand p{margin:14px 0 16px;max-width:22em}
.bxa-foot-col{display:flex;flex-direction:column;gap:8px}
.bxa-foot-col h4{font:600 .78rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin:0 0 4px}
.bxa-footer a:hover{color:var(--text)}
.bxa-foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem}
.bxa-social{display:flex;gap:10px;flex-wrap:wrap}
.bxa-social a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line2);border-radius:9px}

/* walkthrough videos */
.bxa-vplayer{border:1px solid var(--line2);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:0 30px 80px var(--shadow)}
.bxa-vtabs{display:flex;gap:4px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg2)}
.bxa-vtab{font:500 .82rem var(--mono);color:var(--muted);background:transparent;border:1px solid transparent;border-radius:9px;padding:8px 14px;cursor:pointer;transition:.15s}
.bxa-vtab:hover{color:var(--text)}
.bxa-vtab[aria-selected="true"]{color:var(--text);background:var(--surface2);border-color:var(--line2);box-shadow:inset 0 -2px 0 var(--g1)}
.bxa-vstage{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.bxa-vstage video{display:block;width:100%;height:100%;object-fit:contain;background:#070b10;min-height:260px;max-height:560px}
.bxa-vcap{padding:28px 26px;display:flex;flex-direction:column;gap:12px;justify-content:center;border-left:1px solid var(--line)}
.bxa-vcap h3{font-size:1.25rem;letter-spacing:-.01em}
.bxa-vcap p{color:var(--muted);font-size:.94rem}
.bxa-vcap code{align-self:flex-start;font-size:.78rem;color:var(--accent-text);background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:4px 10px}

@media (max-width:1020px){
  .bxa-foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bxa-foot-brand{grid-column:1 / -1}
  .bxa-vstage{grid-template-columns:minmax(0,1fr)}
  .bxa-vcap{border-left:0;border-top:1px solid var(--line)}
  .bxa-searchwrap{display:none}
}
@media (max-width:620px){
  .bxa-foot-top{grid-template-columns:minmax(0,1fr)}
}

/* Dark code surfaces stay dark in the light theme, so give everything inside them the dark theme's tokens.
   Without this their text used the light page's colours, and the theme's inline-code chip put a pale
   background behind light code text (unreadable in light mode). */
.bxa-install,.bxa-gen,.bxa-cmd,pre.bxa-code,.bxa-term,.bxa-vid,.bxa-ex-cmd,.bxa-ex-file pre,.bxa-tip li{
  --text:#e9f1f7; --muted:#93a8b8; --surface:#0f1822; --surface2:#15212e; --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.17);
  --accent-text:#19f08a; --code-inline:#ff8cc6;
}
.bxa-install code,.bxa-gen code,.bxa-cmd code,.bxa-term code,.bxa-vid code,.bxa-ex-cmd code,.bxa-ex-file code,.bxa-tip code{
  background:none;border:0;padding:0;border-radius:0;font-size:inherit;
}

/* header search: the theme's placeholder and shortcut hint are too faint on the dark header */
.bxa-top input::placeholder{color:var(--muted);opacity:1}
.bxa-top .bxsites-search-kbd{color:var(--muted)}

/* ecosystem cards: same set and icons as the other BoxLang module sites */
.bxa-eco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bxa-eco-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:6px;transition:transform .25s,border-color .25s}
.bxa-eco-card:hover{transform:translateY(-3px)}
.bxa-eco-card .ic{width:52px;height:52px;margin-bottom:10px;display:grid;place-items:center}
.bxa-eco-card .ic img{width:100%;height:100%;object-fit:contain;display:block}
.bxa-eco-card .ic.ph{background:var(--grad);color:var(--on-grad);border-radius:14px;font-size:1.7rem}
.bxa-eco-card b{display:flex;align-items:center;gap:6px;font-size:1.02rem}
.bxa-eco-card b .ph-duotone{font-size:.85rem;color:var(--muted)}
.bxa-eco-card:hover b .ph-duotone{color:var(--accent-text)}
.bxa-eco-card span{color:var(--muted);font-size:.92rem;line-height:1.5}
@media (max-width:960px){.bxa-eco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bxa-eco{grid-template-columns:minmax(0,1fr)}}