@import url("https://use.typekit.net/kei7aql.css");

:root {
  --cw-blue: #2457c6;
  --cw-blue-dark: #1c47a6;
  --cw-blue-light: #2457c6;
  --cw-blue-tone: rgba(36, 87, 198, 0.35);
  --cw-blue-tint: rgba(36, 87, 198, 0.08);
  --cw-yellow: #ffc73b;
  --cw-yellow-hover: #ffea84;
  --cw-green: #59b78b;
  --cw-error: #e4410d;
  --cw-dark: #242424;
  --cw-bg: #fff;
  --cw-card-bg: #fafafa;
  --cw-text: #000;
  --cw-text-muted: rgba(0, 0, 0, 0.6);
  --cw-border: rgba(0, 0, 0, 0.14);
  --cw-shadow: 0 0 1.1vw rgba(0, 0, 0, 0.08);
  --cw-shadow-hover: 0 0 1.7vw rgba(0, 0, 0, 0.13);
  --cw-radius: .3vw;
  --cw-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

* { box-sizing: border-box; }

body.cw-ugc {
  margin: 0;
  font-family: futura-pt, sans-serif;
  background: var(--cw-bg);
  color: var(--cw-text);
}

a { color: inherit; }

/* ── Header ─────────────────────────────────────────────────────────── */

.cw-ugc-header {
  background: var(--cw-blue);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow 0.25s var(--cw-ease);
}
.cw-ugc-header-scrolled { box-shadow: 0 0 1.2vw rgba(0, 0, 0, 0.18); }
.cw-ugc-header-inner {
  width: 92vw;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.cw-ugc-logo { color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; display: inline-flex; align-items: center; gap: .7vw; }
.cw-ugc-logo img { display: block; height: 2.8vw; width: auto; }
.cw-ugc-logo-tag { color: var(--cw-yellow); font-weight: 700; }
.cw-ugc-nav { display: flex; align-items: center; gap: 18px; font-size: 0.95rem; }
.cw-ugc-nav a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color 0.15s; }
.cw-ugc-nav a:hover { color: #fff; }
.cw-ugc-nav-current { color: var(--cw-yellow); font-weight: 700; }

.cw-ugc-main { width: 92vw; margin: 0 auto; padding: 0 0 5vw; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.cw-ugc-hero {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  align-items: center;
  gap: 3vw;
  padding: 4vw 0 2.5vw;
  position: relative;
  isolation: isolate;
}
.cw-ugc-hero::before {
  content: "";
  position: absolute;
  inset: -4vw -4vw auto;
  height: 34vw;
  background: url("https://cleanwhale.pl/assets/frontend/images/icons/main-bg.svg") center / contain no-repeat;
  opacity: .32;
  z-index: -1;
  pointer-events: none;
}
.cw-ugc-hero-copy { text-align: left; }
.cw-ugc-hero-badge {
  display: inline-flex;
  align-items: center;
  background: var(--cw-blue-tint);
  color: var(--cw-blue-dark);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.cw-ugc-badge-dot {
  width: .42vw;
  height: .42vw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: var(--cw-blue);
  margin-right: .5vw;
}
.cw-ugc-hero h1 { font-size: clamp(2.8rem, 4.6vw, 4.7rem); margin: 0 0 1.2vw; line-height: 1.02; }
.cw-ugc-hero-sub { color: var(--cw-text-muted); width: 38vw; margin: 0 0 1.4vw; line-height: 1.6; font-size: 1.08rem; }
.cw-ugc-hero-sub strong { color: var(--cw-blue); }

.cw-ugc-check-disc {
  width: 1.2vw;
  height: 1.2vw;
  min-width: 17px;
  min-height: 17px;
  border-radius: 50%;
  background: var(--cw-blue);
  color: #fff;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.cw-ugc-check-disc svg { width: 62%; height: 62%; }

.cw-ugc-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.cw-ugc-hero-art {
  position: relative;
  height: 41vw;
  min-height: 530px;
}

/* decorative shapes behind the cards */
.cw-ugc-hero-blob {
  position: absolute;
  top: -1.5vw;
  right: -1vw;
  width: 13vw;
  height: 13vw;
  border-radius: 50%;
  background: var(--cw-blue);
  z-index: 0;
}
.cw-ugc-hero-dots {
  position: absolute;
  top: 11.5vw;
  right: 3.2vw;
  width: 8vw;
  height: 4.6vw;
  z-index: 0;
  background-image: radial-gradient(rgba(36, 87, 198, .4) 1.5px, transparent 1.6px);
  background-size: .95vw .95vw;
}

.cw-ugc-showcase-profile,
.cw-ugc-brief-card {
  position: absolute;
  border-radius: 1vw;
  background: #fff;
  box-shadow: var(--cw-shadow-hover);
}

.cw-ugc-showcase-profile {
  top: 0;
  left: 1vw;
  width: 28vw;
  padding: 1.25vw;
  z-index: 2;
}

.cw-ugc-demo-label {
  position: absolute;
  top: .85vw;
  right: .85vw;
  background: rgba(0, 0, 0, .05);
  color: var(--cw-text-muted);
  border-radius: 10vw;
  padding: .18vw .55vw;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.cw-ugc-profile-head {
  display: grid;
  grid-template-columns: 3.8vw 1fr;
  gap: .85vw;
  align-items: center;
}
.cw-ugc-avatar-wrap { position: relative; display: inline-block; width: 3.8vw; height: 3.8vw; }
.cw-ugc-profile-avatar {
  width: 3.8vw;
  height: 3.8vw;
  object-fit: cover;
  border-radius: 50%;
}
.cw-ugc-avatar-check {
  position: absolute;
  top: -.2vw;
  right: -.25vw;
  width: 1.15vw;
  height: 1.15vw;
  min-width: 16px;
  min-height: 16px;
  border-radius: 50%;
  background: var(--cw-blue);
  color: #fff;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
}
.cw-ugc-avatar-check svg { width: 60%; height: 60%; }
.cw-ugc-profile-head h2 {
  display: flex;
  align-items: center;
  gap: .35vw;
  margin: 0 0 .08vw;
  font-size: 1.05rem;
  line-height: 1.12;
}
.cw-ugc-profile-head p,
.cw-ugc-profile-role {
  margin: 0;
  color: var(--cw-text-muted);
  font-size: .76rem;
  line-height: 1.35;
}
.cw-ugc-verified-mark {
  color: var(--cw-blue);
  display: inline-flex;
  flex: 0 0 auto;
}
.cw-ugc-verified-mark svg { width: 1.15rem; height: 1.15rem; }
.cw-ugc-profile-tags,
.cw-ugc-social-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .45vw;
  margin-top: .8vw;
}
.cw-ugc-profile-tags span {
  background: var(--cw-blue-tint);
  color: var(--cw-blue-dark);
  border-radius: 10vw;
  padding: .28vw .65vw;
  font-size: .66rem;
  font-weight: 700;
}
.cw-ugc-social-metrics span {
  display: inline-flex;
  align-items: center;
  gap: .3vw;
  background: #fff;
  border: 1px solid var(--cw-border);
  border-radius: 10vw;
  padding: .38vw .65vw;
  color: var(--cw-text-muted);
  font-size: .7rem;
}
.cw-ugc-social-metrics svg { width: .95rem; height: .95rem; color: var(--cw-blue); }
.cw-ugc-social-metrics strong { color: var(--cw-text); font-weight: 700; }
.cw-ugc-profile-role { display: inline-flex; align-items: center; gap: .3vw; margin-top: .15vw; }
.cw-ugc-profile-role svg { width: .8rem; height: .8rem; }
.cw-ugc-verification-chip {
  display: inline-flex;
  align-items: center;
  gap: .35vw;
  background: var(--cw-blue-tint);
  color: var(--cw-blue-dark);
  border-radius: 10vw;
  padding: .3vw .7vw;
  font-size: .68rem;
  font-weight: 700;
  margin: .75vw 0 0;
}
.cw-ugc-content-frame {
  height: 17vw;
  margin: .9vw 0 .7vw;
  position: relative;
  overflow: hidden;
  border-radius: var(--cw-radius);
}
.cw-ugc-content-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cw-ugc-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.8vw;
  height: 2.8vw;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cw-blue);
  background: rgba(255,255,255,.92);
  box-shadow: var(--cw-shadow);
}
.cw-ugc-play svg { width: 1.4vw; height: 1.4vw; }
.cw-ugc-duration {
  position: absolute;
  right: .55vw;
  bottom: .55vw;
  padding: .18vw .42vw;
  border-radius: 10vw;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
}
.cw-ugc-showcase-profile blockquote {
  margin: 0;
  font-size: .77rem;
  line-height: 1.45;
  color: var(--cw-text-muted);
}
.cw-ugc-content-status {
  display: flex;
  align-items: center;
  gap: .38vw;
  margin-top: .65vw;
  color: var(--cw-blue-dark);
  font-size: .67rem;
  font-weight: 700;
}
.cw-ugc-brief-card {
  top: 7.8vw;
  right: 0;
  width: 19vw;
  padding: 1.25vw;
  z-index: 3;
}
.cw-ugc-brief-title {
  display: grid;
  grid-template-columns: 3.4vw 1fr;
  gap: .7vw;
  align-items: center;
  margin-bottom: 1vw;
}
.cw-ugc-brief-title img {
  width: 3.4vw;
  height: 3.4vw;
  border-radius: var(--cw-radius);
  object-fit: cover;
}
.cw-ugc-brief-title span,
.cw-ugc-brief-pay span {
  display: block;
  color: var(--cw-text-muted);
  font-size: .68rem;
}
.cw-ugc-brief-title h2 { margin: .05vw 0 0; font-size: 1rem; }
.cw-ugc-brief-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75vw;
}
.cw-ugc-brief-card li {
  display: flex;
  align-items: flex-start;
  gap: .5vw;
  padding-bottom: .65vw;
  border-bottom: 1px solid var(--cw-border);
  font-size: .72rem;
  line-height: 1.35;
}
.cw-ugc-brief-card li:last-child { border-bottom: none; }
.cw-ugc-brief-card li .cw-ugc-check { color: var(--cw-blue); margin-top: .05vw; }
.cw-ugc-brief-pay { margin: 1vw 0; }
.cw-ugc-brief-pay strong { display: block; margin-top: .1vw; color: var(--cw-blue-dark); font-size: 1.05rem; }
.cw-ugc-brief-card .cw-ugc-btn { width: 100%; padding: .72vw .9vw; text-align: center; font-size: .76rem; }

@media (max-width: 1025px) {
  .cw-ugc-hero { grid-template-columns: .88fr 1.12fr; gap: 2vw; }
  .cw-ugc-showcase-profile { width: 31vw; left: 0; }
  .cw-ugc-brief-card { width: 21vw; }
  .cw-ugc-content-frame { height: 18vw; }
}

@media (max-width: 760px) {
  :root { --cw-radius: 1.2vw; }
  .cw-ugc-hero { grid-template-columns: 1fr; padding-top: 8vw; gap: 8vw; }
  .cw-ugc-hero-copy { text-align: left; }
  .cw-ugc-hero h1 { font-size: 12.2vw; }
  .cw-ugc-hero-sub { width: 100%; font-size: 1rem; }
  .cw-ugc-hero-ctas { display: grid; grid-template-columns: 1fr; }
  .cw-ugc-hero-ctas .cw-ugc-btn { text-align: center; }
  .cw-ugc-hero-art { height: auto; min-height: 0; display: grid; gap: 4vw; }
  .cw-ugc-showcase-profile,
  .cw-ugc-brief-card { position: relative; inset: auto; width: 100%; padding: 4.5vw; }
  .cw-ugc-demo-label { padding: 1.3vw 3vw; margin-bottom: 3vw; }
  .cw-ugc-profile-head { grid-template-columns: 15vw 1fr; gap: 3vw; }
  .cw-ugc-profile-avatar { width: 15vw; height: 15vw; }
  .cw-ugc-profile-head h2 { font-size: 1.08rem; gap: 1.5vw; }
  .cw-ugc-profile-tags, .cw-ugc-social-metrics { gap: 2vw; margin-top: 3vw; }
  .cw-ugc-profile-tags span { padding: 1.2vw 2.5vw; }
  .cw-ugc-social-metrics span { gap: 1.2vw; padding: 1.5vw 2.5vw; }
  .cw-ugc-content-frame { height: 67vw; margin: 4vw 0 3vw; }
  .cw-ugc-play { width: 12vw; height: 12vw; }
  .cw-ugc-play svg { width: 6vw; height: 6vw; }
  .cw-ugc-duration { right: 2vw; bottom: 2vw; padding: .8vw 1.8vw; }
  .cw-ugc-showcase-profile blockquote { font-size: .88rem; }
  .cw-ugc-content-status { gap: 1.5vw; margin-top: 2.5vw; }
  .cw-ugc-brief-title { grid-template-columns: 15vw 1fr; gap: 3vw; margin-bottom: 4vw; }
  .cw-ugc-brief-title img { width: 15vw; height: 15vw; }
  .cw-ugc-brief-card ul { gap: 2.5vw; }
  .cw-ugc-brief-card li { gap: 2vw; padding-bottom: 2.5vw; font-size: .82rem; }
  .cw-ugc-brief-pay { margin: 4vw 0; }
  .cw-ugc-brief-card .cw-ugc-btn { padding: 3.4vw 4vw; font-size: .95rem; }
  .cw-ugc-logo img { height: 9vw; }
}

/* ── Trust pill ─────────────────────────────────────────────────────── */

.cw-ugc-check { width: 14px; height: 14px; flex-shrink: 0; }
.cw-ugc-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cw-blue);
  background: var(--cw-card-bg);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0 0 4px;
  box-shadow: var(--cw-shadow);
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.cw-ugc-btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s var(--cw-ease), transform 0.15s var(--cw-ease), border-color 0.15s, opacity 0.15s;
  font-family: inherit;
}
/* A class-based `display` rule otherwise beats the browser's own [hidden]
   UA style at equal specificity — any .cw-ugc-btn[hidden] would render
   visible without this. */
