/* Microsite look options (My Website > Look). Plain CSS on purpose: it needs no build step.
   Loaded last in the head, after the Tailwind sheet and the theme tokens. */

/* ── Hero: how much the cover photo is darkened ─────────────────────────── */
.ms-hero-scrim { background: rgba(0, 0, 0, var(--ms-hero-scrim, .35)); }
/* The gradient above the scrim follows the same choice, so "light" really is light and
   "strong" holds text over a busy photo. */
.ms-hero:not([data-hero-dark="1"]) .ms-hero-overlay {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, calc(var(--ms-hero-scrim, .35) * 1.1)),
    rgba(0, 0, 0, calc(var(--ms-hero-scrim, .35) * .45)) 55%,
    var(--ms-hero-fade, var(--color-background)));
}

/* ── Hero: headline centred ─────────────────────────────────────────────── */
.ms-hero[data-hero-layout="center"] .ms-hero-inner { justify-content: center; align-items: center; text-align: center; padding-bottom: 6rem; }
.ms-hero[data-hero-layout="center"] .ms-hero-copy { max-width: 56rem; }
.ms-hero[data-hero-layout="center"] #ms-hero-sub { margin-left: auto; margin-right: auto; }
.ms-hero[data-hero-layout="center"] .ms-hero-actions { justify-content: center; }

/* ── Hero: text beside the photo ────────────────────────────────────────── */
/* The words sit on the page colour, so they are readable whatever the photo is. */
.ms-hero[data-hero-layout="split"] {
  --ms-hero-color: var(--color-foreground, var(--foreground)) !important;
  display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0;
  background: var(--color-background, var(--background));
}
.ms-hero[data-hero-layout="split"] .ms-hero-scrim,
.ms-hero[data-hero-layout="split"] .ms-hero-overlay { display: none; }
.ms-hero[data-hero-layout="split"] .ms-hero-photo { position: relative; inset: auto; height: 46dvh; min-height: 260px; }
.ms-hero[data-hero-layout="split"] .ms-hero-inner { min-height: 0; justify-content: center; max-width: none; padding: 3rem 1.5rem 3.5rem; }
.ms-hero[data-hero-layout="split"] .ms-hero-outline-btn { border-color: color-mix(in srgb, var(--color-foreground, var(--foreground)) 35%, transparent); backdrop-filter: none; }
.ms-hero[data-hero-layout="split"] #ms-announcement { position: relative; grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ms-hero[data-hero-layout="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 78dvh; }
  .ms-hero[data-hero-layout="split"] .ms-hero-photo { grid-column: 2; grid-row: 1 / span 2; height: 100%; min-height: 78dvh; }
  .ms-hero[data-hero-layout="split"] .ms-hero-inner { grid-column: 1; grid-row: 2; padding: 4rem clamp(2rem, 5vw, 5rem); align-self: center; }
  .ms-hero[data-hero-layout="split"] #ms-announcement { grid-row: 1; }
  .ms-hero[data-hero-layout="split"] .ms-d1 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 1; }
}

/* ── Home page numbers: one even row, whatever the count ───────────────── */
@media (min-width: 640px) {
  .ms-stats { grid-template-columns: repeat(min(var(--ms-stat-cols, 3), 2), minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ms-stats { grid-template-columns: repeat(var(--ms-stat-cols, 3), minmax(0, 1fr)); }
}

/* ── Inside the dashboard's preview frame ───────────────────────────────── */
/* Nothing floats over the page being judged, and nothing waits to fade in. */
.ms-preview #ms-cart-fab { display: none; }
.ms-preview .ms-reveal { opacity: 1; transform: none; transition: none; }