/* ============================================================
   AI AUTOMATION & WHATSAPP GROWTH — two surfaces, one event

   The website page's idea is that a site gets built in front of
   you. This page's idea is narrower and sharper: ONE enquiry,
   followed all the way, shown twice at once.

   On the left of every composition here, what the customer sees:
   a WhatsApp thread that answers itself. On the right, what the
   business sees: a lead panel where the same enquiry moves from
   arrived to assigned. They advance in lockstep, because that is
   literally what the product does. Nothing on this page is a
   picture of messaging; it is messaging.

   Scoped .wa-*. Loaded only on this page. Builds on the cx-* type
   scale and sits beside service.css, which still supplies the
   pillars, the ladder, the AI strip, the exclusions and the close.
   ============================================================ */

/* A guard, not a nicety. Several elements here are shown and hidden
   with the `hidden` attribute, and every one of them sets its own
   display in a class, which silently beats the user agent's
   [hidden] rule. Two components rendered every state at once before
   this line existed. */
.wa-hero [hidden],.wa-sit [hidden],.wa-ai [hidden],.wa-bd [hidden]{display:none !important;}

:root{
  /* the same two corrections the website page makes: these labels
     were running at 9.6px and reading as noise */
  --cx-lb:.72rem;
  --cx-cap:.95rem;

  /* WhatsApp's own green, used ONLY where it signifies the channel:
     delivery ticks and the WA chip. Everything else stays in the
     brand's blue, so the page reads as ours and the channel reads
     as theirs. */
  --wa-grn:#25D366;
  --wa-ink:#EAF2FD;
  --wa-dim:rgba(170,186,210,.95);
  --wa-line:rgba(168,210,236,.13);
}

/* ============================================================
   1. THE HERO — the thread and the panel, side by side

   No canvas. Every element here is real DOM: the type is crisp,
   the bubbles can be hovered, and a screen reader gets a readable
   transcript of the conversation rather than a blank rectangle.
   ============================================================ */
.wa-hero{
  position:relative;overflow:clip;
  padding-inline:var(--gut);
  padding-block:clamp(90px,13vh,150px) clamp(40px,6vh,72px);
  background:
    radial-gradient(90% 74% at 88% 8%, rgba(6,44,199,.26), transparent 62%),
    radial-gradient(60% 60% at 8% 92%, rgba(8,60,140,.16), transparent 66%),
    linear-gradient(180deg,#04060B,#070B14 56%,#04060B);
}
/* the signal field: a message grid fading toward the device, so
   the composition sits in something rather than on nothing */
.wa-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(168,210,236,.14) 1px,transparent 0);
  background-size:clamp(26px,2.6vw,38px) clamp(26px,2.6vw,38px);
  -webkit-mask-image:radial-gradient(64% 72% at 74% 40%,#000,transparent 76%);
          mask-image:radial-gradient(64% 72% at 74% 40%,#000,transparent 76%);
  opacity:.7;
}
/* three rings leaving the device, the way a signal does */
.wa-hero__rings{
  position:absolute;right:20%;top:38%;width:min(52vw,760px);aspect-ratio:1;
  translate:50% -50%;pointer-events:none;
}
.wa-hero__rings i{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  opacity:0;
}
html.js .wa-hero.is-in .wa-hero__rings i{animation:waRing 7s var(--ease-out) infinite;}
.wa-hero__rings i:nth-child(2){animation-delay:2.3s;}
.wa-hero__rings i:nth-child(3){animation-delay:4.6s;}
@keyframes waRing{
  0%{transform:scale(.24);opacity:0;}
  16%{opacity:.5;}
  100%{transform:scale(1);opacity:0;}
}
@media (max-width:900px){.wa-hero__rings{display:none;}}

.wa-hero__in{
  position:relative;max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(34px,4vw,72px);align-items:center;
}
@media (min-width:1040px){
  .wa-hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);}
}

