:root{
  /* shared logo tokens canonical ds7.css lacks (D51 page-scoped; images already shared) */
  --w-img-logo-google: url("/assets/images/w/logo-google.svg");
  --w-img-logo-highspot: url("/assets/images/w/logo-highspot.svg");
  --w-img-logo-outreach: url("/assets/images/w/logo-outreach.png");
  --w-img-logo-seismic: url("/assets/images/w/logo-seismic.svg");
  --w-img-logo-sixsense: url("/assets/images/w/logo-sixsense.svg");
}

/* ===== shared chrome CSS (lifted verbatim from W-PRICING / W-BOOK-DEMO _chrome) ===== */
.cz-light{
  background:var(--w-bg);color:var(--w-text);
  --w-bg:#f5f5f5; --w-bg-deep:#ebebeb; --w-bg-elev:#fafafa;
  --w-card:#ffffff; --w-card-lo:#efefef; --w-card-hi:#ffffff;
  --w-text:var(--w-charcoal); --w-text-2:rgba(28,26,36,0.66); --w-text-3:rgba(28,26,36,0.62);
  --w-text-prose:#302d2e; --w-text-on-brand:#ffffff; --w-icon-ink:var(--w-charcoal);
  --w-line-soft:rgba(28,26,36,0.06); --w-line:rgba(28,26,36,0.10); --w-line-strong:rgba(28,26,36,0.16); --w-edge-top:rgba(255,255,255,0.9);
  --w-brand:var(--w-purple-ink); --w-brand-2:var(--w-purple); --w-brand-soft:rgba(152,135,244,0.10); --w-brand-line:rgba(152,135,244,0.28);
  --w-shadow-raise:0 8px 18px -8px rgba(28,26,36,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  --w-shadow-raise-soft:0 4px 10px -6px rgba(28,26,36,0.05), inset 0 1px 0 rgba(255,255,255,0.85);
  --w-shadow-recess:inset 0 1px 3px rgba(28,26,36,0.05), inset 0 -1px 0 rgba(255,255,255,0.8);
  --w-shadow-recess-deep:inset 0 2px 5px rgba(28,26,36,0.07), inset 0 -1px 0 rgba(255,255,255,0.7);
  --w-shadow-sm:0 1px 2px rgba(28,26,36,0.04); --w-shadow-md:0 4px 12px rgba(28,26,36,0.05); --w-shadow-lg:0 12px 28px rgba(28,26,36,0.07);
  --w-glow-brand:0 2px 8px rgba(28,26,36,0.05); --w-glow-brand-strong:0 6px 16px rgba(28,26,36,0.07);
  --w-glass-fill:rgba(255,255,255,0.66); --w-glass-fill-strong:rgba(255,255,255,0.86); --w-glass-tint:rgba(28,26,36,0.90);
  --w-glass-fill-soft:rgba(28,26,36,0.03); --w-glass-line:rgba(28,26,36,0.10); --w-glass-line-bright:rgba(28,26,36,0.16);
  --w-glass-rim-top:rgba(255,255,255,0.95); --w-glass-rim-bottom:rgba(28,26,36,0.05);
  --w-glass-blur:blur(18px) saturate(140%); --w-glass-blur-lg:blur(22px) saturate(145%);
  --w-glass-shadow:0 10px 24px rgba(28,26,36,0.06); --w-glass-shadow-soft:0 4px 12px rgba(28,26,36,0.05);
  --w-cta-fill:var(--w-glass-tint); --w-cta-text:#ffffff; --w-cta-glow:var(--w-shadow-md); --w-cta-glow-strong:var(--w-shadow-lg);
  --w-card-brand-wash:linear-gradient(160deg, rgba(28,26,36,0.06), rgba(28,26,36,0.015)); --w-card-brand-line:var(--w-line-strong);
  --w-tag-brand-bg:rgba(28,26,36,0.06); --w-tag-brand-fg:var(--w-text); --w-focus:rgba(28,26,36,0.55);
  --w-grad-surface:linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --w-grad-surface-hi:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --w-grad-recess:linear-gradient(180deg, #ededed 0%, #e3e3e3 100%);
}
/* keep glass legible if the OS asks for less transparency, inside a light band */
@media (prefers-reduced-transparency: reduce){
  .cz-light .w-glass,.cz-light .w-btn--glass,.cz-light .w-tag,.cz-light .w-card,.cz-light .w-cta-band{background:var(--w-card);border-color:var(--w-line)}
}

/* ===== W-CARLY-SOLUTIONS-CUSTOMER-SUCCESS page-local styles =====
   2026-07-27 (Solutions Overhaul S4) — NET-NEW Carly copy built on the S2 Experts+ solutions
   TEMPLATE. Rebuilt from solutions-customer-success.css with only the page-local :root token
   block swapped, then extended (the S3 method — guarantees zero template drift).
   Families ss-hero / ss-trust / ss-pcard / ss-scard / ss-check / ss-flow / ss-res / ss-tabs /
   ss-pane / ss-mock / ss-xc / ss-mail / ss-tec / ss-mig / ss-int / ss-cta__notes reused verbatim.
   The cs-* kit (versus-card comparison, health bar, avatar stack) carries over from the Experts+ CS page this page reframes.
   Section order: hero · trust · problem · solution(5) · how · results · use cases · comparison · integrations · CTA. */
/* page-local asset tokens (base64'd at bundle) */
:root{
  --w-img-ss-hero:url("/assets/images/w/carly-solutions-customer-success/ss-hero.webp");
  /* standardized rhythm tokens (used across every section) */
  --w-section-head-gap:clamp(40px,4vw,56px);   /* space from a section head to its content grid */
}

/* asymmetric section spacing (approved pattern: tight top, generous bottom) — uniform + more air */
.w-section{padding-block:clamp(52px,3vw + 1rem,84px) clamp(76px,4.5vw + 1.7rem,120px)}
.w-section--hero{padding-block:clamp(96px,10vh + 2rem,150px) clamp(84px,7vw + 2rem,140px)}
/* the trust marquee is a thin strip — keep it tight, it's not a full section */
.ss-trust{padding-block:clamp(30px,3.2vw,50px) clamp(6px,1vw,14px)!important}

/* STANDARDIZED head→content gap: zero the head's own bottom margin; every grid owns the gap */
.w-section-head{margin-bottom:0}
/* .ss-results__band swapped for .ss-res__grid 2026-07-29: the band was deleted, so the testimonial
   grid is now the first element under §6's head and has to carry the section-head gap itself. */
.ss-pain__grid,.ss-sol__grid,.ss-flow,.ss-res__grid,.ss-tabs,.ss-int__band{margin-top:var(--w-section-head-gap)!important}

/* ============ §1 HERO — full-ratio PHOTO hero (ss1), copy overlaid (our hero styling) ============ */
.ss-hero{position:relative;padding:0;overflow:hidden;background:var(--w-bg)}
.ss-hero__media{width:100%;aspect-ratio:6068/3400;
  background:var(--w-img-ss-hero) center/contain no-repeat, var(--w-bg)}
/* title top-center · body+CTA bottom · downward dark fade */
.ss-hero__panel{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;text-align:center;padding:clamp(30px,6vh,72px) clamp(24px,5vw,64px) clamp(30px,5vh,60px)}
/* bottom-up legibility scrim (see MEMORY reference_website3_contrast_scrim_protocol) — sits between the photo
   and the copy; darkens the lower two-thirds where the dense copy lives, clears near the top so the photo breathes */
.ss-hero__panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top, rgba(10,9,15,.80) 0%, rgba(10,9,15,.66) 26%, rgba(10,9,15,.34) 48%, rgba(10,9,15,0) 68%)}
/* copy still carries a soft text-shadow as a second line of defense */
.ss-hero__top,.ss-hero__bottom{position:relative;z-index:1;width:100%;max-width:920px;margin-inline:auto;
  text-shadow:0 2px 22px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.5)}
