/* TheySaid 4.0 landing (/v4) — page CSS v5 (custom part + motion + homepage navbar). Source: theysaid/v4-page/proto */
/* ---------- PART 2: CUSTOM (hosted CSS) ---------- */

/* Neutralise the site-wide tag styles (p colour, li lower-roman, heading sizes), as the homepage does for .is-home-v4 */
:where(.page-wrapper.is-lp) :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(.page-wrapper.is-lp) p{color:revert;font-size:revert;line-height:revert;margin:0;padding:0}
:where(.page-wrapper.is-lp) a{color:inherit;text-decoration:none}
:where(.page-wrapper.is-lp) :is(ul,ol){margin:0;padding:0;list-style:none;font-size:revert;line-height:revert}
:where(.page-wrapper.is-lp) li{list-style-type:revert}
:where(.page-wrapper.is-lp) img{color:revert;padding:0;display:block;max-width:100%}
:where(.page-wrapper.is-lp) :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}
:where(.page-wrapper.is-lp) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* Scope + text trim (Figma measures every gap from cap height to baseline) */
.page-wrapper.is-lp .lp-trim,
.page-wrapper.is-lp :is(.eyebrow-v4,.wn_title,.wn_lede,.wn_card-t,.wn_card-d,.build_col-t,.build_col-d,.aud_title,.aud_lede,.aud_stat-v,.aud_callout-t,.hero_brand-ver){text-box:trim-both cap alphabetic}
@supports not (text-box:trim-both cap alphabetic){
  .page-wrapper.is-lp :is(.eyebrow-v4,.wn_lede,.wn_card-d,.build_col-d,.aud_lede){margin-block:-.387em -.386em}
  .page-wrapper.is-lp :is(.wn_title,.wn_card-t,.build_col-t,.aud_title,.aud_stat-v,.aud_callout-t){margin-block:-.248em -.266em}
}
@media(max-width:479px){
  .page-wrapper.is-lp :is(.eyebrow-v4,.wn_title,.aud_title,.build_title,.new_h,.cta-v4_title,.aud_stat-v){text-box:none}
  @supports not (text-box:trim-both cap alphabetic){.page-wrapper.is-lp :is(.eyebrow-v4,.wn_title,.aud_title,.aud_stat-v){margin-block:0}}
  .page-wrapper.is-lp .new_d{text-box:trim-both cap alphabetic}
  @supports not (text-box:trim-both cap alphabetic){.page-wrapper.is-lp .new_d{margin-block:-.387em -.386em}}
}
.page-wrapper.is-lp .footer-v4_bar,.page-wrapper.is-lp .footer-v4_link.is-sm{letter-spacing:-.28px}
.btn-wrap-v4 .button-v4{width:100%}

/* Hero lockup: the logo is the shared logo-v4 (it only reads --logo-w from 480px up); the 4.0 badge is glass */
.hero_brand .logo-v4{width:170.165px}
.hero_brand-ver{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.22),0 4px 16px rgba(0,0,0,.18)}
@media(max-width:479px){.hero_brand .logo-v4{width:158.889px}}

/* Landing nav logo is 104.72px wide at every size (the shared logo-v4 only reads --logo-w from 480px up) */
.nav-lp_logo .logo-v4{width:104.72px}