.cw-ugc-btn[hidden] { display: none; }
.cw-ugc-btn-primary { background: var(--cw-blue); color: #fff; }
.cw-ugc-btn-primary:hover { background: var(--cw-blue-dark); transform: translateY(-1px); }
.cw-ugc-btn-secondary { background: var(--cw-green); color: #000; }
.cw-ugc-btn-secondary:hover { opacity: .86; transform: translateY(-1px); }
.cw-ugc-btn-ghost { background: transparent; color: var(--cw-text-muted); font-weight: 600; padding: 13px 16px; border-radius: 999px; font-size: 0.95rem; }
.cw-ugc-btn-ghost:hover { color: var(--cw-text); }
.cw-ugc-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ── Steps / formats ────────────────────────────────────────────────── */

.cw-ugc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 1.5vw;
  margin: 0 0 1.2vw;
  border-radius: var(--cw-radius);
  background: var(--cw-card-bg);
  box-shadow: var(--cw-shadow);
}
.cw-ugc-step {
  text-align: left;
  padding: 1vw 1.5vw;
  display: grid;
  grid-template-columns: 4vw 1fr;
  column-gap: 1vw;
  align-items: start;
}
.cw-ugc-step + .cw-ugc-step { border-left: 1px solid var(--cw-border); }
.cw-ugc-step-icon {
  width: 4vw; height: 4vw; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--cw-radius);
  background: var(--cw-blue-tint);
  color: var(--cw-blue);
  grid-row: 1 / span 2;
}
.cw-ugc-step-icon svg { width: 2vw; height: 2vw; }
.cw-ugc-step h3 { margin: 0 0 8px; font-size: 1.02rem; }
.cw-ugc-step p { margin: 0; color: var(--cw-text-muted); font-size: 0.88rem; line-height: 1.5; }

.cw-ugc-formats {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 0 44px;
}
.cw-ugc-format {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  box-shadow: var(--cw-shadow);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: box-shadow 0.15s, transform 0.15s var(--cw-ease);
}
.cw-ugc-format:hover { box-shadow: var(--cw-shadow-hover); transform: translateY(-1px); }
.cw-ugc-format-icon { display: flex; color: var(--cw-blue); }
.cw-ugc-format-icon svg { width: 18px; height: 18px; }

/* ── Creators grid ──────────────────────────────────────────────────── */

