: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-SALES 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 family at the foot of this file is new. Section order: hero · trust · problem · solution · 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-sales/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-pain__grid,.ss-sol__grid,.ss-flow,.ss-results__band,.ss-roi,.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)} /* 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-VOICE H1 (2026-07-29) — the headline is two speakers, not one sentence. __h-a = the assertion: heavy sans, tight, white. __h-b = the answer: DS7 .w-accent (Instrument Serif italic) on the hero lavender ramp, ~62% of line A's size, on its own line. The face + size drop is the beat between them. Line A dropped from a 74px cap to 66px — the copy is short and declarative, so it wants density, not scale. NOTE: the old rule here cancelled .w-accent back to plain white sans, which is what made the headline read as one flat voice. Do not reinstate it. */ .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} /* Line A is two sentences and must never break mid-sentence — the default wrap gave "Your deals don't / die. They stall." at both 1440 and 390, which destroys the cadence. Wrapping each sentence in an inline-block makes the sentence the atomic wrap unit, so the break always lands at the period, at ANY width, with no breakpoint bookkeeping. Where both sentences fit (roughly 1025-1180) it stays a single line on its own. */ .ss-hero__cl{display:inline-block} .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)} /* HEIGHT CAP (2026-07-28) — the hero lost its lead paragraph, so a full-ratio 16:9 frame left a dead band between the H1 and the CTA/stat group. Cap the frame on desktop and switch the photo to cover, biased low (50% 86%) so the crop comes off the empty top wall and the laptop at the bottom edge stays whole. Shorter frame ⇒ space-between has less to distribute ⇒ tighter group. */ @media(min-width:1025px){ /* HEIGHT CAP (2026-07-28) — the hero lost its lead paragraph, so a full-ratio frame left a dead band between the H1 and the CTA/stat group AND pushed the trust marquee below the fold. Cap the frame against the viewport (nav + trust label + logo row = ~205px of reserved space) and crop the photo from the TOP, so the laptop and floor at the bottom edge stay whole. */ .ss-hero__media{max-height:calc(100vh - 205px);background-size:cover;background-position:50% 100%} /* stop distributing the leftover height into a void between H1 and CTA — stack the copy as one block under the badge, and let the lower third stay clean photograph (laptop + chair). */ .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)} /* the copy now lives in the TOP half, so flip the legibility scrim to fall downward and retire the localized bottom halo (its ellipse edge cut a visible band across the H1). */ .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} /* line A follows the panel ink; line B KEEPS its lavender gradient — the panel is still the dark ink surface here (light theme is opt-in via data-theme), so the ramp reads fine and the two-voice contrast survives the stack. */ .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 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
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{align-self:flex-start;display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px; font-family:var(--w-font-mono);font-size:11.5px;font-weight:700;letter-spacing:.02em; background:var(--w-brand-soft);color:var(--w-brand);border:1px solid var(--w-brand-line)} .ss-res__q{margin:0;flex:1;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)} @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)} } @media(max-width:540px){ .ss-hero__stats .w-stat{flex:1 1 90px;min-width:90px;padding-right:var(--w-s-3)} .ss-hero__stats .w-stat__value{font-size:28px} .ss-hero__stats .w-stat__label{font-size:12px} } /* ============ SHARED · check line (lifted from ebk-check) — used by §4 and §7 ============ */ .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 answer cards in a strict 1:1 with §3 ============ Same .ss-sfc component as §3; the only additions are the echo chip and the light-band token overrides below. Keep the grid at 3-up to match §3 — 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 ============ */ .ss-results__band{gap:var(--w-s-5) 0;padding-block:clamp(4px,1vw,10px)} .ss-results__band .w-stat{flex:1 1 180px} .ss-results__band .w-stat__value{font-weight:var(--w-fw-black);letter-spacing:-.025em} .ss-results__band .w-stat__label{max-width:24ch;margin-inline:auto} .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} } /* ============ COPY v2 · sourced-stat lines, ROI calculator, evidence card ============ Added with CARLY_PROOF_ARSENAL rollout. Every figure on this page carries a visible source line — on a page arguing vendor claims aren't believable, the citation IS the persuasion. No new tokens; all values lift from DS7. */ /* — source line under the hero spine (DS7 .w-stat__detail, unused sitewide until now) — */ .ss-hero__stats .w-stat__detail{font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.55);max-width:24ch;margin-inline:auto} @media(max-width:1024px){ .ss-hero__stats .w-stat__detail{color:var(--w-text-3);margin-inline:0} } @media(max-width:540px){ .ss-hero__stats .w-stat__detail{font-size:10.5px} } /* — §6 ROI calculator — the reader's own arithmetic, on a dark band — REWORKED 2026-08-05. The card was `align-items:start` with a 198px input column beside a 521px result column, leaving 323px of dead space bottom-left. That emptiness was a symptom: the controls didn't look draggable and the payoff sat below six rows of arithmetic. Fixes, in order of impact: (1) the slider's travelled portion carries the brand gradient, so position reads at a glance and the track looks like an instrument; (2) the readout is promoted to a 26px mono value on the label's line; (3) the answer moves ABOVE the derivation; (4) live pipeline bars anchor the deck, which closes the hole with meaning rather than filler. */ .ss-roi{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,3vw,44px); align-items:stretch;padding:clamp(20px,2.6vw,32px);border-radius:20px; background:var(--w-card-lo);border:1px solid var(--w-line)} .ss-roi__inputs{display:flex;flex-direction:column} .ss-roi__kick{margin:0 0 4px;font-family:var(--w-font-mono);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--w-text-3)} .ss-roi__field{display:block;padding:16px 0;border-bottom:1px solid var(--w-line-soft)} .ss-roi__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px} .ss-roi__lab{font-size:13.5px;font-weight:var(--w-fw-semi);color:var(--w-text-2)} .ss-roi__out{font-family:var(--w-font-mono);font-size:26px;font-weight:700;line-height:1;color:var(--w-text); white-space:nowrap;font-variant-numeric:tabular-nums lining-nums} .ss-roi__ends{display:flex;justify-content:space-between;margin-top:7px; font-family:var(--w-font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--w-text-3)} /* --p is written by the JS on every input event. A track whose left half looks like its right half is a decoration, not an affordance — the gradient fill IS the "drag me" signal. */ .ss-roi__range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px; outline:none;cursor:grab; background:linear-gradient(90deg,var(--w-purple) 0%,var(--w-lavender) var(--p,34%), rgba(255,255,255,.12) var(--p,34%))} .ss-roi__range:active{cursor:grabbing} .ss-roi__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px; border-radius:50%;background:#fff;border:0;cursor:grab; box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 5px rgba(152,135,244,.22); transition:box-shadow var(--w-dur) var(--w-ease),transform var(--w-dur) var(--w-ease)} .ss-roi__range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0; cursor:grab;box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 5px rgba(152,135,244,.22)} .ss-roi__range:hover::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 2px 12px rgba(0,0,0,.55),0 0 0 7px rgba(152,135,244,.3)} .ss-roi__range:focus-visible::-webkit-slider-thumb{box-shadow:0 2px 12px rgba(0,0,0,.55),0 0 0 7px var(--w-brand-line)} /* live pipeline bars — the split the ladder states but never shows */ .ss-roi__tape{margin-top:var(--w-s-5)} .ss-roi__bars{display:flex;flex-direction:column;gap:9px;margin-top:9px} .ss-roi__bar{display:grid;grid-template-columns:9ch minmax(0,1fr) auto;gap:10px;align-items:center; font-size:11.5px;color:var(--w-text-3)} .ss-roi__bar-t{display:block;height:7px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden} .ss-roi__bar-f{display:block;height:100%;border-radius:999px;background:var(--w-grad-brand); transition:width .45s var(--w-ease)} .ss-roi__bar-f--rest{background:rgba(255,255,255,.26)} .ss-roi__bar-v{font-family:var(--w-font-mono);font-size:12.5px;color:var(--w-text-2); font-variant-numeric:tabular-nums;min-width:4ch;text-align:right} .ss-roi__bar-v.is-live{color:var(--w-brand-2)} /* margin-top:auto pins the footer to the bottom of the deck, so the column ends where the result column ends instead of trailing off. This is what actually removes the dead space. */ .ss-roi__foot{margin-top:auto;padding-top:var(--w-s-5);display:flex;align-items:center; gap:12px;flex-wrap:wrap} .ss-roi__reset{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--w-r-pill); background:transparent;border:1px solid var(--w-line-strong);color:var(--w-text-2);cursor:pointer; font-family:var(--w-font);font-size:12px;font-weight:var(--w-fw-semi); transition:color var(--w-dur) var(--w-ease),border-color var(--w-dur) var(--w-ease)} .ss-roi__reset:hover,.ss-roi__reset:focus-visible{color:var(--w-brand-2);border-color:var(--w-brand-line)} .ss-roi__reset-i{width:13px;height:13px;flex:none} .ss-roi__priv{font-size:11.5px;color:var(--w-text-3)} .ss-roi__result{display:flex;flex-direction:column;gap:var(--w-s-4)} /* — DERIVATION LADDER — one number per row, so the arithmetic is legible AS arithmetic. .is-live marks the cells that respond to the sliders; they carry the brand colour and the constants stay in body ink. That colour split is the whole point — without it a reader cannot tell which numbers they control, which is the first thing anyone wants from a calculator. */ .ss-roi__lad{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .ss-roi__step{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:0 12px;align-items:baseline; padding:9px 0;border-bottom:1px solid var(--w-line-soft)} .ss-roi__step:last-child{border-bottom:0} .ss-roi__op{font-family:var(--w-font-mono);font-size:13px;color:var(--w-text-3);text-align:right} .ss-roi__sl{font-size:13.5px;line-height:1.45;color:var(--w-text-2)} .ss-roi__sv{font-family:var(--w-font-mono);font-size:15px;font-weight:700;color:var(--w-text); white-space:nowrap;font-variant-numeric:tabular-nums lining-nums} .ss-roi__step.is-live .ss-roi__sv{color:var(--w-brand-2)} /* legend — cheaper and more honest than hoping the colour reads on its own */ .ss-roi__key{margin:0;display:flex;align-items:center;gap:7px; font-size:11.5px;color:var(--w-text-3)} .ss-roi__key-dot{width:8px;height:8px;border-radius:50%;background:var(--w-brand-2);flex:none} /* the 2.5x context line — sourced, but deliberately not part of the ladder */ .ss-roi__note{margin:0;font-size:13.5px;line-height:1.6;color:var(--w-text-2)} .ss-roi__note b{color:var(--w-text);font-weight:var(--w-fw-black)} /* — CITATION TOOLTIP — attributions leave the sentence and live here. A real