/* TheySaid case study page (Human vs Synthetic Testers): base layer. Section rules follow below in page order.
   Static layout lives in Webflow classes; this file holds what the Designer can't express (states, keyframes,
   pseudo-elements), same split as theysaid-home-variant. Linked from the page <head> and from an HtmlEmbed
   (so the Designer canvas gets it too): keep both URLs on the same version. */
.is-cs{--ink:var(--_colors---theme--text-heading,#111827);--night:var(--_colors---theme--surface-dark,#0f141f);--rose-400:var(--_colors---theme--brand-soft,#fb7185);--rose-500:var(--_colors---theme--brand,#f43f5e);--rose-600:#f6316c;--coral:#ff6e6e;--violet-200:#d9aaff;--grad-cta:linear-gradient(90deg,#f6316c 0%,#ff6e6e 100%);--line-light:var(--_colors---theme--border,#e5e7eb);--line-dark:var(--_colors---theme--border-on-dark,#3f434c);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-standard:cubic-bezier(.4,0,.2,1)}
.is-cs{overflow-x:clip}

/* Word masks (CS.splitWords) */
.is-cs .cs-wm{overflow:clip;position:relative;display:inline-block;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.is-cs .cs-w{position:relative;display:inline-block}

/* Generic one-shot reveal hook ([data-cs-in] -> .is-in). Children opt in with .cs-rv and --i for stagger. */
html.js .is-cs [data-cs-in] .cs-rv{opacity:0;translate:0 24px}
html.js .is-cs [data-cs-in].is-in .cs-rv{opacity:1;translate:0 0;transition:opacity .7s var(--ease-out) calc(var(--i,0)*80ms),translate .9s var(--ease-out) calc(var(--i,0)*80ms)}

/* Pause CSS loops off-screen (homepage rule) */
[data-pause-offscreen].is-offscreen,[data-pause-offscreen].is-offscreen *,[data-pause-offscreen].is-offscreen *:before,[data-pause-offscreen].is-offscreen *:after{animation-play-state:paused!important}

/* Primary button glint (homepage) */
.btn-glint{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;z-index:2}
.btn-glint rect{fill:none;stroke-linecap:round;opacity:0;transition:opacity .15s}
.btn-glint .tail{stroke:#ffffff80;stroke-width:1.4}
.btn-glint .head{stroke:#fff;stroke-width:1.8}
.button-v4.is-primary:hover .btn-glint rect,.button-v4.is-primary:focus-visible .btn-glint rect{opacity:1}

/* Video swap */
.is-cs .cs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit;background:#000;z-index:3}
.is-cs .has-poster{background-color:#000;background-size:cover;background-position:center;background-repeat:no-repeat}

/* Designer canvas: no motion, everything visible */
html.wf-design-mode .is-cs *{animation:none!important;transition:none!important}
html.wf-design-mode .is-cs [data-cs-in] .cs-rv{opacity:1!important;translate:none!important}

/* Reduced motion kill-switch (homepage) */
@media (prefers-reduced-motion:reduce){.is-cs *,.is-cs *:before,.is-cs *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}.btn-glint{display:none}}

/* ==== 00-nav ==== */
/* Dark navbar (Navbar V4 (Variant)) interaction styles copied verbatim from theysaid-home-variant-v17.css:
   the component only ships theysaid-nav-dark.css, so pages other than the homepage and /v4 need these. */
.is-cs{--font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--g400:var(--_colors---gray-scale--gray-400,#9ca3af);--g500:var(--_colors---gray-scale--gray-500,#6b7280);--g600:var(--_colors---gray-scale--gray-600,#4b5563);--g700:var(--_colors---gray-scale--gray-700,#374151);--white:#fff}
.nav-v4_component.is-hidden:not(.is-open){translate:0 -120%;opacity:0}
@media(min-width:480px){.nav-v4_component.is-scrolled .nav-v4_pill{background:#11151c66;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}
.nav-v4_logo .logo-v4{position:relative;top:-5px}
.nav-v4_t:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;opacity:0;transition:opacity .3s var(--ease-standard)}
.nav-v4_link:hover .nav-v4_t:after{opacity:1}
.nav-v4_link:focus-visible .nav-v4_t:after{opacity:1}
.nav-v4_item.is-open>.nav-v4_link .nav-v4_t:after{opacity:1}
.nav-v4_item.is-open>.nav-v4_link .nav-v4_chev{rotate:180deg}
.nav-v4_menu:hover>.nav-v4_item>.nav-v4_link{opacity:.55}
.nav-v4_menu:focus-within>.nav-v4_item>.nav-v4_link{opacity:.55}
.nav-v4_menu:has(.is-open)>.nav-v4_item>.nav-v4_link{opacity:.55}
.nav-v4_menu>.nav-v4_item:hover>.nav-v4_link{opacity:1}
.nav-v4_menu>.nav-v4_item>.nav-v4_link:focus-visible{opacity:1}
.nav-v4_menu>.nav-v4_item.is-open>.nav-v4_link{opacity:1}
.nav-v4_link:focus-visible{outline-offset:6px;border-radius:6px}
.nav-v4_dd{scale:.96;translate:0 -6px}
.nav-v4_dd:before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.nav-v4_item.is-open>.nav-v4_dd{opacity:1;visibility:visible;pointer-events:auto;scale:1;translate:0 0;transition-delay:0s}
.nav-v4_dd-list>li{opacity:0;translate:0 8px;transition:opacity .2s var(--ease-standard),translate .2s var(--ease-standard)}
.nav-v4_item.is-open .nav-v4_dd-list>li{opacity:1;translate:0 0;transition:opacity .35s var(--ease-out),translate .45s var(--ease-out);transition-delay:calc(50ms + var(--i,0)*30ms)}
.nav-v4_dd-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-v4_dd-txt strong{font:500 14px/20px var(--font-body);color:#fff;letter-spacing:-.14px}
.nav-v4_dd-txt small{font:400 12px/16px var(--font-body);color:var(--g400)}
.nav-v4_dd-item:focus-visible{background:#ffffff12}
.nav-v4_dd-item:hover .nav-v4_dd-ico{background:#f43f5e2e;color:var(--rose-400)}
.nav-v4_dd-item:focus-visible .nav-v4_dd-ico{background:#f43f5e2e;color:var(--rose-400)}
.nav-v4_dd-item:active{background:#ffffff1a}
.nav-v4_dd-item:focus-visible{outline-offset:-2px}
.nav-v4_burger:active{background:#ffffff2e}
.nav-v4_burger-bar:nth-child(1){translate:0 -5px}
.nav-v4_burger-bar:nth-child(3){translate:0 5px}
.nav-v4_component.is-open .nav-v4_burger-bar:nth-child(1){translate:0 0;rotate:45deg}
.nav-v4_component.is-open .nav-v4_burger-bar:nth-child(2){opacity:0}
.nav-v4_component.is-open .nav-v4_burger-bar:nth-child(3){translate:0 0;rotate:-45deg}
.nav-v4_logo:focus-visible{outline-offset:4px}
.nav-v4_burger:focus-visible{outline-offset:4px}
@media(max-width:991px){.nav-v4_component{--ng: 16px}}
@media(max-width:991px){.nav-v4_menu-wrap{left:calc(var(--ng)*-1);right:calc(var(--ng)*-1);overscroll-behavior:contain}}
@media(max-width:991px){.nav-v4_component.is-open .nav-v4_menu-wrap{clip-path:inset(0 0 0 0);opacity:1;visibility:visible;transition-delay:0s}}
@media(max-width:991px){.nav-v4_component.is-open .nav-v4_scrim{opacity:1;pointer-events:auto}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item{border-bottom:1px solid rgba(255,255,255,.08);opacity:0;translate:0 14px;transition:opacity .2s,translate .2s}}
@media(max-width:991px){.nav-v4_component.is-open .nav-v4_menu>.nav-v4_item{opacity:1;translate:0 0;transition:opacity .5s var(--ease-out),translate .6s var(--ease-out);transition-delay:calc(.12s + var(--n,0)*50ms)}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item:nth-child(2){--n: 1}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item:nth-child(3){--n: 2}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item:nth-child(4){--n: 3}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item:nth-child(5){--n: 4}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item:nth-child(6){--n: 5}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item.is-cta{display:block;border:0;padding-top:20px}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item.is-cta .button-v4{width:100%;height:48px}}
@media(max-width:991px){.nav-v4_menu:hover>.nav-v4_item>.nav-v4_link{opacity:1}}
@media(max-width:991px){.nav-v4_menu:focus-within>.nav-v4_item>.nav-v4_link{opacity:1}}
@media(max-width:991px){.nav-v4_menu:has(.is-open)>.nav-v4_item>.nav-v4_link{opacity:1}}
@media(max-width:991px){.nav-v4_dd{scale:none;translate:none}}
@media(max-width:991px){.nav-v4_dd:before{display:none}}
@media(max-width:991px){.nav-v4_item.is-open>.nav-v4_dd{grid-template-rows:1fr}}
@media(max-width:991px){.nav-v4_dd-list>li{opacity:1;translate:none;transition:none}}
@media(max-width:991px){.nav-v4_item.is-open .nav-v4_dd-list>li{opacity:1;translate:none;transition:none}}
@media(max-width:991px){.nav-v4_item.is-open>.nav-v4_dd .nav-v4_dd-list{padding-bottom:12px}}
.nav-v4_burger.w-button{color:inherit;padding:0;line-height:inherit}
.nav-v4_link.w-button{background-color:transparent;padding:0}
.footer-v4_logo.w-inline-block,.footer-v4_social-link.w-inline-block,.footer-v4_totop.w-inline-block,.nav-v4_dd-item.w-inline-block,.nav-v4_link.w-inline-block,.nav-v4_logo.w-inline-block{max-width:none}
.nav-v4_component.is-scrolled,.nav-v4_component.is-hidden{transition:translate .45s var(--ease-in-out, cubic-bezier(.65,0,.35,1)),opacity .45s var(--ease-standard, cubic-bezier(.4,0,.2,1))!important}
.nav-v4_component.is-hidden:not(.is-open){translate:0 -120%!important;opacity:0!important;pointer-events:none}
@media(prefers-reduced-motion:reduce){.nav-v4_component.is-scrolled,.nav-v4_component.is-hidden{transition:none!important}}
.is-home-v4 .nav-v4_cta{border-color:#d9aaff}
.nav-v4_mega-more:hover,.nav-v4_mega-more:focus-visible{color:#fff;background:#ffffff0d}
.nav-v4_more-arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:translate .25s var(--ease-standard)}
.nav-v4_mega-more:hover .nav-v4_more-arrow{translate:2px 0}
.nav-v4_dd-item.is-compact{gap:10px;padding:7px 12px 7px 8px;border-radius:12px}
.nav-v4_dd-ico.is-compact{width:30px;height:30px;border-radius:9px}
.nav-v4_dd-ico.is-compact svg{width:16px;height:16px}
.nav-v4_mega-col .nav-v4_dd-list{margin:0;padding:0}
.nav-v4_item.is-open .nav-v4_dd.is-mega .nav-v4_dd-list>li{transition-delay:calc(40ms + var(--i,0)*14ms)}
@media(min-width:992px){.nav-v4_item.is-mega{position:static}}
@media(min-width:992px){.nav-v4_dd.is-mega{left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 48px);top:calc(100% + 8px);padding:10px;transform-origin:50% 0;background-color:#0e131d}}
@media(min-width:992px){.nav-v4_dd.is-product .nav-v4_mega-col{width:226px}}
@media(min-width:992px){.nav-v4_dd.is-product .nav-v4_mega-col.is-featured{width:316px;margin-right:6px;padding-right:6px;border-right:1px solid #ffffff12}}
@media(min-width:992px){.nav-v4_dd.is-solutions .nav-v4_mega-col{width:262px}}
@media(min-width:992px){.nav-v4_dd.is-resources .nav-v4_mega-col{width:216px}}
@media(min-width:992px){.nav-v4_dd.is-resources .nav-v4_mega-cols{padding-top:4px}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_pill.is-variant{grid-column-gap:10px;padding-left:20px}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_menu-wrap.is-variant .nav-v4_menu{grid-column-gap:8px}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_menu-wrap.is-variant .nav-v4_link{grid-column-gap:4px}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_actions{grid-column-gap:4px}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_actions .button-v4.is-ghost.is-variant.nav-v4_login{border-color:transparent;background:transparent;padding:0 8px}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_actions .nav-v4_cta{width:auto;padding:0 18px}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_dd.is-product{width:calc(100vw - 48px)}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_dd.is-product .nav-v4_mega-col{width:auto;flex:1 1 0}}
@media(min-width:992px) and (max-width:1219px){.nav-v4_dd.is-product .nav-v4_mega-col.is-featured{width:268px;flex:none}}
@media(max-width:991px){.nav-v4_menu-wrap.is-variant{background-color:#0b0f17}}
@media(max-width:991px){.nav-v4_actions{order:2;margin-left:auto}}
@media(max-width:991px){.nav-v4_actions .button-v4.nav-v4_login{display:none}}
@media(max-width:991px){.nav-v4_actions .nav-v4_cta{order:0;margin-left:0}}
@media(max-width:991px){.nav-v4_mega{min-height:0;overflow:hidden}}
@media(max-width:991px){.nav-v4_mega-cols{flex-direction:column;gap:0}}
@media(max-width:991px){.nav-v4_mega-label{padding:14px 4px 4px}}
@media(max-width:991px){.nav-v4_dd-item,.nav-v4_dd-item.is-compact{padding:8px 4px}}
@media(max-width:991px){.nav-v4_dd-ico{width:30px;height:30px;border-radius:9px}}
@media(max-width:991px){.nav-v4_dd-ico svg{width:16px;height:16px}}
@media(max-width:991px){.nav-v4_dd-txt small{display:none}}
@media(max-width:991px){.nav-v4_mega-more{padding:8px 4px}}
@media(max-width:991px){.nav-v4_mega-foot{border-top:0;margin:0;padding:0 0 12px;flex-direction:column;align-items:flex-start}}
@media(max-width:991px){.nav-v4_item.is-open>.nav-v4_dd .nav-v4_mega .nav-v4_dd-list{padding-bottom:0}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item.is-cta{display:flex;flex-direction:column;gap:10px}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item.is-cta .button-v4{width:100%;height:48px}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item:nth-child(7){--n:6}}
@media(max-width:991px){.nav-v4_menu>.nav-v4_item:nth-child(8){--n:7}}
@media(max-width:479px){.nav-v4_actions{display:none}}
/* Base resets the homepage scopes to .is-home-v4, applied to the navbar only */
:where(.nav-v4_component) :is(h1,h2,h3,h4,h5,h6){color:revert;letter-spacing:revert;font-family:revert;font-size:revert;font-weight:revert;line-height:revert;margin:0;padding:0}
:where(.nav-v4_component) p{color:revert;font-size:revert;line-height:revert;margin:0;padding:0}
:where(.nav-v4_component) a{color:inherit;text-decoration:none}
:where(.nav-v4_component) :is(ul,ol){margin:0;padding:0;list-style:none;font-size:revert;line-height:revert}
:where(.nav-v4_component) li{list-style-type:revert}
:where(.nav-v4_component) img{color:revert;padding:0;display:block;max-width:100%}
:where(.nav-v4_component) strong{font-weight:revert;line-height:revert}
:where(.nav-v4_component) label{margin-bottom:0;display:revert}
:where(.nav-v4_component) :is(figure,blockquote){margin:0;padding:0;border:0;border-radius:0;background:none;font-size:revert;line-height:revert;color:revert;font-family:revert;font-weight:revert;letter-spacing:revert;box-shadow:none}
/* Logo (logo-v4) pieces, from the homepage CSS */
@media(min-width:480px){.logo-v4{--logo-w: 139.62px;width:var(--logo-w)}}
.logo-v4>span{position:absolute;display:block}
.logo-v4>span:nth-child(1){inset:29.65% 55.88% 2.14% 0}
.logo-v4>span:nth-child(2){inset:28.09% 14.57% 0 44.91%}
.logo-v4>span:nth-child(3){inset:0 0 1.04% 55.36%}
.logo-v4 img{position:absolute;inset:0;width:100%;height:100%;max-width:none}

/* ==== 01-hero ==== */
/* ===== Case study · HERO (data-cs="hero") — rules the Webflow importer can't take ===== */

/* Mobile type sizes from the 390 frame (shared classes are clamp-based; these pin the Figma values) */
@media screen and (max-width: 479px){
  [data-cs="hero"] .cs-hero_title.heading-style-h1{font-size:32px}
  [data-cs="hero"] .cs-hero_eyebrow.eyebrow-v4{font-size:14px}
}

/* Word masks from CS.splitWords (keep descenders of "Shoppers?" inside the mask) */
[data-cs="hero"] .cs-wm{position:relative;display:inline-block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top}
[data-cs="hero"] .cs-w{position:relative;display:inline-block}

/* ---------- 1. Entrance (homepage h40 timings, fill-mode backwards = no styles left behind) ---------- */
@keyframes cs-hero-rise{from{transform:translateY(118%) rotate(3deg)}to{transform:none}}
@keyframes cs-hero-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cs-hero-up24{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes cs-hero-fade{from{opacity:0}to{opacity:1}}

/* ---------- 2. Ambient (glow breathe + star twinkle, homepage values) ---------- */
@keyframes cs-hero-breathe{0%,100%{scale:1;opacity:.92}50%{scale:1.05;opacity:1}}
@keyframes cs-hero-star-a{0%,100%{opacity:.42}50%{opacity:.78}}
@keyframes cs-hero-star-b{0%,100%{opacity:.76}50%{opacity:.42}}
@keyframes cs-hero-press{0%{scale:1}40%{scale:.94}100%{scale:1}}

@media (prefers-reduced-motion:no-preference){
  [data-cs="hero"] .cs-w{animation:cs-hero-rise 1.05s var(--ease-out) calc(.08s + var(--i,0)*.055s) backwards}
  [data-cs="hero"] .cs-hero_eyebrow{animation:cs-hero-fade .9s var(--ease-out) 0s backwards}
  [data-cs="hero"] .cs-hero_lead{animation:cs-hero-up .9s var(--ease-out) .38s backwards}
  [data-cs="hero"] .cs-hero_act{animation:cs-hero-up .9s var(--ease-out) .53s backwards}
  [data-cs="hero"] .cs-hero_act.is-secondary{animation-delay:.6s}
  [data-cs="hero"] .cs-hero_visual{animation:cs-hero-up24 .9s var(--ease-out) .9s backwards}

  [data-cs="hero"] .cs-hero_glow-img{animation:cs-hero-breathe 8s var(--ease-in-out) infinite}
  [data-cs="hero"] .cs-hero_stars.is-a{animation:cs-hero-star-a 7s var(--ease-in-out) infinite}
  [data-cs="hero"] .cs-hero_stars.is-b{animation:cs-hero-star-b 9s var(--ease-in-out) infinite}
  [data-cs="hero"] .cs-hero_stars.is-c{animation:cs-hero-star-b 7s var(--ease-in-out) -3s infinite}
  [data-cs="hero"].is-paused .cs-hero_glow-img,
  [data-cs="hero"].is-paused .cs-hero_stars{animation-play-state:paused}

  /* ---------- 3. Demo loop transitions (states toggled by CS.scene on .cs-hero_cards) ---------- */
  [data-cs="hero"] .cs-hero_cursor{transition:translate .7s var(--ease-in-out)}
  [data-cs="hero"] .cs-hero_cards.is-f2 .cs-hero_cursor-ico{animation:cs-hero-press .24s var(--ease-standard) .05s}
  [data-cs="hero"] .cs-hero_cursor-tag{transition:scale .45s var(--ease-spring)}
  [data-cs="hero"] .cs-hero_prod{transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
  [data-cs="hero"] .cs-hero_tip{transform-origin:20% 0;transition:opacity .45s var(--ease-out),scale .6s var(--ease-spring),translate .6s var(--ease-out)}
  [data-cs="hero"] .cs-hero_bubble-text{transition:clip-path 1.1s var(--ease-in-out)}
  [data-cs="hero"] .cs-hero_hl-box{transition:opacity .4s var(--ease-out),scale .55s var(--ease-spring)}
  [data-cs="hero"] .cs-hero_check{transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out)}
  [data-cs="hero"] .cs-hero_tick{transition:opacity .3s var(--ease-out),scale .45s var(--ease-spring)}
}

/* ---------- 3b. Demo initial states (only with JS; no-JS / reduced motion = final Figma frame) ----------
   f1 cursor travels V8 -> Pro · f2 press + Pro selected + "Comparing 2 items" tooltip
   f3 question/answer text types in + PRICE tag · f4 RATING tag · f5 tick 1 (both) · f6 AI tick 2 · f7 AI tick 3 */
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f1) .cs-hero_cursor{translate:-13.875em 1.875em}
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f1) .cs-hero_cursor-tag{scale:.92}
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f2) .cs-hero_prod.is-pick{border-color:#e5e7eb;box-shadow:0 0 0 0 rgba(242,102,139,0)}
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f2) .cs-hero_tip{opacity:0;scale:.94;translate:0 .375em}
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f3) .cs-hero_bubble-text{clip-path:inset(0 100% 0 0)}
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f3) .cs-hero_price-wrap.is-hl .cs-hero_hl-box,
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f4) .cs-hero_rating.is-hl .cs-hero_hl-box{opacity:0;scale:.9}
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f5) .cs-hero_check.is-done.is-1,
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f6) .cs-hero_card.is-ai .cs-hero_check.is-done.is-2,
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f7) .cs-hero_card.is-ai .cs-hero_check.is-done.is-3{background-color:transparent;border-color:#4b5563}
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f5) .cs-hero_check.is-1 .cs-hero_tick.is-done,
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f6) .cs-hero_card.is-ai .cs-hero_check.is-2 .cs-hero_tick.is-done,
html.js [data-cs="hero"] .cs-hero_cards:not(.is-f7) .cs-hero_card.is-ai .cs-hero_check.is-3 .cs-hero_tick.is-done{opacity:0;scale:.4}

/* ---------- VS badge between the two cards (Figma 13049:4040): gradient ring + text, lines fading away from it ---------- */
.cs-hero .cs-hero_vs{border-color:transparent;background:linear-gradient(rgba(20,24,38,.63),rgba(20,24,38,.63)) padding-box,linear-gradient(90deg,#f6316c,#ff6e6e) border-box;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
.cs-hero .cs-hero_vs-text{background-image:linear-gradient(90deg,#f6316c,#ff6e6e);-webkit-background-clip:text;background-clip:text;color:transparent;translate:0 .04em}
.cs-hero .cs-hero_vs::before,.cs-hero .cs-hero_vs::after{content:"";position:absolute;left:50%;width:1px;height:8.53em;margin-left:-.5px;pointer-events:none}
.cs-hero .cs-hero_vs::before{bottom:100%;background:linear-gradient(0deg,#f6316c,rgba(255,110,110,0))}
.cs-hero .cs-hero_vs::after{top:100%;background:linear-gradient(180deg,#f6316c,rgba(255,110,110,0))}

/* ==== 02-results ==== */
/* ===== 02 · Results + Experiment — page-level CSS (not importable) ===== */

/* Mobile type overrides that must beat the shared typography classes */
@media screen and (max-width: 479px) {
  .cs-results_title.heading-style-h2,
  .cs-exp_title.heading-style-h2 { font-size: 24px; letter-spacing: -0.01em; }
  .cs-results_eyebrow.eyebrow-v4,
  .cs-exp_eyebrow.eyebrow-v4 { font-size: 14px; }
}

@media (prefers-reduced-motion: no-preference) {

  /* --- Results: stat cells stagger in --- */
  html.js .cs-results .cs-results_cell {
    opacity: 0;
    translate: 0 24px;
    transition: opacity .7s var(--ease-out), translate .8s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  html.js .cs-results.is-in .cs-results_cell { opacity: 1; translate: 0 0; }

  /* "Shark" letters fade/rise in one by one (spans created by page.js) */
  .cs-results_char { display: inline-block; }
  html.js .cs-results .cs-results_char {
    opacity: 0;
    translate: 0 .28em;
    filter: blur(4px);
    transition: opacity .45s var(--ease-out), translate .55s var(--ease-out), filter .45s var(--ease-out);
    transition-delay: calc(420ms + var(--c, 0) * 75ms);
  }
  html.js .cs-results.is-in .cs-results_char { opacity: 1; translate: 0 0; filter: blur(0); }

  /* --- Experiment card scene --- */
  html.js .cs-exp_card .cs-exp_piece {
    opacity: 0;
    translate: 0 22px;
    scale: .96;
    transition: opacity .5s var(--ease-out), translate .65s var(--ease-out), scale .65s var(--ease-spring);
  }
  html.js .cs-exp_card.is-f1 .cs-exp_piece.is-p1,
  html.js .cs-exp_card.is-f2 .cs-exp_piece.is-p2,
  html.js .cs-exp_card.is-f3 .cs-exp_piece.is-p3 { opacity: 1; translate: 0 0; scale: 1; }

  /* task-flow steps: muted by default, active one filled */
  html.js .cs-exp_card .cs-exp_dot {
    background-color: var(--_colors---theme--border);
    color: var(--_colors---theme--text-muted);
    transition: background-color .45s var(--ease-out), color .45s var(--ease-out), scale .5s var(--ease-spring);
  }
  html.js .cs-exp_card .cs-exp_step-text {
    color: var(--_colors---theme--text-muted);
    transition: color .45s var(--ease-out);
  }
  html.js .cs-exp_card.is-s1 .cs-exp_step.is-1 .cs-exp_dot,
  html.js .cs-exp_card.is-s2 .cs-exp_step.is-2 .cs-exp_dot,
  html.js .cs-exp_card.is-s3 .cs-exp_step.is-3 .cs-exp_dot,
  html.js .cs-exp_card.is-done .cs-exp_dot {
    background-color: var(--_colors---theme--text-heading);
    color: #f3f4f6;
  }
  html.js .cs-exp_card.is-s1 .cs-exp_step.is-1 .cs-exp_dot,
  html.js .cs-exp_card.is-s2 .cs-exp_step.is-2 .cs-exp_dot,
  html.js .cs-exp_card.is-s3 .cs-exp_step.is-3 .cs-exp_dot { scale: 1.12; }
  html.js .cs-exp_card.is-s1 .cs-exp_step.is-1 .cs-exp_step-text,
  html.js .cs-exp_card.is-s2 .cs-exp_step.is-2 .cs-exp_step-text,
  html.js .cs-exp_card.is-s3 .cs-exp_step.is-3 .cs-exp_step-text,
  html.js .cs-exp_card.is-done .cs-exp_step-text { color: var(--_colors---theme--text-heading); }
}
/* prefers-reduced-motion: reduce → none of the hidden states above apply; static markup = final frame. */

/* Mobile (Figma 13035:290684): stat number on top at 40px, Figma paddings; trimmed number box so the 24px gaps match */
@media screen and (max-width: 479px) {
  .cs-results .cs-results_cell { gap: 24px; padding: 24px 16px; }
  .cs-results .cs-results_num { order: -1; font-size: 40px; line-height: 1.2; text-box: trim-both cap alphabetic; }
  .cs-exp .cs-exp_title.heading-style-h2 { text-align: left; }
}

/* ==== 03-built ==== */
/* ===== 03 · How Synthetic Testers Are Built (data-cs="built") =====
   Demo keyframes from Figma board 13038:297420: Animation 1 -> Motivation, 2 -> Worldview, 3 -> Knowledge.
   The static classes hold the FINAL keyframe; .is-f1/.is-f2/(.is-f3) below are the earlier ones.
   page.js toggles them with CS.scene; transitions do the motion. Reduced motion: final keyframe, no cursor. */

/* Stage scales the 365.33x410 Figma canvas to the card width (page.js sets --s) */
.cs-built .cs-built_visual{height:auto;aspect-ratio:365.33/410}
.cs-built .cs-built_stage{scale:var(--s,1)}
.cs-built .cs-built_sky{mix-blend-mode:plus-lighter}
.cs-built .cs-built_panel{-webkit-backdrop-filter:blur(16.6px);backdrop-filter:blur(16.6px)}
.cs-built .cs-built_stage.is-instant,.cs-built .cs-built_stage.is-instant *{transition:none!important}

/* Toggle: gradient lives on a layer so on/off can cross-fade */
.cs-built .cs-built_toggle{background-image:none;isolation:isolate}
.cs-built .cs-built_toggle:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#f6316c,#ff6e6e 38.46%);z-index:-1}
.cs-built .cs-built_toggle-knob{z-index:1}

/* Cursor is only on screen while a scene plays */
.cs-built .cs-built_stage.is-playing .cs-built_cursor{opacity:1}
.cs-built .cs-built_stage.is-playing.is-leave .cs-built_cursor{opacity:0}
.cs-built .cs-built_stage.is-press .cs-built_cursor-arrow{scale:.94}

/* --- Motivation (Animation 1: All -> $200 -> $300) --- */
.cs-built .is-motivation .cs-built_cursor{transform:translate(194.8px,172px)}
.cs-built .is-motivation.is-f1 .cs-built_fill{width:14px}
.cs-built .is-motivation.is-f1 .cs-built_thumb{transform:translate(7.17px,0px)}
.cs-built .is-motivation.is-f1 .cs-built_badge{width:35.47px}
.cs-built .is-motivation.is-f1 .cs-built_badge-val.is-all{opacity:1}
.cs-built .is-motivation.is-f1 .cs-built_badge-val.is-300{opacity:0}
.cs-built .is-motivation.is-f1 .cs-built_cursor{transform:translate(94px,335px)}
.cs-built .is-motivation.is-f1.is-grab .cs-built_cursor{transform:translate(48px,172px)}
.cs-built .is-motivation.is-f2 .cs-built_fill{width:85px}
.cs-built .is-motivation.is-f2 .cs-built_thumb{transform:translate(77.17px,0px)}
.cs-built .is-motivation.is-f2 .cs-built_badge{width:53.47px}
.cs-built .is-motivation.is-f2 .cs-built_badge-val.is-200{opacity:1}
.cs-built .is-motivation.is-f2 .cs-built_badge-val.is-300{opacity:0}
.cs-built .is-motivation.is-f2 .cs-built_cursor{transform:translate(118px,172px)}

/* --- Worldview (Animation 2: hover card -> click Prime -> details expand) --- */
.cs-built .is-worldview .cs-built_cursor{transform:translate(289.33px,274px)}
.cs-built .is-worldview.is-f1 .cs-built_cursor{transform:translate(287px,190px)}
.cs-built .is-worldview.is-f2 .cs-built_cursor{transform:translate(85.67px,292px)}
.cs-built .is-worldview.is-f1 .cs-built_vac-more,.cs-built .is-worldview.is-f2 .cs-built_vac-more{grid-template-rows:0fr}
.cs-built .is-worldview.is-f1 .cs-built_vac-more-in,.cs-built .is-worldview.is-f2 .cs-built_vac-more-in{opacity:0}
.cs-built .is-worldview.is-press .cs-built_chip.is-prime{scale:.94}

/* --- Knowledge (Animation 3: toggle off -> hover -> on -> comparison column) --- */
.cs-built .is-knowledge .cs-built_cursor{transform:translate(164px,274px)}
.cs-built .is-knowledge.is-f1 .cs-built_cursor{transform:translate(276px,190px)}
.cs-built .is-knowledge.is-f2 .cs-built_cursor{transform:translate(304.67px,141px)}
.cs-built .is-knowledge.is-f3 .cs-built_cursor{transform:translate(304.33px,141px)}
.cs-built .is-knowledge.is-f1 .cs-built_toggle:before,.cs-built .is-knowledge.is-f2 .cs-built_toggle:before{opacity:0}
.cs-built .is-knowledge.is-f1 .cs-built_toggle-knob,.cs-built .is-knowledge.is-f2 .cs-built_toggle-knob{transform:translate(0px,0px);background-color:rgba(239,239,239,0.3)}
.cs-built .is-knowledge.is-press .cs-built_toggle{scale:.94}
.cs-built .is-knowledge.is-f1 .cs-built_spec-col.is-compare,.cs-built .is-knowledge.is-f2 .cs-built_spec-col.is-compare,.cs-built .is-knowledge.is-f3 .cs-built_spec-col.is-compare{flex-basis:0px;width:0;margin-left:0;opacity:0}
.cs-built .is-knowledge.is-f1 .cs-built_spec-bar.is-a,.cs-built .is-knowledge.is-f2 .cs-built_spec-bar.is-a,.cs-built .is-knowledge.is-f3 .cs-built_spec-bar.is-a{width:200px}
.cs-built .is-knowledge.is-f1 .cs-built_spec-bar.is-b,.cs-built .is-knowledge.is-f2 .cs-built_spec-bar.is-b,.cs-built .is-knowledge.is-f3 .cs-built_spec-bar.is-b{width:133px}
.cs-built .is-knowledge.is-f1 .cs-built_spec-bar.is-c,.cs-built .is-knowledge.is-f2 .cs-built_spec-bar.is-c,.cs-built .is-knowledge.is-f3 .cs-built_spec-bar.is-c{width:268.9px}
.cs-built .is-knowledge.is-f1 .is-compare .cs-built_spec,.cs-built .is-knowledge.is-f2 .is-compare .cs-built_spec,.cs-built .is-knowledge.is-f3 .is-compare .cs-built_spec{opacity:0;translate:-8px 0}

@media (prefers-reduced-motion:no-preference){
  .cs-built .cs-built_cursor{transition:transform .7s var(--ease-in-out),opacity .35s var(--ease-out)}
  .cs-built .cs-built_cursor-arrow{transition:scale .12s var(--ease-standard)}
  .cs-built .is-motivation.is-press .cs-built_cursor{transition:transform .6s var(--ease-in-out),opacity .35s var(--ease-out)}
  .cs-built .cs-built_fill{transition:width .6s var(--ease-in-out)}
  .cs-built .cs-built_thumb{transition:transform .6s var(--ease-in-out),scale .12s var(--ease-standard)}
  .cs-built .is-motivation.is-press .cs-built_thumb{scale:1.15}
  .cs-built .cs-built_badge{transition:width .45s var(--ease-out)}
  .cs-built .cs-built_badge-val{transition:opacity .3s var(--ease-out)}
  .cs-built .cs-built_chip.is-prime{transition:scale .12s var(--ease-standard)}
  .cs-built .cs-built_vac-more{transition:grid-template-rows .6s var(--ease-out)}
  .cs-built .cs-built_vac-more-in{transition:opacity .45s var(--ease-out) .12s}
  .cs-built .cs-built_toggle{transition:scale .12s var(--ease-standard)}
  .cs-built .cs-built_toggle:before{transition:opacity .45s var(--ease-out)}
  .cs-built .cs-built_toggle-knob{transition:transform .5s var(--ease-spring),background-color .45s var(--ease-out)}
  .cs-built .cs-built_spec-col.is-compare{transition:flex-basis .6s var(--ease-out),width .6s var(--ease-out),margin-left .6s var(--ease-out),opacity .4s var(--ease-out)}
  .cs-built .cs-built_spec-bar{transition:width .6s var(--ease-out)}
  .cs-built .is-compare .cs-built_spec{transition:opacity .45s var(--ease-out) calc(.2s + var(--i,0)*80ms),translate .6s var(--ease-out) calc(.2s + var(--i,0)*80ms)}

  /* Steps table: rows rise in with stagger */
  html.js .cs-built .cs-built_step{opacity:0;translate:0 24px}
  html.js .cs-built .cs-built_steps.is-in .cs-built_step{opacity:1;translate:0 0;transition:opacity .7s var(--ease-out) calc(var(--i,0)*80ms),translate .9s var(--ease-out) calc(var(--i,0)*80ms)}
}

/* Designer canvas: final state, no motion */
html.wf-design-mode .cs-built .cs-built_step{opacity:1!important;translate:none!important}

/* Mobile typography overrides that must beat the shared heading classes */
@media screen and (max-width: 767px){
  .cs-built .cs-built_step-title.heading-style-h5,.cs-built .cs-built_card-title.heading-style-h5{font-family:var(--_typography---body);font-size:18px;line-height:1.8;letter-spacing:0}
}
@media screen and (max-width: 479px){
  .cs-built .cs-built_title.heading-style-h2{font-size:24px;line-height:1.2;letter-spacing:-0.01em}
  .cs-built .cs-built_stage{--s:.936}
}

/* Mobile (Figma 13035:290684): left-aligned heading; step number/text trimmed to cap height like Figma so rows are 147px */
@media screen and (max-width: 479px) {
  .cs-built .cs-built_title.heading-style-h2 { text-align: left; }
  .cs-built .cs-built_step-num, .cs-built .cs-built_step-text { text-box: trim-both cap alphabetic; }
}

/* ==== 04-findings-a ==== */
/* ===== 04-findings-a — page-level CSS (geometry that needs var(), states, keyframes) ===== */

/* ---------- F2 stacked cards: geometry (needs --i from data-style) ---------- */
/* card i (0 = front/left-most): x step 38.643/1170, y step 9.661/483.08 (Figma "Comparison result" grid) */
.cs-f2_card {
  left: calc(var(--i, 0) * 3.30282%);
  top: calc(54.596% - var(--i, 0) * 1.99988%);
}
.cs-f2_shape {
  /* Figma: rotate-30 · scale-y-87 · skew-x-30 (individual props order: rotate, scale, then transform) */
  transform: rotate(30deg) scaleY(0.87) skewX(30deg);
}

/* ---------- F1: bars, tiles ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .cs-f1 .cs-f1_bar-fill,
  html.js .cs-f1 .cs-f1_bar-glow { clip-path: inset(0 100% 0 0 round 999px); }
  html.js .cs-f1.is-in .cs-f1_bar-fill,
  html.js .cs-f1.is-in .cs-f1_bar-glow {
    clip-path: inset(0 0 0 0 round 999px);
    transition: clip-path 1.1s var(--ease-in-out, cubic-bezier(.65,0,.35,1));
  }
  html.js .cs-f1.is-in .cs-f1_bar-fill.is-synth,
  html.js .cs-f1.is-in .cs-f1_bar-glow.is-synth { transition-delay: .18s; }

  .cs-f1 .cs-f1_tile { animation: cs-f1-float 6.5s ease-in-out infinite alternate; }
  .cs-f1 .cs-f1_tile.is-shark { animation-duration: 7.5s; animation-delay: -3.2s; }
}
@keyframes cs-f1-float {
  0%   { translate: 0 0; }
  100% { translate: 0 -7px; }
}

/* ---------- F2 scene states (Animation 4, 13024:274497) ----------
   No class / no JS / reduced motion  = keyframe 3 (the static design).
   JS (CS.scene) toggles .is-k1 … .is-k5 on .cs-f2_demo; the last step restores .is-k3. */

/* base (k3): filled cards hide their grey plate */
.cs-f2_card.is-full .cs-f2_grey,
.cs-f2_card.is-part .cs-f2_grey { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  html.js .cs-f2_demo .cs-f2_card {
    transition: translate .6s var(--ease-out, cubic-bezier(.16,1,.3,1)), opacity .5s var(--ease-standard, cubic-bezier(.4,0,.2,1));
  }
  html.js .cs-f2_demo .cs-f2_grey,
  html.js .cs-f2_demo .cs-f2_fill {
    transition: opacity .55s var(--ease-out, cubic-bezier(.16,1,.3,1));
  }
  html.js .cs-f2_demo .cs-f2_legend-top,
  html.js .cs-f2_demo .cs-f2_legend-title,
  html.js .cs-f2_demo .cs-f2_legend-row {
    transition: opacity .55s var(--ease-out, cubic-bezier(.16,1,.3,1)), translate .65s var(--ease-out, cubic-bezier(.16,1,.3,1));
  }
  html.js .cs-f2_demo .cs-f2_pointer {
    transition: opacity .35s var(--ease-standard, cubic-bezier(.4,0,.2,1)), translate .7s var(--ease-in-out, cubic-bezier(.65,0,.35,1));
  }

  /* pre-start (JS on, scene not started yet) looks like k1 */
  html.js .cs-f2_demo:not(.is-k2):not(.is-k3):not(.is-k4):not(.is-k5) .cs-f2_fill { opacity: 0; }
  html.js .cs-f2_demo:not(.is-k2):not(.is-k3):not(.is-k4):not(.is-k5) .cs-f2_card.is-full .cs-f2_grey,
  html.js .cs-f2_demo:not(.is-k2):not(.is-k3):not(.is-k4):not(.is-k5) .cs-f2_card.is-part .cs-f2_grey { opacity: 1; }
  html.js .cs-f2_demo:not(.is-k2):not(.is-k3):not(.is-k4):not(.is-k5) .cs-f2_legend-top,
  html.js .cs-f2_demo:not(.is-k2):not(.is-k3):not(.is-k4):not(.is-k5) .cs-f2_legend-title,
  html.js .cs-f2_demo:not(.is-k2):not(.is-k3):not(.is-k4):not(.is-k5) .cs-f2_legend-row { opacity: 0; translate: 0 12px; }

  /* k2 — full-match fill sweeps left → right; legend head + "50% matched in full" appear */
  html.js .cs-f2_demo.is-k2 .cs-f2_fill.is-part { opacity: 0; }
  html.js .cs-f2_demo.is-k2 .cs-f2_card.is-part .cs-f2_grey { opacity: 1; }
  html.js .cs-f2_demo.is-k2 .cs-f2_fill.is-full,
  html.js .cs-f2_demo.is-k2 .cs-f2_card.is-full .cs-f2_grey { transition-delay: calc(var(--i, 0) * 45ms); }
  html.js .cs-f2_demo.is-k2 .cs-f2_legend-row.is-part { opacity: 0; translate: 0 12px; }
  html.js .cs-f2_demo.is-k2 .cs-f2_legend-top { transition-delay: .25s; }
  html.js .cs-f2_demo.is-k2 .cs-f2_legend-title { transition-delay: .33s; }
  html.js .cs-f2_demo.is-k2 .cs-f2_legend-row.is-full { transition-delay: .41s; }

  /* k3 — part-match fill sweeps in; "20% matched in part" appears */
  html.js .cs-f2_demo.is-k3 .cs-f2_fill.is-part,
  html.js .cs-f2_demo.is-k3 .cs-f2_card.is-part .cs-f2_grey { transition-delay: calc((var(--i, 14) - 14) * 70ms); }
  html.js .cs-f2_demo.is-k3 .cs-f2_legend-row.is-part { transition-delay: .3s; }

  /* k4 — pointer on "50% matched in full": full cards lift, rest dims */
  html.js .cs-f2_demo.is-k4 .cs-f2_card.is-full { translate: 0 -10.94%; transition-delay: calc((13 - var(--i, 0)) * 22ms); }
  html.js .cs-f2_demo.is-k4 .cs-f2_card.is-part { opacity: .5; }
  html.js .cs-f2_demo.is-k4 .cs-f2_card.is-none .cs-f2_grey { opacity: .5; }
  html.js .cs-f2_demo.is-k4 .cs-f2_legend-row.is-part { opacity: .5; }
  html.js .cs-f2_demo.is-k4 .cs-f2_legend-row.is-full .cs-f2_legend-text { font-weight: 500; }
  html.js .cs-f2_demo.is-k4 .cs-f2_pointer { opacity: 1; translate: 0 0; animation: cs-f2-press .24s .75s var(--ease-standard, ease) both; }

  /* k5 — pointer on "20% matched in part": part cards lift, full cards fade to 10% */
  html.js .cs-f2_demo.is-k5 .cs-f2_card.is-part { translate: 0 -10.94%; transition-delay: calc((19 - var(--i, 14)) * 30ms); }
  html.js .cs-f2_demo.is-k5 .cs-f2_fill.is-full { opacity: .1; }
  html.js .cs-f2_demo.is-k5 .cs-f2_card.is-none .cs-f2_grey { opacity: .5; }
  html.js .cs-f2_demo.is-k5 .cs-f2_legend-row.is-full { opacity: .5; }
  html.js .cs-f2_demo.is-k5 .cs-f2_legend-row.is-part .cs-f2_legend-text { font-weight: 500; }
  html.js .cs-f2_demo.is-k5 .cs-f2_pointer { opacity: 1; translate: 2px 28px; animation: cs-f2-press2 .24s .75s var(--ease-standard, ease) both; }

  /* pointer enters from below-right when it first appears */
  html.js .cs-f2_demo:not(.is-k4):not(.is-k5) .cs-f2_pointer { translate: 26px 34px; }
}
@keyframes cs-f2-press  { 0%, 100% { scale: 1; } 50% { scale: .94; } }
@keyframes cs-f2-press2 { 0%, 100% { scale: 1; } 50% { scale: .94; } }

/* ---------- Discoveries: icon pop-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .cs-disc .cs-disc_icon { opacity: 0; scale: .9; }
  html.js .cs-disc.is-in .cs-disc_icon {
    opacity: 1; scale: 1;
    transition: opacity .5s var(--ease-out, cubic-bezier(.16,1,.3,1)), scale .7s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
    transition-delay: calc(var(--i, 0) * 80ms);
  }
}

/* ---------- F1 vacuum: top fade (Figma mask "Rectangle 34625048" gradient) ---------- */
.cs-f1_vac {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.18) 40%, #000 68%, #000 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.18) 40%, #000 68%, #000 100%);
}

/* Mobile (Figma 13035:290684): left-aligned headings; discoveries copy trimmed to cap height (186px rows) */
@media screen and (max-width: 479px) {
  .cs-f1 .cs-f1_title.heading-style-h2, .cs-f2 .cs-f2_title.heading-style-h2 { text-align: left; }
  .cs-disc .cs-disc_item-text { text-box: trim-both cap alphabetic; }
}

/* ==== 05-findings-b ==== */
/* =========================================================
   05-findings-b — page-level CSS (states, keyframes, motion)
   Scoped to .cs-f3 / .cs-f4. Final keyframe = static styles.
   ========================================================= */

/* ---------- FINDING 03: mobile title override (beats heading-style-h2 clamp) ---------- */
@media screen and (max-width: 479px) {
  .cs-f3 .cs-f3_title,
  .cs-f4 .cs-f4_title { font-size: 24px; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- FINDING 03: cards rise, bullets stagger ---------- */
  html.js .cs-f3_card {
    opacity: 0; translate: 0 28px; scale: .985;
    transition: opacity .9s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  html.js .cs-f3.is-in .cs-f3_card { opacity: 1; translate: 0 0; scale: 1; }

  html.js .cs-f3_item {
    opacity: 0; translate: 0 14px;
    transition: opacity .6s var(--ease-out), translate .6s var(--ease-out);
    transition-delay: calc(420ms + var(--i, 0) * 75ms);
  }
  html.js .cs-f3_card.is-synthetic .cs-f3_item { transition-delay: calc(510ms + var(--i, 0) * 75ms); }
  html.js .cs-f3.is-in .cs-f3_item { opacity: 1; translate: 0 0; }

  html.js .cs-f3_icon { scale: .6; transition: scale .55s var(--ease-spring); transition-delay: inherit; }
  html.js .cs-f3.is-in .cs-f3_icon { scale: 1; }

  /* synthetic portrait: slow breathe + shimmer (runs only while visible) */
  .cs-f3_holo {
    transform-origin: 50% 22%;
    animation: cs-f3-breathe 8s var(--ease-in-out) infinite alternate;
    animation-play-state: paused;
  }
  .cs-f3_glow { animation: cs-f3-shimmer 6s ease-in-out infinite alternate; animation-play-state: paused; }
  .cs-f3_pattern-img { animation: cs-f3-twinkle 9s ease-in-out infinite alternate; animation-play-state: paused; }
  .cs-f3.is-live .cs-f3_holo,
  .cs-f3.is-live .cs-f3_glow,
  .cs-f3.is-live .cs-f3_pattern-img { animation-play-state: running; }

  /* ---------- FINDING 04: frame-by-frame demos ---------- */
  /* card 1 — products grid fills, then synthetic row lights up */
  .cs-f4_thumb {
    transition: opacity .6s var(--ease-out), scale .6s var(--ease-spring), border-color .6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .cs-f4_thumb.is-human { transition-delay: calc(380ms + var(--i, 0) * 90ms); }
  .cs-f4_viz.is-k1 .cs-f4_thumb { opacity: 0; scale: .94; transition-delay: 0ms; }
  .cs-f4_viz.is-k1 .cs-f4_thumb,
  .cs-f4_viz.is-k2 .cs-f4_thumb { border-color: rgba(17, 24, 39, .2); }

  /* card 2 — bars grow, rows reveal, stars fill */
  .cs-f4_bar { transition: opacity .6s var(--ease-out); }
  .cs-f4_bar-fill { transition: width .7s var(--ease-out); }
  .cs-f4_viz.is-k1 .cs-f4_bar-fill.is-r5 { width: 31.8%; }
  .cs-f4_viz.is-k1 .cs-f4_bar-fill.is-r4 { width: 20.3%; }
  .cs-f4_viz.is-k1 .cs-f4_bar-fill.is-r3 { width: 13.5%; }
  .cs-f4_viz.is-k1 .cs-f4_bar.is-r4 { opacity: .7; }
  .cs-f4_viz.is-k1 .cs-f4_bar.is-r3 { opacity: .2; }
  .cs-f4_viz.is-k1 .cs-f4_bar.is-r2,
  .cs-f4_viz.is-k1 .cs-f4_bar.is-r1 { opacity: 0; }

  .cs-f4_star { transition: color .45s var(--ease-out), scale .45s var(--ease-spring); transition-delay: calc(var(--i, 0) * 110ms); }
  .cs-f4_viz.is-k1 .cs-f4_star.is-on,
  .cs-f4_viz.is-k2 .cs-f4_star.is-on { color: #efefef; scale: .85; transition-delay: 0ms; }

  /* card 3 — insight rows brighten as the cursor walks down */
  .cs-f4_ins { transition: opacity .6s var(--ease-out); }
  .cs-f4_viz.is-k1 .cs-f4_ins.is-n1 { opacity: .7; }
  .cs-f4_viz.is-k1 .cs-f4_ins.is-n2 { opacity: .4; }
  .cs-f4_viz.is-k1 .cs-f4_ins.is-n3 { opacity: .1; }
  .cs-f4_viz.is-k1 .cs-f4_ins.is-n4 { opacity: 0; }
  .cs-f4_viz.is-k2 .cs-f4_ins.is-n2 { opacity: .6; }
  .cs-f4_viz.is-k2 .cs-f4_ins.is-n3 { opacity: .4; }
  .cs-f4_viz.is-k2 .cs-f4_ins.is-n4 { opacity: 0; }

  /* "Synthetic" cursor + tag travel */
  .cs-f4_pointer { transition: transform .7s var(--ease-in-out), opacity .4s var(--ease-out); }
  .cs-f4_viz.is-k1 .cs-f4_pointer.is-reviews { transform: translate(5px, 86px); }
  .cs-f4_viz.is-k2 .cs-f4_pointer.is-reviews { transform: translate(120px, 42px); }
  .cs-f4_viz.is-k1 .cs-f4_pointer.is-insights { transform: translate(191.67px, 14px); }
  .cs-f4_viz.is-k2 .cs-f4_pointer.is-insights { transform: translate(191.67px, 47px); }

  .cs-f4_cursor { transition: scale .12s var(--ease-standard); }
  .cs-f4_viz.is-press .cs-f4_cursor { scale: .94; }
  .cs-f4_tag { transition: scale .12s var(--ease-standard); }
  .cs-f4_viz.is-press .cs-f4_tag { scale: .97; }
}

@keyframes cs-f3-breathe {
  0%   { scale: 1;    filter: brightness(1) saturate(1); }
  100% { scale: 1.04; filter: brightness(1.07) saturate(1.12); }
}
@keyframes cs-f3-shimmer {
  0%   { opacity: .78; }
  100% { opacity: 1; }
}
@keyframes cs-f3-twinkle {
  0%   { opacity: .55; }
  100% { opacity: 1; }
}

/* reduced motion: everything rests on the final keyframe */
@media (prefers-reduced-motion: reduce) {
  .cs-f3_holo, .cs-f3_glow, .cs-f3_pattern-img { animation: none; }
  .cs-f3_card, .cs-f3_item, .cs-f3_icon,
  .cs-f4_thumb, .cs-f4_bar, .cs-f4_bar-fill, .cs-f4_star, .cs-f4_ins,
  .cs-f4_pointer, .cs-f4_cursor, .cs-f4_tag { transition: none; }
}

/* FINDING 04 rest state (Figma 13044:241): final keyframe, Insights cursor hidden until a card plays */
.cs-f4_viz .cs-f4_pointer.is-insights { opacity: 0; }
.cs-f4_viz.is-playing .cs-f4_pointer.is-insights { opacity: 1; }
.cs-f4_viz.is-instant, .cs-f4_viz.is-instant * { transition: none !important; }

/* ==== 06-f5 ==== */
/* ===== cs-f5 / cs-blend — rules the importer cannot take ===== */

/* glow layers add light like Figma's plus-lighter */
.cs-f5_glow img { mix-blend-mode: plus-lighter; }
.cs-f5_glow .cs-f5_glow-6,
.cs-f5_glow .cs-f5_stars { mix-blend-mode: normal; }
/* Figma's export crops the blur of the two wide wedges at the SVG edge; feather it out */
.cs-f5_glow .cs-f5_glow-2,
.cs-f5_glow .cs-f5_glow-3 {
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}

/* ---- carousel: states not present in the static HTML ---- */
.cs-f5_card.is-hidden-up { opacity: 0; transform: translate(0px, -250px) scale(0.7); z-index: 0; }
.cs-f5_card.is-hidden-down { z-index: 0; }
.cs-f5_card.is-active .cs-f5_card-text { max-width: 293px; }
.cs-f5_card.is-active .cs-f5_card-text.is-fix { max-width: 221px; }
.cs-f5_card:not(.is-active) { pointer-events: none; }
.cs-f5_nav { -webkit-tap-highlight-color: transparent; }
@media screen and (max-width: 479px) {
  .cs-f5_card.is-hidden-up { transform: translate(0px, -165px) scale(0.7); }
  .cs-f5_card.is-active .cs-f5_card-text { max-width: 192px; }
  .cs-f5_card.is-active .cs-f5_card-text.is-fix { max-width: 145px; }
}

/* ---- closing line: gradient accent (final frame, always on) ---- */
.cs-blend_w.is-accent {
  background-image: linear-gradient(90deg, #f6316c, #ff6e6e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
  /* carousel motion (Animation 8) */
  .cs-f5_card {
    transition: transform 700ms var(--ease-out, cubic-bezier(.16,1,.3,1)),
                opacity 700ms var(--ease-out, cubic-bezier(.16,1,.3,1));
    will-change: transform, opacity;
  }
  .cs-f5_card.is-instant { transition: none; }
  .cs-f5_icon { transition: scale 600ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
  .cs-f5_card:not(.is-active) .cs-f5_icon { scale: .9; }
  .cs-f5_nav { transition: background-color 200ms ease, scale 120ms ease; }
  .cs-f5_nav:active { scale: .94; }

  /* closing line build (Animation 9) — hidden initial states only with JS */
  html.js .cs-blend_w {
    color: #6f7279;
    transition: color 600ms var(--ease-standard, cubic-bezier(.4,0,.2,1));
  }
  html.js .cs-blend_w.is-g1 { transition-delay: calc(var(--i, 0) * 140ms); }
  html.js .cs-blend_w.is-accent { color: #6f7279; transition-duration: 900ms; }
  html.js .cs-blend_chip,
  html.js .cs-blend_pill {
    opacity: 0;
    scale: .4;
    transition: opacity 360ms var(--ease-out, cubic-bezier(.16,1,.3,1)),
                scale 650ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
  }

  html.js .cs-blend.is-f2 .cs-blend_w.is-g1 { color: var(--_colors---theme--text-on-dark, #fff); }
  html.js .cs-blend.is-f3 .cs-blend_chip { opacity: 1; scale: 1; }
  html.js .cs-blend.is-f3 .cs-blend_w.is-g2 { color: var(--_colors---theme--text-on-dark, #fff); }
  html.js .cs-blend.is-f4 .cs-blend_pill.is-human { opacity: 1; scale: 1; }
  html.js .cs-blend.is-f5 .cs-blend_w.is-g4 { color: var(--_colors---theme--text-on-dark, #fff); }
  html.js .cs-blend.is-f6 .cs-blend_pill.is-ai { opacity: 1; scale: 1; }
  html.js .cs-blend.is-f6 .cs-blend_w.is-g5 { color: var(--_colors---theme--text-on-dark, #fff); }
  html.js .cs-blend.is-f7 .cs-blend_w.is-accent { color: transparent; }
}

/* focus-visible rules (the Webflow importer only accepts :hover/:focus/:active) */
.cs-f5_nav:focus-visible{outline: 2px solid var(--_colors---theme--brand-soft); outline-offset: 2px;}

/* Word gaps in the closing line: the Webflow importer drops whitespace-only text between inline spans */
.cs-blend_w.is-g1:nth-child(-n+2),.cs-blend_w.is-g5{margin-right:.26em}

/* Mobile (Figma 13035:290684): heading at 24px like the other sections (heading-style-h2's mobile size is larger) */
@media screen and (max-width: 479px) {
  .cs-f5 .cs-f5_title.heading-style-h2 { font-size: 24px; line-height: 1.2; }
  .cs-f5 .cs-f5_lead { max-width: 350px; margin-left: auto; margin-right: auto; }
}

/* ==== 07-end ==== */
/* ===== 07-end · Watch the sessions (cs-watch) · Methodology (cs-method) · Final CTA (cs-cta) ===== */

/* Figma text boxes are trimmed to cap height / baseline (homepage convention) */
.cs-watch .cs-watch_eyebrow,.cs-watch .cs-watch_title,.cs-watch .cs-watch_lead,.cs-watch .cs-watch_card-text,
.cs-method .cs-method_eyebrow,.cs-method .cs-method_title,.cs-method .cs-method_sub,.cs-method .cs-method_p,.cs-method .cs-method_note-title,.cs-method .cs-method_note-text,
.cs-cta .cs-cta_eyebrow,.cs-cta .cs-cta_title,.cs-cta .cs-cta_lead{text-box:trim-both cap alphabetic}

/* base.css caps .is-cs img at max-width:100%; these layers are intentionally oversized */
.cs-method .cs-method_figure-img,.cs-cta .cs-cta_ray-img,.cs-cta .cs-cta_star,.cs-cta .cs-cta_wordmark-part{max-width:none}

/* ---------- Watch: cards rise in, play button hover ---------- */
.cs-watch .cs-watch_play{transition:scale .5s var(--ease-spring),opacity .3s var(--ease-out)}
.cs-watch .cs-watch_media{transition:background-color .3s var(--ease-out)}
.cs-watch .cs-watch_media:hover{background-color:rgba(255,255,255,.03)}
.cs-watch .cs-watch_media:hover .cs-watch_play,.cs-watch .cs-watch_media:focus-visible .cs-watch_play{scale:1.12}
.cs-watch .cs-watch_media:active .cs-watch_play{scale:.94;transition-duration:.12s}
.cs-watch .cs-watch_media.is-playing{cursor:default}
.cs-watch .cs-watch_media.is-playing .cs-watch_play{opacity:0}
@media (prefers-reduced-motion:no-preference){
  html.js .cs-watch .cs-watch_card{opacity:0;translate:0 28px}
  html.js .cs-watch.is-in .cs-watch_card{opacity:1;translate:0 0;transition:opacity .7s var(--ease-out) calc(var(--i,0)*90ms),translate .9s var(--ease-out) calc(var(--i,0)*90ms)}
}

/* ---------- Methodology: logo tile float/breathe, callout fades up ---------- */
@keyframes cs-method-float{0%,100%{translate:0 0;scale:1}50%{translate:0 -8px;scale:1.035}}
@keyframes cs-method-breathe{0%,100%{scale:1}50%{scale:1.03}}
@media (prefers-reduced-motion:no-preference){
  .cs-method .cs-method_logo{animation:cs-method-float 7s var(--ease-in-out) infinite}
  .cs-method .cs-method_figure{animation:cs-method-breathe 12s ease-in-out infinite;transform-origin:50% 40%}
  html.js .cs-method .cs-method_note{opacity:0;translate:0 24px}
  html.js .cs-method .cs-method_note.is-in{opacity:1;translate:0 0;transition:opacity .8s var(--ease-out),translate .9s var(--ease-out)}
}

/* ---------- CTA: background ambience (homepage cta-v4 assets) ---------- */
/* Figma: rays use plus-lighter blending (ellipse normal) */
.cs-cta .cs-cta_ray.is-1,.cs-cta .cs-cta_ray.is-2,.cs-cta .cs-cta_ray.is-3,.cs-cta .cs-cta_ray.is-4,.cs-cta .cs-cta_ray.is-5{mix-blend-mode:plus-lighter}
@keyframes cs-cta-twinkle{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes cs-cta-pulse{0%,100%{opacity:.85;scale:1}50%{opacity:1;scale:1.04}}
@media (prefers-reduced-motion:no-preference){
  .cs-cta .cs-cta_star{animation:cs-cta-twinkle var(--d,5s) ease-in-out var(--dl,0s) infinite}
  .cs-cta .cs-cta_ray{animation:cs-cta-pulse 7s ease-in-out infinite}
}

/* ---------- CTA demo: "Animation 10" frame-by-frame (Figma 13027:276012) ----------
   Base styles = FINAL keyframe (f7), so no-JS / Designer / reduced motion show the issue list.
   page.js adds .is-run plus cumulative state classes:
   is-type (typing) → is-f2 → is-press → is-f3 → is-f4 → is-f5 → is-s2 → is-f6 → is-f7 */
.cs-cta .cs-cta_stage{opacity:1}
.cs-cta .cs-cta_input{opacity:0;translate:0 -16px;scale:.98}
.cs-cta .cs-cta_placeholder,.cs-cta .cs-cta_caret{opacity:0}
.cs-cta .cs-cta_panel{translate:0 -198px}
.cs-cta .cs-cta_bar{width:var(--w,50%)}
.cs-cta .cs-cta_cursor{translate:21px 261px}
.cs-cta .cs-cta_run{transform-origin:0 0}
.cs-cta .cs-cta_list{transform-origin:0 0}
.cs-cta .cs-cta_dot.is-done{transform-origin:50% 50%}
.cs-cta .cs-cta_ch{display:inline}

/* f1: chat input with placeholder + blinking caret */
@keyframes cs-cta-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cs-cta .cs-cta_stage.is-run:not(.is-f3) .cs-cta_input{opacity:1;translate:0 0;scale:1}
.cs-cta .cs-cta_stage.is-run:not(.is-type) .cs-cta_placeholder{opacity:.75}
.cs-cta .cs-cta_stage.is-run:not(.is-type) .cs-cta_caret{opacity:1;animation:cs-cta-blink 1.06s steps(1) infinite}
.cs-cta .cs-cta_stage.is-run .cs-cta_typed .cs-cta_ch{opacity:0}
.cs-cta .cs-cta_stage.is-run.is-type .cs-cta_typed .cs-cta_ch{opacity:1}
/* f3: panel in, input out, message reveal */
.cs-cta .cs-cta_stage.is-run:not(.is-f7) .cs-cta_panel{translate:0 0}
.cs-cta .cs-cta_stage.is-run:not(.is-f3) .cs-cta_panel{opacity:0;translate:0 24px}
.cs-cta .cs-cta_stage.is-run:not(.is-f3) .cs-cta_msg .cs-cta_ch{opacity:.35}
/* f4: TheySaid run card in, all steps pending */
.cs-cta .cs-cta_stage.is-run:not(.is-f4) .cs-cta_run{opacity:0;translate:0 10px;scale:.96}
.cs-cta .cs-cta_stage.is-run:not(.is-f5) .cs-cta_rail-fill{scale:1 0}
.cs-cta .cs-cta_stage.is-run:not(.is-f5) [data-step="1"] .cs-cta_dot.is-done,
.cs-cta .cs-cta_stage.is-run:not(.is-s2) [data-step="2"] .cs-cta_dot.is-done,
.cs-cta .cs-cta_stage.is-run:not(.is-f6) [data-step="3"] .cs-cta_dot.is-done{opacity:0;scale:.4}
/* f5: step 1 running (3 min), rail half-filled */
.cs-cta .cs-cta_stage.is-run.is-f5:not(.is-s2) .cs-cta_rail-fill{scale:1 .5}
.cs-cta .cs-cta_stage.is-run.is-f5:not(.is-s2) [data-step="1"] .cs-cta_step-dur{opacity:.75}
/* f6: all steps ticked, "Were found 5 issues" reveal */
.cs-cta .cs-cta_stage.is-run:not(.is-f6) .cs-cta_count .cs-cta_ch{opacity:0}
/* f7: panel scrolls, issue list in, bars fill */
.cs-cta .cs-cta_stage.is-run:not(.is-f7) .cs-cta_list{opacity:0;translate:0 12px;scale:.97}
.cs-cta .cs-cta_stage.is-run:not(.is-f7) .cs-cta_bar{clip-path:inset(0 100% 0 0)}
/* cursor path */
.cs-cta .cs-cta_stage.is-run .cs-cta_cursor{translate:13px 258px}
.cs-cta .cs-cta_stage.is-run.is-f2 .cs-cta_cursor{translate:377px 198px}
.cs-cta .cs-cta_stage.is-run.is-f3 .cs-cta_cursor{translate:-40px 273px;opacity:0}
.cs-cta .cs-cta_stage.is-run.is-f4 .cs-cta_cursor{translate:26px 274px;opacity:1}
.cs-cta .cs-cta_stage.is-run.is-f6 .cs-cta_cursor{translate:47px 241px}
.cs-cta .cs-cta_stage.is-run.is-f7 .cs-cta_cursor{translate:21px 261px}
.cs-cta .cs-cta_stage.is-press .cs-cta_cursor,.cs-cta .cs-cta_stage.is-press .cs-cta_send{scale:.94}
/* loop out / reset */
.cs-cta .cs-cta_stage.is-out,.cs-cta .cs-cta_stage.is-reset{opacity:0}
.cs-cta .cs-cta_stage.is-reset,.cs-cta .cs-cta_stage.is-reset *{transition:none!important}

@media (prefers-reduced-motion:no-preference){
  .cs-cta .cs-cta_stage{transition:opacity .45s var(--ease-out)}
  .cs-cta .cs-cta_input{transition:opacity .45s var(--ease-out),translate .6s var(--ease-out),scale .6s var(--ease-out)}
  .cs-cta .cs-cta_send{transition:scale .12s var(--ease-standard)}
  .cs-cta .cs-cta_placeholder{transition:opacity .15s linear}
  .cs-cta .cs-cta_stage.is-type .cs-cta_typed .cs-cta_ch{transition:opacity 0s linear calc(var(--i,0)*38ms)}
  .cs-cta .cs-cta_panel{transition:opacity .6s var(--ease-out),translate .7s var(--ease-in-out)}
  .cs-cta .cs-cta_stage.is-f3:not(.is-f7) .cs-cta_panel{transition:opacity .6s var(--ease-out),translate .7s var(--ease-out)}
  .cs-cta .cs-cta_stage.is-f3 .cs-cta_msg .cs-cta_ch{transition:opacity .3s linear calc(200ms + var(--i,0)*12ms)}
  .cs-cta .cs-cta_run{transition:opacity .5s var(--ease-out),translate .6s var(--ease-spring),scale .6s var(--ease-spring)}
  .cs-cta .cs-cta_dot.is-done{transition:opacity .25s var(--ease-out),scale .5s var(--ease-spring)}
  .cs-cta .cs-cta_rail-fill{transition:scale .9s var(--ease-in-out)}
  .cs-cta .cs-cta_step-dur{transition:opacity .3s var(--ease-out)}
  .cs-cta .cs-cta_step-label{transition:opacity .25s var(--ease-out)}
  .cs-cta .cs-cta_stage.is-f6 .cs-cta_count .cs-cta_ch{transition:opacity .3s linear calc(250ms + var(--i,0)*28ms)}
  .cs-cta .cs-cta_list{transition:opacity .5s var(--ease-out) .15s,translate .7s var(--ease-out) .15s,scale .7s var(--ease-spring) .15s}
  .cs-cta .cs-cta_bar{transition:clip-path 1.1s var(--ease-in-out) calc(450ms + var(--i,0)*90ms)}
  .cs-cta .cs-cta_cursor{transition:translate .7s var(--ease-in-out),opacity .3s var(--ease-out),scale .12s var(--ease-standard)}
}

/* stacked layouts: soften the clipped top edge of the demo */
@media screen and (max-width:991px){.cs-cta .cs-cta_demo{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 36px);mask-image:linear-gradient(180deg,transparent 0,#000 36px)}}
/* demo scale on small screens (stage is authored at the Figma 610×371 keyframe size) */
@media screen and (max-width:767px){.cs-cta .cs-cta_stage{scale:.849}}
@media screen and (max-width:479px){.cs-cta .cs-cta_stage{scale:.5836}}

/* focus-visible rules (the Webflow importer only accepts :hover/:focus/:active) */
.cs-watch_media:focus-visible{box-shadow:0 0 0 2px var(--_colors---theme--brand-soft)}

/* Footer V4 is shared: the case study adds the top divider (Figma) on this page only */
.is-cs .footer-v4_component{border-top:1px solid var(--_colors---theme--border-on-dark)}

/* Watch: poster frames under the play button — a soft scrim keeps the button readable over the screen recording */
.cs-watch .cs-watch_media.has-poster::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(15,20,31,.15),rgba(15,20,31,.45));transition:opacity .3s var(--ease-out);pointer-events:none}
.cs-watch .cs-watch_media.has-poster:hover::before{opacity:.6}
.cs-watch .cs-watch_media.has-poster .cs-watch_play{position:relative;z-index:1;background:rgba(15,20,31,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.12)}

/* Mobile (Figma 13035:290684): left-aligned headings (heading-style-h2 centers on phones) */
@media screen and (max-width: 479px) {
  .cs-watch .cs-watch_title.heading-style-h2, .cs-cta .cs-cta_title.heading-style-h2 { text-align: left; }
  .cs-watch .cs-watch_title.heading-style-h2 { margin-top: 6px; margin-bottom: 4px; }
}