html[data-visual-theme="bubble-natal"] .lp-hero-banner--video {
  width: min(238px, 64vw);
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
html[data-visual-theme="bubble-natal"] .lp-hero-banner--video::before,
html[data-visual-theme="bubble-natal"] .lp-hero-banner--video::after { content: none; }
html[data-visual-theme="bubble-natal"] .lp-video-link {
  width: min(238px, 64vw);
  margin-inline: auto;
  border: 2px solid #e7c27e;
  border-radius: 23px;
  background: #0b241e;
  box-shadow: 0 0 0 5px #a6304433, 0 14px 40px #020f0b80;
}
html[data-visual-theme="bubble-natal"] .lp-video-link::after { content: none; }
html[data-visual-theme="bubble-natal"] .lp-video-link .christmas-demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1294;
  object-fit: contain;
  opacity: 1;
  filter: none;
}
html[data-visual-theme="bubble-natal"] .lp-video-link::before { content: none; }
html[data-visual-theme="bubble-natal"] .modal:has(.result-modal) { max-height: calc(100dvh - 32px); overflow-y: auto; }
html[data-visual-theme="bubble-natal"] .result-modal--win .result-win-banner {
  margin: -20px -20px 8px;
  padding: 4px 10px 0;
  background: radial-gradient(ellipse at 50% 70%, #edc15d21, transparent 70%);
}
html[data-visual-theme="bubble-natal"] .result-modal--win .result-win-banner img {
  display: block;
  width: min(100%, 280px);
  height: 190px;
  max-height: 28dvh;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px #001b1670);
}
html[data-visual-theme="bubble-natal"] .result-modal--lose .lose-badge {
  width: min(100%, 265px);
  height: 185px;
  max-height: 28dvh;
  margin: -12px auto 8px;
  background: transparent;
  border: 0;
  animation: none;
}
html[data-visual-theme="bubble-natal"] .result-modal--lose .lose-witch-badge img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px #001b1670);
  animation: none;
}
html[data-visual-theme="bubble-natal"] .result-modal--lose .lose-badge:not(.lose-witch-badge)::before {
  width: 100%; height: 100%; aspect-ratio: auto;
  background: url('/images/themes/bubble-natal/santa-lose-3d-v1.png') center / contain no-repeat;
  filter: drop-shadow(0 7px 9px #001b1670);
  animation: none;
}
.christmas-referral-guide-overlay { z-index: 1000010; }
.christmas-referral-guide-overlay .modal {
  position: relative;
  box-sizing: border-box;
  width: min(420px, 100%);
  max-height: calc(100dvh - 34px);
  padding: 30px 23px 22px;
  overflow-y: auto;
  border: 1px solid #e3c381;
  border-radius: 25px;
  color: #fff7df;
  background: radial-gradient(ellipse at 15% 0, #c14b4533, transparent 60%), linear-gradient(155deg, #194d37, #08281f 70%);
  box-shadow: 0 0 0 4px #e4c17d14, 0 24px 80px #0009;
}
.christmas-referral-guide { text-align: center; }
.christmas-referral-guide h2 { margin: 12px 10px 15px; font-size: clamp(22px, 6vw, 28px); line-height: 1.13; color: #fff4d6; }
.crg-close { position: absolute; top: 10px; right: 11px; width: 34px; height: 34px; border: 1px solid #e9cc8a70; border-radius: 50%; background: #963148; color: #fff; font: 25px/1 system-ui; cursor: pointer; }
.crg-kicker { padding-inline: 16px; color: #f1d08c; font: 800 9px/1.5 system-ui, sans-serif; letter-spacing: .12em; }
.crg-progress { display: flex; justify-content: center; gap: 6px; margin: 0 0 18px; }
.crg-progress span { width: 23px; height: 4px; border-radius: 4px; background: #d9c39533; }
.crg-progress .is-current { background: #f3ce84; }
.crg-symbol { margin: 10px 0 14px; font-size: 52px; line-height: 1.1; }
.crg-step p { margin: 10px 0; color: #e1e9de; font: 400 14px/1.6 system-ui, sans-serif; }
.crg-rate-label { display: block; color: #d6e6d7; font: 800 10px/1.5 system-ui; letter-spacing: .08em; }
.crg-rate { display: block; margin: 6px 0; color: #ffe19e; font: 950 60px/1.15 system-ui, sans-serif; }
.crg-example { display: grid; gap: 4px; margin: 18px 0; padding: 15px 13px; border: 1px solid #e3c38155; border-radius: 15px; background: #f1cd860c; color: #fff0cf; font: 650 14px/1.55 system-ui, sans-serif; }
.crg-example > span { font-size: 9px; letter-spacing: .06em; }
.crg-example > strong { font-size: 32px; line-height: 1.3; color: #ffdf98; }
.crg-example > small { font-size: 12px; color: #d3dfd0; }
.crg-step .crg-footnote { color: #b6cec0; font-size: 11px; line-height: 1.5; }
.crg-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 22px; }
.crg-actions .btn { min-height: 46px; padding-inline: 12px; white-space: normal; font-size: 13px; }
.crg-actions .btn-accent { color: #fff6df; border-color: #e6ad8e; background: linear-gradient(180deg, #c34257, #8c233a); }
.crg-actions .btn:disabled { opacity: .4; }
.christmas-referral-guide :is(button,a):focus-visible { outline: 3px solid #ffe19e; outline-offset: 3px; }
.crg-launch { width: 100%; margin: 0 0 14px; padding: 12px; border: 1px solid #d7ba795c; border-radius: 12px; background: #a72f4340; color: #ffe2a0; font: 800 12px/1.4 system-ui, sans-serif; cursor: pointer; }
@media (max-height: 650px) {
  .christmas-referral-guide-overlay .modal { padding: 26px 20px 17px; }
  .crg-symbol { font-size: 36px; margin-block: 5px; }
  .crg-rate { font-size: 45px; }
  .crg-example { margin-block: 12px; padding: 10px; }
  .crg-actions { margin-top: 15px; }
}

/* Christmas referral design shipped with the main Christmas experience. */
@font-face { font-family: 'Christmas Display'; src: url('/assets/fonts/berkshire-swash-regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Christmas Body'; src: url('/assets/fonts/manrope-regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Christmas Body'; src: url('/assets/fonts/manrope-bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide-overlay .modal {
  isolation: isolate;
  width: min(420px, 100%);
  padding: 21px 24px 22px;
  border: 1px solid #e8cb8e;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 0, #bfa95c20, transparent 45%), radial-gradient(ellipse at 0 100%, #8b283b1c, transparent 58%), linear-gradient(160deg, #194b37, #10392d 48%, #08281f);
  box-shadow: 0 0 0 5px #d9bb7c0d, inset 0 1px #fff5d12b, 0 26px 80px #000a;
  font-family: 'Christmas Body', sans-serif;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide-overlay .modal::before,
html[data-visual-theme="bubble-natal"] .christmas-referral-guide-overlay .modal::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  width: 99px;
  height: 145px;
  background: url('/images/themes/bubble-natal/tutorial-garland.svg') left top / contain no-repeat;
  pointer-events: none;
  opacity: .94;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide-overlay .modal::before { left: 0; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide-overlay .modal::after { right: 0; transform: scaleX(-1); }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide-overlay .christmas-referral-guide {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f7f3df;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide::before {
  content: none;
  display: none;
}
html[data-visual-theme="bubble-natal"] .crg-hero { position: relative; display: grid; place-items: center; height: 145px; margin: -7px -6px 9px; isolation: isolate; pointer-events: none; }
html[data-visual-theme="bubble-natal"] .crg-hero-halo { position: absolute; z-index: -1; inset: 9px 18%; border-radius: 50%; background: radial-gradient(ellipse, #f2ce6c35, #d7b96b09 60%, transparent 75%); }
html[data-visual-theme="bubble-natal"] .crg-hero-santa { display: block; width: 190px; height: 145px; object-fit: contain; filter: drop-shadow(0 8px 9px #001c1570); }
html[data-visual-theme="bubble-natal"] .crg-hero-gift { position: absolute; bottom: 6px; width: 43px; height: 43px; object-fit: contain; filter: drop-shadow(0 4px 4px #001c1580); }
html[data-visual-theme="bubble-natal"] .crg-hero-gift--left { left: calc(50% - 112px); rotate: -12deg; }
html[data-visual-theme="bubble-natal"] .crg-hero-gift--right { right: calc(50% - 112px); rotate: 12deg; }
html[data-visual-theme="bubble-natal"] .crg-hero-star { position: absolute; color: #ffe6a4; line-height: 1; text-shadow: 0 0 12px #f0cb6c55; }
html[data-visual-theme="bubble-natal"] .crg-hero-star--left { top: 31px; left: calc(50% - 116px); font-size: 19px; }
html[data-visual-theme="bubble-natal"] .crg-hero-star--right { top: 18px; right: calc(50% - 108px); font-size: 28px; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-kicker {
  margin: 0 0 5px;
  padding: 0 12px;
  color: #e6c988;
  font: 700 9px/1.5 'Christmas Body', sans-serif;
  letter-spacing: .13em;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide h2 {
  margin: 5px 0 13px;
  color: #ffe9b7;
  font: 400 clamp(28px, 7.2vw, 35px)/1.15 'Christmas Display', Georgia, serif;
  text-wrap: balance;
  text-shadow: 0 2px 3px #011b13;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-progress { margin-bottom: 15px; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-progress span { width: 28px; height: 4px; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-progress .is-current { background: linear-gradient(90deg, #b88b48, #ffe6a6, #d9b372); }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-step p {
  margin: 10px 0;
  color: #e4eee2;
  font: 400 14px/1.65 'Christmas Body', sans-serif;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-symbol { display: none; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-example {
  margin: 15px 0;
  padding: 15px 14px;
  border-color: #d7b77b70;
  border-radius: 16px;
  background: linear-gradient(130deg, #e6c8890d, #e6c88903);
  box-shadow: inset 0 1px #fff3d00a;
  font: 700 13px/1.6 'Christmas Body', sans-serif;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-rate { font-family: 'Christmas Display', Georgia, serif; font-weight: 400; color: #ffe1a0; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-rate-label { font-family: 'Christmas Body', sans-serif; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-example > strong { font: 400 34px/1.3 'Christmas Display', Georgia, serif; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-step .crg-footnote { color: #b8cec0; font: 400 11px/1.6 'Christmas Body', sans-serif; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-close {
  width: 36px;
  height: 36px;
  top: 11px;
  right: 11px;
  border-color: #f5d497;
  background: linear-gradient(145deg, #c95162, #832439);
  box-shadow: 0 3px 9px #031b156b;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-actions { gap: 9px; margin-top: 18px; }
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-actions .btn {
  min-height: 46px;
  border-radius: 12px;
  font: 700 12px/1.4 'Christmas Body', sans-serif;
  letter-spacing: .02em;
}
html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-actions .btn-accent {
  color: #fff4d6;
  border: 1px solid #edc78c;
  background: linear-gradient(180deg, #c94b5d, #8f293d);
  box-shadow: inset 0 1px #ffe9b836, 0 4px 0 #5c1c2c, 0 8px 18px #001e1730;
}
@media (max-height: 700px) {
  html[data-visual-theme="bubble-natal"] .crg-hero { height: 106px; margin-bottom: 6px; }
  html[data-visual-theme="bubble-natal"] .crg-hero-santa { height: 106px; width: 150px; }
  html[data-visual-theme="bubble-natal"] .christmas-referral-guide h2 { font-size: 29px; }
  html[data-visual-theme="bubble-natal"] .christmas-referral-guide .crg-example { padding: 11px 12px; margin-block: 12px; }
}
@media (max-height: 550px) {
  html[data-visual-theme="bubble-natal"] .crg-hero { height: 80px; }
  html[data-visual-theme="bubble-natal"] .crg-hero-santa { height: 80px; width: 116px; }
  html[data-visual-theme="bubble-natal"] .christmas-referral-guide-overlay .modal { padding-block: 15px 17px; }
  html[data-visual-theme="bubble-natal"] .christmas-referral-guide h2 { font-size: 27px; }
}