/* Individual Ink & Ember cutouts over a native CSS surface. Typography and the
   primary button follow the homepage; decorative placement is art-directed. */
.home-close-commerce {
  --close-text: #fff8f5;
  --close-muted: #c9bbc4;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  max-width: 1280px;
  aspect-ratio: 1585 / 992;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 28px;
  color: var(--close-text);
  background: radial-gradient(ellipse at 105% 120%, #ffba7a 0%, #f2624b 19%, #b027424d 47%, transparent 70%),
    radial-gradient(ellipse at 48% 110%, #6e183c5c, transparent 61%),
    linear-gradient(145deg, #1e0c1a 0%, #160b14 57%, #52112b 100%);
}
.home-close-commerce[data-surface="light"] {
  --close-text: #3b1c30;
  --close-muted: #75566a;
  background: radial-gradient(ellipse at 105% 120%, #ffc583 0%, #ffbc8280 29%, transparent 69%),
    radial-gradient(ellipse at 0% 85%, #f2b4c559, transparent 58%),
    linear-gradient(140deg, #fff8f5 0%, #fff1e9 60%, #ffd3be 100%);
}
.home-close-art-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-close-art-frame { position: relative; display: block; width: 100%; height: 100%; }
.home-commerce-object, .home-commerce-glyph { --art-tilt: var(--tilt, 0deg); }
/* Individual translate composes with each element's separate hover transform.
   Different phases and durations keep the perimeter gently alive on arrival. */
.home-close-commerce[data-cta-motion="individual"] .home-commerce-object,
.home-close-commerce[data-cta-motion="individual"] .home-commerce-glyph {
  animation: home-commerce-float var(--float-duration, 7s) cubic-bezier(.45,0,.55,1) var(--float-delay, 0s) infinite;
}
.home-close-commerce[data-cta-paused="true"] .home-commerce-object,
.home-close-commerce[data-cta-paused="true"] .home-commerce-glyph { animation-play-state: paused; }
@keyframes home-commerce-float {
  0%, 100% { translate: calc(-1 * var(--float-x)) calc(-1 * var(--float-y)); }
  25% { translate: var(--float-x) calc(-.4 * var(--float-y)); }
  50% { translate: var(--float-x) var(--float-y); }
  75% { translate: calc(-1 * var(--float-x)) calc(.4 * var(--float-y)); }
}
/* Each illustration gets its own measured alpha bounds and visual size. The
   outer box follows the visible artwork, rather than its transparent canvas. */
.home-commerce-object {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: var(--aspect);
  transform: translate(-50%, -50%) rotate(var(--art-tilt));
}
.home-commerce-object img {
  display: block;
  position: absolute;
  left: var(--canvas-left, 0%);
  top: var(--canvas-top, 0%);
  width: var(--canvas-width, 100%);
  height: auto;
  max-width: none;
  object-fit: contain;
}
.home-commerce-glyph {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--glyph-size, clamp(14px, 1.7cqw, 24px));
  height: auto;
  color: var(--glyph-color, #ef6b51);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-50%, -50%) rotate(var(--art-tilt));
}
.home-commerce-glyph--mobile { display: none; }
.home-close-copy { position: relative; width: 63%; max-width: 780px; padding: 28px 0; text-align: center; }
.home-page .home-close-commerce h2 {
  margin: 0;
  color: var(--close-text);
  font-size: clamp(32px, 3.55vw, 50px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.home-close-commerce .home-close-description {
  margin: 20px 0 0;
  color: var(--close-muted);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -.025em;
}
.home-close-actions { display: flex; justify-content: center; margin-top: 26px; }
.home-close-commerce .home-close-credit {
  margin: 13px 0 0;
  color: var(--close-muted);
  font-size: 14px;
  line-height: 1.5;
}
.home-page .home-close-commerce :focus-visible { outline-color: #ffbc82; }
.home-page .home-close-commerce[data-surface="light"] :focus-visible { outline-color: #6e254b; }

@media (min-width: 701px) and (max-width: 1000px) {
  .home-close-commerce { min-height: 560px; aspect-ratio: auto; }
  .home-close-copy { width: 65%; }
}
@media (max-width: 800px) {
  .home-close-commerce .home-close-description { font-size: 17px; }
}
@media (max-width: 700px) {
  .home-close-commerce {
    width: 100%;
    min-width: 0;
    aspect-ratio: auto;
    height: calc((100vw - 2 * var(--gut)) * 1.666667);
    min-height: 640px;
    border-radius: 24px;
  }
  .home-close-copy { width: calc(100% - 46px); max-width: 450px; padding: 30px 0; }
  .home-commerce-object {
    --art-tilt: var(--mtilt, var(--tilt, 0deg));
    left: var(--mx, var(--x));
    top: var(--my, var(--y));
    width: var(--mw, var(--w));
  }
  .home-commerce-object[data-mobile="false"], .home-commerce-glyph[data-mobile="false"] { display: none; }
  .home-commerce-glyph {
    left: var(--mx, var(--x));
    top: var(--my, var(--y));
    width: var(--mobile-glyph-size, 16px);
  }
  .home-commerce-glyph--mobile { display: block; }
  .home-close-description .desktop-break { display: none; }
}
@media (max-width: 640px) {
  .home-close-commerce .home-close-description { font-size: 16px; }
  .home-close-commerce .home-close-primary { --h: 46px; padding-inline: 18px; font-size: 14px; }
  .home-close-commerce .home-close-credit { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-commerce-object, .home-commerce-glyph {
    animation: none !important;
    translate: none !important;
    transform: translate(-50%, -50%) rotate(var(--art-tilt)) !important;
  }
  .home-close-commerce .home-close-primary { transition: none; }
  .home-close-commerce .home-close-primary:hover,
  .home-close-commerce .home-close-primary:active { transform: none; }
}
.home-close-commerce[data-cta-motion="still"] .home-commerce-object,
.home-close-commerce[data-cta-motion="still"] .home-commerce-glyph,
.sv-settle .home-commerce-object, .sv-settle .home-commerce-glyph {
  animation: none !important;
  translate: none !important;
  transform: translate(-50%, -50%) rotate(var(--art-tilt)) !important;
}