/* ============================================================
   AI WEBSITE & DIGITAL FOUNDATION — the page is the proof

   One idea runs the whole page: a website is designed and built
   in front of you while you read about it. The hero is a design
   canvas you can inspect. The capability band is eight micro
   interfaces moving sideways. The process section is a browser
   window in which a real site assembles itself, stage by stage.
   The included list is an inspector that lights the part of a
   page each group affects.

   So the argument is never made in a paragraph beside a picture.
   The page demonstrates the service by being the service.

   Scoped .hx- (hero), .wb- (page furniture), .st- (the band),
   .bd- (the construction). Built on the cx-* type scale from
   contact.css; this file loads only on this page, so it also
   corrects the two type sizes that were running too small.
   ============================================================ */

/* `hidden` loses to any class that sets display, which is how a
   component ends up rendering every state at once. Learned on the
   WhatsApp page; enforced here before it can happen. */
.ai-hero [hidden],.ai-sit [hidden],.wb-sp [hidden]{display:none !important;}

:root{
  /* the mono label and the caption were 9.6px and 14.7px, which is
     where "extremely tiny supporting text" comes from */
  --cx-lb:.72rem;
  --cx-cap:.95rem;

  /* this page's display ladder. Three steps, used deliberately:
     d1 is the hero and nothing else, d2 opens a major movement,
     d3 titles a panel inside one. */
  --wb-d1:clamp(2.15rem,4.5vw,4rem);
  --wb-d2:clamp(1.9rem,3.3vw,2.9rem);
  --wb-d3:clamp(1.3rem,1.9vw,1.72rem);

  --wb-live:#2E8FFF;          /* the brand blue the built thing wears */
  --wb-wire:rgba(146,166,194,.16);
  --wb-line:rgba(168,210,236,.13);
}

/* shared furniture -------------------------------------------- */
.wb-in{max-width:var(--maxw);margin-inline:auto;}
.wb-t2{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:var(--wb-d2);line-height:1.04;letter-spacing:-.042em;
  color:var(--cx-ink);text-wrap:balance;
}
.wb-t3{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:var(--wb-d3);line-height:1.14;letter-spacing:-.03em;
  color:#EFF4FE;
}
/* the marker that replaced every stray hyphen on this page */
.wb-mk{
  position:absolute;left:0;width:7px;height:7px;
  background:color-mix(in srgb,var(--accent) 55%,transparent);
  transition:background .45s var(--ease-out), transform .45s var(--ease-out);
}
.wb-hud{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(126,142,169,.92);
}

/* ============================================================
   1. THE HERO — an environment, not a mockup on a page

   A website is not one surface. It is a stack: data underneath,
   content on top of that, the interface people actually touch,
   and now an intelligence layer sitting in front of all of it,
   answering and capturing while the rest holds still.

   So the hero is that stack, built in depth and pulled apart by
   the pointer. Events fire on the data plane, a cursor works the
   interface plane, and the assistant in front takes a question
   and turns it into an enquiry. Four planes, one argument:
   website, intelligence, conversion.
   ============================================================ */
.ai-hero{
  position:relative;overflow:clip;
  padding-inline:var(--gut);
  padding-block:clamp(88px,12vh,140px) clamp(38px,5.4vh,64px);
  background:
    radial-gradient(84% 76% at 84% 4%, rgba(6,44,199,.28), transparent 62%),
    radial-gradient(58% 60% at 6% 92%, rgba(8,58,138,.16), transparent 66%),
    linear-gradient(180deg,#04060B,#070B14 56%,#04060B);
}
/* the field the stack floats in */
.ai-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(168,210,236,.07) 1px,transparent 1px),
    linear-gradient(180deg,rgba(168,210,236,.07) 1px,transparent 1px);
  background-size:clamp(46px,5vw,72px) clamp(46px,5vw,72px);
  -webkit-mask-image:radial-gradient(70% 76% at 72% 44%,#000,transparent 78%);
          mask-image:radial-gradient(70% 76% at 72% 44%,#000,transparent 78%);
}

.ai-hero__in{
  position:relative;max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(34px,4vw,70px);align-items:center;
}
@media (min-width:1060px){
  .ai-hero__in{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);}
}
.ai-hero__art{min-width:0;}

