:root {
  --blue: #0057ff;
  --orange: #ff5a00;
  --ink: #050505;
  --paper: #f2f2f2;
  --white: #ffffff;
  --line: 4px solid var(--ink);
  --shadow: 7px 7px 0 var(--ink);
  --display-font: "Plus Jakarta Sans", "Arial Black", Arial, sans-serif;
  --body-font: "Plus Jakarta Sans", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--white);
  font-family: var(--display-font);
  letter-spacing: 0;
}

h1,
h2,
h3,
p,
strong,
span,
a,
button,
label {
  min-width: 0;
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 76px;
  padding: 14px 34px 12px;
  background: var(--orange);
  border-bottom: var(--line);
}

.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.brand-logo {
  display: block;
  width: auto;
  height: 54px;
  max-width: 132px;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 var(--ink));
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 38px;
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 900;
}

.desktop-nav a,
.mobile-nav a,
.mobile-nav button {
  color: var(--white);
  text-shadow: 2px 2px 0 var(--ink);
}

.talk-button,
.white-button,
.contact-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  border: 4px solid var(--ink);
  border-radius: 10px;
  color: var(--white);
  background: var(--blue);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.talk-button:hover,
.white-button:hover,
.contact-form button:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--ink);
}

.menu-button {
  display: none;
  width: 48px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}

.menu-button span {
  display: block;
  width: 22px;
  height: 3px;
  margin: 4px auto;
  background: var(--ink);
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 72px 0 auto 0;
  z-index: 19;
  padding: 18px 20px 22px;
  border-bottom: var(--line);
  background: var(--blue);
  box-shadow: 0 7px 0 var(--ink);
}

.mobile-nav a,
.mobile-nav button {
  display: block;
  width: fit-content;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  background: var(--orange);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  font: 900 16px/1 var(--display-font);
  cursor: pointer;
}

.hero {
  position: relative;
  height: calc(100vh - 148px);
  min-height: 560px;
  overflow: hidden;
  border-bottom: var(--line);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.075) 0 7px, transparent 7px 18px),
    repeating-linear-gradient(45deg, transparent 0 25px, rgba(255, 255, 255, 0.72) 25px 32px);
}

.hero-media-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-media-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(242,242,242,.62), rgba(242,242,242,.62)),
    radial-gradient(circle at center, rgba(255,255,255,.42), rgba(255,255,255,.12));
}

.hero-media-frame {
  position: absolute;
  inset: -4%;
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: saturate(1.08) contrast(1.02);
  transform: scale(1.08) rotate(-1deg);
  animation: heroMediaSlide calc(max(var(--hero-slide-count, 1), 1) * 5s) ease-in-out infinite;
  animation-delay: calc(var(--slide-index, 0) * 5s);
}

.hero-media-frame:first-child:last-child {
  opacity: .78;
  animation: heroSingleMedia 14s ease-in-out infinite;
}

@keyframes heroMediaSlide {
  0%, 100% { opacity: 0; transform: scale(1.1) rotate(-1deg); }
  5%, 31% { opacity: .78; }
  40% { opacity: 0; transform: scale(1.18) rotate(1.2deg); }
}

@keyframes heroSingleMedia {
  0%, 100% { transform: scale(1.06) rotate(-1deg); }
  50% { transform: scale(1.14) rotate(1deg); }
}

.section-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero-mark {
  position: absolute;
  left: 50%;
  top: 51.5%;
  transform: translate(-50%, -50%) rotate(-1deg);
  text-align: center;
  animation: heroFloat 7s ease-in-out infinite;
  z-index: 2;
}

.social-sprinkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.social-sprinkles::before,
.social-sprinkles::after {
  content: "♥  ↗  ●●●  ↻  ";
  position: absolute;
  inset: -10%;
  color: rgba(0, 0, 0, .2);
  font: 900 34px/1.45 var(--display-font);
  letter-spacing: 18px;
  word-spacing: 18px;
  opacity: .6;
  transform: rotate(-12deg);
  white-space: pre-wrap;
  pointer-events: none;
  animation: socialFieldA 18s ease-in-out infinite;
}

.social-sprinkles::before {
  content: "♥  ↗  ●●●  ↻  ♥  ↗  ●●●  ↻  ♥  ↗  ●●●  ↻  ♥  ↗  ●●●  ↻  ♥  ↗  ●●●  ↻";
}

.social-sprinkles::after {
  content: "↻  ●●●  ↗  ♥  ↻  ●●●  ↗  ♥  ↻  ●●●  ↗  ♥  ↻  ●●●  ↗  ♥";
  color: rgba(0, 87, 255, .24);
  font-size: 30px;
  line-height: 1.7;
  letter-spacing: 22px;
  word-spacing: 22px;
  transform: rotate(-12deg) translate(80px, 88px);
  animation: socialFieldB 22s ease-in-out infinite;
}

.sprinkle {
  position: absolute;
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, .34);
  font: 900 var(--fs, 28px)/1 var(--display-font);
  opacity: .86;
  transform: translate3d(var(--repel-x, 0), var(--repel-y, 0), 0) rotate(var(--r, -8deg));
  transition: transform 180ms ease-out;
  animation: sprinkleFloat var(--d, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, translate;
}

.sprinkle:nth-child(2n) {
  --float-x-a: -12px;
  --float-y-a: -18px;
  --float-r-a: -8deg;
  --float-x-b: 10px;
  --float-y-b: -4px;
  --float-r-b: 5deg;
  --delay: -1.8s;
}

.sprinkle:nth-child(3n) {
  --float-x-a: 16px;
  --float-y-a: -9px;
  --float-r-a: 10deg;
  --float-x-b: -9px;
  --float-y-b: -18px;
  --float-r-b: -7deg;
  --delay: -3.1s;
}

.sprinkle:nth-child(4n) {
  --float-x-a: -7px;
  --float-y-a: 12px;
  --float-r-a: 7deg;
  --float-x-b: 14px;
  --float-y-b: -15px;
  --float-r-b: -11deg;
  --delay: -4.4s;
}

.sprinkle:nth-child(5n) {
  --float-x-a: 4px;
  --float-y-a: -24px;
  --float-r-a: -13deg;
  --float-x-b: -16px;
  --float-y-b: 5px;
  --float-r-b: 8deg;
  --delay: -2.6s;
}

.sprinkle:nth-child(7n) {
  --float-x-a: 18px;
  --float-y-a: 8px;
  --float-r-a: 12deg;
  --float-x-b: -4px;
  --float-y-b: -22px;
  --float-r-b: -5deg;
  --delay: -5.2s;
}

.sprinkle.like { color: rgba(255, 90, 0, .54); }
.sprinkle.share,
.sprinkle.repost { color: rgba(0, 87, 255, .48); }
.sprinkle.comment { --fs: 14px; letter-spacing: 1px; color: rgba(255, 90, 0, .5); }

