/** Shopify CDN: Minification failed

Line 105:0 Unexpected "}"
Line 270:2 Unexpected "="

**/


/* Add your theme customizations below */

/* logo: bigger, continuous white → brand colours → white pop */
.sg-header .sg-logo span,
.sg-drawer .sg-logo span {
  display: inline-block;
  font-size: 25px !important;
  line-height: 1.25;
  padding: 0 .05em .16em;   /* room for the g's tail so it isn't cut off */
  margin-bottom: -.16em;
  background: linear-gradient(100deg,
    #ffffff 0%, #ffffff 30%,
    #ff6fb5 38%, #b06cff 45%, #6fc8ff 52%, #5fd99a 59%, #ffc93c 66%,
    #ffffff 74%, #ffffff 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px #2d1f4a;
  transform-origin: 50% 60%;
  animation: sg-logo-pop 2.4s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes sg-logo-pop {
  0%   { background-position: 100% 0; transform: scale(1); }
  40%  { transform: scale(1.07) rotate(-1.5deg); }
  55%  { transform: scale(.97) rotate(1deg); }
  70%  { transform: scale(1.02); }
  100% { background-position: 0% 0; transform: scale(1); }
}
.sg-header .sg-logo:hover span { animation-duration: 1.2s; }
@media (max-width: 900px) {
  .sg-header .sg-logo span,
  .sg-drawer .sg-logo span { font-size: 21px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-header .sg-logo span,
  .sg-drawer .sg-logo span { animation: none; background-position: 50% 0; }
}
/* footer word: smooth flowing colour gradient across letters on hover */
.sg-footer__word span {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), color .3s, -webkit-text-stroke-color .3s;
}
.sg-footer__word:hover span {
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke-color: currentColor !important;
  animation: sg-foot-flow 3s linear infinite;
}
@keyframes sg-foot-flow {
  0%   { color: #ff6fb5; }
  20%  { color: #b06cff; }
  40%  { color: #6fc8ff; }
  60%  { color: #5fd99a; }
  80%  { color: #ffc93c; }
  100% { color: #ff6fb5; }
}
.sg-footer__word:hover span:nth-child(2)  { animation-delay: -.2s; }
.sg-footer__word:hover span:nth-child(3)  { animation-delay: -.4s; }
.sg-footer__word:hover span:nth-child(4)  { animation-delay: -.6s; }
.sg-footer__word:hover span:nth-child(5)  { animation-delay: -.8s; }
.sg-footer__word:hover span:nth-child(6)  { animation-delay: -1.0s; }
.sg-footer__word:hover span:nth-child(7)  { animation-delay: -1.2s; }
.sg-footer__word:hover span:nth-child(8)  { animation-delay: -1.4s; }
.sg-footer__word:hover span:nth-child(9)  { animation-delay: -1.6s; }
.sg-footer__word:hover span:nth-child(10) { animation-delay: -1.8s; }
.sg-footer__word:hover span:nth-child(11) { animation-delay: -2.0s; }
.sg-footer__word:hover span:nth-child(12) { animation-delay: -2.2s; }
.sg-footer__word:hover span:nth-child(13) { animation-delay: -2.4s; }
.sg-footer__word:hover span:nth-child(14) { animation-delay: -2.6s; }
.sg-footer__word span:hover {
  transform: translateY(-14px) rotate(-6deg);
}
@media (prefers-reduced-motion: reduce) {
  .sg-footer__word:hover span { animation: none; color: #ff6fb5; }
}
/* bestseller band: remove character + tighten gap */
.sg-band__char { display: none !important; }
.sg-band { margin-top: 64px !important; }
@media (max-width: 760px) {
  .sg-band { margin-top: 48px !important; }
}/* product page: move the jar character so it doesn't cover image text */
.sg-gallery__main .sg-gallery__peek {
  top: 4% !important;
  right: 4% !important;
  bottom: auto !important;
  width: 18% !important;
}
@media (max-width: 860px) {
  .sg-gallery__main .sg-gallery__peek {
    top: 2% !important;
    right: 2% !important;
    width: 15% !important;
  }
}/* stop the page sliding sideways (the "stuck" gap on the right) */

}
.sg-ribbon { margin-left: 0 !important; margin-right: 0 !important; }

/* drips: close the thin white line between the purple section and its drips */
.sg-band .sg-drips { top: calc(100% - 4px) !important; }

/* ribbon: wider than the screen so the tilted ends never show white corners */
.sg-ribbon {
  width: calc(100% + 60px) !important;
  margin-left: -30px !important;
  margin-right: 0 !important;
}

/* ribbon stars: smooth gentle wobble instead of a full spin (stops the pixelation) */
.sg-rstar {
  width: 28px !important;
  height: 28px !important;
  animation: sg-star-wobble 2.4s ease-in-out infinite !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes sg-star-wobble {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50%      { transform: rotate(12deg) scale(1.08); }
}
.sg-ribbon .sg-marquee { will-change: transform; backface-visibility: hidden; }
.sg-ribbon {
  border: 0 !important;
  box-shadow: 0 -3px 0 var(--sg-ink), 0 3px 0 var(--sg-ink) !important;
  transform: rotate(-1.5deg) translateZ(0) !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  outline: 1px solid transparent;
}/* bring back the bumpy edge on the bestseller section */
.sg-band, .sg-main, .shopify-section { overflow: visible !important; }
.sg-band .sg-wave { display: block !important; }
/* no rounded corners on product photos */
.sg-card__img img,
.sg-gallery__main img[data-sg-main-img],
.sg-swipe img,
.sg-thumb,
.sg-thumb img,
.sg-promo__main,
.sg-line__img,
.sg-line__img img,
.sg-toast img,
.sg-sticky-buy__in img,
.sg-rte img {
  border-radius: 0 !important;
}/* lock page width on mobile (stops the zoom-out gap) without hiding bumps or drips */
html, body {
  overflow-x: clip !important;
  max-width: 100% !important;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden !important; }
}
.sg-wrap, .sg-promo, .sg-banner, .sg-band { max-width: 100%; }
/* ===== recipe shelf: swipeable row of 2 (mobile) / 4 (desktop) + glow fix ===== */
#shop.sg-section { padding-bottom: 20px !important; }
#shop .sg-grid {
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 44px 20px 28px !important;
  margin: -44px -20px 0 !important;
  scroll-padding: 0 20px !important;
}
#shop .sg-grid::-webkit-scrollbar { display: none; }
#shop .sg-grid > .sg-card {
  flex: 0 0 calc((100% - 16px) / 2.2);   /* 2 cards + a peek of the next one */
  scroll-snap-align: start;
  min-width: 0;
}
#shop .sg-card__img::before {
  inset: 22% !important;
  filter: blur(18px) !important;
}
#shop .sg-card:hover .sg-card__img img,
#shop .sg-card:nth-child(even):hover .sg-card__img img {
  transform: translateY(-6px) scale(1.03) !important;
}
@media (min-width: 761px) {
  #shop .sg-grid { gap: 24px; }
  #shop .sg-grid > .sg-card { flex-basis: calc((100% - 72px) / 4.15); }
}
@media (max-width: 640px) {
  #shop .sg-grid {
    padding: 44px 16px 24px !important;
    margin: -44px -16px 0 !important;
    scroll-padding: 0 16px !important;
  }
}
@media (max-width: 760px) {
  #shop .sg-card { gap: 10px; }
  #shop .sg-card__title {
    font-size: 14px !important;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #shop .sg-price { font-size: 14px !important; }
  #shop .sg-plus { width: 32px !important; height: 32px !important; font-size: 16px !important; }
  #shop .sg-head { margin-bottom: 8px; }
  #shop .sg-head p { font-size: 14px; }
  #shop + .shopify-section .sg-section,
  #shop.sg-section + .sg-section { padding-top: 32px !important; }
}/* ===== tighter glows that never get cut off ===== */

/* recipe shelf + all product cards */
.sg-card__img::before {
  inset: 24% !important;
  filter: blur(14px) !important;
  opacity: 0;
}
.sg-card:hover .sg-card__img::before { opacity: .8 !important; transform: scale(1) !important; }
.sg-card__img img {
  filter: drop-shadow(0 6px 8px rgba(45,31,74,.12)) !important;
}
.sg-card:hover .sg-card__img img,
.sg-card:nth-child(even):hover .sg-card__img img {
  transform: translateY(-5px) scale(1.02) !important;
  filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 8px 10px rgba(45,31,74,.14)) !important;
}
#shop .sg-grid {
  padding: 48px 20px 32px !important;
  margin: -48px -20px 0 !important;
}
@media (max-width: 640px) {
  #shop .sg-grid {
    padding: 48px 16px 28px !important;
    margin: -48px -16px 0 !important;
  }
}

