: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%);
}
@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-ANALYTICS-ROI page-local styles (Phase 5) ===== */
/* page-local asset tokens (base64'd at bundle) */
:root{
  --w-img-ar-hero:url("/assets/images/w/analytics-roi/ar-hero.webp");
  --w-img-ar-ctabg:url("/assets/images/w/analytics-roi/ar-ctabg.webp");
  --w-img-ar-size:url("/assets/images/w/analytics-roi/ar-size.webp");
}

/* kill horizontal scroll from full-bleed 100vw elements + real scrollbars (clip keeps sticky working) */
html{overflow-x:clip}
/* asymmetric section spacing (approved: tight top, generous bottom) */
.w-section{padding-block:clamp(36px,2.2vw + 1rem,64px) clamp(64px,4vw + 1.7rem,108px)}
.w-section--hero{padding-block:clamp(96px,10vh + 2rem,150px) clamp(72px,6vw + 1.7rem,120px)}

/* ---- §1 HERO — crm5 full-ratio bg, copy in vacant LEFT, left-aligned, charcoal ---- */
.ar-hero{position:relative;padding:0;background:var(--w-bg)}
/* the image, full ratio (contain), no crop, no zoom — section aspect-locked to it */
.ar-hero__media{width:100%;aspect-ratio:6068/3400;
  background:var(--w-img-ar-hero) center center/contain no-repeat;background-color:var(--w-bg)}