/* The top block runs wider than the bottom one so each H1 SENTENCE fits its own line at full size.
   Paired with the display:block rule on .w-accent below — at 920px the first sentence still wrapped
   and the forced break just moved the problem. The two numbers are ONE decision; if the H1 copy
   changes, re-check both. The bottom block stays at 920 because its lead has its own 60ch cap. */
.ss-hero__top{max-width:1120px}
/* localized halo behind the bottom block — the lead/CTA/stat group sits over the BRIGHT dashboard
   render, which the page-wide scrim alone can't beat (see MEMORY feedback_website3_contrast_scrim_protocol).
   Elliptical so it fades out at the edges and never reads as a box. Desktop-only: under 1024 the
   panel is a solid light surface and needs none of this. */
.ss-hero__bottom::before{content:"";position:absolute;z-index:-1;inset:-36px -32vw -28px;pointer-events:none;
  background:radial-gradient(52% 108% at 50% 52%, rgba(10,9,15,.82) 0%, rgba(10,9,15,.62) 40%, rgba(10,9,15,.24) 64%, rgba(10,9,15,0) 80%)}
/* TWO-PART H1 — sizes and structure aligned to /carly/solutions/sales/ 2026-07-29 (Jeff's call) so
   all three Carly solutions heroes match. This page previously ran a single .ss-hero__h at
   clamp(34px,5.1vw,74px) — visibly larger than the sales hero — with .w-accent cancelled back to
   plain white, which made the headline one flat voice AND threw away the gradient.
   The size STEP between A and B is deliberate: 66px assertion, 43px answer. Don't level them.
   Do NOT reinstate a `.ss-hero__h .w-accent{color:#fff}` override — that is the rule that was
   removed here, and it silently kills .w-accent--hero's gradient. */