.s1 { left: 4%; top: 8%; --r: -12deg; --d: 8.5s; --fs: 30px; }
.s2 { left: 18%; top: 4%; --r: 7deg; --d: 9.2s; }
.s3 { left: 36%; top: 11%; --r: -6deg; --d: 7.6s; --fs: 34px; }
.s4 { left: 68%; top: 9%; --r: 10deg; --d: 8.8s; --fs: 32px; }
.s5 { right: 7%; top: 20%; --r: -9deg; --d: 8.1s; --fs: 28px; }
.s6 { left: 5%; top: 43%; --r: 8deg; --d: 10s; }
.s7 { left: 25%; top: 35%; --r: -14deg; --d: 9.7s; --fs: 36px; }
.s8 { right: 19%; top: 38%; --r: 11deg; --d: 8.4s; }
.s9 { right: 5%; top: 55%; --r: 7deg; --d: 9s; }
.s10 { left: 13%; bottom: 23%; --r: -6deg; --d: 8.6s; }
.s11 { left: 43%; bottom: 18%; --r: 13deg; --d: 9.4s; }
.s12 { right: 31%; bottom: 20%; --r: -12deg; --d: 8.9s; --fs: 35px; }
.s13 { right: 8%; bottom: 13%; --r: 9deg; --d: 10.2s; }
.s14 { left: 58%; top: 25%; --r: -7deg; --d: 7.9s; }
.s15 { left: 74%; bottom: 38%; --r: 8deg; --d: 9.8s; }
.s16 { left: 82%; top: 6%; --r: -10deg; --d: 8.7s; }
.s17 { left: 30%; top: 2%; --r: 6deg; --d: 9.5s; }
.s18 { right: 30%; top: 4%; --r: -4deg; --d: 8.9s; }
.s19 { right: 42%; top: 30%; --r: 12deg; --d: 9.4s; --fs: 32px; }
.s20 { left: 9%; bottom: 7%; --r: -8deg; --d: 10s; }
.s21 { left: 34%; bottom: 5%; --r: 10deg; --d: 8.6s; }
.s22 { right: 43%; bottom: 6%; --r: -12deg; --d: 9.1s; }
.s23 { right: 18%; bottom: 5%; --r: 7deg; --d: 8.5s; }
.s24 { right: 4%; bottom: 32%; --r: -7deg; --d: 9.2s; }
.s25 { left: 49%; top: 5%; --r: 13deg; --d: 10.4s; }
.s26 { left: 2%; bottom: 40%; --r: -13deg; --d: 9.7s; }
.s27 { left: 62%; bottom: 6%; --r: 9deg; --d: 8.7s; }
.s28 { right: 4%; top: 38%; --r: -11deg; --d: 9.9s; }
.s29 { left: 10%; top: 18%; --r: 11deg; --d: 8.3s; --fs: 27px; }
.s30 { left: 24%; top: 16%; --r: -8deg; --d: 9s; }
.s31 { left: 43%; top: 21%; --r: 8deg; --d: 8.6s; --fs: 31px; }
.s32 { left: 54%; top: 16%; --r: -13deg; --d: 9.3s; --fs: 29px; }
.s33 { left: 72%; top: 22%; --r: 7deg; --d: 8.2s; --fs: 26px; }
.s34 { right: 14%; top: 8%; --r: -9deg; --d: 9.6s; }
.s35 { right: 3%; top: 7%; --r: 12deg; --d: 8.8s; --fs: 32px; }
.s36 { left: 15%; top: 30%; --r: -11deg; --d: 10s; }
.s37 { left: 34%; top: 28%; --r: 9deg; --d: 8.9s; --fs: 25px; }
.s38 { left: 50%; top: 32%; --r: -6deg; --d: 9.2s; }
.s39 { left: 64%; top: 35%; --r: 13deg; --d: 8.7s; --fs: 35px; }
.s40 { right: 8%; top: 32%; --r: -8deg; --d: 9.5s; }
.s41 { left: 3%; top: 25%; --r: 7deg; --d: 8.4s; --fs: 24px; }
.s42 { left: 22%; top: 50%; --r: 12deg; --d: 9.1s; }
.s43 { left: 38%; top: 49%; --r: -12deg; --d: 8.5s; --fs: 30px; }
.s44 { left: 56%; top: 48%; --r: 9deg; --d: 9.8s; }
.s45 { left: 73%; top: 50%; --r: -9deg; --d: 8.6s; --fs: 27px; }
.s46 { right: 2%; top: 48%; --r: 8deg; --d: 9.7s; }
.s47 { left: 7%; bottom: 30%; --r: -7deg; --d: 8.8s; --fs: 33px; }
.s48 { left: 27%; bottom: 34%; --r: 12deg; --d: 9.4s; }
.s49 { left: 46%; bottom: 32%; --r: -10deg; --d: 8.9s; --fs: 25px; }
.s50 { left: 66%; bottom: 31%; --r: 7deg; --d: 9.5s; }
.s51 { right: 12%; bottom: 31%; --r: -12deg; --d: 8.3s; --fs: 31px; }
.s52 { right: 2%; bottom: 22%; --r: 11deg; --d: 9.2s; }
.s53 { left: 4%; bottom: 17%; --r: 8deg; --d: 8.6s; --fs: 28px; }
.s54 { left: 18%; bottom: 10%; --r: -11deg; --d: 9.6s; }
.s55 { left: 29%; bottom: 20%; --r: 13deg; --d: 8.7s; --fs: 34px; }
.s56 { left: 52%; bottom: 15%; --r: -7deg; --d: 9.3s; }
.s57 { left: 70%; bottom: 13%; --r: 11deg; --d: 8.4s; --fs: 26px; }
.s58 { right: 16%; bottom: 7%; --r: -8deg; --d: 9.7s; }
.s59 { right: 5%; bottom: 5%; --r: 10deg; --d: 8.9s; --fs: 32px; }
.s60 { left: 12%; top: 62%; --r: -12deg; --d: 9.4s; }
.s61 { left: 32%; top: 63%; --r: 9deg; --d: 8.2s; --fs: 27px; }
.s62 { left: 61%; top: 64%; --r: -6deg; --d: 9s; }
.s63 { left: 82%; top: 65%; --r: 12deg; --d: 8.5s; --fs: 30px; }
.s64 { right: 1%; top: 68%; --r: -10deg; --d: 9.8s; }

@keyframes sprinkleFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  35% { translate: var(--float-x-a, 8px) var(--float-y-a, -14px); rotate: var(--float-r-a, 6deg); }
  70% { translate: var(--float-x-b, -7px) var(--float-y-b, -6px); rotate: var(--float-r-b, -4deg); }
}

@keyframes socialFieldA {
  0%, 100% { transform: rotate(-12deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-12deg) translate3d(-24px, -18px, 0); }
}

@keyframes socialFieldB {
  0%, 100% { transform: rotate(-12deg) translate3d(80px, 88px, 0); }
  50% { transform: rotate(-12deg) translate3d(112px, 62px, 0); }
}

.hero-logo {
  display: block;
  width: clamp(360px, 43vw, 760px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(8px 8px 0 rgba(0,0,0,.18));
}

.hero-mark p {
  display: inline-block;
  margin: -20px 0 0;
  padding: 8px 26px 10px;
  color: var(--white);
  background: var(--ink);
  border: 3px solid var(--white);
  font-family: var(--display-font);
  font-size: clamp(17px, 1.7vw, 28px);
  line-height: 1;
  letter-spacing: 1px;
  transform: rotate(-2.2deg);
}

.floating.video-badge {
  position: absolute;
  z-index: 2;
  top: 10.7%;
  left: 9.9%;
  width: 123px;
  aspect-ratio: 1;
  border: 7px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 6px 6px 0 rgba(0,0,0,.2);
  animation: stickerFloat 5.8s ease-in-out infinite;
}

.video-badge::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 7px solid var(--ink);
  border-radius: 50%;
  background: var(--blue);
}

.video-screen {
  position: absolute;
  z-index: 2;
  left: 24%;
  top: 36%;
  width: 54%;
  height: 36%;
  border: 6px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
  transform: rotate(-5deg);
}

.video-play {
  position: absolute;
  z-index: 3;
  left: 45%;
  top: 44%;
  width: 20%;
  height: 22%;
  background: var(--orange);
  clip-path: polygon(14% 0, 100% 50%, 14% 100%);
  filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink));
  transform: rotate(-5deg);
}

.video-spark {
  position: absolute;
  z-index: 3;
  left: 67%;
  top: 27%;
  width: 20px;
  height: 20px;
  background: #ffd400;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(2px 2px 0 var(--ink));
  animation: sparkPop 1.8s ease-in-out infinite;
}

.plus {
  position: absolute;
  z-index: 2;
  top: 1.8%;
  left: 56.5%;
  font-family: Arial, sans-serif;
  font-size: 42px;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink);
  animation: plusDrift 4.8s ease-in-out infinite;
}

.commission-coin {
  position: absolute;
  z-index: 2;
  left: 19.8%;
  bottom: 2.6%;
  display: grid;
  place-items: center;
  width: 94px;
  aspect-ratio: 1;
  border: 7px solid var(--ink);
  border-radius: 50%;
  color: var(--white);
  background:
    radial-gradient(circle at center, var(--blue) 0 38%, var(--ink) 39% 55%, var(--white) 56%);
  box-shadow: 6px 6px 0 rgba(0,0,0,.18);
  font-size: 32px;
  font-weight: 900;
  -webkit-text-stroke: 1px var(--ink);
  animation: ballFloat 6.4s ease-in-out infinite;
}

.rate-card {
  position: absolute;
  z-index: 2;
  right: 14.8%;
  top: 60.4%;
  padding: 14px 20px;
  border: 6px solid var(--ink);
  border-radius: 7px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--orange);
  font-family: var(--display-font);
  font-size: 29px;
  font-weight: 900;
  letter-spacing: .3px;
  transform: rotate(9deg);
  -webkit-text-stroke: 1.2px var(--ink);
  text-shadow: 2px 2px 0 var(--ink), 4px 4px 0 rgba(0,0,0,.16);
  animation: cardFloat 5.6s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1deg); }
  50% { transform: translate(-50%, calc(-50% - 13px)) rotate(.7deg); }
}

@keyframes stickerFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -16px, 0) rotate(-4deg); }
}

@keyframes plusDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(9px, -12px, 0) rotate(90deg); }
}

@keyframes ballFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-8px, -14px, 0) rotate(8deg); }
}

@keyframes cardFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(9deg); }
  50% { transform: translate3d(0, -15px, 0) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark,
  .floating.video-badge,
  .plus,
  .commission-coin,
  .rate-card,
  .ticker-track,
  .sprinkle,
  .social-sprinkles::before,
  .social-sprinkles::after,
  .feature-icon,
  .feature-icon::before,
  .feature-icon::after,
  .stat-card strong,
  .stat-card::before,
  .hero-media-frame,
  .affiliate-float-cta,
  .affiliate-float-cta::before,
  .affiliate-float-cta::after,
  .affiliate-phone,
  .affiliate-node,
  .affiliate-coin,
  .affiliate-cursor,
  .orbit-icon,
  .sticker-share,
  .sticker-earn,
  .sticker-track,
  .crowd-avatar,
  .crowd-bubble,
  .cheer-spark {
    animation: none;
  }
}

.ticker {
  overflow: hidden;
  border-bottom: var(--line);
  background: var(--orange);
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 36px;
  padding: 20px 0;
  animation: ticker 22s linear infinite;
}

.ticker span {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  font-size: clamp(30px, 2.2vw, 42px);
  font-family: var(--display-font);
  font-weight: 900;
}

.ticker span::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
}

@keyframes ticker {
  to { transform: translateX(-33.333%); }
}

.intro-band,
.why-section,
.works-section,
.contact-section {
  padding: clamp(64px, 8vw, 120px) clamp(22px, 5vw, 80px);
}

.intro-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 34px;
  align-items: end;
  background: var(--white);
}

h2 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(40px, 5.8vw, 82px);
  line-height: .92;
}

p {
  font-family: var(--body-font);
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  letter-spacing: 0;
}

.intro-copy p,
.split-heading p,
.works-head p,
.contact-section p {
  max-width: 720px;
}

.intro-stats,
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.stat-card,
.feature-card,
.work-row {
  border: var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}

.stat-card {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  min-height: 160px;
  padding: 20px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle, rgba(255, 255, 255, .18) 2px, transparent 2px) 14px 16px / 26px 26px,
    linear-gradient(115deg, transparent 0 58%, rgba(255, 255, 255, .13) 58% 72%, transparent 72%),
    var(--blue);
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  z-index: 1;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.18) 45%, transparent 55%);
  transform: translateX(-70%) rotate(-8deg);
  animation: statShine 4.8s ease-in-out infinite;
}

.stat-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 0;
  width: 98px;
  height: 62px;
  border: 4px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  opacity: .9;
  transform: rotate(-13deg);
}