/* copy overlaid on the left region, left-aligned, CHARCOAL text on the orange sky */
.ar-hero__panel{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
/* pull the copy toward the left screen edge (drop container centering, small left pad) */
.ar-hero__panel .w-container{max-width:none;width:100%;padding-inline:clamp(24px,5.6vw,80px)}
.ar-hero__copy{width:min(50%,600px);text-align:left;margin:0;color:#fff}
.ar-hero__h{margin-top:20px;font-size:clamp(30px,3.6vw,60px);line-height:1.04;color:#fff}
.ar-hero__lead{margin-top:18px;margin-left:0;max-width:46ch;color:#fff}
.ar-hero__cta{margin-top:30px;display:flex;gap:var(--w-s-3);flex-wrap:wrap;justify-content:flex-start}
/* DARK-GLASS badge + primary button over the photo */
.ar-hero__copy .w-badge{background:rgba(28,26,36,0.60);border-color:rgba(255,255,255,0.20);color:#fff;
  -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur)}
.ar-hero__cta .w-btn--primary{background:rgba(28,26,36,0.62);color:#fff;border-color:rgba(255,255,255,0.20);
  -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), var(--w-shadow-md)}
.ar-hero__cta .w-btn--primary:hover{background:rgba(28,26,36,0.74);transform:translateY(-1px)}
.ar-hero__cta .w-btn--glass{background:rgba(28,26,36,0.42);border-color:rgba(255,255,255,0.18);color:#fff;
  -webkit-backdrop-filter:var(--w-glass-blur);backdrop-filter:var(--w-glass-blur)}
.ar-hero__cta .w-btn--glass:hover{background:rgba(28,26,36,0.58)}
/* medium: give the copy a touch more room */
@media(max-width:1180px){.ar-hero__copy{width:min(54%,540px)}.ar-hero__h{font-size:clamp(26px,3.5vw,44px)}}
/* below 1024 the overlay dies — image full-ratio on top, copy beneath on charcoal, theme colors */
@media(max-width:1024px){
  .ar-hero__panel{position:static;background:var(--w-bg);padding:clamp(28px,5vw,44px) 0 clamp(36px,6vw,52px)}
  .ar-hero__copy{width:100%;text-align:left;color:var(--w-text)}
  .ar-hero__copy .w-badge{background:var(--w-tag-brand-bg);border-color:var(--w-card-brand-line);color:var(--w-tag-brand-fg)}
  .ar-hero__h{color:var(--w-text);font-size:clamp(32px,7.4vw,46px)}
  .ar-hero__lead{margin-left:0;color:var(--w-text-2);max-width:58ch}
  .ar-hero__cta{justify-content:flex-start}
  .ar-hero__cta .w-btn--primary{background:var(--w-cta-fill);color:var(--w-cta-text);border-color:var(--w-glass-line-bright);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.18), var(--w-cta-glow)}
  .ar-hero__cta .w-btn--glass{background:var(--w-glass-fill);border-color:var(--w-glass-line);color:var(--w-text)}
}

/* ---- TRUST band (dark) — lifted from shipped pages: w-trust-label + foundation w-marquee ---- */
.ar-trust{background:var(--w-bg);padding-block:clamp(30px,3.4vw,52px) clamp(8px,1vw,16px)}
.ar-trust__inner{position:relative;z-index:1}
.ar-trust__inner .w-trust-label{margin-bottom:var(--w-s-4)}

/* ---- §2 NUMBERS THAT SPEAK TO THE C-SUITE (dark stat band) ---- */
.ar-numbers{background:var(--w-bg)}
.ar-numbers__grid{margin-top:var(--w-s-4)}
.ar-numbers .w-stat{padding:6px var(--w-s-6);gap:14px}
.ar-numbers .w-stat__value{font-size:clamp(56px,6vw,92px);font-weight:200}
.ar-numbers__detail{font-size:var(--w-fs-lead);color:var(--w-text-2);line-height:1.5;font-weight:var(--w-fw-regular);max-width:26ch}
/* 4-up variant — four stats in one row need a smaller value + an earlier 2x2 break than the 3-up default */
.ar-numbers__grid--4up{margin-top:var(--w-s-5)}
.ar-numbers__grid--4up .w-stat{padding:6px var(--w-s-5)}
.ar-numbers__grid--4up .w-stat__value{font-size:clamp(44px,4.4vw,72px)}
.ar-numbers__grid--4up .ar-numbers__detail{font-size:var(--w-fs-body);max-width:22ch}
@media(max-width:1024px){
  .ar-numbers__grid--4up .w-stat{flex:1 1 calc(50% - 1px);min-width:calc(50% - 1px);padding:var(--w-s-4) var(--w-s-4)}
  .ar-numbers__grid--4up .w-stat:nth-child(-n+2){border-top:none}
  .ar-numbers__grid--4up .w-stat:nth-child(n+3){border-top:1px solid var(--w-line);margin-top:var(--w-s-4)}
  .ar-numbers__grid--4up .ar-numbers__detail{max-width:28ch}
}
@media(max-width:600px){
  .ar-numbers__grid--4up .w-stat{flex-basis:100%;min-width:100%;padding:var(--w-s-4) 0}
  .ar-numbers__grid--4up .w-stat:nth-child(n+2){border-top:1px solid var(--w-line);margin-top:var(--w-s-4)}
  .ar-numbers__grid--4up .ar-numbers__detail{max-width:none}
}
.ar-source{margin-top:var(--w-s-7);display:flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em;font-size:var(--w-fs-xs);color:var(--w-text-3)}
.ar-source::before{content:"";width:26px;height:1px;background:var(--w-line-strong)}
.ar-source::after{content:"";width:26px;height:1px;background:var(--w-line-strong)}
@media(max-width:600px){
  .ar-numbers .w-stat{padding:var(--w-s-5) 0}
  .ar-numbers__detail{max-width:none}
}

/* ---- §3 WHERE THE RETURN COMES FROM (light, numbered levers) ---- */
.ar-levers__grid{margin-top:var(--w-s-5)}
.ar-lever{position:relative;display:flex;flex-direction:column;gap:14px;
  background:#f3f3f3;border:1px solid var(--w-line);border-radius:var(--w-r-xl);
  padding:clamp(28px,2.4vw,40px) clamp(24px,2vw,34px);min-height:236px;
  transition:background var(--w-dur) var(--w-ease),transform var(--w-dur) var(--w-ease),box-shadow var(--w-dur) var(--w-ease)}
.ar-lever__n{font-family:var(--w-font-mono);font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);
  letter-spacing:.04em;color:var(--w-brand);}
.ar-lever__t{font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);
  line-height:1.22;color:var(--w-text)}