/* product page: main photo */
.sg-gallery__main { padding: 16px; }
.sg-gallery__main::before {
  inset: 20% !important;
  filter: blur(24px) !important;
  opacity: .55 !important;
}
.sg-gallery__main img[data-sg-main-img] {
  filter: drop-shadow(0 8px 10px rgba(45,31,74,.14)) !important;
}
.sg-gallery__main:hover img[data-sg-main-img] {
  transform: translateY(-4px) scale(1.01) !important;
  filter: drop-shadow(0 0 12px rgba(255,143,200,.6)) drop-shadow(0 10px 12px rgba(45,31,74,.16)) !important;
}

/* product page: mobile swipe gallery */
.sg-gallery.has-swipe .sg-swipe {
  padding: 20px 16px 16px !important;
  margin: -12px -16px 0 !important;
}
.sg-swipe img {
  filter: drop-shadow(0 6px 8px rgba(45,31,74,.14)) !important;
}
* ===== recipe shelf: eye-catching top-of-page panel ===== */
#shop .sg-wrap {
  position: relative;
  width: calc(100% - 24px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 26px 6px;
  border: 3px solid var(--sg-ink);
  border-radius: 36px;
  box-shadow: 0 8px 0 var(--sg-ink);
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,143,200,.45) 0, transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(143,230,180,.45) 0, transparent 42%),
    radial-gradient(rgba(126,84,214,.12) 1.5px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(160deg, #efe2ff, #fbf6ff);
}

/* sticker above the heading */
#shop .sg-head h2::before {
  content: "✦ fresh recipes";
  display: block;
  width: max-content;
  margin-bottom: 12px;
  padding: 6px 14px;
  border: 2px solid var(--sg-ink);
  border-radius: 999px;
  background: var(--sg-gold);
  box-shadow: 0 2px 0 var(--sg-ink);
  font: 700 12px/1.2 var(--sg-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sg-ink);
  -webkit-text-fill-color: var(--sg-ink);
  transform: rotate(-3deg);
  animation: sg-wiggle 3.2s ease-in-out infinite;
}