.stat-card:nth-child(2)::after {
  width: 104px;
  height: 74px;
  border-radius: 0;
  border-color: transparent;
  background:
    linear-gradient(var(--orange), var(--orange)) 76px 10px / 14px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) 18px 36px / 12px 32px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) 42px 24px / 12px 44px no-repeat,
    linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) 66px 14px / 12px 54px no-repeat;
  transform: rotate(-6deg);
}

.stat-card:nth-child(3)::after {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(255,255,255,.32) 35% 48%, transparent 49%),
    radial-gradient(circle at 20% 20%, rgba(255, 90, 0, .6) 0 7px, transparent 8px),
    radial-gradient(circle at 74% 72%, rgba(255,255,255,.25) 0 8px, transparent 9px);
  transform: rotate(8deg);
}

.stat-card strong {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--white);
  font-size: clamp(44px, 4.9vw, 72px);
  line-height: .9;
  letter-spacing: 0;
  max-width: 100%;
  white-space: nowrap;
  -webkit-text-stroke: 2.5px var(--ink);
  overflow-wrap: anywhere;
  text-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 rgba(0,0,0,.24);
  animation: statPop 2.6s ease-in-out infinite;
}

.stat-card span,
.feature-card p,
.work-row p {
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.35;
}

.stat-card span {
  position: relative;
  z-index: 2;
  max-width: 170px;
  margin: 14px auto 0;
  color: var(--white);
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--ink);
}

.stat-card:nth-child(2) strong {
  animation-delay: .25s;
}

.stat-card:nth-child(3) strong {
  animation-delay: .5s;
}

@keyframes statPop {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  45% { transform: translateY(-4px) scale(1.045) rotate(-.6deg); }
  60% { transform: translateY(0) scale(.99) rotate(.5deg); }
}

@keyframes statShine {
  0%, 45% { transform: translateX(-78%) rotate(-8deg); }
  75%, 100% { transform: translateX(78%) rotate(-8deg); }
}

.section-label {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 13px;
  border: 3px solid var(--ink);
  color: var(--white);
  background: var(--blue);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--ink);
}

.section-label.light {
  color: var(--white);
  text-shadow: 3px 3px 0 var(--ink);
}

.split-heading,
.works-head,
.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
  gap: 48px;
  align-items: start;
}

.feature-grid {
  margin-top: 48px;
}

.feature-card {
  position: relative;
  display: grid;
  grid-template-rows: 92px minmax(86px, auto) 1fr;
  align-content: stretch;
  gap: 12px;
  padding: 28px;
  min-height: 330px;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 112px;
  height: 112px;
  opacity: .18;
  background-image: radial-gradient(var(--ink) 2px, transparent 2px);
  background-size: 14px 14px;
}

.feature-card::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 92px;
  height: 92px;
  border: 4px solid var(--ink);
  background: var(--blue);
  transform: rotate(12deg);
}

.feature-card h3,
.work-row h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.feature-card h3 {
  display: flex;
  align-items: flex-start;
  max-width: 330px;
  padding-top: 2px;
}

.feature-card p {
  align-self: start;
  max-width: 330px;
  margin: 0;
}

.feature-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.feature-icon {
  position: relative;
  display: block;
  align-self: start;
  width: 80px;
  height: 80px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 5px 5px 0 var(--ink);
}

.feature-card:nth-child(1) .feature-icon::before,
.feature-card:nth-child(1) .feature-icon::after {
  content: "";
  position: absolute;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.feature-card:nth-child(1) .feature-icon::before {
  inset: 23px;
  background: var(--blue);
  animation: pulseNode 1.8s ease-in-out infinite;
}

.feature-card:nth-child(1) .feature-icon::after {
  width: 18px;
  height: 18px;
  right: 8px;
  top: 12px;
  animation: orbitNode 3.4s linear infinite;
}

.feature-card:nth-child(2) .feature-icon {
  border-radius: 8px;
  background:
    linear-gradient(var(--blue), var(--blue)) 16px 34px / 10px 28px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 34px 22px / 10px 40px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 52px 12px / 10px 50px no-repeat,
    var(--white);
}

.feature-card:nth-child(2) .feature-icon::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 18px;
  height: 18px;
  background: var(--orange);
  clip-path: polygon(50% 0, 63% 35%, 100% 50%, 63% 65%, 50% 100%, 37% 65%, 0 50%, 37% 35%);
  animation: sparkPop 1.7s ease-in-out infinite;
}

.feature-card:nth-child(3) .feature-icon {
  border-radius: 8px;
  background:
    linear-gradient(135deg, transparent 42%, var(--ink) 43% 49%, transparent 50%) center / 58px 44px no-repeat,
    var(--white);
}

.feature-card:nth-child(3) .feature-icon::before {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 12px;
  height: 18px;
  background: var(--blue);
  box-shadow: 18px -8px 0 var(--blue), 36px -22px 0 var(--orange);
  animation: barLift 2s ease-in-out infinite;
}

.feature-card:nth-child(3) .feature-icon::after {
  content: "↑";
  position: absolute;
  right: 9px;
  top: 5px;
  font: 900 28px/1 var(--display-font);
  color: var(--orange);
  -webkit-text-stroke: 1px var(--ink);
  animation: arrowBounce 1.6s ease-in-out infinite;
}

@keyframes pulseNode {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@keyframes orbitNode {
  0% { transform: rotate(0deg) translateX(2px); }
  100% { transform: rotate(360deg) translateX(2px); }
}

@keyframes sparkPop {
  0%, 100% { transform: scale(.75) rotate(0deg); }
  50% { transform: scale(1.2) rotate(20deg); }
}

@keyframes barLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.works-section {
  background: var(--paper);
  border-top: var(--line);
  border-bottom: var(--line);
}

.work-list {
  display: grid;
  gap: 18px;
  margin-top: 46px;
}

.work-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(260px, .8fr);
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
}

.work-row span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  color: var(--white);
  background: var(--blue);
  font-size: 24px;
}

.workshop-section {
  padding: clamp(36px, 6vw, 80px);
  background: var(--orange);
  border-bottom: var(--line);
}

.workshop-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 42px);
  align-items: start;
  padding: clamp(28px, 5vw, 58px);
  border: var(--line);
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow);
}

.workshop-copy {
  position: static;
  display: block;
}

.workshop-panel h2 {
  max-width: 100%;
  font-size: clamp(40px, 5.4vw, 76px);
  margin-bottom: 14px;
  line-height: .92;
  white-space: normal;
  text-shadow: 6px 6px 0 var(--ink);
}

.workshop-panel p {
  margin: 0;
  max-width: 500px;
  line-height: 1.35;
}

.workshop-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.workshop-section.has-no-workshops .workshop-copy {
  display: none;
}

.workshop-section.has-no-workshops .workshop-list {
  grid-template-columns: 1fr;
}

.workshop-empty {
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 4px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  text-align: center;
  padding: clamp(28px, 6vw, 72px);
}

.workshop-empty h3 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(44px, 8vw, 92px);
  line-height: .95;
}

.workshop-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-height: 360px;
  width: 100%;
  padding: 16px;
  border: 4px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: var(--white);
  box-shadow: 7px 7px 0 var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  min-width: 0;
}

.workshop-card:hover,
.workshop-card:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 4px 4px 0 var(--ink);
}

.workshop-thumb {
  display: block;
  min-height: 190px;
  border: 3px solid var(--ink);
  background-color: var(--orange);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.35) 0 18%, transparent 18% 100%),
    repeating-linear-gradient(-35deg, rgba(0,0,0,.2) 0 5px, transparent 5px 13px);
  background-position: center;
  background-size: cover;
}

.workshop-meta,
.modal-kicker {
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

.workshop-card strong {
  display: block;
  font-family: var(--display-font);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.02;
}

.workshop-short {
  display: block;
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
}

body.modal-open {
  overflow: hidden;
}

.workshop-modal {
  position: fixed;
  inset: 0;
  z-index: 56;
  display: none;
}

.workshop-modal.is-open {
  display: block;
}

.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}

.modal-card {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  width: min(560px, calc(100vw - 48px));
  overflow: auto;
  border: 4px solid var(--ink);
  background: var(--white);
  box-shadow: 9px 9px 0 var(--ink);
  animation: flyout 180ms ease-out;
}

@keyframes flyout {
  from { transform: translateX(32px); opacity: .6; }
  to { transform: translateX(0); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  font: 900 30px/.8 var(--body-font);
  cursor: pointer;
}

.modal-thumb {
  min-height: 250px;
  border-bottom: 4px solid var(--ink);
  background-color: var(--orange);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.35) 0 18%, transparent 18% 100%),
    repeating-linear-gradient(-35deg, rgba(0,0,0,.2) 0 5px, transparent 5px 13px);
  background-position: center;
  background-size: cover;
}

.modal-body {
  padding: clamp(24px, 4vw, 42px);
  color: var(--ink);
}

.modal-body h2 {
  margin-top: 12px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
}

.modal-body p {
  max-width: none;
  margin-bottom: 28px;
}

.modal-body .white-button {
  background: var(--blue);
  color: var(--white);
}

.past-workshop-section {
  padding: clamp(56px, 7vw, 96px) clamp(22px, 5vw, 80px);
  border-bottom: var(--line);
  background: var(--paper);
}

.past-workshop-section.is-empty {
  display: none;
}

.past-workshop-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(280px, .7fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 36px;
}

.past-workshop-head .section-label {
  margin: 0;
  font-size: clamp(42px, 5.8vw, 82px);
  font-family: var(--display-font);
  font-weight: 900;
  line-height: .92;
  color: var(--ink);
  text-shadow: 5px 5px 0 var(--blue);
}

.past-workshop-head p {
  margin: 0;
}

.past-workshop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.past-workshop-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  min-height: 360px;
  padding: 16px;
  border: var(--line);
  color: var(--ink) !important;
  background: var(--white);
  box-shadow: var(--shadow);
}