.ss-hero__h{margin-top:16px;letter-spacing:-.025em;font-weight:var(--w-fw-black);color:#fff}
.ss-hero__h-a{display:block;font-size:clamp(34px,4.6vw,66px);line-height:1.0;letter-spacing:-.03em}
/* the gap between the assertion and the answer IS the beat between the two voices — .24em read as
   a wrapped continuation of line A rather than a separate speaker. em-based so it tracks the
   responsive font-size at every breakpoint. */
.ss-hero__h-b{display:block;margin-top:.52em;font-size:clamp(24px,3vw,43px);line-height:1.14}
.ss-hero__lead{margin:0 auto;max-width:60ch;color:rgba(255,255,255,.92)}
.ss-hero__actions{margin-top:24px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.ss-hero__panel .w-badge{background:rgba(28,26,36,.55);border-color:rgba(255,255,255,.24);color:#fff}
.ss-hero__actions .w-btn--primary{background:rgba(28,26,36,.62);color:#fff;border-color:rgba(255,255,255,.24)}
.ss-hero__actions .w-btn--primary:hover{background:rgba(28,26,36,.78)}
/* DESKTOP HERO FRAME + SPACING — ported from the sales and marketing Carly solutions heroes
   2026-07-29 so all three sit identically. This hero was the last one still on the original frame
   and rendered 807px against their 695px. Three things happen here and they are ONE decision:
   1. HEIGHT CAP. A full-ratio frame is taller than the copy needs, and space-between then
      distributes the surplus into a dead band between the H1 and the CTA group — which pushed the
      stat trio onto the fold, where it was cut in half. Cap the frame against the viewport (nav +
      trust label + logo row ≈ 205px reserved) and switch the photo to cover cropped from the TOP
      (50% 100%), so the desk and the laptop at the bottom edge stay whole.
   2. TIGHTEN. Stop distributing leftover height: stack badge → H1 → lead → CTA → stats as ONE
      block with an explicit gap, so the lower third stays clean photograph.
   3. FLIP THE SCRIM. With the copy in the top half, the bottom-up scrim was darkening empty photo
      and leaving the headline exposed. Falling downward it covers the copy evenly — and needs no
      localized halo, which is the thing that draws a visible band across an H1. The
      .ss-hero__bottom radial is switched OFF here for exactly that reason; don't reintroduce it. */
@media(min-width:1025px){
  .ss-hero__media{max-height:calc(100vh - 205px);background-size:cover;background-position:50% 100%}
  .ss-hero__panel{justify-content:flex-start;gap:clamp(16px,2.6vh,30px);
    padding-block:clamp(22px,3.4vh,42px) clamp(24px,3.4vh,42px)}
  .ss-hero__h{margin-top:14px}
  .ss-hero__panel .ss-hero__stats{margin-top:clamp(18px,2.6vh,28px)}
  .ss-hero__panel::before{background:
    linear-gradient(to bottom, rgba(10,9,15,.84) 0%, rgba(10,9,15,.78) 28%, rgba(10,9,15,.64) 52%,
      rgba(10,9,15,.50) 72%, rgba(10,9,15,.20) 87%, rgba(10,9,15,0) 97%),
    linear-gradient(to top, rgba(10,9,15,.30) 0%, rgba(10,9,15,0) 12%)}
  .ss-hero__bottom::before{display:none}
}
@media(max-width:1180px){
  .ss-hero__h-a{font-size:clamp(30px,4.8vw,52px)}
  .ss-hero__h-b{font-size:clamp(22px,3.1vw,34px)}
}
@media(max-width:1024px){
  .ss-hero{display:flex;flex-direction:column}
  .ss-hero__media{order:2}
  .ss-hero__panel{position:static;order:1;display:block;background:var(--w-bg);
    padding:clamp(30px,5vw,46px) var(--w-container-pad) clamp(18px,4vw,30px)}
  .ss-hero__panel::before,.ss-hero__bottom::before{display:none}
  .ss-hero__bottom{margin-top:18px}
  /* Only line A flips to ink on the light panel. .ss-hero__h-b deliberately keeps its
     .w-accent--hero gradient at every width — it is the brand voice of the headline, and the
     sales hero does the same. Don't add __h-b to this selector. */
  .ss-hero__h,.ss-hero__h-a{color:var(--w-text)}
  .ss-hero__lead{color:var(--w-text-2);max-width:58ch;margin-inline:0}
  .ss-hero__top,.ss-hero__bottom{text-align:left;margin-inline:0;text-shadow:none}
  .ss-hero__actions{justify-content:flex-start}
  .ss-hero__panel .w-badge{background:var(--w-glass-fill);border-color:var(--w-glass-line);color:var(--w-text)}
  .ss-hero__actions .w-btn--primary{background:var(--w-grad-brand);border-color:transparent;color:#fff}
}

/* ============ §2 TRUST MARQUEE — dark strip (reuses foundation .w-marquee) ============ */
.ss-trust{background:var(--w-bg);padding-block:clamp(28px,3.2vw,48px) clamp(6px,1vw,14px)}
.ss-trust__inner{position:relative;z-index:1}
.ss-trust__inner .w-trust-label{margin-bottom:var(--w-s-4)}

/* ============ §6 HOW IT WORKS — light, connected 4-step TIMELINE ============ */
.ss-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px);margin-top:clamp(40px,4.4vw,64px)}
.ss-flow::before{content:"";position:absolute;top:24px;left:12.5%;right:12.5%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--w-brand-line) 12%,var(--w-brand-line) 88%,transparent)}
.ss-flow__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.ss-flow__num{position:relative;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--w-card);border:2px solid var(--w-brand-line);box-shadow:0 8px 18px -8px rgba(28,26,36,.22);
  font-family:var(--w-font-mono);font-weight:700;font-size:18px;color:var(--w-brand)}
.ss-flow__num b{position:relative;z-index:1;font:inherit}
/* progress ring traced around each step's number — animated below */
.ss-flow__ring{position:absolute;top:50%;left:50%;width:60px;height:60px;z-index:0;
  transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none}
.ss-flow__ring-track{fill:none;stroke:var(--w-brand-line);stroke-width:1.5;opacity:.5}
.ss-flow__ring-fill{fill:none;stroke:url(#ssFlowGrad);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:157;stroke-dashoffset:157}
/* connector segments between steps 1↔2, 2↔3, 3↔4 — sit atop the static .ss-flow::before track */
.ss-flow__seg{position:absolute;top:24px;height:2px;z-index:0;overflow:hidden;border-radius:2px}
.ss-flow__seg--1{left:12.5%;width:25%}
.ss-flow__seg--2{left:37.5%;width:25%}
.ss-flow__seg--3{left:62.5%;width:25%}
.ss-flow__seg-fill{display:block;width:100%;height:100%;border-radius:2px;background:var(--w-grad-brand);
  transform-origin:left center;transform:scaleX(0);box-shadow:0 0 10px 1px rgba(152,135,244,.45)}
.ss-flow__txt{display:flex;flex-direction:column;gap:6px;align-items:center}
.ss-flow__step h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--w-text)}
.ss-flow__step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--w-text-2);max-width:26ch}
.ss-flow__step p b{color:var(--w-text);font-weight:700}
/* Reveal cascade 1->2->3->4 @ 250ms. The foundation .w-stagger rule indexes by :nth-child,
   but .ss-flow's first four children are the <svg> defs + three .ss-flow__seg connectors,
   so the steps land on nth-child 5-8 (5,6 get the tail delays; 7,8 fall off the end and fire
   first). Re-index off :nth-of-type - the steps are the only <div> children - matching the
   nth-of-type pattern the ring/segment animations below already use. */
.ss-flow.w-stagger{--w-stagger-step:250ms}
.ss-flow.w-stagger>.ss-flow__step:nth-of-type(1){--w-stagger-i:0}
.ss-flow.w-stagger>.ss-flow__step:nth-of-type(2){--w-stagger-i:1}
.ss-flow.w-stagger>.ss-flow__step:nth-of-type(3){--w-stagger-i:2}
.ss-flow.w-stagger>.ss-flow__step:nth-of-type(4){--w-stagger-i:3}
@media(max-width:760px){
  .ss-flow{grid-template-columns:1fr;gap:0;max-width:440px;margin-inline:auto}
  .ss-flow::before{top:6px;bottom:34px;left:24px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,transparent,var(--w-brand-line) 8%,var(--w-brand-line) 92%,transparent)}
  .ss-flow__seg{display:none} /* connector sweep is desktop-grid-relative; mobile keeps the static vertical track */
  .ss-flow__step{flex-direction:row;align-items:flex-start;text-align:left;gap:18px;padding-bottom:30px}
  .ss-flow__step:last-child{padding-bottom:0}
  .ss-flow__txt{align-items:flex-start;text-align:left;padding-top:6px}
  .ss-flow__step p{max-width:none}
}
/* sequenced choreography: ring 1 traces → pops → line 1-2 sweeps in → ring 2 traces → ... → ring 4 → hold → loop.
   Gated on .ss-flow:has(a revealed step) so it starts the moment the section scrolls into view. */
