/* Visual and motion refinements based on the current SideShift landing page. */
:root{--ink:#202124;--muted:#74777c;--line:#e9eaec;--soft:#f8f9fb;--blue:#4c91ed}
body{color:var(--ink);letter-spacing:-.027em}
.section-shell{width:min(1180px,calc(100% - 48px))}
.site-header{height:70px}
.nav-wrap{height:70px}
.site-header.scrolled{background:#ffffffeb;box-shadow:0 1px 10px #00000009}
.main-nav>a{color:#33363a}
.main-nav>a:hover{color:#111}
.brand img{width:158px}
.button-dark,.hero-capture button,.final-cta .button{background:#101011;color:#fff;box-shadow:0 3px 7px #00000024}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 18px #0000001b}
.hero{padding:136px 24px 92px;background:radial-gradient(ellipse 55% 59% at 50% 23%,#eaf1fc 0,#f8faff 65%,#fff 100%)}
.hero h1{max-width:950px;color:#202124;font-weight:560;font-size:clamp(50px,5.9vw,76px);line-height:1.04;letter-spacing:-.065em}
.hero .hero-description{max-width:755px;margin:32px auto 30px;color:#65686d;font-size:18px;line-height:1.65;letter-spacing:-.022em}
.hero-capture{border-color:#d9dbdf;box-shadow:0 3px 12px #0000000b}
.hero-capture button{border-color:#fff3}
.hero small{color:#75777b}
.hero .trust-label{color:#77797d;font-size:13px;font-weight:450;margin-top:45px}
.section-intro h2,.stories h2,.goals h2,.faq h2,.final-cta h2{color:#202124;font-weight:560;letter-spacing:-.055em}
.section-intro p,.stories>p,.goals .section-shell>p,.final-cta p{color:#777a7e}
.scale{padding-top:112px;padding-bottom:132px}
.proof-stat{display:flex;align-items:center;justify-content:center;gap:16px;width:max-content;max-width:100%;margin:32px auto 0;padding:13px 22px;border:1px solid #e9eaed;border-radius:18px;background:#fff;box-shadow:0 6px 20px #1e27310a}
.proof-stat strong{color:#202124;font-size:clamp(27px,3vw,38px);font-weight:600;line-height:1;letter-spacing:-.06em;white-space:nowrap}
.proof-stat span{color:#696d73;font-size:14px;line-height:1.3;letter-spacing:-.015em;text-align:left}
.metric-grid{gap:20px;margin-top:34px}
.metric{min-height:365px;padding:26px;border:1px solid #f0f0f0;border-radius:23px;background:#fff;box-shadow:0 12px 34px #1e27310c;transition:transform .3s ease,box-shadow .3s ease}
.metric:hover{transform:translateY(-5px);box-shadow:0 18px 42px #1e273119}
.metric-number{color:#202124;font-size:56px;font-weight:570}
.metric h3{color:#2c2d30;font-size:17px;font-weight:580}
.metric p{color:#72757a}
.metric .bar-art span{background:#6da5f4}
.payment-lines span,.tracked-lines span{border-color:#eff0f1;box-shadow:0 2px 9px #00000005}
.payment-lines em,.tracked-lines em{color:#48b479}
.how{padding-top:117px;padding-bottom:120px;border-color:#f1f2f3}
.eyebrow{color:#85878b}
.eyebrow:before{background:#b9d1f7}
.step-grid{row-gap:80px;margin-top:92px}
.step-kicker{color:#8b8e94;font-size:14px;font-weight:470}
.step-copy h3{color:#202124;font-weight:570}
.step-copy p{color:#777a7f}
.step-visual{height:300px;overflow:visible;border:0;border-radius:0;background:radial-gradient(ellipse 56% 52% at 50% 59%,#eaf3ff9c,transparent 85%);box-shadow:none}
.visual-brief{background-image:linear-gradient(#dce8f647 1px,transparent 1px),linear-gradient(90deg,#dce8f647 1px,transparent 1px),radial-gradient(circle at 50% 65%,#eaf3ffab,transparent 69%);background-size:30px 30px,30px 30px,auto;mask-image:radial-gradient(ellipse,#000 33%,transparent 76%)}
.site-input{border-color:#e5e7ea;box-shadow:0 7px 20px #0000000e}
.visual-casting,.visual-production,.visual-learning{background:radial-gradient(ellipse at center,#edf4fdb3,transparent 69%)}
.visual-tag{color:#8c8f94;font-weight:450}
.casting-card,.workflow-card,.learning-card{border-color:#e9eaed;box-shadow:0 14px 35px #1e273115;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
.step-visual.in-view .casting-card,.step-visual.in-view .workflow-card,.step-visual.in-view .learning-card{animation:visual-settle .7s cubic-bezier(.2,.75,.2,1) both}
.step-visual:hover :is(.casting-card,.workflow-card,.learning-card){transform:translateY(-5px)}
.casting-card>span,.learning-card>span{color:#92969c}
.casting-bars i{background:#e8edf5}
.workflow-card b{color:#9bbce9}
.learning-sparkline i{background:linear-gradient(#74aaf8,#d9e8fc)}
.stories{border-color:#f1f2f3}
.use-case-grid{gap:20px}
.use-case-card{border:1px solid #e8eaed;background:#f0f6fd;box-shadow:none;transition:transform .3s ease,box-shadow .3s ease}
.use-case-card:nth-child(2){background:#f8f9fb}
.use-case-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px #17202b13}
.use-case-card h3{color:#202124}
.use-case-card p,.use-case-card ul{color:#60646b}
.use-case-card li::before{color:#61a0ef}
.use-case-card>a{color:#2d3a51}
.goals{background:#fff}
.goal-tabs{display:flex;justify-content:center;gap:6px;padding:5px;border:1px solid #eceef0;border-radius:16px;background:#fff;box-shadow:0 3px 15px #00000008;width:max-content;max-width:100%;margin:34px auto 27px}
.goal-tabs button{border:0;border-radius:12px;box-shadow:none;background:transparent;color:#777a7e;font-weight:560;transition:background-color .22s ease,color .22s ease,transform .22s ease}
.goal-tabs button.active{background:#101011;color:#fff;box-shadow:0 2px 8px #0003}
.goal-tabs button:not(.active):hover{background:#f2f3f4;color:#252629}
.goal-panel{border-color:#e6e9ed;background:#fff;box-shadow:0 10px 35px #0000000c}
.goal-kicker,.goal-visual-label{color:#898d93}
.goal-left>p,.goal-left ul{color:#6b6e74}
.goal-left li::before{color:#579aef}
.goal-right{background:#f1f6fd;border-color:#e6edf5}
.goal-visual-row{border-color:#e7eaef;box-shadow:0 2px 8px #00000005}
.goal-visual-row>span{color:#a0a4ab}
.goal-panel.goal-change .goal-left>*:not(.goal-kicker){animation:goal-swap .34s ease-out both}
.goal-panel.goal-change .goal-left>*:nth-child(3){animation-delay:.05s}
.goal-panel.goal-change .goal-left>*:nth-child(4){animation-delay:.1s}
.faq{border-top:1px solid #f1f2f3}
.faq-list details{border-color:#e8e9eb}
.faq-list summary{color:#292b2e}
.faq-list p{color:#73767a}
.final-cta{background:radial-gradient(circle at 50% 8%,#e6effc,#f5f8fd 60%,#fff)}
.final-cta form{border-color:#e1e3e6;box-shadow:0 7px 20px #0000000c}
.footer{background:#f8f9fb}
.footer h3{color:#34363a}
.footer-top a:not(.button){color:#707277}
.footer-bottom{border-color:#e5e7ea}
@keyframes visual-settle{from{opacity:.6;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes goal-swap{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.hero h1{animation:hero-enter .7s ease-out both}
.hero .hero-description{animation:hero-enter .7s ease-out .1s both}
.hero-capture{animation:hero-enter .7s ease-out .18s both}
.hero .trust-label{animation:hero-enter .7s ease-out .26s both}
@media(max-width:800px){
  .section-shell{width:calc(100% - 44px)}
  .site-header,.nav-wrap{height:64px}
  .main-nav{top:64px}
  .brand img{width:110px}
  .hero{padding:102px 22px 90px}
  .hero h1{font-size:clamp(39px,8.9vw,58px);line-height:1.07;letter-spacing:-.059em}
  .hero .hero-description{font-size:16px;line-height:1.67;margin:28px auto 32px}
  .hero .trust-label{margin-top:40px}
  .scale{padding-top:95px;padding-bottom:105px}
  .metric-grid{max-width:440px;margin-top:34px}
  .metric{min-height:325px}
  .how{padding-top:95px;padding-bottom:105px}
  .step-grid{margin-top:64px;row-gap:28px}
  .step-copy h3{margin-top:19px}
  .step-visual{height:265px;margin-bottom:38px}
  .stories{padding-top:100px;padding-bottom:110px}
  .goals{padding:100px 0 110px}
  .goal-tabs{width:100%;justify-content:space-between}
  .goal-tabs button{flex:1;padding:12px 7px;font-size:13px}
  .goal-panel{background:transparent;border:0;box-shadow:none;display:grid;gap:16px}
  .goal-left,.goal-right{border:1px solid #e6e8ec;border-radius:22px;background:#fff;box-shadow:0 4px 17px #00000007}
  .goal-right{background:#f4f8fe}
  .faq{padding-top:100px}
}
@media(max-width:520px){
  .section-shell{width:calc(100% - 44px)}
  .hero{padding-inline:22px;padding-bottom:80px}
  .hero h1{font-size:clamp(38px,9vw,46px)}
  .hero .hero-description{font-size:16px}
  .proof-stat{gap:12px;padding:12px 16px}
  .proof-stat span{font-size:13px}
  .hero-capture{display:flex;flex-wrap:nowrap;align-items:center;height:52px;min-height:52px;padding:3px 4px 3px 12px;border-radius:999px;gap:6px}
  .hero-capture>span{display:block;font-size:15px}
  .hero-capture input{flex:1 1 auto;min-width:0;max-width:none;height:auto;padding:0;font-size:13px}
  .hero-capture button{flex:none;width:auto;height:44px;min-height:44px;padding:0 11px;border-radius:999px;white-space:nowrap;font-size:11px}
  .section-intro h2,.stories h2,.goals h2,.faq h2{font-size:clamp(34px,9vw,43px)}
  .step-visual{height:245px}
  .goal-tabs{gap:2px}
  .goal-tabs button{font-size:12px;padding:11px 5px;white-space:normal}
}
@media(max-width:370px){
  .hero-capture{height:auto;flex-wrap:wrap;border-radius:17px;padding:9px}
  .hero-capture input{flex-basis:calc(100% - 22px);height:30px}
  .hero-capture button{width:100%;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero .hero-description,.hero-capture,.hero .trust-label,.step-visual.in-view :is(.casting-card,.workflow-card,.learning-card),.goal-panel.goal-change .goal-left>*{animation:none!important}
}

/* CreatorsFirst-style logo dock: stationary icons with a springy hover focus. */
.hero .trust-label{margin-top:48px}
.trust-dock{display:flex;align-items:flex-end;justify-content:center;gap:15px;width:max-content;max-width:calc(100vw - 36px);height:106px;margin:39px auto 0;padding:18px 23px 19px;border:1px solid #414148;border-radius:40px;background:linear-gradient(165deg,#19191f,#101014);box-shadow:inset 0 1px #ffffff16,0 10px 28px #11111626;position:relative;isolation:isolate;animation:dock-enter .7s cubic-bezier(.2,.8,.2,1) .35s both}
.dock-item{position:relative;display:block;flex:none;width:64px;height:64px;cursor:default;z-index:1;transition:width .34s cubic-bezier(.2,1.35,.35,1),height .34s cubic-bezier(.2,1.35,.35,1);outline:none;-webkit-tap-highlight-color:transparent}
.dock-art{position:relative;display:block;width:100%;height:100%;overflow:hidden;border:1px solid #2d2d34;border-radius:17px;background:#0b0b0e;box-shadow:0 2px 8px #0005;transition:border-radius .34s cubic-bezier(.2,1.35,.35,1),border-color .25s ease,box-shadow .25s ease}
.dock-art img{display:block;position:absolute;max-width:none;max-height:none;user-select:none;pointer-events:none}
.dock-solial .dock-art{background:#000}
.dock-solial img{left:0;top:0;width:auto;height:100%}
.dock-eye .dock-art,.dock-tablo .dock-art{background:#fff}
.dock-eye img{inset:0;width:100%;height:100%;object-fit:contain}
.dock-tablo img{left:-360%;top:-205%;width:1125%;height:auto}
.dock-dot{position:absolute;left:50%;bottom:-12px;width:4px;height:4px;border-radius:50%;background:#777780;transform:translateX(-50%);transition:background-color .2s ease,transform .2s ease}
.dock-tooltip{position:absolute;left:50%;bottom:calc(100% + 13px);padding:8px 13px;border:1px solid #303036;border-radius:999px;background:#151519;color:#fff;font-size:12px;font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap;box-shadow:0 5px 12px #0003;opacity:0;visibility:hidden;transform:translate(-50%,7px) scale(.94);transition:opacity .18s ease,transform .25s cubic-bezier(.2,1.2,.3,1),visibility .18s}
.dock-item:is(:hover,:focus-visible){width:116px;height:116px;z-index:3}
.dock-item:is(:hover,:focus-visible) .dock-art{border-radius:24px;border-color:#8b83bb;box-shadow:0 0 0 1px #9587d0,0 9px 19px #0005}
.dock-item:is(:hover,:focus-visible) .dock-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.dock-item:is(:hover,:focus-visible) .dock-dot{background:#aaa1d7;transform:translateX(-50%) scale(1.2)}
.dock-item:has(+ .dock-item:is(:hover,:focus-visible)),.dock-item:is(:hover,:focus-visible) + .dock-item{width:86px;height:86px;z-index:2}
.dock-item:has(+ .dock-item:is(:hover,:focus-visible)) .dock-art,.dock-item:is(:hover,:focus-visible) + .dock-item .dock-art{border-radius:20px}
@keyframes dock-enter{from{opacity:0;filter:blur(8px);transform:translateY(18px) scale(.96)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@media(max-width:520px){
  .hero .trust-label{margin-top:42px}
  .trust-dock{gap:10px;height:91px;margin-top:34px;padding:15px 15px 16px;border-radius:34px}
  .dock-item{width:58px;height:58px}
  .dock-item:is(:hover,:focus-visible){width:96px;height:96px}
  .dock-item:has(+ .dock-item:is(:hover,:focus-visible)),.dock-item:is(:hover,:focus-visible) + .dock-item{width:73px;height:73px}
  .dock-art{border-radius:15px}
  .dock-item:is(:hover,:focus-visible) .dock-art{border-radius:21px}
}
@media(prefers-reduced-motion:reduce){
  .trust-dock{animation:none}
  .dock-item,.dock-art,.dock-dot,.dock-tooltip{transition:none}
}

/* Pearl Button by marcelodolza (Uiverse.io), MIT License. Adapted for UGC Grow's CTAs. */
.pearl-cta,.hero-capture button.pearl-cta,.main-nav .mobile-nav-cta.pearl-cta{
  --pearl-bg:#080808;
  display:inline-flex;
  align-items:stretch;
  justify-content:center;
  min-height:0;
  padding:0;
  position:relative;
  overflow:visible;
  outline:none;
  border:0;
  border-radius:100px;
  background:var(--pearl-bg);
  color:#fff;
  cursor:pointer;
  text-align:center;
  text-decoration:none;
  box-shadow:inset 0 .3rem .9rem #ffffff4d,inset 0 -.1rem .3rem #000b,inset 0 -.4rem .9rem #ffffff80,0 1.1rem 1.5rem -.7rem #0006,0 .55rem .75rem -.45rem #000b;
  transition:transform .2s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.pearl-cta .pearl-wrap{
  display:block;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:inherit;
  padding:14px 22px;
  width:100%;
}
.pearl-cta .pearl-wrap::before,.pearl-cta .pearl-wrap::after{
  content:"";
  position:absolute;
  pointer-events:none;
  transition:transform .3s ease,opacity .3s ease;
}
.pearl-cta .pearl-wrap::before{
  left:-15%;right:-15%;bottom:25%;top:-100%;
  border-radius:50%;
  background:#ffffff1f;
}
.pearl-cta .pearl-wrap::after{
  left:6%;right:6%;top:12%;bottom:40%;
  border-radius:22px 22px 0 0;
  box-shadow:inset 0 10px 8px -10px #fffc;
  background:linear-gradient(180deg,#ffffff4d,transparent 50%);
}
.pearl-cta .pearl-content{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  color:#ffffffd9;
  font:600 14px Geist,Arial,sans-serif;
  letter-spacing:-.02em;
  line-height:1.15;
  white-space:normal;
  transform:translateY(2%);
  transition:transform .2s ease;
  -webkit-mask-image:linear-gradient(to bottom,#fff 45%,#ffffff9c);
  mask-image:linear-gradient(to bottom,#fff 45%,#ffffff9c);
}
.pearl-cta:is(:hover,:focus-visible){
  transform:none;
  box-shadow:inset 0 .3rem .5rem #ffffff66,inset 0 -.1rem .3rem #000b,inset 0 -.4rem .9rem #ffffffb3,0 1.1rem 1.5rem -.7rem #0006,0 .55rem .75rem -.45rem #000b;
}
.pearl-cta:is(:hover,:focus-visible) .pearl-wrap::before{transform:translateY(-5%)}
.pearl-cta:is(:hover,:focus-visible) .pearl-wrap::after{opacity:.4;transform:translateY(5%)}
.pearl-cta:is(:hover,:focus-visible) .pearl-content{transform:translateY(-4%)}
.pearl-cta:focus-visible{outline:2px solid #607fc2;outline-offset:3px}
.pearl-cta:active{
  transform:translateY(4px);
  box-shadow:inset 0 .3rem .5rem #ffffff80,inset 0 -.1rem .3rem #000c,inset 0 -.4rem .9rem #ffffff66,0 1rem 1rem -.6rem #0008;
}
.nav-actions .pearl-cta .pearl-wrap{padding:13px 18px}
.nav-actions .pearl-cta .pearl-content{font-size:13px}
.hero-capture button.pearl-cta{height:auto;min-height:44px;flex:none}
.hero-capture .pearl-cta .pearl-wrap{padding:13px 19px}
.hero-capture .pearl-cta .pearl-content{font-size:13px}
.main-nav .mobile-nav-cta.pearl-cta{display:none}
.final-cta .pearl-cta{white-space:normal}
@media(max-width:800px){
  .main-nav .mobile-nav-cta.pearl-cta{display:flex;margin-top:7px}
  .nav-actions .button-dark.pearl-cta .pearl-wrap{display:block}
  .nav-actions .button-dark.pearl-cta .pearl-content{display:flex}
  .nav-actions .button-dark.pearl-cta .pearl-text{display:inline}
}
@media(max-width:520px){
  .nav-actions .pearl-cta .pearl-wrap{padding:12px}
  .nav-actions .pearl-cta .pearl-content{font-size:11px}
  .hero-capture button.pearl-cta{height:44px;min-height:44px;width:auto;padding:0}
  .hero-capture .pearl-cta .pearl-wrap{padding:0 11px;display:grid;place-items:center}
  .hero-capture .pearl-cta .pearl-content{font-size:11px}
}
@media(max-width:370px){
  .hero-capture button.pearl-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .pearl-cta,.pearl-cta .pearl-wrap::before,.pearl-cta .pearl-wrap::after,.pearl-cta .pearl-content{transition:none}
}