.ar-lever__b{font-size:var(--w-fs-body);color:var(--w-text-2);line-height:1.55;margin-top:auto}
@media(hover:hover){
  .ar-lever:hover{background:var(--w-charcoal);transform:translateY(-3px);box-shadow:0 24px 50px -22px rgba(28,26,36,.5)}
  .ar-lever:hover .ar-lever__t{color:#fff}
  .ar-lever:hover .ar-lever__b{color:rgba(255,255,255,.74)}
  .ar-lever:hover .ar-lever__n{color:var(--w-lavender)}
}

/* lever in-card figures (arl-) v3 — frameless, MONO (white/gray/charcoal), distinct motion per card. Base = resolved. */
.arl-fig{position:relative;display:flex;flex-direction:column;gap:14px;min-height:138px;margin-block:6px 24px}
.arl-kick{position:relative;z-index:1;font:700 9px/1 var(--w-font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--w-text-3)}
.arl-chip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;font:700 9.5px/1 var(--w-font-mono);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--w-text-3) 85%,#fff);padding:6px 9px;border-radius:999px;white-space:nowrap}
/* arl1 · win-rate: overshoot bars + dashed gap line + rising delta chip */
.arl1{position:relative;z-index:1;flex:1;display:flex;align-items:flex-end;gap:22px}
.arl1-col{display:flex;flex-direction:column;align-items:center;gap:5px}
.arl1-barwrap{height:78px;display:flex;align-items:flex-end}
.arl1-bar{width:28px;border-radius:5px 5px 0 0;transform-origin:bottom;background:color-mix(in srgb,var(--w-text-3) 22%,transparent)}
.arl1-bar--a{height:30px}
.arl1-bar--b{height:56px;background:color-mix(in srgb,var(--w-text-3) 80%,#fff)}
.arl1-col b{font:700 12px/1 var(--w-font-mono);color:var(--w-text-2)}
.arl1-col small{font:600 8.5px/1 var(--w-font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--w-text-3)}
.arl1-gap{position:absolute;left:8px;bottom:calc(36px + 30px);width:134px;border-top:1.5px dashed color-mix(in srgb,var(--w-text-3) 55%,transparent);transform-origin:left}
.arl1 .arl-chip{position:absolute;right:0;top:-2px}
/* arl2 · cycles: two-speed race + finish check */
.arl2-row{position:relative;z-index:1;display:grid;grid-template-columns:86px minmax(0,1fr) 60px;gap:10px;align-items:center}
.arl2-row small{font:600 8.5px/1.25 var(--w-font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--w-text-3)}
.arl2-row b{font:700 10.5px/1.2 var(--w-font-mono);color:var(--w-text-2);text-align:right;white-space:nowrap}
.arl2-track{position:relative;height:5px;border-radius:999px;background:color-mix(in srgb,var(--w-text-3) 14%,transparent)}
.arl2-fill{display:block;height:100%;border-radius:inherit;transform-origin:left}
.arl2-fill--slow{width:92%;background:color-mix(in srgb,var(--w-text-3) 38%,transparent)}
.arl2-fill--fast{width:16%;background:color-mix(in srgb,var(--w-text-3) 80%,#fff)}
.arl2-done{position:absolute;left:16%;top:50%;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;background:color-mix(in srgb,var(--w-text-3) 85%,#fff);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px var(--w-card)}
.arl2-done svg{width:8px;height:8px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.arl2-foot{position:relative;z-index:1;display:flex;justify-content:flex-end}
/* arl3 · revenue: stepped spark + vertex dots + odometer */
.arl3{position:relative;z-index:1;flex:1;display:flex;align-items:center;gap:14px;min-width:0}
.arl3-spark{flex:1 1 auto;height:82px;min-width:0}
.arl3-spark polyline{fill:none;stroke:color-mix(in srgb,var(--w-text-3) 75%,#fff);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.arl3-spark circle{fill:color-mix(in srgb,var(--w-text-3) 85%,#fff)}
.arl3-side{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.arl3-num{display:grid;font:700 20px/1 var(--w-font-mono);color:var(--w-text-2)}
.arl3-num span{grid-area:1/1}
.arl3-num span:not(.arl3-fin){opacity:0}
.arl3-side small{font:600 9px/1 var(--w-font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--w-text-3)}
@media (hover:hover){
  .ar-lever:hover .arl-kick{color:rgba(255,255,255,.5)}
  .ar-lever:hover .arl1-bar{background:rgba(255,255,255,.22)}
  .ar-lever:hover .arl1-bar--b{background:rgba(255,255,255,.9)}
  .ar-lever:hover .arl1-gap{border-top-color:rgba(255,255,255,.4)}
  .ar-lever:hover .arl1-col b,.ar-lever:hover .arl2-row b{color:rgba(255,255,255,.9)}
  .ar-lever:hover .arl1-col small,.ar-lever:hover .arl2-row small,.ar-lever:hover .arl3-side small{color:rgba(255,255,255,.55)}
  .ar-lever:hover .arl-chip{color:var(--w-charcoal);background:rgba(255,255,255,.92)}
  .ar-lever:hover .arl2-track{background:rgba(255,255,255,.13)}
  .ar-lever:hover .arl2-fill--slow{background:rgba(255,255,255,.34)}
  .ar-lever:hover .arl2-fill--fast{background:rgba(255,255,255,.9)}
  .ar-lever:hover .arl2-done{background:rgba(255,255,255,.92);color:var(--w-charcoal);box-shadow:0 0 0 2px var(--w-charcoal)}
  .ar-lever:hover .arl3-spark polyline{stroke:rgba(255,255,255,.85)}
  .ar-lever:hover .arl3-spark circle{fill:rgba(255,255,255,.9)}
  .ar-lever:hover .arl3-num{color:rgba(255,255,255,.9)}
}
@media (prefers-reduced-motion:no-preference){
  .arl1-bar{transform:scaleY(0)}
  .arl1-bar--a{animation:arl-grow 9s var(--w-ease) infinite .3s}
  .arl1-bar--b{animation:arl-over 9s cubic-bezier(.34,1.4,.5,1) infinite .8s}
  .arl1-gap{transform:scaleX(0);animation:arl-gapline 9s var(--w-ease) infinite 1.5s}
  .arl1 .arl-chip{opacity:0;transform:translateY(8px);animation:arl-rise 9s var(--w-ease) infinite 2s}
  .arl2-fill--slow{transform:scaleX(0);animation:arl-crawl 9s linear infinite .4s}
  .arl2-fill--fast{transform:scaleX(0);animation:arl-sprint 9s var(--w-ease) infinite .4s}
  .arl2-done{opacity:0;transform:translate(-50%,-50%) scale(.5);animation:arl-finish 9s var(--w-ease) infinite 1.3s}
  .arl2-foot .arl-chip{opacity:0;transform:translateY(8px);animation:arl-rise 9s var(--w-ease) infinite 3.6s}
  .arl3-spark polyline{animation:arl-steps 9s var(--w-ease) infinite}
  .arl3-spark .d1{opacity:0;animation:arl-dot 9s var(--w-ease) infinite 1.5s}
  .arl3-spark .d2{opacity:0;animation:arl-dot 9s var(--w-ease) infinite 2.7s}
  .arl3-spark .d3{opacity:0;animation:arl-dot 9s var(--w-ease) infinite 3.9s}
  .arl3-spark .d4{opacity:0;animation:arl-dot 9s var(--w-ease) infinite 5.1s}
  .arl3-num span:nth-child(1){animation:arl-od1 9s var(--w-ease) infinite}
  .arl3-num span:nth-child(2){animation:arl-od2 9s var(--w-ease) infinite}
  .arl3-num span.arl3-fin{opacity:0;animation:arl-od3 9s var(--w-ease) infinite}
  @keyframes arl-grow{0%,4%{transform:scaleY(0)}15%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
  @keyframes arl-over{0%,4%{transform:scaleY(0)}13%{transform:scaleY(1.08)}17%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
  @keyframes arl-gapline{0%,4%{transform:scaleX(0)}14%,90%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
  @keyframes arl-rise{0%,4%{opacity:0;transform:translateY(8px)}12%,90%{opacity:1;transform:translateY(0)}97%,100%{opacity:0}}
  @keyframes arl-crawl{0%,4%{transform:scaleX(0)}42%,92%{transform:scaleX(1)}100%{transform:scaleX(1)}}
  @keyframes arl-sprint{0%,4%{transform:scaleX(0)}10%,92%{transform:scaleX(1)}100%{transform:scaleX(1)}}
  @keyframes arl-finish{0%,9%{opacity:0;transform:translate(-50%,-50%) scale(.5)}14%,92%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}
  @keyframes arl-steps{0%,4%{stroke-dashoffset:100}14%{stroke-dashoffset:74}17%{stroke-dashoffset:74}27%{stroke-dashoffset:50}30%{stroke-dashoffset:50}40%{stroke-dashoffset:26}43%{stroke-dashoffset:26}55%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
  @keyframes arl-dot{0%,2%{opacity:0}6%,90%{opacity:1}96%,100%{opacity:0}}
  @keyframes arl-od1{0%,6%{opacity:1}26%,100%{opacity:0}}
  @keyframes arl-od2{0%,26%{opacity:0}30%,52%{opacity:1}56%,100%{opacity:0}}
  @keyframes arl-od3{0%,52%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}
}

/* ---- §12 MEASURE IT IN YOUR STACK — LIGHT CTA card (DS w-cta-band), continuous with the FAQ ---- */
.ar-cta{background:var(--w-bg)}
.ar-cta .w-cta-band{text-align:center}
.ar-cta .w-cta-band .w-badge{margin-bottom:2px}
.ar-cta .w-cta-band__title{max-width:20ch}

/* ---- §3 EVERY TEAM GETS THEIR VIEW — role tab rail + copy/screenshot split ----
   Tab recipe pattern-lifted from the shipped .cri-tabs/.cri-pane rail on
   /experts/crm-integration/, scoped to this page as ar-* per the hybrid brief. */
.ar-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:var(--w-s-7);
  padding:6px;border-radius:var(--w-r-pill);background:var(--w-glass-fill-soft);border:1px solid var(--w-line);width:fit-content;margin-inline:auto}
.ar-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-2);
  padding:10px 20px;border-radius:var(--w-r-pill);background:transparent;
  transition:color var(--w-dur) var(--w-ease),background var(--w-dur) var(--w-ease),box-shadow var(--w-dur) var(--w-ease)}
.ar-tab:hover{color:var(--w-text)}
.ar-tab.is-on{color:var(--w-cta-text);background:var(--w-cta-fill);box-shadow:var(--w-cta-glow)}
.ar-tab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-brand-soft)}
.ar-pane[hidden]{display:none}
.ar-pane__grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(28px,4vw,64px);align-items:center}
.ar-pane__grid>*{min-width:0}
/* flipped panes swap the track widths too, so the screenshot keeps the wider column */
.ar-pane__grid--rev{grid-template-columns:1.08fr 0.92fr}
.ar-pane__grid--rev .ar-pane__copy{order:2}
.ar-pane__grid--rev .ar-shot{order:1}
.ar-pane__t{margin:0;font-size:var(--w-fs-h3);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);line-height:1.14;color:var(--w-text)}
.ar-pane__b{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}
/* checkmark feature list (shared by the panes + the calculator column) */
.ar-feats{list-style:none;margin:var(--w-s-5) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ar-feat{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  font-size:var(--w-fs-body);line-height:1.45;color:var(--w-text)}
.ar-feat__ic{width:22px;height:22px;flex:none;border-radius:var(--w-r-full);display:inline-flex;align-items:center;justify-content:center;
  background:var(--w-tag-brand-bg);color:var(--w-tag-brand-fg);border:1px solid var(--w-card-brand-line)}
.ar-feat__ic svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none}
.ar-feats--on-dark .ar-feat{color:rgba(255,255,255,.9)}
.ar-feats--on-dark .ar-feat__ic{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
/* product screenshot in a pane */
.ar-shot{margin:0;display:flex;flex-direction:column;gap:12px}
.ar-shot__frame{border-radius:var(--w-r-lg);overflow:hidden;border:1px solid var(--w-line);box-shadow:var(--w-shadow-md);
  background:var(--w-card);aspect-ratio:1500/1124}
.ar-shot__frame img{display:block;width:100%;height:100%;object-fit:cover}
.ar-shot__cap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em;font-size:var(--w-fs-xs);color:var(--w-text-3)}
.ar-shot__note{padding:3px 9px;border-radius:var(--w-r-pill);border:1px solid var(--w-line);background:var(--w-glass-fill-soft);color:var(--w-text-3)}
@media(max-width:900px){
  .ar-pane__grid{grid-template-columns:1fr;gap:var(--w-s-6)}
  .ar-pane__grid--rev .ar-pane__copy,.ar-pane__grid--rev .ar-shot{order:0}
  .ar-tabs{width:100%;justify-content:stretch}
  .ar-tab{flex:1 1 auto;padding:10px 12px;text-align:center}
}
@media(max-width:600px){.ar-tab{font-size:var(--w-fs-xs);padding:9px 8px}}

/* ---- §5 WHAT YOU CAN MEASURE (light, copy L / metric list R) ---- */
.ar-measure__grid{display:grid;grid-template-columns:0.88fr 1.12fr;gap:clamp(32px,5vw,72px);align-items:center}
.ar-measure__lead{margin-top:16px;max-width:42ch}
.ar-metrics{display:flex;flex-direction:column;gap:12px}
.ar-metric{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:var(--w-card);border:1px solid var(--w-line);border-radius:var(--w-r-lg);padding:18px 22px;box-shadow:var(--w-shadow-sm)}
.ar-metric__ic{width:38px;height:38px;flex:none;border-radius:var(--w-r-sm);display:inline-flex;align-items:center;justify-content:center;
  background:var(--w-glass-fill-soft);color:var(--w-text)}
.ar-metric__ic svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none}
.ar-metric__t{font-size:var(--w-fs-body);font-weight:var(--w-fw-bold);color:var(--w-text)}
.ar-metric__b{font-size:var(--w-fs-sm);color:var(--w-text-2);line-height:1.5;margin-top:2px}
/* device showcase — full-bleed right→left MARQUEE of the 5 Analytics screens, white edge fades */
.ar-measure__marquee{margin-top:clamp(40px,4.5vw,72px);width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.ar-measure__track{display:flex;width:max-content;gap:clamp(20px,2vw,32px);padding-block:12px;
  animation:ar-marquee 64s linear infinite}
.ar-measure__marquee:hover .ar-measure__track{animation-play-state:paused}
@keyframes ar-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ar-shot-card{flex:none;width:min(440px,80vw);display:flex;flex-direction:column;gap:12px;margin:0}
.ar-shot-card__frame{border-radius:var(--w-r-lg);overflow:hidden;border:1px solid var(--w-line);box-shadow:var(--w-shadow-md);
  background:var(--w-card);aspect-ratio:1500/1124}
.ar-shot-card__frame img{display:block;width:100%;height:100%;object-fit:cover}
.ar-shot-card__cap{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em;font-size:var(--w-fs-xs);color:var(--w-text-3)}
.ar-shot-card__cap svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none;color:var(--w-text-2)}
@media(max-width:900px){.ar-measure__grid{grid-template-columns:1fr;gap:28px}}
@media(prefers-reduced-motion:reduce){.ar-measure__marquee{-webkit-mask:none;mask:none;overflow-x:auto}
  .ar-measure__track{animation:none}.ar-shot-card[aria-hidden="true"]{display:none}}

/* ---- §6 ROI CALCULATOR + 2026 GTM REPORT — an9 photo backdrop under a dark scrim ----
   Slider recipe pattern-lifted from the shipped .cx-range/.cx-field card on
   /roi-calculator/, scoped to this page as ar-* per the hybrid brief. */
.ar-calc{position:relative;overflow:hidden;background:var(--w-bg)}
.ar-calc__bg{position:absolute;inset:0;z-index:0;background:var(--w-img-ar-size) center center/cover no-repeat;opacity:.34}
.ar-calc__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,16,.86) 0%,rgba(10,9,16,.72) 42%,rgba(10,9,16,.94) 100%)}
.ar-calc .w-container{position:relative;z-index:1}
.ar-calc__grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(32px,4.5vw,72px);align-items:center}
.ar-calc__grid>*{min-width:0}
.ar-calc__h{margin-top:16px;font-size:clamp(28px,2.8vw,44px);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);line-height:1.06;color:#fff}
.ar-calc__lead{margin-top:14px;font-size:var(--w-fs-lead);line-height:1.55;color:rgba(255,255,255,.82);max-width:46ch}
/* calculator card */
.ar-calc__card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--w-r-2xl);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  padding:clamp(24px,2.4vw,38px);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 34px 74px -32px rgba(0,0,0,.7)}
.ar-calc__card-t{margin:0;font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:#fff}
.ar-calc__card-b{margin:6px 0 0;font-size:var(--w-fs-sm);color:rgba(255,255,255,.66)}
.ar-field{margin-top:clamp(20px,1.8vw,26px)}
.ar-field__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ar-field__label{font-size:var(--w-fs-sm);font-weight:var(--w-fw-semi);color:rgba(255,255,255,.9)}
.ar-field__val{font-size:var(--w-fs-sm);font-weight:var(--w-fw-bold);color:var(--w-brand-2);white-space:nowrap}
.ar-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin-top:12px;border-radius:6px;
  background:rgba(255,255,255,.18);outline:none;cursor:pointer}
