/* ===========================================================================
   SHARED · STAT-FIRST CARD SYSTEM  (.ss-sfc + friends)
   ---------------------------------------------------------------------------
   EXTRACTED 2026-07-29 from carly-solutions-sales.css, where this component was
   built and first shipped. It is now loaded by every page that lists
   `ss-statcard` in its `sharedCSS` front-matter list, because the three Carly
   solutions pages are clones of one another and a third copy-pasted copy would
   guarantee drift.

   WHAT THIS OWNS: the card shell, the hero numeral, the human-translation line,
   the disclosure, the split bar, the echo chip and the shared check line.
   WHAT IT DOES NOT OWN: grid gaps and column breakpoints. Those stay page-local
   (.ss-pain__grid / .ss-sol__grid) because section layout differs per page.

   The card is DELIBERATELY INVERTED versus the pattern it replaced (icon -> title
   -> ~50-word paragraph -> small stat in a footer). The number reads first at
   roughly 5x body size, the label is capped at ten words, and the human
   translation sits under a hairline. The narrative moves into .ss-sfc__x.
   Do not re-promote the paragraph and do not add .w-card__icon back - a 48px
   icon above an 80px numeral gives the eye two focal points and it picks neither.

   Behaviour lives in /assets/js/w/shared/ss-statcard.js (count-up + disclosure).
   =========================================================================== */

/* - the check line, used inside disclosures and use-case panes - */
.ss-check{display:flex;align-items:flex-start;gap:10px;font-size:var(--w-fs-sm);line-height:var(--w-lh-normal);color:var(--w-text-2)}
.ss-check .w-icon{width:18px;height:18px;flex:none;margin-top:2px;color:var(--w-brand-2)}
.ss-check b{color:var(--w-text);font-weight:var(--w-fw-semi)}

/* When any card is expanded, stop the grid stretching its siblings to the open card's height —
   with the translation line bottom-anchored, that stretch opens a dead void in the middle of every
   closed card. Sizing to content while one is open trades a small height mismatch (the bar-carrying
   card has an extra row) for no voids, which is the better-looking half of the trade. The class is
   toggled from /assets/js/w/shared/ss-statcard.js. */
.ss-sfc-grid.is-any-open{align-items:start}
.ss-sfc-grid.is-any-open .ss-sfc{height:auto}
.ss-sfc{display:flex;flex-direction:column;gap:var(--w-s-3);height:100%;
  padding-block:clamp(26px,2.6vw,36px);
  /* BAND-SCOPED TOKENS. Both DS7 values below are tuned for the dark surface and fail on the
     light band, so the component carries its own two-value pair rather than each section
     hardcoding a colour:
       --ss-neg       DS7's --w-danger (#f87171) reaches only ~2.6:1 on #f5f5f5 — under AA for the
                      echo chip's small text. The light value is darkened to ~4.9:1.
       --ss-num-grad  --w-grad-brand ends on lavender (#c18cff), which washes out at 84px on a
                      near-white card. The light ramp runs purple-ink → purple instead. */
  --ss-neg:var(--w-danger);
  --ss-num-grad:var(--w-grad-brand)}
.ss-cta__stat{--ss-num-grad:var(--w-grad-brand)}
.cz-light .ss-sfc,.cz-light .ss-cta__stat{
  --ss-neg:#c93c3c;
  --ss-num-grad:linear-gradient(135deg,var(--w-purple-ink) 0%,var(--w-purple) 100%)}
/* the whole card is the hit target (JS forwards the click to the disclosure button, which stays
   the real a11y control). Children are lifted above the hover glow's stacking context. */
.ss-sfc>*{position:relative;z-index:1}
/* hover glow — a brand wash that blooms from the numeral's corner. inset:0 + border-radius:inherit
   so it can never escape the card's rounded edge; z-index:0 keeps it above the card fill and
   below the copy. */
.ss-sfc::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;opacity:0;
  background:radial-gradient(120% 90% at 12% 0%, rgba(152,135,244,.20) 0%, rgba(152,135,244,.06) 42%, transparent 72%);
  transition:opacity var(--w-dur) var(--w-ease)}