.cw-ugc-creators-section { text-align: center; padding: 20px 0 20px; }
.cw-ugc-creators-section h2 { font-size: 1.6rem; margin: 0 0 8px; }
.cw-ugc-creators-sub { color: var(--cw-text-muted); margin: 0 0 28px; }

.cw-ugc-demo-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(920px, 100%);
  margin: 0 auto 24px;
  padding: 14px 18px;
  background: rgba(255, 199, 59, .18);
  color: var(--cw-text);
  border-left: 4px solid var(--cw-yellow);
  text-align: left;
  line-height: 1.5;
  font-size: .88rem;
}
.cw-ugc-demo-notice svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--cw-blue-dark); margin-top: 1px; }
.cw-ugc-demo-notice strong { display: block; margin-bottom: 2px; }

.cw-ugc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2vw;
  text-align: left;
}

.cw-ugc-card {
  background: var(--cw-card-bg);
  border-radius: var(--cw-radius);
  padding: 1.2vw;
  display: flex;
  gap: .9vw;
  min-height: 9vw;
  align-items: flex-start;
  transition: transform 0.2s var(--cw-ease), box-shadow 0.2s var(--cw-ease);
  box-shadow: var(--cw-shadow);
}
.cw-ugc-card-demo-profile { position: relative; padding-top: 3vw; }
.cw-ugc-card-demo {
  position: absolute;
  top: .8vw;
  left: 1.2vw;
  right: 1.2vw;
  color: var(--cw-blue-dark);
  font-size: .7rem;
  font-weight: 800;
}
.cw-ugc-card:hover { transform: translateY(-3px); box-shadow: var(--cw-shadow-hover); }

.cw-ugc-card-photo {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.cw-ugc-card-photo-sm { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cw-ugc-card-photo[src*="creator-placeholder.svg"],
.cw-ugc-card-photo-sm[src*="creator-placeholder.svg"] {
  background: var(--cw-blue-tint);
  object-fit: contain;
}
.cw-ugc-card-photo[src*="creator-placeholder.svg"] { padding: .65vw; }
.cw-ugc-card-photo-sm[src*="creator-placeholder.svg"] { padding: 6px; }
.cw-ugc-card-body { flex: 1; min-width: 0; }
.cw-ugc-card-name { margin: 0 0 2px; font-size: 1rem; }
.cw-ugc-card-city { margin: 0 0 4px; color: var(--cw-text-muted); font-size: 0.82rem; }
.cw-ugc-card-hobby { margin: 0 0 8px; color: var(--cw-text-muted); font-size: 0.8rem; }
.cw-ugc-card-availability { margin: 0 0 8px; color: var(--cw-text-muted); font-size: 0.78rem; font-weight: 600; }
.cw-ugc-card-meta { margin: 8px 0 0; color: var(--cw-text-muted); font-size: 0.78rem; line-height: 1.5; }
.cw-ugc-platform-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cw-ugc-platform-ic { display: inline-flex; align-items: center; gap: 4px; color: var(--cw-blue-dark); }
.cw-ugc-platform-ic svg { width: 17px; height: 17px; display: block; }
.cw-ugc-platform-ic em { font-style: normal; font-size: 0.74rem; font-weight: 700; color: var(--cw-text-muted); }

/* ── multi-select on the creator directory ──────────────────────────────── */
.cw-ugc-card-selectable { position: relative; cursor: pointer; user-select: none; }
/* keep the first text line clear of the absolutely-positioned check badge */
.cw-ugc-card-selectable .cw-ugc-card-name { padding-right: 30px; }
.cw-ugc-card-selectable:focus-visible { outline: 2px solid var(--cw-blue); outline-offset: 2px; }
.cw-ugc-select-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cw-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.18s var(--cw-ease), transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.cw-ugc-select-badge svg { width: 14px; height: 14px; }
.cw-ugc-card-selected { outline: .2vw solid var(--cw-blue); box-shadow: var(--cw-shadow-hover); }
.cw-ugc-card-selected .cw-ugc-select-badge { opacity: 1; transform: scale(1); }
@keyframes cwUgcCardPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.cw-ugc-card-pop { animation: cwUgcCardPop 0.28s var(--cw-ease); }

.cw-ugc-selectbar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 90px);
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--cw-card-bg);
  border-radius: 999px;
  padding: 10px 12px 10px 22px;
  box-shadow: 0 0 1.8vw rgba(0, 0, 0, 0.18);
  z-index: 60;
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.2s var(--cw-ease);
}
.cw-ugc-selectbar[hidden] { display: none; }
.cw-ugc-selectbar-in { transform: translate(-50%, 0); opacity: 1; }
.cw-ugc-selectbar span { font-weight: 700; white-space: nowrap; }
.cw-ugc-selectbar-actions { display: flex; gap: 8px; }
.cw-ugc-btn-ghost { background: none; border: none; color: var(--cw-text-muted); font-weight: 700; cursor: pointer; padding: 10px 12px; }
.cw-ugc-btn-ghost:hover { color: var(--cw-text); }
@media (max-width: 760px) {
  .cw-ugc-selectbar { flex-direction: column; gap: 8px; border-radius: 20px; padding: 12px 16px; width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .cw-ugc-select-badge, .cw-ugc-selectbar { transition: none; }
  .cw-ugc-card-pop { animation: none; }
}
.cw-ugc-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-ugc-tag {
  background: var(--cw-blue-tint);
  color: var(--cw-blue-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
a.cw-ugc-tag { text-decoration: none; }
.cw-ugc-tag-current { background: var(--cw-yellow); color: #000; }

.cw-ugc-round-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

.cw-ugc-inline-confirm {
  margin-top: 10px;
  padding: 12px 16px;
  border: 1.5px solid var(--cw-border);
  border-radius: 12px;
  background: var(--cw-card-bg);
  width: 35vw;
}
.cw-ugc-inline-confirm p { margin: 0 0 10px; font-size: 0.9rem; }
.cw-ugc-inline-confirm[hidden] { display: none; }

.cw-ugc-relaunch-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--cw-blue-tone);
  background: var(--cw-blue-tint);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.cw-ugc-relaunch-banner[hidden] { display: none; }

/* Skeleton loader — replaces plain "Laddar…" text while creators/campaigns fetch */
.cw-ugc-loading {
  text-align: center; color: var(--cw-text-muted); padding: 10px 0;
}
.cw-ugc-loading::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 8px;
  border-radius: 50%;
  border: 2px solid var(--cw-border);
  border-top-color: var(--cw-blue);
  vertical-align: middle;
  animation: cwUgcSpin 0.7s linear infinite;
}

@keyframes cwUgcSpin { to { transform: rotate(360deg); } }

/* ── Footer ─────────────────────────────────────────────────────────── */

.cw-ugc-footer {
  width: 100%;
  margin: 20px auto 0;
  padding: 3vw 4vw;
  text-align: center;
  color: rgba(255, 255, 255, 0.68);
  background: var(--cw-dark);
  font-size: 0.85rem;
  line-height: 1.6;
}
.cw-ugc-footer a { color: #fff; text-decoration: none; }
.cw-ugc-footer .cw-ugc-trust-pill { margin-bottom: 8px; }
.cw-ugc-footer-logo { display: block; height: 3.4vw; width: auto; margin: 0 auto 1.2vw; }

@media (max-width: 760px) {
  .cw-ugc-steps { grid-template-columns: 1fr; gap: 0; padding: 3vw; }
  .cw-ugc-step { grid-template-columns: 14vw 1fr; gap: 3vw; padding: 4vw 2vw; }
  .cw-ugc-step + .cw-ugc-step { border-left: none; border-top: 1px solid var(--cw-border); }
  .cw-ugc-step-icon { width: 14vw; height: 14vw; }
  .cw-ugc-step-icon svg { width: 7vw; height: 7vw; }
  .cw-ugc-grid { grid-template-columns: 1fr; gap: 4vw; }
  .cw-ugc-card { padding: 4vw; gap: 4vw; min-height: 30vw; }
  .cw-ugc-card-photo { width: 18vw; height: 18vw; }
  .cw-ugc-card-photo[src*="creator-placeholder.svg"] { padding: 2.8vw; }
  .cw-ugc-footer-logo { height: 13vw; margin-bottom: 4vw; }
}

/* ── Forms (creators.html / foretag.html / wizard) ─────────────────── */

.cw-ugc-form-main { width: 54vw; }
.cw-ugc-form-hero { text-align: center; padding: 40px 0 24px; }
.cw-ugc-form-hero h1 { font-size: 1.9rem; margin: 0 0 10px; }

.cw-ugc-form {
  background: var(--cw-card-bg);
  border-radius: var(--cw-radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--cw-shadow);
}
.cw-ugc-form label,
.cw-ugc-wizard label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--cw-text-muted);
}
.cw-ugc-form input[type="text"],
.cw-ugc-form input[type="email"],
.cw-ugc-form input[type="tel"],
.cw-ugc-form input[type="url"],
.cw-ugc-form select,
.cw-ugc-form textarea,
.cw-ugc-wizard input[type="text"],
.cw-ugc-wizard input[type="email"],
.cw-ugc-wizard input[type="tel"],
.cw-ugc-wizard input[type="url"],
.cw-ugc-wizard input[type="number"],
.cw-ugc-wizard input[type="date"],
.cw-ugc-wizard select,
.cw-ugc-wizard textarea {
  border: 1px solid var(--cw-border);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--cw-text);
  background: var(--cw-bg);
  transition: border-color 0.15s;
}
.cw-ugc-form input:focus, .cw-ugc-form select:focus, .cw-ugc-form textarea:focus,
.cw-ugc-wizard input:focus, .cw-ugc-wizard select:focus, .cw-ugc-wizard textarea:focus {
  outline: none;
  border-color: var(--cw-blue);
}
.cw-ugc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-ugc-field-hint { font-weight: 400; color: var(--cw-text-muted); font-size: 0.8rem; }