.ar-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--w-grad-brand);border:3px solid rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(152,135,244,.5);cursor:pointer}
.ar-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:#9887f4;border:3px solid rgba(255,255,255,.92);cursor:pointer}
.ar-range:focus-visible{box-shadow:0 0 0 3px var(--w-brand-soft)}
.ar-result{margin-top:clamp(24px,2.2vw,32px);padding:clamp(20px,2vw,28px);border-radius:var(--w-r-xl);text-align:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.ar-result__label{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em;font-size:var(--w-fs-xs);color:rgba(255,255,255,.66)}
.ar-result__val{margin-top:8px;font-size:clamp(38px,4vw,60px);font-weight:300;line-height:1.05;letter-spacing:-0.02em;
  background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ar-result__sub{margin-top:8px;font-size:var(--w-fs-sm);color:rgba(255,255,255,.66)}

/* ---- 2026 GTM BENCHMARK REPORT — lead capture inside the calculator section ---- */
.ar-rep{margin-top:clamp(48px,5vw,84px);padding-top:clamp(40px,4vw,64px);border-top:1px solid rgba(255,255,255,.14)}
.ar-rep__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,72px);align-items:start}
.ar-rep__grid>*{min-width:0}
.ar-rep__h{margin:0;font-size:clamp(24px,2.3vw,36px);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);line-height:1.1;color:#fff}
.ar-rep__lead{margin-top:14px;font-size:var(--w-fs-body);line-height:1.6;color:rgba(255,255,255,.78);max-width:50ch}
.ar-form{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--w-r-2xl);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  padding:clamp(24px,2.4vw,38px);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 34px 74px -32px rgba(0,0,0,.7)}
.ar-form__h{font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:#fff}
.ar-form__p{margin:6px 0 0;font-size:var(--w-fs-sm);color:rgba(255,255,255,.66)}
.ar-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ar-form__field{display:flex;flex-direction:column;gap:6px;margin-top:16px;min-width:0}
.ar-form__label{font-size:var(--w-fs-xs);font-weight:var(--w-fw-semi);color:rgba(255,255,255,.78)}
.ar-input-t{width:100%;font-family:var(--w-font);font-size:var(--w-fs-sm);color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.20);border-radius:var(--w-r-md);
  padding:12px 14px;outline:none;transition:border-color var(--w-dur) var(--w-ease),box-shadow var(--w-dur) var(--w-ease)}
