/* ===== 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-CALCULATORS page-local styles ===== */
.w-section{padding-block:clamp(80px,5.5vw,112px)}
/* ── hero — LIGHT band ────────────────────────────────────────────────────────────────────────
   Flipped from dark 2026-08-05 to break the hero/#roi/#roi-band run of three darks.

   This is NOT the dark hero inverted. On a light band `backdrop-filter` blurs a flat field and
   costs a paint for nothing, so the depth here is LAYERED ELEVATION (PREMIUM_DOCTRINE §2):
     · a tinted gradient field instead of flat white — and deliberately NOT #ffffff at the top
       edge, because the nav's own is-on-light skin IS #ffffff and the two would fuse into one
       undifferentiated white slab with no bar visible at scrollY 0;
     · a bright inner rim on the top edge + a brand hairline, so that edge reads;
     · a soft brand aura at the BOTTOM, which is what the rounded dark #roi panel rises out of —
       elevation on a flat ground is invisible without something behind it to read against;
     · the dot grid re-inked to charcoal (it was rgba(255,255,255,.045): invisible here).
   No halo behind the headline (doctrine: scrim, never a halo) — the aura sits below the copy. */
.cx-hero{position:relative;overflow:hidden;padding-block:clamp(96px,12vh + 2rem,150px) clamp(96px,9vw,128px);text-align:center}
.cx-hero.cz-light{
  background:linear-gradient(176deg,#f9f7ff 0%,#f7f4ff 42%,#efe9fd 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 2px 0 rgba(111,95,224,.14);
}
.cx-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 76% 30% at 50% 100%,rgba(111,95,224,.30),transparent 72%),
    radial-gradient(ellipse 56% 50% at 20% -14%,rgba(255,255,255,.95),transparent 64%),
    radial-gradient(rgba(28,26,36,.06) 1px,transparent 1.4px);
  background-size:auto,auto,26px 26px}
/* fade the grid out toward the seam so it never fights the rising panel's shoulder */
.cx-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(239,233,253,.92) 88%,#efe9fd)}
.cx-hero .w-container{position:relative;z-index:1}
.cx-hero__inner{max-width:800px;margin-inline:auto}
.cx-hero__h{margin-top:16px;font-size:var(--w-fs-display);line-height:var(--w-lh-tight);letter-spacing:var(--w-ls-tight);font-weight:var(--w-fw-black);color:var(--w-charcoal)}
/* --w-grad-brand runs purple->lavender and FAILS AA on any light band (2.95:1 / 2.48:1), so the
   accent gets its own ramp that ends at --w-purple-ink (4.78:1 on white) — dark enough to pass
   even the small-text bar, at display size. Inline properties only: a transform / position /
   inline-block / text-stroke on a background-clip:text glyph renders it INVISIBLE. */