.cw-ugc-locations { border: none; padding: 0; margin: 0; }
.cw-ugc-locations legend { font-size: 0.85rem; font-weight: 600; color: var(--cw-text-muted); padding: 0 0 10px; }

.cw-ugc-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--cw-text);
  flex-direction: row;
  cursor: pointer;
}
.cw-ugc-checkbox input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--cw-blue); }
.cw-ugc-checkbox-all {
  background: var(--cw-blue-tint);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.cw-ugc-location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.cw-ugc-optional-tag { font-weight: 400; color: var(--cw-text-muted); }
.cw-ugc-follower-inputs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.cw-ugc-follower-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--cw-text-muted);
}
.cw-ugc-follower-input input {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--cw-text);
  background: var(--cw-card-bg);
}

.cw-ugc-availability-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cw-ugc-pill-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--cw-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
}
.cw-ugc-pill-radio input { accent-color: var(--cw-blue); }
.cw-ugc-pill-radio:has(input:checked) { border-color: var(--cw-blue); background: var(--cw-blue-tint); color: var(--cw-blue-dark); }

/* Quick availability strip + profile nudge on the creator dashboard */
.cw-ugc-profile-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  background: var(--cw-card-bg);
  margin: 0 0 24px;
  font-size: 0.88rem;
}
.cw-ugc-profile-strip a { color: var(--cw-blue-dark); font-weight: 700; text-decoration: none; }
.cw-ugc-profile-strip-quick { display: inline-flex; gap: 6px; }
.cw-ugc-profile-strip-quick button {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--cw-border);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--cw-text-muted);
}
.cw-ugc-profile-strip-quick button.is-active { border-color: var(--cw-blue); background: var(--cw-blue-tint); color: var(--cw-blue-dark); }

.cw-ugc-nudge-banner[hidden] { display: none; }
.cw-ugc-nudge-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1.5px solid var(--cw-yellow);
  background: rgba(255, 199, 59, .18);
  border-radius: 12px;
  margin: 0 0 20px;
  font-size: 0.9rem;
}
.cw-ugc-nudge-banner a { color: var(--cw-blue-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.cw-ugc-nudge-banner button { background: none; border: none; color: var(--cw-text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px; }

/* Stripe Connect onboarding — three escalating states */
.cw-ugc-connect-line { font-size: 0.88rem; color: var(--cw-text-muted); margin: 0 0 20px; }
.cw-ugc-connect-line a { color: var(--cw-blue-dark); font-weight: 700; text-decoration: none; }
.cw-ugc-connect-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  margin: 0 0 20px;
}
.cw-ugc-connect-banner-urgent { border: 1.5px solid var(--cw-yellow); background: rgba(255, 199, 59, .18); }
.cw-ugc-connect-banner-progress { border: 1.5px solid var(--cw-blue-tone); background: var(--cw-blue-tint); }
.cw-ugc-connect-banner h3 { margin: 0 0 4px; font-size: 1rem; }
.cw-ugc-connect-banner p { margin: 0; font-size: 0.88rem; color: var(--cw-text-muted); }
.cw-ugc-connect-status-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 20px 0; }

.cw-ugc-form-submit { width: 100%; text-align: center; border: none; cursor: pointer; margin-top: 6px; }
.cw-ugc-form-status { text-align: center; font-weight: 600; font-size: 0.9rem; }
.cw-ugc-form-status-ok { color: var(--cw-text); }
.cw-ugc-form-status-error { color: var(--cw-error); }

@media (max-width: 760px) {
  .cw-ugc-form-main { width: 92vw; }
  .cw-ugc-form-row { grid-template-columns: 1fr; }
}

/* ── Campaign wizard (foretag.html) ────────────────────────────────── */

.cw-ugc-wizard {
  background: var(--cw-card-bg);
  border-radius: var(--cw-radius);
  padding: 28px;
  box-shadow: var(--cw-shadow);
}
.cw-ugc-wizard-progress { height: 6px; border-radius: 999px; background: var(--cw-border); overflow: hidden; margin-bottom: 26px; }
.cw-ugc-wizard-progress-bar { height: 100%; background: var(--cw-blue); border-radius: 999px; transition: width 0.3s var(--cw-ease); }

.cw-ugc-wizard-step { display: none; flex-direction: column; gap: 16px; animation: cwUgcStepIn 0.3s var(--cw-ease); }
.cw-ugc-wizard-step-active { display: flex; }
.cw-ugc-wizard-step h2 { margin: 0 0 4px; font-size: 1.2rem; }

@keyframes cwUgcStepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.cw-ugc-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--cw-border);
}
.cw-ugc-wizard-nav button { border: none; cursor: pointer; }

.cw-ugc-budget-total { font-size: 1rem; color: var(--cw-text); }
.cw-ugc-review-summary {
  background: var(--cw-bg);
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  padding: 16px 18px;
  line-height: 1.7;
}

/* ── Campaign marketplace (kampanjer) ──────────────────────────────── */

.cw-ugc-page-hero { text-align: center; padding: 3.2vw 0 2vw; }
.cw-ugc-page-hero h1 { font-size: clamp(2.3rem, 3.6vw, 4rem); margin: 0 0 .7vw; }
.cw-ugc-page-hero-left { text-align: left; }
.cw-ugc-page-hero-left .cw-ugc-hero-sub { margin-left: 0; }

.cw-ugc-filterbar {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr) auto;
  gap: .8vw;
  margin-bottom: 2vw;
  padding: 1vw;
  border-radius: var(--cw-radius);
  background: var(--cw-card-bg);
  box-shadow: var(--cw-shadow);
}
.cw-ugc-filterbar select,
.cw-ugc-filterbar input {
  border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius);
  padding: .8vw 1vw;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--cw-card-bg);
  color: var(--cw-text);
}

@media (max-width: 1025px) {
  .cw-ugc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cw-ugc-header-inner { padding-left: 0; padding-right: 0; }
  .cw-ugc-nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; font-size: .82rem; }
  .cw-ugc-nav a { text-align: center; padding: 1.5vw; }
  .cw-ugc-page-hero { padding: 9vw 0 6vw; }
  .cw-ugc-filterbar { grid-template-columns: 1fr; gap: 2.5vw; padding: 3vw; }
  .cw-ugc-filterbar select, .cw-ugc-filterbar input { padding: 3.2vw; }
  .cw-ugc-card-demo-profile { padding-top: 11vw; }
  .cw-ugc-card-demo { top: 3vw; left: 4vw; right: 4vw; }
  .cw-ugc-demo-notice { margin-bottom: 5vw; padding: 3.5vw 4vw; font-size: .84rem; }
}