@media(prefers-reduced-motion:no-preference){
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__ring-fill{animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__num{animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__seg-fill{animation-duration:10s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__step:nth-of-type(1) .ss-flow__ring-fill{animation-name:csFlowRing1}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__step:nth-of-type(1) .ss-flow__num{animation-name:csFlowPop1}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__step:nth-of-type(2) .ss-flow__ring-fill{animation-name:csFlowRing2}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__step:nth-of-type(2) .ss-flow__num{animation-name:csFlowPop2}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__step:nth-of-type(3) .ss-flow__ring-fill{animation-name:csFlowRing3}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__step:nth-of-type(3) .ss-flow__num{animation-name:csFlowPop3}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__step:nth-of-type(4) .ss-flow__ring-fill{animation-name:csFlowRing4}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__step:nth-of-type(4) .ss-flow__num{animation-name:csFlowPop4}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__seg--1 .ss-flow__seg-fill{animation-name:csFlowSeg1}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__seg--2 .ss-flow__seg-fill{animation-name:csFlowSeg2}
  .ss-flow:has(.ss-flow__step.is-visible) .ss-flow__seg--3 .ss-flow__seg-fill{animation-name:csFlowSeg3}
}
@keyframes csFlowRing1{0%,2%{stroke-dashoffset:157}12%{stroke-dashoffset:0}93%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:157}}
@keyframes csFlowRing2{0%,28%{stroke-dashoffset:157}38%{stroke-dashoffset:0}93%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:157}}
@keyframes csFlowRing3{0%,54%{stroke-dashoffset:157}64%{stroke-dashoffset:0}93%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:157}}
@keyframes csFlowRing4{0%,80%{stroke-dashoffset:157}90%{stroke-dashoffset:0}93%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:157}}
@keyframes csFlowPop1{0%,11%{transform:scale(1)}13%{transform:scale(1.12)}16%,100%{transform:scale(1)}}
@keyframes csFlowPop2{0%,37%{transform:scale(1)}39%{transform:scale(1.12)}42%,100%{transform:scale(1)}}
@keyframes csFlowPop3{0%,63%{transform:scale(1)}65%{transform:scale(1.12)}68%,100%{transform:scale(1)}}
@keyframes csFlowPop4{0%,89%{transform:scale(1)}91%{transform:scale(1.12)}94%,100%{transform:scale(1)}}
@keyframes csFlowSeg1{0%,17%{transform:scaleX(0);opacity:.4}26%{transform:scaleX(1);opacity:1}93%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(0);opacity:.4}}
@keyframes csFlowSeg2{0%,43%{transform:scaleX(0);opacity:.4}52%{transform:scaleX(1);opacity:1}93%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(0);opacity:.4}}
@keyframes csFlowSeg3{0%,69%{transform:scaleX(0);opacity:.4}78%{transform:scaleX(1);opacity:1}93%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(0);opacity:.4}}
@media(prefers-reduced-motion:reduce){
  .ss-flow__ring-fill{stroke-dashoffset:0}
  .ss-flow__seg-fill{transform:scaleX(1);opacity:1}
}

/* ============ §10 RESULTS — light, testimonial trio ============ */
.ss-res__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);margin-top:clamp(30px,3.4vw,48px);align-items:stretch}
.ss-res{display:flex;flex-direction:column;gap:16px;padding:28px 26px;border-radius:20px;
  background:var(--w-card);border:1px solid var(--w-line-soft);box-shadow:var(--w-shadow-lg)}
/* .ss-res__metric (the mono pill each testimonial used to open on) was DELETED 2026-07-29 with the
   markup that used it. Testimonials now open on .ss-res__v — the 44px numeral in the shared sheet.
   Deleted rather than left unused: this sheet loads after the shared one, so dead rules here can
   only ever shadow live ones there.
   The hairline separates evidence from testimony, matching .ss-sfc__t in the shared sheet. */
.ss-res__q{margin:0;flex:1;padding-top:16px;border-top:1px solid var(--w-line);
  font-size:15.5px;line-height:1.62;color:var(--w-text);font-weight:500}
.ss-res__who{display:flex;align-items:center;gap:12px}
.ss-res__av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--w-card-lo) center/cover no-repeat;box-shadow:0 0 0 2px rgba(28,26,36,.08)}
/* these pages quote unnamed-company personas — monogram avatars, no photo tokens */
.ss-res__av--mono{display:grid;place-items:center;background:var(--w-grad-brand);color:#fff;
  font-size:14px;font-weight:var(--w-fw-bold);letter-spacing:.02em;box-shadow:none}