/* shimmering heading */
#shop .sg-head h2 {
  font-size: clamp(34px, 5vw, 56px) !important;
  padding-bottom: .08em;
  background: linear-gradient(90deg, var(--sg-ink) 0%, #7e54d6 30%, #d94a98 50%, #7e54d6 70%, var(--sg-ink) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sg-shelf-shine 6s linear infinite;
}
@keyframes sg-shelf-shine { to { background-position: -250% 0; } }

/* "see all" as a pill button */
#shop .sg-link {
  border: 2.5px solid var(--sg-ink) !important;
  border-radius: 999px;
  padding: 10px 18px !important;
  background: #fff;
  box-shadow: 0 3px 0 var(--sg-ink);
  font-weight: 700;
  transition: transform .2s;
}
#shop .sg-link:hover { transform: translateY(-2px); }

/* pastel plate behind each slime */
#shop .sg-card__img {
  background: radial-gradient(circle at 50% 58%, var(--glow) 0 44%, transparent 45%);
  border-radius: 50%;
}

/* price pill + bolder add button */
#shop .sg-price {
  background: #fff;
  border: 2px solid var(--sg-ink);
  border-radius: 999px;
  padding: 6px 10px;
}
#shop .sg-plus { background: var(--sg-pink-d) !important; box-shadow: 0 3px 0 var(--sg-ink); }

/* "new!" sticker on the first recipe */
#shop .sg-card:first-child .sg-card__img::after {
  content: "new!";
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  padding: 5px 10px;
  border: 2px solid var(--sg-ink);
  border-radius: 999px;
  background: var(--sg-mint);
  box-shadow: 0 2px 0 var(--sg-ink);
  font: 700 11px/1 var(--sg-body);
  text-transform: uppercase;
  color: var(--sg-ink);
  transform: rotate(6deg);
  animation: sg-wiggle 2.6s ease-in-out infinite;
}