@media(hover:hover){
  .ss-sfc{cursor:pointer}
  .ss-sfc:hover{transform:translateY(-4px);border-color:var(--w-glass-line-bright);
    box-shadow:inset 0 1.5px 0 var(--w-glass-rim-top),inset 0 -1.5px 0 var(--w-glass-rim-bottom),var(--w-shadow-lg)}
  .ss-sfc:hover::after{opacity:1}
  /* brightness() works on gradient-clipped text where a colour swap would not */
  .ss-sfc:hover .ss-sfc__v{filter:brightness(1.14)}
  .ss-sfc:hover .ss-sfc__more{color:var(--w-brand-2)}
}
.ss-sfc__v{transition:filter var(--w-dur) var(--w-ease)}
/* keyboard parity with the mouse affordance */
.ss-sfc:focus-within{border-color:var(--w-glass-line-bright)}
.ss-sfc:focus-within::after{opacity:1}
@media(prefers-reduced-motion:reduce){
  .ss-sfc,.ss-sfc::after,.ss-sfc__v{transition:none}
  .ss-sfc:hover{transform:none}
}

/* the numeral IS the headline — gradient-clipped, black weight, optically tight.
   .ss-sfc__n holds bare digits (the count-up target rewrites its textContent, so it must
   contain no markup); .ss-sfc__u carries the unit at ~40% scale so "42" stays the hero. */
.ss-sfc__v{display:flex;align-items:baseline;gap:.06em;margin:0;
  font-size:clamp(56px,6.2vw,84px);font-weight:var(--w-fw-black);letter-spacing:-.045em;line-height:.88;
  width:max-content;background:var(--ss-num-grad);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ss-sfc__n{font-variant-numeric:tabular-nums lining-nums;font:inherit}
.ss-sfc__u{font-size:.42em;font-weight:var(--w-fw-bold);letter-spacing:-.02em}
/* "×" is centred in its em box rather than sitting on the baseline like "%" or "hrs", so the
   baseline-aligned flex row drops it below the numeral's optical foot. Lift it with align-self,
   NOT with position:relative — the numeral is painted via background-clip:text on .ss-sfc__v, and
   a positioned descendant is painted in a later phase that the parent's text mask never covers,
   so the glyph comes out transparent with nothing behind it and vanishes entirely. Any future
   nudge here must stay non-positioned (align-self / margin), never position or transform. */
/* Sized and weighted UP relative to the other units (2026-07-29). At .46em/bold it measured the
   same as "%" but READ much smaller, because "×" is two thin diagonal strokes where "%" is two
   bowls and a bar — equal type size, roughly half the ink. Against an 84px numeral it looked like a
   lowercase x someone forgot to style. .56em + black weight makes the optical mass match; the
   optical-sizing lock stops the variable font thinning it further at display size.
   The margin-top is the SECOND half of the fix and is not optional: .ss-sfc__v runs
   line-height:.88, so the flex line box is shorter than the digits' visual extent and
   `align-self:center` lands the glyph up near cap height, where it reads as a superscript rather
   than an operator. .14em drops it onto the numeral's optical centre. Nudge with margin ONLY —
   position/transform makes it a positioned descendant of a background-clip:text parent and the
   glyph vanishes entirely (see the note above).
   Shipped on all three Carly solutions pages. If you change it, re-verify sales (3×),
   marketing (6.3× / 3.5× / 4.2×) and customer-success (4.2×) — one sheet, three pages. */
.ss-sfc__u--x{align-self:center;margin-left:-.01em;margin-top:.14em;font-size:.56em;
  font-weight:var(--w-fw-black);font-optical-sizing:none}
.ss-sfc__l{margin:0;font-size:14px;line-height:1.5;color:var(--w-text-2);max-width:30ch}
/* the human translation — the line a reader repeats back to themselves.
   margin-top:auto lives HERE, not on .ss-sfc__more, so the translation + disclosure form one
   bottom-anchored group. Card 2 carries an extra element (the split bar) in its top group; if the
   cards were top-aligned instead, card 2's translation line would sit ~50px below its siblings'
   and the 3-up grid would read as misaligned. Bottom-anchoring also gives the card a clean
   two-part structure: evidence up top, meaning down below. */
.ss-sfc__t{margin:auto 0 0;padding-top:var(--w-s-4);border-top:1px solid var(--w-line);
  font-size:clamp(17px,1.35vw,19px);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);
  line-height:1.3;color:var(--w-text)}

