: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-MARKETING 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.
   Only the cy-feed + cy-asset families at the foot of this file are new.
   Section order: hero · trust · problem · solution(6) · how · results · use cases · integrations · CTA. */
/* page-local asset tokens (base64'd at bundle) */
:root{
  --w-img-ss-hero:url("/assets/images/w/carly-solutions-marketing/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-res__grid replaced .ss-results__band here 2026-07-29: §6's stat band was deleted, so the
   testimonial grid is now the first element under that section head and has to own the gap. Its own
   margin-top (30–48px) is a different scale and would have made §6 sit tighter than every other
   section on the page. */
.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 —
   see the .ss-hero__h .w-accent note below. The bottom block stays at 920 because its lead has its
   own 60ch cap and its stat trio is capped at 760. */
.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%)}
/* NO localized halo on .ss-hero__top. One was added and REMOVED on 2026-07-29: a radial behind the
   H1 does fix the contrast, but its ellipse edge draws a visible band across the headline, which is
   worse than the problem. /carly/solutions/sales/ hit the same thing and reached the same answer.
   The fix is the DIRECTIONAL scrim in the min-width:1025px block below — the copy lives in the top
   half of this hero, so the page-wide scrim is flipped to fall downward and covers the H1 evenly
   with no edge anywhere. Don't reintroduce a radial here. */
/* TWO-PART H1 — aligned to /carly/solutions/sales/ 2026-07-29 (Jeff's call) so all three Carly
   solutions heroes match. Was a single .ss-hero__h at clamp(34px,5.1vw,74px) with .w-accent
   cancelled back to plain white. The size STEP between A and B is deliberate: 66px assertion,
   43px answer. Don't level them, and don't reinstate the white-accent override — it silently
   kills .w-accent--hero's gradient on line B. */
.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 — 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}
/* The H1 is TWO SENTENCES — two voices, one per line. Left to wrap naturally it broke as
   "Buyers pick a / favourite early. Carly / makes sure it's you.", splitting both sentences across
   lines and putting the turn mid-line where nobody hears it. That is now handled structurally by
   .ss-hero__h-a / __h-b above (each is display:block), so the old
   `.ss-hero__h .w-accent{display:block}` rule was removed as redundant.
   The 1120px top-block width above still exists to let line A fit its line at full size. If the H1
   copy ever gets longer, re-check both numbers together; they are one decision. */
.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 /carly/solutions/sales/ 2026-07-29 so the two Carly
   solutions heroes sit identically. Three things happen here, and they are one decision:
   1. HEIGHT CAP. A full-ratio 16:9 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 — and pushes the
      trust marquee below the fold. 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
      laptop and the desk 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, with a
      light lift off the bottom edge — and needs no localized halo, which is what was drawing a
      visible band across the H1. */
@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 keeps its .w-accent--hero
     gradient at every width, same as the sales hero. 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)}
/* MOVED TO SHARED 2026-07-29 — .ss-res__v / __u / __u--x / __k now live in
   /assets/css/w/shared/ss-statcard.css, extracted on their second use (the customer-success
   results section). They were DELETED from here rather than left as a duplicate: this sheet loads
   after the shared one, so an identical-specificity copy would win silently and any future fix to
   the shared rule would appear to do nothing on this page. The "×" correction was completed during
   the extraction — this page's 3.5× and 4.2× testimonial numerals pick it up automatically.
   Card shell, grid and quote stay page-local below. */
/* Each testimonial OPENS on its figure instead of a mono pill (.ss-res__metric, removed
   2026-07-29 with the standalone stat band). A pill and a numeral are not the same tier: the pill
   read as a tag, so the number was decoration on a quote. Set at display size it becomes the
   headline and the quote becomes its caption — the same inversion §3 and §4 use, one step quieter
   so the three sections read as a descending scale rather than three competing shouts.
   Sized deliberately BELOW .ss-sfc__v (44px vs 84px): §6 is corroboration, not the claim. */
/* the hairline separates evidence from testimony, matching the .ss-sfc__t rule 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. Lifted verbatim from /carly/solutions/sales/, which added it
   for the same reason: the arsenal grades 6sense and UserEvidence as vendor-published research,
   which may ship only with inline attribution. If this line is ever removed, the figures above it
   have to come out with it — they are not carryable unattributed. */
/* margin-top:auto bottom-anchors the source lines so all three sit on one baseline. The labels are
   different lengths (stat 1 runs to three lines where 2 and 3 run to two), and without this the
   attribution under stat 1 drops below its siblings' and the row reads as misaligned. The .w-stat
   items are stretched to equal height by the flex row, so auto has something to push against. */
