/* ============================================================
   SERVICE PAGES — ART DIRECTION

   The three engagement pages were the last of the old template:
   masthead, then nine identical stacked blocks. The content on
   them is the best on the site and none of it is being cut —
   what changes is that each section now has its own shape, and
   the page opens on a live instrument that draws the product
   rather than a metaphor for it.

   Built on the cx-* type scale (contact.css), which is loaded
   site-wide. Scoped under .sv-* so nothing here can reach the
   pages that are already locked.
   ============================================================ */

/* ============================================================
   1. THE OPENING — the claim and the instrument, side by side
   ============================================================ */
.sv-top{
  position:relative;overflow:clip;
  padding-inline:var(--gut);
  padding-block:clamp(96px,15vh,168px) clamp(56px,8vh,96px);
  background:
    radial-gradient(84% 120% at 80% -10%, rgba(6,44,199,.2), transparent 62%),
    linear-gradient(180deg,#04060B,#070B14 60%,#04060B);
}
.sv-top__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(32px,4vw,64px);align-items:center;
}
@media (min-width:1040px){
  .sv-top__in{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);}
}

.sv-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 9px;margin:0 0 clamp(20px,3vh,30px);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(118,133,160,.9);
}
.sv-crumb a{color:inherit;text-decoration:none;transition:color .4s var(--ease-out);}
.sv-crumb a:hover{color:var(--accent);}
.sv-crumb i{font-style:normal;color:rgba(132,148,176,.95);}
.sv-crumb span{color:color-mix(in srgb,var(--accent) 70%,#fff);}

.sv-h1{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.02;letter-spacing:-.048em;
  color:var(--cx-ink);text-wrap:balance;
}
.sv-say{
  margin:clamp(20px,3vh,28px) 0 0;max-width:52ch;
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(176,190,212,.96);
}
.sv-say strong{color:#EDF3FF;font-weight:600;}

.sv-act{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;
  margin-top:clamp(26px,4vh,38px);}

/* the instrument — the page's signature */
.sv-fig{position:relative;isolation:isolate;}
.sv-fig__fx{
  display:block;width:100%;
  height:clamp(268px,34vh,348px);
  border:1px solid rgba(168,210,236,.16);
  background:linear-gradient(165deg,rgba(8,12,21,.78),rgba(4,6,11,.5));
}
.sv-fig::after{               /* the bloom the instrument sits on */
  content:"";position:absolute;z-index:-1;
  left:8%;right:8%;bottom:-6%;height:44%;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 22%,transparent), transparent 72%);
  filter:blur(30px);opacity:.75;pointer-events:none;
}
.sv-fig__cap{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(112,128,154,.9);
}
.sv-fig__cap b{color:color-mix(in srgb,var(--accent) 72%,#fff);font-weight:700;}

/* the facts, as a measured strip under the whole opening */
.sv-facts{
  max-width:var(--maxw);margin:clamp(40px,6vh,70px) auto 0;
  display:grid;gap:1px;background:rgba(168,210,236,.12);
  border-block:1px solid rgba(168,210,236,.12);
}
@media (min-width:760px){.sv-facts{grid-template-columns:repeat(4,minmax(0,1fr));}}
.sv-facts > div{background:#04060B;padding:clamp(16px,2vw,22px) clamp(15px,1.8vw,20px);}
.sv-facts dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(118,133,160,.9);
}
.sv-facts dd{margin:9px 0 0;font-size:var(--cx-cap);line-height:1.56;color:rgba(198,210,230,.95);}

/* ============================================================
   2. THE DIRECT ANSWER — one framed block, centred and quiet

   This is the paragraph a search engine or an assistant lifts,
   so it is given its own moment rather than buried in a section.
   ============================================================ */
.sv-ans{
  position:relative;padding-inline:var(--gut);
  padding-block:clamp(56px,9vh,104px);
  border-bottom:1px solid rgba(168,210,236,.1);
}
.sv-ans__in{max-width:880px;margin-inline:auto;}
.sv-ans__box{
  position:relative;
  padding:clamp(26px,3.4vw,44px) clamp(22px,3vw,42px);
  border-left:2px solid var(--accent);
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--accent) 9%,transparent), transparent 68%);
}
.sv-ans__box p{margin:0;font-size:clamp(1.02rem,1.24vw,1.14rem);line-height:1.68;
  color:rgba(196,208,228,.97);}