/* — evidence geometry (card 2 only): the split bar that gives 17% something to be 17% OF.
   Two fills in one clipped track: the brand share you own, then the RED negative share you don't.
   The red runs second and longer, so the eye follows it out to the edge — that sweep is the pain.
   Track clips (overflow:hidden), so the fills carry no radius of their own. --w-danger is the DS7
   foundation token; do not hardcode a red here. */
.ss-pcard__bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--w-card-lo);
  border:1px solid var(--w-line)}
.ss-pcard__bar-f,.ss-pcard__bar-n{display:block;height:100%;width:0;flex:none}
.ss-pcard__bar-f{background:var(--ss-num-grad);
  transition:width .9s cubic-bezier(.2,.7,.3,1) .35s}
/* starts at .58, not lower — below that the purple→red junction reads as a blend rather than a
   boundary, and the whole point of the split is that it IS a boundary. */
.ss-pcard__bar-n{background:linear-gradient(90deg,rgba(248,113,113,.58) 0%,var(--ss-neg) 100%);
  transition:width 1.2s cubic-bezier(.2,.7,.3,1) .8s}
/* The split is set PER CARD via two custom properties on the .ss-sfc element, because the ratio is
   page copy, not component design (Sales runs 17/83, Marketing runs 11/89). The fallbacks are the
   Sales values so an authoring slip degrades to a working bar rather than a collapsed one. The two
   must sum to 100 — nothing enforces that, so check it when you set them. */
.ss-sfc.is-visible .ss-pcard__bar-f{width:var(--ss-bar-f,17%)}
.ss-sfc.is-visible .ss-pcard__bar-n{width:var(--ss-bar-n,83%)}
.ss-pcard__bark{margin:0;display:flex;justify-content:space-between;gap:12px;
  font-family:var(--w-font-mono);font-size:11.5px;letter-spacing:.01em}
.ss-pcard__bark b{font-weight:700;color:var(--w-brand-2)}
/* the readout wears the negative fill's colour so the number and the bar read as one object */
.ss-pcard__bark-n{font-weight:700;color:var(--ss-neg)}
.ss-pcard__negn{font-variant-numeric:tabular-nums lining-nums;font:inherit}

/* — disclosure: the narrative that used to own the top of the card — */
.ss-sfc__more{margin-top:2px;padding:0;appearance:none;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:inherit;font-size:13px;font-weight:var(--w-fw-semi);color:var(--w-text-3);
  transition:color var(--w-dur) var(--w-ease)}
.ss-sfc__more:hover,.ss-sfc__more:focus-visible{color:var(--w-brand-2)}
.ss-sfc__more-i{width:15px;height:15px;flex:none;
  transition:transform var(--w-dur) var(--w-ease),color var(--w-dur) var(--w-ease)}
.ss-sfc__more[aria-expanded="true"] .ss-sfc__more-i{transform:rotate(45deg)}
.ss-sfc__more[aria-expanded="true"]{color:var(--w-brand-2)}
.ss-sfc__x{display:flex;flex-direction:column;gap:var(--w-s-3);
  padding-top:var(--w-s-3);border-top:1px solid var(--w-line)}
.ss-sfc__x[hidden]{display:none}
.ss-sfc__p{margin:0;font-size:var(--w-fs-sm);line-height:var(--w-lh-normal);color:var(--w-text-2)}