.ar-input-t::placeholder{color:rgba(255,255,255,.42)}
.ar-input-t:focus{border-color:var(--w-brand-2);box-shadow:0 0 0 3px var(--w-brand-soft)}
.ar-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.7) 50%),linear-gradient(135deg,rgba(255,255,255,.7) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ar-select option{color:var(--w-charcoal);background:#fff}
.ar-form__submit{margin-top:20px;width:100%;justify-content:center}
.ar-form__err{display:none;margin-top:12px;font-size:var(--w-fs-sm);color:#ff9b9b}
.ar-form__fine{margin-top:14px;font-size:var(--w-fs-xs);line-height:1.5;color:rgba(255,255,255,.55)}
.ar-form__fine a{color:rgba(255,255,255,.8);text-decoration:underline}
.ar-form__success{display:none;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:clamp(18px,2vw,28px) 0}
.ar-form__check{width:56px;height:56px;border-radius:var(--w-r-full);display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff}
.ar-form__check svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.4;fill:none}
.ar-form.is-sent .ar-form__body{display:none}
.ar-form.is-sent .ar-form__success{display:flex}
@media(max-width:1024px){
  .ar-calc__grid,.ar-rep__grid{grid-template-columns:1fr;gap:var(--w-s-6)}
  .ar-calc__lead,.ar-rep__lead{max-width:60ch}
}
@media(max-width:520px){.ar-form__row{grid-template-columns:1fr;gap:0}}

/* ---- §7 PROOF (dark punch, centered quote card) ---- */
.ar-proof{background:var(--w-bg)}
.ar-proof__card{max-width:62ch;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--w-s-5);
  background:var(--w-glass-fill);border:1px solid var(--w-glass-line);border-radius:var(--w-r-2xl);
  padding:clamp(36px,5vw,64px) clamp(28px,5vw,60px);box-shadow:var(--w-glass-shadow)}
.ar-proof__mark{font-family:var(--w-font-serif);font-style:italic;font-size:56px;line-height:.6;color:var(--w-text-3)}
.ar-proof__q{font-size:var(--w-fs-h3);font-weight:var(--w-fw-medium);line-height:1.42;color:var(--w-text);letter-spacing:-0.01em}
.ar-proof__who{display:flex;align-items:center;gap:14px}
.ar-proof__av{width:52px;height:52px;border-radius:var(--w-r-full);object-fit:cover;border:1px solid var(--w-glass-line-bright)}
.ar-proof__name{text-align:left}
.ar-proof__name b{display:block;font-size:var(--w-fs-body);font-weight:var(--w-fw-bold);color:var(--w-text)}
.ar-proof__name span{font-size:var(--w-fs-sm);color:var(--w-text-3)}
.ar-proof__metric{font-family:var(--w-font-kicker);text-transform:uppercase;letter-spacing:.1em;font-size:var(--w-fs-xs);
  color:var(--w-tag-brand-fg);background:var(--w-tag-brand-bg);border:1px solid var(--w-card-brand-line);border-radius:var(--w-r-pill);padding:7px 14px}

/* ---- §4 EVERYTHING YOU NEED TO PROVE VALUE (light, 6 analytics feature cards) ---- */
.ar-feat-sec__grid{margin-top:var(--w-s-5)}
/* sprite symbols are stroke-only paths with no fill attr — w-card__icon doesn't set it,
   so every page using sprite icons in a card declares this (see home / aiout / peer-matching) */
.ar-feat-sec .w-card__icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---- §8 REPORTS BUILT FOR EVERY STAKEHOLDER (dark, 3-up role cards) ---- */
.ar-teams__grid{margin-top:var(--w-s-5)}
.ar-team__ic{width:46px;height:46px;border-radius:var(--w-r-md);display:inline-flex;align-items:center;justify-content:center;
  background:var(--w-glass-fill);color:var(--w-brand-2);box-shadow:inset 0 1px 0 var(--w-glass-rim-top)}
.ar-team__ic svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.7;fill:none}
.ar-team__t{font-size:var(--w-fs-h4);font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:var(--w-text);margin-top:6px}
.ar-team__b{font-size:var(--w-fs-sm);color:var(--w-text-2);line-height:1.55}