.ss-res__id{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;line-height:1.35}
.ss-res__id b{font-size:13.5px;color:var(--w-text)}
.ss-res__id span{font-size:12px;color:var(--w-text-3)}
@media(max-width:860px){.ss-res__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ============ §1b HERO STAT TRIO — 2.0 hero-stats, inside the photo panel ============ */
.ss-hero__stats{margin-top:clamp(22px,3vh,34px);justify-content:center;gap:8px;max-width:760px;margin-inline:auto}
.ss-hero__stats .w-stat{align-items:center;text-align:center;flex:0 1 200px}
.ss-hero__stats .w-stat__value{font-size:clamp(30px,3.4vw,46px);font-weight:var(--w-fw-black);color:#fff}
.ss-hero__stats .w-stat__label{font-size:13.5px;color:rgba(255,255,255,.82)}
/* Source line under each hero figure — added 2026-07-29 with the sourced trio, same treatment the
   two sibling Carly heroes use. NOT decoration: the arsenal requires these three figures carry
   inline attribution, and the 72% one has to disclose that it is the top of a 66–72% band. If this
   line is ever removed, the figures above it have to come out with it.
   margin-top:auto bottom-anchors all three onto one baseline. The labels are different lengths
   (stat 1 runs longer than 2 and 3), and without it stat 1's attribution drops below its siblings'
   and the row reads as misaligned — the marketing hero hit exactly this at 1180. The .w-stat items
   are stretched to equal height by the flex row, so auto has something to push against. */
.ss-hero__stats .w-stat__detail{font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.78);max-width:24ch;margin-inline:auto;margin-top:auto}
@media(max-width:1024px){
  .ss-hero__stats{margin-inline:0;justify-content:flex-start}
  .ss-hero__stats .w-stat{align-items:flex-start;text-align:left;padding-left:0;padding-right:var(--w-s-5)}
  .ss-hero__stats .w-stat__value{color:var(--w-text)}
  .ss-hero__stats .w-stat__label{color:var(--w-text-2)}
  .ss-hero__stats .w-stat__detail{color:var(--w-text-3);margin-inline:0}
}
@media(max-width:540px){
  /* DS7 stacks .w-stat full-width under 600 and swaps the vertical rule for a border-top plus 16px
     of padding. This hero keeps the trio in a ROW at these widths (flex-basis 90 below), so that
     stacked-layout border is wrong here: it drew a rule above stats 2 and 3 but not stat 1 (which
     is :first-child), and its padding-top pushed those two down so the numerals sat on different
     baselines. Reset both. */
  .ss-hero__stats .w-stat{flex:1 1 90px;min-width:90px;padding-right:var(--w-s-3);border-top:none;padding-top:0}
  .ss-hero__stats .w-stat__value{font-size:28px}
  .ss-hero__stats .w-stat__label{font-size:12px}
  .ss-hero__stats .w-stat__detail{font-size:10.5px}
}

/* ============ SHARED · check line ============
   .ss-check now lives in /assets/css/w/shared/ss-statcard.css, which this page opts into via
   `sharedCSS: [ss-statcard]`. The page-local copy was DELETED 2026-07-29, not left in place: the
   page sheet loads AFTER the shared one, so an identical-specificity duplicate here would win
   silently and any future fix to the shared line would appear to do nothing on this page. */

/* ============ §3 THE PROBLEM — dark, 3 stat-first cards (.ss-sfc) ============
   REBUILT 2026-07-29. The old .ss-pcard block (card shell, stat footer, .ss-pcard__v gradient
   numeral, .ss-pcard__l label) was DELETED with the markup it styled — it is superseded by the
   shared .ss-sfc component. Leaving it would have been worse than useless: .ss-pcard set its own
   flex gap, and this sheet loads after the shared one, so the dead rule would have overridden the
   component the section now uses.
   What stays page-local: the grid gap and the column breakpoint only. Section layout differs per
   page, so the shared sheet deliberately does not own it. */
.ss-pain__grid{gap:clamp(16px,2vw,24px)}
@media(max-width:900px){.ss-pain__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ============ §4 THE SOLUTION — light, 3 stat-first cards answering §3 1:1 ============
   REBUILT 2026-07-29. The old .ss-scard block and the page-local .ss-scard__pts override were
   DELETED with the 5-card markup they styled. .ss-scard__pts still exists — but in the SHARED
   sheet, as a vertical stack inside the disclosure. The page-local version set
   `flex-wrap:wrap` with a two-axis gap, which laid the check-lines out in ROWS; because this sheet
   loads after the shared one it would have won, and the disclosure's three lines would have
   wrapped into an unreadable grid instead of stacking. Do not reinstate it.
   What stays page-local: the grid gap and the column breakpoint only. The breakpoint moved
   820 -> 900 to match .ss-pain__grid, because §3 and §4 are now the same 3-up component and must
   collapse to one column at the same width or the mapping visibly breaks mid-page. */
.ss-sol__grid{gap:clamp(16px,2vw,24px)}
@media(max-width:900px){.ss-sol__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ============ §6 RESULTS — dark; 4-stat band above the named customer stories ============ */
/* The .ss-results__band rules were DELETED 2026-07-29 with the band itself — see the note in the
   njk. §6's figures now live on .ss-res__v inside the testimonial cards. */
.ss-res__grid--2{grid-template-columns:repeat(2,1fr);max-width:900px;margin-inline:auto}
@media(max-width:860px){.ss-res__grid--2{grid-template-columns:1fr;max-width:520px}}

/* ============ §7 USE CASES — light, 4-tab rail + split panes (lifted from ebk-tabs/ebk-pane) ============ */

/* §7's head is TWO SENTENCES ("The conversation you can't have." / "Somebody else already can."),
   not one sentence with an accented tail like every other section head on this page. Left to flow
   inline it broke mid-clause at 1440 and 1180 — "The conversation you can't / have. Somebody else
   already can." — splitting "can't have" and stranding the period at the head of line 2 against the
   italic, where it read as a detached dot. Forcing the accent onto its own line makes the two
   sentences two lines at every width (390 already wrapped there naturally, so mobile is unchanged).
   Scoped to .ss-uc ONLY: the other section heads on this page are single sentences and MUST keep
   flowing inline, so do not lift this to .w-section-head__title. Verified in capture 2026-07-30. */
.ss-uc .w-section-head__title .w-accent{display:block}

.ss-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:var(--w-s-7);
  padding:5px;border-radius:8px;background:var(--w-glass-fill-soft);border:1px solid var(--w-line-soft);
  width:max-content;max-width:100%;margin-inline:auto}
.ss-tab{appearance:none;border:0;cursor:pointer;font-family:var(--w-font);
  font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:var(--w-text-3);
  padding:10px 18px;border-radius:4px;background:transparent;
  transition:color .25s cubic-bezier(.16,1,.3,1),background .25s cubic-bezier(.16,1,.3,1)}
.ss-tab:hover{color:var(--w-text)}
.ss-tab.is-on{color:var(--w-cta-text);background:var(--w-cta-fill);box-shadow:var(--w-cta-glow)}
.ss-tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-brand-soft)}
.ss-pane[hidden]{display:none}
.ss-pane__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,4vw,64px);align-items:center}
.ss-pane__grid>*{min-width:0}
.ss-pane__t{margin:0;font-size:var(--w-fs-h3);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);
  line-height:var(--w-lh-snug);color:var(--w-text)}