.sv-ans__box p + p{margin-top:1em;}
.sv-ans__box strong{color:#F1F6FF;font-weight:600;}
.sv-ans__after{margin:clamp(24px,3.4vh,34px) 0 0;font-size:var(--cx-bd);
  line-height:var(--cx-lead-bd);color:rgba(170,184,206,.95);}

/* ============================================================
   3. THE OPPORTUNITY — long-form left, gains as a strip below
   ============================================================ */
.sv-op{position:relative;padding-inline:var(--gut);
  padding-block:clamp(64px,10vh,124px);}
.sv-op__in{max-width:var(--maxw);margin-inline:auto;}
.sv-op__hd{max-width:40ch;margin-bottom:clamp(26px,4vh,44px);}
.sv-op__body{max-width:66ch;margin-left:auto;}
@media (min-width:1000px){.sv-op__body{margin-right:clamp(0px,6vw,110px);}}
.sv-op__body p{margin:0 0 1.1em;font-size:var(--cx-bd);
  line-height:var(--cx-lead-bd);color:rgba(172,186,208,.96);}
.sv-op__body p:last-child{margin-bottom:0;}
.sv-op__body strong{color:#EDF3FF;font-weight:600;}

.sv-gain{
  margin-top:clamp(38px,6vh,72px);
  display:grid;gap:0;
  border-top:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
}
@media (min-width:860px){.sv-gain{grid-template-columns:repeat(4,minmax(0,1fr));}}
.sv-gain__i{
  padding:clamp(18px,2.4vh,26px) clamp(14px,1.8vw,26px) clamp(18px,2.4vh,26px) 0;
  border-bottom:1px solid rgba(168,210,236,.1);
}
@media (min-width:860px){
  .sv-gain__i{border-bottom:0;}
  .sv-gain__i + .sv-gain__i{border-left:1px solid rgba(168,210,236,.12);
    padding-left:clamp(14px,1.8vw,26px);}
}
.sv-gain__t{
  display:block;margin:0 0 9px;
  font-family:var(--font-display);font-weight:700;font-size:var(--cx-h4);
  letter-spacing:-.018em;color:#EEF4FF;
}
.sv-gain__p{margin:0;font-size:var(--cx-cap);line-height:1.62;color:rgba(166,180,203,.95);}
html.js .sv-gain__i{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--si,0) * 105ms + 120ms);
}
html.js .sv-op.is-in .sv-gain__i{opacity:1;transform:none;}

/* ============================================================
   4. THE BUILD — a stepped ladder with a spine
   ============================================================ */