/* Navbar states */
.nav-lp_bar{transition:background-color .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1),backdrop-filter .35s}
.nav-lp_component.is-open .nav-lp_bar{background-color:rgba(17,21,28,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav-lp_menu:hover .nav-v4_link,.nav-lp_menu:focus-within .nav-v4_link{opacity:.55}
.nav-lp_menu .nav-v4_link:hover,.nav-lp_menu .nav-v4_link:focus-visible{opacity:1}
.nav-lp_burger svg{display:block}
.nav-lp_burger .nav-lp_x{display:none}
.nav-lp_component.is-open .nav-lp_burger .nav-lp_x{display:block}
.nav-lp_component.is-open .nav-lp_burger .nav-lp_lines{display:none}
@media(max-width:991px){.nav-lp_component.is-open .nav-lp_sheet{display:flex}}
@media(min-width:992px){.nav-lp_sheet{display:none!important}}
.nav-lp_sheet .nav-v4_link{border-bottom:1px solid rgba(255,255,255,.08)}

/* Integrations strip: fluid gap on desktop, infinite marquee ≤991 (same keyframes as the homepage logos) */
.tools_viewport{--t:80px;--g:clamp(8px,calc((100vw - 880px) / 10),50px)}
.tools_row{gap:var(--g)}
.tools_item{width:var(--t);height:var(--t)}
@media(max-width:991px){
  .tools_viewport{--t:64px;--g:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .tools_row{padding-right:var(--g)}
  .tools_track{animation:lg-marquee 32s linear infinite}
}
@media(max-width:479px){.tools_viewport{--t:40px;--g:24px}.tools_track{animation-duration:26s}}
@media(prefers-reduced-motion:reduce){.tools_track{animation:none}}

/* What's new carousel (scroll-snap properties are not available as native Webflow styles) */
.wn_track{scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-left:max(108px,calc((100% - 1224px) / 2))}
.wn_card{scroll-snap-align:start}
.wn_card-d{max-width:var(--w,none)}
.wn_card:first-child{position:relative}
.wn_card:first-child:after{content:"";position:absolute;inset:0;z-index:2;padding:1px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 100% 0,#a5b4fc 0,#fda4af 150px,rgba(253,164,175,0) 360px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media(min-width:480px){
  .wn_track.is-grab{cursor:grab}
  .wn_track.is-dragging{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}
  .wn_track img{-webkit-user-drag:none;user-select:none}
}
@media(max-width:991px){.wn_track{scroll-padding-left:clamp(20px,5vw,108px)}}
@media(max-width:479px){.wn_track{scroll-snap-type:none}}
.wn_track::-webkit-scrollbar{display:none}
.wn_arrow[disabled],.wn_arrow[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}
.wn_arrow:focus-visible{outline:2px solid var(--rose-400);outline-offset:3px}

/* Features (phones): the desktop diagram's dashed grid runs behind each stacked column, as in the mobile design */
@media(max-width:767px){.build_col{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42.87' height='42.87'%3E%3Cpath d='M0 24.64H19.28M30 24.64H42.87M24.64 0V19.28M24.64 30V42.87' stroke='%23eee' stroke-width='.53' fill='none'/%3E%3C/svg%3E");background-size:42.87px 42.87px;background-position:0 0}}

/* Synthetic audiences study mockup: sizes in figure units (--u = 1 design px at the 1095.845px figure width) */
.aud_study{container-type:inline-size;--u:calc(100cqw / 1095.845)}
.aud_study-card{border-radius:calc(20.81 * var(--u));box-shadow:0 calc(98 * var(--u)) calc(39 * var(--u)) rgba(163,163,163,.01),0 calc(55 * var(--u)) calc(33 * var(--u)) rgba(163,163,163,.05),0 calc(25 * var(--u)) calc(25 * var(--u)) rgba(163,163,163,.09),0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(163,163,163,.1)}
.aud_study-tag{left:calc(17.171 * var(--u));top:calc(20.06 * var(--u));padding:calc(3.232 * var(--u)) calc(12.927 * var(--u));border-radius:calc(11.311 * var(--u));font-size:calc(22.621 * var(--u));line-height:calc(32.316 * var(--u));letter-spacing:calc(-.1357 * var(--u))}
.aud_study-cap{font-size:calc(29.839 * var(--u));line-height:1.5}
.aud_study-line{display:table;margin:0 auto;padding:0 calc(var(--cp,12) * var(--u));background-color:#000}
.aud_study-line+.aud_study-line{margin-top:calc(2.132 * var(--u))}
.aud_study-cap.is-split .aud_study-line{padding:0;background:none}
.aud_study-w{display:inline-block;white-space:pre;background-color:#000}
.aud_study-w:first-child{padding-left:calc(var(--cp,12) * var(--u))}
.aud_study-w:last-child{padding-right:calc(var(--cp,12) * var(--u))}

/* Frame lines on light sections */
.section_aud,.section_new.is-lp,.section_build.is-lp{--frame-line:var(--line-light)}
@media(max-width:479px){
  .section_wn{position:relative}
  .section_wn:before,.section_wn:after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line-light);pointer-events:none}
  .section_wn:before{left:8px}.section_wn:after{right:8px}
  .section_aud.is-framed:before{left:8px}.section_aud.is-framed:after{right:8px}
  .section_new.is-framed:before{left:8px}.section_new.is-framed:after{right:8px}
}

/* Rest of 4.0 grid, light theme */
.section_new.is-framed.is-lp{--wn-line:var(--line-light)}
.section_new.is-lp .new_cell:before{background:radial-gradient(120% 90% at 50% 28%,rgba(17,24,39,.035),rgba(17,24,39,.012) 62%,transparent 100%)}
@media(min-width:992px){
  .new_grid.is-lp .new_cell:nth-child(n+4) .new_a.is-lp{padding-bottom:40px}
  .new_grid.is-lp .new_cell:nth-last-child(-n+3) .new_ln-b{display:none}
}
@media(min-width:768px) and (max-width:991px){.new_grid.is-lp .new_cell:nth-last-child(-n+2) .new_ln-b{display:none}}
@media(max-width:991px){
  .new_grid.is-lp .new_cell:nth-child(4n+1),.new_grid.is-lp .new_cell:nth-child(4n){--wn-tile:#374151}
  .new_grid.is-lp .new_cell:nth-child(4n+2),.new_grid.is-lp .new_cell:nth-child(4n+3){--wn-tile:#f43f5e}
}
@media(max-width:767px){
  .new_grid.is-lp .new_ln{display:none!important}
  .new_grid.is-lp .new_cell{border-top:1px solid var(--line-light)}
  .new_grid.is-lp .new_cell:nth-child(odd){border-right:1px solid var(--line-light)}
  .new_grid.is-lp .new_d{max-width:none}
}
@media(max-width:479px){
  .new_grid.is-lp .new_ico{width:40px;height:40px;border-radius:12px}
  .new_grid.is-lp .new_ico img{width:21.333px;height:21.333px}
}

/* Final CTA: the homepage sizes it to 848px; the landing CTA (with footer inside) is 664px */
@media(min-width:480px){.section_cta-v4.is-lp{min-height:664px}}
@media(min-width:480px){
  .section_cta-v4.is-lp .cta-v4_fig.is-l{left:calc(-295.9px - var(--sp-l,0px));top:-81.4px;width:888.9px;height:812.7px}
  .section_cta-v4.is-lp .cta-v4_fig.is-r{left:calc(942px + var(--sp-r,0px));top:17.4px;width:642.66px;height:1141.9px}
}
@media(max-width:479px){
  .section_cta-v4.is-lp .cta-v4_fig.is-l{left:304.3px;top:203.8px;width:516.7px;height:472.4px}
  .section_cta-v4.is-lp .cta-v4_fig.is-r{left:682px;top:278px;width:373.5px;height:663.63px}
  .section_cta-v4.is-lp footer{background-color:#0f141f}
  .section_cta-v4.is-lp footer:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:94px;background-image:linear-gradient(180deg,rgba(15,20,31,0),#0f141f);pointer-events:none}
}
/* Footer links: same hover as the nav (the others dim while one is hovered) */
.footer-v4_legal.is-lp .footer-v4_link{transition:opacity .3s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
.footer-v4_legal.is-lp:hover .footer-v4_link,.footer-v4_legal.is-lp:focus-within .footer-v4_link{opacity:.55}
.footer-v4_legal.is-lp .footer-v4_link:hover,.footer-v4_legal.is-lp .footer-v4_link:focus-visible{opacity:1}

/* Entrance (same keyframes as the homepage h40 block, scoped to this page) */
.page-wrapper.is-lp .h40-wm{overflow:clip;position:relative;display:inline-block}
.page-wrapper.is-lp .h40-w{position:relative;display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .page-wrapper.is-lp .hero_brand{animation:h40-up .9s cubic-bezier(.16,1,.3,1) .1s backwards}
  .page-wrapper.is-lp .hero_copy .eyebrow-v4{animation:h40-up .9s cubic-bezier(.16,1,.3,1) .2s backwards}
  .page-wrapper.is-lp .h40-w{animation:h40-rise 1.05s cubic-bezier(.16,1,.3,1) calc(.28s + var(--i,0)*.055s) backwards}
  .page-wrapper.is-lp .hero_actions{animation:h40-up .9s cubic-bezier(.16,1,.3,1) .7s backwards}
  .js .page-wrapper.is-lp [data-lp-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0s)}
  .js .page-wrapper.is-lp [data-lp-reveal].is-in{opacity:1;transform:none}
}


/* TheySaid 4.0 landing (/v4): scroll motion in the homepage language (IX3 timelines + ambient effects).
   Everything is driven by lp-v4-motion.js, which tags existing elements with data-m presets and --md delays
   (no markup changes) and adds .is-in when their trigger scrolls into view. Without JS, or with reduced
   motion, nothing is hidden. */

/* Word masks for section titles (same structure as the hero h40 split). vertical-align:top keeps the line
   boxes identical to the unsplit text; the extra .12em below the mask keeps descenders visible. */
.m-wm{display:inline-block;position:relative;overflow:clip;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.m-w{display:inline-block;position:relative}
/* Count-ups animate an aria-hidden copy; screen readers read the final value */
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Feature diagram trace overlay (≥992 only, where the diagram image shows) */
.lp-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lp-trace path{fill:none;stroke-linecap:round;opacity:0}
.lp-trace .lp-tr-line{stroke:#f6316c;stroke-width:2}
.lp-trace .lp-tr-glow{stroke:rgba(246,49,108,.35);stroke-width:7;filter:blur(3px)}
.lp-trace circle{fill:none;stroke:#f6316c;stroke-width:1.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0}
@media(max-width:991px){.lp-trace{display:none}}

/* Hero ambience: star canvas + breathing top glow + the scene easing in behind the headline */
.lp-twinkle{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  /* Presets */
  html.m-on [data-m]:not(.is-in){opacity:0}
  html.m-on [data-m].is-in{animation:var(--mk,m-up) var(--mdur,.9s) var(--mease,cubic-bezier(.16,1,.3,1)) var(--md,0s) backwards}
  html.m-on [data-m].is-in.m-now{animation:none}
  [data-m="up"]{--mk:m-up}
  [data-m="word"]{--mk:m-rise;--mdur:1.05s}
  [data-m="fade"]{--mk:m-fade;--mdur:.8s}
  [data-m="tile"]{--mk:m-tile;--mdur:.7s}
  [data-m="card"]{--mk:m-card;--mdur:1.1s}
  [data-m="panel"]{--mk:m-panel;--mdur:1.1s}
  [data-m="settle"]{--mk:m-settle;--mdur:1.4s}
  [data-m="pop"]{--mk:m-pop;--mdur:.7s;--mease:cubic-bezier(.34,1.56,.64,1)}
  [data-m="line-x"]{--mk:m-line-x;--mdur:.9s;transform-origin:0 50%}
  [data-m="line-y"]{--mk:m-line-y;--mdur:.9s;transform-origin:50% 0}
  [data-m="slide-l"]{--mk:m-slide-l;--mdur:1.4s}
  [data-m="slide-r"]{--mk:m-slide-r;--mdur:1.4s}
  .m-on .wn_media{overflow:clip}

  /* Hero */
  .section_hero.is-lp:before{content:"";position:absolute;left:50%;top:-10%;width:min(1200px,110%);height:62%;translate:-50% 0;z-index:0;pointer-events:none;
    background:radial-gradient(50% 50% at 50% 30%,rgba(168,196,240,.20),rgba(168,196,240,.07) 55%,rgba(168,196,240,0) 100%);transform-origin:50% 0;
    animation:m-fade 2s cubic-bezier(.4,0,.2,1) .4s backwards,m-breathe 8s cubic-bezier(.65,0,.35,1) 2.4s infinite}
  .section_hero.is-lp:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:#11151c;opacity:0;animation:m-lights 1.8s cubic-bezier(.4,0,.2,1) .25s backwards}
  .lp-twinkle{animation:m-fade 2.4s cubic-bezier(.4,0,.2,1) .9s backwards}

  /* Study mockup avatars float gently (the cursor and caption loop is driven from the JS) */
  .aud_study-av{animation:lp-float 6s ease-in-out infinite}
  .aud_study-av.is-2{animation-duration:7.2s;animation-delay:-2.4s}
  .aud_study-av.is-3{animation-duration:5.6s;animation-delay:-4.2s}

  /* Diagram trace: comets travel from the tools into each card, then from each card into "Synthetic users".
     One 5.2s cycle; every path has the same period, so the per-path delays keep the sequence in step. */
  .lp-trace.is-live path{stroke-dasharray:var(--dash) 200;stroke-dashoffset:var(--dash);animation:var(--tk) 5.2s cubic-bezier(.45,0,.25,1) var(--td) infinite}
  .lp-trace.is-live circle.lp-land{animation:m-land 5.2s cubic-bezier(.45,0,.25,1) var(--td) infinite}
  .lp-trace.is-live circle.lp-dot{animation:m-dot 5.2s cubic-bezier(.45,0,.25,1) var(--td) infinite}
}

@keyframes lp-float{0%,to{translate:0 0}50%{translate:0 calc(-7 * var(--u,1px))}}
@keyframes m-up{from{opacity:0;transform:translateY(var(--my,28px))}}
@keyframes m-rise{from{transform:translateY(118%) rotate(3deg)}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-tile{from{opacity:0;transform:translateY(12px)}}
@keyframes m-card{from{opacity:0;transform:translateY(40px)}}
@keyframes m-panel{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes m-settle{from{opacity:0;transform:scale(1.06)}}
@keyframes m-pop{from{opacity:0;transform:scale(.6)}}
@keyframes m-line-x{from{transform:scaleX(0)}}
@keyframes m-line-y{from{transform:scaleY(0)}}
@keyframes m-slide-l{from{opacity:0;transform:translateX(-40px)}}
@keyframes m-slide-r{from{opacity:0;transform:translateX(40px)}}
@keyframes m-lights{from{opacity:.9}}
@keyframes m-breathe{0%,to{opacity:1;scale:1}50%{opacity:.6;scale:1.06}}
/* Comets: short hops (tool → card) take 16% of the cycle, long runs (card → centre) 28% */
@keyframes lp-tr-s{0%{stroke-dashoffset:var(--dash);opacity:0}2%{opacity:1}16%{stroke-dashoffset:-100;opacity:1}17%,to{stroke-dashoffset:-100;opacity:0}}
@keyframes lp-tr-l{0%{stroke-dashoffset:var(--dash);opacity:0}2%{opacity:1}28%{stroke-dashoffset:-100;opacity:1}29%,to{stroke-dashoffset:-100;opacity:0}}
/* Landing ring where a run reaches "Synthetic users", and the pink dots flashing as a comet passes */
@keyframes m-land{0%,26%{opacity:0;transform:scale(.1)}28%{opacity:.75;transform:scale(.18)}42%,to{opacity:0;transform:scale(1)}}
@keyframes m-dot{0%,17%{opacity:0;transform:scale(.3)}19%{opacity:.7;transform:scale(.36)}33%,to{opacity:0;transform:scale(1)}}

/* ---------- Navbar (Oct 18): the homepage's Navbar V4 (Variant) component ----------
   The shared homepage CSS on this page is pinned at v13. These are the nav rules the homepage gets from v16 (Get Started
   button width) plus its .is-home-v4-scoped nav rules (resting pill tint, CTA border, drop-in), scoped to this page. */
.nav-v4_actions>.button-v4.is-primary{flex:none;width:179px}
@media(min-width:992px) and (max-width:1219px){.nav-v4_actions>.button-v4.is-primary{width:auto;padding:0 18px}}
@media(max-width:991px){.nav-v4_actions>.button-v4.is-primary{order:0;margin-left:0}}
.page-wrapper.is-lp .nav-v4_cta{border-color:#d9aaff}
@media(min-width:480px){.page-wrapper.is-lp .nav-v4_component:not(.is-scrolled) .nav-v4_pill{background-color:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}}
@media (prefers-reduced-motion:no-preference){.page-wrapper.is-lp .nav-v4_component{animation:h40-drop .7s cubic-bezier(.16,1,.3,1) .35s backwards}}