.past-workshop-image {
  min-height: 190px;
  border: 3px solid var(--ink);
  background-color: var(--orange);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.35) 0 18%, transparent 18% 100%),
    repeating-linear-gradient(-35deg, rgba(0,0,0,.2) 0 5px, transparent 5px 13px);
  background-position: center;
  background-size: cover;
}

.past-workshop-card strong {
  display: block;
  color: var(--ink) !important;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1;
}

.past-workshop-card p {
  margin: 0;
  color: var(--ink) !important;
  font-size: 16px;
  line-height: 1.35;
}

.past-workshop-card .workshop-meta {
  color: var(--ink) !important;
  text-shadow: none;
}

.brand-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
}

.brand-modal.is-open {
  display: block;
}

.brand-modal-card {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  width: min(560px, calc(100vw - 48px));
  overflow: auto;
  border: var(--line);
  background: var(--white);
  box-shadow: 9px 9px 0 var(--ink);
  padding: clamp(24px, 4vw, 42px);
  animation: flyout 180ms ease-out;
}

.brand-modal-card h2 {
  margin: 12px 0 0;
  font-size: clamp(38px, 5vw, 68px);
}

.brand-modal-card p {
  margin-bottom: 24px;
}

.brand-inquiry-form {
  display: grid;
  gap: 14px;
}

.brand-inquiry-form label {
  display: grid;
  gap: 8px;
  font-weight: 900;
}

.brand-inquiry-form input,
.brand-inquiry-form textarea {
  width: 100%;
  border: 3px solid var(--ink);
  padding: 14px 16px;
  font: 600 17px var(--body-font);
  background: var(--white);
}

.brand-inquiry-form button {
  width: fit-content;
  margin-top: 8px;
  border: 4px solid var(--ink);
  border-radius: 10px;
  padding: 14px 20px;
  color: var(--white);
  background: var(--blue);
  box-shadow: 5px 5px 0 var(--ink);
  font: 900 16px/1 var(--display-font);
  cursor: pointer;
}

.brand-success-message {
  margin: 12px 0 0;
  padding: 14px;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: #dfff72;
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 900;
}

.white-button {
  color: var(--ink);
  background: var(--white);
  white-space: nowrap;
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  font-size: 16px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 14px 16px;
  font: 500 17px var(--body-font);
  background: var(--white);
}

.contact-form button {
  width: fit-content;
  font-family: var(--display-font);
}

.site-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 32px;
  border-top: var(--line);
  background: var(--ink);
  color: var(--white);
}

.footer-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 72px;
  max-width: 170px;
  object-fit: contain;
  filter: drop-shadow(2px 2px 0 var(--white));
}

.site-footer p {
  margin: 0 auto 0 0;
  font-size: 15px;
}

.site-footer a {
  font-size: 16px;
  color: var(--orange);
}

.affiliate-float-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100vw - 36px));
  min-height: 68px;
  padding: 12px 24px 12px 14px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  color: #ffd400;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.3) 0 8px, transparent 9px),
    linear-gradient(135deg, var(--blue) 0 62%, #003bd6 62% 100%);
  box-shadow: 9px 9px 0 var(--ink);
  font-size: clamp(15px, 1.55vw, 20px);
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 2px 2px 0 var(--ink), 4px 4px 0 rgba(0,0,0,.28);
  -webkit-text-stroke: .5px var(--ink);
  animation: affiliateNudge 4.2s ease-in-out infinite;
}

.affiliate-float-cta::before,
.affiliate-float-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.affiliate-float-cta::before {
  inset: -12px;
  border: 3px solid rgba(255, 90, 0, .7);
  border-radius: 18px;
  opacity: 0;
  animation: affiliatePulse 4.2s ease-in-out infinite;
}

.affiliate-float-cta::after {
  right: -10px;
  top: -12px;
  width: 28px;
  height: 28px;
  background: #ffd400;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(3px 3px 0 var(--ink));
  animation: sparkPop 1.8s ease-in-out infinite;
}

.affiliate-float-cta:hover {
  transform: translate(3px, 3px);
  box-shadow: 4px 4px 0 var(--ink);
}

.affiliate-float-icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 3px 3px 0 var(--ink);
}

.affiliate-float-icon::before,
.affiliate-float-icon::after {
  content: "";
  position: absolute;
  border: 3px solid var(--ink);
  background: var(--white);
}

.affiliate-float-icon::before {
  left: 7px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.affiliate-float-icon::after {
  right: 5px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.workshop-float-cta {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(330px, calc(100vw - 36px));
  min-height: 62px;
  padding: 11px 20px 11px 13px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  color: var(--white);
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.34) 0 8px, transparent 9px),
    repeating-linear-gradient(-18deg, rgba(0,0,0,.16) 0 4px, transparent 4px 14px),
    var(--orange);
  box-shadow: 8px 8px 0 var(--ink);
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--ink);
  animation: workshopFloatNudge 5.2s ease-in-out infinite;
}

.workshop-float-cta::after {
  content: "GO";
  position: absolute;
  right: -12px;
  top: -14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: #ffd400;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.workshop-float-cta:hover {
  transform: translate(3px, 3px);
  box-shadow: 4px 4px 0 var(--ink);
}

.workshop-float-icon {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 32px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background:
    linear-gradient(var(--blue), var(--blue)) 8px 10px / 17px 5px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 8px 18px / 12px 5px no-repeat,
    var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}

.workshop-float-icon::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -9px;
  width: 19px;
  height: 19px;
  background: #ffd400;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(2px 2px 0 var(--ink));
}

@keyframes workshopFloatNudge {
  0%, 64%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  69% { transform: translate3d(6px, -8px, 0) rotate(1.5deg); }
  74% { transform: translate3d(-3px, 0, 0) rotate(-1deg); }
  79% { transform: translate3d(0, -4px, 0) rotate(.5deg); }
}

@keyframes affiliateNudge {
  0%, 58%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  63% { transform: translate3d(-5px, -7px, 0) rotate(-1.4deg); }
  68% { transform: translate3d(4px, 0, 0) rotate(1.2deg); }
  73% { transform: translate3d(0, -4px, 0) rotate(0deg); }
}

@keyframes affiliatePulse {
  0%, 58%, 100% { opacity: 0; transform: scale(.98); }
  63%, 78% { opacity: .8; transform: scale(1.05); }
}

.affiliate-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .9fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: calc(100vh - 76px);
  padding: clamp(58px, 7vw, 110px) clamp(24px, 5vw, 82px);
  overflow: hidden;
  border-bottom: var(--line);
  background-color: #f7f7f7;
}

.home-affiliate-hero {
  min-height: auto;
  padding-top: clamp(56px, 7vw, 92px);
  padding-bottom: clamp(58px, 7vw, 96px);
  background:
    radial-gradient(circle at 9% 16%, rgba(255, 90, 0, .2) 0 54px, transparent 55px),
    radial-gradient(circle at 86% 78%, rgba(0, 87, 255, .18) 0 76px, transparent 77px),
    #f5f5f5;
}

.home-affiliate-hero.section-grid::before {
  display: none;
}

.home-affiliate-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 12px;
  background: var(--orange);
  border-top: var(--line);
}

.affiliate-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.affiliate-kicker {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border: 4px solid var(--ink);
  color: var(--white);
  background: var(--orange);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--ink), 0 0 0 var(--ink);
}

.affiliate-hero h1 {
  margin: 0;
  max-width: 800px;
  font-size: clamp(58px, 8.6vw, 132px);
  line-height: .84;
  letter-spacing: 0;
  text-shadow: 7px 7px 0 rgba(0, 87, 255, .22);
}

.affiliate-hero p {
  max-width: 640px;
  margin: 24px 0 0;
  font-size: clamp(18px, 1.7vw, 24px);
}

.affiliate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.affiliate-visual {
  position: relative;
  z-index: 2;
  min-height: 520px;
}

.affiliate-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(330px, 72vw);
  aspect-ratio: .72;
  border: 7px solid var(--ink);
  border-radius: 28px;
  background:
    linear-gradient(var(--orange), var(--orange)) 44px 274px / 164px 20px no-repeat,
    radial-gradient(circle at 72% 22%, #ffd400 0 15px, transparent 16px),
    var(--blue);
  box-shadow: 13px 13px 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-6deg);
  animation: phoneFloat 6.2s ease-in-out infinite;
}

.affiliate-phone::before {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  top: 66px;
  height: 126px;
  border: 5px solid var(--ink);
  background:
    linear-gradient(var(--white), var(--white)) 25px 74px / 22px 34px no-repeat,
    linear-gradient(var(--white), var(--white)) 74px 46px / 22px 62px no-repeat,
    linear-gradient(var(--white), var(--white)) 123px 22px / 22px 86px no-repeat,
    var(--orange);
}

.phone-dot {
  position: absolute;
  left: 50%;
  top: 25px;
  width: 54px;
  height: 10px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  transform: translateX(-50%);
}

.phone-chart {
  position: absolute;
  left: 72px;
  top: 230px;
  width: 112px;
  height: 68px;
  border: 5px solid var(--ink);
  background:
    linear-gradient(135deg, transparent 41%, var(--ink) 42% 48%, transparent 49%),
    var(--white);
}

.phone-button {
  position: absolute;
  right: 45px;
  bottom: 40px;
  width: 74px;
  height: 74px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: #ffd400;
}

.affiliate-node,
.affiliate-coin {
  position: absolute;
  display: grid;
  place-items: center;
  border: 5px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  box-shadow: 7px 7px 0 var(--ink);
  font-weight: 900;
  animation: nodeFloat 5.5s ease-in-out infinite;
}

.affiliate-node {
  width: 104px;
  height: 58px;
  border-radius: 8px;
}