/* mobile: swipe hint + soft fade on the right edge */
@media (max-width: 760px) {
  #shop .sg-wrap { padding: 22px 16px 4px; border-radius: 28px; }
  #shop .sg-head::after {
    content: "swipe →";
    font: 700 13px/1 var(--sg-body);
    color: var(--sg-ink2);
    animation: sg-swipe-nudge 1.6s ease-in-out infinite;
  }
  #shop .sg-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 26px;
    background: linear-gradient(90deg, transparent, rgba(251,246,255,.95));
    pointer-events: none;
  }
}
@keyframes sg-swipe-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  #shop .sg-head h2, #shop .sg-head h2::before, #shop .sg-card:first-child .sg-card__img::after, #shop .sg-head::after { animation: none; }
}/* ===== recipe shelf: tighter spacing + bigger heading ===== */
#shop.sg-section {
  padding-top: 20px !important;
  padding-bottom: 8px !important;
}
#shop .sg-head {
  margin-bottom: 0 !important;
  gap: 10px 16px !important;
  align-items: center !important;
}
#shop .sg-head h2 {
  font-size: clamp(44px, 7vw, 72px) !important;
  line-height: .95 !important;
}
#shop .sg-head h2::before { margin-bottom: 10px; }
#shop .sg-head p { margin-top: 6px !important; }
#shop .sg-grid {
  padding-top: 36px !important;
  margin-top: -24px !important;
  padding-bottom: 20px !important;
}
/* pull the next section closer */
#shop + .sg-band,
.shopify-section:has(#shop) + .shopify-section .sg-band {
  margin-top: 56px !important;
}

@media (max-width: 760px) {
  #shop.sg-section { padding-top: 12px !important; }
  #shop .sg-head h2 { font-size: 46px !important; }
  #shop .sg-head p { font-size: 15px !important; }
  #shop .sg-head > div { width: 100%; }
  #shop .sg-link { padding: 8px 16px !important; font-size: 14px; }
  #shop .sg-grid {
    padding-top: 28px !important;
    margin-top: -16px !important;
    padding-bottom: 16px !important;
  }
  #shop + .sg-band,
  .shopify-section:has(#shop) + .shopify-section .sg-band {
    margin-top: 44px !important;
  }
}/* ===== recipe shelf: sit higher, fix cropped letters, steady colours ===== */
.sg-banner { margin-bottom: 0 !important; }
#shop.sg-section { padding-top: 0 !important; }
#shop .sg-wrap { padding-top: 10px !important; }
#shop .sg-head h2::before { margin-bottom: 8px !important; }

/* heading: room for the p's tail + steady gradient (no shifting) */
#shop .sg-head h2 {
  line-height: 1.12 !important;
  padding-bottom: .16em !important;
  margin-bottom: -.12em !important;
  background: linear-gradient(90deg, var(--sg-ink) 0%, #7e54d6 45%, #d94a98 100%) !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  animation: none !important;
}

@media (max-width: 760px) {
  #shop .sg-wrap { padding-top: 6px !important; }
  #shop .sg-head h2::before { margin-bottom: 6px !important; }
}
/* scroll progress bar: custom star (hidden until you scroll) */
.sg-progress::after { display: none !important; }   /* hide the old pink dot */
.sg-header::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: calc(var(--sg-p, 0) * 100%);
  width: 30px;
  height: 30px;
  margin-left: -15px;
  background: url("/cdn/shop/files/decal_2.png?v=1791213078") center / contain no-repeat;
  opacity: clamp(0, calc(var(--sg-p, 0) * 40), 1);
  transform: rotate(calc(var(--sg-p, 0) * 720deg)) scale(clamp(.4, calc(var(--sg-p, 0) * 30), 1));
  filter: drop-shadow(0 2px 3px rgba(45,31,74,.3));
  pointer-events: none;
  z-index: 5;
}
@media (max-width: 760px) {
  .sg-header::after { width: 24px; height: 24px; margin-left: -12px; bottom: -11px; }
}/* ===== bestseller band: more fun, less random ===== */

