/* Homepage demo keeps only the output artwork. */
.sale-home .match-product-pair.is-output-only { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.sale-home .match-product-pair.is-output-only .match-output { width: min(100%, 300px); }

/* Artwork and names only. Motion pauses outside the viewport. */
.bsg {
  --bsg-text: #eef3fd;
  --bsg-muted: #9eb1cd;
  --bsg-panel: #0d1b2c;
  --bsg-line: #7899cc33;
  color: var(--bsg-text);
  background: radial-gradient(ellipse at 8% 0%, #142a4a, transparent 63%), #080f19;
  padding: 64px 0;
  margin: 28px 0 40px;
  scroll-margin-top: 24px;
  isolation: isolate;
  color-scheme: dark;
}

.bsg .bsg-shell { width: min(1416px, calc(100% - 96px)); margin: auto; }
.bsg .bsg-heading { padding: 0 0 34px; }
.bsg .bsg-title { color: var(--bsg-text); font-size: clamp(28px, 2.65vw, 40px); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; margin: 0 0 12px; }
.bsg [hidden] { display: none !important; }
.bsg .bsg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bsg .bsg-card { min-width: 0; border: 1px solid var(--bsg-line); border-radius: 24px; background: var(--bsg-panel); overflow: hidden; }
.bsg .bsg-rabbit { --bsg-accent: #dac5ff; --bsg-wash: #8a6aad22; --bsg-period: 7s; --bsg-delay: 0s; --bsg-x: 49.4%; --bsg-y: 56.58%; --bsg-size: 56.7%; }
.bsg .bsg-deer { --bsg-accent: #f6bdcd; --bsg-wash: #b7788e23; --bsg-period: 8s; --bsg-delay: -1.4s; --bsg-x: 49.88%; --bsg-y: 64.35%; --bsg-size: 49.7%; }
.bsg .bsg-whale { --bsg-accent: #a6e6ff; --bsg-wash: #648cae25; --bsg-period: 8.5s; --bsg-delay: -2.8s; --bsg-x: 49.56%; --bsg-y: 60.05%; --bsg-size: 53.9%; }
.bsg .bsg-swan { --bsg-accent: #f4dac1; --bsg-wash: #b8968620; --bsg-period: 9s; --bsg-delay: -4.2s; --bsg-x: 49.96%; --bsg-y: 56.58%; --bsg-size: 54.8%; }
.bsg .bsg-stage { position: relative; isolation: isolate; aspect-ratio: 1 / 1.09; display: grid; place-items: center; padding: 7% 6% 2%; overflow: hidden; background: radial-gradient(ellipse at 50% 63%, var(--bsg-wash), transparent 66%); }
.bsg .bsg-assembly { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; animation: bsg-float var(--bsg-period) ease-in-out infinite; animation-delay: var(--bsg-delay); animation-play-state: paused; }
.bsg .bsg-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; pointer-events: none; user-select: none; }
.bsg .bsg-avatar { position: absolute; left: var(--bsg-x); top: var(--bsg-y); width: var(--bsg-size); height: var(--bsg-size); border-radius: 50%; transform: translate(-50%, -50%); overflow: hidden; background: radial-gradient(circle at 35% 28%, #e8dbf5, #8694b9 88%); box-shadow: inset 0 0 22px #0002; z-index: 1; }
.bsg .bsg-avatar::before { content: ""; position: absolute; width: 31%; height: 31%; border-radius: 50%; top: 20%; left: 34.5%; background: linear-gradient(145deg, #ffffffb0, #fff7); }
.bsg .bsg-avatar::after { content: ""; position: absolute; width: 65%; height: 56%; border-radius: 50% 50% 18% 18%; top: 57%; left: 17.5%; background: linear-gradient(145deg, #ffffffa0, #fff4); }
.bsg .bsg-particle { position: absolute; width: 10px; height: 10px; background: var(--bsg-accent); opacity: 0; z-index: 3; animation: bsg-twinkle 5.5s ease-in-out infinite; animation-play-state: paused; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.bsg .bsg-particle-a { left: 10%; top: 53%; animation-delay: -1s; }
.bsg .bsg-particle-b { right: 9%; top: 38%; animation-delay: -3s; width: 7px; height: 7px; }
.bsg .bsg-particle-c { right: 18%; bottom: 17%; animation-delay: -4.5s; width: 6px; height: 6px; }
.bsg .bsg-deer .bsg-particle { clip-path: none; border-radius: 75% 5% 75% 20%; animation-name: bsg-petal; width: 7px; height: 11px; }
.bsg .bsg-whale .bsg-particle { clip-path: none; border-radius: 50%; background: transparent; border: 1px solid #a6d6ef; animation-name: bsg-bubble; }
.bsg .bsg-card[data-animating="true"] .bsg-assembly, .bsg .bsg-card[data-animating="true"] .bsg-particle { animation-play-state: running; }
.bsg .bsg-card-copy { padding: 12px 24px 28px; }
.bsg .bsg-card-title { color: var(--bsg-text); font-size: 22px; font-weight: 650; line-height: 1.4; letter-spacing: .02em; margin: 0; }
.bsg .bsg-cta-row { display: flex; justify-content: center; padding-top: 30px; }
.bsg .bsg-download { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 25px; border: 1px solid #a0b9fa; border-radius: 12px; text-decoration: none; color: #061224; background: #7599f5; border-color: #a0b9fa; padding-inline: 20px; gap: 20px; font-size: 16px; font-weight: 650; white-space: nowrap; }
.bsg .bsg-download:hover { background: #a3baf9; }
@keyframes bsg-float { 0%, 100% { transform: translateY(2px) rotate(-.25deg); } 50% { transform: translateY(-4px) rotate(.25deg); } }
@keyframes bsg-twinkle { 0%, 18%, 78%, 100% { opacity: 0; transform: scale(.5); } 40%, 55% { opacity: .9; transform: scale(1); } }
@keyframes bsg-petal { 0%, 12% { opacity: 0; transform: translateY(-9px) rotate(0); } 32% { opacity: .75; } 72% { opacity: .4; } 100% { opacity: 0; transform: translate(9px, 30px) rotate(70deg); } }
@keyframes bsg-bubble { 0%, 10% { opacity: 0; transform: translateY(12px) scale(.6); } 35%, 55% { opacity: .65; } 90%, 100% { opacity: 0; transform: translateY(-15px) scale(1.05); } }
@media (max-width: 1100px) {
  .bsg .bsg-shell { width: calc(100% - 56px); }
  .bsg .bsg-heading { align-items: start; }
  .bsg .bsg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bsg .bsg-stage { aspect-ratio: 1; max-height: 390px; }
  .bsg .bsg-cta-row { justify-content: center; }
}
@media (max-width: 600px) {
  .bsg { padding: 28px 0 34px; margin: 20px 0 26px; }
  .bsg .bsg-shell { width: calc(100% - 32px); }
  .bsg .bsg-heading { display: block; padding: 26px 0 24px; }
  .bsg .bsg-title { font-size: 28px; line-height: 1.4; margin-bottom: 12px; }
  .bsg .bsg-cards { grid-template-columns: 1fr; gap: 16px; }
  .bsg .bsg-card-copy { padding: 6px 87px 25px 23px; }
  .bsg .bsg-card-title { font-size: 23px; }
  .bsg .bsg-cta-row { justify-content: flex-start; padding-top: 24px; }
  .bsg .bsg-download { align-self: flex-start; font-size: 13px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bsg .bsg-assembly, .bsg .bsg-particle { animation: none; }
}

.bsg .bsg-download:focus-visible { outline: 3px solid #7599f5; outline-offset: 4px; }

/* Homepage concerns stay above the artwork and clear of its controls. */
.sale-home .concern-hero .match-copy { min-width: 0; }
.sale-home .concern-hero .match-copy h1 { white-space: normal; margin-bottom: 22px; }
.sale-home .concern-hero .hero-benefits { display: grid; gap: 5px; margin: 0 0 28px; color: #d6e4f8; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.65; }
.sale-home .concern-hero .hero-benefits strong { color: #9fc3fa; font-weight: 650; }
.sale-home .concern-hero .hero-benefits span { font-weight: 500; }
.sale-home .concern-hero .concern-art { margin: 0; padding-top: 136px; min-width: 0; }
.sale-home .concern-hero .concern-bubbles { position: absolute; inset: 0 0 auto; height: 128px; z-index: 3; pointer-events: none; }
.sale-home .concern-hero .concern-bubble { position: absolute; display: block; max-width: 100%; padding: 10px 16px; border: 1px solid #6f9ad066; border-radius: 18px; color: #eaf3ff; background: #122a44; box-shadow: 0 8px 20px #02091433; font-size: clamp(14px, 1.2vw, 17px); font-weight: 600; line-height: 1.45; white-space: nowrap; animation: concern-bubble-float 7s ease-in-out infinite; }
.sale-home .concern-hero .concern-bubble::after { content: ""; position: absolute; bottom: -6px; left: 25px; width: 10px; height: 10px; border-right: 1px solid #6f9ad066; border-bottom: 1px solid #6f9ad066; background: #122a44; transform: rotate(45deg); }
.sale-home .concern-hero .concern-bubble-one { top: 2px; left: 2%; }
.sale-home .concern-hero .concern-bubble-two { top: 18px; right: 4%; animation-delay: -1.8s; }
.sale-home .concern-hero .concern-bubble-three { top: 68px; left: 14%; animation-delay: -3.5s; }
.sale-home .concern-hero .concern-bubble-four { top: 78px; right: 0; animation-delay: -5.2s; }
.sale-home .concern-hero .concern-bubble-two::after, .sale-home .concern-hero .concern-bubble-four::after { right: 25px; left: auto; }
@keyframes concern-bubble-float { 0%, 100% { transform: translateY(0); opacity: .95; } 50% { transform: translateY(-3px); opacity: 1; } }

/* The genuine ICP record occupies the existing middle footer cell. */
.sale-home .business-footer .footer-icp { display: inline-flex; align-items: center; justify-self: start; align-self: center; min-height: 44px; max-width: 100%; padding: 8px 0; color: #b0c9ec; font-size: 14px; line-height: 1.6; text-decoration: none; text-underline-offset: 4px; overflow-wrap: anywhere; }
.sale-home .business-footer .footer-icp:hover { color: #eaf3ff; text-decoration: underline; }
.sale-home .business-footer .footer-icp:focus-visible { outline: 2px solid #7599f5; outline-offset: 4px; }

@media (max-width: 760px) {
  .sale-home .concern-hero .concern-art { display: flex; flex-direction: column; padding-top: 0; margin-top: 20px; }
  .sale-home .concern-hero .concern-bubbles { position: relative; inset: auto; order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; height: auto; margin-bottom: 22px; }
  .sale-home .concern-hero .concern-bubble { position: relative; inset: auto; width: fit-content; justify-self: center; padding: 9px 12px; font-size: 14px; }
  .sale-home .concern-hero .hero-benefits { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sale-home .concern-hero .concern-bubble { animation: none; }
}