/* tokenkarma ad creatives — shared design system. Sizes scale with --u (=width/1080). */
:root{
  --bg:#0a0a0b; --accent:#22c55e; --accent2:#4ade80; --orange:#f97316;
  --text:#fafafa; --dim:rgba(255,255,255,.62); --border:rgba(255,255,255,.09);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#0a0a0b}
.creative{
  position:relative; overflow:hidden;
  font-family:'Geist',system-ui,-apple-system,sans-serif; color:var(--text);
  background:radial-gradient(130% 90% at 50% -15%, rgba(34,197,94,.12), transparent 55%), #0a0a0b;
  display:flex; flex-direction:column; justify-content:space-between;
  --pad:calc(var(--u)*64px); padding:var(--pad);
}
.ck-head{display:flex; align-items:center; gap:calc(var(--u)*13px)}
.ck-head .mark{width:calc(var(--u)*44px); height:calc(var(--u)*44px); border-radius:calc(var(--u)*10px); display:block; flex:none}
.ck-head .mark svg, .ck-head .mark img{width:100%; height:100%; display:block; border-radius:inherit}
.ck-word{font-weight:600; letter-spacing:-.02em; font-size:calc(var(--u)*29px); color:#fff}
.eyebrow{font-family:'Geist Mono',ui-monospace,monospace; text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent2); font-weight:500; font-size:calc(var(--u)*18px); margin-bottom:calc(var(--u)*14px)}
.headline{font-weight:700; letter-spacing:-.03em; line-height:1.03; font-size:calc(var(--u)*68px)}
.headline .hl{background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.sub{color:var(--dim); line-height:1.42; font-weight:400; font-size:calc(var(--u)*26px);
  margin-top:calc(var(--u)*18px); max-width:92%}
.cta{display:inline-flex; align-items:center; gap:.45em; background:var(--accent); color:#04130a;
  font-weight:600; border-radius:999px; font-size:calc(var(--u)*25px);
  padding:calc(var(--u)*16px) calc(var(--u)*32px); margin-top:calc(var(--u)*30px); width:max-content}
.cta::after{content:"\2192"}
/* visual */
.shot{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; margin:calc(var(--u)*30px) 0}
.shot img{max-width:100%; max-height:100%; object-fit:contain;
  border-radius:calc(var(--u)*16px); border:1px solid var(--border);
  box-shadow:0 calc(var(--u)*30px) calc(var(--u)*70px) rgba(0,0,0,.5)}
.shot.toast img{border:none; max-width:94%; border-radius:calc(var(--u)*18px);
  box-shadow:0 calc(var(--u)*24px) calc(var(--u)*60px) rgba(0,0,0,.45);
  filter:drop-shadow(0 0 calc(var(--u)*44px) rgba(34,197,94,.20))}
/* story 9:16 — keep content out of top ~14% and bottom ~35% */
.creative.story{padding-top:calc(var(--u)*160px); padding-bottom:calc(var(--u)*580px); justify-content:flex-start}
.creative.story .shot{margin:calc(var(--u)*40px) 0}
/* MSAN visual-only: no overlay copy, product shot fills, brand chip only */
.creative.visual{justify-content:flex-end;
  background:radial-gradient(100% 110% at 78% 0%, rgba(34,197,94,.13), transparent 55%), #0a0a0b}
.creative.visual .shot{position:absolute; inset:calc(var(--u)*44px); margin:0; justify-content:flex-end}
.creative.visual .ck-head{position:relative; z-index:2; align-self:flex-start; width:max-content;
  background:rgba(10,10,11,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:calc(var(--u)*11px) calc(var(--u)*18px); border-radius:999px; border:1px solid var(--border)}
/* EthicalAds micro 240x180 (fixed, no scaling) */
.creative.micro{--u:1; padding:16px; justify-content:space-between;
  background:radial-gradient(120% 110% at 50% 0%, rgba(34,197,94,.16), transparent 60%), #0a0a0b}
.creative.micro .mark{width:26px;height:26px}
.creative.micro .ck-word{font-size:15px}
.creative.micro .m-line{font-size:15px; font-weight:600; line-height:1.22; letter-spacing:-.01em}
.creative.micro .m-line .hl{color:var(--accent2)}
.creative.micro .m-thumb{height:64px; display:flex; align-items:center}
.creative.micro .m-thumb img{max-height:64px; max-width:100%; border-radius:7px; border:1px solid var(--border)}
/* layout: split — copy on top, product UI bleeds off the bottom edge */
.creative.split{justify-content:flex-start}
.creative.split .ck-head{order:1}
.creative.split .body{order:2; margin-top:calc(var(--u)*10px)}
.creative.split .shot{order:3; flex:1; align-items:flex-end; overflow:hidden;
  margin:calc(var(--u)*34px) calc(var(--u)*-64px) calc(var(--u)*-64px)}
.creative.split .shot img{max-height:none; max-width:none; width:94%;
  border-radius:calc(var(--u)*16px) calc(var(--u)*16px) 0 0;
  box-shadow:0 calc(var(--u)*-6px) calc(var(--u)*70px) rgba(0,0,0,.55)}
.creative.split .shot.toast{align-items:center; margin:calc(var(--u)*26px) 0 0; flex:1}
.creative.split .shot.toast img{width:auto; max-width:94%; max-height:100%; border-radius:calc(var(--u)*18px)}
/* layout: bold — type-forward, content anchored to the bottom, logo pinned top */
.creative.bold{justify-content:flex-end}
.creative.bold .ck-head{position:absolute; top:var(--pad); left:var(--pad)}
.creative.bold .shot{flex:none; height:calc(var(--u)*300px); justify-content:flex-start; align-items:center;
  margin:0 0 calc(var(--u)*26px)}
.creative.bold .shot img{max-height:100%}
.creative.bold .headline{font-size:calc(var(--u)*90px); line-height:.99}
.creative.bold .sub{font-size:calc(var(--u)*27px)}