.ai-h1{
  margin:0;max-width:15ch;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.3rem,4.9vw,4.1rem);line-height:1.0;letter-spacing:-.052em;
  color:var(--cx-ink);text-wrap:balance;
}
.ai-say{
  margin:clamp(20px,3vh,28px) 0 0;max-width:46ch;
  font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.66;color:rgba(184,197,218,.96);
}
.ai-say strong{color:#EEF4FF;font-weight:600;}
.ai-act{display:flex;flex-wrap:wrap;gap:13px 16px;align-items:center;
  margin-top:clamp(24px,3.6vh,34px);}

/* ---- the stack ----------------------------------------------- */
.ai-stage{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(12px,1.8vw,26px);align-items:center;
}
@media (max-width:560px){.ai-stage{grid-template-columns:minmax(0,1fr);}}

/* the key names the planes, and lights when its plane fires */
.ai-key{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:clamp(20px,3.4vh,38px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
@media (max-width:560px){
  .ai-key{flex-direction:row;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px;}
}
.ai-key li{
  position:relative;padding-left:20px;
  color:rgba(120,136,164,.85);
  transition:color .5s var(--ease-out);
}
.ai-key li::before{
  content:"";position:absolute;left:0;top:.28em;
  width:8px;height:8px;border-radius:50%;
  background:#05070D;border:1px solid rgba(132,150,180,.55);
  transition:background .45s var(--ease-out), border-color .45s var(--ease-out),
             box-shadow .45s var(--ease-out);
}
.ai-key li.is-hot{color:#EDF4FF;}
.ai-key li.is-hot::before{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),
             0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
}

.ai-planes{
  position:relative;width:100%;aspect-ratio:4/3;
  perspective:1500px;
}
@media (max-width:560px){.ai-planes{max-width:none;aspect-ratio:1/1;}}
.ai-planes__in{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--px,9deg)) rotateY(var(--py,-15deg));
  transition:transform .7s var(--ease-out);
}
.ai-pl{
  position:absolute;inset:8% 12% 12% 14%;
  border:1px solid rgba(168,210,236,.16);
  background:linear-gradient(168deg,rgba(9,14,25,.62),rgba(4,6,11,.4));
  backdrop-filter:blur(1px);
  transform:translateZ(var(--z,0)) translate(var(--dx,0),var(--dy,0));
  transform-style:preserve-3d;
  box-shadow:0 26px 60px -40px rgba(3,20,60,.9);
}
.ai-pl--data{--z:-118px;--dx:-15%;--dy:13%;
  border-color:color-mix(in srgb,var(--accent) 22%,transparent);}
.ai-pl--content{--z:-58px;--dx:-7.5%;--dy:6.5%;}
.ai-pl--ui{--z:0px;background:linear-gradient(168deg,#080D18,#05070D 66%);}
.ai-pl--ai{--z:82px;--dx:4%;--dy:-9%;
  inset:auto 0 6% auto;width:57%;height:auto;
  border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background:linear-gradient(160deg,rgba(11,18,32,.97),rgba(5,8,15,.95));
  box-shadow:0 34px 70px -34px rgba(3,20,60,1);
}

/* the data plane: events, rising and fading */
.ai-ev{position:absolute;inset:0;overflow:visible;}
.ai-ev b{
  position:absolute;left:-26%;white-space:nowrap;
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:rgba(6,11,20,.8);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.54rem;font-weight:700;letter-spacing:.08em;
  color:color-mix(in srgb,var(--accent) 72%,#fff);
  opacity:0;
}
html.js .ai-hero.is-in .ai-ev b{animation:aiEv 6.4s linear infinite;}
.ai-ev b:nth-child(1){animation-delay:0s;}
.ai-ev b:nth-child(2){animation-delay:1.6s;left:-28%;}
.ai-ev b:nth-child(3){animation-delay:3.2s;left:-25%;}
.ai-ev b:nth-child(4){animation-delay:4.8s;left:-27%;}
@keyframes aiEv{
  0%{top:96%;opacity:0;} 12%{opacity:1;}
  72%{opacity:1;} 100%{top:2%;opacity:0;}
}

/* the content plane: the page as structure */
.ai-wire{position:absolute;inset:11% 9%;display:grid;
  grid-template-rows:auto auto 1fr;gap:7%;}
.ai-wire i{display:block;background:rgba(150,172,200,.12);}
.ai-wire i:nth-child(1){height:12px;}
.ai-wire i:nth-child(2){height:9px;width:62%;}
.ai-wire span{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;}
.ai-wire span i{height:100%;}

/* the interface plane: the page people actually touch */
.ai-ui{position:absolute;inset:9% 8%;display:grid;
  grid-template-rows:auto 1fr auto;gap:clamp(8px,1.6vh,14px);}
.ai-ui__nav{display:flex;align-items:center;gap:7px;
  padding-bottom:7px;border-bottom:1px solid rgba(168,210,236,.12);}
.ai-ui__nav i{flex:none;width:17px;height:7px;background:var(--accent);}
.ai-ui__nav u{flex:none;width:clamp(16px,2.4vw,26px);height:5px;
  background:rgba(150,172,200,.2);}
.ai-ui__nav b{margin-left:auto;padding:4px 9px;background:var(--accent);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.56rem;font-weight:700;letter-spacing:.1em;color:#04060B;}
.ai-ui__body{display:grid;align-content:center;gap:9px;}
.ai-ui__body i{display:block;height:9px;background:rgba(190,215,245,.24);}
.ai-ui__body i:nth-child(1){width:74%;
  background:linear-gradient(90deg,#EAF2FE,rgba(168,200,236,.24));}
.ai-ui__body i:nth-child(2){width:50%;}
.ai-ui__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px;}
.ai-ui__cards u{display:block;min-height:clamp(26px,5vh,46px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,transparent),rgba(8,12,21,.3));
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out);}
.ai-ui__cta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--accent) 44%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 80%);
  transition:background .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.ai-ui__cta i{flex:1;height:6px;background:rgba(150,172,200,.2);}
.ai-ui__cta b{flex:none;padding:4px 10px;background:var(--accent);color:#04060B;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.56rem;font-weight:700;letter-spacing:.1em;}
.ai-stage.s3 .ai-ui__cta{
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 34%,transparent),transparent 76%);
  box-shadow:0 0 26px -6px color-mix(in srgb,var(--accent) 70%,transparent);
}

/* the visitor's cursor, working the interface plane */
.ai-cur{
  position:absolute;left:58%;top:40%;width:13px;height:18px;z-index:3;
  background:#FFFFFF;
  clip-path:polygon(0 0,0 100%,29% 73%,50% 100%,68% 88%,46% 62%,100% 55%);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.9));
  transition:left .9s var(--ease-out), top .9s var(--ease-out), scale .25s var(--ease-out);
}
.ai-stage.s1 .ai-cur{left:74%;top:70%;}
.ai-stage.s2 .ai-cur{left:70%;top:64%;}
.ai-stage.s3 .ai-cur{left:52%;top:84%;scale:.86;}

/* the intelligence plane */
.ai-bot{padding:clamp(11px,1.5vw,15px);}
.ai-bot__top{
  display:flex;align-items:center;gap:8px;margin-bottom:9px;
  padding-bottom:8px;border-bottom:1px solid rgba(168,210,236,.14);
}
.ai-bot__dot{
  flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 80%,transparent);
}
.ai-bot__top b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(190,206,230,.96);
}
.ai-msg{display:grid;gap:6px;}
.ai-msg span{
  display:none;padding:7px 10px;border-radius:9px;
  font-size:.76rem;line-height:1.4;color:#E8F0FC;
}
.ai-msg .m-in{background:rgba(23,32,48,.96);border:1px solid rgba(168,210,236,.1);
  justify-self:start;border-bottom-left-radius:3px;}
