:root { color-scheme: light; --paper:#f7f7f7; --ink:#090912; --orange:#e85c18; --yellow:#f7d657; --blue:#155fc9; --mint:#a4e8c7; --lavender:#675bc8; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; font-family:"Nunito Sans", sans-serif; }
a { color:inherit; text-decoration:none; }
.comp-frame { position:relative; width:min(100%,1505px); height:auto; aspect-ratio:1505/1045; margin-inline:auto; overflow:hidden; background:var(--paper); }
.wordmark { position:absolute; z-index:5; left:3.55%; top:1.2%; font-family:"Sour Gummy", sans-serif; font-size:clamp(34px,2.66vw,40px); line-height:1; font-weight:800; letter-spacing:-.035em; }
.wordmark > span { position:absolute; width:25px; height:24px; left:100%; top:-2px; }
.wordmark i { position:absolute; display:block; width:5px; height:16px; border-radius:999px; background:var(--orange); transform:rotate(27deg); }
.wordmark i:last-child { width:14px; height:5px; left:9px; top:13px; transform:rotate(-10deg); }
.primary-nav { position:absolute; z-index:5; left:38%; top:2.6%; width:27%; display:flex; justify-content:center; gap:clamp(26px,3.45vw,52px); font-size:clamp(13px,1vw,15px); font-weight:800; white-space:nowrap; }
.waitlist-cta { position:absolute; z-index:5; right:3.6%; top:1%; min-width:153px; padding:13px 22px; border-radius:999px; background:var(--blue); color:white; text-align:center; font-size:15px; font-weight:800; box-shadow:0 8px 20px rgba(36,120,248,.17); }
.hero-copy { position:absolute; z-index:4; left:3.55%; top:10.1%; width:34%; }
.hero-copy h1 { margin:0; font-family:"Sour Gummy", sans-serif; font-size:clamp(68px,5.32vw,80px); line-height:.865; letter-spacing:-.035em; font-weight:800; }
.hero-copy > p:not(.hero-note) { margin:1.72vw 0 0; color:#5e6474; font-size:clamp(18px,1.4vw,21px); line-height:1.35; font-weight:700; }
.role-actions { display:flex; gap:14px; margin-top:10px; }
.role-actions a { min-width:clamp(205px,15.8vw,238px); height:clamp(54px,4.05vw,61px); display:flex; align-items:center; justify-content:center; gap:22px; border-radius:999px; font-size:clamp(16px,1.26vw,19px); font-weight:800; }
.role-actions svg { width:23px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.creator-role { color:var(--ink); background:var(--orange); }
.brand-role { background:#f7f7f7; border:1px solid #6e7384; }
.hero-note { margin:9px 0 0 8px; color:var(--lavender); font-family:"Sour Gummy", sans-serif; font-size:22px; line-height:1.03; font-weight:500; transform:rotate(-4deg); }
.hero-note::after { content:""; display:block; width:110px; height:3px; margin-top:3px; border-radius:99px; background:var(--lavender); transform:rotate(-5deg); }
.hero-scene { position:absolute; left:39%; top:7.5%; width:60.3%; height:48.8%; border-radius:34px; background:var(--yellow) url("assets/plates/hero-yellow-material.png") center / cover no-repeat; overflow:hidden; }
.plate { position:absolute; display:block; object-fit:contain; }
.brand-character { z-index:1; left:0; top:22%; width:31%; height:70%; }
.gig-brief-card { z-index:2; left:12%; top:10%; width:46%; height:43%; }
.application-cluster { z-index:3; left:40%; top:28%; width:38%; height:56%; object-fit:contain; }
.creator-character { z-index:4; right:1.5%; top:35%; width:24%; height:55%; }
.scene-note { position:absolute; z-index:5; right:5.2%; top:8%; margin:0; color:#4e4b42; font-family:"Sour Gummy", sans-serif; font-size:21px; line-height:1; font-weight:700; transform:rotate(-5deg); }
.scene-note::after { content:""; display:block; width:48px; height:3px; margin-top:7px; background:#4e4b42; border-radius:99px; transform:rotate(-9deg); }
.categories { position:absolute; left:3.8%; right:3.7%; top:60.4%; height:6%; display:grid; grid-template-columns:1.1fr 1fr 1fr .95fr 1.1fr .85fr; gap:15px; }
.category { min-width:0; height:62px; display:flex; align-items:center; justify-content:center; gap:13px; border-radius:999px; font-size:15px; font-weight:800; white-space:nowrap; }
.product { background:#f8e4e8; }.testimonial{background:#f8f7d4}.unboxing{background:#d9f7e9}.tutorial{background:#e7e3fb}.ads{background:#d9eafa}.tryon{background:#f8e6d9}
.shape { position:relative; width:23px; height:23px; display:inline-block; }
.video::before { content:""; position:absolute; left:1px; top:5px; width:14px; height:13px; border-radius:3px; background:#d84d4d; }.video::after{content:"";position:absolute;right:0;top:8px;border:5px solid transparent;border-right:0;border-left:7px solid #d84d4d}
.bubble { border:2px solid #15151a; border-radius:50%; }.bubble::after{content:"";position:absolute;left:2px;bottom:-3px;width:6px;height:6px;border-left:2px solid #15151a;transform:skew(-25deg)}
.box { border:2px solid #10151a; transform:rotate(30deg) scale(.75); }.box::after{content:"";position:absolute;left:9px;top:-2px;height:22px;border-left:2px solid #10151a;transform:rotate(-30deg)}
.cap::before{content:"";position:absolute;inset:4px 0 7px;background:#6548c9;transform:rotate(30deg)}.cap::after{content:"";position:absolute;width:2px;height:10px;background:#6548c9;right:3px;bottom:0}
.bars::before{content:"";position:absolute;left:2px;bottom:2px;width:5px;height:8px;border-radius:2px;background:#2569d9;box-shadow:8px -5px #2569d9,16px -12px #2569d9}
.hanger::before{content:"";position:absolute;left:9px;top:0;width:5px;height:6px;border:2px solid #161616;border-bottom:0;border-radius:5px 5px 0 0}.hanger::after{content:"";position:absolute;left:1px;bottom:3px;width:20px;height:10px;border:2px solid #161616;border-top:0;transform:skew(-32deg)}
.workflow { position:absolute; left:0; top:70.5%; width:100%; height:29.5%; }
.workflow h2 { margin:0; text-align:center; font-family:"Sour Gummy", sans-serif; font-size:52px; line-height:1; font-weight:800; letter-spacing:-.04em; }
.step { position:absolute; top:30%; height:70%; display:grid; grid-template-columns:44px 1fr; column-gap:12px; align-items:start; }
.step > span { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#d6e5ff; color:#2478f8; font-size:20px; font-weight:800; }
.step h3 { margin:1px 0 4px; font-size:16px; line-height:1.1; }.step p{margin:0;color:#5d667a;font-size:14px;line-height:1.35;font-weight:600}
.step img { position:absolute; left:0; bottom:0; width:100%; height:49%; object-fit:contain; object-position:center top; }
.step-one { left:10%; width:20%; }.step-two{left:40%;width:30%;}.step-three{left:70%;width:20%;}
.step-two > div { max-width:52%; }.step-three > div { max-width:86%; }
.workflow-note { position:absolute; left:91.6%; width:6.8%; bottom:7%; margin:0; color:var(--lavender); font-family:"Sour Gummy", sans-serif; font-size:21px; line-height:1.05; font-weight:600; transform:rotate(-5deg); }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
::selection { background:var(--yellow); color:var(--ink); }

.site-content { background:var(--paper); }
.section-shell { width:min(1370px, calc(100% - 80px)); margin-inline:auto; }
.audience-section { padding:150px 0; background:#fff7ec; }
.audience-layout { display:grid; grid-template-columns:.95fr 1.05fr; gap:96px; align-items:center; }
.audience-label { display:inline-flex; align-items:center; min-height:38px; padding:0 17px; border-radius:999px; background:var(--orange); color:var(--ink); font-size:14px; font-weight:800; }
.audience-copy h2, .market-head h2, .how-section h2, .waitlist-copy h2 { margin:22px 0 0; font-family:"Sour Gummy",sans-serif; font-weight:800; letter-spacing:-.04em; line-height:.9; }
.audience-copy h2 { max-width:680px; font-size:clamp(64px,7vw,104px); }
.audience-lede { max-width:620px; margin:30px 0 0; font-size:24px; line-height:1.35; font-weight:700; }
.audience-copy > p:not(.audience-lede) { max-width:650px; color:#53596a; font-size:18px; line-height:1.65; }
.process-line { display:flex; flex-wrap:wrap; align-items:center; gap:11px; margin:44px 0 28px; padding:0; list-style:none; }
.process-line li { display:flex; align-items:center; font-weight:800; }
.process-line li:not(:last-child)::after { content:""; width:20px; height:10px; margin-left:11px; border-right:2px solid var(--orange); border-bottom:2px solid var(--orange); transform:skewX(-30deg); }
.section-cta { width:max-content; min-height:58px; display:inline-flex; align-items:center; gap:28px; margin-top:26px; padding:0 25px; border-radius:999px; background:var(--ink); color:white; font-weight:800; }
.section-cta svg { width:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.brief-board { position:relative; min-height:620px; padding:58px; border-radius:34px; background:var(--yellow); overflow:hidden; box-shadow:0 24px 50px rgba(117,83,0,.14); }
.brief-board::after { content:""; position:absolute; right:-60px; bottom:-96px; width:350px; height:350px; border-radius:50%; background:#ffd72e; opacity:.55; }
.brief-top, .gig-card > div, .gig-card footer { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brief-top span { padding:8px 14px; border-radius:999px; background:white; font-size:13px; font-weight:800; }
.brief-top strong { font-size:18px; }
.brief-board h3 { max-width:620px; margin:86px 0 12px; font-family:"Sour Gummy",sans-serif; font-size:58px; line-height:.95; letter-spacing:-.035em; }
.brief-board > p { max-width:560px; color:#4b4332; font-size:18px; }
.brief-board dl { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:48px 0 0; }
.brief-board dl div { padding:20px; border-radius:15px; background:rgba(255,255,255,.82); }
.brief-board dt { color:#777067; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.brief-board dd{margin:6px 0 0;font-weight:800}
.brief-apps { position:absolute; z-index:2; left:58px; right:58px; bottom:38px; display:flex; align-items:center; justify-content:space-between; }
.brief-apps img { width:310px; height:90px; object-fit:contain; object-position:left center; }.brief-apps span{display:flex;align-items:baseline;gap:9px;font-weight:800}.brief-apps strong{font-family:"Sour Gummy",sans-serif;font-size:56px;color:var(--blue)}
.creator-section { padding:150px 0; background:#eef6ff; }
.creator-layout { display:grid; grid-template-columns:1fr 1fr; gap:110px; align-items:center; }
.creator-visual { position:relative; min-height:680px; border-radius:34px; background:var(--blue); overflow:hidden; }
.creator-visual::before { content:""; position:absolute; width:330px; height:330px; left:-80px; top:-90px; border-radius:50%; background:#6ea7ff; }
.creator-visual img { position:absolute; width:68%; height:78%; object-fit:contain; left:15%; bottom:6%; filter:drop-shadow(0 22px 24px rgba(8,35,77,.16)); }
.opportunity-card { position:absolute; right:34px; bottom:34px; width:300px; display:flex; flex-direction:column; gap:5px; padding:22px; border-radius:15px; background:white; box-shadow:0 18px 40px rgba(11,29,60,.2); }
.opportunity-card span { color:var(--blue); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.opportunity-card strong{font-size:20px}.opportunity-card small{color:#676d7e;font-weight:700}
.creator-copy .audience-label { background:var(--blue); }
.creator-copy h2 { font-size:clamp(54px,6.2vw,90px); }
.creator-principles { margin:42px 0 20px; border-top:1px solid #bdcce2; }
.creator-principles p { margin:0; padding:19px 0; border-bottom:1px solid #bdcce2; font-size:20px; font-weight:800; }
.how-section { padding:150px 0; background:var(--yellow); }
.how-section h2 { font-size:clamp(72px,8vw,118px); }
.how-sides { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:78px; }
.how-sides article { padding:42px; border-radius:16px; background:rgba(255,255,255,.88); }
.how-sides article:last-child { background:var(--ink); color:white; }
.how-sides h3 { margin:0 0 34px; font-family:"Sour Gummy",sans-serif; font-size:34px; }
.how-sides p { margin:0; font-size:21px; font-weight:800; }.how-sides i{display:block;width:2px;height:28px;margin:9px 0 9px 14px;background:var(--orange)}.how-sides article:last-child i{background:var(--mint)}
.marketplace-section { padding:150px 0; background:var(--paper); }
.market-head { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:76px; }.market-head h2{font-size:clamp(72px,8vw,116px)}.market-head p{margin:0 0 8px;color:#606677;font-weight:700}
.gig-list { display:grid; grid-template-columns:1.2fr .8fr; gap:18px; }
.gig-card { min-height:340px; display:flex; flex-direction:column; padding:34px; border-radius:16px; transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease; }
.gig-card:hover { transform:translateY(-7px); box-shadow:0 20px 40px rgba(9,9,18,.12); }
.gig-card > div span { padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.7); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.gig-card > div b{font-family:"Sour Gummy",sans-serif;font-size:38px}
.gig-card h3 { max-width:620px; margin:66px 0 7px; font-family:"Sour Gummy",sans-serif; font-size:46px; line-height:.95; }.gig-card p{margin:0;color:#555c6e;font-weight:700}.gig-card footer{margin-top:auto;padding-top:22px;border-top:1px solid rgba(9,9,18,.18);font-weight:800}.gig-card footer span{color:#666b78;font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.coral{background:#ffd9cc}.blue{background:#d9eaff}.mint{background:#d9f7e9}.lilac{background:#e7e3fb}.gig-card:nth-child(4){grid-column:1/-1;min-height:280px}
.waitlist-section { padding:150px 0; background:#ff7a2f; }
.waitlist-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:start; }
.waitlist-copy h2 { max-width:650px; color:white; font-size:clamp(64px,7vw,100px); }.waitlist-copy p{margin:36px 0 0;color:#431a08;font-size:22px;font-weight:800;line-height:1.4}.waitlist-copy>strong{display:block;margin-top:28px;color:var(--ink);font-size:18px}
.waitlist-count { width:max-content; max-width:100%; display:flex; align-items:center; gap:12px; margin-top:34px; padding:11px 18px 11px 12px; border:2px solid var(--ink); border-radius:999px; background:#fff7df; color:var(--ink); box-shadow:4px 4px 0 var(--ink); }
.waitlist-count strong { min-width:48px; height:48px; display:grid; place-items:center; padding:0 10px; border-radius:999px; background:var(--ink); color:white; font-family:"Sour Gummy",sans-serif; font-size:27px; line-height:1; }
.waitlist-count span { font-size:15px; font-weight:800; }
.signup-panel { border-radius:16px; background:white; overflow:hidden; box-shadow:0 24px 54px rgba(91,31,0,.18); }
.role-toggle { display:grid; grid-template-columns:1fr 1fr; padding:10px; gap:8px; background:#fff3ec; }
.role-toggle button { min-height:54px; border:0; border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; font-weight:800; }.role-toggle button[aria-selected="true"]{background:var(--ink);color:white}
.signup-form,.success-message { padding:42px; }.form-intro{margin-bottom:30px}.form-intro h3,.success-message h3{margin:0;font-family:"Sour Gummy",sans-serif;font-size:34px}.form-intro p{margin:5px 0 0;color:#686e7e;font-weight:700}
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { display:block; margin-bottom:18px; font-size:13px; font-weight:800; }
.optional-label { margin-left:5px; color:#747987; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
input,select { width:100%; height:52px; margin-top:8px; padding:0 15px; border:1px solid #c8cad4; border-radius:12px; background:#fbfbfc; color:var(--ink); font:inherit; outline:0; }
input::placeholder{color:#767b88;opacity:1}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,120,248,.17)}
.submit-button { width:100%; min-height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 21px; border:0; border-radius:999px; background:var(--blue); color:white; cursor:pointer; font:inherit; font-weight:800; }.submit-button:hover{background:var(--ink)}
.submit-button:disabled { cursor:wait; opacity:.72; }
.form-status { margin:14px 4px 0; color:#a72b1f; font-size:14px; font-weight:800; line-height:1.4; }
.success-message { min-height:540px; display:grid; place-content:center; text-align:center; }.success-message>span{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 22px;border-radius:50%;background:var(--mint);font-size:28px}.success-message p{max-width:450px;color:#626879}.reset-form{width:max-content;margin:24px auto 0;padding:0 0 4px;border:0;border-bottom:2px solid currentColor;background:transparent;cursor:pointer;font-weight:800}
.success-message>span svg { width:28px; height:28px; }
[hidden]{display:none!important}.site-footer{min-height:130px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(40px,calc((100vw - 1370px)/2));background:var(--ink);color:white}.site-footer>a:first-child{font-family:"Sour Gummy",sans-serif;font-size:32px;font-weight:800}.site-footer p{font-weight:700}.site-footer>a:last-child{text-decoration:underline;text-underline-offset:5px;font-weight:800}
.section-cta:hover,.waitlist-cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(9,9,18,.15)}
.motion-ready .gig-brief-card { animation:brief-flight .9s cubic-bezier(.16,1,.3,1) both; }
.motion-ready .application-cluster { animation:applications-arrive .85s .34s cubic-bezier(.16,1,.3,1) both; }
.motion-ready .creator-character { animation:creator-react .72s .58s cubic-bezier(.16,1,.3,1) both; }
@keyframes brief-flight { from{transform:translate(-70px,38px) rotate(-9deg);filter:blur(5px);clip-path:inset(0 58% 0 0 round 24px)} to{transform:none;filter:blur(0);clip-path:inset(0 0 0 0 round 0)} }
@keyframes applications-arrive { from{transform:translateX(-54px) scale(.92);opacity:.12;filter:blur(7px)} to{transform:none;opacity:1;filter:blur(0)} }
@keyframes creator-react { 0%{transform:translateY(12px) scale(.96)} 65%{transform:translateY(-7px) scale(1.015)} 100%{transform:none} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}

@media (max-width:800px) {
  .comp-frame { width:100%; height:auto; aspect-ratio:auto; display:flex; flex-direction:column; padding:94px 18px 70px; overflow:hidden; }
  .wordmark { left:20px; top:20px; font-size:34px; }
  .primary-nav { display:none; }
  .waitlist-cta { right:18px; top:18px; min-width:0; padding:11px 16px; font-size:13px; }
  .hero-copy { position:relative; left:auto; top:auto; width:100%; }
  .hero-copy h1 { font-size:clamp(49px,14.5vw,64px); line-height:.88; }
  .hero-copy > p:not(.hero-note) { margin:22px 0 0; font-size:18px; }
  .role-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:22px; }
  .role-actions a { min-width:0; width:100%; height:54px; padding:0 10px; gap:8px; font-size:14px; }
  .role-actions svg { width:18px; }
  .hero-note { display:none; }
  .hero-scene { position:relative; left:auto; top:auto; width:100%; height:430px; margin-top:28px; border-radius:24px; }
  .brand-character { left:1%; top:34%; width:40%; height:58%; }
  .gig-brief-card { left:21%; top:10%; width:58%; height:30%; }
  .application-cluster { left:40%; top:38%; width:46%; height:40%; object-fit:contain; }
  .creator-character { right:0; top:49%; width:35%; height:43%; }
  .scene-note { display:none; }
  .categories { position:relative; left:auto; right:auto; top:auto; height:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
  .category { height:48px; padding:0 10px; gap:8px; font-size:12px; }
  .shape { transform:scale(.8); }
  .workflow { position:relative; left:auto; top:auto; width:100%; height:auto; margin-top:70px; }
  .workflow h2 { font-size:42px; text-align:left; }
  .step { position:relative; left:auto; top:auto; width:100%; min-height:205px; height:auto; margin-top:28px; padding-bottom:118px; grid-template-columns:38px 1fr; }
  .step > span { width:32px; height:32px; font-size:17px; }
  .step h3 { font-size:17px; }.step p{font-size:14px}
  .step img { left:0; bottom:0; width:100%; height:112px; object-fit:contain; object-position:center bottom; }
  .step-two > div,.step-three > div { max-width:none; }
  .workflow-note { display:none; }
  .section-shell { width:calc(100% - 36px); }
  .audience-section,.creator-section,.how-section,.marketplace-section,.waitlist-section { padding:86px 0; }
  .audience-layout,.creator-layout,.waitlist-layout { grid-template-columns:1fr; gap:52px; }
  .creator-copy { order:-1; }
  .audience-copy h2 { font-size:58px; }.creator-copy h2{font-size:49px}.audience-lede{font-size:20px}.audience-copy>p:not(.audience-lede){font-size:16px}
  .process-line { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.process-line li::after{display:none}
  .brief-board { min-height:0; padding:28px; border-radius:24px; }.brief-board h3{margin-top:64px;font-size:43px}.brief-board dl{grid-template-columns:1fr}.brief-board dl div{padding:14px}.brief-apps{position:relative;left:auto;right:auto;bottom:auto;margin-top:24px;flex-direction:column;align-items:flex-start}.brief-apps img{width:100%;height:70px}
  .creator-visual { min-height:520px; border-radius:24px; }.opportunity-card{left:22px;right:22px;bottom:22px;width:auto}
  .how-section h2,.market-head h2 { font-size:60px; }.how-sides{grid-template-columns:1fr;margin-top:50px}.how-sides article{padding:28px}
  .market-head { display:block; margin-bottom:44px; }.market-head p{margin-top:18px}.gig-list{grid-template-columns:1fr}.gig-card:nth-child(4){grid-column:auto}.gig-card{min-height:300px;padding:26px}.gig-card h3{font-size:38px;margin-top:50px}
  .waitlist-copy h2 { font-size:54px; }.waitlist-copy p{font-size:19px}.signup-form,.success-message{padding:26px 20px}.field-pair{grid-template-columns:1fr}.role-toggle button{font-size:13px}.success-message{min-height:460px}
  .site-footer { min-height:210px; padding:34px 20px; flex-direction:column; justify-content:center; text-align:center; }.site-footer p{margin:0}
}