/* .78 white, not the .55 the Sales hero uses. Same component, different photograph: this page's
   image has a bright concrete plinth in the lower third, exactly where the source lines land once
   the copy is stacked to the top and the scrim has faded out. At .55 they were washing out against
   it. Contrast beats matching the sibling page pixel-for-pixel — the attribution is not optional
   copy (see the note in the njk), so it has to stay readable. */
.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}
}

/* .ss-check now ships in /assets/css/w/shared/ss-statcard.css (identical rules) — see `sharedCSS`
   in this page's front matter. Do not redeclare it here; a page-local copy would silently win over
   the shared one and reintroduce the drift the extraction was done to prevent. */

/* ============ §3 THE PROBLEM — dark, 3 STAT-FIRST pain cards ============
   REBUILT 2026-07-29. Was icon → title → ~40-word paragraph → small stat in a footer, which put
   the only scroll-stopping element last and cost ~152 words across the grid. Now inverted onto the
   shared .ss-sfc component: numeral first, ≤10-word label, human translation under a hairline,
   narrative behind a disclosure. Card 1 carries the split bar (11/89) because "89%" needs something
   to be 89% OF. Everything but the grid geometry below lives in the SHARED stylesheet. */
.ss-pain__grid{gap:clamp(16px,2vw,24px)}
/* The paragraph-first card's rules (.ss-pcard block, .ss-pcard__stat/__v/__l, .ss-scard block,
   .ss-scard__pts) were all deleted 2026-07-29 when §3 and §4 moved onto the shared .ss-sfc
   component. The page-local copies had to go, not just stop being used: this stylesheet loads
   AFTER the shared one, so a leftover .ss-scard__pts or .ss-pcard gap would silently override the
   shared component. .ss-pcard__bar* / .ss-scard__echo / .ss-scard__pts now live in the shared
   sheet — the BEM child names were kept so the markup matches /carly/solutions/sales/. */
@media(max-width:900px){.ss-pain__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* ============ §4 THE SOLUTION — light, 3 answer cards in a strict 1:1 with §3 ============
   Same .ss-sfc component as §3, same count, same order. Only the grid geometry is page-local;
   keep it 3-up to match §3, because the shared column count is half of what makes the two
   sections read as question and answer. */
.ss-sol__grid{gap:clamp(16px,2vw,24px)}
@media(max-width:820px){.ss-sol__grid{grid-template-columns:1fr;max-width:560px;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) ============ */
.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}

/* 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)}

/* ============ §7c CARLY MOCK EXTRAS — activity feed (NEW this session) ============ */
/* The one shape the S2 mock kit had no equivalent for: a chronological "Carly did this"
   log. Everything else on these panes reuses ss-xc / ss-mail / ss-tec / ss-mig / cs-bar. */
.cy-feed{display:flex;flex-direction:column;gap:var(--w-s-3)}
.cy-feed__row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--w-r-md,14px);
  background:var(--w-glass-fill-soft);border:1px solid var(--w-line-soft)}
.cy-feed__ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--w-brand-soft);border:1px solid var(--w-brand-line);color:var(--w-brand)}
.cy-feed__ic .w-icon{width:15px;height:15px}
.cy-feed__tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cy-feed__tx b{font-size:13px;font-weight:var(--w-fw-semi);color:var(--w-text);line-height:1.35}
.cy-feed__tx i{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--w-text-3)}
.cy-feed__t{flex:none;font-family:var(--w-font-mono);font-size:10.5px;letter-spacing:.02em;color:var(--w-text-3);
  padding-top:2px}
.cy-feed__row--on{background:var(--w-brand-soft);border-color:var(--w-brand-line)}
@media(max-width:420px){
  .cy-feed__t{display:none}
}

/* ============ §7d CARLY MOCK EXTRAS — proof-library asset row (NEW this session) ============ */
/* Marketing's "what you already own, and how hard it's working" pane. Pairs the shared
   cs-bar fill with a per-asset usage count; no other family expressed "usage of a thing". */
.cy-asset{display:flex;flex-direction:column;gap:9px;padding:13px 14px;border-radius:var(--w-r-md,14px);
  background:var(--w-glass-fill-soft);border:1px solid var(--w-line-soft)}
.cy-asset__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cy-asset__h b{font-size:12.5px;font-weight:var(--w-fw-semi);color:var(--w-text);line-height:1.35}
.cy-asset__n{flex:none;font-family:var(--w-font-mono);font-size:11px;font-weight:700;color:var(--w-brand)}
.cy-asset__m{font-size:11px;color:var(--w-text-3);line-height:1.4}
.cy-asset .cs-bar{height:6px}