.ai-msg .m-out{
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 26%,#0B2036),
    color-mix(in srgb,var(--accent) 12%,#0A1728));
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  justify-self:end;border-bottom-right-radius:3px;
}
.ai-msg .m-cap{
  display:none;align-items:center;gap:7px;justify-self:start;
  padding:6px 10px;border-radius:9px;
  border:1px solid color-mix(in srgb,#4ADE9B 42%,transparent);
  background:rgba(6,20,15,.94);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#9BEFC8;
}
.ai-msg .m-cap::before{content:"";width:5px;height:5px;border-radius:50%;
  background:#4ADE9B;box-shadow:0 0 9px #4ADE9B;}
/* each state reveals one more line of the exchange */
.ai-stage.s0 .ai-msg .m-idle,
.ai-stage.s1 .ai-msg .m-q,
.ai-stage.s2 .ai-msg .m-q,
.ai-stage.s2 .ai-msg .m-a,
.ai-stage.s3 .ai-msg .m-q,
.ai-stage.s3 .ai-msg .m-a{display:block;animation:aiPop .45s var(--ease-out) backwards;}
.ai-stage.s3 .ai-msg .m-cap{display:flex;animation:aiPop .45s var(--ease-out) backwards;}
@keyframes aiPop{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

.ai-note{
  display:flex;justify-content:space-between;gap:14px;
  margin:clamp(18px,2.6vh,26px) 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(124,140,167,.92);
}
@media (max-width:560px){.ai-note{flex-direction:column;gap:6px;}}
/* the hint is an instruction for a pointer: on touch there is
   nothing to move and it reads as a broken promise */
.ai-note::after{
  content:"Move across it";
  color:color-mix(in srgb,var(--accent) 76%,#fff);font-weight:700;
}
@media (hover:none){.ai-note::after{display:none;}}

/* the facts strip */
.ai-facts{
  position:relative;max-width:var(--maxw);margin:clamp(40px,6vh,72px) auto 0;
  display:grid;gap:1px;background:rgba(168,210,236,.12);
  border-block:1px solid rgba(168,210,236,.12);
}
@media (min-width:480px){.ai-facts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:900px){.ai-facts{grid-template-columns:repeat(4,minmax(0,1fr));}}
.ai-facts > div{background:#04060B;padding:clamp(15px,1.9vw,21px) clamp(14px,1.7vw,19px);
  transition:background .5s var(--ease-out);}
.ai-facts > div:hover{background:color-mix(in srgb,var(--accent) 8%,#04060B);}
.ai-facts dt{margin-bottom:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(124,140,167,.92);}
.ai-facts dd{margin:0;font-size:var(--cx-cap);line-height:1.54;color:rgba(200,212,232,.96);}

/* ============================================================
   2. THE SITUATIONS — four stories, told in interfaces

   This one section replaced three: who it is for, the before and
   after split, and the eight decisions band. All three were
   making the same argument in prose, so they became one
   filmstrip in which four sites fix themselves as you scroll
   past them: what it looks like now, what the intelligence layer
   adds, and what comes out the other side.
   ============================================================ */
.ai-sit{
  position:relative;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(6,44,199,.17), transparent 68%),
    linear-gradient(180deg,#04060B,#080C16 42%,#04060B);
  border-block:1px solid var(--wb-line);
}
html.js .ai-sit{min-height:calc(100svh + 3 * 58svh);}
.ai-sit__pin{padding-block:clamp(60px,9vh,110px);overflow:clip;}
html.js .ai-sit__pin{
  position:sticky;top:0;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(80px,11vh,112px) clamp(34px,5vh,60px);
}
.ai-sit__hd{
  max-width:var(--maxw);width:100%;margin:0 auto clamp(20px,3vh,32px);
  padding-inline:var(--gut);
  display:grid;gap:clamp(12px,2.2vw,44px);align-items:end;
}
@media (min-width:920px){.ai-sit__hd{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.ai-sit__hd .cx-bd{max-width:46ch;}

.ai-sit__rail{
  max-width:var(--maxw);width:100%;margin:0 auto clamp(16px,2.4vh,26px);
  padding-inline:var(--gut);
}
.ai-sit__rail i{display:block;height:2px;background:rgba(168,210,236,.13);position:relative;}
.ai-sit__rail i::after{
  content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent),var(--accent));
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 65%,transparent);
}

.ai-sit__vp{overflow:hidden;padding-inline:var(--gut);}
html:not(.js) .ai-sit__vp{overflow-x:auto;scroll-snap-type:x mandatory;}
.ai-sit__track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;will-change:transform;}
html.js .ai-sit__track{transform:translate3d(calc(var(--x,0) * -1px),0,0);}

.ai-st{
  flex:none;width:clamp(286px,30vw,420px);
  display:flex;flex-direction:column;gap:clamp(12px,1.8vh,18px);
  padding:clamp(18px,2vw,26px);
  border:1px solid rgba(168,210,236,.1);
  background:linear-gradient(170deg,rgba(9,13,23,.7),rgba(4,6,11,.4));
  scroll-snap-align:center;
  transition:border-color .6s var(--ease-out), background .6s var(--ease-out),
             transform .6s var(--ease-out);
}
.ai-st.is-live{
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:linear-gradient(170deg,color-mix(in srgb,var(--accent) 9%,transparent),rgba(4,6,11,.5));
  transform:translateY(-6px);
}
.ai-st__k{
  display:flex;align-items:center;gap:9px;margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(120,136,163,.9);transition:color .6s var(--ease-out);
}
.ai-st__k::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:#05070D;border:1px solid rgba(132,150,180,.6);
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out);
}
.ai-st.is-live .ai-st__k{color:color-mix(in srgb,var(--accent) 80%,#fff);}
.ai-st.is-live .ai-st__k::before{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);}
.ai-st__t{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.12rem,1.5vw,1.36rem);line-height:1.14;letter-spacing:-.03em;
  color:#EFF4FE;text-wrap:balance;
}

/* the mini site each story fixes */
.ai-mini{
  position:relative;margin-top:auto;
  border:1px solid rgba(168,210,236,.14);
  background:#05070D;overflow:hidden;
}
.ai-mini__bar{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-bottom:1px solid rgba(168,210,236,.12);
  background:linear-gradient(180deg,rgba(14,20,33,.95),rgba(8,12,21,.95));
}
.ai-mini__bar i{width:5px;height:5px;border-radius:50%;background:rgba(120,140,170,.4);}
.ai-mini__bar u{flex:1;height:8px;background:rgba(150,172,200,.1);text-decoration:none;}
.ai-mini__body{
  position:relative;height:clamp(132px,17vh,170px);padding:11px;
  display:grid;grid-template-rows:auto 1fr auto;gap:8px;
}
.ai-mini__hd{display:grid;gap:5px;}
.ai-mini__hd i{display:block;height:6px;background:rgba(150,172,200,.14);
  transition:background .7s var(--ease-out), width .7s var(--ease-out);}
.ai-mini__hd i:nth-child(1){width:72%;}
.ai-mini__hd i:nth-child(2){width:46%;}
.ai-st.b1 .ai-mini__hd i:nth-child(1){background:linear-gradient(90deg,#DCE9FB,rgba(168,200,236,.22));}
.ai-mini__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:center;}
.ai-mini__cols u{display:block;min-height:26px;
  background:rgba(150,172,200,.07);border:1px solid rgba(168,210,236,.07);
  transition:background .7s var(--ease-out), border-color .7s var(--ease-out),
             box-shadow .7s var(--ease-out);}
.ai-st.b1 .ai-mini__cols u{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 20%,transparent),rgba(8,12,21,.3));
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--accent) 70%,transparent);}
.ai-mini__foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;border:1px dashed rgba(120,140,170,.22);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(124,140,167,.85);
  transition:border-color .6s var(--ease-out), background .6s var(--ease-out),
             color .6s var(--ease-out);
}
.ai-st.b1 .ai-mini__foot{
  border:1px solid color-mix(in srgb,var(--accent) 56%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 24%,transparent),transparent 82%);
  color:#E5EFFC;
}
/* the problem marker, one per story, visible only before the fix */
.ai-mark{
  position:absolute;inset:0;pointer-events:none;
  opacity:1;transition:opacity .6s var(--ease-out);
}
.ai-st.b1 .ai-mark{opacity:0;}
.ai-mark i{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:rgba(150,172,200,.5);
}
/* leaving */
.ai-mark--leak i:nth-child(1){left:24%;top:38%;}
.ai-mark--leak i:nth-child(2){left:52%;top:52%;}
.ai-mark--leak i:nth-child(3){left:74%;top:34%;}
html.js .ai-st.is-live .ai-mark--leak i{animation:aiLeak 2.8s var(--ease-out) infinite;}
.ai-mark--leak i:nth-child(2){animation-delay:.5s;}
.ai-mark--leak i:nth-child(3){animation-delay:1s;}
@keyframes aiLeak{0%{opacity:0;transform:translateY(0);}
  22%{opacity:1;} 100%{opacity:0;transform:translateY(46px);}}