.cw-ugc-campaign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cw-ugc-campaign-card {
  display: block;
  background: var(--cw-card-bg);
  border-radius: var(--cw-radius);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--cw-shadow);
  transition: transform 0.2s var(--cw-ease), box-shadow 0.2s var(--cw-ease);
}
.cw-ugc-campaign-card:hover { transform: translateY(-3px); box-shadow: var(--cw-shadow-hover); }
.cw-ugc-campaign-card h3 { margin: 4px 0 8px; font-size: 1.05rem; }
.cw-ugc-campaign-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cw-ugc-campaign-brief { color: var(--cw-text-muted); font-size: 0.88rem; line-height: 1.5; margin: 0 0 12px; }

.cw-ugc-pill {
  display: inline-block;
  background: var(--cw-blue-tint);
  color: var(--cw-blue-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.cw-ugc-pill-type { background: var(--cw-blue-tint); color: var(--cw-blue-dark); }
.cw-ugc-price-pill {
  background: var(--cw-yellow);
  color: #000;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.cw-ugc-pill-status-draft { background: var(--cw-border); color: var(--cw-text-muted); }
.cw-ugc-pill-status-pending_payment { background: rgba(255, 199, 59, .18); color: #000; }
.cw-ugc-pill-status-open { background: var(--cw-blue-tint); color: #000; }
.cw-ugc-pill-status-in_progress { background: var(--cw-blue-tint); color: var(--cw-blue-dark); }
.cw-ugc-pill-status-completed { background: var(--cw-blue-tint); color: #000; }
.cw-ugc-pill-status-cancelled { background: rgba(228, 65, 13, .08); color: var(--cw-error); }

.cw-ugc-empty {
  text-align: center;
  padding: 48px 24px;
  border: 1.5px dashed var(--cw-border);
  border-radius: 16px;
  color: var(--cw-text-muted);
}
.cw-ugc-empty p { margin: 0 0 16px; }

/* ── Campaign detail ────────────────────────────────────────────────── */

.cw-ugc-detail-main { width: 62vw; }
.cw-ugc-back-link { display: inline-block; color: var(--cw-blue); text-decoration: none; font-weight: 600; font-size: 0.88rem; margin-bottom: 16px; }
.cw-ugc-back-link:hover { text-decoration: underline; }
.cw-ugc-detail-card {
  background: var(--cw-card-bg);
  border-radius: var(--cw-radius);
  padding: 28px;
  box-shadow: var(--cw-shadow);
}
.cw-ugc-detail-card h1 { font-size: 1.6rem; margin: 12px 0; }
.cw-ugc-campaign-full-brief { line-height: 1.7; }
.cw-ugc-detail-meta { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 14px; color: var(--cw-text-muted); font-size: 0.9rem; }
.cw-ugc-status-note { color: var(--cw-text-muted); font-size: 0.9rem; }
.cw-ugc-status-note a { color: var(--cw-blue); }

/* ── Dashboards ─────────────────────────────────────────────────────── */

.cw-ugc-dashboard { padding-top: 20px; }
.cw-ugc-dashboard h2 { font-size: 1.25rem; margin: 32px 0 16px; }

.cw-ugc-order-list, .cw-ugc-campaign-manage-list { display: flex; flex-direction: column; gap: 14px; }
.cw-ugc-order-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--cw-card-bg);
  border-radius: var(--cw-radius);
  padding: 18px 20px;
  box-shadow: var(--cw-shadow);
}
.cw-ugc-order-status { margin-top: 4px; font-size: 0.85rem; color: var(--cw-text-muted); }
.cw-ugc-review-note { margin-top: 6px; font-size: 0.85rem; color: var(--cw-text-muted); font-style: italic; }

.cw-ugc-submit-form { display: flex; flex-direction: column; gap: 8px; min-width: 260px; flex: 1; }
.cw-ugc-submit-form input, .cw-ugc-submit-form textarea {
  border: 1px solid var(--cw-border);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--cw-bg);
  color: var(--cw-text);
}
.cw-ugc-submit-form button { align-self: flex-start; border: none; cursor: pointer; }

.cw-ugc-applicant-card { display: flex; gap: 14px; }
.cw-ugc-applicant-body { flex: 1; }
.cw-ugc-review-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cw-ugc-review-actions button { border: none; cursor: pointer; }

.cw-ugc-invite-actions { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-start; }
.cw-ugc-invite-actions button { border: none; cursor: pointer; }

.cw-ugc-billing-details {
  background: var(--cw-card-bg);
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 24px;
}
.cw-ugc-billing-details summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; }
.cw-ugc-billing-details form { margin-top: 14px; width: 40vw; }

.cw-ugc-review-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; width: 28vw; }
.cw-ugc-review-form[hidden] { display: none; }
.cw-ugc-review-form textarea {
  padding: 8px 10px;
  border: 1px solid var(--cw-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--cw-bg);
  color: var(--cw-text);
}
.cw-ugc-review-form button[type="submit"] { align-self: flex-start; border: none; cursor: pointer; }
.cw-ugc-star-picker { display: flex; gap: 4px; }
.cw-ugc-star { background: none; border: none; cursor: pointer; padding: 2px; color: var(--cw-border); }
.cw-ugc-star svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.cw-ugc-star.is-filled { color: var(--cw-yellow); }

.cw-ugc-campaign-actions { margin-top: 12px; }

@media (max-width: 760px) {
  .cw-ugc-order-row { flex-direction: column; }
  .cw-ugc-detail-main,
  .cw-ugc-billing-details form,
  .cw-ugc-review-form { width: 92vw; }
}

/* ── Shortlist step (campaign wizard) ──────────────────────────────── */

.cw-ugc-shortlist-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  font-size: 0.88rem;
}
.cw-ugc-shortlist-controls[hidden] { display: none; }
.cw-ugc-link-btn {
  background: none;
  border: none;
  color: var(--cw-blue-dark);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  font-size: 0.88rem;
}
.cw-ugc-shortlist-total { margin-left: auto; font-weight: 700; color: var(--cw-text); }

.cw-ugc-shortlist-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cw-ugc-shortlist-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  background: var(--cw-card-bg);
}
.cw-ugc-shortlist-check { flex-shrink: 0; }
.cw-ugc-shortlist-info { flex: 1; min-width: 0; }
.cw-ugc-shortlist-meta { font-size: 0.82rem; color: var(--cw-text-muted); margin-top: 2px; }
.cw-ugc-shortlist-match { font-size: 0.78rem; color: var(--cw-text-muted); font-weight: 700; margin-top: 2px; }
.cw-ugc-rating-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; font-weight: 700; color: var(--cw-text-muted); }
.cw-ugc-rating-chip svg { width: 12px; height: 12px; fill: var(--cw-yellow); }
.cw-ugc-shortlist-search { margin-top: 8px; }
.cw-ugc-shortlist-search > label { display: block; margin-bottom: 10px; }
.cw-ugc-shortlist-search input { width: 27vw; }
.cw-ugc-review-creators { color: var(--cw-text-muted); font-size: 0.88rem; }

/* ── Admin pages ────────────────────────────────────────────────────── */

.cw-ugc-dashboard .cw-ugc-card { flex-direction: column; align-items: flex-start; }

/* ── Chat widget ("Kit") ────────────────────────────────────────────── */

.cw-ugc-chat-launcher {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cw-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 1.4vw rgba(0, 0, 0, 0.2);
  z-index: 50;
  transition: transform 0.2s var(--cw-ease);
}
.cw-ugc-chat-launcher:hover { transform: scale(1.06); }

.cw-ugc-mascot { width: 26px; height: 26px; flex-shrink: 0; }
.cw-ugc-chat-head span { display: inline-flex; align-items: center; gap: 6px; }
.cw-ugc-chat-head .cw-ugc-mascot { width: 20px; height: 20px; }

.cw-ugc-chat-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: min(340px, calc(100vw - 32px));
  height: 460px;
  height: min(460px, calc(100vh - 140px));
  background: var(--cw-card-bg);
  border-radius: var(--cw-radius);
  box-shadow: 0 0 2.4vw rgba(0, 0, 0, 0.22);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s var(--cw-ease), transform 0.2s var(--cw-ease);
}
.cw-ugc-chat-panel.cw-ugc-chat-open { display: flex; opacity: 1; transform: none; }