/* ---- §9 PROOF — 5-card testimonial fan (Jon center + 2 real + 2 review) ---- */
.ar-proof{overflow:hidden}
.ar-fan{position:relative;width:100vw;max-width:100vw;margin:44px 0 0;margin-inline:calc(50% - 50vw);
  min-height:452px;display:flex;align-items:center;justify-content:center}
.ar-fan__center{position:relative;z-index:5;width:min(430px,90vw);margin:0;
  padding:clamp(28px,3.1vw,43px) clamp(26px,3vw,42px);gap:18px;
  background:var(--w-card);border-color:var(--w-glass-line-bright);
  box-shadow:0 44px 90px -34px rgba(0,0,0,.78), 0 16px 38px -14px rgba(0,0,0,.6)}
.ar-side{position:absolute;top:50%;left:50%;width:300px;
  background:var(--w-card-lo);border:1px solid var(--w-glass-line);border-radius:var(--w-r-xl);
  padding:24px 24px;display:flex;flex-direction:column;gap:13px;text-align:left;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.6)}
.ar-side__qi{width:22px;height:22px;color:var(--w-brand-2)}
.ar-side__qi svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none}
.ar-side__q{font-size:13.5px;line-height:1.5;color:var(--w-text-2);font-weight:var(--w-fw-medium);margin:0}
.ar-side__metric{align-self:flex-start;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:var(--w-r-pill);white-space:nowrap;
  background:var(--w-tag-brand-bg);color:var(--w-tag-brand-fg);border:1px solid var(--w-card-brand-line)}