.cx-hero__h .w-accent{font-family:var(--w-font-serif);font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#4b3cc4 0%,var(--w-purple-ink) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cx-hero__sub{margin:18px auto 0;max-width:60ch;font-size:var(--w-fs-lead);line-height:1.6;color:var(--w-text-prose)}
/* the badge would otherwise inherit --w-tag-brand-bg (charcoal at 6%) and read as a muddy grey
   pill on a lilac field. Layered elevation instead: tinted fill, bright rim, brand hairline,
   brand-tinted shadow. Icon carries the brand; the label stays charcoal for the 10.5px bar. */
.cx-hero .w-badge{color:var(--w-charcoal);
  background:linear-gradient(158deg,#ffffff,#f6f3ff);
  border-color:rgba(111,95,224,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(111,95,224,.10),0 6px 16px -10px rgba(111,95,224,.55);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.cx-hero .w-badge__icon,.cx-hero .w-badge .w-icon{color:var(--w-purple-ink)}
/* ghost CTA: its ds7 hover is white glass + backdrop-filter, which on a flat light field is a
   costume. Same rim-light-and-lift move as the cards, no blur. */
.cx-hero .w-btn--ghost:hover{
  background:linear-gradient(158deg,#ffffff,#f7f4ff);color:var(--w-charcoal);
  border-color:rgba(111,95,224,.20);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 26px -14px rgba(111,95,224,.5);
  -webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.cx-hero .w-btn--ghost:hover{transform:none}}
/* the calculator panel rising out of the light hero — a BRAND-tinted shadow cast upward, so it
   reads as lifted rather than butted against the band. Grey here reads cheap (doctrine §2). */
#roi.w-panel-rise--dark{box-shadow:0 -26px 64px -32px rgba(75,60,196,.6)}
/* tool panel */
.cx-panel{max-width:1120px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.2vw,34px);align-items:stretch}
.cx-card{background:linear-gradient(160deg,#221d33,#191622);border:1px solid rgba(255,255,255,.1);border-radius:26px;padding:clamp(26px,2.4vw,40px)}
.cx-card--dark{background:linear-gradient(160deg,#241f37,#1a1723);border-color:rgba(201,188,255,.2);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column}
.cx-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;font-size:12px;font-weight:var(--w-fw-semi);letter-spacing:.04em;text-transform:uppercase;color:#fff;background:linear-gradient(158deg,rgba(34,29,48,.94),rgba(12,10,20,.97));border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 10px rgba(0,0,0,.14)}.cx-eyebrow .w-icon{width:15px;height:15px;color:#c9bcff}

.cx-card__h{margin-top:14px;font-size:var(--w-fs-h3);font-weight:var(--w-fw-black);letter-spacing:var(--w-ls-tight);color:#fff}
.cx-card--dark .cx-card__h{color:#fff}
/* inputs */
.cx-field{margin-top:clamp(20px,1.8vw,26px)}
.cx-field__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cx-field__label{font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:rgba(255,255,255,.9)}
.cx-field__val{font-size:var(--w-fs-sm);font-weight:var(--w-fw-bold);color:var(--w-brand)}
.cx-field__hint{margin-top:4px;font-size:var(--w-fs-xs);color:rgba(255,255,255,.6)}
.cx-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin-top:12px;border-radius:6px;background:var(--w-line);outline:none;cursor:pointer}
.cx-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--w-grad-brand);border:3px solid var(--w-card);box-shadow:0 2px 8px rgba(152,135,244,.5);cursor:pointer}
.cx-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#9887f4;border:3px solid var(--w-card);cursor:pointer}
.cx-input,.cx-select{width:100%;margin-top:12px;padding:13px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;font:var(--w-fs-body)/1.2 var(--w-font)}.cx-input::placeholder{color:rgba(255,255,255,.42)}.cx-select option{color:#1c1a24}
.cx-select{cursor:pointer}
.cx-input:focus,.cx-select:focus{outline:none;border-color:var(--w-brand);box-shadow:0 0 0 3px rgba(152,135,244,.16)}
.cx-input-money{position:relative}
.cx-input-money::before{content:"$";position:absolute;left:15px;top:calc(50% + 6px);transform:translateY(-50%);color:rgba(255,255,255,.6);font-weight:var(--w-fw-semi);z-index:1}
.cx-input-money .cx-input{padding-left:28px}
/* ROI results (dark card) */
.cx-roi-hero{margin-top:8px;padding:clamp(20px,2vw,28px);border-radius:20px;background:rgba(152,135,244,.12);border:1px solid rgba(201,188,255,.24);text-align:center}
.cx-roi-hero__label{font-size:var(--w-fs-xs);font-weight:var(--w-fw-semi);letter-spacing:.04em;text-transform:uppercase;color:#c9bcff}
.cx-roi-hero__val{margin-top:6px;font-size:clamp(40px,5.6vw,64px);line-height:1;font-weight:var(--w-fw-black);background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cx-roi-hero__sub{margin-top:8px;font-size:var(--w-fs-sm);color:rgba(255,255,255,.72)}
.cx-metrics{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-metric{padding:16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.cx-metric__v{font-size:var(--w-fs-h4);font-weight:var(--w-fw-black);color:#fff}
.cx-metric__l{margin-top:3px;font-size:var(--w-fs-xs);color:rgba(255,255,255,.66)}
.cx-note{margin-top:16px;font-size:var(--w-fs-xs);line-height:1.5;color:rgba(255,255,255,.6)}
.cx-note b{color:#c9bcff}
/* lead gate */
.cx-gate{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,2.4vw,40px);background:linear-gradient(160deg,#241f37,#17141f);gap:12px;transition:opacity .4s ease,visibility .4s}
.cx-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.cx-gate__h{font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold);color:#fff}
.cx-gate__p{font-size:var(--w-fs-sm);color:rgba(255,255,255,.72);margin-bottom:4px}
.cx-gate .cx-input,.cx-gate .cx-select{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff;margin-top:8px}
.cx-gate .cx-input::placeholder{color:rgba(255,255,255,.4)}
.cx-gate__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx-blur{filter:blur(9px);opacity:.5;transition:filter .4s ease,opacity .4s ease}
.cx-blur.is-revealed{filter:none;opacity:1}
/* score (dark card) */
.cx-score{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:6px}
.cx-score__ring{position:relative;width:180px;height:180px}
.cx-score__ring svg{transform:rotate(-90deg)}
.cx-score__ring circle{fill:none;stroke-width:12}
.cx-score__track{stroke:rgba(255,255,255,.1)}
.cx-score__prog{stroke:url(#cxgrad);stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.3,1)}
/* methodology */
.cx-method{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px);margin-top:clamp(38px,4vw,54px)}
.cx-mcard{padding:clamp(22px,2vw,30px);border-radius:20px;background:var(--w-card);border:1px solid var(--w-line);box-shadow:var(--w-shadow-sm)}
.cx-mcard__n{font-size:clamp(30px,3.4vw,42px);font-weight:var(--w-fw-black);background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cx-mcard__b{margin-top:8px;font-size:var(--w-fs-sm);line-height:1.55;color:var(--w-text-2)}
/* the × glyph renders thin and rides high in Plus Jakarta — size it up and drop it onto the baseline.
   NEVER -webkit-text-stroke here: inside background-clip:text the stroke paints over a transparent
   fill and the glyph renders hollow; and NEVER display:inline-block / transform here either —
   either one breaks the glyph out of the clipped background and it renders INVISIBLE.
   Only plain inline properties (font-size / weight / vertical-align) are safe. */
.cx-mcard__x{font-size:.86em;font-weight:var(--w-fw-black);vertical-align:-.04em;letter-spacing:.01em}
/* close */
.cx-close{position:relative;overflow:hidden;background:var(--w-bg);text-align:center}
.cx-close__bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 80% at 50% 120%,rgba(152,135,244,.16),transparent 66%)}
.cx-close .w-container{position:relative;z-index:1}
.cx-close__h{font-size:var(--w-fs-h2);line-height:var(--w-lh-snug);letter-spacing:var(--w-ls-tight);font-weight:var(--w-fw-black);color:#fff}
.cx-close__actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* the assessment CTA carries a full sentence, so below ~520px it is wider than the column and
   .cx-hero's overflow:hidden silently CLIPS it (no page hscroll to flag it) — stack and wrap */
@media(max-width:520px){
  .cx-hero__actions{flex-direction:column;align-items:stretch}
  .cx-hero__actions .w-btn{width:100%;justify-content:center;white-space:normal;text-align:center;line-height:1.3}
}
@media(max-width:900px){.cx-panel{grid-template-columns:1fr}.cx-method{grid-template-columns:1fr}.cx-metrics{grid-template-columns:1fr 1fr}}


/* separated calculators: analytics band + tokens */
:root{--w-img-cx-analytics:url("/assets/images/w/calculators/cx-analytics.webp")}
:root{--w-img-cx-band:url("/assets/images/w/calculators/cx-band.webp")}
.cx-band{width:100%;aspect-ratio:6068/3400;background:#271538 var(--w-img-cx-band) center/cover no-repeat}
#live{background:#f5f5f5}
.cxa{max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(28px,3.5vw,56px);align-items:center}
.cxa__media{aspect-ratio:1600/1159;background:var(--w-img-cx-analytics) center/contain no-repeat}
@media(max-width:900px){.cxa{grid-template-columns:1fr}}

/* ===== Invisible Pipeline Score promo (replaces the inline quiz, 2026-07-30) ===== */
.cx-promo{position:relative;overflow:hidden;background:var(--w-bg)}
.cx-promo__bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 55% 70% at 82% 50%,rgba(152,135,244,.16),transparent 68%)}
.cx-promo .w-container{position:relative;z-index:1}
.cxp{max-width:1120px;margin-inline:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3.4vw,58px);align-items:center}
.cxp__h{margin-top:16px;font-size:var(--w-fs-h2);line-height:var(--w-lh-snug);letter-spacing:var(--w-ls-tight);font-weight:var(--w-fw-black);color:#fff}
.cxp__h .w-accent{font-family:var(--w-font-serif);font-style:italic;font-weight:400;color:#c9bcff;-webkit-text-fill-color:#c9bcff;background:none}
.cxp__lead{margin-top:16px;max-width:52ch;font-size:var(--w-fs-lead);line-height:1.6;color:rgba(255,255,255,.82)}
.cxp__list{margin-top:22px;list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
.cxp__list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--w-fs-sm);line-height:1.5;color:rgba(255,255,255,.78)}
.cxp__list .w-icon{width:17px;height:17px;flex:0 0 auto;margin-top:2px;color:#c9bcff}
.cxp__actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.cxp__viz{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,1.8vw,24px)}
.cxp__ringlabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cxp__ringlabel-n{font-size:34px;font-weight:var(--w-fw-black);color:#fff;letter-spacing:var(--w-ls-tight)}
.cxp__ringlabel-s{font-size:var(--w-fs-xs);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cxp__sweep{transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.3,1)}
.cxp__tiers{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:330px}
.cxp__tier{font-size:var(--w-fs-xs);font-weight:var(--w-fw-semi);text-align:center;padding:6px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.cxp__tier[data-tier="critical"]{color:#f87171}
.cxp__tier[data-tier="warning"]{color:#fbbf24}
.cxp__tier[data-tier="ok"]{color:#c9bcff}
.cxp__tier[data-tier="excellent"]{color:#34d399}
.cxp__dims{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);width:100%;margin-top:2px}
.cxp__dims span{font-size:var(--w-fs-xs);letter-spacing:.04em;text-transform:uppercase;text-align:center;color:rgba(255,255,255,.5)}
@media(max-width:900px){.cxp{grid-template-columns:1fr}.cxp__lead{max-width:none}}
@media(prefers-reduced-motion:reduce){.cxp__sweep{transition:none}}