.node-a { left: 6%; top: 14%; transform: rotate(-8deg); }
.node-b { right: 2%; top: 24%; color: var(--white); background: var(--orange); transform: rotate(8deg); animation-delay: -1.2s; }
.node-c { left: 2%; bottom: 12%; color: var(--white); background: var(--blue); transform: rotate(7deg); animation-delay: -2s; }

.affiliate-coin {
  right: 7%;
  bottom: 12%;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--white);
  background: var(--orange);
  font-size: 34px;
  -webkit-text-stroke: 1px var(--ink);
  animation-delay: -2.8s;
}

.affiliate-cursor {
  position: absolute;
  left: 62%;
  top: 61%;
  width: 44px;
  height: 64px;
  background: var(--white);
  clip-path: polygon(0 0, 100% 48%, 61% 57%, 82% 100%, 55% 100%, 35% 61%, 0 86%);
  filter: drop-shadow(4px 4px 0 var(--ink));
  animation: cursorTap 3.8s ease-in-out infinite;
}

.affiliate-orbit {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.orbit-icon {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 54px;
  padding: 0 12px;
  border: 4px solid rgba(0,0,0,.7);
  border-radius: 50%;
  color: rgba(0, 87, 255, .76);
  background: rgba(255,255,255,.72);
  box-shadow: 4px 4px 0 rgba(0,0,0,.28);
  font-size: 15px;
  font-weight: 900;
  animation: orbitDrift 7s ease-in-out infinite;
}

.oi1 { left: 8%; top: 18%; }
.oi2 { left: 45%; top: 11%; color: rgba(255,90,0,.82); animation-delay: -1s; }
.oi3 { right: 12%; top: 13%; animation-delay: -2s; }
.oi4 { left: 36%; bottom: 12%; color: rgba(255,90,0,.82); animation-delay: -3s; }
.oi5 { right: 8%; bottom: 24%; animation-delay: -4s; }
.oi6 { left: 24%; bottom: 6%; border-radius: 8px; color: var(--ink); background: #ffd400; animation-delay: -1.7s; }
.oi7 { right: 28%; top: 24%; border-radius: 8px; color: var(--white); background: var(--blue); animation-delay: -2.7s; }
.oi8 { left: 52%; bottom: 18%; border-radius: 8px; color: var(--white); background: var(--orange); animation-delay: -3.7s; }
.oi9 { right: 6%; top: 46%; border-radius: 8px; color: var(--ink); background: var(--white); animation-delay: -4.7s; }
.oi10 { left: 4%; bottom: 40%; color: var(--orange); animation-delay: -5.4s; }
.oi11 { right: 42%; bottom: 5%; animation-delay: -6.2s; }
.oi12 { left: 30%; top: 7%; border-radius: 8px; color: var(--ink); background: #ffd400; animation-delay: -6.9s; }

@keyframes phoneFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); }
  50% { transform: translate(-50%, calc(-50% - 15px)) rotate(-3deg); }
}

@keyframes nodeFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes cursorTap {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(-14px, -10px, 0) rotate(-11deg); }
}

@keyframes orbitDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(10px, -16px, 0) rotate(8deg); }
}

.affiliate-section,
.affiliate-fit-section,
.affiliate-apply {
  padding: clamp(64px, 8vw, 120px) clamp(22px, 5vw, 80px);
}

.home-affiliate-hero + .affiliate-section {
  padding-top: clamp(46px, 5vw, 72px);
}

.affiliate-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.affiliate-step-card,
.affiliate-benefits article,
.affiliate-fit-card {
  border: var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}

.affiliate-step-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  padding: 28px;
}

.affiliate-step-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 120px;
  height: 120px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--blue);
}

.step-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 82px;
  height: 82px;
  margin-bottom: 22px;
  border: 4px solid var(--ink);
  background: var(--orange);
  box-shadow: 5px 5px 0 var(--ink);
}

.brief-icon {
  border-radius: 12px;
  background:
    linear-gradient(var(--blue), var(--blue)) 18px 22px / 42px 7px no-repeat,
    linear-gradient(var(--blue), var(--blue)) 18px 40px / 34px 7px no-repeat,
    var(--white);
}

.share-icon {
  border-radius: 50%;
}

.share-icon::before,
.share-icon::after {
  content: "";
  position: absolute;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.share-icon::before { left: 13px; top: 28px; width: 18px; height: 18px; }
.share-icon::after { right: 11px; top: 13px; width: 22px; height: 22px; }

.payout-icon {
  border-radius: 50%;
  color: var(--ink);
  background:
    radial-gradient(circle at center, #ffd400 0 38%, var(--ink) 39% 45%, var(--white) 46%);
}

.payout-icon::before {
  content: "%";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 900;
}

.affiliate-step-card strong,
.affiliate-benefits strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.affiliate-step-card p,
.affiliate-benefits p {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  font-size: 17px;
}

.affiliate-blue-band {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
  gap: 34px;
  padding: clamp(46px, 7vw, 90px) clamp(22px, 5vw, 80px);
  border-top: var(--line);
  border-bottom: var(--line);
  color: var(--white);
  background: var(--blue);
}

.affiliate-blue-band h2 {
  text-shadow: 6px 6px 0 var(--ink);
}

.affiliate-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.affiliate-benefits article {
  min-height: 220px;
  padding: 22px;
  color: var(--ink);
}

.affiliate-benefits span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 34px;
  margin-bottom: 26px;
  border: 3px solid var(--ink);
  color: #ffd400;
  background: var(--blue);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 900;
  -webkit-text-stroke: .7px var(--ink);
}

.affiliate-fit-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: 26px;
  align-items: stretch;
  background: var(--paper);
}

.home-fit-section {
  border-top: var(--line);
  border-bottom: var(--line);
}

.affiliate-fit-card {
  padding: clamp(28px, 5vw, 58px);
}

.affiliate-fit-card ul {
  display: grid;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.affiliate-fit-card li {
  position: relative;
  padding-left: 42px;
  font-family: var(--body-font);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.35;
}

.affiliate-fit-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 3px 3px 0 var(--ink);
}

.affiliate-sticker-wall {
  position: relative;
  min-height: 390px;
  border: var(--line);
  background:
    radial-gradient(circle, rgba(0,0,0,.15) 2px, transparent 2px) 0 0 / 28px 28px,
    var(--orange);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.affiliate-sticker-wall span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: max-content;
  max-width: min(78%, 360px);
  min-width: 160px;
  min-height: 82px;
  padding: 16px 24px;
  border: 5px solid var(--ink);
  background: var(--white);
  box-shadow: 7px 7px 0 var(--ink);
  font-size: clamp(28px, 3.5vw, 50px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}

.sticker-share {
  left: 10%;
  top: 14%;
  color: var(--blue);
  transform: rotate(-8deg);
}

.sticker-share,
.sticker-earn,
.sticker-track {
  animation: stickerWobble 4.8s ease-in-out infinite;
}

.sticker-earn {
  animation-delay: -1.2s;
}

.sticker-track {
  animation-delay: -2.4s;
}

@keyframes stickerWobble {
  0%, 100% { translate: 0 0; }
  45% { translate: 0 -14px; }
  70% { translate: 8px -4px; }
}

.sticker-earn {
  right: 8%;
  top: 38%;
  color: var(--orange);
  transform: rotate(7deg);
}

.sticker-track {
  left: 18%;
  bottom: 11%;
  color: var(--ink);
  transform: rotate(4deg);
}

.affiliate-apply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  border-top: var(--line);
  background: var(--orange);
}

.affiliate-apply h2 {
  max-width: 880px;
}

.affiliate-apply p {
  max-width: 760px;
}

.affiliate-apply-button {
  min-height: 64px;
  font-size: 18px;
  white-space: nowrap;
}

.big-affiliate-cta {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
  padding: clamp(70px, 9vw, 130px) clamp(22px, 5vw, 80px);
  overflow: hidden;
  text-align: center;
  border-bottom: var(--line);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 90, 0, .22) 0 14px, transparent 15px),
    radial-gradient(circle at 84% 28%, rgba(0, 87, 255, .18) 0 18px, transparent 19px),
    radial-gradient(circle at 72% 78%, rgba(255, 212, 0, .26) 0 22px, transparent 23px),
    var(--paper);
}

.big-affiliate-cta h2 {
  position: relative;
  z-index: 4;
  max-width: 1100px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-weight: 900;
  text-shadow: none;
  -webkit-text-stroke: .45px var(--ink);
}

.big-affiliate-cta p {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 24px auto 32px;
}

.big-affiliate-cta .talk-button,
.big-affiliate-cta .affiliate-kicker {
  position: relative;
  z-index: 2;
}

.cheer-illustration {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.crowd-avatar {
  position: absolute;
  width: 118px;
  height: 128px;
  border: 5px solid var(--ink);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(var(--r, -5deg));
  animation: cheerFloat 5s ease-in-out infinite;
}

.crowd-avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 48px;
  height: 48px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--orange);
  transform: translateX(-50%);
}

.crowd-avatar::after {
  content: "";
  position: absolute;
  left: 27px;
  bottom: 15px;
  width: 56px;
  height: 42px;
  border: 5px solid var(--ink);
  border-radius: 26px 26px 12px 12px;
  background: var(--blue);
}

.crowd-avatar i {
  position: absolute;
  left: -18px;
  top: 62px;
  width: 150px;
  height: 58px;
  z-index: 0;
}

.crowd-avatar i::before,
.crowd-avatar i::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 54px;
  height: 14px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: #ffd400;
}

.crowd-avatar i::before {
  left: 0;
  transform: rotate(-28deg);
}

.crowd-avatar i::after {
  right: 0;
  transform: rotate(28deg);
}