/* empty */
.ai-mark--none::after{
  content:"NOTHING HERE YET";position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.58rem;font-weight:700;letter-spacing:.16em;
  color:rgba(132,148,176,.8);
  background:rgba(5,7,13,.86);
}
/* spend pouring in */
.ai-mark--spend::after{
  content:"";position:absolute;left:50%;top:-4px;translate:-50% 0;
  width:2px;height:34%;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 60%,transparent));
}
html.js .ai-st.is-live .ai-mark--spend i{animation:aiLeak 2.4s var(--ease-out) infinite;}
.ai-mark--spend i:nth-child(1){left:38%;top:46%;}
.ai-mark--spend i:nth-child(2){left:58%;top:52%;animation-delay:.6s;}
.ai-mark--spend i:nth-child(3){left:48%;top:40%;animation-delay:1.2s;}
/* competing */
.ai-mark--clash i{
  width:auto;height:auto;border-radius:0;left:14%;right:36%;top:32%;bottom:30%;
  background:rgba(150,172,200,.14);border:1px solid rgba(168,210,236,.14);
}
.ai-mark--clash i:nth-child(2){left:28%;right:22%;top:40%;bottom:22%;}
.ai-mark--clash i:nth-child(3){left:42%;right:10%;top:26%;bottom:36%;}

.ai-st__out{
  display:flex;align-items:center;gap:9px;margin:0;
  font-size:var(--cx-cap);line-height:1.5;color:rgba(174,188,210,.95);
  opacity:.45;transition:opacity .6s var(--ease-out), color .6s var(--ease-out);
}
.ai-st__out::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:rgba(130,146,174,.6);
  transition:background .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.ai-st.b1 .ai-st__out{opacity:1;color:#E9F1FD;}
.ai-st.b1 .ai-st__out::before{background:#4ADE9B;box-shadow:0 0 12px rgba(74,222,155,.8);}

/* ============================================================
   6. THE CONSTRUCTION — a carousel, and a site building itself

   Six stages as a slider rather than a scroll-pinned sequence:
   the visitor drives it, so the section costs nothing to skip and
   rewards anyone who plays with it. The window above is the same
   page being built, and it takes its state from the live slide —
   one shared window rather than six copies of one.

   Every element is DOM rather than canvas, so the type stays
   crisp and a screen reader still gets a plain list of stages.
   ============================================================ */
.bs{
  position:relative;padding:clamp(70px,10vh,128px) var(--gut);
  background:
    radial-gradient(64% 84% at 50% 0%, rgba(6,44,199,.17), transparent 68%),
    linear-gradient(180deg,#04060B,#070B14 42%,#04060B);
  border-bottom:1px solid var(--wb-line);
  overflow:clip;
}
.bs__in{max-width:var(--maxw);margin-inline:auto;}

.bs__hd{
  display:grid;gap:clamp(14px,2.4vw,40px);align-items:end;
  margin-bottom:clamp(26px,4vh,44px);
}
@media (min-width:860px){.bs__hd{grid-template-columns:minmax(0,1fr) auto;}}

/* prev and next sit with the heading, where a hand already is */
.bs__ctl{display:flex;gap:9px;align-items:center;}
.bs__b{
  width:clamp(42px,3.4vw,48px);aspect-ratio:1;flex:none;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(168,210,236,.18);background:rgba(255,255,255,.03);
  color:rgba(196,212,236,.9);
  transition:border-color .4s var(--ease-out), background .4s var(--ease-out),
             color .4s var(--ease-out), transform .4s var(--ease-out);
}
.bs__b svg{width:17px;height:17px;}
.bs__b:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--accent) 52%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:#F4F9FF;transform:translateY(-2px);
}
.bs__b:disabled{opacity:.34;cursor:default;}

/* the window the slides drive */
.bs__win{margin-bottom:clamp(20px,3vh,32px);}

/* the deck */
.bs__vp{overflow:hidden;margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);}
.bs__track{
  margin:0;padding:0;list-style:none;
  display:flex;gap:clamp(12px,1.4vw,20px);
  will-change:transform;touch-action:pan-y;
}
html.js .bs__track{
  transform:translate3d(calc(var(--x,0) * -1px),0,0);
  transition:transform .62s var(--ease-out);
}
html.js .bs__track.is-drag{transition:none;cursor:grabbing;}
html:not(.js) .bs__vp{overflow-x:auto;scroll-snap-type:x mandatory;}