.cw-ugc-chat-head {
  background: var(--cw-blue);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.cw-ugc-chat-close { background: none; border: none; color: #fff; font-size: 1rem; cursor: pointer; opacity: 0.85; }
.cw-ugc-chat-close:hover { opacity: 1; }

.cw-ugc-chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cw-ugc-chat-msg {
  width: fit-content;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  animation: cwUgcMsgIn 0.2s var(--cw-ease);
}
@keyframes cwUgcMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cw-ugc-chat-msg-bot { align-self: flex-start; background: var(--cw-bg); color: var(--cw-text); border-bottom-left-radius: 4px; }
.cw-ugc-chat-msg-user { align-self: flex-end; background: var(--cw-blue); color: #fff; border-bottom-right-radius: 4px; }

.cw-ugc-typing { display: flex; gap: 4px; padding: 12px 14px; }
.cw-ugc-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cw-text-muted);
  animation: cwUgcTyping 1s infinite ease-in-out;
}
.cw-ugc-typing span:nth-child(2) { animation-delay: 0.15s; }
.cw-ugc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cwUgcTyping { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.cw-ugc-chat-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.cw-ugc-chip {
  border: 1.5px solid var(--cw-blue);
  color: var(--cw-blue);
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cw-ugc-chip:hover { background: var(--cw-blue); color: #fff; }

.cw-ugc-chat-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--cw-border); }
.cw-ugc-chat-input-row input {
  flex: 1;
  border: 1px solid var(--cw-border);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--cw-bg);
  color: var(--cw-text);
}
.cw-ugc-chat-input-row input:focus { outline: none; border-color: var(--cw-blue); }
.cw-ugc-chat-input-row button {
  border: none;
  background: var(--cw-blue);
  color: #fff;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.cw-ugc-chat-use-draft { display: block; margin-top: 4px; border: none; cursor: pointer; align-self: flex-start; }
.cw-ugc-chat-match-card {
  display: block;
  background: var(--cw-bg);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cw-blue-dark);
  text-decoration: none;
}
.cw-ugc-chat-match-card:hover { box-shadow: var(--cw-shadow); }

@media (max-width: 760px) {
  .cw-ugc-chat-panel { right: 16px; bottom: 84px; height: calc(100vh - 120px); }
  .cw-ugc-chat-launcher { right: 16px; bottom: 16px; }
}

/* ── Motion: scroll reveal (reveal.js) ─────────────────────────────── */

.cw-ugc-reveal { opacity: 1; transform: none; transition: opacity 0.5s var(--cw-ease), transform 0.5s var(--cw-ease); }
.cw-ugc-reveal.cw-ugc-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cw-ugc-reveal { opacity: 1; transform: none; transition: none; }
  .cw-ugc-wizard-step, .cw-ugc-chat-msg, .cw-ugc-chat-panel, .cw-ugc-card, .cw-ugc-campaign-card, .cw-ugc-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Admin panel ────────────────────────────────────────────────────── */

.cw-ugc-admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 28px;
  border-bottom: 1px solid var(--cw-border);
  padding-bottom: 12px;
}
.cw-ugc-admin-nav a {
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--cw-text-muted);
  font-weight: 600;
  font-size: 0.92rem;
}
.cw-ugc-admin-nav a:hover { color: var(--cw-blue-dark); background: var(--cw-blue-tint); }
.cw-ugc-admin-nav a.is-active { background: var(--cw-blue); color: #fff; }

.cw-ugc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}
.cw-ugc-stat {
  background: var(--cw-card-bg);
  border-radius: var(--cw-radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--cw-shadow);
}
.cw-ugc-stat-value { font-family: Montserrat, futura-pt, sans-serif; font-size: 1.5rem; font-weight: 900; }
.cw-ugc-stat-label { color: var(--cw-text-muted); font-size: 0.85rem; }
.cw-ugc-stat-accent { background: rgba(255, 199, 59, .18); }

.cw-ugc-admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 1025px) { .cw-ugc-admin-cols { grid-template-columns: 1fr; } }
.cw-ugc-admin-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cw-ugc-admin-recent li { background: var(--cw-card-bg); border-radius: var(--cw-radius); padding: 10px 14px; font-size: 0.92rem; box-shadow: var(--cw-shadow); }
.cw-ugc-admin-date { color: var(--cw-text-muted); font-size: 0.82rem; }

.cw-ugc-admin-table-wrap { overflow-x: auto; background: var(--cw-card-bg); border-radius: var(--cw-radius); box-shadow: var(--cw-shadow); }
.cw-ugc-admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.cw-ugc-admin-table th, .cw-ugc-admin-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--cw-border); vertical-align: top; }
.cw-ugc-admin-table thead th { color: var(--cw-text-muted); font-size: 0.8rem; font-weight: 700; }
.cw-ugc-admin-table tbody tr:last-child td { border-bottom: none; }
.cw-ugc-admin-table tbody tr:hover { background: var(--cw-blue-tint); }

.cw-ugc-admin-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cw-ugc-admin-filters a { padding: 6px 13px; border: 1.5px solid var(--cw-border); border-radius: 999px; text-decoration: none; color: var(--cw-text-muted); font-size: 0.88rem; font-weight: 600; }
.cw-ugc-admin-filters a.is-active { border-color: var(--cw-blue); color: var(--cw-blue-dark); background: var(--cw-blue-tint); }

.cw-ugc-btn-small { padding: 7px 14px; font-size: 0.85rem; }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .cw-ugc-hero h1 { font-size: 2rem; }
}

/* ── Landing-page reference composition ────────────────────────────── */

.cw-ugc-header-inner {
  width: 91.2vw;
  min-height: 5.1vw;
  padding: 0;
  flex-wrap: nowrap;
}
.cw-ugc-logo img { height: 3.1vw; }
.cw-ugc-logo-tag { font-size: 1.35rem; }
.cw-ugc-nav { gap: 2.2vw; font-size: 1rem; }
.cw-ugc-nav a { color: #fff; }
.cw-ugc-nav-cta {
  padding: .65vw 1.2vw;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: var(--cw-radius);
}
.cw-ugc-nav-cta:hover { background: rgba(255, 255, 255, .1); }

.cw-ugc-main > .cw-ugc-hero {
  grid-template-columns: .98fr 1.02fr;
  align-items: start;
  gap: 2vw;
  padding: 2.7vw 0 2.6vw;
}
.cw-ugc-main > .cw-ugc-hero::before {
  inset: -2vw -4vw auto;
  height: 38vw;
}
.cw-ugc-hero-copy {
  padding-top: 1.5vw;
  position: relative;
  z-index: 5;
}
.cw-ugc-hero-badge {
  position: relative;
  padding: .55vw 1.15vw .55vw 2.25vw;
  margin-bottom: 1.7vw;
  font-size: 1rem;
}
.cw-ugc-hero-badge::before {
  content: "";
  position: absolute;
  left: 1.15vw;
  top: 50%;
  width: .52vw;
  height: .52vw;
  border-radius: 50%;
  background: var(--cw-blue);
  transform: translateY(-50%);
}
.cw-ugc-main > .cw-ugc-hero h1 {
  width: 43vw;
  margin: 0 0 2vw;
  font-size: clamp(3.6rem, 4vw, 4.15rem);
  line-height: 1.04;
}
.cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-sub {
  width: 41.5vw;
  margin: 0 0 1.8vw;
  font-size: 1.12rem;
  line-height: 1.65;
}
.cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-sub strong { color: var(--cw-blue-dark); }
.cw-ugc-main > .cw-ugc-hero .cw-ugc-trust-pill {
  display: flex;
  width: fit-content;
  max-width: 42vw;
  min-height: 3.55vw;
  margin: 0;
  padding: .65vw 1.25vw .65vw .75vw;
  gap: .7vw;
  font-size: 1rem;
  line-height: 1.25;
}
.cw-ugc-main > .cw-ugc-hero .cw-ugc-trust-pill .cw-ugc-check {
  width: 2.15vw;
  height: 2.15vw;
  padding: .48vw;
  border-radius: 50%;
  background: var(--cw-blue);
  color: #fff;
}
.cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-ctas {
  gap: 1.5vw;
  margin-top: 2.55vw;
}
.cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-ctas .cw-ugc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 13.8vw;
  padding: 1.35vw 1.7vw;
  border-radius: var(--cw-radius);
  font-size: 1.06rem;
}
.cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-ctas .cw-ugc-btn span {
  margin-left: 1.3vw;
  font-size: 1.3em;
  line-height: .7;
}