.crowd-avatar.a1 { left: 6%; bottom: 14%; --r: -7deg; }
.crowd-avatar.a2 { right: 7%; bottom: 17%; --r: 6deg; animation-delay: -1.2s; }
.crowd-avatar.a3 { left: 18%; top: 12%; width: 92px; height: 102px; --r: 5deg; animation-delay: -2.1s; }
.crowd-avatar.a3::before { width: 38px; height: 38px; top: 13px; background: #ffd400; }
.crowd-avatar.a3::after { left: 22px; width: 42px; height: 31px; background: var(--orange); }
.crowd-avatar.a3 i { display: none; }
.crowd-avatar.a4 { right: 19%; top: 14%; width: 92px; height: 102px; --r: -4deg; animation-delay: -3s; }
.crowd-avatar.a4::before { width: 38px; height: 38px; top: 13px; }
.crowd-avatar.a4::after { left: 22px; width: 42px; height: 31px; background: var(--blue); }
.crowd-avatar.a4 i { display: none; }

.crowd-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 42px;
  padding: 0;
  border: 4px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  background: #ffd400;
  box-shadow: 5px 5px 0 var(--ink);
  font-size: 0;
  font-weight: 900;
  animation: nodeFloat 5.4s ease-in-out infinite;
}

.crowd-bubble.b1 { left: 31%; top: 23%; }
.crowd-bubble.b2 { right: 31%; bottom: 22%; border-radius: 50%; width: 48px; height: 48px; background: var(--white); animation-delay: -1.4s; }
.crowd-bubble.b3 { right: 13%; top: 47%; color: var(--white); background: var(--orange); animation-delay: -2.2s; }

.crowd-bubble::before,
.crowd-bubble::after {
  content: "";
  position: absolute;
}

.crowd-bubble.b1::before,
.crowd-bubble.b1::after {
  top: 12px;
  width: 20px;
  height: 14px;
  border: 4px solid var(--ink);
  border-radius: 999px;
}

.crowd-bubble.b1::before {
  left: 10px;
  transform: rotate(-22deg);
}

.crowd-bubble.b1::after {
  right: 10px;
  transform: rotate(22deg);
}

.crowd-bubble.b2::before {
  inset: 9px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #ffd400;
}

.crowd-bubble.b2::after {
  left: 13px;
  top: 21px;
  width: 22px;
  height: 5px;
  background: var(--ink);
  transform: rotate(-42deg);
}

.crowd-bubble.b3::before {
  left: 12px;
  bottom: 9px;
  width: 8px;
  height: 16px;
  background: var(--white);
  box-shadow: 12px -8px 0 var(--white), 24px -16px 0 var(--white);
}

.crowd-bubble.b3::after {
  right: 8px;
  top: 8px;
  width: 14px;
  height: 14px;
  background: #ffd400;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(2px 2px 0 var(--ink));
}

.cheer-spark {
  position: absolute;
  width: 28px;
  height: 28px;
  background: #ffd400;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(3px 3px 0 var(--ink));
  animation: sparkPop 1.9s ease-in-out infinite;
}

.cheer-spark.c1 { left: 23%; top: 24%; }
.cheer-spark.c2 { right: 24%; top: 18%; animation-delay: -.7s; }
.cheer-spark.c3 { right: 18%; bottom: 22%; animation-delay: -1.2s; }

@keyframes cheerFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}

.merged-workshop-section .workshop-panel {
  grid-template-columns: minmax(0, .72fr) minmax(300px, .86fr);
  align-items: center;
  gap: clamp(22px, 4vw, 48px);
}

.workshop-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.workshop-choice-card {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  padding: 18px 20px;
  border: var(--line);
  color: var(--white);
  background:
    radial-gradient(circle at 92% 20%, rgba(255,255,255,.28) 0 34px, transparent 35px),
    var(--blue);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.workshop-choice-card:nth-child(2) {
  background:
    radial-gradient(circle at 92% 20%, rgba(255,255,255,.3) 0 34px, transparent 35px),
    var(--orange);
}

.workshop-choice-card::after {
  content: "↗";
  position: absolute;
  right: 22px;
  bottom: 16px;
  color: #ffd400;
  font-size: 42px;
  font-weight: 900;
  text-shadow: 3px 3px 0 var(--ink);
}

.workshop-choice-card:hover {
  transform: translate(3px, 3px);
  box-shadow: 4px 4px 0 var(--ink);
}

.workshop-choice-card span {
  display: block;
  max-width: 520px;
  color: var(--white);
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 900;
  line-height: .95;
  text-shadow: 3px 3px 0 var(--ink);
}

.workshop-choice-card strong {
  display: inline-block;
  margin-top: 13px;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.workshop-choice-card {
  min-height: 166px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  align-items: center;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 93% 18%, rgba(255,255,255,.3) 0 38px, transparent 39px),
    radial-gradient(circle at 14% 82%, rgba(255, 212, 0, .34) 0 42px, transparent 43px),
    repeating-linear-gradient(-18deg, rgba(0,0,0,.13) 0 4px, transparent 4px 15px),
    var(--blue);
}

.workshop-choice-card:nth-child(2) {
  background:
    radial-gradient(circle at 93% 18%, rgba(255,255,255,.34) 0 38px, transparent 39px),
    radial-gradient(circle at 14% 82%, rgba(0, 87, 255, .24) 0 42px, transparent 43px),
    repeating-linear-gradient(-18deg, rgba(0,0,0,.15) 0 4px, transparent 4px 15px),
    var(--orange);
}

.workshop-choice-card::after {
  content: "GO";
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: #ffd400;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.workshop-choice-title {
  display: block;
  grid-column: 2 / 3;
  grid-row: 1;
  max-width: 520px;
  color: var(--white);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  line-height: .95;
  text-shadow: 4px 4px 0 var(--ink), 0 0 0 var(--ink);
  -webkit-text-stroke: .75px var(--ink);
}

.workshop-choice-card small {
  display: block;
  grid-column: 2 / 3;
  grid-row: 2;
  max-width: 360px;
  margin-top: 9px;
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 2px 2px 0 var(--ink);
}

.workshop-choice-card strong {
  grid-column: 2 / 3;
  grid-row: 3;
  width: max-content;
  margin-top: 17px;
  position: relative;
  z-index: 2;
}

.workshop-choice-card em {
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 38px;
  border: 3px solid var(--ink);
  color: #ffd400;
  background: var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,.34);
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
}

.workshop-choice-icon {
  position: relative;
  left: auto;
  top: auto;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 70px;
  height: 70px;
  border: 4px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-5deg);
}

.workshop-choice-card .workshop-choice-icon {
  display: block;
  max-width: none;
  color: inherit;
  font-size: initial;
  font-weight: initial;
  line-height: normal;
  text-shadow: none;
}

.workshop-choice-card .workshop-choice-title {
  display: block;
  color: var(--white);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  line-height: .95;
  text-shadow: 4px 4px 0 var(--ink), 0 0 0 var(--ink);
}

.workshop-choice-icon::before,
.workshop-choice-icon::after {
  content: "";
  position: absolute;
}

.upcoming-icon::before {
  left: 15px;
  top: 18px;
  width: 36px;
  height: 28px;
  border: 4px solid var(--ink);
  border-radius: 5px;
  background:
    linear-gradient(var(--blue), var(--blue)) 7px 8px / 22px 5px no-repeat,
    var(--white);
}

.upcoming-icon::after {
  right: -10px;
  top: 8px;
  width: 24px;
  height: 24px;
  background: #ffd400;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(2px 2px 0 var(--ink));
}

.past-icon::before {
  left: 13px;
  top: 18px;
  width: 38px;
  height: 32px;
  border: 4px solid var(--ink);
  background:
    radial-gradient(circle at 72% 36%, #ffd400 0 5px, transparent 6px),
    linear-gradient(135deg, transparent 46%, var(--blue) 47% 54%, transparent 55%),
    var(--white);
}

.past-icon::after {
  left: 8px;
  bottom: 10px;
  width: 50px;
  height: 10px;
  border: 3px solid var(--ink);
  background: var(--orange);
  transform: rotate(-6deg);
}

.workshop-page {
  background: var(--blue);
}

.workshop-page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .58fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
  min-height: calc(100vh - 76px);
  padding: clamp(64px, 8vw, 118px) clamp(24px, 5vw, 82px);
  overflow: hidden;
  border-bottom: var(--line);
  color: var(--white);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 212, 0, .22) 0 74px, transparent 75px),
    radial-gradient(circle at 88% 72%, rgba(255,255,255,.18) 0 110px, transparent 111px),
    var(--blue);
}

.workshop-page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18px;
  border-top: var(--line);
  background: var(--orange);
}

.workshop-page-copy {
  position: relative;
  z-index: 2;
  max-width: 840px;
  padding: clamp(18px, 2.5vw, 30px);
}

.workshop-page-copy::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: min(100%, 760px);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(0, 87, 255, .92), rgba(0, 87, 255, .64) 72%, transparent);
  filter: blur(.2px);
}

.workshop-page-copy h1 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(72px, 10.2vw, 138px);
  font-weight: 900;
  line-height: .88;
  overflow-wrap: normal;
  word-break: normal;
  text-shadow: 8px 8px 0 var(--ink);
}

.workshop-page-copy p {
  max-width: 660px;
  margin: 28px 0 0;
  font-family: var(--body-font);
  font-size: clamp(19px, 1.7vw, 25px);
  font-weight: 800;
  line-height: 1.28;
  text-shadow: 3px 3px 0 rgba(0,0,0,.34);
}

.workshop-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.workshop-page-actions .white-button {
  color: var(--ink);
  background: var(--white);
}

.workshop-hero-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.workshop-hero-sparks span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 46px;
  padding: 10px 14px;
  border: 4px solid var(--ink);
  background: var(--white);
  color: var(--blue);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 900;
  opacity: .72;
  scale: .86;
  transform: rotate(var(--r, -6deg));
  animation: workshopSparkFloat 6s ease-in-out infinite;
}

.workshop-hero-sparks .spark-image {
  width: clamp(68px, 7vw, 118px);
  height: clamp(52px, 5.4vw, 92px);
  padding: 8px;
  overflow: hidden;
  background: rgba(255,255,255,.86);
}

