/* Home page. Flat colours only; the giraffe canvas fades itself at its edges. */
body.home-page{background:#fff}body.home-page::before{display:none}
.hp{overflow-x:clip}
.hp section{contain:layout paint}
.hp .muted{color:var(--muted);font-size:15px}
.hp .hp-section{margin-top:128px}
.hp .inline-link{font-weight:650;text-decoration:underline;text-underline-offset:4px}
.hp .acid{background:var(--acid)}
.giraffe-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

/* motion primitives */
.hp .w{display:inline-block;margin-right:.24em;animation:wordIn .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes wordIn{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hp .in1{animation:rise .8s .75s both}.hp .in2{animation:rise .8s .9s both}
.hp .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hp .enter{animation:rise .5s both}
@keyframes rvIn{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes tilt{from{transform:rotateX(16deg) scale(.93)}to{transform:none}}
@keyframes flyIn{from{transform:translate(-90px,40px) scale(.9) rotate(-3deg)}to{transform:none}}
@supports (animation-timeline:view()){
.hp .rv{animation:rvIn linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.hp .tilt{transform-origin:50% 0;animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
.hp .fly{animation:flyIn linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
}
.marquee{display:flex;gap:12px;width:max-content;will-change:transform;animation:slide 60s linear infinite}
.marquee.rev{animation-direction:reverse;animation-duration:70s}.marquee.slow{animation-duration:40s}
.marquee-wrap:hover .marquee{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bar-run{display:block;height:100%;background:var(--ink);border-radius:2px;animation:fill linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
.pulse-dot{width:10px;height:10px;border-radius:99px;background:#626b22;flex:none;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(98,107,34,.35)}50%{box-shadow:0 0 0 6px rgba(98,107,34,0)}}

/* tiles */
.hp .tile{position:relative;display:block;flex:none;border-radius:14px;overflow:hidden;background:var(--canvas)}
.hp .tile img,.hp .tile video{transition:transform .7s ease}.hp .tile:hover img,.hp .tile:hover video{transform:scale(1.05)}
.hp .tile .use{z-index:3}
.hp .use{position:absolute;left:10px;bottom:10px;background:var(--acid);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:650;opacity:0;transform:translateY(6px);transition:all .3s ease}
.hp .tile:hover .use,.hp .use.show{opacity:1;transform:none}
.hp .tile.small .ai-badge{transform:scale(.85);transform-origin:0 0}
.hp .tile.tall{width:240px;height:320px}.hp .tile.wide{width:320px;height:240px}.hp .tile.small{width:160px;height:200px}

/* hero */
.hp-hero{position:relative;isolation:isolate;padding:56px 56px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
/* Same slowly drifting giraffe spots as the dashboard background, faded out at the top and bottom. */
.hero-spots{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas);-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 72%,transparent)}
/* The spots drift with transform (not background-position) so phones move them on the GPU instead of repainting every frame. */
.hero-spots .spots-art{position:absolute;top:-100px;left:-160px;width:calc(100% + 160px);height:calc(100% + 100px);stroke:none;will-change:transform;animation:heroSpots 32s ease-in-out -12s infinite alternate}
@keyframes heroSpots{to{transform:translate3d(160px,100px,0)}}
@media (prefers-reduced-motion:reduce){.hero-spots .spots-art{animation:none}}
.hp-hero h1{font-size:clamp(44px,5.3vw,76px);line-height:1.04;max-width:1200px}
.hp-hero h1 .line{display:block}
.hero-copy-c{display:flex;flex-direction:column;align-items:center}
.hero-copy-c>p{margin-top:24px;font-size:19px;color:#45484f;max-width:40ch}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:32px}
.hero-note{display:flex;gap:18px;font-size:13px;font-weight:600;color:#45484f}.hero-note>span{display:inline-flex;align-items:center;gap:6px}
.hero-note .tick-svg{width:13px;height:13px;stroke:#5b6420;stroke-width:2.4}
.carousel{position:relative;width:100%;height:470px;margin-top:56px;perspective:1400px}
.carousel .card{position:absolute;left:50%;top:0;width:250px;height:400px;margin-left:-125px;border-radius:22px;overflow:hidden;background:var(--canvas);transition:transform .9s cubic-bezier(.65,0,.35,1),opacity .9s ease;transform-origin:50% 100%;will-change:transform,opacity;backface-visibility:hidden}

/* demo window */
.story-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
.story-tabs button{position:relative;overflow:hidden;font-size:14px;font-weight:650;padding:11px 18px;border-radius:99px;background:var(--canvas)}
.story-tabs button[aria-selected=true]{background:var(--acid)}
.tab-bar{position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:rgba(23,25,22,.12);border-radius:2px;overflow:hidden;display:none}
.story-tabs button[aria-selected=true] .tab-bar{display:block}
.stage3d{perspective:1600px}
.win{max-width:1080px;margin:0 auto;background:#fff;border-radius:22px;outline:1px solid #ececf1;overflow:hidden;text-align:left}
.win-bar{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:#fafafb;border-bottom:1px solid #ececf1}
.win-bar>span{width:10px;height:10px;border-radius:99px;background:#e0e1e8}
.win-bar em{margin:0 auto;font-style:normal;background:#fff;border-radius:99px;padding:4px 16px;font-size:12px;color:var(--muted);outline:1px solid #ececf1}
.win-stage{position:relative;min-height:580px}
.win-body{display:grid;grid-template-columns:360px minmax(0,1fr);min-height:580px}
.xp{position:relative;padding:22px 24px 0;height:580px;overflow:hidden;animation:rise .4s both}
.xp-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.xp-chips{display:flex;gap:6px}.xp-chips span{background:var(--canvas);border-radius:99px;padding:6px 12px;font-size:12px;font-weight:650}.xp-chips .on{background:var(--ink);color:#fff}
.xp-view{position:relative;height:500px;overflow:hidden;border-radius:12px}
.xp-grid{columns:4;column-gap:10px;will-change:transform}
.xp-tile{position:relative;break-inside:avoid;margin-bottom:10px;border-radius:10px;overflow:hidden;background:var(--canvas);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,outline-color .3s;outline:3px solid transparent;outline-offset:2px}
.xp.focus .xp-tile:not(.pick){opacity:.35}.xp.out{animation:xp-out .35s ease forwards}@keyframes xp-out{to{opacity:0;transform:scale(.985)}}
.xp-tile img{height:100%}
.xp-tile .use{left:8px;bottom:8px;padding:6px 10px;font-size:12px}
.xp-tile.pick{outline-color:var(--ink);transform:scale(1.02)}.xp-tile.pick .use{opacity:1;transform:none}
.xp-tile.press .use{background:var(--ink);color:var(--acid);transform:scale(.94)}
.xp-play{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:99px;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center}.xp-play svg{width:11px;height:11px;fill:var(--ink);stroke:none}
.mk.glow{animation:glow 1.2s .5s ease-in-out 2}@keyframes glow{50%{box-shadow:0 0 0 4px rgba(244,252,133,.9)}}
.win-left{display:flex;flex-direction:column;gap:14px;padding:24px;border-right:1px solid #ececf1}
.win-title{font-size:22px;font-weight:650;letter-spacing:-.03em}
.tpl-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--canvas)}
.tpl-row>img{width:44px!important;height:54px!important;border-radius:8px;flex:none}
.tpl-text{display:flex;flex-direction:column;min-width:0;flex:1}.tpl-row small{font-size:11px;font-weight:650;color:var(--muted)}
.tpl-row strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.use-btn{flex:none;background:var(--acid);border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700}
.press{animation:press2 .5s 1.3s both}
@keyframes press2{0%{transform:none}50%{transform:scale(.9)}100%{transform:none;background:var(--ink);color:var(--acid)}}
.ok-dot{flex:none;width:24px;height:24px;border-radius:99px;background:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.ok-dot svg{width:12px;height:12px;stroke:var(--acid);stroke-width:2.4}
.lbl{font-size:13px;font-weight:650}
.prompt{min-height:112px;padding:14px;border-radius:10px;background:var(--canvas);font-size:14px;line-height:24px}
.mk{background:var(--acid);color:var(--ink);border-radius:4px;padding:0 3px}
.swapout{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;max-width:280px;animation:swapout .5s .9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes swapout{to{opacity:0;max-width:0;padding:0}}
.chip{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin:0 2px;background:#fff;outline:1px solid #dcdde4;border-radius:99px;padding:2px 9px 2px 2px;font-size:12px;font-weight:700;line-height:18px}
.chip img{width:18px!important;height:18px!important;border-radius:99px}
.chip.swap{animation:chipIn .45s .5s cubic-bezier(.2,.8,.2,1.2) both}
@keyframes chipIn{from{opacity:0;transform:scale(.6)}}
.refs{display:flex;align-items:center;gap:10px;min-height:56px}
.ref{width:56px;height:56px;border-radius:10px;overflow:hidden;outline:2px solid var(--ink);flex:none}
.ref.empty{outline:0;border:1px dashed #c9cad3;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:22px}
.ref-label{font-size:12px;font-weight:650}.ref-label small{font-weight:500;color:var(--muted);font-size:12px}
.ref-ask{font-size:12px;color:var(--muted)}
.drop{animation:drop .6s cubic-bezier(.2,.8,.2,1.1) both}
@keyframes drop{from{opacity:0;transform:translateY(-28px) scale(.7)}}
.opts{display:grid;grid-template-columns:minmax(0,1.9fr) repeat(3,minmax(0,1fr));gap:6px;font-size:12px;font-weight:650}
.opts span{height:36px;border-radius:8px;background:var(--canvas);display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden}
.gen{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:10px;background:var(--acid);font-size:14px;font-weight:700}
.gen.arm{animation:pressGen .4s 2.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pressGen{50%{transform:scale(.95);box-shadow:0 0 0 8px rgba(244,252,133,.6)}}
.gen.busy{background:var(--ink);color:var(--acid)}
.gen.ok{background:#fff;outline:1px solid #e1ea4f}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(244,252,133,.3);border-top-color:var(--acid);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.win-right{display:flex;flex-direction:column;gap:14px;padding:24px;min-width:0}
.win-head{display:flex;justify-content:space-between;align-items:center;min-height:26px;font-size:13px;font-weight:650}
.send{font-size:12px;font-weight:650;background:var(--acid);border-radius:99px;padding:5px 12px;animation:rise .5s .9s both}
.stage-wrap{flex:1;display:flex;align-items:center;justify-content:center}
.stage{position:relative;width:400px;max-width:100%;aspect-ratio:1/1}.stage[data-shape=tall]{width:270px}
.res{position:absolute;inset:0;border-radius:10px;overflow:hidden;animation:develop 1s cubic-bezier(.2,.7,.2,1) both}
.res>img,.res>video{display:block;width:100%;height:100%;object-fit:cover}
.res.preview>img,.res.preview>video{filter:blur(10px) saturate(.8);transform:scale(1.08)}
.res .ai-badge{top:auto;bottom:12px}
@keyframes develop{0%{opacity:0;transform:scale(1.07);filter:blur(16px) saturate(0)}55%{opacity:1}100%{opacity:1;transform:none;filter:none}}
.scanl{position:absolute;left:0;right:0;top:0;height:4px;background:var(--acid);animation:scan 1s cubic-bezier(.4,0,.2,1) both;pointer-events:none}
@keyframes scan{0%{top:0;opacity:1}100%{top:100%;opacity:0}}
.tag{position:absolute;left:12px;top:12px;background:#fff;border-radius:99px;padding:5px 11px;font-size:12px;font-weight:700}
.tag.acid{background:var(--acid);animation:rise .5s .7s both}
.flyin{position:absolute;right:-22px;bottom:26px;width:118px;padding:6px;border-radius:14px;background:#fff;box-shadow:0 10px 30px -12px rgba(23,25,22,.35);outline:1px solid #ececf1;animation:flyin .7s .25s cubic-bezier(.2,.8,.2,1.1) both}
.flyin>span{display:block;aspect-ratio:1/1;border-radius:9px;overflow:hidden}.flyin>b{display:block;padding:6px 2px 1px;font-size:11px}
@keyframes flyin{from{opacity:0;transform:translate(70px,40px) scale(.6) rotate(8deg)}}
.recipe{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:6px;background:#fff;border-radius:12px;padding:5px 9px 5px 5px;font-size:11px;font-weight:700;animation:rise .5s 1.1s both}
.recipe img{width:30px!important;height:30px!important;border-radius:7px}
.gcard{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#f7f2ea;outline:1px solid rgba(20,20,20,.07)}
.gcard canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gcard-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 22px;border-radius:18px;background:rgba(250,247,241,.88);backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(20,20,20,.06)}
.gcard-pct{display:flex;align-items:flex-start;color:#141414;font-size:40px;line-height:1;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.gcard-pct small{font-size:18px;font-weight:600;margin:5px 0 0 3px;color:#6b655c;letter-spacing:0}
.gcard-track{position:relative;width:112px;height:4px;border-radius:99px;overflow:hidden;background:rgba(20,20,20,.1)}
.gcard-track i{position:absolute;inset:0;background:#141414;transform:scaleX(0);transform-origin:left center}
.gcard-label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6b655c}

/* models */
.hp-models{padding:8px 0 72px;margin-top:24px}
.hp-models>p{text-align:center;margin:0 0 18px;font-size:13px;font-weight:650;color:var(--muted)}
.marquee-clip{overflow:hidden}
.model-chip{flex:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:var(--canvas);border-radius:99px;padding:10px 18px;font-size:14px;font-weight:650}
.model-chip img{width:14px!important;height:14px!important;flex:none;display:block;filter:grayscale(1) brightness(.35);opacity:.75}
.model-chip .dot{width:8px;height:8px;border-radius:99px;background:#e1ea4f}

/* templates wall */
.hp-templates{padding:40px 0 128px}
.hp-templates .section-heading{margin-bottom:40px;flex-wrap:wrap}
.cats{display:flex;gap:8px;flex-wrap:wrap}.cats span{background:var(--canvas);border-radius:99px;padding:8px 14px;font-size:14px;font-weight:600}
.marquee-wrap{display:flex;flex-direction:column;gap:12px;overflow:hidden}

/* how it works */
.hp-how{background:var(--canvas);padding:128px 0}
.hp-how h2{margin-bottom:56px}
.how-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:24px}
.how-steps{display:flex;flex-direction:column;gap:8px}
.how-steps button{text-align:left;border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;gap:8px;background:transparent;transition:background .2s}
.how-steps button:hover{background:#ececf1}.how-steps button[aria-selected=true]{background:#fff}
.how-title{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:620;letter-spacing:-.03em}
.num{width:30px;height:30px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:#e6e7ee;letter-spacing:0}
.how-steps button[aria-selected=true] .num{background:var(--acid)}
.how-text{font-size:15px;color:var(--muted);padding-left:42px}
.how-bar{height:3px;margin-left:42px;background:#e6e7ee;border-radius:2px;overflow:hidden}
.how-stage{background:#fff;border-radius:20px;padding:32px;min-height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.scene{width:100%;animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
.discover{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.discover>div{position:relative;border-radius:14px;overflow:hidden;height:230px;animation:rise .5s both}
.discover>.picked{outline:3px solid var(--ink);outline-offset:3px}
.create{display:grid;grid-template-columns:minmax(0,.7fr) auto minmax(0,1.3fr);gap:20px;align-items:center}
.create>div{display:flex;flex-direction:column;gap:10px}
.prompt-box{border-radius:14px;background:var(--canvas);min-height:220px;padding:18px;font-size:15px;line-height:1.5}
.prompt-box .w{margin-right:.26em;animation-duration:.5s}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--ink);vertical-align:-3px;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.opt-row{display:flex;gap:6px}.opt-row span{background:var(--canvas);border-radius:8px;padding:8px 12px;font-size:12px;font-weight:650}
.cap{font-size:14px;font-weight:650}
.arrow-svg{width:40px;height:24px;stroke-width:2}
.create-main{position:relative;border-radius:14px;height:400px;overflow:hidden;animation:develop 1.2s 2.4s cubic-bezier(.2,.7,.2,1) both}
.launch .ig-card{width:262px}
.launch{display:flex;gap:40px;align-items:center;flex-wrap:wrap;justify-content:center}
.launch-side{display:flex;flex-direction:column;gap:16px;max-width:260px}
.send-btn{background:var(--ink);color:var(--acid);border-radius:10px;padding:14px 20px;font-weight:650;font-size:15px;text-align:center}
.live-row{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.track-scene{display:flex;flex-direction:column;gap:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stats>div{background:var(--canvas);border-radius:14px;padding:18px}.stats>div.acid{background:var(--acid)}
.stats span{font-size:13px;color:var(--muted)}.stats .acid span{color:var(--ink)}
.stats strong{display:block;font-size:28px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.week-card{background:var(--canvas);border-radius:14px;padding:18px 18px 14px}
.hp svg.week{width:100%;height:auto;aspect-ratio:700/236;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.week .grid{stroke:#e2e3ea;stroke-width:1}
.week text{font-size:12px;fill:var(--muted);stroke:none;font-family:inherit}.week .ylab{text-anchor:end}.week .xlab{text-anchor:middle}
.week .bar{fill:#dfe0e7;stroke:none;transform-box:fill-box;transform-origin:50% 100%;animation:barUp .7s cubic-bezier(.2,.8,.2,1) both}
.week .sales{stroke:var(--ink);stroke-width:3}
.week .pt{fill:#fff;stroke:var(--ink);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:popIn .35s both}.week .pt:last-of-type{fill:var(--acid)}
.week .tip{animation:rise .5s 2.2s both}.week .tip rect{fill:var(--ink)}.week .tip text{fill:#fff;font-size:11px;text-anchor:middle}.week .tip .v{fill:var(--acid);font-size:13px;font-weight:700}
.week-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:6px}.week-legend span{display:flex;align-items:center;gap:6px}.week-legend .right{margin-left:auto}
.l-line{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--ink)}.l-bar{display:inline-block;width:9px;height:12px;border-radius:3px;background:#dfe0e7}
@keyframes barUp{from{transform:scaleY(0)}}@keyframes popIn{from{opacity:0;transform:scale(.3)}}
.draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.4s .2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Instagram ad card, as in the dashboard preview */
.ig-card{position:relative;z-index:1;width:310px;background:#fff;border-radius:14px;outline:1px solid #dbdbdb;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#262626;text-align:left;box-shadow:0 24px 60px -28px rgba(23,25,22,.35)}
.ig-head{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 12px}
.ig-avatar{width:34px;height:34px;border-radius:99px;background:var(--acid);outline:1px solid #e6e7ee;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.ig-name{display:grid;gap:1px}.ig-name strong{font-size:13px}.ig-name small{font-size:11px;color:#737373}
.ig-more{font-size:16px;letter-spacing:.08em}
.ig-media{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden}.ig-media>*{width:100%;height:100%}
.ig-actions{display:flex;align-items:center;gap:12px;padding:10px 12px 4px}
.ig-actions>span{display:flex;align-items:center;gap:4px}.ig-actions img{width:22px!important;height:22px!important;object-fit:contain!important}
.ig-actions b{font-size:13px;font-weight:600}.ig-actions .ig-save{margin-left:auto}
.ig-caption{padding:4px 12px 12px;display:grid;gap:3px}.ig-caption p{font-size:13px;line-height:1.4}.ig-caption small{font-size:12px;color:#737373}

/* creators */
.hp-creators h2{margin-bottom:40px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.hp .tile.big{height:520px}
.tile-label{position:absolute;left:16px;bottom:16px;z-index:3;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border-radius:10px;padding:12px 16px;display:flex;flex-direction:column}
.tile-label strong{font-size:18px}.tile-label span{font-size:13px;color:var(--muted)}
.hp .tile.big .video-toggle{bottom:auto;top:12px}
.formats{margin-top:24px;background:var(--canvas);border-radius:20px;padding:40px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}
.formats h3{font-size:28px;margin-bottom:10px}
.ratio-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.ratio-btns button{min-height:44px;padding:0 16px;border-radius:99px;font-size:14px;font-weight:650;background:#fff}
.ratio-btns button span{color:var(--muted);font-weight:500}.ratio-btns button[aria-pressed=true]{background:var(--acid)}
.formats-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.rstage{position:relative;height:460px;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;border-radius:16px;background-color:#fff;background-image:linear-gradient(rgba(23,25,22,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,25,22,.05) 1px,transparent 1px);background-size:40px 40px;background-position:center;overflow:hidden}
.rframe{position:relative;flex:none;max-width:calc(100% - 40px);transition:width .8s cubic-bezier(.65,0,.35,1),height .8s cubic-bezier(.65,0,.35,1)}
.rframe .ai-frame{border-radius:8px}
.crn{position:absolute;width:18px;height:18px;border:2px solid var(--ink)}
.crn.tl{top:-10px;left:-10px;border-right:0;border-bottom:0}.crn.tr{top:-10px;right:-10px;border-left:0;border-bottom:0}
.crn.bl{bottom:-10px;left:-10px;border-right:0;border-top:0}.crn.br{bottom:-10px;right:-10px;border-left:0;border-top:0}
.rdim{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:#fff;border-radius:99px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--muted);box-shadow:0 0 0 1px #ececf1}.rdim b{color:var(--ink)}
.vtrack{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:14px 16px;font-size:12px;font-weight:650}.vtrack .muted{font-size:12px}
.track{position:relative;flex:1;height:36px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.fr{border-radius:4px;background:#ececf1 center/260% no-repeat}
.playhead{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;background:var(--ink);animation:play 5s linear infinite}
@keyframes play{from{left:0}to{left:100%}}

/* meta */
.hp-meta{background:var(--canvas);padding:128px 0;margin-top:128px}
.split-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.meta-copy{display:flex;flex-direction:column;gap:28px}
.meta-copy ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.meta-copy li{display:flex;gap:14px;align-items:center;font-size:18px;font-weight:600}
.meta-copy li>span{width:30px;height:30px;border-radius:99px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.meta-copy li>span.acid{background:var(--acid)}
.platforms{display:flex;gap:10px;flex-wrap:wrap}
.platforms>span{background:#fff;border-radius:10px;padding:12px 16px;font-weight:650;font-size:15px;display:flex;gap:10px;align-items:center}
.platforms>span.soon{color:var(--muted)}
.platforms em{font-style:normal;background:var(--canvas);border-radius:99px;padding:2px 10px;font-size:12px}.platforms em.live{background:var(--acid)}
.hp svg.logo-svg{width:20px;height:20px;stroke:none;flex:none}
.meta-visual{position:relative;height:560px;display:flex;align-items:center;justify-content:center}
.meta-visual .behind{position:absolute;left:10px;top:70px;width:190px;height:250px;border-radius:14px;overflow:hidden;transform:rotate(-6deg)}
.meta-visual .ig-card{width:300px}
.sent{position:absolute;right:0;bottom:70px;z-index:2;background:#fff;border-radius:99px;padding:10px 16px;font-size:14px;font-weight:650;display:flex;gap:8px;align-items:center}

/* agency */
.hp-agency{position:relative;isolation:isolate;padding:128px 0}
.hp-agency ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.hp-agency li{display:flex;justify-content:space-between;align-items:center;background:var(--canvas);border-radius:14px;padding:20px 24px;font-size:19px;font-weight:600}
.tick{width:30px;height:30px;border-radius:99px;background:var(--acid);display:inline-flex;align-items:center;justify-content:center;animation:tick .5s ease both}
.tick.t2{animation-delay:.5s}.tick.t3{animation-delay:1s}.tick.t4{animation-delay:1.5s}
.tick-svg{width:14px;height:14px;stroke-width:2.4}
@keyframes tick{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* tracking */
.hp-track{background:var(--canvas);padding:128px 0}
.track-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:24px}
.flow{display:flex;flex-direction:column}
.logos3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.logos3>span{background:#fff;border-radius:12px;padding:14px 10px;font-weight:650;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}
.logos3>span.acid{background:var(--acid)}
.hp svg.flow-lines{display:block;width:100%;height:70px}
.flow-lines path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.flow-lines .base{stroke:#dcdde4}.flow-lines .run{stroke:var(--ink);stroke-dasharray:4 12;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-16}}
.hub-row{display:flex;justify-content:center}
.hub{position:relative;display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;background:var(--acid);font-weight:700;font-size:15px}
.hub::before{content:"";position:absolute;inset:-1px;border-radius:999px;border:2px solid #e1ea4f;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.board{background:#fff;border-radius:20px;padding:24px 24px 18px;display:flex;flex-direction:column;gap:6px}
.board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.board-head strong{font-size:20px;letter-spacing:-.02em}
.board-head>span{display:inline-flex;align-items:center;gap:7px;background:var(--canvas);border-radius:99px;padding:6px 12px;font-size:12px;font-weight:650}.board-head .logo-svg{width:15px!important;height:15px!important}
.board-cols,.board-row{display:grid;grid-template-columns:minmax(0,2.2fr) .8fr .9fr 1.4fr;gap:12px;align-items:center}
.board-cols{padding:0 12px 4px;font-size:12px;color:var(--muted)}
.board-row{padding:12px;border-radius:14px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(12px);transition:opacity .5s var(--d),transform .5s var(--d)}
.board.in .board-row{opacity:1;transform:none}
.board-row.best{background:var(--canvas)}
.board-ad{display:flex;align-items:center;gap:12px;min-width:0}.board-ad>span:last-child{display:flex;flex-direction:column;min-width:0}
.board-ad strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-ad small{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--muted)}
.board-ad em{font-style:normal;background:var(--acid);color:var(--ink);border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700}
.board-thumb{position:relative;flex:none;width:56px;height:56px;border-radius:10px;overflow:hidden}
.board-thumb i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.board-thumb i svg{width:22px;height:22px;padding:5px;border-radius:99px;background:rgba(255,255,255,.88);fill:var(--ink);stroke:none}
.board-roas{display:flex;align-items:center;gap:10px}.board-roas b{width:38px}
.board-bar{flex:1;height:8px;border-radius:99px;background:#ececf1;overflow:hidden}.board-bar i{display:block;height:100%;border-radius:99px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s calc(var(--d) + .3s) cubic-bezier(.2,.8,.2,1)}
.board.in .board-bar i{transform:none}.board-row.best .board-bar i{background:#9aa52a}
.board-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:0 4px}
.board-more{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--acid);border-radius:10px;padding:10px 14px;font-size:13px;font-weight:650}

/* inspiration, pricing, faq, cta */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:12px}
.mosaic .tile.tall{width:auto;height:auto;grid-row:span 2}
.hp-pricing{background:var(--canvas);padding:128px 0;margin-top:128px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.plan-mini{border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:6px;background:#fff;transition:transform .2s}
.plan-mini:hover{transform:translateY(-3px)}
.plan-mini>span{font-size:18px;font-weight:650}.plan-mini strong{font-size:40px;font-weight:650;letter-spacing:-.035em}.plan-mini small{font-size:14px;color:var(--muted)}
.hp-faq{max-width:920px}
.hp-faq h2{margin-bottom:32px}
.hp-faq>div{display:flex;flex-direction:column;gap:8px}
.hp-faq details{background:var(--canvas);border-radius:14px;padding:20px 24px}
.hp-faq summary{cursor:pointer;list-style:none;font-size:18px;font-weight:620;display:flex;justify-content:space-between;gap:16px}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq details p{margin-top:12px;color:var(--muted);font-size:15px}
.hp-cta{margin-top:128px;margin-bottom:96px}
.cta-box{position:relative;isolation:isolate;background:var(--acid);border-radius:20px;padding:80px 56px 0;display:flex;flex-direction:column;align-items:center;gap:24px;overflow:hidden;text-align:center}
.cta-box h2{font-size:clamp(38px,4vw,56px);line-height:1.05}
.cta-box .marquee{margin-top:32px}
.home-page .creative-credits{width:min(1320px,calc(100% - 112px));margin-inline:auto}

@media (max-width:999px){
.win-body{grid-template-columns:300px minmax(0,1fr)}
.how-grid,.track-grid,.split-2,.formats{grid-template-columns:1fr}
.plans{grid-template-columns:repeat(2,minmax(0,1fr))}
.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.hp-hero{padding:32px 16px 24px}
.carousel{height:360px;margin-top:40px}.carousel .card{width:190px;height:300px;margin-left:-95px}
.win-body{grid-template-columns:1fr}.win-left{border-right:0;border-bottom:1px solid #ececf1}
.flyin{right:6px}
.two{grid-template-columns:1fr}.hp .tile.big{height:420px}
.discover{grid-template-columns:repeat(2,minmax(0,1fr))}.discover>div{height:180px}
.create{grid-template-columns:1fr}.arrow-svg{transform:rotate(90deg);margin:0 auto}
.stats{grid-template-columns:1fr}
.how-stage,.formats,.board{padding:20px}
.xp{padding:16px 14px 0;height:800px}.xp-view{height:730px}.xp-grid{columns:3}.xp-chips span:nth-child(n+4){display:none}.win-stage,.win-body{min-height:800px}
.win-right{padding:16px}.stage{width:240px}.stage[data-shape=tall]{width:170px}
.board-foot{flex-wrap:wrap;gap:10px}
.board-cols{display:none}.board-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}.board-row>span:nth-child(2),.board-row>span:nth-child(3){display:none}.board-roas{grid-column:1/-1}
.week-legend .right{margin-left:0}
.hero-note{flex-direction:column;align-items:center;gap:6px}
.rstage{height:340px}
.meta-visual{height:520px}.meta-visual .behind{left:0;width:150px;height:200px}.sent{right:auto;left:50%;transform:translateX(-50%);bottom:8px}
.logos3>span{flex-direction:column;font-size:12px}
.plans{grid-template-columns:1fr}
.cta-box{padding:56px 20px 0}
.hp .hp-section,.hp-meta,.hp-pricing,.hp-cta{margin-top:90px}
.hp-how,.hp-meta,.hp-agency,.hp-track,.hp-pricing{padding:90px 0}
}
@media (prefers-reduced-motion:reduce){.hp *,.hp *::before,.hp *::after{animation:none!important;transition:none!important}}

/* Sections below the hero are laid out and painted only when they come near the screen, which also defers their images. */
.hp>section:not(.hp-hero){content-visibility:auto;contain-intrinsic-size:auto 900px}