.bs__s{
  flex:none;width:clamp(232px,25vw,318px);
  padding:clamp(16px,1.9vw,24px);
  border:1px solid rgba(168,210,236,.11);
  background:rgba(255,255,255,.018);
  scroll-snap-align:start;
  opacity:.48;
  transition:opacity .55s var(--ease-out), border-color .55s var(--ease-out),
             background .55s var(--ease-out), transform .55s var(--ease-out);
}
.bs__s.is-live{
  opacity:1;
  border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background:linear-gradient(158deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 76%);
  box-shadow:0 0 44px -18px color-mix(in srgb,var(--accent) 80%,transparent);
}
.bs__s.is-done{opacity:.72;}
.bs__k{
  display:flex;align-items:center;gap:9px;margin-bottom:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(126,142,169,.9);
  transition:color .5s var(--ease-out);
}
.bs__s.is-live .bs__k{color:color-mix(in srgb,var(--accent) 82%,#fff);}
.bs__k i{
  width:7px;height:7px;border-radius:99px;flex:none;
  background:transparent;border:1px solid rgba(120,136,162,.6);
  transition:width .5s var(--ease-out), background .5s var(--ease-out),
             border-color .5s var(--ease-out);
}
.bs__s.is-done .bs__k i{background:color-mix(in srgb,var(--accent) 60%,transparent);
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);}
.bs__s.is-live .bs__k i{width:20px;background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);}
.bs__s h3{
  margin:0 0 8px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.24rem,1.7vw,1.5rem);line-height:1.06;letter-spacing:-.036em;
  color:var(--cx-ink);
}
.bs__s p{margin:0;font-size:var(--cx-cap);line-height:1.58;
  color:rgba(178,192,214,.96);}

/* the rail doubles as the position readout and as the way back */
.bs__rail{
  margin-top:clamp(18px,2.6vh,26px);
  display:flex;gap:7px;align-items:center;
}
.bs__d{
  flex:1;height:2px;padding:0;border:0;cursor:pointer;
  background:rgba(168,210,236,.14);
  transition:background .45s var(--ease-out), box-shadow .45s var(--ease-out);
  /* the bar is 2px tall by design; the thing a finger has to hit is not */
  position:relative;
}
.bs__d::after{
  content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px;
}
.bs__d:hover{background:rgba(168,210,236,.34);}
.bs__d[aria-current="true"]{
  background:var(--accent);
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
}
.bs__d.is-done{background:color-mix(in srgb,var(--accent) 42%,transparent);}

@media (max-width:640px){
  .bs__s{width:clamp(214px,76vw,268px);}
}