.workshop-hero-sparks .spark-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.workshop-hero-sparks span:nth-child(1) { left: 7%; top: 9%; --r: -8deg; color: var(--orange); }
.workshop-hero-sparks span:nth-child(2) { right: 10%; top: 12%; --r: 7deg; animation-delay: -1s; }
.workshop-hero-sparks span:nth-child(3) { left: 44%; top: 7%; --r: 4deg; color: var(--ink); animation-delay: -2s; }
.workshop-hero-sparks span:nth-child(4) { left: 4%; bottom: 10%; --r: 6deg; color: var(--ink); animation-delay: -2.8s; }
.workshop-hero-sparks span:nth-child(5) { right: 38%; bottom: 7%; --r: -5deg; color: var(--orange); animation-delay: -3.5s; }
.workshop-hero-sparks span:nth-child(6) { right: 5%; bottom: 27%; --r: 8deg; animation-delay: -4.2s; }

.workshop-page-poster {
  position: relative;
  z-index: 2;
  min-height: 420px;
  border: var(--line);
  background:
    radial-gradient(circle, rgba(0,0,0,.16) 2px, transparent 2px) 0 0 / 28px 28px,
    var(--orange);
  box-shadow: 10px 10px 0 var(--ink);
  transform: scale(.9) rotate(1.6deg);
  transform-origin: center right;
  overflow: hidden;
}

.poster-ticket {
  position: absolute;
  left: 8%;
  top: 10%;
  padding: 12px 16px;
  border: 4px solid var(--ink);
  color: var(--white);
  background: var(--blue);
  box-shadow: 5px 5px 0 var(--ink);
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 900;
  transform: rotate(-8deg);
  animation: nodeFloat 5s ease-in-out infinite;
}

.poster-screen {
  position: absolute;
  left: 14%;
  right: 10%;
  top: 34%;
  height: 46%;
  border: 5px solid var(--ink);
  background:
    linear-gradient(135deg, transparent 43%, var(--ink) 44% 49%, transparent 50%),
    linear-gradient(var(--blue), var(--blue)) 18% 72% / 24% 14px no-repeat,
    linear-gradient(var(--orange), var(--orange)) 54% 53% / 24% 14px no-repeat,
    var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}

.poster-dot {
  position: absolute;
  width: 62px;
  height: 62px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: #ffd400;
  box-shadow: 5px 5px 0 var(--ink);
  animation: stickerWobble 4.2s ease-in-out infinite;
}

.poster-dot.d1 { right: 14%; top: 18%; }
.poster-dot.d2 { left: 12%; bottom: 8%; width: 82px; height: 82px; background: var(--blue); animation-delay: -1.5s; }

.poster-arrow {
  position: absolute;
  right: 15%;
  bottom: 13%;
  width: 110px;
  height: 110px;
  background: var(--white);
  clip-path: polygon(12% 43%, 58% 43%, 58% 18%, 100% 50%, 58% 82%, 58% 57%, 12% 57%);
  filter: drop-shadow(5px 5px 0 var(--ink));
  transform: rotate(-18deg);
}

.hero-upcoming-panel {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
  max-height: min(620px, calc(100vh - 150px));
  padding: clamp(18px, 2vw, 26px);
  border: var(--line);
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 12%, #ffd400 0 38px, transparent 39px),
    radial-gradient(circle at 7% 92%, rgba(0,87,255,.2) 0 44px, transparent 45px),
    radial-gradient(circle, rgba(0,0,0,.13) 2px, transparent 2px) 0 0 / 24px 24px,
    var(--orange);
  box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(1deg);
}

.hero-upcoming-panel::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 86px;
  height: 86px;
  background: var(--white);
  clip-path: polygon(12% 43%, 58% 43%, 58% 18%, 100% 50%, 58% 82%, 58% 57%, 12% 57%);
  filter: drop-shadow(4px 4px 0 var(--ink));
  opacity: .22;
  pointer-events: none;
}

.hero-upcoming-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: start;
}

.hero-upcoming-head .affiliate-kicker {
  grid-column: 1 / -1;
  width: fit-content;
  margin-bottom: 0;
}

.hero-upcoming-head strong {
  max-width: 430px;
  color: var(--white);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 900;
  line-height: .9;
  text-shadow: 5px 5px 0 var(--ink);
}

.hero-upcoming-head em {
  display: grid;
  place-items: center;
  width: 58px;
  height: 42px;
  border: 3px solid var(--ink);
  color: #ffd400;
  background: var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,.34);
  font-style: normal;
  font-weight: 900;
}

.hero-upcoming-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  max-height: 390px;
  overflow: auto;
  padding: 2px 8px 8px 2px;
}

.hero-upcoming-list .workshop-card {
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 8px 14px;
  min-height: 152px;
  padding: 12px;
  text-align: left;
}

.hero-upcoming-list .workshop-thumb {
  grid-row: 1 / 4;
  height: 100%;
  min-height: 122px;
}

.hero-upcoming-list .workshop-meta {
  margin: 0;
  font-size: 12px;
}

.hero-upcoming-list .workshop-card strong {
  font-size: clamp(22px, 2vw, 34px);
  line-height: .98;
}

.hero-upcoming-list .workshop-short {
  font-size: 14px;
  line-height: 1.25;
}

.hero-upcoming-list .workshop-empty {
  min-height: 210px;
}

.hero-upcoming-list .workshop-empty h3 {
  font-size: clamp(36px, 5vw, 70px);
}

.hero-past-link {
  position: relative;
  z-index: 1;
  width: fit-content;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 900;
}

@keyframes workshopSparkFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

.workshop-choice-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: clamp(28px, 4vw, 52px) clamp(22px, 5vw, 80px);
  border-bottom: var(--line);
  background: var(--paper);
}

.workshop-choice-strip .workshop-choice-card {
  min-height: 210px;
}

.workshop-page-section {
  padding-top: clamp(46px, 6vw, 86px);
}

.workshop-page-section .workshop-panel {
  grid-template-columns: 1fr;
  align-items: start;
}

.workshop-page-section .workshop-copy {
  position: relative;
  top: auto;
}

.workshop-page-section .workshop-copy p {
  max-width: 680px;
}

.workshop-page-past {
  display: block;
  padding: clamp(58px, 7vw, 96px) clamp(22px, 5vw, 80px);
  border-top: var(--line);
  background: var(--orange);
}

.workshop-page-past .past-workshop-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  max-width: 900px;
  color: var(--white);
}

.workshop-page-past .past-workshop-head h2 {
  max-width: 760px;
  font-size: clamp(48px, 7vw, 98px);
  line-height: .94;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--white);
  text-shadow: 7px 7px 0 var(--ink);
}

.workshop-page-past .past-workshop-head .section-label {
  width: fit-content;
  font-size: clamp(32px, 4.6vw, 68px);
}

.workshop-panel h2 {
  overflow-wrap: normal;
  word-break: normal;
}

.workshop-page-past .past-workshop-head p {
  color: var(--white);
  font-weight: 800;
}

.workshop-list-modal {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: none;
}

.workshop-list-modal.is-open {
  display: block;
}

.workshop-list-card {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  width: min(980px, calc(100vw - 48px));
  overflow: auto;
  border: var(--line);
  background: var(--blue);
  color: var(--white);
  box-shadow: 9px 9px 0 var(--ink);
  padding: clamp(24px, 4vw, 44px);
  animation: flyout 180ms ease-out;
}

.workshop-list-card h2 {
  margin-bottom: 28px;
  text-shadow: 6px 6px 0 var(--ink);
}

.workshop-list-panel > p {
  max-width: 760px;
}