.wa-h1{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.1rem,4.3vw,3.5rem);line-height:1.02;letter-spacing:-.048em;
  color:var(--cx-ink);text-wrap:balance;
}
.wa-say{
  margin:clamp(20px,3vh,28px) 0 0;max-width:54ch;
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(178,192,214,.96);
}
.wa-say strong{color:#EDF3FF;font-weight:600;}
.wa-say + .wa-say{margin-top:1em;}
.wa-act{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;
  margin-top:clamp(26px,4vh,38px);}

/* ---- the device stack ---------------------------------------- */
.wa-stack{
  position:relative;
  display:grid;justify-items:center;
  padding-block:clamp(10px,2vh,24px);
  perspective:1400px;
}
@media (min-width:640px){
  .wa-stack{justify-items:start;padding-left:clamp(0px,4vw,60px);}
}
.wa-stack__in{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .6s var(--ease-out);
}

/* the phone */
.wa-ph{
  position:relative;z-index:2;
  width:clamp(266px,25vw,318px);
  border:1px solid rgba(168,210,236,.22);
  border-radius:22px;overflow:hidden;
  background:linear-gradient(172deg,#0A1120,#05070D 62%);
  box-shadow:0 44px 100px -46px rgba(3,20,60,.95),
             0 0 0 6px rgba(8,12,21,.7);
}
.wa-ph__top{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;
  border-bottom:1px solid rgba(168,210,236,.12);
  background:linear-gradient(180deg,rgba(16,24,40,.96),rgba(9,14,24,.96));
}
.wa-ph__av{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(140deg,var(--accent),#062CC7);
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.76rem;color:#04060B;
}
.wa-ph__id{display:grid;gap:1px;min-width:0;}
.wa-ph__id b{font-family:var(--font-display);font-weight:700;font-size:.86rem;
  letter-spacing:-.018em;color:var(--wa-ink);}
.wa-ph__id em{font-style:normal;font-size:.72rem;letter-spacing:.04em;
  color:color-mix(in srgb,var(--wa-grn) 62%,#9FB2CC);}
.wa-ph__sig{
  margin-left:auto;flex:none;display:flex;align-items:flex-end;gap:2px;height:11px;
}
.wa-ph__sig::before,.wa-ph__sig::after{
  content:"";width:3px;background:color-mix(in srgb,var(--wa-grn) 70%,transparent);
}
.wa-ph__sig::before{height:6px;}
.wa-ph__sig::after{height:11px;}

/* a real thread scrolls rather than starting empty, so the oldest
   message fades out at the top instead of being chopped */
.wa-ph__thread{
  display:flex;flex-direction:column;gap:8px;
  padding:16px 13px;
  height:clamp(300px,35vh,356px);
  overflow:hidden;justify-content:flex-end;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%);
          mask-image:linear-gradient(180deg,transparent 0,#000 13%);
}
.wa-b{
  position:relative;max-width:84%;
  padding:9px 12px;
  font-size:.83rem;line-height:1.45;color:var(--wa-ink);
  border-radius:12px;
  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.wa-b.is-on{opacity:1;transform:none;}
.wa-b--in{
  align-self:flex-start;border-bottom-left-radius:4px;
  background:rgba(23,32,48,.96);
  border:1px solid rgba(168,210,236,.1);
}
.wa-b--out{
  align-self:flex-end;border-bottom-right-radius:4px;
  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);
}
.wa-b__t{
  display:block;margin-top:5px;text-align:right;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.56rem;letter-spacing:.1em;color:rgba(160,178,204,.75);
}
/* the double tick, the one piece of WhatsApp's own language worth
   borrowing: it says delivered and read without a caption */
.wa-tick{
  display:inline-block;width:13px;height:7px;margin-left:6px;
  position:relative;vertical-align:middle;
}
.wa-tick::before,.wa-tick::after{
  content:"";position:absolute;top:0;width:6px;height:3px;
  border-left:1.4px solid var(--wa-grn);border-bottom:1.4px solid var(--wa-grn);
  transform:rotate(-45deg);
}
.wa-tick::before{left:0;}
.wa-tick::after{left:4px;}

/* the typing indicator */
.wa-b--typ{padding:11px 13px;}
.wa-b--typ i{
  display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:3px;
  background:rgba(184,200,224,.7);
}
.wa-b--typ.is-on i{animation:waTyp 1.1s var(--ease-out) infinite;}
.wa-b--typ i:nth-child(2){animation-delay:.16s;}
.wa-b--typ i:nth-child(3){animation-delay:.32s;}
@keyframes waTyp{0%,60%,100%{opacity:.35;transform:translateY(0);}
  30%{opacity:1;transform:translateY(-3px);}}

/* the quick replies, which are how a real WhatsApp flow qualifies */
.wa-chips{
  display:flex;flex-wrap:wrap;gap:6px;align-self:flex-end;justify-content:flex-end;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease-out), transform .5s var(--ease-out);
}
.wa-chips.is-on{opacity:1;transform:none;}
.wa-chips b{
  padding:6px 11px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  font-size:.74rem;font-weight:600;color:color-mix(in srgb,var(--accent) 60%,#fff);
  transition:background .35s var(--ease-out), color .35s var(--ease-out);
}
.wa-chips b.is-pick{background:var(--accent);color:#04060B;}

.wa-ph__bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border-top:1px solid rgba(168,210,236,.12);
  background:rgba(9,14,24,.96);
}
.wa-ph__bar span{
  flex:1;padding:7px 12px;border-radius:999px;
  background:rgba(22,31,46,.9);
  font-size:.76rem;color:rgba(140,157,184,.85);
}
.wa-ph__bar i{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb,var(--wa-grn) 82%,transparent);
  display:grid;place-items:center;
}
.wa-ph__bar i::before{
  content:"";width:0;height:0;margin-left:2px;
  border-block:5px solid transparent;border-left:8px solid #04140B;
}

/* the panel, overlapping the phone with real depth */
.wa-card{
  position:relative;z-index:3;
  width:min(370px,86vw);
  margin-top:-56px;margin-left:clamp(56px,13vw,150px);
  padding:15px 16px 17px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:linear-gradient(168deg,rgba(9,16,29,.97),rgba(5,8,15,.97));
  box-shadow:0 34px 80px -40px rgba(3,20,60,.98);
  transform:translateZ(60px);
}
@media (max-width:639px){
  .wa-card{margin-left:0;margin-top:-40px;width:min(330px,94vw);align-self:center;}
}
.wa-card__h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;
  padding-bottom:10px;border-bottom:1px solid rgba(168,210,236,.13);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.wa-card__h b{color:rgba(196,211,234,.98);}
.wa-card__h em{font-style:normal;color:color-mix(in srgb,var(--accent) 74%,#fff);}
.wa-card__row{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.wa-chip{
  flex:none;padding:4px 9px;border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
}
.wa-chip--wa{
  background:color-mix(in srgb,var(--wa-grn) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--wa-grn) 52%,transparent);
  color:color-mix(in srgb,var(--wa-grn) 70%,#EAFBF1);
}
.wa-card__src{flex:1;min-width:0;font-size:.84rem;color:rgba(196,210,232,.96);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-card__st{
  flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 78%,#fff);
  transition:color .4s var(--ease-out);
}
.wa-card__st.is-hit{animation:waHit .9s var(--ease-out);}
@keyframes waHit{0%{color:#fff;text-shadow:0 0 14px var(--accent);}100%{}}

/* the five-stage track: dots joined by a dotted rail, filling */
.wa-track{
  position:relative;display:grid;grid-template-columns:repeat(5,1fr);
  margin:0;padding:0;list-style:none;
}
.wa-track::before{
  content:"";position:absolute;left:6%;right:6%;top:5px;height:1px;
  background-image:linear-gradient(90deg,rgba(168,210,236,.42) 0 3px,transparent 3px 7px);
  background-size:7px 1px;
}
.wa-track::after{
  content:"";position:absolute;left:6%;top:5px;height:1px;
  width:calc((88% / 4) * var(--at,0));
  background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 80%,transparent);
  transition:width .7s var(--ease-out);
}
.wa-track li{
  position:relative;padding-top:15px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(124,140,167,.85);text-align:center;
  transition:color .45s var(--ease-out);
}
.wa-track li::before{
  content:"";position:absolute;left:50%;top:2px;translate:-50% 0;
  width:7px;height:7px;border-radius:50%;
  background:#05070D;border:1px solid rgba(140,158,186,.55);
  transition:background .45s var(--ease-out), border-color .45s var(--ease-out),
             transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.wa-track li.is-done::before{background:color-mix(in srgb,var(--accent) 55%,transparent);
  border-color:color-mix(in srgb,var(--accent) 66%,transparent);}
.wa-track li.is-done{color:rgba(168,184,208,.95);}
.wa-track li.is-at::before{
  background:var(--accent);border-color:var(--accent);transform:translateX(-50%) scale(1.4);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),
             0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
}
.wa-track li.is-at{color:#F2F8FF;}

/* five stage names cannot clear each other inside a 330px card, and
   the status cell above already names the live one */
@media (max-width:560px){
  .wa-track li{font-size:0;line-height:0;padding-top:13px;}
}
.wa-note{
  display:flex;justify-content:space-between;gap:14px;
  margin:clamp(20px,3vh,28px) 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){
  .wa-note{flex-direction:column;gap:6px;align-items:flex-start;}
}
.wa-note b{color:color-mix(in srgb,var(--accent) 74%,#fff);font-weight:700;}

/* the facts strip, reused from the service layer but de-hyphenated */
.wa-facts{
  position:relative;max-width:var(--maxw);margin:clamp(42px,6vh,76px) 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){.wa-facts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:900px){.wa-facts{grid-template-columns:repeat(4,minmax(0,1fr));}}
.wa-facts > div{background:#04060B;padding:clamp(16px,2vw,22px) clamp(15px,1.8vw,20px);
  transition:background .5s var(--ease-out);}
.wa-facts > div:hover{background:color-mix(in srgb,var(--accent) 8%,#04060B);}
.wa-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);
}
.wa-facts dd{margin:0;font-size:var(--cx-cap);line-height:1.56;color:rgba(200,212,232,.96);}

/* ============================================================
   2. THE PROGRESS INDEX — dots on a dotted rail, not dashes

   Overrides the pillar index from service.css. A dash beside a
   word reads as punctuation; a dot on a connected rail reads as
   position in a sequence, which is what it is.
   ============================================================ */
.sv-pil__ix.wa-ix{position:relative;border-top:0;padding-left:2px;}
.sv-pil__ix.wa-ix::before{
  content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1px;
  background-image:linear-gradient(180deg,rgba(168,210,236,.4) 0 3px,transparent 3px 8px);
  background-size:1px 8px;
}
.sv-pil__ix.wa-ix li{
  border-bottom:0;
  padding:clamp(12px,1.8vh,17px) 0 clamp(12px,1.8vh,17px) clamp(26px,2.6vw,34px);
}
.sv-pil__ix.wa-ix li::before{
  content:"";position:absolute;left:0;top:calc(clamp(12px,1.8vh,17px) + .52em);
  width:11px;height:11px;border-radius:50%;
  background:#05070D;border:1px solid rgba(140,158,186,.55);
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out),
             transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.sv-pil__ix.wa-ix li::after{
  content:"";position:absolute;left:4px;top:calc(clamp(12px,1.8vh,17px) + .52em + 3px);
  width:3px;height:3px;border-radius:50%;background:transparent;
  transition:background .5s var(--ease-out);
}
.sv-pil__ix.wa-ix li.is-live::before{
  border-color:var(--accent);transform:scale(1.18);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),
             0 0 16px color-mix(in srgb,var(--accent) 60%,transparent);
}
.sv-pil__ix.wa-ix li.is-live::after{background:var(--accent);}
.sv-pil__ix.wa-ix li.is-done::before{
  background:color-mix(in srgb,var(--accent) 45%,transparent);
  border-color:color-mix(in srgb,var(--accent) 58%,transparent);
}

/* ============================================================
   3. THREE SITUATIONS — an interactive infographic

   Three text blocks became three working flows. Pick a situation
   and the same four-step system runs against it: what is
   happening, what the customer sends, what answers, where the
   lead ends up. The thread beside it is that situation's real
   exchange, so the abstraction and the evidence are on screen
   together.
   ============================================================ */
.wa-sit{
  position:relative;overflow:clip;padding-inline:var(--gut);
  padding-block:clamp(70px,11vh,138px);
  background:
    radial-gradient(70% 90% at 16% 0%, rgba(6,44,199,.17), transparent 64%),
    linear-gradient(180deg,#04060B,#070B14 48%,#04060B);
  border-block:1px solid var(--wa-line);
}
.wa-sit__in{max-width:var(--maxw);margin-inline:auto;}
/* the hue is set on the section by the switcher, so the flow, the
   markers, the outcome and the device all change character together */
.wa-sit{transition:--wa-none 0s;}
.wa-sit__hd{
  display:grid;gap:clamp(14px,2.6vw,48px);align-items:end;
  margin-bottom:clamp(26px,4vh,44px);
}
@media (min-width:920px){.wa-sit__hd{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}}
.wa-sit__hd .cx-bd{max-width:54ch;}

/* the three selectors */
/* three filled rectangles read as boxes however they are styled, so
   the selector is an editorial row on a rule, with one indicator that
   slides between them and takes that situation's own hue with it */
.wa-sit__tabs{
  position:relative;display:grid;gap:clamp(4px,2.4vw,44px);
  margin-bottom:clamp(24px,3.6vh,40px);
  border-bottom:1px solid rgba(168,210,236,.14);
}
@media (min-width:820px){.wa-sit__tabs{grid-template-columns:repeat(3,minmax(0,1fr));}}
.wa-sit__ind{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--accent);
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform .6s var(--ease-out), width .6s var(--ease-out),
             background .6s var(--ease-out);
  pointer-events:none;
}
@media (max-width:819px){.wa-sit__ind{display:none;}}
.wa-tab{
  position:relative;display:block;width:100%;text-align:left;
  padding:0 clamp(0px,1vw,10px) clamp(16px,2.4vh,22px) 0;
  border:0;background:none;cursor:pointer;
}
@media (max-width:819px){
  .wa-tab{padding:clamp(13px,2vh,17px) 0;border-bottom:1px solid rgba(168,210,236,.1);}
  .wa-sit__tabs{border-bottom:0;}
}
.wa-tab::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
@media (min-width:820px){.wa-tab::after{display:none;}}
.wa-tab[aria-selected="true"]::after{transform:scaleX(1);}
.wa-tab em{
  display:block;margin-bottom:7px;font-style:normal;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(124,140,167,.9);transition:color .45s var(--ease-out);
}
.wa-tab[aria-selected="true"] em{color:color-mix(in srgb,var(--accent) 80%,#fff);}
.wa-tab b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.24;letter-spacing:-.026em;
  color:rgba(198,212,234,.94);transition:color .45s var(--ease-out);
}
.wa-tab[aria-selected="true"] b{color:#F5F9FF;}

/* the panel: the flow, and the thread that proves it */
.wa-sit__body{display:grid;gap:clamp(26px,3.4vw,58px);align-items:start;}
@media (min-width:980px){
  .wa-sit__body{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);}
}
.wa-pan{display:none;}
.wa-pan.is-on{display:grid;gap:clamp(22px,3vh,34px);}

/* the four connected steps */
.wa-flow{
  display:grid;gap:0;
  border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}
@media (min-width:700px){.wa-flow{grid-template-columns:repeat(4,minmax(0,1fr));}}
.wa-st{
  position:relative;
  padding:clamp(18px,2.6vh,26px) clamp(14px,1.6vw,22px) clamp(18px,2.6vh,26px) 0;
  border-bottom:1px solid rgba(168,210,236,.1);
}
@media (min-width:700px){
  .wa-st{border-bottom:0;padding-right:clamp(18px,2vw,30px);}
  .wa-st + .wa-st{padding-left:clamp(14px,1.6vw,24px);}
  /* the connector: a dotted run with an arrowhead, drawn between
     steps rather than around them */
  .wa-st + .wa-st::before{
    content:"";position:absolute;left:0;top:clamp(18px,2.6vh,26px);
    width:1px;height:calc(100% - clamp(18px,2.6vh,26px) * 2);
    background-image:linear-gradient(180deg,rgba(168,210,236,.34) 0 3px,transparent 3px 8px);
    background-size:1px 8px;
  }
}
.wa-st__n{
  display:flex;align-items:center;gap:9px;margin:0 0 9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(124,140,167,.9);
}
.wa-st__n::before{
  content:"";flex:none;width:8px;height:8px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  background:#05070D;
}
.wa-pan.is-on .wa-st__n::before{
  animation:waStep .6s var(--ease-out) backwards;
  animation-delay:calc(var(--si,0) * .18s + .1s);
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);
}
@keyframes waStep{from{background:#05070D;box-shadow:none;transform:scale(.5);}to{}}
.wa-st__t{
  margin:0 0 8px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(.98rem,1.16vw,1.08rem);line-height:1.22;letter-spacing:-.026em;
  color:#EFF4FE;text-wrap:balance;
}
.wa-st__p{margin:0;font-size:var(--cx-cap);line-height:1.6;color:var(--wa-dim);}
.wa-pan.is-on .wa-st{
  animation:waRise .6s var(--ease-out) backwards;
  animation-delay:calc(var(--si,0) * .1s);
}
@keyframes waRise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* the outcome line */
.wa-out{
  display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  padding:clamp(16px,2.2vh,22px) clamp(16px,2vw,24px);
  border-left:2px solid color-mix(in srgb,var(--accent) 64%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 76%);
}
.wa-out i{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--wa-grn);
  box-shadow:0 0 12px color-mix(in srgb,var(--wa-grn) 70%,transparent);
}
.wa-out p{margin:0;font-size:var(--cx-bd);line-height:1.5;color:#E9F1FD;}

/* the situation's own thread, in a compact device */
.wa-mini{
  position:sticky;top:clamp(104px,15vh,150px);
  border:1px solid rgba(168,210,236,.2);border-radius:18px;overflow:hidden;
  background:linear-gradient(172deg,#0A1120,#05070D 62%);
  box-shadow:0 30px 74px -42px rgba(3,20,60,.95);
}
@media (max-width:979px){.wa-mini{position:static;max-width:400px;}}
.wa-mini__top{
  display:flex;align-items:center;gap:9px;padding:11px 13px;
  border-bottom:1px solid rgba(168,210,236,.12);
  background:linear-gradient(180deg,rgba(16,24,40,.96),rgba(9,14,24,.96));
}
.wa-mini__top span{
  flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--wa-grn);box-shadow:0 0 10px color-mix(in srgb,var(--wa-grn) 70%,transparent);
}
.wa-mini__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(178,194,218,.95);
}
.wa-mini__thread{
  display:flex;flex-direction:column;gap:8px;
  padding:15px 13px;min-height:clamp(148px,19vh,186px);justify-content:flex-end;
}
.wa-mini__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;border-top:1px solid rgba(168,210,236,.12);
  background:rgba(9,14,24,.9);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(124,140,167,.9);
}
.wa-mini__foot b{color:color-mix(in srgb,var(--accent) 76%,#fff);}
/* the situation threads replay themselves whenever their panel opens,
   so switching situations is a conversation starting rather than a
   block of text swapping */
.wa-pan.is-on ~ * [data-wa-mini-thread]:not([hidden]) .wa-b,
[data-wa-mini-thread]:not([hidden]) .wa-b{
  animation:waPop .5s var(--ease-out) forwards;
  animation-delay:calc(var(--si,0) * .3s + .2s);
}
@keyframes waPop{to{opacity:1;transform:none;}}

.wa-sit__note{
  margin:clamp(30px,4.4vh,48px) 0 0;max-width:72ch;
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(174,188,210,.95);
}
.wa-sit__note a{color:color-mix(in srgb,var(--accent) 74%,#fff);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.wa-sit__note a:hover{text-decoration-color:currentColor;}


/* ============================================================
   3b. THE THREE PARTS — each one shows a working miniature

   The lists say what is included. These say what it looks like
   running, which is the half a list can never carry.
   ============================================================ */
.wa-viz{
  display:block;margin-top:clamp(18px,2.6vh,26px);
  padding:clamp(14px,1.7vw,20px);
  border:1px solid rgba(168,210,236,.12);
  background:linear-gradient(168deg,rgba(9,14,25,.7),rgba(4,6,11,.4));
}

/* automation: a rail of stages with a packet running it */
.wa-viz--flow{position:relative;}
.wa-viz--flow span{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
}
.wa-viz--flow span::before{
  content:"";position:absolute;left:8%;right:8%;top:5px;height:1px;
  background-image:linear-gradient(90deg,rgba(168,210,236,.4) 0 3px,transparent 3px 8px);
  background-size:8px 1px;
}
.wa-viz--flow span::after{
  content:"";position:absolute;top:2px;left:8%;width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 80%,transparent);
}
html.js .sv-pil.is-in .wa-viz--flow span::after{animation:waPkt 3.4s var(--ease-out) infinite;}
@keyframes waPkt{
  0%{left:8%;opacity:0;} 10%{opacity:1;}
  86%{opacity:1;} 100%{left:calc(92% - 7px);opacity:0;}
}
.wa-viz--flow b{
  position:relative;display:block;padding-top:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(150,166,192,.92);text-align:center;
}
.wa-viz--flow b::before{
  content:"";position:absolute;left:50%;top:2px;translate:-50% 0;
  width:7px;height:7px;border-radius:50%;
  background:#05070D;border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
}

/* whatsapp: the exchange itself */
.wa-viz--talk{display:flex;flex-direction:column;gap:7px;}
.wa-viz--talk .wa-b{opacity:1;transform:none;max-width:76%;font-size:.8rem;}

/* the panel: three rows, one of them live */
.wa-viz--rows{display:grid;gap:7px;}
.wa-viz--rows span{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border:1px solid rgba(168,210,236,.1);
  background:rgba(8,13,23,.6);
}
.wa-viz--rows em{
  flex:none;font-style:normal;padding:3px 7px;border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;
  background:color-mix(in srgb,var(--wa-grn) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--wa-grn) 46%,transparent);
  color:color-mix(in srgb,var(--wa-grn) 68%,#EAFBF1);
}
.wa-viz--rows em.is-web{
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  color:color-mix(in srgb,var(--accent) 74%,#fff);
}
.wa-viz--rows i{flex:1;height:6px;background:rgba(150,172,200,.16);font-style:normal;}
.wa-viz--rows b{
  flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(150,166,192,.92);
}
.wa-viz--rows span.is-live{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,rgba(8,13,23,.6));}
.wa-viz--rows span.is-live b{color:color-mix(in srgb,var(--accent) 80%,#fff);}
html.js .sv-pil.is-in .wa-viz--rows span.is-live{animation:waRow 3s var(--ease-out) infinite;}
@keyframes waRow{0%,72%,100%{opacity:.78;}30%{opacity:1;}}

/* ============================================================
   4. THE AI LAYER — a horizontal accordion, not four boxes

   Four capabilities share one track. The live one opens to full
   width and shows a working exchange; the other three fold down
   to a spine with their name set vertically. Hovering opens one,
   so the whole strip reorganises itself under the pointer rather
   than tinting a card. Clicking and the arrow keys do the same
   thing, which is what makes it usable rather than merely nice.
   ============================================================ */
.wa-ai{
  position:relative;overflow:clip;padding-inline:var(--gut);
  padding-block:clamp(66px,10vh,126px);
  border-bottom:1px solid var(--wa-line);
}
.wa-ai__in{max-width:var(--maxw);margin-inline:auto;}
.wa-ai__hd{
  display:grid;gap:clamp(14px,2.6vw,48px);align-items:end;
  margin-bottom:clamp(26px,4vh,44px);
}
@media (min-width:920px){.wa-ai__hd{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}}
.wa-ai__hd .cx-bd{max-width:52ch;}

.wa-ai__set{
  display:flex;gap:2px;
  min-height:clamp(300px,40vh,392px);
  background:rgba(168,210,236,.12);
  border:1px solid rgba(168,210,236,.12);
}
@media (max-width:860px){
  .wa-ai__set{flex-direction:column;min-height:0;}
}

.wa-cap{
  position:relative;flex:0 1 6.5rem;min-width:0;
  display:flex;flex-direction:column;
  background:#05070D;
  border:0;padding:0;text-align:left;cursor:pointer;
  transition:flex-basis .75s var(--ease-out), background .6s var(--ease-out);
}
@media (max-width:860px){.wa-cap{flex:none;}}
.wa-cap.is-on{
  flex:1 1 auto;
  background:
    radial-gradient(86% 76% at 84% 8%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 66%),
    linear-gradient(168deg,#080D18,#05070D 64%);
}
.wa-cap:not(.is-on):hover{background:color-mix(in srgb,var(--accent) 7%,#05070D);}

/* the folded state: the name stands up, the way a spine does */
.wa-cap__spine{
  display:flex;align-items:center;gap:14px;
  padding:clamp(16px,2vw,22px) 0;
  writing-mode:vertical-rl;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(.92rem,1.1vw,1.02rem);letter-spacing:-.02em;
  color:rgba(162,178,203,.9);
  margin-inline:auto;
  transition:color .5s var(--ease-out), opacity .4s var(--ease-out);
}
.wa-cap__spine::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:rgba(130,146,174,.7);
  transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.wa-cap:hover .wa-cap__spine{color:#EAF2FD;}
.wa-cap:hover .wa-cap__spine::before{background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);}
.wa-cap.is-on .wa-cap__spine{opacity:0;position:absolute;pointer-events:none;}
@media (max-width:860px){
  .wa-cap__spine{writing-mode:horizontal-tb;margin-inline:0;
    padding:clamp(14px,2.4vh,18px) clamp(16px,4vw,22px);}
  .wa-cap.is-on .wa-cap__spine{display:none;}
}

/* the open state */
.wa-cap__open{
  display:none;flex-direction:column;gap:clamp(14px,2vh,20px);
  padding:clamp(20px,2.4vw,30px);
  min-width:0;
}
.wa-cap.is-on .wa-cap__open{display:flex;flex:1;justify-content:center;}
/* a demo floating under a short paragraph wastes the width the
   accordion just spent opening, so past this point they sit side
   by side and the panel reads as one composition */
@media (min-width:1120px){
  .wa-cap.is-on .wa-cap__open{
    display:grid;align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(300px,.92fr);
    grid-template-rows:auto auto auto;
    align-content:center;
    gap:10px clamp(24px,2.6vw,46px);
  }
  .wa-cap__k{grid-column:1;grid-row:1;}
  .wa-cap__t{grid-column:1;grid-row:2;}
  .wa-cap__p{grid-column:1;grid-row:3;}
  .wa-demo{grid-column:2;grid-row:1 / span 3;margin-top:0;align-self:center;}
}
.wa-cap__k{
  display:flex;align-items:center;gap:10px;margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 78%,#fff);
}
.wa-cap__k::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 80%,transparent);
}
.wa-cap__t{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.24rem,1.8vw,1.6rem);line-height:1.1;letter-spacing:-.034em;
  color:var(--cx-ink);max-width:22ch;
}
.wa-cap__p{margin:0;max-width:44ch;font-size:var(--cx-cap);line-height:1.62;
  color:var(--wa-dim);}
.wa-cap.is-on .wa-cap__k,
.wa-cap.is-on .wa-cap__t,
.wa-cap.is-on .wa-cap__p,
.wa-cap.is-on .wa-demo{
  animation:waCapIn .6s var(--ease-out) backwards;
}
.wa-cap.is-on .wa-cap__t{animation-delay:.08s;}
.wa-cap.is-on .wa-cap__p{animation-delay:.14s;}
.wa-cap.is-on .wa-demo{animation-delay:.2s;}
@keyframes waCapIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* the revealed exchange: the capability demonstrating itself */
.wa-demo{
  margin-top:auto;display:flex;flex-direction:column;gap:7px;
  padding:clamp(13px,1.6vw,18px);
  border:1px solid rgba(168,210,236,.13);
  background:linear-gradient(170deg,rgba(11,17,29,.86),rgba(5,8,14,.6));
}
.wa-demo .wa-b{
  opacity:1;transform:none;max-width:88%;font-size:.8rem;
}
.wa-demo__note{
  display:flex;align-items:center;gap:8px;margin:2px 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--wa-grn) 56%,#A9BCD4);
}
.wa-demo__note::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--wa-grn);
  box-shadow:0 0 10px color-mix(in srgb,var(--wa-grn) 70%,transparent);
}
.wa-demo .wa-chips{opacity:1;transform:none;align-self:flex-end;}

/* ============================================================
   5. HOW IT GETS BUILT — the workflow assembles itself

   The old version was five panels of prose. This is the system
   being wired: three routes in converge on a conversation, the
   conversation feeds the workflows, the workflows feed the panel,
   and the panel feeds back into the conversation. Each step of
   the process adds the piece it is describing, and once a piece
   exists, real traffic runs along it.
   ============================================================ */
.wa-bd{
  position:relative;overflow:clip;padding-inline:var(--gut);
  padding-block:clamp(70px,11vh,134px);
  background:
    radial-gradient(64% 84% at 78% 0%, rgba(6,44,199,.16), transparent 66%),
    linear-gradient(180deg,#04060B,#070B14 44%,#04060B);
  border-bottom:1px solid var(--wa-line);
}
.wa-bd__in{max-width:var(--maxw);margin-inline:auto;}
.wa-bd__hd{
  display:grid;gap:clamp(14px,2.6vw,48px);align-items:end;
  margin-bottom:clamp(24px,3.6vh,40px);
}
@media (min-width:920px){.wa-bd__hd{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}}
.wa-bd__hd .cx-bd{max-width:52ch;}

/* the graph */
.wa-wf{
  position:relative;
  border:1px solid rgba(168,210,236,.14);
  background:linear-gradient(170deg,rgba(8,13,23,.7),rgba(4,6,11,.45));
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.wa-wf::-webkit-scrollbar{display:none;}
.wa-wf svg{display:block;width:100%;height:auto;}
@media (max-width:900px){
  /* a diagram this wide cannot shrink to a phone and stay legible,
     so it keeps its size and the reader swipes it */
  .wa-wf svg{width:820px;max-width:none;}
}

.wf-n{opacity:0;translate:0 8px;transition:opacity .6s var(--ease-out), translate .6s var(--ease-out);}
.wa-wf.n0 .wf-n[data-at="0"],
.wa-wf.n1 .wf-n[data-at="1"],
.wa-wf.n2 .wf-n[data-at="2"],
.wa-wf.n3 .wf-n[data-at="3"],
.wa-wf.n4 .wf-n[data-at="4"]{opacity:1;translate:0 0;}

.wf-box{fill:#070B14;stroke:color-mix(in srgb,var(--accent) 34%,transparent);stroke-width:1;}
.wf-n--key .wf-box{fill:#080E1A;stroke:color-mix(in srgb,var(--accent) 56%,transparent);}
.wf-t{
  fill:rgba(198,212,234,.96);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-anchor:middle;
}
.wf-h{
  fill:color-mix(in srgb,var(--accent) 80%,#fff);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-anchor:middle;
}
.wf-c{fill:rgba(186,202,226,.95);font-family:'Inter',system-ui,sans-serif;
  font-size:10.5px;text-anchor:middle;}
.wf-chip{fill:color-mix(in srgb,var(--accent) 13%,transparent);
  stroke:color-mix(in srgb,var(--accent) 34%,transparent);stroke-width:1;}
.wf-row{fill:rgba(150,172,200,.12);}
.wf-row--live{fill:color-mix(in srgb,var(--accent) 30%,transparent);}
.wa-wf.n3 .wf-row--live{animation:wfRow 2.6s var(--ease-out) infinite;}
@keyframes wfRow{0%,70%,100%{opacity:.5;}30%{opacity:1;}}

.wf-e{
  fill:none;stroke:rgba(168,210,236,.26);stroke-width:1;
  stroke-dasharray:3 6;
  opacity:0;transition:opacity .6s var(--ease-out);
}
.wa-wf.n0 .wf-e[data-at="0"],
.wa-wf.n2 .wf-e[data-at="2"],
.wa-wf.n3 .wf-e[data-at="3"],
.wa-wf.n4 .wf-e[data-at="4"]{opacity:1;}

/* the traffic. A short dash travelling a normalised path is a
   packet without a single line of script. */
.wf-p{
  fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 70%,transparent));
}
.wa-wf.n2 .wf-p[data-at="0"],
.wa-wf.n2 .wf-p[data-at="2"],
.wa-wf.n3 .wf-p[data-at="3"],
.wa-wf.n4 .wf-p[data-at="4"]{opacity:1;animation:wfRun 2.8s linear infinite;}
.wf-p[data-d="1"]{animation-delay:.5s;}
.wf-p[data-d="2"]{animation-delay:1s;}
.wf-p[data-d="3"]{animation-delay:1.5s;}
@keyframes wfRun{to{stroke-dashoffset:0;}}

/* the step rail */
.wa-bd__rail{
  display:grid;gap:1px;margin-top:2px;
  background:rgba(168,210,236,.12);
  border:1px solid rgba(168,210,236,.12);border-top:0;
}
@media (min-width:760px){.wa-bd__rail{grid-template-columns:repeat(5,minmax(0,1fr));}}
.wa-step{
  position:relative;display:block;width:100%;text-align:left;
  padding:clamp(15px,2vh,20px) clamp(13px,1.3vw,18px);
  border:0;background:#05070D;cursor:pointer;
  transition:background .45s var(--ease-out);
}
.wa-step::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
.wa-step[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 9%,#05070D);}
.wa-step[aria-selected="true"]::after{transform:scaleX(1);}
.wa-step:hover{background:color-mix(in srgb,var(--accent) 6%,#05070D);}
.wa-step em{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;font-style:normal;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(124,140,167,.9);transition:color .45s var(--ease-out);
}
.wa-step em::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:#05070D;border:1px solid rgba(132,150,180,.6);
  transition:background .45s var(--ease-out), border-color .45s var(--ease-out),
             box-shadow .45s var(--ease-out);
}
.wa-step.is-done em::before{background:color-mix(in srgb,var(--accent) 50%,transparent);
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);}
.wa-step[aria-selected="true"] em{color:color-mix(in srgb,var(--accent) 80%,#fff);}
.wa-step[aria-selected="true"] em::before{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);}
.wa-step b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.24;letter-spacing:-.024em;
  color:rgba(196,210,232,.94);transition:color .45s var(--ease-out);
}
.wa-step[aria-selected="true"] b{color:#F5F9FF;}

.wa-bd__say{
  position:relative;min-height:clamp(58px,8vh,74px);
  margin-top:clamp(18px,2.6vh,26px);
}
.wa-bd__say p{
  position:absolute;inset:0;margin:0;max-width:74ch;
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(182,196,218,.96);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.wa-bd__say p.is-on{opacity:1;transform:none;pointer-events:auto;}

/* ============================================================
   6. SHARED CORRECTIONS
   ============================================================ */
.sv-step::before{border-radius:50%;}

/* every capability run on this page is dotted rather than dashed.
   A dash beside a line of text reads as punctuation the writer
   forgot to finish; a dot reads as an item in a set. */
.sv-pil__l li::before{
  left:2px;width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 62%,transparent);
  transition:transform .4s var(--ease-out), background .4s var(--ease-out);
}
.sv-pil__l li:hover::before{
  width:6px;transform:scale(1.4);background:var(--accent);
}

/* the exclusion marker keeps saying "not this", but as a struck ring
   rather than a struck hyphen */
.sv-ex__set li::before{
  left:2px;top:calc(clamp(16px,2.2vh,22px) + .58em);
  width:10px;height:10px;border-radius:50%;
  background:none;border:1px solid rgba(124,140,167,.8);
}
.sv-ex__set li::after{
  left:6px;top:calc(clamp(16px,2.2vh,22px) + .58em - 1px);
  width:1px;height:12px;background:rgba(124,140,167,.7);
  transform:rotate(40deg);transform-origin:50% 50%;
}
/* ============================================================
   5. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .wa-b,.wa-chips{opacity:1;transform:none;}
  .wa-b--typ{display:none;}
  html.js .wa-hero.is-in .wa-hero__rings i{animation:none;}
  .wa-b--typ.is-on i{animation:none;}
  .wa-pan.is-on .wa-st,.wa-pan.is-on .wa-st__n::before{animation:none;}
  [data-wa-mini-thread]:not([hidden]) .wa-b{animation:none;opacity:1;transform:none;}
  .wa-stack__in{transform:none;}
  .wa-track::after,.wa-card__st.is-hit{transition:none;animation:none;}
  .wa-cap.is-on .wa-cap__k,.wa-cap.is-on .wa-cap__t,
  .wa-cap.is-on .wa-cap__p,.wa-cap.is-on .wa-demo{animation:none;}
  .wa-wf .wf-p{animation:none;opacity:.5;}
  .wa-wf.n3 .wf-row--live{animation:none;}
  .wa-bd__say p{transition:none;}
  html.js .sv-pil.is-in .wa-viz--flow span::after,
  html.js .sv-pil.is-in .wa-viz--rows span.is-live{animation:none;}
}