/* the window the site is built in */
.bd__win{
  position:relative;
  border:1px solid rgba(168,210,236,.22);
  background:#05070D;
  box-shadow:0 36px 110px -50px rgba(3,20,60,.95);
}
.bd__bar{
  display:flex;align-items:center;gap:10px;
  padding:9px clamp(11px,1.3vw,16px);
  border-bottom:1px solid rgba(168,210,236,.16);
  background:linear-gradient(180deg,rgba(14,20,33,.95),rgba(8,12,21,.95));
}
.bd__dots{display:flex;gap:5px;flex:none;}
.bd__dots i{width:7px;height:7px;border-radius:50%;background:rgba(120,140,170,.4);}
.bd__addr{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  padding:4px 10px;border:1px solid rgba(168,210,236,.12);background:rgba(4,7,13,.7);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);letter-spacing:.12em;color:rgba(132,148,176,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bd__lock{
  flex:none;width:8px;height:8px;border-radius:1px;
  background:rgba(120,140,170,.35);transition:background .6s var(--ease-out);
}
.bd__win.n5 .bd__lock{background:#4ADE9B;box-shadow:0 0 10px rgba(74,222,155,.7);}
.bd__win.n5 .bd__addr{color:rgba(196,212,236,.95);}

/* shorter than it was when the section was pinned: the carousel
   sits under it now, so the window shares the viewport */
.bd__body{position:relative;height:clamp(262px,38vh,382px);overflow:hidden;
  padding:clamp(14px,2vw,24px);}
@media (max-width:1019px){.bd__body{height:clamp(248px,40vh,330px);}}

/* ---- stage one: the questions ------------------------------- */
.bd__notes{position:absolute;inset:clamp(14px,2vw,24px);
  display:flex;flex-direction:column;justify-content:center;gap:11px;
  opacity:0;transition:opacity .6s var(--ease-out);}
.bd__win:not(.n1) .bd__notes{opacity:1;}
.bd__notes span{
  align-self:flex-start;max-width:86%;
  padding:9px 14px;
  border:1px solid rgba(168,210,236,.18);
  background:linear-gradient(140deg,rgba(14,20,33,.9),rgba(8,12,21,.7));
  font-size:var(--cx-cap);line-height:1.4;color:rgba(196,210,232,.95);
}
.bd__notes span:nth-child(2){align-self:flex-end;}
.bd__notes span:nth-child(3){align-self:center;}
html.js .bd__win:not(.n1) .bd__notes span{
  animation:bdNote .7s var(--ease-out) backwards;
  animation-delay:calc(var(--si,0) * .14s);
}
@keyframes bdNote{from{opacity:0;transform:translateY(12px) rotate(-.6deg);}to{opacity:1;transform:none;}}

/* ---- the sitemap, drawn at architect and then retired -------- */
.bd__tree{
  position:absolute;left:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);
  display:flex;flex-direction:column;gap:6px;
  opacity:0;transition:opacity .6s var(--ease-out);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);letter-spacing:.1em;text-transform:uppercase;
}
.bd__win.n1:not(.n2) .bd__tree{opacity:1;}
.bd__tree b{color:color-mix(in srgb,var(--accent) 80%,#fff);}
.bd__tree span{padding-left:16px;position:relative;color:rgba(150,166,192,.9);}
.bd__tree span::before{content:"";position:absolute;left:4px;top:.5em;
  width:8px;height:1px;background:rgba(120,136,162,.6);}

/* ---- the page itself ---------------------------------------- */
.bd__page{
  position:absolute;inset:clamp(14px,2vw,24px);
  display:grid;grid-template-rows:auto 1fr auto;gap:clamp(9px,1.4vh,15px);
  opacity:0;transition:opacity .6s var(--ease-out), width .8s var(--ease-out);
}
.bd__win.n1 .bd__page{opacity:1;}
/* every surface starts as a wireframe grey and takes the brand at design */
.bd__nav{display:flex;align-items:center;gap:clamp(7px,1vw,14px);
  padding-bottom:9px;border-bottom:1px solid rgba(168,210,236,.1);}
.bd__logo{flex:none;width:22px;height:9px;background:var(--wb-wire);
  transition:background .7s var(--ease-out);}
.bd__win.n2 .bd__logo{background:var(--wb-live);}
.bd__nav em{
  position:relative;width:clamp(26px,3.4vw,44px);height:6px;flex:none;
  background:var(--wb-wire);font-style:normal;
  font-size:var(--cx-lb);letter-spacing:.08em;color:transparent;
  transition:background .5s var(--ease-out), color .5s var(--ease-out),
             width .6s var(--ease-out), height .5s var(--ease-out);
}
.bd__win.n3 .bd__nav em{
  width:auto;height:auto;background:none;color:rgba(194,208,230,.95);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.bd__navcta{
  margin-left:auto;flex:none;padding:5px 11px;
  background:var(--wb-wire);color:transparent;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.1em;
  transition:background .6s var(--ease-out), color .6s var(--ease-out);
}
.bd__win.n2 .bd__navcta{background:color-mix(in srgb,var(--wb-live) 45%,transparent);}
.bd__win.n3 .bd__navcta{background:var(--wb-live);color:#F2F8FF;}

.bd__hero{position:relative;display:flex;flex-direction:column;justify-content:center;gap:9px;}
.bd__ln{display:block;height:9px;background:var(--wb-wire);
  transition:opacity .5s var(--ease-out), background .7s var(--ease-out);}
.bd__ln--a{width:74%;} .bd__ln--b{width:52%;} .bd__ln--c{width:34%;}
.bd__win.n2 .bd__ln--a{background:linear-gradient(90deg,#EAF2FE,rgba(168,200,236,.24));}
.bd__win.n3 .bd__ln{opacity:0;}
.bd__ht{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;
  opacity:0;transition:opacity .6s var(--ease-out) .18s;
}
.bd__win.n3 .bd__ht{opacity:1;}
.bd__ht b{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(1rem,1.7vw,1.5rem);color:#F0F6FF;max-width:22ch;
}
.bd__ht span{font-size:var(--cx-cap);line-height:1.5;color:rgba(170,186,210,.95);max-width:34ch;}

.bd__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,13px);}
.bd__cols i{
  display:block;min-height:clamp(34px,6vh,58px);
  background:rgba(120,140,170,.06);border:1px solid rgba(168,210,236,.07);
  transition:background .7s var(--ease-out), border-color .7s var(--ease-out),
             box-shadow .7s var(--ease-out);
}
.bd__win.n2 .bd__cols i{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--wb-live) 22%,transparent),rgba(8,12,21,.34));
  border-color:color-mix(in srgb,var(--wb-live) 46%,transparent);
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--wb-live) 80%,transparent);
}
.bd__form{
  display:flex;align-items:center;gap:9px;padding:9px 11px;
  border:1px dashed rgba(120,140,170,.2);
  opacity:.35;transition:opacity .6s var(--ease-out), border-color .6s var(--ease-out),
    background .6s var(--ease-out);
}
.bd__win.n3 .bd__form{
  opacity:1;border:1px solid color-mix(in srgb,var(--wb-live) 60%,transparent);
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--wb-live) 22%,transparent),transparent 78%);
}
.bd__form i{flex:1;height:8px;background:rgba(150,172,200,.16);}
.bd__form b{
  flex:none;padding:5px 12px;background:rgba(120,140,170,.18);color:transparent;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.1em;
  transition:background .6s var(--ease-out), color .6s var(--ease-out);
}
.bd__win.n3 .bd__form b{background:var(--wb-live);color:#F4F9FF;}
.bd__chat{
  position:absolute;right:clamp(14px,2vw,24px);bottom:clamp(60px,9vh,86px);
  width:28px;height:28px;border-radius:50%;background:var(--wb-live);
  opacity:0;transform:scale(.4);
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.bd__win.n3 .bd__chat{opacity:1;transform:none;}

/* ---- optimise: the measurement arrives ---------------------- */
.bd__meters{
  position:absolute;right:clamp(14px,2vw,24px);top:clamp(46px,7vh,66px);
  width:clamp(146px,17vw,196px);
  padding:12px 13px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:rgba(5,9,17,.94);
  backdrop-filter:blur(4px);
  opacity:0;transform:translateX(12px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.bd__win.n4 .bd__meters{opacity:1;transform:none;}
.bd__win.n5 .bd__meters{opacity:0;transform:translateX(12px);}
.bd__meters > div + div{margin-top:10px;}
.bd__meters b{display:block;margin-bottom:5px;}
.bd__meters i{display:block;height:4px;background:rgba(168,210,236,.14);position:relative;}
.bd__meters i::after{
  content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);
  transition:width 1.1s var(--ease-out);
}
.bd__win.n4 .bd__meters i::after{width:calc(var(--v,.8) * 100%);}
@media (max-width:560px){.bd__meters{display:none;}}

/* ---- launch: somebody actually uses it ---------------------- */
.bd__cursor{
  position:absolute;left:50%;top:58%;width:15px;height:21px;
  opacity:0;transition:opacity .4s var(--ease-out);
  background:#FFFFFF;
  clip-path:polygon(0 0,0 100%,29% 73%,50% 100%,68% 88%,46% 62%,100% 55%);
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.9));
}
.bd__win.n5 .bd__cursor{opacity:1;animation:bdClick 4.4s var(--ease-out) infinite;}
@keyframes bdClick{
  0%{transform:translate(0,0);} 26%{transform:translate(-14%,18%);}
  36%{transform:translate(-14%,18%) scale(.86);} 44%{transform:translate(-14%,18%);}
  70%,100%{transform:translate(4%,-12%);}
}
.bd__toast{
  position:absolute;left:50%;bottom:clamp(14px,2.4vh,24px);translate:-50% 0;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;
  border:1px solid color-mix(in srgb,#4ADE9B 44%,transparent);
  background:rgba(6,20,15,.95);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#9BEFC8;white-space:nowrap;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.bd__toast::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE9B;
  box-shadow:0 0 10px #4ADE9B;}
.bd__win.n5 .bd__toast{opacity:1;transform:none;transition-delay:.85s;}

/* the window narrows to a phone while responsive is being proved */
.bd__win.is-narrow .bd__page{width:min(210px,54%);margin-inline:auto;}
.bd__win.is-narrow .bd__cols{grid-template-columns:1fr;}
.bd__win.is-narrow .bd__nav em:nth-of-type(n+3){display:none;}

/* ============================================================
   7. THE BUILD SHEET — an inspector, not a feature list

   Twenty-seven line items is a wall printed as a list and a lie
   summarised. So it is paged into five groups, and choosing one
   lights the part of a page that group is responsible for. The
   list stops being an inventory and becomes a tour.
   ============================================================ */
.wb-sp{position:relative;padding-inline:var(--gut);
  padding-block:clamp(70px,11vh,134px);
  border-bottom:1px solid var(--wb-line);}
.wb-sp__in{max-width:var(--maxw);margin-inline:auto;}
.wb-sp__hd{
  display:grid;gap:clamp(14px,2.6vw,48px);align-items:end;
  margin-bottom:clamp(28px,4.2vh,46px);
}
@media (min-width:920px){.wb-sp__hd{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}}
.wb-sp__hd .cx-bd{max-width:54ch;}

/* with the line items gone the middle column holds one sentence, so it
   rides level with the viewer instead of sitting at the top of a tall
   empty column */
.wb-sp__body{display:grid;gap:clamp(22px,2.8vw,44px);align-items:center;}
@media (min-width:1060px){
  .wb-sp__body{grid-template-columns:minmax(0,.52fr) minmax(0,.78fr) minmax(0,1.08fr);}
}
@media (min-width:700px) and (max-width:1059px){
  .wb-sp__body{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wb-sp__view{grid-column:1 / -1;}
}

.wb-sp__tabs{align-self:start;
  display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid rgba(168,210,236,.14);
}
.wb-sp__tabs::-webkit-scrollbar{display:none;}
@media (min-width:1060px){
  .wb-sp__tabs{flex-direction:column;overflow:visible;border-bottom:0;
    border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);}
}
.wb-tab{
  position:relative;flex:none;display:block;width:100%;text-align:left;
  padding:clamp(14px,2vh,19px) clamp(14px,1.5vw,20px) clamp(14px,2vh,19px) clamp(19px,2vw,26px);
  border:0;background:none;cursor:pointer;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.98rem,1.2vw,1.1rem);letter-spacing:-.026em;
  color:rgba(154,170,194,.88);
  transition:color .45s var(--ease-out), background .45s var(--ease-out);
}
@media (max-width:1059px){.wb-tab{width:auto;white-space:nowrap;}}
@media (min-width:1060px){.wb-tab{border-bottom:1px solid rgba(168,210,236,.1);}}
.wb-tab::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:rgba(120,136,162,.45);
  transition:width .45s var(--ease-out), background .45s var(--ease-out);
}
@media (max-width:1059px){
  .wb-tab::before{left:0;top:auto;bottom:0;width:100%;height:2px;background:transparent;}
}
.wb-tab:hover{color:#E6EEFA;}
.wb-tab[aria-selected="true"]{color:#F5F9FF;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 72%);}
.wb-tab[aria-selected="true"]::before{width:2px;background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent);}
@media (max-width:1059px){
  .wb-tab[aria-selected="true"]::before{width:100%;height:2px;background:var(--accent);}
}

.wb-pan{display:none;}
.wb-pan.is-on{display:block;}
.wb-pan__t{margin:0 0 9px;font-family:var(--font-display);font-weight:800;
  font-size:var(--wb-d3);line-height:1.1;letter-spacing:-.032em;color:var(--cx-ink);}
.wb-pan__s{margin:0;max-width:52ch;
  font-size:var(--cx-cap);line-height:1.66;color:rgba(174,188,210,.96);}

/* the inspector */
.wb-sp__view{align-self:center;position:sticky;top:clamp(100px,15vh,150px);}
@media (max-width:1059px){.wb-sp__view{position:static;}}
.wb-vw{
  position:relative;border:1px solid rgba(168,210,236,.2);background:#05070D;
  box-shadow:0 26px 76px -44px rgba(3,20,60,.9);
}
.wb-vw__bar{
  display:flex;align-items:center;gap:9px;padding:8px 12px;
  border-bottom:1px solid rgba(168,210,236,.16);
  background:linear-gradient(180deg,rgba(14,20,33,.95),rgba(8,12,21,.95));
  position:relative;z-index:3;
}
.wb-vw__bar i{width:6px;height:6px;border-radius:50%;background:rgba(120,140,170,.4);flex:none;}
.wb-vw__addr{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  padding:3px 9px;border:1px solid rgba(168,210,236,.12);background:rgba(4,7,13,.7);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);letter-spacing:.1em;color:rgba(132,148,176,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .5s var(--ease-out), color .5s var(--ease-out);
}
.wb-vw__addr b{flex:none;width:7px;height:7px;border-radius:1px;background:rgba(120,140,170,.4);
  transition:background .5s var(--ease-out);}
.wb-vw__body{
  position:relative;height:clamp(240px,34vh,310px);overflow:hidden;
  padding:clamp(13px,1.6vw,20px);
  display:grid;grid-template-rows:auto 1fr auto;gap:clamp(8px,1.2vh,13px);
}
.wb-vw__nav{display:flex;align-items:center;gap:8px;
  padding-bottom:8px;border-bottom:1px solid rgba(168,210,236,.1);}
.wb-vw__nav i{width:18px;height:7px;background:color-mix(in srgb,var(--wb-live) 55%,transparent);flex:none;}
.wb-vw__nav u{width:clamp(20px,2.6vw,32px);height:5px;background:var(--wb-wire);flex:none;}
.wb-vw__nav b{margin-left:auto;padding:4px 9px;background:var(--wb-live);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.08em;color:#F2F8FF;}
.wb-vw__main{display:grid;gap:9px;align-content:center;}
.wb-vw__main i{height:8px;background:rgba(190,215,245,.24);}
.wb-vw__main i:nth-child(1){width:72%;background:linear-gradient(90deg,#EAF2FE,rgba(168,200,236,.26));}
.wb-vw__main i:nth-child(2){width:50%;}
.wb-vw__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:5px;}
.wb-vw__cols u{display:block;min-height:clamp(30px,5vh,48px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--wb-live) 18%,transparent),rgba(8,12,21,.3));
  border:1px solid color-mix(in srgb,var(--wb-live) 34%,transparent);}
.wb-vw__foot{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--wb-live) 46%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--wb-live) 18%,transparent),transparent 80%);}
.wb-vw__foot i{flex:1;height:7px;background:rgba(150,172,200,.18);}
.wb-vw__foot b{flex:none;padding:4px 10px;background:var(--wb-live);color:#F4F9FF;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.08em;}

/* the five overlays, one per group */
.wb-vw.is-g2 .wb-vw__addr{border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  color:rgba(206,220,242,.98);}
.wb-vw.is-g2 .wb-vw__addr b{background:#4ADE9B;box-shadow:0 0 9px rgba(74,222,155,.75);}
.wb-ov{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease-out);}
.wb-ov.is-on{opacity:1;}
.wb-ov__box{
  position:absolute;border:1px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.wb-ov__box b{
  position:absolute;left:-1px;top:-1px;translate:0 -100%;
  padding:2px 6px;background:var(--accent);color:#04060B;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.6rem;font-weight:700;letter-spacing:.08em;
}
.wb-ov__dot{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);
}
.wb-ov.is-on .wb-ov__dot{animation:wbBeat 2.2s var(--ease-out) infinite;}
.wb-ov__dot:nth-of-type(2){animation-delay:.3s;}
.wb-ov__dot:nth-of-type(3){animation-delay:.6s;}
.wb-ov__dot:nth-of-type(4){animation-delay:.9s;}
@keyframes wbBeat{0%,60%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);}
  30%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 4%,transparent);}}