.cw-ugc-hero-art {
  height: 35.8vw;
  min-height: 0;
}
.cw-ugc-hero-art::before {
  content: "";
  position: absolute;
  top: 2.2vw;
  right: 7vw;
  width: 13.5vw;
  height: 13.5vw;
  border-radius: 50%;
  background: var(--cw-blue);
  opacity: .92;
  z-index: 0;
}
.cw-ugc-hero-art::after {
  content: "";
  position: absolute;
  right: -.5vw;
  bottom: -.6vw;
  width: 35vw;
  height: 16vw;
  border-radius: 50%;
  background: rgba(36, 87, 198, .07);
  transform: rotate(-11deg);
  z-index: 0;
}
.cw-ugc-showcase-profile {
  top: 0;
  left: 2.7vw;
  width: 24.8vw;
  min-height: 35.1vw;
  padding: 1.45vw;
  display: flex;
  flex-direction: column;
  transform: rotate(2deg);
  transform-origin: 50% 50%;
}
.cw-ugc-brief-card {
  top: 6.8vw;
  right: 2.7vw;
  width: 16vw;
  padding: 1.35vw;
  transform: rotate(3.2deg);
  transform-origin: 50% 50%;
}
.cw-ugc-demo-label {
  align-self: flex-start;
  padding: .35vw .8vw;
  margin-bottom: .9vw;
  font-size: .72rem;
}
.cw-ugc-profile-head {
  grid-template-columns: 4.2vw 1fr;
  gap: .9vw;
}
.cw-ugc-profile-avatar {
  width: 4.2vw;
  height: 4.2vw;
  object-position: 50% 24%;
}
.cw-ugc-profile-head h2 { font-size: 1.08rem; }
.cw-ugc-profile-head p,
.cw-ugc-profile-role { font-size: .77rem; }
.cw-ugc-social-metrics {
  gap: .55vw;
  margin-top: .95vw;
}
.cw-ugc-social-metrics span {
  gap: .32vw;
  padding: .45vw .7vw;
  font-size: .69rem;
}
.cw-ugc-social-metrics svg { width: 1rem; height: 1rem; }
.cw-ugc-verification-chip {
  display: inline-flex;
  align-items: center;
  gap: .35vw;
  margin: .75vw 0 0;
  padding: .35vw .7vw;
  border-radius: 10vw;
  color: var(--cw-blue-dark);
  background: var(--cw-blue-tint);
  font-size: .7rem;
  font-weight: 700;
}
.cw-ugc-content-frame {
  height: 12.9vw;
  margin: .9vw 0 .8vw;
}
.cw-ugc-content-frame img { object-position: center 28%; }
.cw-ugc-showcase-profile blockquote {
  font-size: .78rem;
  line-height: 1.5;
}
.cw-ugc-content-status {
  margin-top: 0;
  padding-top: 1.3vw;
  font-size: .68rem;
}

.cw-ugc-brief-title {
  grid-template-columns: 3.7vw 1fr;
  margin-bottom: 1.05vw;
}
.cw-ugc-brief-title img {
  width: 3.7vw;
  height: 3.7vw;
}
.cw-ugc-brief-title h2 {
  font-size: .94rem;
  line-height: 1.12;
}
.cw-ugc-brief-card ul { gap: .78vw; }
.cw-ugc-brief-card li {
  gap: .55vw;
  padding-bottom: .72vw;
  font-size: .73rem;
}
.cw-ugc-brief-pay { margin: 1.15vw 0; }
.cw-ugc-brief-pay strong {
  margin-top: .2vw;
  color: var(--cw-text);
  font-size: .92rem;
}
.cw-ugc-brief-card .cw-ugc-btn {
  padding: .78vw .8vw;
  border-radius: var(--cw-radius);
  font-size: .78rem;
}

.cw-ugc-steps {
  min-height: 12.1vw;
  margin: 0;
  padding: 1.45vw 1vw;
  align-items: center;
}
.cw-ugc-step {
  grid-template-columns: 6.2vw 1fr;
  column-gap: 1.5vw;
  padding: .8vw 1.2vw;
  align-items: center;
}
.cw-ugc-step-icon {
  width: 6.2vw;
  height: 6.2vw;
}
.cw-ugc-step-icon svg { width: 2.9vw; height: 2.9vw; }
.cw-ugc-step h3 { margin-bottom: .6vw; font-size: 1.18rem; }
.cw-ugc-step p { font-size: .96rem; line-height: 1.45; }

.cw-ugc-formats {
  gap: 2vw;
  padding: 2.05vw 0 3vw;
}
.cw-ugc-format {
  min-width: 12vw;
  min-height: 3.4vw;
  justify-content: center;
  gap: .85vw;
  padding: .75vw 1.6vw;
  font-size: 1rem;
}
.cw-ugc-format:nth-child(2) { min-width: 13.2vw; }
.cw-ugc-format:nth-child(3),
.cw-ugc-format:nth-child(4) { min-width: 15vw; }
.cw-ugc-format-icon svg { width: 1.45vw; height: 1.45vw; }