/* remove the odd floating star */
.sg-promo__star { display: none !important; }

/* soft dotted pattern + slow light sweep across the purple */
.sg-band {
  background:
    radial-gradient(rgba(255,255,255,.22) 1.6px, transparent 1.8px) 0 0 / 22px 22px,
    var(--sg-c) !important;
  overflow: visible;
}
.sg-band .sg-wrap { position: relative; }
.sg-band .sg-wrap::before {
  content: "";
  position: absolute;
  inset: -40px -20px;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: sg-band-sweep 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes sg-band-sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.sg-promo { position: relative; z-index: 1; }

/* spinning sunburst behind the guide */
.sg-promo__art { isolation: isolate; }
.sg-promo__art::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.75) 0 28%, transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.35) 0 10deg, transparent 10deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 55%, transparent 70%);
          mask: radial-gradient(circle, #000 0 55%, transparent 70%);
  animation: sg-spin 28s linear infinite;
}

/* twinkling sparkles around the guide */
.sg-promo__art .sg-promo__main { position: relative; z-index: 1; }
.sg-promo__art > a,
.sg-promo__art { position: relative; }
.sg-promo__art::after {
  content: "instant\A PDF";
  white-space: pre;
  position: absolute;
  top: 2%;
  right: 0;
  z-index: 2;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  border: 3px solid var(--sg-ink);
  background: var(--sg-gold);
  box-shadow: 0 4px 0 var(--sg-ink);
  font: 700 12px/1.05 var(--sg-body);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sg-ink);
  animation: sg-wiggle 2.8s ease-in-out infinite;
}
.sg-promo__copy { position: relative; }
.sg-promo__copy::before,
.sg-promo__copy::after {
  content: "✦";
  position: absolute;
  color: #fff;
  font-size: 22px;
  text-shadow: 0 0 10px rgba(255,255,255,.9);
  animation: sg-twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.sg-promo__copy::before { top: -6px; right: 8%; }
.sg-promo__copy::after  { bottom: 18%; right: 2%; font-size: 16px; animation-delay: -1.2s; }

/* the guide floats and tilts gently */
.sg-promo__main {
  animation: sg-band-float 5s ease-in-out infinite !important;
  filter: drop-shadow(0 18px 22px rgba(45,31,74,.3)) !important;
}
@keyframes sg-band-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}

