/* Desktop-only refinement of the local Lakers Sunset comparison.
   The shared homepage and earlier color previews are left untouched. */
.mf-site[data-refinement=stripe] {
  overflow-x: clip;
  --ref-space-1: 8px;
  --ref-space-2: 16px;
  --ref-space-3: 24px;
  --ref-space-4: 40px;
  --ref-space-5: 64px;
  --ref-space-6: 96px;
  --ref-radius-control: 12px;
  --ref-radius-card: 24px;
  --ref-radius-panel: 32px;
  --ref-section: #f8f7ff;
  --ref-card-shadow: 0 24px 64px #2b1a470d;
  --ref-card-shadow-hover: 0 32px 72px #2b1a471c;
  --ref-preview-shadow: 0 32px 72px #2b1a472b;
}

.mf-site[data-refinement=stripe][data-home-theme=dark] {
  --ref-section: #201a2b;
  --ref-card-shadow: 0 24px 64px #0b071425;
  --ref-card-shadow-hover: 0 32px 72px #0b07144d;
  --ref-preview-shadow: 0 32px 72px #0b071466;
}

/* The bundled DM Sans keeps typography local and consistent with the product. */
.mf-site[data-refinement=stripe] h1,
.mf-site[data-refinement=stripe] h2,
.mf-site[data-refinement=stripe] h3 { letter-spacing: -.025em; }
.mf-site[data-refinement=stripe] h1 { letter-spacing: -.035em; }
.mf-site[data-refinement=stripe] .mf-hero h1 { margin-block: var(--ref-space-3); line-height: 1.04; }
.mf-site[data-refinement=stripe] .mf-lead { line-height: 1.6; }
.mf-site[data-refinement=stripe] .mf-actions { gap: var(--ref-space-3); margin-block: var(--ref-space-4) var(--ref-space-2); }
.mf-site[data-refinement=stripe] .mf-button,
.mf-site[data-refinement=stripe] .mf-account-link,
.mf-site[data-refinement=stripe] .mf-home-theme-toggle { border-radius: var(--ref-radius-control); }
.mf-site[data-refinement=stripe] .mf-button {
  min-height: 56px;
  padding: var(--ref-space-2) var(--ref-space-3);
  box-shadow: 0 12px 32px #6b2fbf1a;
}
.mf-site[data-refinement=stripe] .mf-button-small,
.mf-site[data-refinement=stripe] .mf-account-link { min-height: 48px; padding: 12px var(--ref-space-2); }
.mf-site[data-refinement=stripe] .mf-home-theme-toggle { width: 48px; height: 48px; }
.mf-site[data-refinement=stripe][data-home-theme=dark] .mf-button { box-shadow: 0 12px 32px #ffd93d14; }

/* Contained sunset color by day; luminous yellow leads over plum at night. */
.mf-site[data-refinement=stripe] .mf-hero-art {
  border-radius: var(--ref-radius-panel);
  box-shadow: 0 32px 72px #6b2fbf17;
}
.mf-site[data-refinement=stripe][data-home-theme=dark] .mf-hero-art {
  background:
    radial-gradient(ellipse at 8% 9%, #ffe36b 0%, transparent 45%),
    linear-gradient(125deg, #ffd93d 0%, #f7cb43 36%, #bd853c 58%, #6b2fbf 100%);
  box-shadow: 0 32px 72px #0b07144d;
}
.mf-site[data-refinement=stripe] .mf-preview {
  border-radius: var(--ref-radius-card);
  box-shadow: var(--ref-preview-shadow);
}
.mf-site[data-refinement=stripe] .mf-preview-label { margin-top: var(--ref-space-4) !important; }
.mf-site[data-refinement=stripe] .mf-preview-button { margin-top: var(--ref-space-3); border-radius: var(--ref-radius-control); }
.mf-site[data-refinement=stripe] .mf-preview-bottom { margin-top: var(--ref-space-4); }
.mf-site[data-refinement=stripe] .mf-floating-note { padding: var(--ref-space-2) var(--ref-space-3); border-radius: var(--ref-radius-control); }

/* A nearly white section band gives the three product cards a quiet frame. */
.mf-site[data-refinement=stripe] .mf-section {
  position: relative;
  isolation: isolate;
}
.mf-site[data-refinement=stripe] .mf-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--home-canvas) 0%, var(--ref-section) 19%, var(--ref-section) 81%, var(--home-canvas) 100%);
  pointer-events: none;
}
.mf-site[data-refinement=stripe] .mf-section-heading { margin-bottom: var(--ref-space-4); }
.mf-site[data-refinement=stripe] .mf-section-heading h2 { margin-block: var(--ref-space-2); }
.mf-site[data-refinement=stripe] .mf-cards { gap: var(--ref-space-3); }
.mf-site[data-view=home][data-refinement=stripe] .mf-card {
  padding: var(--ref-space-4);
  border-radius: var(--ref-radius-card);
  box-shadow: var(--ref-card-shadow);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.mf-site[data-view=home][data-refinement=stripe] .mf-card:nth-child(3) { border-width: 1px; }
.mf-site[data-refinement=stripe] .mf-card h3 { order: 0; }
.mf-site[data-refinement=stripe] .mf-card p { order: 1; margin-top: var(--ref-space-2); line-height: 1.6; }
.mf-site[data-refinement=stripe] .mf-card-demo {
  order: 2;
  height: 160px;
  margin: var(--ref-space-3) 0 0;
  border-radius: var(--ref-radius-control);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease;
}
.mf-site[data-refinement=stripe] .mf-card a { order: 3; padding-top: var(--ref-space-3); }
.mf-site[data-refinement=stripe] .mf-card a span { display: inline-block; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.mf-site[data-view=home][data-refinement=stripe] .mf-card:hover,
.mf-site[data-view=home][data-refinement=stripe] .mf-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--home-border-strong);
  box-shadow: var(--ref-card-shadow-hover);
}
.mf-site[data-refinement=stripe] .mf-card:hover .mf-card-demo,
.mf-site[data-refinement=stripe] .mf-card:focus-within .mf-card-demo {
  transform: translateY(-2px);
  border-color: var(--home-border-strong);
}
.mf-site[data-refinement=stripe] .mf-card:hover a span,
.mf-site[data-refinement=stripe] .mf-card:focus-within a span { transform: translate(3px, -3px); }
.mf-site[data-refinement=stripe] .mf-wide-note,
.mf-site[data-refinement=stripe] .mf-final-cta { border-radius: var(--ref-radius-panel); }
.mf-site[data-view=home][data-refinement=stripe] .mf-wide-note {
  min-height: 280px;
  padding: var(--ref-space-5);
  gap: var(--ref-space-5);
  border-color: #4b376b;
  background: linear-gradient(115deg, #2b1a47 0%, #38235f 57%, #28183f 100%);
  color: #f8f4ff;
}
.mf-site[data-view=home][data-refinement=stripe] .mf-wide-note::before {
  inset: 0;
  width: 100%;
  background:
    radial-gradient(circle at 88% -15%, transparent 0 190px, #d9c2f044 191px 192px, transparent 193px 285px, #d9c2f03d 286px 287px, transparent 288px 390px, #d9c2f033 391px 392px, transparent 393px),
    radial-gradient(circle at 5% 145%, transparent 0 175px, #d9c2f03d 176px 177px, transparent 178px 290px, #d9c2f033 291px 292px, transparent 293px);
  opacity: 1;
}
.mf-site[data-view=home][data-refinement=stripe] .mf-wide-note > div { position: relative; z-index: 1; }
.mf-site[data-view=home][data-refinement=stripe] .mf-wide-note h2 { color: #f8f4ff; }
.mf-site[data-view=home][data-refinement=stripe] .mf-wide-note .mf-eyebrow,
.mf-site[data-view=home][data-refinement=stripe] .mf-wide-note .mf-text-link { color: #ffd93d; }
.mf-site[data-view=home][data-refinement=stripe] .mf-wide-note p:not(.mf-eyebrow) { color: #ded5ed; }
.mf-site[data-refinement=stripe] .mf-wide-note h2 { margin-top: var(--ref-space-2); }
.mf-site[data-refinement=stripe] .mf-final-cta { padding: var(--ref-space-6) var(--ref-space-4); }
.mf-site[data-refinement=stripe] .mf-final-cta h2 { margin-bottom: var(--ref-space-4); }
.mf-site[data-refinement=stripe][data-home-theme=dark] .mf-final-cta {
  border: 1px solid #ffd93d59;
  background: linear-gradient(115deg, #291c43 0%, #382353 62%, #4c2b71 100%);
}
.mf-site[data-refinement=stripe][data-home-theme=dark] .mf-final-cta .mf-small-flower { color: #ffd93d; opacity: 1; }

@media (min-width: 1101px) {
  .mf-site[data-refinement=stripe] .mf-wrap { width: min(1280px, calc(100% - 80px)); }
  .mf-site[data-refinement=stripe] .mf-header {
    min-height: 88px;
    padding: var(--ref-space-2) max(var(--ref-space-4), calc((100vw - 1280px) / 2));
    gap: var(--ref-space-4);
  }
  .mf-site[data-refinement=stripe] .mf-nav { gap: var(--ref-space-4); }
  .mf-site[data-refinement=stripe] .mf-header-actions { gap: var(--ref-space-2); }
  .mf-site[data-refinement=stripe] .mf-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: var(--ref-space-3);
    min-height: 704px;
    padding-block: var(--ref-space-6);
  }
  .mf-site[data-refinement=stripe] .mf-hero-copy { grid-column: 1 / span 5; }
  .mf-site[data-refinement=stripe] .mf-hero-art { grid-column: 7 / -1; height: 480px; }
  .mf-site[data-refinement=stripe] .mf-preview { min-height: 376px; padding: var(--ref-space-3); }
  .mf-site[data-refinement=stripe] .mf-benefit-strip {
    min-height: 80px;
    gap: var(--ref-space-5);
    padding: var(--ref-space-3) var(--ref-space-4);
  }
  .mf-site[data-refinement=stripe] .mf-section { padding-block: var(--ref-space-6); }
  .mf-site[data-refinement=stripe] .mf-section-heading { text-align: left; }
  .mf-site[data-refinement=stripe] .mf-section-heading h2 { max-width: 720px; }
  .mf-site[data-refinement=stripe] .mf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mf-site[data-refinement=stripe] .mf-card { min-height: 440px; }
  .mf-site[data-refinement=stripe] .mf-wide-note { min-height: 320px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-site[data-refinement=stripe] .mf-final-cta { margin-block: var(--ref-space-6); }
  .mf-site[data-refinement=stripe] .mf-footer { padding-inline: max(var(--ref-space-4), calc((100vw - 1280px) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
  .mf-site[data-refinement=stripe] .mf-card,
  .mf-site[data-refinement=stripe] .mf-card-demo,
  .mf-site[data-refinement=stripe] .mf-card a span { transition: none; }
  .mf-site[data-refinement=stripe] .mf-card:hover,
  .mf-site[data-refinement=stripe] .mf-card:focus-within,
  .mf-site[data-refinement=stripe] .mf-card:hover .mf-card-demo,
  .mf-site[data-refinement=stripe] .mf-card:focus-within .mf-card-demo,
  .mf-site[data-refinement=stripe] .mf-card:hover a span,
  .mf-site[data-refinement=stripe] .mf-card:focus-within a span { transform: none; }
}