/* ---------- home page: hero clips, counter, before/after, audiences, creators, comparison, sticky CTA ---------- */
.hero{position:relative}
.h-clips{display:flex;justify-content:center;gap:6px;margin:22px auto 0;max-width:560px;padding:0 14px}
.h-clip{position:relative;flex:1 1 0;max-width:84px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--card2);border:1px solid var(--line);box-shadow:var(--sh)}
.h-clip:nth-child(odd){transform:translateY(6px) rotate(-2deg)}
.h-clip:nth-child(even){transform:translateY(-2px) rotate(2deg)}
.h-clip img,.h-clip video,.sc-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-clip video,.sc-item video{opacity:0;transition:opacity .25s}
.h-clip.playing video,.sc-item.playing video{opacity:1}
.sc-item .sc-label{z-index:1}
@media (min-width:1200px){
  .hero.has-clips h1,.hero.has-clips p.lead{max-width:600px}
  .h-clips{position:absolute;inset:56px 20px auto;height:0;margin:0;padding:0;max-width:none;display:block}
  .h-clip{position:absolute;width:100px;max-width:none;border-radius:14px;animation:hbob 7s ease-in-out infinite}
  .h-clip:nth-child(1){left:0;top:44px;--r:-8deg}
  .h-clip:nth-child(2){left:82px;top:0;--r:-2deg;z-index:1;animation-delay:-2.3s}
  .h-clip:nth-child(3){left:168px;top:50px;--r:6deg;animation-delay:-4.6s}
  .h-clip:nth-child(4){right:168px;top:50px;--r:-6deg;animation-delay:-1.2s}
  .h-clip:nth-child(5){right:82px;top:0;--r:2deg;z-index:1;animation-delay:-3.5s}
  .h-clip:nth-child(6){right:0;top:44px;--r:8deg;animation-delay:-5.8s}
  .h-clip:nth-child(n){transform:rotate(var(--r))}
  .h-clip:hover{z-index:2}
}
@keyframes hbob{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-8px) rotate(var(--r))}}

.h-made{margin-top:20px;color:var(--tx2);font-size:15px}
.h-made b{font:700 26px var(--fh);letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;margin-inline-end:4px;vertical-align:-2px}

/* "Try this prompt" under example clips */
.h-try{justify-content:center;min-height:40px;text-align:center}
.h-try span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-col .h-try{padding:6px 8px;font-size:12.5px;line-height:1.25}
.sc-col .h-try span{white-space:normal}
@media (min-width:1101px){.sc-col .h-try svg{display:none}}
.h-tc,.sc-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.h-trend{grid-auto-flow:dense}
.h-tc.w2{grid-column:span 2}
.h-tc .card.a169{grid-column:auto}
@media (max-width:760px){.showcase .sc-col{flex:0 0 42%;scroll-snap-align:start}.sc-col .sc-item{flex:none}}