.sv-bd{
  position:relative;overflow:clip;padding-inline:var(--gut);
  padding-block:clamp(70px,11vh,140px);
  background:
    radial-gradient(70% 100% at 14% 0%, rgba(6,44,199,.16), transparent 60%),
    linear-gradient(180deg,#05080F,#04060B);
  border-block:1px solid rgba(168,210,236,.13);
}
.sv-bd__in{max-width:var(--maxw);margin-inline:auto;}
.sv-bd__hd{max-width:42ch;margin-bottom:clamp(34px,5vh,58px);}
.sv-bd__hd .cx-bd{margin-top:16px;max-width:58ch;}

.sv-steps{position:relative;margin:0;padding:0;list-style:none;}
.sv-steps::before{        /* the spine the steps hang from */
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,
    var(--accent), color-mix(in srgb,var(--accent) 14%,transparent));
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.5s var(--ease-out) .1s;
}
html.js .sv-bd.is-in .sv-steps::before{transform:scaleY(1);}
.sv-step{
  position:relative;
  padding:clamp(18px,2.6vh,26px) 0 clamp(18px,2.6vh,26px) clamp(26px,3.4vw,52px);
  border-bottom:1px solid rgba(168,210,236,.1);
}
/* each step steps further in, so the list descends rather than stacks */
@media (min-width:900px){
  .sv-step:nth-child(2){margin-left:clamp(0px,2.4vw,44px);}
  .sv-step:nth-child(3){margin-left:clamp(0px,4.8vw,88px);}
  .sv-step:nth-child(4){margin-left:clamp(0px,7.2vw,132px);}
  .sv-step:nth-child(5){margin-left:clamp(0px,9.6vw,176px);}
}
.sv-step::before{         /* the node on the spine */
  content:"";position:absolute;left:-4px;top:calc(clamp(18px,2.6vh,26px) + .55em);
  width:9px;height:9px;border-radius:50%;
  background:#05080F;border:1px solid var(--accent);
  transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
@media (min-width:900px){
  .sv-step:nth-child(2)::before{left:calc(-4px - clamp(0px,2.4vw,44px));}
  .sv-step:nth-child(3)::before{left:calc(-4px - clamp(0px,4.8vw,88px));}
  .sv-step:nth-child(4)::before{left:calc(-4px - clamp(0px,7.2vw,132px));}
  .sv-step:nth-child(5)::before{left:calc(-4px - clamp(0px,9.6vw,176px));}
  /* the arm that reaches from the spine to a stepped row */
  .sv-step::after{
    content:"";position:absolute;top:calc(clamp(18px,2.6vh,26px) + .55em + 4px);height:1px;
    background:color-mix(in srgb,var(--accent) 40%,transparent);
    left:calc(-4px - var(--arm,0px) + 9px);width:var(--arm,0px);
  }
  .sv-step:nth-child(2){--arm:clamp(0px,2.4vw,44px);}
  .sv-step:nth-child(3){--arm:clamp(0px,4.8vw,88px);}
  .sv-step:nth-child(4){--arm:clamp(0px,7.2vw,132px);}
  .sv-step:nth-child(5){--arm:clamp(0px,9.6vw,176px);}
}
.sv-step:hover::before{background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);}
.sv-step b{
  display:block;margin-bottom:9px;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-h3);letter-spacing:-.026em;color:#F1F6FF;
}
.sv-step span{display:block;font-size:var(--cx-bd);line-height:var(--cx-lead-bd);
  color:rgba(170,184,206,.95);max-width:62ch;}
html.js .sv-step{
  opacity:0;transform:translateX(-14px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--si,0) * 130ms + 240ms);
}
html.js .sv-bd.is-in .sv-step{opacity:1;transform:none;}

.sv-figs{
  margin-top:clamp(38px,6vh,70px);
  display:grid;gap:1px;background:rgba(168,210,236,.12);
  border-block:1px solid rgba(168,210,236,.12);
}
@media (min-width:680px){.sv-figs{grid-template-columns:repeat(4,minmax(0,1fr));}}
.sv-figs > div{background:#04060B;padding:clamp(18px,2.2vw,26px);}
.sv-figs b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1;letter-spacing:-.05em;
  color:color-mix(in srgb,var(--accent) 78%,#fff);
  font-variant-numeric:tabular-nums;
}
.sv-figs span{display:block;margin-top:11px;font-size:var(--cx-cap);line-height:1.54;
  color:rgba(162,176,200,.95);}

/* ============================================================
   5. THE RULES — tall panels on a band
   ============================================================ */
.sv-rules{position:relative;padding-inline:var(--gut);
  padding-block:clamp(64px,10vh,124px);}
.sv-rules__in{max-width:var(--maxw);margin-inline:auto;}
.sv-rules__hd{max-width:42ch;margin-bottom:clamp(30px,4.6vh,50px);}
.sv-rules__hd .cx-bd{margin-top:16px;max-width:60ch;}
.sv-rules__set{display:grid;gap:clamp(2px,.4vw,6px);}
@media (min-width:880px){.sv-rules__set{grid-template-columns:repeat(3,minmax(0,1fr));}}
.sv-rule{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,28px);
  border:1px solid rgba(168,210,236,.13);
  background:linear-gradient(168deg,rgba(9,13,23,.7),rgba(4,6,11,.35));
  transition:border-color .6s var(--ease-out), background .6s var(--ease-out);
}
.sv-rule::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--accent),
    color-mix(in srgb,var(--accent) 12%,transparent));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease-out);
  transition-delay:calc(var(--si,0) * 150ms + 120ms);
}
html.js .sv-rules.is-in .sv-rule::before{transform:scaleX(1);}
.sv-rule:hover{border-color:color-mix(in srgb,var(--accent) 38%,transparent);
  background:linear-gradient(168deg,color-mix(in srgb,var(--accent) 10%,rgba(9,13,23,.8)),rgba(4,6,11,.5));}
