/* Two front doors: mic hero and pull tab on the homepage, the two boards, the grow-into-the-side click, and the
   full-screen heroes at the top of /for-creators and /for-companies. Loaded by index, for-creators and for-companies only. */
@media (min-width:700px) and (hover:hover){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- homepage hero ---------- */
.dh{display:none}
html.dv2 .dh{display:block}
html.dv2 .gate-top,html.dv2 .gate-doors>.gdoor,html.dv2 .gate-doors>.vstripe{display:none}
html.dv2 .gate-doors{flex:0 0 auto;min-height:0;display:block;padding:18px 0 26px;text-align:center}
html.dv2 .gate-doors .gstudio{position:static;display:inline-block}
.dh-track{position:relative}
.dh-stage{position:relative;height:max(440px,calc(100svh - var(--dh-top,80px) - 170px));overflow:hidden;background:#fff;touch-action:pan-y;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.6vh,30px);padding-bottom:2vh}
.dh-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.dh-copy{text-align:center;padding:0 16px;position:relative;z-index:1;will-change:transform;mix-blend-mode:difference;color:#fff}
.dh-copy.hi{position:absolute;z-index:3;pointer-events:none;margin:0}
.dh-eye{margin:0 0 10px;font:700 13px/1.2 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#919191}
.dh-h1{margin:0;font-family:Archivo,'Arial Black',sans-serif;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(26px,5.4vw,76px);line-height:.95;letter-spacing:-.01em;color:#fff}
.dh-copy .gh{color:transparent}
.dh-pod{cursor:default}
.dh-mark{width:min(80vw,820px,96vh);position:relative;z-index:4}
.dh-svg{display:block;width:100%;height:auto;overflow:visible}
.dh-mic-k path{fill:none;stroke:#1a1a1a;stroke-width:1.25;stroke-linejoin:round}
.dh-mic-f path{fill:#fff;fill-rule:evenodd}
.dh-resume{text-align:center;font-size:14px;margin:0;padding:10px 16px 0}
.dh-resume a{font-weight:900;color:inherit}
@media (max-width:640px){.dh-mark{width:94vw}.dh-stage{height:max(380px,calc(100svh - var(--dh-top,66px) - 190px))}}
.dh.rm .dh-gl,.dh.rm .dh-copy.hi{display:none}
.dh.rm .dh-copy .gh{color:inherit}.dh.rm .dh-copy{mix-blend-mode:normal}.dh.rm .dh-h1{color:var(--ink)}.dh.rm .dh-eye{color:var(--grey)}
.dh:not(.live) .dh-copy.hi{display:none}
.dh:not(.live) .dh-copy .gh{color:inherit}
.dh:not(.live) .dh-copy{mix-blend-mode:normal}.dh:not(.live) .dh-h1{color:var(--ink)}

/* ---------- pull tab and the two boards ---------- */
.pull{-webkit-user-select:none;user-select:none;position:relative;margin-top:-14px;background:#efe9df url(../img/collage/v2-main/01-background-sm.webp) center/cover}


html.dv2 .dh.live .dh-track{position:relative;z-index:6}
html.ripping .dh-track{clip-path:var(--edgeTop)}
.pull-board{display:flex;gap:clamp(16px,3vw,44px);align-items:flex-start;justify-content:center;padding:clamp(30px,5vh,56px) clamp(14px,4vw,60px) clamp(30px,5vh,50px)}
.pd{position:relative;flex:1 1 0;max-width:640px;display:flex;flex-direction:column;background:#fff;border-radius:4px;color:inherit;text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.05),0 14px 30px rgba(0,0,0,.16);transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s;-webkit-tap-highlight-color:transparent}
.pd-co{transform:rotate(-1.4deg)}.pd-cr{transform:rotate(1.2deg)}
.pd:hover,.pd:focus-visible{transform:rotate(0) translateY(-6px) scale(1.012);box-shadow:0 2px 0 rgba(0,0,0,.05),0 26px 46px rgba(0,0,0,.22)}
.pd:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.pd.gone{visibility:hidden}
.pd-tape{position:absolute;width:96px;height:24px;background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(0,0,0,.1);top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);z-index:3}
.pd-win{position:relative;display:block;overflow:hidden;margin:10px 10px 0;border-radius:3px;aspect-ratio:16/10;background:#efe9df url(../img/collage/v2-main/01-background-sm.webp) center/cover}
.pd-cap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 18px 20px}
.pd-k{font-family:Archivo,'Arial Black',sans-serif;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(24px,2.7vw,40px);line-height:.95;letter-spacing:-.01em}
.pd-co .pd-k{color:#2f8f7c}.pd-cr .pd-k{color:var(--mag)}
.pd-s{font-size:15px;line-height:1.35;color:var(--grey)}
.pd-go{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;font:900 15px/1 Lato,sans-serif;padding:12px 26px;border-radius:99px;color:#fff;background:#2f8f7c}
.pd-cr .pd-go{background:var(--mag)}
.pull-flap{position:absolute;inset:0;z-index:5;transform-origin:2% 0;will-change:transform}
.pull-flap::before{content:"";position:absolute;inset:-3px 0 0 0;background:#dcd6cc;clip-path:var(--edge,inset(0))}
.pull-flap-in{position:absolute;inset:0;background:#fff;clip-path:var(--edge,inset(0));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:clamp(34px,6vh,64px) 16px 0}
.pull-perf{position:absolute;left:3%;right:3%;top:18px;border-top:2px dashed #cfcfcf}
.pull-pick{margin:0;text-align:center;font-family:Archivo,'Arial Black',sans-serif;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);line-height:1.1}
.pull-pick b{color:#2f8f7c;font-weight:inherit}.pull-pick i{font-style:normal;color:var(--mag)}
.pull-tab{position:relative;border:0;cursor:grab;padding:14px 34px 16px;font:900 15px/1 Lato,sans-serif;color:#fff;background:var(--mag);touch-action:none;
  clip-path:polygon(0 8%,6% 0,12% 6%,20% 1%,30% 7%,41% 0,52% 6%,63% 1%,74% 7%,85% 0,94% 6%,100% 2%,100% 92%,93% 100%,84% 94%,72% 100%,61% 93%,50% 100%,38% 94%,27% 100%,16% 93%,7% 100%,0 94%);
  animation:pull-nudge 2.4s ease-in-out infinite 1.2s}
.pull-tab:active{cursor:grabbing}
.pull-hint{margin:0;color:var(--grey);font-size:13px}
@keyframes pull-nudge{0%,70%,100%{transform:none}78%{transform:translateY(7px) rotate(-1deg)}86%{transform:translateY(-2px)}92%{transform:translateY(3px)}}
.pull.torn .pull-flap{pointer-events:none}
@media (max-width:759px){.pull-board{flex-direction:column;align-items:stretch;padding:28px 14px 30px;gap:26px}.pd{max-width:none}
  .pd-win{aspect-ratio:auto;height:min(82vw,360px)}}
@media (prefers-reduced-motion:reduce){.pull-flap{display:none}.pull-tab{animation:none}}
/* the scaled copy of a side's hero inside its board, and the same copy growing to full screen */
.xr{position:absolute;left:0;top:0;width:var(--fw,100vw);height:var(--fh,100vh);transform-origin:0 0;pointer-events:none}
.xp{position:fixed;inset:0;z-index:9999;cursor:pointer;overflow:hidden}
.xp .xr{position:absolute;will-change:transform;box-shadow:0 20px 60px rgba(0,0,0,.25)}
html.growing,html.growing body{overflow:hidden}

/* ---------- full-screen heroes (shared by the board copies and the side pages) ---------- */
.fs{position:absolute;inset:0;overflow:hidden;background:#efe9df url(../img/collage/v2-main/01-background-sm.webp) center/cover}
.fs>div{position:absolute;inset:0}
/* shows collage (creators) */
.clg{position:relative;width:100%;overflow:hidden;background:#efe9df url(../img/collage/v2-main/01-background-sm.webp) center/cover}
.clg-stage{position:absolute;left:50%;top:50%;aspect-ratio:16/9;transform:translate(-50%,-50%)}
.clg-l{position:absolute;will-change:transform}
.clg-l img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.clg.pre .clg-l:not(:first-child) img{opacity:0}
.clg-head{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);z-index:5;margin:0;text-align:center;width:min(60%,900px);pointer-events:none;
  font-family:Archivo,'Arial Black',sans-serif;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(22px,4.6vw,80px);line-height:.95;letter-spacing:-.01em;color:var(--ink)}
.clg-head.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.clg.pre .clg-head{opacity:0}
.fs .clg{position:absolute;inset:0;background:none}
.fs .clg-stage{width:max(100vw,177.78vh);width:max(100vw,177.78svh)}
@media (max-aspect-ratio:1/1){
  .fs .clg-stage{width:230vw}
  .fs .clg-head:not(.sr){top:calc(50% - 66vw);width:90vw;font-size:clamp(26px,8.5vw,48px)}
}
/* companies logo grid */
.cg{position:relative;width:100%;overflow:hidden;background:#efe9df url(../img/collage/v2-main/01-background-sm.webp) center/cover;
  display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);grid-template-rows:auto 1fr;gap:0 3vw;padding:clamp(28px,6vh,72px) clamp(20px,4vw,64px) clamp(28px,5vh,60px) 0}
.fs .cg{position:absolute;inset:0;align-content:center}
.cg-h{grid-column:1;grid-row:1;margin:0 0 0 clamp(20px,4vw,64px);font-family:Archivo,'Arial Black',sans-serif;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,58px);line-height:.95;letter-spacing:-.01em;color:var(--ink);align-self:start}
.cg-art{grid-column:1;grid-row:2;position:relative;align-self:end;margin-top:28px;aspect-ratio:900/520;max-height:38vh}
.cg-bar{position:absolute;left:0;display:block;height:auto}
.cg-card{position:absolute;right:-4%;bottom:0;width:62%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.cg-logos{grid-column:2;grid-row:1/3;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px);align-content:center}
.cg-tile{aspect-ratio:3/2;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:14% 12%;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 14px rgba(0,0,0,.08)}
.cg-tile[data-tone=dark]{background:var(--ink)}
.cg-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.cg-tile.fill{background:var(--c);box-shadow:none}
.cg.pre .cg-tile,.cg.pre .cg-bar,.cg.pre .cg-card,.cg.pre .cg-h{opacity:0}
@media (max-width:900px){
  .cg{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:26px 16px 22px;gap:16px}
  .fs .cg{align-content:start;padding-top:max(26px,6vh)}
  .cg-h{margin:0;grid-row:1;font-size:clamp(24px,7vw,40px)}
  .cg-logos{grid-column:1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .cg-art{grid-row:3;width:min(100%,440px);margin:6px 0 0}
  .cg-tile{border-radius:8px}
}
@media (max-width:520px){.fs .cg-art{width:min(72%,300px)}}

/* companies collage (built by doors.js from the proof list; the grid above is the no-JS fallback) */
.cc{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#efe9df url(../img/collage/v2-main/01-background-sm.webp) center/cover}
.cc-stage{position:absolute;inset:0}
.cc-stage>*{position:absolute}
.cc-s img,.cc-b img,.cc-m img{display:block;width:100%;height:auto}
.cc-s{z-index:1}.cc-b{z-index:5}
.cc-s img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.1))}
.cc-c{filter:drop-shadow(0 4px 7px rgba(0,0,0,.2))}
.cc-in{position:absolute;inset:0}
.cc-k{position:absolute;inset:0}
.cc-f{position:absolute;inset:0;background:#fffefa;padding:2.2%}
.cc-p{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background-image:url(../img/collage/v2-main/01-background-sm.webp);background-size:cover;background-blend-mode:multiply}
.cc-p img{display:block;width:72%;height:66%;object-fit:contain}
.cc-stk .cc-f{border-radius:12%/20%;padding:3.2%}.cc-stk .cc-p{border-radius:10%/18%}
.cc-lab .cc-f{padding:0}.cc-big .cc-p img{width:76%;height:66%}
.cc-t{position:absolute;top:-7%;width:30%;height:17%;background:rgba(244,236,214,.78);box-shadow:0 1px 2px rgba(0,0,0,.12);
  clip-path:polygon(0 8%,6% 0,12% 10%,20% 2%,30% 9%,40% 0,52% 8%,63% 1%,74% 9%,86% 0,94% 8%,100% 2%,100% 92%,93% 100%,84% 91%,74% 99%,62% 92%,50% 100%,38% 92%,26% 100%,15% 92%,6% 100%,0 93%)}
.cc-m{z-index:90;filter:drop-shadow(0 8px 14px rgba(0,0,0,.22))}
.cc-l{z-index:91;background:#151515;color:#fff;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%;rotate:-1.6deg;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.cc-h{margin:0;font-family:Archivo,'Arial Black',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;line-height:1;color:#fff}
.cc.pre .cc-stage>*{opacity:0}
html.tk-play .tk-hero .cc-stage{opacity:0}
.tk-hero[data-cogrid-band] .fs{background:#efe9df url(../img/collage/v2-main/01-background-sm.webp) center/cover}
html.tk:not(.nav-in) .tk-hero .cg-box:not(.cc){visibility:hidden}

/* ---------- side pages: the hero fills the screen, then the site appears ---------- */
.tk-hero{position:relative;height:100vh;height:100svh;overflow:hidden}
html.tk header.site{position:fixed;left:0;right:0;top:0;transform:translateY(-104%);transition:transform .42s cubic-bezier(.2,.8,.3,1);box-shadow:0 6px 18px rgba(0,0,0,.08)}
html.tk.nav-in header.site{transform:none}
html.tk{scroll-padding-top:96px}
html.tk:not(.nav-in) .dc-bar{transform:translateY(120%)}
html.tk .dc-bar{transition:transform .42s cubic-bezier(.2,.8,.3,1)}
html.arr .tk-hero[data-collage-band] .fs{background:#efe9df url(../img/collage/v2-main/final.webp) center/max(100vw,177.78svh) auto no-repeat}
@media (max-aspect-ratio:1/1){html.arr .tk-hero[data-collage-band] .fs{background-image:url(../img/collage/v2-main/final-port.webp);background-size:230vw auto}}
html.tk-play .tk-hero .cg-tile,html.tk-play .tk-hero .cg-bar,html.tk-play .tk-hero .cg-card,html.tk-play .tk-hero .cg-h{opacity:0}
.tk-cue{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:8;display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  font:900 12px/1 Lato,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(26,26,26,.88);padding:10px 16px 8px;border-radius:99px;text-decoration:none;
  transition:opacity .3s;animation:tk-cue-in .5s ease-out .6s both}
.tk-cue::after{content:"";width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);margin-top:-2px;animation:tk-bob 1.6s ease-in-out infinite}
html.nav-in .tk-cue{opacity:0;pointer-events:none}
.tk-hero{cursor:pointer}
.tk-hero[data-collage-band]{--cue:#E42688;--cue-a:rgba(228,38,136,.55)}.tk-hero[data-cogrid-band]{--cue:#2f8f7c;--cue-a:rgba(47,143,124,.6)}
html.tk-built .tk-cue{background:var(--cue);animation:tk-cue-in .5s ease-out both,tk-glow 1.8s ease-out .2s infinite,tk-float 1.8s ease-in-out .2s infinite}
@keyframes tk-glow{0%{box-shadow:0 0 0 0 var(--cue-a),0 6px 16px rgba(0,0,0,.25)}70%{box-shadow:0 0 0 16px rgba(0,0,0,0),0 6px 16px rgba(0,0,0,.25)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0),0 6px 16px rgba(0,0,0,.25)}}
@keyframes tk-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media (prefers-reduced-motion:reduce){html.tk-built .tk-cue,.tk-cue{animation:none;opacity:1;transform:translateX(-50%);background:#111;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--cue,#E42688)}.tk-cue::after{animation:none}}
html.rm-cue .tk-cue{animation:none!important;opacity:1;pointer-events:auto;transform:translateX(-50%);background:#111;color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--cue,#E42688)}html.rm-cue .tk-cue::after{animation:none}
@keyframes tk-cue-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes tk-bob{0%,100%{translate:0 0}50%{translate:0 4px}}
@media (prefers-reduced-motion:reduce){.tk-cue,.tk-cue::after{animation:none}html.tk header.site{transition:none}}
html.growing .dc-bar{visibility:hidden}
@media (max-width:900px){html.rm-cue .tk-cue{bottom:calc(92px + env(safe-area-inset-bottom))}}