/* photo -> video */
.h-ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:36px;align-items:center}
.h-ba-t h2{font-size:clamp(26px,3.6vw,40px)}
.h-ba-t p{color:var(--tx2);margin:12px 0 20px;max-width:460px}
.h-ba-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.h-ba-i{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--card2);border:1px solid var(--line);--p:50%;touch-action:pan-y}
.h-ba-i>img,.h-ba-v img,.h-ba-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h-ba-i>img{filter:saturate(.85)}
.h-ba-v{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.h-ba-h{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.h-ba-h:after{content:"‹ ›";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font:700 14px var(--f);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.h-ba-l{position:absolute;top:8px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px);pointer-events:none}
.h-ba-l.a{left:8px}.h-ba-l.b{right:8px}
.h-ba-i input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.h-ba-i:focus-within{outline:2px solid var(--a1);outline-offset:2px}
@media (max-width:980px){.h-ba{grid-template-columns:1fr;gap:22px}}
@media (max-width:560px){.h-ba-g{grid-template-columns:repeat(2,1fr)}.h-ba-i:nth-child(n+3){display:none}}

/* who is it for */
.h-who{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.h-who-c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;transition:.15s;text-align:start}
.h-who-c:hover{border-color:var(--line2);transform:translateY(-2px)}
.h-who-c i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 12%,transparent);color:var(--link);margin-bottom:6px}
.h-who-c i svg{width:21px;height:21px}
.h-who-c b{font:700 17px var(--fh)}
.h-who-c p{color:var(--tx2);font-size:14px;flex:1}
.h-who-c .grad{font-weight:700;font-size:14px;margin-top:4px}
@media (max-width:980px){.h-who{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.h-who{gap:8px}.h-who-c{padding:14px}.h-who-c b{font-size:15px}.h-who-c p{font-size:13px}}

/* how it works: tiny css illustrations */
.h-ill{height:92px;border-radius:12px;background:var(--soft);border:1px solid var(--line);margin-bottom:16px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px}
.h-ill1{flex-direction:column;align-items:flex-start;padding:0 22px;gap:9px}
.h-ill1 span{height:9px;border-radius:9px;background:var(--line2);animation:htype 5s steps(14) infinite}
.h-ill1 .l1{--w:72%}.h-ill1 .l2{--w:46%;animation-delay:.9s;position:relative}
.h-ill1 .l2:after{content:"";position:absolute;inset-inline-end:-7px;top:-4px;width:2px;height:17px;background:var(--a1);animation:hblink 1s steps(2) infinite}
.h-ill1 svg{position:absolute;inset-inline-end:16px;top:14px;width:22px;height:22px;color:var(--a2);animation:hspark 5s ease-in-out infinite}
.h-ill2 span{border:2px solid var(--line2);border-radius:6px;animation:hpick 4.5s ease-in-out infinite}
.h-ill2 .s1{width:27px;height:48px}.h-ill2 .s2{width:42px;height:42px;animation-delay:1.5s}.h-ill2 .s3{width:62px;height:35px;animation-delay:3s}
.h-ill3{flex-direction:column;gap:10px}
.h-ill3 .pl{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;animation:hpulse 2.4s ease-in-out infinite}
.h-ill3 .pl svg{width:16px;height:16px}
.h-ill3 .bar{width:62%;height:5px;border-radius:5px;background:var(--line2);overflow:hidden}
.h-ill3 .bar b{display:block;height:100%;width:100%;background:var(--grad);transform-origin:0 50%;animation:hbar 4s linear infinite}
[dir=rtl] .h-ill3 .bar b{transform-origin:100% 50%}
.h-ill3 .ht{position:absolute;inset-inline-end:18px;top:16px;width:18px;height:18px;color:var(--a2);animation:hheart 4s ease-in-out infinite}
@keyframes htype{0%{width:0}35%,100%{width:var(--w)}}
@keyframes hblink{50%{opacity:0}}
@keyframes hspark{0%,40%{transform:scale(.6) rotate(0);opacity:.35}55%{transform:scale(1.25) rotate(20deg);opacity:1}70%,100%{transform:scale(1) rotate(0);opacity:.9}}
@keyframes hpick{0%,30%{border-color:var(--a1);background:color-mix(in srgb,var(--a1) 18%,transparent);transform:scale(1.08)}40%,100%{border-color:var(--line2);background:transparent;transform:none}}
@keyframes hpulse{50%{transform:scale(1.1);box-shadow:0 0 0 8px color-mix(in srgb,var(--a2) 14%,transparent)}}
@keyframes hbar{0%{transform:scaleX(0)}90%,100%{transform:scaleX(1)}}
@keyframes hheart{0%,80%{transform:scale(1)}88%{transform:scale(1.5)}100%{transform:scale(1)}}
@media (max-width:980px){.h-ill{height:76px}}

/* made by creators */
.h-cr{grid-template-columns:repeat(6,1fr)}
.h-cr-m{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx2);min-height:28px;padding:0 2px}
.h-cr-m a{font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin-inline-end:auto}
.h-cr-m span{display:inline-flex;align-items:center;gap:4px;flex:none}
.h-cr-m svg{width:13px;height:13px;color:var(--mut)}
@media (max-width:1100px){.h-cr{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.h-cr{grid-template-columns:repeat(2,1fr)}}

/* us vs typical subscription tools */
.h-cmp-w{max-width:900px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.h-cmp{width:100%;border-collapse:collapse;font-size:14.5px;table-layout:fixed}
.h-cmp th,.h-cmp td{padding:13px 16px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.h-cmp tr:last-child>*{border-bottom:0}
.h-cmp thead th{font:700 15px var(--fh);background:var(--soft)}
.h-cmp tbody th{font-weight:600;color:var(--tx2);width:24%}
.h-cmp th:first-child{width:24%}
.h-cmp td:nth-child(2),.h-cmp thead th:nth-child(2){background:color-mix(in srgb,var(--a1) 7%,transparent);font-weight:600}
.h-cmp td:nth-child(3){color:var(--tx2)}
.h-cmp td svg{width:15px;height:15px;color:var(--ok);margin-inline-end:6px;vertical-align:-2px}
.h-cmp-n{text-align:center;margin-top:14px}
@media (max-width:760px){.h-cmp{font-size:13px}.h-cmp th,.h-cmp td{padding:10px 8px;overflow-wrap:break-word;hyphens:auto}.h-cmp tbody th,.h-cmp th:first-child{width:28%}.h-cmp thead th{font-size:13px}.h-cmp td svg{display:none}}

/* faq search */
.h-faqq{max-width:820px;margin:0 auto 12px}
.h-faqq .field{min-height:44px}
.h-faq0{text-align:center;padding:14px 0}

/* sticky "Create video" on phones */
.h-sticky{display:none}
@media (max-width:760px){
  .h-sticky:not([hidden]){display:flex;position:fixed;z-index:80;left:16px;right:16px;bottom:calc(68px + env(safe-area-inset-bottom));min-height:48px;box-shadow:0 10px 30px -8px color-mix(in srgb,var(--a2) 70%,transparent);animation:pop .2s ease}
  body.h-sticky-on .toasts{bottom:calc(132px + env(safe-area-inset-bottom))}
  body.h-has-sticky{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .h-clip,.h-ill *,.h-ill *:after,.h-sticky{animation:none!important}
  .h-ill1 span{width:var(--w)}
}