.ss-pane__lead{margin:var(--w-s-4) 0 0;font-size:var(--w-fs-lead);line-height:var(--w-lh-normal);color:var(--w-text-2);max-width:48ch}
.ss-pane__pts{display:flex;flex-direction:column;gap:var(--w-s-3);margin-top:var(--w-s-5)}
@media(max-width:900px){
  .ss-pane__grid{grid-template-columns:1fr;gap:var(--w-s-6)}
  .ss-tabs{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .ss-tabs::-webkit-scrollbar{display:none}
  .ss-tab{white-space:nowrap}
}

/* ============ §7b PRODUCT MOCKS — all-CSS window frames (pattern-lifted from cri-win) ============ */
.ss-mock{border-radius:var(--w-r-lg);overflow:hidden;min-width:0;background:var(--w-card);
  border:1px solid var(--w-line);box-shadow:var(--w-shadow-lg)}
.ss-mock__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;min-width:0;
  background:var(--w-grad-recess);border-bottom:1px solid var(--w-line-soft)}
.ss-mock__bar>span{width:8px;height:8px;flex:none;border-radius:var(--w-r-full);background:var(--w-line-strong)}
.ss-mock__bar em{margin-left:10px;min-width:0;font-style:normal;font-family:var(--w-font-mono);
  font-size:var(--w-fs-xs);color:var(--w-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-mock__body{padding:var(--w-s-5);display:flex;flex-direction:column;gap:var(--w-s-4)}
.ss-mock__body--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--w-s-4)}
@media(max-width:520px){.ss-mock__body--grid{grid-template-columns:1fr}}

/* expert mini-card (pane 1) */
.ss-xc{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--w-r-md);
  background:var(--w-bg-elev);border:1px solid var(--w-line-soft)}
.ss-xc__h{display:flex;align-items:center;gap:10px;min-width:0}
.ss-xc__av{flex:none;width:36px;height:36px;border-radius:var(--w-r-full);display:grid;place-items:center;
  font-size:12.5px;font-weight:var(--w-fw-bold);color:#fff;background:var(--w-grad-brand)}
.ss-xc__av--alt{background:var(--w-glass-tint)}
.ss-xc__av .w-icon{width:18px;height:18px;color:#fff}
.ss-xc__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ss-xc__tx b{font-size:var(--w-fs-sm);font-weight:var(--w-fw-bold);color:var(--w-text)}
.ss-xc__tx i{font-style:normal;font-size:var(--w-fs-xs);color:var(--w-text-3)}
.ss-xc__tags{display:flex;flex-wrap:wrap;gap:6px}
.ss-xc__tags span{padding:4px 9px;border-radius:var(--w-r-pill);font-size:11px;font-weight:var(--w-fw-semi);
  background:var(--w-brand-soft);color:var(--w-brand);border:1px solid var(--w-brand-line)}
.ss-xc__cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;
  border-radius:var(--w-r-sm);font-size:var(--w-fs-xs);font-weight:var(--w-fw-semi);
  background:var(--w-glass-tint);color:#fff}
.ss-xc__cta .w-icon{width:14px;height:14px}

/* chips — shared by the email tracking row, the tech filter bar and the competitive badge */
.ss-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--w-r-pill);
  font-size:11.5px;font-weight:var(--w-fw-semi);color:var(--w-text-3);
  background:var(--w-glass-fill-soft);border:1px solid var(--w-line)}
.ss-chip .w-icon{width:13px;height:13px}
.ss-chip.is-on{color:var(--w-brand);background:var(--w-brand-soft);border-color:var(--w-brand-line)}
/* SOURCE-STORY CHIP (reworked 2026-08-05). Two problems, one visible and one structural.
   VISIBLE: .ss-chip carried --w-r-full, which is 50% — not a pill. On a 305x32 chip that resolves
   to a 152px/16px ellipse, so the ends bowed outward and the whole shape read as a squashed oval.
   Now --w-r-pill (999px), which clamps to a true stadium at any width.
   STRUCTURAL: a flat gradient slab is the loudest thing on a light mock and competes with the
   product UI it is supposed to annotate. It is a PROVENANCE label — "this asset came from a real
   customer story" — so it should read like a seal, not a button. Treatment: deep brand ink so the
   white text clears AA, a 1px top rim and a soft brand-tinted drop shadow for lift off the mock,
   and the icon demoted into its own translucent well so the eye lands on the story name.
   CONTRAST: this is 11.5px text, so it needs 4.5:1 — NOT the 3:1 large-text bar. The old
   --w-grad-brand fill ran purple→lavender and measured 2.95:1 falling to 2.48:1, i.e. the chip
   was failing AA before this rework. Every stop below is measured against white:
   #4b3cc4 = 7.6:1 · #5b4bd4 = 6.17:1 · --w-purple-ink #6f5fe0 = 4.78:1. Do not lighten the end
   stop: --w-purple is 2.95:1 and --w-lavender is 2.48:1. */