.sv-rule__n{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.12rem,1.7vw,1.44rem);line-height:1.1;letter-spacing:-.032em;
  color:#EEF4FF;margin:0 0 clamp(14px,2vh,20px);
}
.sv-rule dl{margin:0;display:grid;gap:14px;}
.sv-rule dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 62%,#8494AE);margin-bottom:6px;
}
.sv-rule dd{margin:0;font-size:var(--cx-cap);line-height:1.62;color:rgba(166,180,203,.95);}
html.js .sv-rule{
  opacity:0;transition:opacity .85s var(--ease-out),
    border-color .6s var(--ease-out), background .6s var(--ease-out);
  transition-delay:calc(var(--si,0) * 150ms);
}
html.js .sv-rules.is-in .sv-rule{opacity:1;}

/* ============================================================
   6. THE SCOPES — a ladder that gains weight as it descends
   ============================================================ */
.sv-sc{
  position:relative;overflow:clip;padding-inline:var(--gut);
  padding-block:clamp(70px,11vh,136px);
  background:linear-gradient(180deg,#04060B,#070B14 52%,#04060B);
  border-block:1px solid rgba(168,210,236,.13);
}
.sv-sc__in{max-width:var(--maxw);margin-inline:auto;}
.sv-sc__hd{max-width:42ch;margin-bottom:clamp(30px,4.6vh,52px);}
.sv-sc__set{border-top:1px solid color-mix(in srgb,var(--accent) 32%,transparent);}
.sv-sc__i{
  position:relative;display:grid;gap:10px clamp(20px,3vw,52px);
  padding:clamp(24px,3.6vh,40px) 0;
  border-bottom:1px solid rgba(168,210,236,.11);
  transition:background .55s var(--ease-out);
}
@media (min-width:900px){
  .sv-sc__i{grid-template-columns:minmax(0,.82fr) minmax(0,.66fr) minmax(0,1.4fr);
    align-items:start;}
}
.sv-sc__i:hover{background:linear-gradient(90deg,
  color-mix(in srgb,var(--accent) 8%,transparent),transparent 66%);}
/* each rung is a little heavier than the one above it */
.sv-sc__i:nth-child(2) .sv-sc__n{color:#F2F7FF;}
.sv-sc__i:nth-child(3) .sv-sc__n{color:#FFF;}
.sv-sc__n{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.14rem,1.85vw,1.52rem);line-height:1.08;letter-spacing:-.034em;
  color:#E4EDFA;
}
.sv-sc__for{margin:0;font-size:var(--cx-cap);line-height:1.6;
  color:color-mix(in srgb,var(--accent) 50%,#9CACC6);}
.sv-sc__has{margin:0;font-size:var(--cx-cap);line-height:1.66;color:rgba(166,180,203,.95);}
.sv-sc__has b{color:#D9E5F6;font-weight:600;}
html.js .sv-sc__i{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--ease-out), background .55s var(--ease-out);
  transition-delay:calc(var(--si,0) * 130ms);
}
html.js .sv-sc.is-in .sv-sc__i{clip-path:inset(0 0 0 0);}
.sv-sc__note{margin:clamp(26px,4vh,38px) 0 0;max-width:68ch;
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(170,184,206,.95);}

/* ============================================================
   7. EXCLUDED — a quiet typographic list, set wide
   ============================================================ */
.sv-ex{position:relative;padding-inline:var(--gut);
  padding-block:clamp(64px,10vh,120px);}
.sv-ex__in{max-width:1080px;margin-inline:auto;}
.sv-ex__hd{max-width:40ch;margin-bottom:clamp(26px,4vh,44px);}
.sv-ex__set{margin:0;padding:0;list-style:none;
  border-top:1px solid rgba(168,210,236,.14);}
.sv-ex__set li{
  position:relative;
  padding:clamp(16px,2.2vh,22px) 0 clamp(16px,2.2vh,22px) clamp(28px,3vw,44px);
  border-bottom:1px solid rgba(168,210,236,.1);
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(164,178,200,.95);
}
.sv-ex__set li b{color:#E7EFFA;font-weight:600;}
/* a struck marker — this is the "not included" list, and it says so */
.sv-ex__set li::before{
  content:"";position:absolute;left:2px;top:calc(clamp(16px,2.2vh,22px) + .78em);
  width:14px;height:1px;background:rgba(120,136,162,.75);
}
.sv-ex__set li::after{
  content:"";position:absolute;left:8px;top:calc(clamp(16px,2.2vh,22px) + .78em - 5px);
  width:1px;height:11px;background:rgba(120,136,162,.45);
  transform:rotate(38deg);transform-origin:50% 50%;
}

/* ============================================================
   8. PRICE — a data band, density as the differentiator
   ============================================================ */
.sv-pr{
  position:relative;overflow:clip;
  padding-block:clamp(64px,10vh,124px);
  background:linear-gradient(180deg,#04060B,#060910 60%,#04060B);
  border-top:1px solid rgba(168,210,236,.13);
}
.sv-pr__lbl{
  position:absolute;right:clamp(10px,2vw,26px);top:50%;
  transform:translateY(-50%);writing-mode:vertical-rl;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(116,131,157,.8);display:flex;align-items:center;gap:14px;
}
.sv-pr__lbl::before{content:"";width:1px;height:56px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 60%,transparent));}
@media (max-width:1180px){.sv-pr__lbl{display:none;}}
.sv-pr__in{max-width:1340px;margin-inline:auto;padding-inline:clamp(20px,6vw,96px);}
.sv-pr__hd{max-width:56ch;margin-bottom:clamp(26px,4vh,44px);}
.sv-pr__hd .cx-bd{margin-top:16px;}
.sv-pr .pg-tblw{border:0;background:none;margin-top:0;}
.sv-pr .pg-tbl th{
  background:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);letter-spacing:.2em;color:color-mix(in srgb,var(--accent) 64%,#8494AE);
}
.sv-pr .pg-tbl td{border-bottom:1px solid rgba(168,210,236,.1);font-size:var(--cx-cap);}
.sv-pr .pg-tbl tbody tr{transition:background .5s var(--ease-out);}
.sv-pr .pg-tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.sv-pr__note{
  margin-top:clamp(26px,4vh,38px);
  padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,30px);
  border-left:2px solid color-mix(in srgb,var(--accent) 64%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%);
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(180,193,214,.96);
}
.sv-pr__note strong{color:#F1F6FF;font-weight:600;}

/* ============================================================
   9. THE CLOSE — cross-links and the one action
   ============================================================ */
.sv-end{
  position:relative;overflow:clip;
  padding-inline:var(--gut);
  padding-block:clamp(74px,12vh,150px);
  background:
    radial-gradient(70% 90% at 50% 112%, rgba(6,44,199,.24), transparent 66%),
    linear-gradient(180deg,#04060B,#070B14);
  border-top:1px solid rgba(168,210,236,.13);
}
.sv-end__in{max-width:var(--maxw);margin-inline:auto;}
.sv-end__h{max-width:18ch;
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.85rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.048em;
  color:var(--cx-ink);
}
.sv-end__s{margin:clamp(18px,2.6vh,26px) 0 0;max-width:50ch;
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(172,186,208,.96);}
.sv-end__xr{
  display:grid;gap:1px;margin-top:clamp(46px,7vh,84px);
  background:rgba(168,210,236,.12);
  border-block:1px solid rgba(168,210,236,.12);
}
@media (min-width:760px){.sv-end__xr{grid-template-columns:repeat(4,minmax(0,1fr));}}
.sv-end__xr a{
  display:block;padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,26px);
  background:#04060B;color:inherit;transition:background .5s var(--ease-out);
}
.sv-end__xr a:hover{background:color-mix(in srgb,var(--accent) 10%,#04060B);}
.sv-end__xr b{display:block;margin-bottom:8px;
  font-family:var(--font-display);font-weight:700;font-size:var(--cx-h4);
  letter-spacing:-.02em;color:#EEF4FF;}
.sv-end__xr span{display:block;font-size:var(--cx-cap);line-height:1.6;
  color:rgba(158,172,196,.94);}

/* ============================================================
   10. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.js .sv-gain__i,html.js .sv-step,html.js .sv-rule{opacity:1;transform:none;}
  html.js .sv-sc__i{clip-path:none;}
  html.js .sv-steps::before{transform:scaleY(1);}
  html.js .sv-rule::before{transform:scaleX(1);}
}

/* ============================================================
   11. THE PILLARS — sticky storytelling, not three cards

   Built for the AI Automation & WhatsApp Growth page, where the
   product genuinely has three parts and a card grid would flatten
   them into peers you skim. The index holds on the left and lights
   the part you are reading; the parts themselves scroll past it at
   full measure. Reading the page IS moving through the product.
   ============================================================ */
.sv-pil{
  position:relative;padding-inline:var(--gut);
  padding-block:clamp(70px,11vh,140px);
  background:
    radial-gradient(64% 96% at 88% 4%, rgba(6,44,199,.15), transparent 62%),
    linear-gradient(180deg,#04060B,#070B14 46%,#04060B);
  border-block:1px solid rgba(168,210,236,.13);
}
.sv-pil__in{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(30px,4vw,66px);align-items:start;
}
@media (min-width:1000px){
  .sv-pil__in{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);}
  .sv-pil__nav{position:sticky;top:clamp(104px,16vh,160px);}
}
.sv-pil__hd{margin-bottom:clamp(22px,3.4vh,34px);}
.sv-pil__hd .cx-bd{margin-top:14px;max-width:40ch;}

/* the index — each entry lights when its part is the live one */
.sv-pil__ix{margin:0;padding:0;list-style:none;
  border-top:1px solid rgba(168,210,236,.14);}
.sv-pil__ix li{
  position:relative;
  padding:clamp(13px,1.9vh,17px) 0 clamp(13px,1.9vh,17px) clamp(22px,2.4vw,30px);
  border-bottom:1px solid rgba(168,210,236,.1);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:-.026em;
  color:rgba(150,166,190,.8);
  transition:color .5s var(--ease-out);
}
.sv-pil__ix li::before{
  content:"";position:absolute;left:0;top:calc(clamp(13px,1.9vh,17px) + .62em);
  width:11px;height:1px;background:rgba(120,136,162,.6);
  transition:width .5s var(--ease-out), background .5s var(--ease-out);
}
.sv-pil__ix li.is-live{color:#F3F8FF;}
.sv-pil__ix li.is-live::before{width:18px;background:var(--accent);}

/* a part */
.sv-pil__set{display:grid;gap:clamp(34px,6vh,86px);}
.sv-pil__p{position:relative;scroll-margin-top:30vh;}
.sv-pil__k{
  display:block;margin-bottom:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 66%,#8494AE);
}
.sv-pil__h{
  margin:0 0 14px;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.06;letter-spacing:-.04em;
  color:var(--cx-ink);
}
.sv-pil__s{margin:0 0 clamp(20px,3vh,28px);max-width:56ch;
  font-size:var(--cx-bd);line-height:var(--cx-lead-bd);color:rgba(172,186,208,.96);}

/* the capability list — a ruled run, each line its own row */
.sv-pil__l{margin:0;padding:0;list-style:none;
  border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);}
.sv-pil__l li{
  position:relative;display:grid;gap:2px 18px;
  padding:clamp(11px,1.6vh,15px) 0 clamp(11px,1.6vh,15px) clamp(22px,2.2vw,30px);
  border-bottom:1px solid rgba(168,210,236,.1);
  font-size:var(--cx-cap);line-height:1.56;color:rgba(180,193,214,.96);
  transition:color .4s var(--ease-out), background .4s var(--ease-out);
}
.sv-pil__l li::before{
  content:"";position:absolute;left:1px;top:calc(clamp(11px,1.6vh,15px) + .66em);
  width:10px;height:1px;background:color-mix(in srgb,var(--accent) 62%,transparent);
  transition:width .4s var(--ease-out);
}
.sv-pil__l li:hover{color:#F1F6FF;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 62%);}
.sv-pil__l li:hover::before{width:17px;}
html.js .sv-pil__l li{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .75s var(--ease-out), color .4s var(--ease-out),
             background .4s var(--ease-out);
  transition-delay:calc(var(--si,0) * 70ms + 80ms);
}
html.js .sv-pil.is-in .sv-pil__l li{clip-path:inset(0 0 0 0);}

/* ============================================================
   12. THE AI STRIP — four capabilities on one horizontal run
   ============================================================ */
.sv-ai{position:relative;padding-inline:var(--gut);
  padding-block:clamp(64px,10vh,124px);}
.sv-ai__in{max-width:var(--maxw);margin-inline:auto;}
.sv-ai__hd{max-width:42ch;margin-bottom:clamp(30px,4.6vh,52px);}
.sv-ai__hd .cx-bd{margin-top:16px;max-width:58ch;}
.sv-ai__set{
  display:grid;gap:0;
  border-top:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
}
@media (min-width:880px){.sv-ai__set{grid-template-columns:repeat(4,minmax(0,1fr));}}
.sv-ai__i{
  position:relative;
  padding:clamp(20px,2.8vh,30px) clamp(14px,1.8vw,26px) clamp(20px,2.8vh,30px) 0;
  border-bottom:1px solid rgba(168,210,236,.1);
  transition:background .5s var(--ease-out);
}
@media (min-width:880px){
  .sv-ai__i{border-bottom:0;}
  .sv-ai__i + .sv-ai__i{border-left:1px solid rgba(168,210,236,.12);
    padding-left:clamp(14px,1.8vw,26px);}
}
.sv-ai__i:hover{background:linear-gradient(180deg,
  color-mix(in srgb,var(--accent) 9%,transparent),transparent 78%);}
.sv-ai__t{
  display:block;margin:0 0 10px;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-h3);letter-spacing:-.026em;color:#EEF4FF;
}
.sv-ai__p{margin:0;font-size:var(--cx-cap);line-height:1.62;color:rgba(166,180,203,.95);}
html.js .sv-ai__i{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out),
             background .5s var(--ease-out);
  transition-delay:calc(var(--si,0) * 110ms + 120ms);
}
html.js .sv-ai.is-in .sv-ai__i{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html.js .sv-pil__l li{clip-path:none;}
  html.js .sv-ai__i{opacity:1;transform:none;}
}

/* ============================================================
   THE MID-PAGE CTA — one band, halfway down every solution page

   The pages are built to open a conversation rather than finish
   one, so the ask cannot wait for the footer. It arrives at the
   point a visitor has understood the offer and not yet started
   looking for reasons to leave. Deliberately quiet: a rule, a
   line and a button, on the same accent the page already wears.
   ============================================================ */
.sv-cta{
  position:relative;padding:clamp(40px,6vh,72px) var(--gut);
  border-block:1px solid rgba(168,210,236,.13);
  background:
    radial-gradient(60% 140% at 50% 50%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 72%),
    linear-gradient(180deg,rgba(4,6,11,.4),rgba(8,12,22,.7));
  overflow:hidden;
}
.sv-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 26%,transparent),transparent);
  height:1px;top:-1px;
}
.sv-cta__in{
  max-width:1180px;margin-inline:auto;
  display:grid;gap:clamp(18px,2.6vw,44px);align-items:center;
}
@media (min-width:820px){
  .sv-cta__in{grid-template-columns:minmax(0,1fr) auto;}
}
.sv-cta__h{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.42rem,2.5vw,2.16rem);line-height:1.08;letter-spacing:-.04em;
  color:var(--cx-ink);text-wrap:balance;max-width:20ch;
}
.sv-cta__s{
  margin:9px 0 0;max-width:52ch;
  font-size:var(--cx-cap);line-height:1.6;color:rgba(174,188,210,.94);
}
.sv-cta__a{display:flex;flex-wrap:wrap;gap:12px 15px;align-items:center;}
@media (max-width:819px){.sv-cta__a{margin-top:4px;}}

/* ============================================================
   THE FAQ PAGE — grouped questions, one shape

   Five groups rather than one long list, because a visitor
   arrives with a category of doubt rather than a specific
   question. Everything reuses the .cx-qa accordion and the cx-*
   scale; the only new parts are the head, the jump strip and the
   group rhythm, so the page adds no new visual language.
   ============================================================ */
.fq-top{
  position:relative;padding:clamp(96px,13vh,150px) var(--gut) clamp(40px,6vh,64px);
  background:
    radial-gradient(64% 84% at 50% 0%, rgba(6,44,199,.18), transparent 68%),
    linear-gradient(180deg,#04060B,#070B14 60%,#04060B);
  border-bottom:1px solid rgba(168,210,236,.13);
}
.fq-top__in{max-width:1180px;margin-inline:auto;}
.fq-h1{
  margin:0;max-width:17ch;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.15rem,4.5vw,4rem);line-height:1.0;letter-spacing:-.052em;
  color:var(--cx-ink);text-wrap:balance;
}
/* The brand line, now sitting under the H1 rather than being it. Set
   larger and lighter than the body copy so it still reads as part of
   the masthead and not as the opening of a paragraph. */
.fq-lede{
  margin:clamp(14px,2.2vh,20px) 0 0;max-width:34ch;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.12rem,1.7vw,1.5rem);line-height:1.3;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--accent) 62%,#EAF3FF);
}
.fq-say{
  margin:clamp(18px,2.8vh,26px) 0 0;max-width:52ch;
  font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.66;color:rgba(184,197,218,.96);
}
.fq-say a{color:color-mix(in srgb,var(--accent) 86%,#fff);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  transition:border-color .4s var(--ease-out);}
.fq-say a:hover{border-bottom-color:var(--accent);}

.fq-jump{
  display:flex;flex-wrap:wrap;gap:8px 9px;
  margin-top:clamp(26px,4vh,40px);
}
.fq-jump a{
  padding:9px 16px;
  border:1px solid rgba(168,210,236,.16);
  background:rgba(255,255,255,.025);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--cx-lb);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(168,182,205,.92);
  transition:border-color .4s var(--ease-out), background .4s var(--ease-out),
             color .4s var(--ease-out), transform .4s var(--ease-out);
}
.fq-jump a:hover{
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:#F4F9FF;transform:translateY(-2px);
}

.fq-body{background:linear-gradient(180deg,#04060B,#070A12 50%,#04060B);}
.fq-g{padding:clamp(52px,8vh,92px) var(--gut);border-bottom:1px solid rgba(168,210,236,.1);}
.fq-g__in{max-width:1180px;margin-inline:auto;
  display:grid;gap:clamp(20px,3vw,56px);align-items:start;}
@media (min-width:940px){.fq-g__in{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);}}
.fq-g__hd{position:sticky;top:clamp(96px,13vh,132px);}
@media (max-width:939px){.fq-g__hd{position:static;}}
.fq-t2{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.08;letter-spacing:-.04em;
  color:var(--cx-ink);text-wrap:balance;
}
.fq-g .qs{grid-column:auto;}
/* The page's one H2, standing above the five groups rather than inside
   any of them. It is a landmark, not a section head, so it is set
   quieter than the H1 and wider than the group titles. */
.fq-t2--lead{
  max-width:1180px;
  margin:clamp(46px,7vh,78px) auto clamp(-14px,-1.5vh,-6px);
  padding-inline:var(--gut);
  font-size:clamp(1.22rem,1.8vw,1.6rem);
  color:rgba(198,212,234,.96);letter-spacing:-.03em;
}

/* the three solutions, where somebody is deciding which to read */
.fq-xr{
  grid-column:1 / -1;
  display:grid;gap:clamp(9px,1.2vw,13px);
  margin-top:clamp(18px,2.6vh,26px);
}
@media (min-width:760px){.fq-xr{grid-template-columns:repeat(3,minmax(0,1fr));}}
.fq-xr a{
  display:block;padding:clamp(15px,1.8vw,20px);
  border:1px solid rgba(168,210,236,.12);
  background:rgba(255,255,255,.02);
  transition:border-color .45s var(--ease-out), background .45s var(--ease-out),
             transform .45s var(--ease-out);
}
.fq-xr a:hover{
  border-color:color-mix(in srgb,var(--accent) 44%,transparent);
  background:linear-gradient(158deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 76%);
  transform:translateY(-3px);
}
.fq-xr b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:var(--cx-cap);line-height:1.22;letter-spacing:-.026em;color:#EFF4FE;
}
.fq-xr span{display:block;margin-top:5px;font-size:var(--cx-lb);
  letter-spacing:.02em;line-height:1.5;color:rgba(168,182,205,.9);
  font-family:var(--font-body);text-transform:none;}