@media (max-width: 950px) {
  .site-header {
    min-height: 72px;
    padding: 12px 18px;
  }

  .brand-logo {
    height: 50px;
    max-width: 124px;
  }

  .desktop-nav,
  .site-header .talk-button {
    display: none;
  }

  .menu-button {
    display: block;
    position: absolute;
    top: 14px;
    right: 18px;
  }

  .mobile-nav.is-open {
    display: grid;
    gap: 12px;
  }

  .hero {
    height: calc(100vh - 136px);
    min-height: 690px;
  }

  .floating.video-badge {
    width: 94px;
    left: 7%;
  }

  .commission-coin {
    width: 76px;
    left: 10%;
    bottom: 10%;
  }

  .rate-card {
    right: 14px;
    top: 62%;
    padding: 12px 16px;
    font-size: 18px;
  }

  .intro-band,
  .split-heading,
  .works-head,
  .contact-section,
  .workshop-panel,
  .workshop-copy,
  .past-workshop-head,
  .affiliate-hero,
  .affiliate-blue-band,
  .affiliate-fit-section,
  .affiliate-apply,
  .merged-workshop-section .workshop-panel {
    grid-template-columns: 1fr;
  }

  .intro-stats,
  .feature-grid,
  .workshop-list,
  .affiliate-step-grid,
  .affiliate-benefits {
    grid-template-columns: 1fr;
  }

  .affiliate-hero {
    min-height: auto;
  }

  .affiliate-visual {
    min-height: 470px;
  }

  .affiliate-hero h1 {
    font-size: clamp(54px, 15vw, 86px);
  }

  .affiliate-apply {
    align-items: start;
  }

  .affiliate-apply-button {
    width: fit-content;
  }

  .affiliate-float-cta {
    right: 14px;
    bottom: 14px;
    min-height: 52px;
    padding-right: 14px;
    font-size: 13px;
  }

  .affiliate-float-icon {
    width: 30px;
    height: 30px;
  }

  .workshop-float-cta {
    left: 14px;
    bottom: 14px;
    min-height: 52px;
    padding: 9px 15px 9px 10px;
    font-size: 13px;
  }

  .workshop-float-icon {
    width: 31px;
    height: 28px;
  }

  .workshop-page-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 54px 20px 62px;
  }

  .workshop-page-copy h1 {
    font-size: clamp(68px, 18vw, 118px);
  }

  .workshop-page-copy {
    padding: 16px 0;
  }

  .workshop-page-copy::before {
    inset: -10px -14px -10px -14px;
    width: auto;
    background: rgba(0, 87, 255, .82);
  }

  .workshop-page-copy p {
    font-size: 19px;
  }

  .workshop-page-poster {
    min-height: 340px;
    transform: scale(.94) rotate(1.2deg);
    transform-origin: center;
  }

  .hero-upcoming-panel {
    max-height: none;
    transform: rotate(.6deg);
  }

  .hero-upcoming-list {
    max-height: 430px;
  }

  .workshop-choice-strip {
    grid-template-columns: 1fr;
    padding: 22px 14px;
  }

  .workshop-page-section .workshop-panel {
    grid-template-columns: 1fr;
  }

  .workshop-page-section .workshop-copy {
    position: static;
  }

  .workshop-page-past {
    padding: 46px 14px;
  }

  .feature-card {
    min-height: 300px;
    grid-template-rows: 92px auto 1fr;
  }

  .stat-card {
    min-height: 132px;
  }

  .stat-card strong {
    font-size: clamp(42px, 14vw, 64px);
  }

  .workshop-panel h2 {
    max-width: 100%;
    font-size: clamp(40px, 12vw, 62px);
    white-space: normal;
  }

  .workshop-card {
    grid-template-columns: 1fr;
  }

  .workshop-thumb {
    grid-row: auto;
    min-height: 180px;
  }

  .past-workshop-grid {
    grid-template-columns: 1fr;
  }

  .brand-modal-card {
    inset: 16px;
    width: auto;
  }

  .modal-card {
    inset: 16px;
    width: auto;
  }

  .workshop-choice-grid {
    grid-template-columns: 1fr;
  }

  .workshop-list-card {
    inset: 16px;
    width: auto;
  }

  .work-row {
    grid-template-columns: 1fr;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  body {
    padding-bottom: 78px;
  }

  .site-header {
    min-height: 74px;
  }

  .mobile-nav.is-open {
    padding: 18px 20px 20px;
    background: var(--orange);
  }

  .mobile-nav a,
  .mobile-nav button {
    width: 100%;
    padding: 12px 14px;
    border: 3px solid var(--ink);
    color: var(--white);
    background: var(--blue);
    box-shadow: 4px 4px 0 var(--ink);
  }

  .hero {
    height: auto;
    min-height: 690px;
    padding: 34px 18px 24px;
  }

  .hero-mark {
    top: 48%;
    z-index: 4;
  }

  .hero-logo {
    width: min(330px, 76vw);
  }

  .hero-mark p {
    margin-top: -8px;
    padding: 7px 13px;
  }

  .floating.video-badge {
    top: 8%;
    left: 7%;
    width: 92px;
    z-index: 3;
  }

  .commission-coin {
    left: 8%;
    bottom: 13%;
    width: 76px;
    z-index: 3;
  }

  .rate-card {
    right: 5%;
    top: 66%;
    z-index: 3;
    max-width: 42vw;
    padding: 10px 12px;
    font-size: clamp(14px, 4vw, 18px);
    white-space: nowrap;
  }

  .plus {
    top: 1.2%;
    left: 60%;
    font-size: 34px;
  }

  .social-sprinkles {
    opacity: .72;
  }

  .sprinkle {
    opacity: .58;
  }

  .ticker span {
    font-size: 24px;
  }

  .home-affiliate-hero {
    padding: 46px 20px 42px;
  }

  .workshop-page-actions {
    display: grid;
  }

  .workshop-page-actions .talk-button,
  .workshop-page-actions .white-button {
    width: 100%;
  }

  .workshop-hero-sparks span {
    min-width: 72px;
    min-height: 38px;
    padding: 8px 11px;
    font-size: 15px;
  }

  .workshop-page-poster {
    min-height: 300px;
    transform: scale(.96) rotate(.8deg);
  }

  .hero-upcoming-panel {
    padding: 16px;
    transform: none;
  }

  .hero-upcoming-head strong {
    font-size: clamp(34px, 11vw, 48px);
  }

  .hero-upcoming-list {
    max-height: 420px;
  }

  .hero-upcoming-list .workshop-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero-upcoming-list .workshop-thumb {
    grid-row: auto;
    min-height: 120px;
  }

  .poster-ticket {
    font-size: 22px;
  }

  .affiliate-hero {
    gap: 22px;
  }

  .home-affiliate-hero .affiliate-orbit {
    opacity: .22;
  }

  .home-affiliate-hero .orbit-icon {
    transform: scale(.78);
  }

  .home-affiliate-hero .oi2,
  .home-affiliate-hero .oi3,
  .home-affiliate-hero .oi6,
  .home-affiliate-hero .oi10,
  .home-affiliate-hero .oi12 {
    display: none;
  }

  .affiliate-hero-copy {
    z-index: 3;
  }

  .affiliate-hero h1 {
    font-size: clamp(46px, 14vw, 64px);
    line-height: .9;
  }

  .affiliate-hero p {
    font-size: 17px;
    line-height: 1.38;
  }

  .affiliate-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .affiliate-actions .talk-button,
  .affiliate-actions .white-button {
    width: 100%;
  }

  .affiliate-visual {
    min-height: 390px;
  }

  .affiliate-phone {
    width: min(250px, 74vw);
  }

  .affiliate-node {
    width: 88px;
    height: 52px;
    font-size: 13px;
  }

  .affiliate-coin {
    width: 72px;
    font-size: 26px;
  }

  .affiliate-sticker-wall {
    min-height: 330px;
  }

  .big-affiliate-cta {
    min-height: 660px;
    padding: 88px 20px 96px;
    place-items: center;
  }

  .big-affiliate-cta h2 {
    max-width: 100%;
    font-size: clamp(38px, 11.8vw, 54px);
    line-height: .94;
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 900;
    text-shadow: none;
    -webkit-text-stroke: .45px var(--ink);
  }

  .big-affiliate-cta p {
    max-width: 94%;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.42;
  }

  .big-affiliate-cta .affiliate-kicker {
    margin-bottom: 14px;
  }

  .crowd-avatar {
    transform: scale(.62) rotate(var(--r, -5deg));
    opacity: .96;
  }

  .crowd-avatar.a1 { left: -8%; bottom: 7%; }
  .crowd-avatar.a2 { right: -8%; bottom: 8%; }
  .crowd-avatar.a3 { left: 5%; top: 5%; }
  .crowd-avatar.a4 { right: 5%; top: 5%; }
  .crowd-bubble.b1 { left: 20%; top: 17%; transform: scale(.82); }
  .crowd-bubble.b2 { right: 19%; bottom: 22%; transform: scale(.82); }
  .crowd-bubble.b3 { right: 5%; top: 58%; transform: scale(.78); }

  .affiliate-apply-button {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .affiliate-section,
  .affiliate-fit-section {
    padding: 48px 20px;
  }

  .section-label {
    font-size: 16px;
  }

  .split-heading {
    gap: 22px;
  }

  .split-heading h2 {
    font-size: clamp(42px, 12vw, 58px);
    line-height: .94;
  }

  .affiliate-step-card {
    min-height: 260px;
    padding: 22px;
  }

  .affiliate-fit-section {
    gap: 24px;
  }

  .affiliate-sticker-wall span {
    min-width: 136px;
    min-height: 68px;
    max-width: 82%;
    padding: 13px 18px;
    font-size: clamp(26px, 9vw, 38px);
  }

  .sticker-share {
    left: 7%;
  }

  .sticker-earn {
    right: 5%;
  }

  .sticker-track {
    left: 12%;
  }

  .workshop-section {
    padding: 22px 14px 34px;
  }

  .workshop-panel {
    padding: 26px 18px;
    gap: 24px;
  }

  .workshop-panel h2 {
    margin-bottom: 12px;
    font-size: clamp(46px, 15vw, 62px);
    line-height: .9;
  }

  .workshop-panel p {
    max-width: 100%;
    font-size: 17px;
  }

  .workshop-choice-card {
    min-height: auto;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    padding: 18px;
    column-gap: 14px;
  }

  .workshop-choice-icon {
    width: 54px;
    height: 54px;
  }

  .workshop-choice-card .workshop-choice-title {
    font-size: clamp(25px, 7.6vw, 33px);
    line-height: .98;
  }

  .workshop-choice-card small {
    font-size: 13px;
  }

  .workshop-choice-card strong {
    font-size: 13px;
  }

  .workshop-choice-card em {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 32px;
    font-size: 15px;
  }

  .workshop-choice-card::after {
    right: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  .workshop-list-card {
    inset: 10px;
    padding: 22px 16px;
  }

  .workshop-list-card h2 {
    font-size: clamp(42px, 13vw, 58px);
    line-height: .92;
  }

  .workshop-list {
    grid-template-columns: 1fr;
  }

  .workshop-card,
  .past-workshop-card {
    min-height: auto;
  }

  .modal-card,
  .brand-modal-card {
    inset: 10px;
    width: auto;
  }

  .modal-thumb {
    min-height: 180px;
  }

  .modal-body {
    padding: 22px;
  }

  .modal-body h2,
  .brand-modal-card h2 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .affiliate-float-cta {
    max-width: calc(58vw - 18px);
    left: auto;
    right: 14px;
    bottom: 12px;
    justify-content: center;
    min-height: 48px;
    padding: 8px 12px;
    font-size: 12px;
  }

  .affiliate-float-icon {
    width: 26px;
    height: 26px;
  }

  .workshop-float-cta {
    left: 14px;
    bottom: 12px;
    max-width: calc(42vw - 18px);
    min-height: 48px;
    padding: 8px 10px;
    gap: 7px;
    font-size: 11px;
  }

  .workshop-float-icon {
    width: 25px;
    height: 23px;
  }
}