.ss-chip--brand{align-self:flex-start;position:relative;gap:8px;padding:7px 14px 7px 8px;
  color:#fff;border:0;isolation:isolate;
  background:linear-gradient(118deg,#4b3cc4 0%,#5b4bd4 55%,var(--w-purple-ink) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -8px rgba(111,95,224,.75),
             0 1px 2px rgba(28,26,36,.18);
  letter-spacing:.005em}
.ss-chip--brand .w-icon{width:12px;height:12px;color:#fff;flex:none}
/* the icon well — a 22px disc is one of the few places --w-r-full is CORRECT */
.ss-chip--brand::before{content:"";position:absolute;left:8px;top:50%;translate:0 -50%;
  width:22px;height:22px;border-radius:var(--w-r-full);z-index:-1;
  background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.ss-chip--brand>.w-icon:first-child{margin-inline:5px}

/* email / sequence mock (pane 2) */
.ss-mail__h{display:flex;align-items:center;gap:10px;padding-bottom:var(--w-s-4);border-bottom:1px solid var(--w-line-soft)}
.ss-mail__h .ss-xc__tx{flex:1}
.ss-mail__t{flex:none;font-style:normal;font-size:var(--w-fs-xs);color:var(--w-text-3)}
.ss-mail__p{margin:0;font-size:var(--w-fs-sm);line-height:1.55;color:var(--w-text-2)}
.ss-mail__cta{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--w-r-md);
  background:var(--w-brand-soft);border:1px solid var(--w-brand-line)}
.ss-mail__cta .ss-xc__tx{flex:1;min-width:0}
.ss-mail__ic{flex:none;width:34px;height:34px;border-radius:var(--w-r-sm);display:grid;place-items:center;
  background:var(--w-card);border:1px solid var(--w-brand-line);color:var(--w-brand)}
.ss-mail__ic .w-icon{width:17px;height:17px}
.ss-mail__btn{flex:none;padding:8px 12px;border-radius:var(--w-r-sm);font-size:var(--w-fs-xs);
  font-weight:var(--w-fw-semi);background:var(--w-glass-tint);color:#fff}
.ss-mail__track{display:flex;flex-wrap:wrap;gap:8px}

/* technical matching mock (pane 3) */
.ss-filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:var(--w-s-4);border-bottom:1px solid var(--w-line-soft)}
.ss-tec{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--w-r-md);
  background:var(--w-bg-elev);border:1px solid var(--w-line-soft)}
.ss-tec .ss-xc__tx{flex:1;min-width:0}
.ss-tec__creds{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.ss-tec__creds span{padding:3px 7px;border-radius:var(--w-r-pill);font-size:10.5px;font-weight:var(--w-fw-semi);
  background:var(--w-glass-fill-soft);color:var(--w-text-3);border:1px solid var(--w-line)}
.ss-tec__score{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px}
.ss-tec__score b{font-size:17px;font-weight:var(--w-fw-black);letter-spacing:-.02em;width:max-content;
  background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ss-tec__score i{font-style:normal;font-size:10.5px;color:var(--w-text-3)}

/* competitive migration mock (pane 4) */
.ss-mig{display:flex;flex-direction:column;gap:var(--w-s-4);padding:16px;border-radius:var(--w-r-md);
  background:var(--w-bg-elev);border:1px solid var(--w-line-soft)}
.ss-mig__who{display:flex;align-items:center;gap:10px;min-width:0}
.ss-mig__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ss-mig__s{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;
  border-radius:var(--w-r-sm);background:var(--w-card);border:1px solid var(--w-line-soft)}
.ss-mig__s b{font-size:16px;font-weight:var(--w-fw-black);letter-spacing:-.02em;color:var(--w-text)}
.ss-mig__s i{font-style:normal;font-size:10.5px;color:var(--w-text-3);text-align:center}
.ss-mig__q{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:var(--w-fs-xs);line-height:1.55;
  font-style:italic;color:var(--w-text-2)}
.ss-mig__q .w-icon{width:15px;height:15px;flex:none;margin-top:2px;color:var(--w-brand-2)}
.ss-mig__cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 14px;
  border-radius:var(--w-r-sm);font-size:var(--w-fs-xs);font-weight:var(--w-fw-semi);
  background:var(--w-glass-tint);color:#fff}
.ss-mig__cta .w-icon{width:14px;height:14px}

/* ============ INTEGRATIONS — band, marquee treatment and route-out now live in
   assets/css/w/shared/ss-integrations.css (opted in via sharedCSS). Rules were DELETED
   here 2026-07-30, not left unused: this sheet loads AFTER the shared one, so a leftover
   copy could only ever silently shadow the shared rule. Add page-local overrides below
   this line only if this page genuinely needs to differ. ============ */



/* ============ §9 FINAL CTA — reassurance notes under the band actions ============ */
.ss-cta__notes{display:flex;align-items:center;justify-content:center;gap:var(--w-s-5);flex-wrap:wrap;
  margin-top:var(--w-s-5)}
.ss-cta__notes span{display:inline-flex;align-items:center;gap:7px;font-size:var(--w-fs-xs);color:var(--w-text-3)}
.ss-cta__notes .w-icon{width:14px;height:14px;color:var(--w-brand-2)}

/* ============ ADOBE motion — staggered scale-in on card rows (house language) ============ */
/* (uses foundation .w-reveal--scale + .w-stagger; nothing page-local needed beyond markup) */

/* ---- shared responsive ---- */
@media(max-width:540px){
  .ss-hero__actions .w-btn{width:100%;justify-content:center}
  .w-cta-band__actions .w-btn{width:100%;justify-content:center}
  .ss-int__cta .w-btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .ss-tab{transition:none}
}

/* ============ §7b USE-CASE MOCK EXTRAS — health bar + avatar stack ============ */
/* account-health bar (Retention pane) */
.cs-bar{display:block;height:10px;border-radius:var(--w-r-pill);overflow:hidden;
  background:var(--w-line);border:1px solid var(--w-line-soft)}
.cs-bar__fill{display:block;height:100%;border-radius:var(--w-r-pill);background:var(--w-grad-brand)}
.cs-bar__info{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.cs-bar__score{font-size:22px;font-weight:var(--w-fw-black);letter-spacing:-.02em;line-height:1;width:max-content;
  background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cs-bar__state{font-size:11.5px;font-weight:var(--w-fw-semi);color:var(--w-brand)}
.cs-mockhead{font-size:10.5px;font-weight:var(--w-fw-bold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--w-text-3)}

/* overlapping community avatar stack (Community pane) */
.cs-stack{display:flex;align-items:center}
/* ~20% overlap, and the FIRST avatar sits on top so each set of initials stays legible */
.cs-stack .ss-xc__av{position:relative;width:34px;height:34px;font-size:11px;margin-left:-7px;
  box-shadow:0 0 0 2px var(--w-bg-elev)}
.cs-stack .ss-xc__av:first-child{margin-left:0}
.cs-stack .ss-xc__av:nth-child(1){z-index:5}
.cs-stack .ss-xc__av:nth-child(2){z-index:4}
.cs-stack .ss-xc__av:nth-child(3){z-index:3}
.cs-stack .ss-xc__av:nth-child(4){z-index:2}
.cs-stack .ss-xc__av:nth-child(5){z-index:1}
.cs-stack .ss-xc__av--more{background:var(--w-glass-fill-soft);border:1px solid var(--w-line);
  color:var(--w-text-3);font-size:10px}

/* ============ §8 COMPARISON — versus-card pair (2.0 comparison-section, C-1 option B) ============ */
/* Every 2.0 row is binary (Traditional CS ✗ / With SlashExperts ✓), so the table becomes two
   contrasting cards: no horizontal-scroll or stacking strategy needed at any width. */
.cs-vs{margin-top:var(--w-section-head-gap)!important;gap:clamp(16px,2vw,24px)}
.cs-vs>*{min-width:0}
.cs-vscard{position:relative;display:flex;flex-direction:column;gap:var(--w-s-5);height:100%}
.cs-vscard__h{display:flex;align-items:center;gap:10px}
.cs-vscard__h b{font-size:var(--w-fs-h4,17px);font-weight:var(--w-fw-bold);letter-spacing:-.01em;color:var(--w-text)}
.cs-vscard__lines{display:flex;flex-direction:column;gap:var(--w-s-3)}

/* ── the tally — states the verdict instead of leaving it to be counted ── */
.cs-vscard__tally{margin-left:auto;font-family:var(--w-font-mono);font-size:19px;font-weight:700;
  line-height:1;letter-spacing:-.02em;color:var(--w-text-3);font-variant-numeric:tabular-nums}
.cs-vscard__tally i{font-style:normal;font-size:.62em;opacity:.6}
.cs-vscard__tally--us{font-size:23px;color:var(--w-brand)}

/* ── LOSER: recede ──
   It previously had a WHITE fill, which on a near-white band is the highest-contrast surface in the
   section — the thing we're arguing AGAINST was the most prominent object on screen. It now reads
   as a recessed well: no elevation, a faint inset, and desaturated ink. */
.cs-vscard--them{background:rgba(28,26,36,.025);border-color:rgba(28,26,36,.07);
  box-shadow:inset 0 1px 2px rgba(28,26,36,.05)}
.cs-vscard--them .cs-vscard__h b{color:var(--w-text-2)}
.cs-vscard--them .w-card__icon{opacity:.55;filter:saturate(.25)}

/* ── WINNER: elevate ──
   NOTE ON "GLASSMORPHISM": real glass needs something behind it to refract. This band is a flat
   near-white field, so a backdrop-filter here blurs nothing and costs a paint — it would be a
   costume, not an effect. The honest premium treatment on a light surface is layered elevation:
   a tinted gradient field, a bright rim on the top edge where light would catch, a brand-tinted
   shadow, and a soft aura BEHIND the card so the elevation has something to read against. That is
   what Apple actually does on light surfaces, and unlike fake glass it survives at every DPR.
   The old --w-brand-soft fill (12% lavender) was so pale it read as "disabled" rather than
   "preferred" — the winner looked greyed out. */
.cs-vscard--us{isolation:isolate;border-color:transparent;
  background:linear-gradient(158deg,#ffffff 0%,#f7f5ff 42%,#efeaff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(111,95,224,.20),
    0 2px 4px rgba(28,26,36,.04),
    0 18px 40px -18px rgba(111,95,224,.45),
    0 40px 80px -40px rgba(111,95,224,.35)}
/* the aura — a blurred brand bloom sitting behind the card, which is the thing the elevation
   reads against. z-index:-1 inside an `isolation:isolate` parent keeps it off the page backdrop. */
.cs-vscard__aura{position:absolute;z-index:-1;inset:-18% -10% -22%;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 46%,rgba(152,135,244,.30) 0%,transparent 72%);
  filter:blur(26px)}
.cs-vscard--us .cs-vscard__h b{color:var(--w-charcoal,#1c1a24)}
/* the winner's lines carry real ink and a touch more weight — the loser's stay grey. Reading the
   two columns side by side, the eye should register "solid" vs "faded" before parsing any word. */
.cs-vscard--us .ss-check{color:var(--w-text);font-weight:var(--w-fw-medium)}
/* filled discs instead of bare ticks: a stroke-only check reads as a list marker, a filled disc
   reads as a claim that has been SETTLED. */
.cs-vscard--us .ss-check .w-icon{width:18px;height:18px;flex:none;padding:3.5px;border-radius:var(--w-r-full);
  color:#fff;background:linear-gradient(140deg,var(--w-purple-ink),var(--w-purple));
  box-shadow:0 2px 6px -2px rgba(111,95,224,.6)}

/* ✗ variant of the shared ss-check line — struck through, because "we don't do this" is the point */
.ss-check--x{color:var(--w-text-3)}
.ss-check--x .w-icon{color:var(--w-text-3);opacity:.55}

@media(hover:hover){
  .cs-vscard--us{transition:transform var(--w-dur) var(--w-ease),box-shadow var(--w-dur) var(--w-ease)}
  .cs-vscard--us:hover{transform:translateY(-3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(111,95,224,.28),
      0 4px 8px rgba(28,26,36,.05),0 26px 52px -20px rgba(111,95,224,.55),
      0 52px 96px -44px rgba(111,95,224,.4)}
}
@media(prefers-reduced-motion:reduce){.cs-vscard--us{transition:none}.cs-vscard--us:hover{transform:none}}
@media(max-width:820px){.cs-vs{max-width:560px;margin-inline:auto}}

/* 2-cell variant of the shared ss-mig stat row (the 3-col default leaves a hole with 2 items) */
.ss-mig__stats--2{grid-template-columns:repeat(2,1fr)}