.cw-ugc-card-tags {
  min-width: 0;
  max-width: 100%;
}
.cw-ugc-tag {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ── Hero mockup finish (2026-07-30): outline CTA, brief icon tile, green
   accents, decorations ─────────────────────────────────────────────── */

.cw-ugc-btn-outline {
  background: #fff;
  color: var(--cw-text);
  border: 1px solid var(--cw-border);
}
.cw-ugc-btn-outline:hover { border-color: var(--cw-blue); color: var(--cw-blue); }

.cw-ugc-btn-accent { background: var(--cw-yellow); color: #000; }
.cw-ugc-btn-accent:hover { background: var(--cw-yellow-hover); }

.cw-ugc-brief-title { grid-template-columns: 2.9vw 1fr; padding-right: 3.6vw; }
.cw-ugc-brief-ic {
  width: 2.9vw;
  height: 2.9vw;
  border-radius: .6vw;
  background: var(--cw-blue-tint);
  color: var(--cw-blue);
  display: grid;
  place-items: center;
}
.cw-ugc-brief-ic svg { width: 1.45vw; height: 1.45vw; }

.cw-ugc-li-check {
  width: 1.05vw;
  height: 1.05vw;
  min-width: 15px;
  min-height: 15px;
  border-radius: 50%;
  background: rgba(47, 158, 99, .14);
  color: #2f9e63;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: .05vw;
}
.cw-ugc-li-check svg { width: 62%; height: 62%; }

.cw-ugc-brief-pay strong { color: #2f9e63; }

.cw-ugc-content-status { justify-content: space-between; }
.cw-ugc-status-ok {
  display: inline-flex;
  align-items: center;
  gap: .35vw;
  color: #2f9e63;
  font-weight: 700;
}
.cw-ugc-content-id { color: var(--cw-text-muted); font-weight: 400; }

.cw-ugc-showcase-profile blockquote {
  position: relative;
  padding-left: 1.5vw;
  color: var(--cw-text);
}
.cw-ugc-showcase-profile blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -.35vw;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cw-blue);
}

.cw-ugc-hero-heart {
  position: absolute;
  right: -1vw;
  bottom: -1.1vw;
  width: 3.4vw;
  height: 3.4vw;
  min-width: 44px;
  min-height: 44px;
  border-radius: .9vw;
  background: var(--cw-yellow);
  color: var(--cw-blue);
  display: grid;
  place-items: center;
  box-shadow: var(--cw-shadow);
  z-index: 4;
}
.cw-ugc-hero-heart svg { width: 55%; height: 55%; }

@media (min-width: 761px) and (max-width: 1025px) {
  .cw-ugc-header-inner { min-height: 7vw; }
  .cw-ugc-logo img { height: 4.4vw; }
  .cw-ugc-nav { gap: 1.5vw; font-size: .9rem; }
  .cw-ugc-nav-cta { padding: .8vw 1vw; }
  .cw-ugc-main > .cw-ugc-hero { grid-template-columns: .96fr 1.04fr; gap: 1vw; }
  .cw-ugc-main > .cw-ugc-hero h1 { width: 43vw; font-size: 4.5vw; }
  .cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-sub { width: 41vw; font-size: 1rem; }
  .cw-ugc-showcase-profile { left: 1vw; width: 29vw; }
  .cw-ugc-brief-card { right: 0; width: 19.5vw; }
  .cw-ugc-content-frame { height: 15.2vw; }
  .cw-ugc-social-metrics span { padding: .4vw .55vw; font-size: .62rem; }
  .cw-ugc-verification-chip { font-size: .64rem; }
}

@media (max-width: 760px) {
  .cw-ugc-header { position: relative; }
  .cw-ugc-header-inner {
    width: 90vw;
    min-height: 0;
    padding: 3.5vw 0;
    flex-wrap: wrap;
  }
  .cw-ugc-logo { gap: 2vw; }
  .cw-ugc-logo img { height: 10.5vw; }
  .cw-ugc-logo-tag { font-size: 1.2rem; }
  .cw-ugc-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1vw;
    margin-top: 2vw;
    font-size: .72rem;
  }
  .cw-ugc-nav a {
    padding: 1.7vw .5vw;
    white-space: nowrap;
  }
  .cw-ugc-nav .cw-ugc-nav-cta { padding: 1.7vw 1.5vw; }
  .cw-ugc-nav-cta { border-radius: 1.2vw; }

  .cw-ugc-main { width: 90vw; padding-bottom: 10vw; }
  .cw-ugc-main > .cw-ugc-hero {
    grid-template-columns: 1fr;
    gap: 8vw;
    padding: 10vw 0 9vw;
  }
  .cw-ugc-main > .cw-ugc-hero::before {
    inset: -4vw 0 auto;
    height: 120vw;
  }
  .cw-ugc-hero-copy { padding-top: 0; }
  .cw-ugc-hero-badge {
    padding: 1.8vw 3.2vw 1.8vw 7vw;
    margin-bottom: 5vw;
    font-size: .9rem;
  }
  .cw-ugc-hero-badge::before {
    left: 3.3vw;
    width: 1.8vw;
    height: 1.8vw;
  }
  .cw-ugc-main > .cw-ugc-hero h1 {
    width: 100%;
    margin-bottom: 5vw;
    font-size: 11vw;
    line-height: 1.02;
  }
  .cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-sub {
    width: 100%;
    margin-bottom: 5vw;
    font-size: 1rem;
    line-height: 1.55;
  }
  .cw-ugc-main > .cw-ugc-hero .cw-ugc-trust-pill {
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 3vw;
    gap: 2.5vw;
    border-radius: 1.2vw;
    font-size: .9rem;
    white-space: normal;
  }
  .cw-ugc-main > .cw-ugc-hero .cw-ugc-trust-pill .cw-ugc-check {
    width: 8vw;
    height: 8vw;
    padding: 2vw;
  }
  .cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-ctas {
    gap: 3vw;
    margin-top: 5vw;
  }
  .cw-ugc-main > .cw-ugc-hero .cw-ugc-hero-ctas .cw-ugc-btn {
    width: 100%;
    min-width: 0;
    padding: 4vw 5vw;
    border-radius: 1.2vw;
    font-size: 1rem;
  }

  .cw-ugc-hero-art {
    height: auto;
    display: grid;
    gap: 5vw;
  }
  .cw-ugc-hero-art::before {
    top: 4vw;
    right: 0;
    width: 48vw;
    height: 48vw;
  }
  .cw-ugc-hero-art::after {
    right: 0;
    bottom: 20vw;
    width: 100%;
    height: 58vw;
    transform: none;
  }
  .cw-ugc-showcase-profile,
  .cw-ugc-brief-card {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    padding: 5vw;
    transform: none;
  }
  .cw-ugc-demo-label {
    padding: 1.4vw 3vw;
    margin-bottom: 3vw;
  }
  .cw-ugc-profile-head {
    grid-template-columns: 16vw 1fr;
    gap: 3.5vw;
  }
  .cw-ugc-profile-avatar {
    width: 16vw;
    height: 16vw;
  }
  .cw-ugc-profile-head h2 { font-size: 1.08rem; }
  .cw-ugc-social-metrics {
    gap: 2vw;
    margin-top: 3.5vw;
  }
  .cw-ugc-social-metrics span {
    gap: 1.2vw;
    padding: 1.6vw 2.5vw;
    font-size: .72rem;
  }
  .cw-ugc-verification-chip {
    gap: 1.5vw;
    margin-top: 3vw;
    padding: 1.5vw 2.7vw;
    font-size: .72rem;
  }
  .cw-ugc-content-frame {
    height: 68vw;
    margin: 4vw 0 3vw;
  }
  .cw-ugc-showcase-profile blockquote { font-size: .88rem; }
  .cw-ugc-content-status {
    gap: 1.5vw;
    margin-top: 3vw;
    font-size: .74rem;
  }
  .cw-ugc-brief-title {
    grid-template-columns: 16vw 1fr;
    gap: 3vw;
    margin-bottom: 4vw;
  }
  .cw-ugc-brief-title img {
    width: 16vw;
    height: 16vw;
  }
  .cw-ugc-brief-title h2 { font-size: 1.05rem; }
  .cw-ugc-brief-card ul { gap: 3vw; }
  .cw-ugc-brief-card li {
    gap: 2vw;
    padding-bottom: 3vw;
    font-size: .85rem;
  }
  .cw-ugc-brief-pay { margin: 4vw 0; }
  .cw-ugc-brief-pay strong { font-size: 1rem; }
  .cw-ugc-brief-card .cw-ugc-btn {
    padding: 4vw;
    border-radius: 1.2vw;
    font-size: .95rem;
  }

  .cw-ugc-steps {
    min-height: 0;
    padding: 3vw;
    border-radius: 1.2vw;
  }
  .cw-ugc-step {
    grid-template-columns: 16vw 1fr;
    gap: 4vw;
    padding: 5vw 2vw;
  }
  .cw-ugc-step-icon {
    width: 16vw;
    height: 16vw;
  }
  .cw-ugc-step-icon svg { width: 8vw; height: 8vw; }
  .cw-ugc-step h3 { margin-bottom: 1.5vw; font-size: 1.08rem; }
  .cw-ugc-step p { font-size: .88rem; }
  .cw-ugc-formats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw;
    padding: 6vw 0 10vw;
  }
  .cw-ugc-format {
    min-width: 0;
    min-height: 12vw;
    gap: 2.5vw;
    padding: 3vw 2vw;
    font-size: .88rem;
  }
  .cw-ugc-format-icon svg { width: 5vw; height: 5vw; }
  .cw-ugc-grid {
    grid-template-columns: 1fr;
    gap: 4vw;
  }
  .cw-ugc-card-name,
  .cw-ugc-card-city,
  .cw-ugc-card-hobby {
    overflow-wrap: anywhere;
  }
}

/* ── Hero mockup finish: responsive ─────────────────────────────────── */

@media (max-width: 760px) {
  .cw-ugc-hero-blob { width: 34vw; height: 34vw; top: -4vw; right: -6vw; }
  .cw-ugc-hero-dots { display: none; }
  .cw-ugc-demo-label { top: 3vw; right: 3vw; padding: .8vw 2vw; margin: 0; }
  .cw-ugc-avatar-wrap { width: 15vw; height: 15vw; }
  .cw-ugc-avatar-check { top: -1vw; right: -1vw; }
  .cw-ugc-profile-role svg { width: 3.4vw; height: 3.4vw; }
  .cw-ugc-verification-chip { padding: 1.2vw 2.8vw; margin-top: 3vw; }
  .cw-ugc-brief-title { grid-template-columns: 11vw 1fr; }
  .cw-ugc-brief-ic { width: 11vw; height: 11vw; border-radius: 2.4vw; }
  .cw-ugc-brief-ic svg { width: 5.5vw; height: 5.5vw; }
  .cw-ugc-li-check { margin-top: .4vw; }
  .cw-ugc-showcase-profile blockquote { padding-left: 6vw; }
  .cw-ugc-showcase-profile blockquote::before { top: -1.4vw; }
  .cw-ugc-hero-heart { right: 2.5vw; bottom: -4vw; border-radius: 2.4vw; }
  .cw-ugc-badge-dot { margin-right: 1.6vw; }
  .cw-ugc-check-disc { margin-right: .5vw; }
}