@media (max-width: 760px) {
  .sg-promo__art::after { width: 60px; height: 60px; font-size: 10px; right: -4%; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-band .sg-wrap::before, .sg-promo__art::before, .sg-promo__art::after,
  .sg-promo__copy::before, .sg-promo__copy::after, .sg-promo__main { animation: none !important; }
}/* bestseller band: shine covers the whole band and fades at the edges (no cropped look) */
.sg-band .sg-wrap::before { display: none !important; }
.sg-band { isolation: isolate; }
.sg-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  background-size: 300% 100%;
  animation: sg-band-sweep 7s ease-in-out infinite;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.sg-band > .sg-wrap { position: relative; z-index: 1; }
.sg-band .sg-wave, .sg-band .sg-drips { z-index: 1; }

/* sunburst: softer outer edge so it never looks clipped */
.sg-promo__art::before {
  inset: -4% !important;
  -webkit-mask: radial-gradient(circle, #000 0 40%, transparent 68%) !important;
          mask: radial-gradient(circle, #000 0 40%, transparent 68%) !important;
}
@media (prefers-reduced-motion: reduce) { .sg-band::after { animation: none; } }
/* ===== how it works: themed gradient cards ===== */
.sg-steps { counter-reset: sgstep; }
.sg-step {
  counter-increment: sgstep;
  position: relative;
  overflow: visible;
  isolation: isolate;
  border-radius: 28px !important;
  background:
    radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.6px) 0 0 / 16px 16px,
    var(--sg-step-grad) !important;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.sg-step:nth-child(1) { --sg-step-grad: linear-gradient(140deg, #fff3c4 0%, #ffd966 55%, #ffb36b 100%); }
.sg-step:nth-child(2) { --sg-step-grad: linear-gradient(140deg, #ffe0f0 0%, #ff8fc8 55%, #c79bff 100%); }
.sg-step:nth-child(3) { --sg-step-grad: linear-gradient(140deg, #dcfbe9 0%, #8fe6b4 55%, #8fdcff 100%); }

/* big faded number in the corner */
.sg-step::after {
  content: counter(sgstep);
  position: absolute;
  right: 18px;
  bottom: -6px;
  z-index: -1;
  font: 400 140px/1 var(--sg-display);
  color: rgba(255,255,255,.45);
  pointer-events: none;
}

/* number bubble: white with a coloured ring */
.sg-step__n { background: #fff !important; box-shadow: 0 3px 0 var(--sg-ink); }
.sg-step h3 { color: var(--sg-ink) !important; }
.sg-step p { color: var(--sg-ink) !important; opacity: .85; font-weight: 500; }

/* hover: lift + tilt */
.sg-step:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 11px 0 var(--sg-ink) !important; }
.sg-step:nth-child(2):hover { transform: translateY(-6px) rotate(1deg); }

/* mobile: a little more compact */
@media (max-width: 760px) {
  .sg-step { padding: 20px 20px 22px !important; }
  .sg-step::after { font-size: 110px; right: 14px; }
  .sg-steps { gap: 18px !important; }
}/* ===== youtube section: glowing "channel" panel ===== */
.sg-vid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 4.5vw, 52px);
  border: 3px solid var(--sg-ink);
  border-radius: 36px;
  box-shadow: 0 8px 0 var(--sg-ink);
  background: #2d1f4a;
  color: #fff;
}
/* drifting colour blobs behind everything */
.sg-vid::before,
.sg-vid::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  pointer-events: none;
}
.sg-vid::before {
  background: radial-gradient(circle, #ff6fb5, transparent 65%);
  top: -30%; left: -15%;
  animation: sg-vid-drift-a 12s ease-in-out infinite;
}
.sg-vid::after {
  background: radial-gradient(circle, #6fc8ff, transparent 65%);
  bottom: -35%; right: -15%;
  animation: sg-vid-drift-b 14s ease-in-out infinite;
}
@keyframes sg-vid-drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(25%,20%) scale(1.15); } }
@keyframes sg-vid-drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-25%,-15%) scale(1.1); } }

/* text in white */
.sg-vid__copy h2 { color: #fff !important; }
.sg-vid__copy p  { color: #e6d9ff !important; }
.sg-vid .sg-sticker--ink {
  background: #ff3d5a !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.35) !important;
}
.sg-vid .sg-live { background: #fff !important; }

/* video: white TV bezel + spinning rainbow glow ring */
.sg-vid__frame {
  position: relative;
  overflow: visible !important;
  border-radius: 26px !important;
  border: 6px solid #fff;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6) !important;
  transform: rotate(1.5deg);
  isolation: isolate;
}
.sg-vid__frame img,
.sg-vid__frame iframe { border-radius: 20px; }
.sg-vid__frame::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 34px;
  background: conic-gradient(from 0deg, #ff6fb5, #b06cff, #6fc8ff, #5fd99a, #ffc93c, #ff6fb5);
  filter: blur(14px);
  opacity: .75;
  animation: sg-spin 6s linear infinite;
}
.sg-vid__frame:hover { transform: rotate(-1deg) scale(1.03) !important; }

/* play button: bigger pulse */
.sg-vid__play { background: #ff3d5a !important; box-shadow: 0 0 0 0 rgba(255,61,90,.6); animation: sg-vid-pulse 1.8s ease-out infinite !important; }
.sg-vid__play::after { border-left-color: #fff !important; }
@keyframes sg-vid-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,61,90,.6); }
  70%  { box-shadow: 0 0 0 22px rgba(255,61,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,61,90,0); }
}

/* button: white so it pops on the dark panel */
.sg-vid .sg-btn--pink { --bb: #fff !important; --bc: #2d1f4a !important; }

@media (max-width: 760px) {
  .sg-vid { border-radius: 28px; padding: 22px 18px 26px; gap: 18px; }
  .sg-vid__frame { border-width: 4px; transform: none; }
  .sg-vid__frame::before { inset: -8px; filter: blur(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-vid::before, .sg-vid::after, .sg-vid__frame::before, .sg-vid__play { animation: none !important; }
}/* youtube video: colour-shifting glow instead of the spin */
.sg-vid__frame::before { display: none !important; }
.sg-vid__frame {
  border: 5px solid #fff !important;
  animation: sg-vid-glow 6s ease-in-out infinite;
}
@keyframes sg-vid-glow {
  0%, 100% { box-shadow: 0 0 22px 4px rgba(255,111,181,.75), 0 14px 30px -12px rgba(0,0,0,.6); }
  25%      { box-shadow: 0 0 26px 6px rgba(176,108,255,.75), 0 14px 30px -12px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 22px 4px rgba(111,200,255,.75), 0 14px 30px -12px rgba(0,0,0,.6); }
  75%      { box-shadow: 0 0 26px 6px rgba(95,217,154,.75),  0 14px 30px -12px rgba(0,0,0,.6); }
}
@media (max-width: 760px) {
  .sg-vid__frame { border-width: 4px !important; }
  @keyframes sg-vid-glow {
    0%, 100% { box-shadow: 0 0 14px 3px rgba(255,111,181,.75); }
    25%      { box-shadow: 0 0 16px 4px rgba(176,108,255,.75); }
    50%      { box-shadow: 0 0 14px 3px rgba(111,200,255,.75); }
    75%      { box-shadow: 0 0 16px 4px rgba(95,217,154,.75); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sg-vid__frame { animation: none; box-shadow: 0 0 20px 4px rgba(255,111,181,.6); }
}
/* youtube video: strong colour-shifting glow */
.sg-vid__frame {
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.6) !important;
  overflow: visible !important;
  isolation: isolate;
}
.sg-vid__frame[data-reveal] { opacity: 1 !important; }
.sg-vid__frame::after {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: 36px;
  background: #ff6fb5;
  filter: blur(20px);
  opacity: .95;
  pointer-events: none;
  animation: sg-vid-glow-bg 6s ease-in-out infinite;
}
@keyframes sg-vid-glow-bg {
  0%, 100% { background: #ff6fb5; transform: scale(1); }
  25%      { background: #b06cff; transform: scale(1.03); }
  50%      { background: #6fc8ff; transform: scale(1); }
  75%      { background: #5fd99a; transform: scale(1.03); }
}
@media (max-width: 760px) {
  .sg-vid__frame::after { inset: -8px; filter: blur(14px); border-radius: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-vid__frame::after { animation: none; }
}/* ===== FAQ: rainbow cards, more playful ===== */
.sg-faq__item { --faq-c: #ffd4ea; --faq-d: #e8399a; transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .3s; }
.sg-faq__item:nth-child(6n+1) { --faq-c: #ffd4ea; --faq-d: #e8399a; } /* pink   */
.sg-faq__item:nth-child(6n+2) { --faq-c: #ffe2c7; --faq-d: #ff7a2f; } /* orange */
.sg-faq__item:nth-child(6n+3) { --faq-c: #fff3b8; --faq-d: #e0a800; } /* yellow */
.sg-faq__item:nth-child(6n+4) { --faq-c: #d6f7e3; --faq-d: #2fbf71; } /* mint   */
.sg-faq__item:nth-child(6n+5) { --faq-c: #d6efff; --faq-d: #2b9bf0; } /* blue   */
.sg-faq__item:nth-child(6n+6) { --faq-c: #e9dcff; --faq-d: #7e54d6; } /* purple */

/* soft colour fill with tiny dots */
.sg-faq__item {
  background:
    radial-gradient(rgba(255,255,255,.55) 1.3px, transparent 1.5px) 0 0 / 14px 14px,
    var(--faq-c) !important;
}
.sg-faq__item.is-open {
  background:
    radial-gradient(rgba(255,255,255,.55) 1.3px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(140deg, var(--faq-c), #fff 120%) !important;
}

/* plus button matches each card */
.sg-faq__icon { background: var(--faq-d) !important; box-shadow: 0 3px 0 var(--sg-ink); }
.sg-faq__item.is-open .sg-faq__icon { background: var(--sg-ink) !important; }

/* playful hover + tap */
.sg-faq__item:hover { transform: translateY(-3px) rotate(-.6deg); }
.sg-faq__item:nth-child(even):hover { transform: translateY(-3px) rotate(.6deg); }
.sg-faq__item:hover .sg-faq__icon { transform: rotate(90deg) scale(1.08); }
.sg-faq__item.is-open:hover .sg-faq__icon { transform: rotate(135deg) scale(1.08); }
.sg-faq__q:active { transform: scale(.98); }

/* answer slides in with a little bounce */
.sg-faq__item.is-open .sg-faq__a p,
.sg-faq__item.is-open .sg-faq__a .sg-rte {
  animation: sg-faq-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sg-faq-pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.sg-faq__a p { color: var(--sg-ink) !important; }
.sg-faq__a a { color: var(--faq-d) !important; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .sg-faq__item, .sg-faq__item:hover { transform: none !important; }
  .sg-faq__item.is-open .sg-faq__a p, .sg-faq__item.is-open .sg-faq__a .sg-rte { animation: none; }
}/* ===== newsletter: subtle envelope in the email box ===== */
.sg-news .sg-input {
  padding-left: 52px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d1f4a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E")
    18px 50% / 22px 22px no-repeat,
    #fff !important;
  animation: sg-env-bob 2.8s ease-in-out infinite;
}
@keyframes sg-env-bob {
  0%, 100% { background-position: 18px 50%, 0 0; }
  50%      { background-position: 18px 38%, 0 0; }
}
.sg-news .sg-input:focus { animation: none; background-position: 18px 50%, 0 0; }

.sg-news .sg-btn { transition: transform .2s; }
.sg-news .sg-btn:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .sg-news .sg-input { animation: none; }
}/* "tap us!" hint above the footer characters */
.sg-footer__chars::before {
  content: "tap us! 🎉";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  padding: 8px 16px;
  border: 2.5px solid var(--sg-ink);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 0 var(--sg-ink);
  font: 700 14px/1 var(--sg-body);
  color: var(--sg-ink);
  white-space: nowrap;
  pointer-events: none;
  animation: sg-tapus 2.2s ease-in-out infinite;
}
.sg-footer__chars::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #fff;
  border-right: 2.5px solid var(--sg-ink);
  border-bottom: 2.5px solid var(--sg-ink);
  transform: rotate(45deg);
  pointer-events: none;
  animation: sg-tapus-tail 2.2s ease-in-out infinite;
}
@keyframes sg-tapus {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50%      { transform: translateX(-50%) translateY(-6px) rotate(2deg); }
}
@keyframes sg-tapus-tail {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(-6px) rotate(45deg); }
}
/* hide the hint while the party is on */
body.sg-party-on .sg-footer__chars::before,
body.sg-party-on .sg-footer__chars::after { opacity: 0; }
@media (max-width: 760px) {
  .sg-footer__chars::before { font-size: 12px; padding: 7px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-footer__chars::before, .sg-footer__chars::after { animation: none; }
}/* make the footer characters tappable */
.sg-footer__chars { pointer-events: auto !important; z-index: 20 !important; }
.sg-footer__chars img { pointer-events: auto !important; position: relative; z-index: 21; cursor: pointer; }
.sg-footer__chars::before, .sg-footer__chars::after { pointer-events: none !important; z-index: 22; }
/* hidden footer slime: smooth on desktop (no flicker) */
.sg-egg {
  height: 78px !important;
  transition: none !important;
  z-index: 25 !important;
  pointer-events: none;
}
.sg-egg__btn {
  pointer-events: auto;
  transform: translateY(32px);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
.sg-egg:hover .sg-egg__btn,
.sg-egg.is-up .sg-egg__btn { transform: translateY(0); }
.sg-egg__btn img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: none !important;
}
.sg-egg__bubble { z-index: 26 !important; }
@media (hover: hover) {
  .sg-egg__btn img { animation-duration: 4s !important; }
}/* hidden slime: pin to the bottom of the footer */
.sg-footer { position: relative !important; }
.sg-egg {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  right: clamp(16px, 5vw, 64px) !important;
  left: auto !important;
  width: 96px !important;
  height: 78px !important;
  overflow: hidden !important;
}
.sg-footer__base { position: relative; z-index: 1; }