.ar-side__by{display:flex;align-items:center;gap:11px;margin-top:auto}
.ar-side__av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--w-glass-line-bright)}
.ar-side__av--bg{background-size:cover;background-position:center}
.ar-side__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ar-side__meta b{font-size:13px;font-weight:700;color:var(--w-text)}
.ar-side__meta small{font-size:11px;color:var(--w-text-3)}
.ar-side--li{transform:translate(calc(-50% - 23vw),-50%) rotate(-4deg) scale(.9);z-index:4}
.ar-side--ri{transform:translate(calc(-50% + 23vw),-50%) rotate(4deg) scale(.9);z-index:4}
.ar-side--lo{transform:translate(calc(-50% - 50vw + 182px),-52%) rotate(-8deg) scale(.8);z-index:3;opacity:.92}
.ar-side--ro{transform:translate(calc(-50% + 50vw - 182px),-52%) rotate(8deg) scale(.8);z-index:3;opacity:.92}
@media(max-width:1180px){.ar-side--lo,.ar-side--ro{display:none}}
@media(max-width:860px){.ar-side--li,.ar-side--ri{display:none}}

/* ============ POLISH PASS (motion · typography floors · mobile reorder) ============ */
/* card/scene assets must stay visible at small screens */
.ar-shot-card,.ar-shot{min-width:0}
.w-marquee__item,.w-marquee__lockup{flex:none}

/* Adobe motion — parallax scale-in on card grids (levers · teams · metrics · features) */
.ar-levers__grid>.w-reveal,.ar-teams__grid>.w-reveal,.ar-metrics>.w-reveal,.ar-feat-sec__grid>.w-reveal{
  transform:translateY(var(--w-reveal-y)) scale(1.045);transform-origin:50% 30%}
.ar-levers__grid>.w-reveal.is-visible,.ar-teams__grid>.w-reveal.is-visible,.ar-metrics>.w-reveal.is-visible,.ar-feat-sec__grid>.w-reveal.is-visible{transform:none}
@media(prefers-reduced-motion:reduce){.ar-levers__grid>.w-reveal,.ar-teams__grid>.w-reveal,.ar-metrics>.w-reveal,.ar-feat-sec__grid>.w-reveal{transform:none}}

/* MOBILE (≤1024): section IMAGE comes AFTER the copy/CTA on the overlaid hero */
@media(max-width:1024px){
  .ar-hero{display:flex;flex-direction:column}
  .ar-hero__media{order:2}
  .ar-hero__panel{order:1}
}