@media(max-width:520px){
  /* single column: the numeral has the full container width, so let it run larger than the
     3-up vw clamp would give it at this viewport. */
  .ss-sfc__v{font-size:clamp(58px,17vw,78px)}
  /* the two mono keys are justified to the card's inner edges; at 390 the right one lands hard
     against the padding. Drop a step so it keeps a visible margin. */
  .ss-pcard__bark{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .ss-pcard__bar-f{transition:none}
}

/* - solution-card additions: the bullet stack and the echo chip - */
.ss-scard__pts{display:flex;flex-direction:column;gap:var(--w-s-3);padding-top:var(--w-s-1)}
.ss-scard__pts .ss-check{font-size:var(--w-fs-xs)}
.ss-scard__pts .ss-check .w-icon{width:15px;height:15px;margin-top:1px}
/* — the echo chip: quotes §3's figure, in §3's red, before the card answers it.
   The shield glyph is the same one §3's "The challenge" badge carries, so the chip reads as a
   quotation of that section rather than a new label. --ss-neg is defined per-band below. */
.ss-scard__echo{margin:0;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px 5px 9px;border-radius:var(--w-r-pill);
  background:var(--w-danger-soft);border:1px solid rgba(248,113,113,.28);
  font-family:var(--w-font-mono);font-size:11.5px;font-weight:700;letter-spacing:.01em;
  color:var(--ss-neg);white-space:nowrap}
.ss-scard__echo .w-icon{width:13px;height:13px;flex:none;opacity:.9}
@media(max-width:380px){.ss-scard__echo{font-size:10.5px}}

/* ---------------------------------------------------------------------------
   TESTIMONIAL NUMERAL (.ss-res__v / __u / __k)
   EXTRACTED 2026-07-29 from carly-solutions-marketing.css on its SECOND use (the
   customer-success results section), under the same rule that made .ss-sfc shared: extract on the
   second use, never clone into a third page. The marketing originals were DELETED, not left in
   place — that sheet loads after this one and would have silently won.

   A results testimonial OPENS on its figure rather than the mono pill it replaced
   (.ss-res__metric). A pill and a numeral are not the same tier: at pill size the figure reads as
   a tag, so the number was decoration on a quote. At display size it becomes the headline and the
   quote becomes its caption — the same inversion §3 and §4 use, one step quieter.

   Sized deliberately BELOW .ss-sfc__v (44px vs 84px). The results section is CORROBORATION, not
   the claim; matching the problem/solution size would make three sections shout at each other
   instead of reading as a descending scale. Don't raise it to "balance" the page.

   NOT owned here: .ss-res / .ss-res__grid / __q / __who / __av / __id. Card shell and grid stay
   page-local because the column count and card chrome differ per page. --------------------- */
.ss-res__v{margin:0;display:flex;align-items:baseline;gap:.06em;width:max-content;
  font-size:clamp(34px,3.4vw,44px);font-weight:var(--w-fw-black);letter-spacing:-.04em;line-height:.9;
  background:var(--w-grad-brand);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ss-res__u{font-size:.46em;font-weight:var(--w-fw-bold);letter-spacing:-.02em}
/* Same two-part "×" correction as .ss-sfc__u--x above, at this smaller size: sized and weighted up
   because "×" carries roughly half the ink of "%" at equal type size, then dropped with margin-top
   because line-height:.9 makes align-self:center land it near cap height as a superscript.
   Margin ONLY — position/transform makes it a positioned descendant of a background-clip:text
   parent and the glyph renders transparent with nothing behind it, vanishing completely. */
.ss-res__u--x{align-self:center;margin-left:-.01em;margin-top:.12em;font-size:.58em;
  font-weight:var(--w-fw-black);font-optical-sizing:none}
/* Pulled up against the numeral — .ss-res's 16px flex gap is right between blocks and too loose
   between a figure and its own label. Margin, not position (see the trap above).
   --w-text-2, not --w-text-3: at 12.5px the -3 tier lands around 4.3:1 on the card fill, under AA
   for small text. -2 clears it and still reads clearly subordinate to the quote. */
.ss-res__k{margin:-8px 0 0;font-size:12.5px;line-height:1.45;color:var(--w-text-2);max-width:30ch}

/* - source lines on pain + solution cards - */
.ss-sfc__src,.ss-scard__src{display:block;margin:0;font-size:11.5px;line-height:1.5;color:var(--w-text-3)}
.ss-sfc__src{max-width:30ch}
.ss-scard__src{padding-top:var(--w-s-3);border-top:1px solid var(--w-line)}