.wb-ov__rail{
  position:absolute;right:0;top:0;bottom:0;width:clamp(56px,17%,86px);
  border-left:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 12%,transparent));
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px 9px;
}
.wb-ov__rail span{display:block;height:6px;background:color-mix(in srgb,var(--accent) 40%,transparent);}
.wb-ov__rail span:nth-child(even){width:70%;}
.wb-vw__cap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px clamp(12px,1.4vw,16px);
  border-top:1px solid rgba(168,210,236,.14);
  background:rgba(4,6,11,.7);
}
.wb-vw__cap span{color:rgba(196,210,232,.95);letter-spacing:.12em;}
.wb-sp__ct{margin-top:clamp(18px,2.6vh,26px);}
.wb-sp__ct b{color:color-mix(in srgb,var(--accent) 78%,#fff);font-weight:700;}

/* ============================================================
   8. WHAT TO EXPECT — a ledger, and one honest paragraph
   ============================================================ */
.wb-xp{position:relative;padding-inline:var(--gut);
  padding-block:clamp(66px,10vh,124px);border-bottom:1px solid var(--wb-line);}
.wb-xp__in{max-width:1180px;margin-inline:auto;}
.wb-xp__hd{
  display:grid;gap:clamp(14px,2.6vw,48px);align-items:end;
  margin-bottom:clamp(28px,4.2vh,46px);
}
@media (min-width:920px){.wb-xp__hd{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}}
.wb-xp__hd .cx-bd{max-width:56ch;}
.wb-xp__set{display:grid;gap:clamp(24px,3vw,56px);}
/* two ledgers sit side by side; one spreads its own list across the
   width instead, so a single column never leaves half the section empty */
@media (min-width:820px){
  .wb-xp__set{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wb-xp__set:has(> .wb-xp__c:only-child){grid-template-columns:minmax(0,1fr);}
  .wb-xp__c:only-child ul{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(30px,3.6vw,60px);
  }
}
.wb-xp__c > b{display:block;margin-bottom:14px;
  color:color-mix(in srgb,var(--accent) 62%,#8E9EB8);}
.wb-xp__c ul{margin:0;padding:0;list-style:none;
  border-top:1px solid color-mix(in srgb,var(--accent) 28%,transparent);}
.wb-xp__c li{
  position:relative;
  padding:clamp(13px,1.8vh,17px) 0 clamp(13px,1.8vh,17px) clamp(22px,2.2vw,30px);
  border-bottom:1px solid rgba(168,210,236,.1);
  font-size:var(--cx-cap);line-height:1.62;color:rgba(182,196,218,.96);
}
.wb-xp__c li .wb-mk{top:calc(clamp(13px,1.8vh,17px) + .5em);}
.wb-xp__c li strong{color:#EDF3FF;font-weight:600;}
.wb-xp__note{
  margin-top:clamp(30px,4.4vh,50px);
  padding:clamp(22px,2.8vw,34px) clamp(20px,2.6vw,34px);
  border-left:2px solid color-mix(in srgb,var(--accent) 64%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 72%);
}
.wb-xp__note p{margin:0;max-width:74ch;font-size:var(--cx-bd);
  line-height:var(--cx-lead-bd);color:rgba(184,197,218,.96);}
.wb-xp__note p + p{margin-top:1em;}
.wb-xp__note strong{color:#F2F7FF;font-weight:600;}

/* ============================================================
   9. REDUCED MOTION
   Everything here is either scroll position or a state change,
   so the sections keep working; only the decorative loops stop.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.js .ai-hero.is-in .ai-ev b{animation:none;opacity:.7;}
  .ai-planes__in{transform:none;}
  .ai-cur{transition:none;}
  .ai-stage .ai-msg span,.ai-stage .ai-msg .m-cap{animation:none;}
  html.js .ai-st.is-live .ai-mark i{animation:none;}
  html.js .bd__s{transition:none;}
  .bd__cursor,.wb-ov.is-on .wb-ov__dot{animation:none;}
  html.js .bd__win:not(.n1) .bd__notes span{animation:none;}
}

/* ============================================================
   10. SMALL AND SHORT VIEWPORTS
   A pinned stage only works while the stage fits. Below these
   thresholds both pinned sections release and read in sequence;
   the JS notices and switches how it picks the live panel.
   ============================================================ */
@media (max-width:1019px), (max-height:760px){
  html.js .bd{min-height:0;}
  html.js .bd__pin{position:static;min-height:0;display:block;
    padding-block:clamp(60px,9vh,110px);}
  html.js .bd__txt{min-height:0;}
  html.js .bd__s{position:static;opacity:1;transform:none;pointer-events:auto;}
  html.js .bd__s + .bd__s{margin-top:clamp(30px,4.6vh,48px);}
  /* the window leads and then holds: releasing the pin must not leave
     the proof stranded underneath six stages of text nobody scrolls
     back up to see */
  html.js .bd__win{
    order:-1;position:sticky;top:clamp(72px,10vh,88px);z-index:2;
    margin-bottom:clamp(22px,3.4vh,34px);
  }
  html.js .bd__body{height:clamp(186px,28vh,252px);}
  html.js .bd__ht b{font-size:clamp(.92rem,3.4vw,1.15rem);}
  html.js .bd__notes span{padding:7px 11px;}
}
@media (max-width:880px), (max-height:640px){
  html.js .ai-sit{min-height:0;}
  html.js .ai-sit__pin{position:static;min-height:0;display:block;
    padding-block:clamp(60px,9vh,110px);}
  html.js .ai-sit__vp{overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;}
  html.js .ai-sit__track{transform:none;padding-right:var(--gut);}
  .ai-st{width:clamp(262px,80vw,330px);}
}